Revamp object debug view (#11186)

* revamp object debug view

* fix vite

* remove console log

* don't display empty fields

* clarify masks as motion masks

* add descriptions

* color and spacing

* add sub_label to camera activity

* add sub_label to type

* rename to debug

web/src/hooks/use-camera-activity.ts

@@ -5,10 +5,11 @@ import {
 } from "@/api/ws";
 import { ATTRIBUTE_LABELS, CameraConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
 import { ObjectType } from "@/types/ws";
 import useDeepMemo from "./use-deep-memo";
+import { isEqual } from "lodash";
 
 type useCameraActivityReturn = {
   activeTracking: boolean;
@@ -29,10 +30,9 @@ export function useCameraActivity(
 
   useEffect(() => {
     if (updatedCameraState) {
-      console.log(`the initial objects are ${JSON.stringify(updatedCameraState.objects)}`)
       setObjects(updatedCameraState.objects);
     }
-  }, [updatedCameraState]);
+  }, [updatedCameraState, camera]);
 
   // handle camera activity
 
@@ -45,12 +45,21 @@ export function useCameraActivity(
   const { payload: event } = useFrigateEvents();
   const updatedEvent = useDeepMemo(event);
 
+  const handleSetObjects = useCallback(
+    (newObjects: ObjectType[]) => {
+      if (!isEqual(objects, newObjects)) {
+        setObjects(newObjects);
+      }
+    },
+    [objects],
+  );
+
   useEffect(() => {
     if (!updatedEvent) {
       return;
     }
 
-    if (updatedEvent.after.camera != camera.name) {
+    if (updatedEvent.after.camera !== camera.name) {
       return;
     }
 
@@ -58,23 +67,26 @@ export function useCameraActivity(
       (obj) => obj.id === updatedEvent.after.id,
     );
 
-    if (updatedEvent.type == "end") {
-      if (updatedEventIndex != -1) {
-        const newActiveObjects = [...objects];
-        newActiveObjects.splice(updatedEventIndex, 1);
-        setObjects(newActiveObjects);
+    let newObjects: ObjectType[] = [...objects];
+
+    if (updatedEvent.type === "end") {
+      if (updatedEventIndex !== -1) {
+        newObjects.splice(updatedEventIndex, 1);
       }
     } else {
-      if (updatedEventIndex == -1) {
+      if (updatedEventIndex === -1) {
         // add unknown updatedEvent to list if not stationary
         if (!updatedEvent.after.stationary) {
           const newActiveObject: ObjectType = {
             id: updatedEvent.after.id,
             label: updatedEvent.after.label,
             stationary: updatedEvent.after.stationary,
+            area: updatedEvent.after.area,
+            ratio: updatedEvent.after.ratio,
+            score: updatedEvent.after.score,
+            sub_label: updatedEvent.after.sub_label?.[0] ?? "",
           };
-          const newActiveObjects = [...objects, newActiveObject];
-          setObjects(newActiveObjects);
+          newObjects = [...objects, newActiveObject];
         }
       } else {
         const newObjects = [...objects];
@@ -94,16 +106,17 @@ export function useCameraActivity(
         newObjects[updatedEventIndex].label = label;
         newObjects[updatedEventIndex].stationary =
           updatedEvent.after.stationary;
-        setObjects(newObjects);
       }
     }
-  }, [camera, updatedEvent, objects]);
+
+    handleSetObjects(newObjects);
+  }, [camera, updatedEvent, objects, handleSetObjects]);
 
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion
-      ? detectingMotion == "ON"
-      : initialCameraState?.motion == true,
+      ? detectingMotion === "ON"
+      : initialCameraState?.motion === true,
     objects,
   };
 }