Add ability to view tracked objects in Explore from review item details pane (#14744)

frigate/api/defs/events_query_parameters.py

@@ -28,6 +28,7 @@ class EventsQueryParams(BaseModel):
     is_submitted: Optional[int] = None
     min_length: Optional[float] = None
     max_length: Optional[float] = None
+    event_id: Optional[str] = None
     sort: Optional[str] = None
     timezone: Optional[str] = "utc"
 

frigate/api/event.py

@@ -88,6 +88,7 @@ def events(params: EventsQueryParams = Depends()):
     is_submitted = params.is_submitted
     min_length = params.min_length
     max_length = params.max_length
+    event_id = params.event_id
 
     sort = params.sort
 
@@ -230,6 +231,9 @@ def events(params: EventsQueryParams = Depends()):
         elif is_submitted > 0:
             clauses.append((Event.plus_id != ""))
 
+    if event_id is not None:
+        clauses.append((Event.id == event_id))
+
     if len(clauses) == 0:
         clauses.append((True))
 

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

@@ -40,6 +40,7 @@ import {
 import { useOverlayState } from "@/hooks/use-overlay-state";
 import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { LuSearch } from "react-icons/lu";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -53,6 +54,8 @@ export default function ReviewDetailDialog({
     revalidateOnFocus: false,
   });
 
+  const navigate = useNavigate();
+
   // upload
 
   const [upload, setUpload] = useState<Event>();
@@ -219,6 +222,21 @@ export default function ReviewDetailDialog({
                             )}
                             {event.sub_label ?? event.label} (
                             {Math.round(event.data.top_score * 100)}%)
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <div
+                                  className="cursor-pointer"
+                                  onClick={() => {
+                                    navigate(`/explore?event_id=${event.id}`);
+                                  }}
+                                >
+                                  <LuSearch className="size-4 text-muted-foreground" />
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipPortal>
+                                <TooltipContent>View in Explore</TooltipContent>
+                              </TooltipPortal>
+                            </Tooltip>
                           </div>
                         );
                       })}

web/src/pages/Explore.tsx

@@ -114,6 +114,7 @@ export default function Explore() {
           max_score: searchSearchParams["max_score"],
           has_snapshot: searchSearchParams["has_snapshot"],
           has_clip: searchSearchParams["has_clip"],
+          event_id: searchSearchParams["event_id"],
           limit:
             Object.keys(searchSearchParams).length == 0 ? API_LIMIT : undefined,
           timezone,