administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-01-22 20:18:30 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add attribute editing to tracked object details

Browse Source
This commit is contained in:
Josh Hawkins 2025-12-18 07:26:47 -06:00
parent 2689e74b18
commit 53278efe48
3 changed files with 292 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/public/locales/en/views/explore.json
View File

@ -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"
},

184
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -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(() => {
if (!search || !allowedAttributes || allowedAttributes.length === 0) {
return [];
// Extract current attribute selections grouped by model
const selectedAttributesByModel = useMemo(() => {
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
allowedAttributes.forEach((attr) => {
if (dataAny[attr] !== undefined && dataAny[attr] !== null) {
collected.add(attr);
// 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 Array.from(collected).sort((a, b) => a.localeCompare(b));
}, [search, allowedAttributes]);
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;
@ -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 && (
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">
{t("details.attributes")}
{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 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>
);

123
web/src/components/overlay/dialog/AttributeSelectDialog.tsx Normal file
View File

@ -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>
);
}