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/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>
+  );
+}