Add tooltips to thumbnails

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,6 +10,8 @@ type EventThumbnailProps = {
 };
 export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
   return (
+    <Tooltip>
+      <TooltipTrigger asChild>
         <div
           className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
           style={{
@@ -26,5 +29,16 @@ export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
             </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>
   );
 }

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,6 +58,7 @@ function Live() {
     <>
       {events && events.length > 0 && (
         <ScrollArea>
+          <TooltipProvider>
             <div className="flex">
               {events.map((event) => {
                 return (
@@ -68,6 +70,7 @@ function Live() {
                 );
               })}
             </div>
+          </TooltipProvider>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       )}

web/src/types/event.ts

@@ -16,10 +16,11 @@ export interface Event {
   data: {
     top_score: number;
     score: number;
+    sub_label_score?: number;
     region: number[];
     box: number[];
     area: number;
     ratio: number;
     type: "object" | "audio" | "manual";
-    }
+  };
 }