administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-15 15:45:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add popover to explain top_score

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-16 16:21:07 -05:00
parent 5f4381ebf8
commit 6cc5da43ec
1 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,6 +62,12 @@ import { Card, CardContent } from "@/components/ui/card";
import useImageLoaded from "@/hooks/use-image-loaded"; import useImageLoaded from "@/hooks/use-image-loaded";
import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator"; import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
import { GenericVideoPlayer } from "@/components/player/GenericVideoPlayer"; import { GenericVideoPlayer } from "@/components/player/GenericVideoPlayer";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { LuInfo } from "react-icons/lu";
const SEARCH_TABS = [ const SEARCH_TABS = [
"details", "details",
@ -279,7 +285,7 @@ function ObjectDetailsTab({
return 0; return 0;
} }
const value = search.score ?? search.data.top_score; const value = search.data.top_score;
return Math.round(value * 100); return Math.round(value * 100);
}, [search]); }, [search]);
@ -290,7 +296,7 @@ function ObjectDetailsTab({
} }
if (search.sub_label) { if (search.sub_label) {
return Math.round((search.data?.top_score ?? 0) * 100); return Math.round(search.data.top_score * 100);
} else { } else {
return undefined; return undefined;
} }
@ -369,7 +375,24 @@ function ObjectDetailsTab({
</div> </div>
</div> </div>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Score</div> <div className="text-sm text-primary/40">
<div className="flex flex-row items-center gap-1">
Top Score
<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">
The top score is the highest median score for the tracked
object, so this may differ from the score shown on the
search result thumbnail.
</PopoverContent>
</Popover>
</div>
</div>
<div className="text-sm"> <div className="text-sm">
{score}%{subLabelScore && ` (${subLabelScore}%)`} {score}%{subLabelScore && ` (${subLabelScore}%)`}
</div> </div>