Add object classification attributes to Tracked Object Details (#21348)

* attributes endpoint

* event endpoints

* add attributes to more filters

* add to suggestions and query in explore

* support attributes in search input

* i18n

* add object type filter to endpoint

* add attributes to tracked object details pane

* add generic multi select dialog

* save object attributes endpoint

* add group by param to fetch attributes endpoint

* add attribute editing to tracked object details

* docs

* fix docs

* update openapi spec to match python

web/src/components/input/InputWithTags.tsx

@@ -399,7 +399,7 @@ export default function InputWithTags({
             newFilters.sort = value as SearchSortType;
             break;
           default:
-            // Handle array types (cameras, labels, subLabels, zones)
+            // Handle array types (cameras, labels, sub_labels, attributes, zones)
             if (!newFilters[type]) newFilters[type] = [];
             if (Array.isArray(newFilters[type])) {
               if (!(newFilters[type] as string[]).includes(value)) {

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",
@@ -678,6 +687,15 @@ function ObjectDetailsTab({
   ]);
 
   const apiHost = useApiHost();
+  const hasCustomClassificationModels = useMemo(
+    () => Object.keys(config?.classification?.custom ?? {}).length > 0,
+    [config],
+  );
+  const { data: modelAttributes } = useSWR<Record<string, string[]>>(
+    hasCustomClassificationModels && search
+      ? `classification/attributes?object_type=${encodeURIComponent(search.label)}&group_by_model=true`
+      : null,
+  );
 
   // mutation / revalidation
 
@@ -708,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);
 
@@ -722,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"
@@ -807,6 +839,41 @@ function ObjectDetailsTab({
     }
   }, [search]);
 
+  // Extract current attribute selections grouped by model
+  const selectedAttributesByModel = useMemo(() => {
+    if (!search || !modelAttributes) {
+      return {};
+    }
+
+    const dataAny = search.data as Record<string, unknown>;
+    const selections: Record<string, string | null> = {};
+
+    // Initialize all models with null
+    Object.keys(modelAttributes).forEach((modelName) => {
+      selections[modelName] = null;
+    });
+
+    // 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 selections;
+  }, [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;
     const EVENTS_KEY_PATTERNS = ["events", "events/search", "events/explore"];
@@ -1048,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(() => {
@@ -1295,6 +1430,38 @@ function ObjectDetailsTab({
               </div>
             </div>
           )}
+
+          {hasCustomClassificationModels &&
+            modelAttributes &&
+            Object.keys(modelAttributes).length > 0 && (
+              <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>
       </div>
 
@@ -1595,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>
+  );
+}

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

@@ -0,0 +1,96 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import FilterSwitch from "@/components/filter/FilterSwitch";
+
+type MultiSelectDialogProps = {
+  open: boolean;
+  title: string;
+  description?: string;
+  setOpen: (open: boolean) => void;
+  onSave: (selectedItems: string[]) => void;
+  selectedItems: string[];
+  availableItems: string[];
+  allowEmpty?: boolean;
+};
+
+export default function MultiSelectDialog({
+  open,
+  title,
+  description,
+  setOpen,
+  onSave,
+  selectedItems = [],
+  availableItems = [],
+  allowEmpty = false,
+}: MultiSelectDialogProps) {
+  const { t } = useTranslation("common");
+  const [internalSelection, setInternalSelection] =
+    useState<string[]>(selectedItems);
+
+  // Reset internal selection when dialog opens
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      setInternalSelection(selectedItems);
+    }
+    setOpen(isOpen);
+  };
+
+  const toggleItem = (item: string) => {
+    setInternalSelection((prev) =>
+      prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item],
+    );
+  };
+
+  const handleSave = () => {
+    if (!allowEmpty && internalSelection.length === 0) {
+      return;
+    }
+    onSave(internalSelection);
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} defaultOpen={false} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div className="max-h-[80dvh] space-y-3 overflow-y-auto py-4">
+          {availableItems.map((item) => (
+            <FilterSwitch
+              key={item}
+              label={item}
+              isChecked={internalSelection.includes(item)}
+              onCheckedChange={() => toggleItem(item)}
+            />
+          ))}
+        </div>
+        <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+          <Button type="button" onClick={() => setOpen(false)}>
+            {t("button.cancel")}
+          </Button>
+          <Button
+            variant="select"
+            type="button"
+            onClick={handleSave}
+            disabled={!allowEmpty && internalSelection.length === 0}
+          >
+            {t("button.save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -65,6 +65,13 @@ export default function SearchFilterDialog({
   const { t } = useTranslation(["components/filter"]);
   const [currentFilter, setCurrentFilter] = useState(filter ?? {});
   const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]);
+  const hasCustomClassificationModels = useMemo(
+    () => Object.keys(config?.classification?.custom ?? {}).length > 0,
+    [config],
+  );
+  const { data: allAttributes } = useSWR(
+    hasCustomClassificationModels ? "classification/attributes" : null,
+  );
   const { data: allRecognizedLicensePlates } = useSWR<string[]>(
     "recognized_license_plates",
   );
@@ -91,8 +98,10 @@ export default function SearchFilterDialog({
         (currentFilter.max_speed ?? 150) < 150 ||
         (currentFilter.zones?.length ?? 0) > 0 ||
         (currentFilter.sub_labels?.length ?? 0) > 0 ||
+        (hasCustomClassificationModels &&
+          (currentFilter.attributes?.length ?? 0) > 0) ||
         (currentFilter.recognized_license_plate?.length ?? 0) > 0),
-    [currentFilter],
+    [currentFilter, hasCustomClassificationModels],
   );
 
   const trigger = (
@@ -133,6 +142,15 @@ export default function SearchFilterDialog({
           setCurrentFilter({ ...currentFilter, sub_labels: newSubLabels })
         }
       />
+      {hasCustomClassificationModels && (
+        <AttributeFilterContent
+          allAttributes={allAttributes}
+          attributes={currentFilter.attributes}
+          setAttributes={(newAttributes) =>
+            setCurrentFilter({ ...currentFilter, attributes: newAttributes })
+          }
+        />
+      )}
       <RecognizedLicensePlatesFilterContent
         allRecognizedLicensePlates={allRecognizedLicensePlates}
         recognizedLicensePlates={currentFilter.recognized_license_plate}
@@ -216,6 +234,7 @@ export default function SearchFilterDialog({
               max_speed: undefined,
               has_snapshot: undefined,
               has_clip: undefined,
+              ...(hasCustomClassificationModels && { attributes: undefined }),
               recognized_license_plate: undefined,
             }));
           }}
@@ -1087,3 +1106,72 @@ export function RecognizedLicensePlatesFilterContent({
     </div>
   );
 }
+
+type AttributeFilterContentProps = {
+  allAttributes?: string[];
+  attributes: string[] | undefined;
+  setAttributes: (labels: string[] | undefined) => void;
+};
+export function AttributeFilterContent({
+  allAttributes,
+  attributes,
+  setAttributes,
+}: AttributeFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
+  const sortedAttributes = useMemo(
+    () =>
+      [...(allAttributes || [])].sort((a, b) =>
+        a.toLowerCase().localeCompare(b.toLowerCase()),
+      ),
+    [allAttributes],
+  );
+  return (
+    <div className="overflow-x-hidden">
+      <DropdownMenuSeparator className="mb-3" />
+      <div className="text-lg">{t("attributes.label")}</div>
+      <div className="mb-5 mt-2.5 flex items-center justify-between">
+        <Label
+          className="mx-2 cursor-pointer text-primary"
+          htmlFor="allAttributes"
+        >
+          {t("attributes.all")}
+        </Label>
+        <Switch
+          className="ml-1"
+          id="allAttributes"
+          checked={attributes == undefined}
+          onCheckedChange={(isChecked) => {
+            if (isChecked) {
+              setAttributes(undefined);
+            }
+          }}
+        />
+      </div>
+      <div className="mt-2.5 flex flex-col gap-2.5">
+        {sortedAttributes.map((item) => (
+          <FilterSwitch
+            key={item}
+            label={item.replaceAll("_", " ")}
+            isChecked={attributes?.includes(item) ?? false}
+            onCheckedChange={(isChecked) => {
+              if (isChecked) {
+                const updatedAttributes = attributes ? [...attributes] : [];
+
+                updatedAttributes.push(item);
+                setAttributes(updatedAttributes);
+              } else {
+                const updatedAttributes = attributes ? [...attributes] : [];
+
+                // can not deselect the last item
+                if (updatedAttributes.length > 1) {
+                  updatedAttributes.splice(updatedAttributes.indexOf(item), 1);
+                  setAttributes(updatedAttributes);
+                }
+              }
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}