UI fixes (#22814)

* display area as proper percentage in debug view

* match replay objects list with debug view

* motion search fixes

- tweak progress bar to exclude heatmap and inactive segments
- show metrics immediately on search start
- fix preview frame loading race
- fix polygon missing after dialog remount
- don't try to drag the image when dragging vertex of polygon

* add activity indicator to storage metrics

* make sub label query for events API endpoints case insensitive

frigate/api/chat.py

@@ -407,7 +407,7 @@ async def _execute_search_objects(
     query_params = EventsQueryParams(
         cameras=arguments.get("camera", "all"),
         labels=arguments.get("label", "all"),
-        sub_labels=arguments.get("sub_label", "all").lower(),
+        sub_labels=arguments.get("sub_label", "all"),  # case-insensitive on the backend
         zones=zones,
         zone=zones,
         after=after,

frigate/api/event.py

@@ -199,13 +199,18 @@ def events(
             sub_label_clauses.append((Event.sub_label.is_null()))
 
         for label in filtered_sub_labels:
+            lowered = label.lower()
             sub_label_clauses.append(
-                (Event.sub_label.cast("text") == label)
+                (fn.LOWER(Event.sub_label.cast("text")) == lowered)
-            )  # include exact matches
+            )  # include exact matches (case-insensitive)
 
-            # include this label when part of a list
+            # include this label when part of a list (LIKE is case-insensitive in sqlite for ASCII)
-            sub_label_clauses.append((Event.sub_label.cast("text") % f"*{label},*"))
+            sub_label_clauses.append(
-            sub_label_clauses.append((Event.sub_label.cast("text") % f"*, {label}*"))
+                (fn.LOWER(Event.sub_label.cast("text")) % f"*{lowered},*")
+            )
+            sub_label_clauses.append(
+                (fn.LOWER(Event.sub_label.cast("text")) % f"*, {lowered}*")
+            )
 
         sub_label_clause = reduce(operator.or_, sub_label_clauses)
         clauses.append((sub_label_clause))
@@ -609,13 +614,18 @@ def events_search(
             sub_label_clauses.append((Event.sub_label.is_null()))
 
         for label in filtered_sub_labels:
+            lowered = label.lower()
             sub_label_clauses.append(
-                (Event.sub_label.cast("text") == label)
+                (fn.LOWER(Event.sub_label.cast("text")) == lowered)
-            )  # include exact matches
+            )  # include exact matches (case-insensitive)
 
-            # include this label when part of a list
+            # include this label when part of a list (LIKE is case-insensitive in sqlite for ASCII)
-            sub_label_clauses.append((Event.sub_label.cast("text") % f"*{label},*"))
+            sub_label_clauses.append(
-            sub_label_clauses.append((Event.sub_label.cast("text") % f"*, {label}*"))
+                (fn.LOWER(Event.sub_label.cast("text")) % f"*{lowered},*")
+            )
+            sub_label_clauses.append(
+                (fn.LOWER(Event.sub_label.cast("text")) % f"*, {lowered}*")
+            )
 
         event_filters.append((reduce(operator.or_, sub_label_clauses)))
 

web/src/components/overlay/DebugDrawingLayer.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/popover";
 import Konva from "konva";
 import { useResizeObserver } from "@/hooks/resize-observer";
+import { useTranslation } from "react-i18next";
 
 type DebugDrawingLayerProps = {
   containerRef: React.RefObject<HTMLDivElement | null>;
@@ -28,6 +29,7 @@ function DebugDrawingLayer({
   } | null>(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
+  const { t } = useTranslation(["common"]);
   const stageRef = useRef<Konva.Stage>(null);
 
   const [{ width: containerWidth }] = useResizeObserver(containerRef);
@@ -153,10 +155,13 @@ function DebugDrawingLayer({
               <div className="flex flex-col text-primary">
                 Area:{" "}
                 <span className="text-sm text-primary-variant">
-                  px: {calculateArea().toFixed(0)}
+                  {t("information.pixels", {
+                    ns: "common",
+                    area: calculateArea().toFixed(0),
+                  })}
                 </span>
                 <span className="text-sm text-primary-variant">
-                  %: {calculateAreaPercentage().toFixed(4)}
+                  {(calculateAreaPercentage() * 100).toFixed(2)}%
                 </span>
               </div>
               <div className="flex flex-col text-primary">

web/src/pages/Replay.tsx

@@ -41,6 +41,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { Card } from "@/components/ui/card";
 import { ObjectType } from "@/types/ws";
 import WsMessageFeed from "@/components/ws/WsMessageFeed";
 import { ConfigSectionTemplate } from "@/components/config-form/sections/ConfigSectionTemplate";
@@ -633,7 +634,7 @@ type ObjectListProps = {
 };
 
 function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
-  const { t } = useTranslation(["views/settings"]);
+  const { t } = useTranslation(["views/settings", "common"]);
 
   const colormap = useMemo(() => {
     if (!config) {
@@ -660,73 +661,80 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
   }
 
   return (
-    <div className="flex w-full flex-col gap-2">
+    <div className="scrollbar-container relative flex w-full flex-col overflow-y-auto">
       {objects.map((obj: ObjectType) => {
         return (
-          <div
+          <Card className="mb-1 p-2 text-sm" key={obj.id}>
-            key={obj.id}
-            className="flex flex-col rounded-lg bg-secondary/30 p-2"
-          >
             <div className="flex flex-row items-center gap-3 pb-1">
-              <div
+              <div className="flex flex-1 flex-row items-center justify-start p-3 pl-1">
-                className="rounded-lg p-2"
+                <div
-                style={{
+                  className="rounded-lg p-2"
-                  backgroundColor: obj.stationary
+                  style={{
-                    ? "rgb(110,110,110)"
+                    backgroundColor: obj.stationary
-                    : getColorForObjectName(obj.label),
+                      ? "rgb(110,110,110)"
-                }}
+                      : getColorForObjectName(obj.label),
-              >
+                  }}
-                {getIconForLabel(obj.label, "object", "size-4 text-white")}
+                >
+                  {getIconForLabel(obj.label, "object", "size-5 text-white")}
+                </div>
+                <div className="ml-3 text-lg">
+                  {getTranslatedLabel(obj.label)}
+                </div>
               </div>
-              <div className="text-sm font-medium">
+              <div className="flex w-8/12 flex-row items-center justify-end">
-                {getTranslatedLabel(obj.label)}
+                <div className="text-md mr-2 w-1/3">
+                  <div className="flex flex-col items-end justify-end">
+                    <p className="mb-1.5 text-sm text-primary-variant">
+                      {t("debug.objectShapeFilterDrawing.score", {
+                        ns: "views/settings",
+                      })}
+                    </p>
+                    {obj.score ? (obj.score * 100).toFixed(1).toString() : "-"}%
+                  </div>
+                </div>
+                <div className="text-md mr-2 w-1/3">
+                  <div className="flex flex-col items-end justify-end">
+                    <p className="mb-1.5 text-sm text-primary-variant">
+                      {t("debug.objectShapeFilterDrawing.ratio", {
+                        ns: "views/settings",
+                      })}
+                    </p>
+                    {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
+                  </div>
+                </div>
+                <div className="text-md mr-2 w-1/3">
+                  <div className="flex flex-col items-end justify-end">
+                    <p className="mb-1.5 text-sm text-primary-variant">
+                      {t("debug.objectShapeFilterDrawing.area", {
+                        ns: "views/settings",
+                      })}
+                    </p>
+                    {obj.area && cameraConfig ? (
+                      <div className="text-end">
+                        <div className="text-xs">
+                          {t("information.pixels", {
+                            ns: "common",
+                            area: obj.area,
+                          })}
+                        </div>
+                        <div className="text-xs">
+                          {(
+                            (obj.area /
+                              (cameraConfig.detect.width *
+                                cameraConfig.detect.height)) *
+                            100
+                          ).toFixed(2)}
+                          %
+                        </div>
+                      </div>
+                    ) : (
+                      "-"
+                    )}
+                  </div>
+                </div>
               </div>
             </div>
-            <div className="flex flex-col gap-1 pl-1 text-xs text-primary-variant">
+          </Card>
-              <div className="flex items-center justify-between">
-                <span>
-                  {t("debug.objectShapeFilterDrawing.score", {
-                    ns: "views/settings",
-                  })}
-                  :
-                </span>
-                <span className="text-primary">
-                  {obj.score ? (obj.score * 100).toFixed(1) : "-"}%
-                </span>
-              </div>
-              {obj.ratio && (
-                <div className="flex items-center justify-between">
-                  <span>
-                    {t("debug.objectShapeFilterDrawing.ratio", {
-                      ns: "views/settings",
-                    })}
-                    :
-                  </span>
-                  <span className="text-primary">{obj.ratio.toFixed(2)}</span>
-                </div>
-              )}
-              {obj.area && cameraConfig && (
-                <div className="flex items-center justify-between">
-                  <span>
-                    {t("debug.objectShapeFilterDrawing.area", {
-                      ns: "views/settings",
-                    })}
-                    :
-                  </span>
-                  <span className="text-primary">
-                    {obj.area} px (
-                    {(
-                      (obj.area /
-                        (cameraConfig.detect.width *
-                          cameraConfig.detect.height)) *
-                      100
-                    ).toFixed(2)}
-                    %)
-                  </span>
-                </div>
-              )}
-            </div>
-          </div>
         );
       })}
     </div>

web/src/views/motion-search/MotionSearchDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { isDesktop, isIOS, isMobile } from "react-device-detect";
 import { FaArrowRight, FaCalendarAlt, FaCheckCircle } from "react-icons/fa";
@@ -42,7 +42,6 @@ import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
 
 import { useApiHost } from "@/api";
-import { useResizeObserver } from "@/hooks/resize-observer";
 import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getUTCOffset } from "@/utils/dateUtil";
 import useSWR from "swr";
@@ -113,11 +112,35 @@ export default function MotionSearchDialog({
 }: MotionSearchDialogProps) {
   const { t } = useTranslation(["views/motionSearch", "common"]);
   const apiHost = useApiHost();
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(
-  const [{ width: containerWidth, height: containerHeight }] =
+    null,
-    useResizeObserver(containerRef);
+  );
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const containerWidth = containerSize.width;
+  const containerHeight = containerSize.height;
   const [imageLoaded, setImageLoaded] = useState(false);
 
+  useEffect(() => {
+    if (!containerNode) {
+      return;
+    }
+
+    const measure = () => {
+      const rect = containerNode.getBoundingClientRect();
+      setContainerSize((prev) =>
+        prev.width === rect.width && prev.height === rect.height
+          ? prev
+          : { width: rect.width, height: rect.height },
+      );
+    };
+
+    measure();
+
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(containerNode);
+    return () => observer.disconnect();
+  }, [containerNode]);
+
   const cameraConfig = useMemo(() => {
     if (!selectedCamera) return undefined;
     return config.cameras[selectedCamera];
@@ -258,16 +281,16 @@ export default function MotionSearchDialog({
                     }}
                   >
                     <div
-                      ref={containerRef}
+                      ref={setContainerNode}
                       className="relative flex w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary"
                       style={{ aspectRatio: "16 / 9" }}
                     >
-                      {selectedCamera && cameraConfig && imageSize.width > 0 ? (
+                      {selectedCamera && cameraConfig ? (
                         <div
                           className="relative"
                           style={{
-                            width: imageSize.width,
+                            width: imageSize.width || "100%",
-                            height: imageSize.height,
+                            height: imageSize.height || "100%",
                           }}
                         >
                           <img
@@ -277,6 +300,11 @@ export default function MotionSearchDialog({
                             src={`${apiHost}api/${selectedCamera}/latest.jpg?h=500`}
                             className="h-full w-full object-contain"
                             onLoad={() => setImageLoaded(true)}
+                            ref={(node) => {
+                              if (node?.complete && node.naturalWidth > 0) {
+                                setImageLoaded(true);
+                              }
+                            }}
                           />
                           {!imageLoaded && (
                             <div className="absolute inset-0 flex items-center justify-center">

web/src/views/motion-search/MotionSearchROICanvas.tsx

@@ -1,10 +1,9 @@
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Stage, Layer, Line, Circle, Image } from "react-konva";
 import Konva from "konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { flattenPoints } from "@/utils/canvasUtil";
 import { cn } from "@/lib/utils";
-import { useResizeObserver } from "@/hooks/resize-observer";
 
 type MotionSearchROICanvasProps = {
   camera: string;
@@ -30,18 +29,40 @@ export default function MotionSearchROICanvas({
   motionHeatmap,
   showMotionHeatmap = false,
 }: MotionSearchROICanvasProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<Konva.Stage>(null);
-  const [{ width: containerWidth, height: containerHeight }] =
+  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(
-    useResizeObserver(containerRef);
+    null,
-
-  const stageSize = useMemo(
-    () => ({
-      width: containerWidth > 0 ? Math.ceil(containerWidth) : 0,
-      height: containerHeight > 0 ? Math.ceil(containerHeight) : 0,
-    }),
-    [containerHeight, containerWidth],
   );
+  const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!containerNode) {
+      return;
+    }
+
+    const apply = (width: number, height: number) => {
+      setStageSize((prev) => {
+        const next = {
+          width: width > 0 ? Math.ceil(width) : 0,
+          height: height > 0 ? Math.ceil(height) : 0,
+        };
+        if (prev.width === next.width && prev.height === next.height) {
+          return prev;
+        }
+        return next;
+      });
+    };
+
+    apply(containerNode.clientWidth, containerNode.clientHeight);
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      apply(entry.contentRect.width, entry.contentRect.height);
+    });
+    observer.observe(containerNode);
+    return () => observer.disconnect();
+  }, [containerNode]);
 
   const videoRect = useMemo(() => {
     const stageWidth = stageSize.width;
@@ -317,7 +338,7 @@ export default function MotionSearchROICanvas({
 
   return (
     <div
-      ref={containerRef}
+      ref={setContainerNode}
       className={cn(
         "absolute inset-0 z-10",
         isInteractive ? "pointer-events-auto" : "pointer-events-none",
@@ -385,6 +406,8 @@ export default function MotionSearchROICanvas({
                   stroke="white"
                   strokeWidth={2}
                   draggable={!isDrawing}
+                  onMouseDown={(e) => e.evt.stopPropagation()}
+                  onTouchStart={(e) => e.evt.stopPropagation()}
                   onDragMove={(e) => handlePointDragMove(e, index)}
                   onMouseOver={(e) => handleMouseOverPoint(e, index)}
                   onMouseOut={(e) => handleMouseOutPoint(e, index)}

web/src/views/motion-search/MotionSearchView.tsx

@@ -994,15 +994,20 @@ export default function MotionSearchView({
   );
 
   const progressMetrics = jobStatus?.metrics ?? searchMetrics;
-  const progressValue =
+  const progressValue = (() => {
-    progressMetrics && progressMetrics.segments_scanned > 0
+    if (!progressMetrics || progressMetrics.segments_scanned <= 0) {
-      ? Math.min(
+      return 0;
-          100,
+    }
-          (progressMetrics.segments_processed /
+    const skipped =
-            progressMetrics.segments_scanned) *
+      progressMetrics.heatmap_roi_skip_segments +
-            100,
+      progressMetrics.metadata_inactive_segments;
-        )
+    const totalWork = progressMetrics.segments_scanned - skipped;
-      : 0;
+    const doneWork = progressMetrics.segments_processed - skipped;
+    if (totalWork <= 0) {
+      return 100;
+    }
+    return Math.min(100, Math.max(0, (doneWork / totalWork) * 100));
+  })();
 
   const resultsPanel = (
     <>
@@ -1036,8 +1041,8 @@ export default function MotionSearchView({
             <Progress className="h-1" value={progressValue} />
           </div>
         )}
-        {searchMetrics && searchResults.length > 0 && (
+        {searchMetrics && (isSearching || searchResults.length > 0) && (
-          <div className="mx-2 rounded-lg border bg-secondary p-2">
+          <div className="mx-2 my-3 rounded-lg border bg-secondary p-2">
             <div className="space-y-0.5 text-xs text-muted-foreground">
               <div className="flex justify-between">
                 <span>{t("metrics.segmentsScanned")}</span>

web/src/views/settings/ObjectSettingsView.tsx

@@ -370,7 +370,7 @@ type ObjectListProps = {
 };
 
 function ObjectList({ cameraConfig, objects }: ObjectListProps) {
-  const { t } = useTranslation(["views/settings"]);
+  const { t } = useTranslation(["views/settings", "common"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const colormap = useMemo(() => {
@@ -440,17 +440,21 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                       {obj.area ? (
                         <div className="text-end">
                           <div className="text-xs">
-                            px: {obj.area.toString()}
+                            {t("information.pixels", {
+                              ns: "common",
+                              area: obj.area,
+                            })}
                           </div>
                           <div className="text-xs">
-                            %:{" "}
                             {(
-                              obj.area /
+                              (obj.area /
-                              (cameraConfig.detect.width *
+                                (cameraConfig.detect.width *
-                                cameraConfig.detect.height)
+                                  cameraConfig.detect.height)) *
+                              100
                             )
-                              .toFixed(4)
+                              .toFixed(2)
                               .toString()}
+                            %
                           </div>
                         </div>
                       ) : (

web/src/views/system/StorageMetrics.tsx

@@ -22,6 +22,7 @@ import { Link } from "react-router-dom";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { LuExternalLink } from "react-icons/lu";
 import { FaExclamationTriangle } from "react-icons/fa";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 type CameraStorage = {
   [key: string]: {
@@ -128,7 +129,11 @@ export default function StorageMetrics({
   }, [stats, config]);
 
   if (!cameraStorage || !stats || !totalStorage || !config) {
-    return;
+    return (
+      <div className="flex size-full items-center justify-center">
+        <ActivityIndicator />
+      </div>
+    );
   }
 
   return (