add attribute editing to tracked object details

web/public/locales/en/views/explore.json

@@ -104,12 +104,14 @@
           "regenerate": "A new description has been requested from {{provider}}. Depending on the speed of your provider, the new description may take some time to regenerate.",
           "updatedSublabel": "Successfully updated sub label.",
           "updatedLPR": "Successfully updated license plate.",
+          "updatedAttributes": "Successfully updated attributes.",
           "audioTranscription": "Successfully requested audio transcription. Depending on the speed of your Frigate server, the transcription may take some time to complete."
         },
         "error": {
           "regenerate": "Failed to call {{provider}} for a new description: {{errorMessage}}",
           "updatedSublabelFailed": "Failed to update sub label: {{errorMessage}}",
           "updatedLPRFailed": "Failed to update license plate: {{errorMessage}}",
+          "updatedAttributesFailed": "Failed to update attributes: {{errorMessage}}",
           "audioTranscription": "Failed to request audio transcription: {{errorMessage}}"
         }
       }
@@ -125,6 +127,10 @@
       "desc": "Enter a new license plate value for this {{label}}",
       "descNoLabel": "Enter a new license plate value for this tracked object"
     },
+    "editAttributes": {
+      "title": "Edit attributes",
+      "desc": "Select classification attributes for this {{label}}"
+    },
     "snapshotScore": {
       "label": "Snapshot Score"
     },

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -84,6 +84,7 @@ import { LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { FaPencilAlt } from "react-icons/fa";
 import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
+import AttributeSelectDialog from "@/components/overlay/dialog/AttributeSelectDialog";
 import { Trans, useTranslation } from "react-i18next";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { getTranslatedLabel } from "@/utils/i18n";
@@ -297,6 +298,7 @@ type DialogContentComponentProps = {
   isPopoverOpen: boolean;
   setIsPopoverOpen: (open: boolean) => void;
   dialogContainer: HTMLDivElement | null;
+  setShowNavigationButtons: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 function DialogContentComponent({
@@ -314,6 +316,7 @@ function DialogContentComponent({
   isPopoverOpen,
   setIsPopoverOpen,
   dialogContainer,
+  setShowNavigationButtons,
 }: DialogContentComponentProps) {
   if (page === "tracking_details") {
     return (
@@ -399,6 +402,7 @@ function DialogContentComponent({
               config={config}
               setSearch={setSearch}
               setInputFocused={setInputFocused}
+              setShowNavigationButtons={setShowNavigationButtons}
             />
           </div>
         </div>
@@ -415,6 +419,7 @@ function DialogContentComponent({
         config={config}
         setSearch={setSearch}
         setInputFocused={setInputFocused}
+        setShowNavigationButtons={setShowNavigationButtons}
       />
     </>
   );
@@ -459,6 +464,7 @@ export default function SearchDetailDialog({
 
   const [isOpen, setIsOpen] = useState(search != undefined);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [showNavigationButtons, setShowNavigationButtons] = useState(false);
   const dialogContentRef = useRef<HTMLDivElement | null>(null);
   const [dialogContainer, setDialogContainer] = useState<HTMLDivElement | null>(
     null,
@@ -540,9 +546,9 @@ export default function SearchDetailDialog({
         onOpenChange={handleOpenChange}
         enableHistoryBack={true}
       >
-        {isDesktop && onPrevious && onNext && (
+        {isDesktop && onPrevious && onNext && showNavigationButtons && (
           <DialogPortal>
-            <div className="pointer-events-none fixed inset-0 z-[200] flex items-center justify-center">
+            <div className="pointer-events-none fixed inset-0 z-[51] flex items-center justify-center">
               <div
                 className={cn(
                   "relative flex items-center justify-between",
@@ -652,6 +658,7 @@ export default function SearchDetailDialog({
             isPopoverOpen={isPopoverOpen}
             setIsPopoverOpen={setIsPopoverOpen}
             dialogContainer={dialogContainer}
+            setShowNavigationButtons={setShowNavigationButtons}
           />
         </Content>
       </Overlay>
@@ -664,12 +671,14 @@ type ObjectDetailsTabProps = {
   config?: FrigateConfig;
   setSearch: (search: SearchResult | undefined) => void;
   setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowNavigationButtons?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 function ObjectDetailsTab({
   search,
   config,
   setSearch,
   setInputFocused,
+  setShowNavigationButtons,
 }: ObjectDetailsTabProps) {
   const { t, i18n } = useTranslation([
     "views/explore",
@@ -682,9 +691,9 @@ function ObjectDetailsTab({
     () => Object.keys(config?.classification?.custom ?? {}).length > 0,
     [config],
   );
-  const { data: allowedAttributes } = useSWR<string[]>(
+  const { data: modelAttributes } = useSWR<Record<string, string[]>>(
     hasCustomClassificationModels && search
-      ? `classification/attributes?object_type=${encodeURIComponent(search.label)}`
+      ? `classification/attributes?object_type=${encodeURIComponent(search.label)}&group_by_model=true`
       : null,
   );
 
@@ -717,6 +726,7 @@ function ObjectDetailsTab({
   const [desc, setDesc] = useState(search?.data.description);
   const [isSubLabelDialogOpen, setIsSubLabelDialogOpen] = useState(false);
   const [isLPRDialogOpen, setIsLPRDialogOpen] = useState(false);
+  const [isAttributesDialogOpen, setIsAttributesDialogOpen] = useState(false);
   const [isEditingDesc, setIsEditingDesc] = useState(false);
   const originalDescRef = useRef<string | null>(null);
 
@@ -731,6 +741,19 @@ function ObjectDetailsTab({
   // we have to make sure the current selected search item stays in sync
   useEffect(() => setDesc(search?.data.description ?? ""), [search]);
 
+  useEffect(() => setIsAttributesDialogOpen(false), [search?.id]);
+
+  useEffect(() => {
+    const anyDialogOpen =
+      isSubLabelDialogOpen || isLPRDialogOpen || isAttributesDialogOpen;
+    setShowNavigationButtons?.(!anyDialogOpen);
+  }, [
+    isSubLabelDialogOpen,
+    isLPRDialogOpen,
+    isAttributesDialogOpen,
+    setShowNavigationButtons,
+  ]);
+
   const formattedDate = useFormattedTimestamp(
     search?.start_time ?? 0,
     config?.ui.time_format == "24hour"
@@ -816,23 +839,40 @@ function ObjectDetailsTab({
     }
   }, [search]);
 
-  const eventAttributes = useMemo(() => {
+  // Extract current attribute selections grouped by model
-    if (!search || !allowedAttributes || allowedAttributes.length === 0) {
+  const selectedAttributesByModel = useMemo(() => {
-      return [];
+    if (!search || !modelAttributes) {
+      return {};
     }
 
-    const collected = new Set<string>();
     const dataAny = search.data as Record<string, unknown>;
+    const selections: Record<string, string | null> = {};
 
-    // Check top-level keys in data that match allowed attributes
+    // Initialize all models with null
-    allowedAttributes.forEach((attr) => {
+    Object.keys(modelAttributes).forEach((modelName) => {
-      if (dataAny[attr] !== undefined && dataAny[attr] !== null) {
+      selections[modelName] = null;
-        collected.add(attr);
+    });
+
+    // Find which attribute is selected for each model
+    Object.keys(modelAttributes).forEach((modelName) => {
+      const value = dataAny[modelName];
+      if (
+        typeof value === "string" &&
+        modelAttributes[modelName].includes(value)
+      ) {
+        selections[modelName] = value;
       }
     });
 
-    return Array.from(collected).sort((a, b) => a.localeCompare(b));
+    return selections;
-  }, [search, allowedAttributes]);
+  }, [search, modelAttributes]);
+
+  // Get flat list of selected attributes for display
+  const eventAttributes = useMemo(() => {
+    return Object.values(selectedAttributesByModel)
+      .filter((attr): attr is string => attr !== null)
+      .sort((a, b) => a.localeCompare(b));
+  }, [selectedAttributesByModel]);
 
   const isEventsKey = useCallback((key: unknown): boolean => {
     const candidate = Array.isArray(key) ? key[0] : key;
@@ -1075,6 +1115,74 @@ function ObjectDetailsTab({
     [search, apiHost, mutate, setSearch, t, mapSearchResults, isEventsKey],
   );
 
+  const handleAttributesSave = useCallback(
+    (selectedAttributes: string[]) => {
+      if (!search) return;
+
+      axios
+        .post(`${apiHost}api/events/${search.id}/attributes`, {
+          attributes: selectedAttributes,
+        })
+        .then((response) => {
+          const applied = Array.isArray(response.data?.applied)
+            ? (response.data.applied as {
+                model?: string;
+                label?: string | null;
+                score?: number | null;
+              }[])
+            : [];
+
+          toast.success(t("details.item.toast.success.updatedAttributes"), {
+            position: "top-center",
+          });
+
+          const applyUpdatedAttributes = (event: SearchResult) => {
+            if (event.id !== search.id) return event;
+
+            const updatedData: Record<string, unknown> = { ...event.data };
+
+            applied.forEach(({ model, label, score }) => {
+              if (!model) return;
+              updatedData[model] = label ?? null;
+              updatedData[`${model}_score`] = score ?? null;
+            });
+
+            return { ...event, data: updatedData } as SearchResult;
+          };
+
+          mutate(
+            (key) => isEventsKey(key),
+            (currentData: SearchResult[][] | SearchResult[] | undefined) =>
+              mapSearchResults(currentData, applyUpdatedAttributes),
+            {
+              optimisticData: true,
+              rollbackOnError: true,
+              revalidate: false,
+            },
+          );
+
+          setSearch(applyUpdatedAttributes(search));
+          setIsAttributesDialogOpen(false);
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+
+          toast.error(
+            t("details.item.toast.error.updatedAttributesFailed", {
+              errorMessage,
+            }),
+            {
+              position: "top-center",
+            },
+          );
+        });
+    },
+    [search, apiHost, mutate, t, mapSearchResults, isEventsKey, setSearch],
+  );
+
   // speech transcription
 
   const onTranscribe = useCallback(() => {
@@ -1323,14 +1431,37 @@ function ObjectDetailsTab({
             </div>
           )}
 
-          {eventAttributes.length > 0 && (
+          {hasCustomClassificationModels &&
-            <div className="flex flex-col gap-1.5">
+            modelAttributes &&
-              <div className="text-sm text-primary/40">
+            Object.keys(modelAttributes).length > 0 && (
-                {t("details.attributes")}
+              <div className="flex flex-col gap-1.5">
+                <div className="flex items-center gap-2 text-sm text-primary/40">
+                  {t("details.attributes")}
+                  {isAdmin && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span>
+                          <FaPencilAlt
+                            className="size-4 cursor-pointer text-primary/40 hover:text-primary/80"
+                            onClick={() => setIsAttributesDialogOpen(true)}
+                          />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipPortal>
+                        <TooltipContent>
+                          {t("button.edit", { ns: "common" })}
+                        </TooltipContent>
+                      </TooltipPortal>
+                    </Tooltip>
+                  )}
+                </div>
+                <div className="text-sm">
+                  {eventAttributes.length > 0
+                    ? eventAttributes.join(", ")
+                    : t("label.none", { ns: "common" })}
+                </div>
               </div>
-              <div className="text-sm">{eventAttributes.join(", ")}</div>
+            )}
-            </div>
-          )}
         </div>
       </div>
 
@@ -1631,6 +1762,17 @@ function ObjectDetailsTab({
           defaultValue={search?.data.recognized_license_plate || ""}
           allowEmpty={true}
         />
+        <AttributeSelectDialog
+          open={isAttributesDialogOpen}
+          setOpen={setIsAttributesDialogOpen}
+          title={t("details.editAttributes.title")}
+          description={t("details.editAttributes.desc", {
+            label: search.label,
+          })}
+          onSave={handleAttributesSave}
+          selectedAttributes={selectedAttributesByModel}
+          modelAttributes={modelAttributes ?? {}}
+        />
       </div>
     </div>
   );

web/src/components/overlay/dialog/AttributeSelectDialog.tsx

@@ -0,0 +1,123 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { useCallback, useEffect, useState } from "react";
+import { isDesktop } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+
+type AttributeSelectDialogProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  title: string;
+  description: string;
+  onSave: (selectedAttributes: string[]) => void;
+  selectedAttributes: Record<string, string | null>; // model -> selected attribute
+  modelAttributes: Record<string, string[]>; // model -> available attributes
+  className?: string;
+};
+
+export default function AttributeSelectDialog({
+  open,
+  setOpen,
+  title,
+  description,
+  onSave,
+  selectedAttributes,
+  modelAttributes,
+  className,
+}: AttributeSelectDialogProps) {
+  const { t } = useTranslation();
+  const [internalSelection, setInternalSelection] = useState<
+    Record<string, string | null>
+  >({});
+
+  useEffect(() => {
+    if (open) {
+      setInternalSelection({ ...selectedAttributes });
+    }
+  }, [open, selectedAttributes]);
+
+  const handleSave = useCallback(() => {
+    // Convert from model->attribute map to flat list of attributes
+    const attributes = Object.values(internalSelection).filter(
+      (attr): attr is string => attr !== null,
+    );
+    onSave(attributes);
+  }, [internalSelection, onSave]);
+
+  const handleToggle = useCallback((modelName: string, attribute: string) => {
+    setInternalSelection((prev) => {
+      const currentSelection = prev[modelName];
+      // If clicking the currently selected attribute, deselect it
+      if (currentSelection === attribute) {
+        return { ...prev, [modelName]: null };
+      }
+      // Otherwise, select this attribute for this model
+      return { ...prev, [modelName]: attribute };
+    });
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        className={cn(className, isDesktop ? "max-w-md" : "max-w-[90%]")}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className="scrollbar-container overflow-y-auto">
+          <div className="max-h-[80dvh] space-y-6 py-2">
+            {Object.entries(modelAttributes).map(([modelName, attributes]) => (
+              <div key={modelName} className="space-y-3">
+                <div className="text-sm font-semibold text-primary-variant">
+                  {modelName}
+                </div>
+                <div className="space-y-2 pl-2">
+                  {attributes.map((attribute) => (
+                    <div
+                      key={attribute}
+                      className="flex items-center justify-between gap-2"
+                    >
+                      <Label
+                        htmlFor={`${modelName}-${attribute}`}
+                        className="cursor-pointer text-sm text-primary"
+                      >
+                        {attribute}
+                      </Label>
+                      <Switch
+                        id={`${modelName}-${attribute}`}
+                        checked={internalSelection[modelName] === attribute}
+                        onCheckedChange={() =>
+                          handleToggle(modelName, attribute)
+                        }
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="button" onClick={() => setOpen(false)}>
+            {t("button.cancel")}
+          </Button>
+          <Button variant="select" onClick={handleSave}>
+            {t("button.save", { ns: "common" })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}