Fixes (#18552)

* Ensure config editor recalculates layout on error

* ensure empty lists are returned when lpr recognition model fails

* Add docs section for session_length

* clarify

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* clarify

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Catch missing file

* Improve graph axis colors

* Ensure playback rate controls are portaled to the video container in history view

On larger tablets in landscape view, the playback rate dropdown disappeared underneath the bottom bar. This small change ensures we use the correct container on the DropdownMenuContent so that the div is portaled correctly. The VideoControls are also used in motion review which does not pass in a container ref, so we can just fall back to the existing controlsContainer ref when it's undefined.

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/graph/LineGraph.tsx

@@ -106,6 +106,9 @@ export function CameraLineGraph({
         labels: {
           rotate: 0,
           formatter: formatTime,
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         axisBorder: {
           show: false,
@@ -118,6 +121,9 @@ export function CameraLineGraph({
         show: true,
         labels: {
           formatter: (val: number) => Math.ceil(val).toString(),
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         min: 0,
       },
@@ -138,7 +144,7 @@ export function CameraLineGraph({
                 className="size-2"
                 style={{ color: GRAPH_COLORS[labelIdx] }}
               />
-              <div className="text-xs text-muted-foreground">
+              <div className="text-xs text-secondary-foreground">
                 {t("cameras.label." + label)}
               </div>
               <div className="text-xs text-primary">
@@ -243,6 +249,9 @@ export function EventsPerSecondsLineGraph({
         labels: {
           rotate: 0,
           formatter: formatTime,
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         axisBorder: {
           show: false,
@@ -255,6 +264,9 @@ export function EventsPerSecondsLineGraph({
         show: true,
         labels: {
           formatter: (val: number) => Math.ceil(val).toString(),
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         min: 0,
       },
@@ -268,7 +280,7 @@ export function EventsPerSecondsLineGraph({
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">
-        <div className="text-xs text-muted-foreground">{name}</div>
+        <div className="text-xs text-secondary-foreground">{name}</div>
         <div className="text-xs text-primary">
           {lastValue}
           {unit}

web/src/components/graph/SystemGraph.tsx

@@ -138,6 +138,9 @@ export function ThresholdBarGraph({
         labels: {
           rotate: 0,
           formatter: formatTime,
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         axisBorder: {
           show: false,
@@ -150,6 +153,9 @@ export function ThresholdBarGraph({
         show: true,
         labels: {
           formatter: (val: number) => Math.ceil(val).toString(),
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         min: 0,
         max: yMax,
@@ -180,7 +186,7 @@ export function ThresholdBarGraph({
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">
-        <div className="text-xs text-muted-foreground">{name}</div>
+        <div className="text-xs text-secondary-foreground">{name}</div>
         <div className="text-xs text-primary">
           {lastValue}
           {unit}

web/src/components/player/VideoControls.tsx

@@ -250,7 +250,9 @@ export default function VideoControls({
         >
           <DropdownMenuTrigger>{`${playbackRate}x`}</DropdownMenuTrigger>
           <DropdownMenuContent
-            portalProps={{ container: controlsContainerRef.current }}
+            portalProps={{
+              container: containerRef?.current ?? controlsContainerRef.current,
+            }}
           >
             <DropdownMenuRadioGroup
               onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}