Attributes for object masks (#18003)

* Add ability to select attributes for object masks

This feature already works correctly on the backend. This just adds the ability to select attributes through the UI.

* Add clarity to LPR docs about timestamps

* fix sub label score and add info popover

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -37,7 +37,6 @@ import axios from "axios";
 import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { getAttributeLabels } from "@/utils/iconUtil";
 import { useTranslation } from "react-i18next";
 
 type ObjectMaskEditPaneProps = {
@@ -401,14 +400,6 @@ export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
   const { t } = useTranslation(["views/settings"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const attributeLabels = useMemo(() => {
-    if (!config) {
-      return [];
-    }
-
-    return getAttributeLabels(config);
-  }, [config]);
-
   const cameraConfig = useMemo(() => {
     if (config && camera) {
       return config.cameras[camera];
@@ -424,20 +415,16 @@ export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
 
     Object.values(config.cameras).forEach((camera) => {
       camera.objects.track.forEach((label) => {
-        if (!attributeLabels.includes(label)) {
-          labels.add(label);
-        }
+        labels.add(label);
       });
     });
 
     cameraConfig.objects.track.forEach((label) => {
-      if (!attributeLabels.includes(label)) {
-        labels.add(label);
-      }
+      labels.add(label);
     });
 
     return [...labels].sort();
-  }, [config, cameraConfig, attributeLabels]);
+  }, [config, cameraConfig]);
 
   return (
     <>

web/src/pages/FaceLibrary.tsx

@@ -21,6 +21,11 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Toaster } from "@/components/ui/sonner";
 import {
   Tooltip,
@@ -42,6 +47,7 @@ import { isDesktop, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import {
   LuImagePlus,
+  LuInfo,
   LuPencil,
   LuRefreshCw,
   LuScanFace,
@@ -647,10 +653,23 @@ function TrainingGrid({
           {selectedEvent?.data.sub_label_score && (
             <div className="flex flex-col gap-1.5">
               <div className="text-sm text-primary/40">
-                {t("details.confidence")}
+                <div className="flex flex-row items-center gap-1">
+                  {t("details.subLabelScore")}
+                  <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">
+                      {t("details.scoreInfo")}
+                    </PopoverContent>
+                  </Popover>
+                </div>
               </div>
               <div className="text-sm smart-capitalize">
-                {Math.round(selectedEvent?.data?.sub_label_score || 0) * 100}%
+                {Math.round((selectedEvent?.data?.sub_label_score || 0) * 100)}%
               </div>
             </div>
           )}