From 3354c8c00971d35dc765893a92e0bd039ce5d9e3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 9 Feb 2024 16:18:13 -0700
Subject: [PATCH] Add tooltips to thumbnails

---
 web/src/components/image/EventThumbnail.tsx | 46 ++++++++++++-------
 web/src/pages/Live.tsx                      | 25 ++++++-----
 web/src/types/event.ts                      | 49 +++++++++++----------
 3 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/web/src/components/image/EventThumbnail.tsx b/web/src/components/image/EventThumbnail.tsx
index f6b2a25a2..7c187230c 100644
--- a/web/src/components/image/EventThumbnail.tsx
+++ b/web/src/components/image/EventThumbnail.tsx
@@ -2,6 +2,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { Event as FrigateEvent } from "@/types/event";
 import { LuStar } from "react-icons/lu";
 import TimeAgo from "../dynamic/TimeAgo";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 type EventThumbnailProps = {
   event: FrigateEvent;
@@ -9,22 +10,35 @@ type EventThumbnailProps = {
 };
 export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
   return (
-    <div
-      className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
-      style={{
-        backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
-      }}
-    >
-      <LuStar
-        className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
-        onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
-        fill={event.retain_indefinitely ? "currentColor" : "none"}
-      />
-      <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
-        <div className="absolute left-1 bottom-0 text-xs text-white w-full">
-          <TimeAgo time={event.start_time * 1000} dense />
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
+          style={{
+            backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
+          }}
+        >
+          <LuStar
+            className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
+            onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
+            fill={event.retain_indefinitely ? "currentColor" : "none"}
+          />
+          <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
+            <div className="absolute left-1 bottom-0 text-xs text-white w-full">
+              <TimeAgo time={event.start_time * 1000} dense />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        {`${event.label} ${
+          event.sub_label ? `(${event.sub_label})` : ""
+        } detected with score of ${(event.data.score * 100).toFixed(0)}% ${
+          event.data.sub_label_score
+            ? `(${event.data.sub_label_score * 100}%)`
+            : ""
+        }`}
+      </TooltipContent>
+    </Tooltip>
   );
 }
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 164576ac9..c50c0d4d2 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -1,6 +1,7 @@
 import { EventThumbnail } from "@/components/image/EventThumbnail";
 import LivePlayer from "@/components/player/LivePlayer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
@@ -57,17 +58,19 @@ function Live() {
     <>
       {events && events.length > 0 && (
         <ScrollArea>
-          <div className="flex">
-            {events.map((event) => {
-              return (
-                <EventThumbnail
-                  key={event.id}
-                  event={event}
-                  onFavorite={onFavorite}
-                />
-              );
-            })}
-          </div>
+          <TooltipProvider>
+            <div className="flex">
+              {events.map((event) => {
+                return (
+                  <EventThumbnail
+                    key={event.id}
+                    event={event}
+                    onFavorite={onFavorite}
+                  />
+                );
+              })}
+            </div>
+          </TooltipProvider>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       )}
diff --git a/web/src/types/event.ts b/web/src/types/event.ts
index 69e09577a..0e7aa9916 100644
--- a/web/src/types/event.ts
+++ b/web/src/types/event.ts
@@ -1,25 +1,26 @@
 export interface Event {
-    id: string;
-    label: string;
-    sub_label?: string;
-    camera: string;
-    start_time: number;
-    end_time?: number;
-    false_positive: boolean;
-    zones: string[];
-    thumbnail: string;
-    has_clip: boolean;
-    has_snapshot: boolean;
-    retain_indefinitely: boolean;
-    plus_id?: string;
-    model_hash?: string;
-    data: {
-        top_score: number;
-        score: number;
-        region: number[];
-        box: number[];
-        area: number;
-        ratio: number;
-        type: "object" | "audio" | "manual";
-    }
-}
\ No newline at end of file
+  id: string;
+  label: string;
+  sub_label?: string;
+  camera: string;
+  start_time: number;
+  end_time?: number;
+  false_positive: boolean;
+  zones: string[];
+  thumbnail: string;
+  has_clip: boolean;
+  has_snapshot: boolean;
+  retain_indefinitely: boolean;
+  plus_id?: string;
+  model_hash?: string;
+  data: {
+    top_score: number;
+    score: number;
+    sub_label_score?: number;
+    region: number[];
+    box: number[];
+    area: number;
+    ratio: number;
+    type: "object" | "audio" | "manual";
+  };
+}