Add info icons for popovers in debug view (#14296)

web/src/views/settings/ObjectSettingsView.tsx

@@ -11,13 +11,17 @@ import { usePersistence } from "@/hooks/use-persistence";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { ObjectType } from "@/types/ws";
 import useDeepMemo from "@/hooks/use-deep-memo";
 import { Card } from "@/components/ui/card";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
-import { Link } from "react-router-dom";
+import { LuInfo } from "react-icons/lu";
-import { LuExternalLink } from "react-icons/lu";
 
 type ObjectSettingsViewProps = {
   selectedCamera?: string;
@@ -37,6 +41,30 @@ export default function ObjectSettingsView({
       param: "bbox",
       title: "Bounding boxes",
       description: "Show bounding boxes around tracked objects",
+      info: (
+        <>
+          <p className="mb-2">
+            <strong>Object Bounding Box Colors</strong>
+          </p>
+          <ul className="list-disc space-y-1 pl-5">
+            <li>
+              At startup, different colors will be assigned to each object label
+            </li>
+            <li>
+              A dark blue thin line indicates that object is not detected at
+              this current point in time
+            </li>
+            <li>
+              A gray thin line indicates that object is detected as being
+              stationary
+            </li>
+            <li>
+              A thick line indicates that object is the subject of autotracking
+              (when enabled)
+            </li>
+          </ul>
+        </>
+      ),
     },
     {
       param: "timestamp",
@@ -57,12 +85,34 @@ export default function ObjectSettingsView({
       param: "motion",
       title: "Motion boxes",
       description: "Show boxes around areas where motion is detected",
+      info: (
+        <>
+          <p className="mb-2">
+            <strong>Motion Boxes</strong>
+          </p>
+          <p>
+            Red boxes will be overlaid on areas of the frame where motion is
+            currently being detected
+          </p>
+        </>
+      ),
     },
     {
       param: "regions",
       title: "Regions",
       description:
         "Show a box of the region of interest sent to the object detector",
+      info: (
+        <>
+          <p className="mb-2">
+            <strong>Region Boxes</strong>
+          </p>
+          <p>
+            Bright green boxes will be overlaid on areas of interest in the
+            frame that are being sent to the object detector.
+          </p>
+        </>
+      ),
     },
   ];
 
@@ -136,17 +186,6 @@ export default function ObjectSettingsView({
             statistics. The object list shows a time-delayed summary of detected
             objects.
           </p>
-          <div className="flex items-center text-primary">
-            <Link
-              to="https://docs.frigate.video/frigate/glossary#bounding-box-colors"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline"
-            >
-              Read the meaning of bounding box colors
-              <LuExternalLink className="ml-2 inline-flex size-3" />
-            </Link>
-          </div>
         </div>
 
         <Tabs defaultValue="debug" className="w-full">
@@ -158,19 +197,34 @@ export default function ObjectSettingsView({
             <div className="flex w-full flex-col space-y-6">
               <div className="mt-2 space-y-6">
                 <div className="my-2.5 flex flex-col gap-2.5">
-                  {DEBUG_OPTIONS.map(({ param, title, description }) => (
+                  {DEBUG_OPTIONS.map(({ param, title, description, info }) => (
                     <div
                       key={param}
                       className="flex w-full flex-row items-center justify-between"
                     >
                       <div className="mb-2 flex flex-col">
-                        <Label
+                        <div className="flex items-center gap-2">
-                          className="mb-2 w-full cursor-pointer capitalize text-primary"
+                          <Label
-                          htmlFor={param}
+                            className="mb-0 cursor-pointer capitalize text-primary"
-                        >
+                            htmlFor={param}
-                          {title}
+                          >
-                        </Label>
+                            {title}
-                        <div className="text-xs text-muted-foreground">
+                          </Label>
+                          {info && (
+                            <Popover>
+                              <PopoverTrigger asChild>
+                                <div className="cursor-pointer p-0">
+                                  <LuInfo className="size-4" />
+                                  <span className="sr-only">Info</span>
+                                </div>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-80">
+                                {info}
+                              </PopoverContent>
+                            </Popover>
+                          )}
+                        </div>
+                        <div className="mt-1 text-xs text-muted-foreground">
                           {description}
                         </div>
                       </div>