From d56ab44a58440fd1a50feb1728d0b3accc074050 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 27 Mar 2025 15:58:02 -0600
Subject: [PATCH] Cleanup dialog

---
 web/src/pages/FaceLibrary.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index b515932ce..59595a7ed 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -431,10 +431,10 @@ function TrainingGrid({
 
   // selection
 
-  const [selectedEvent, setSelectedEvent] = useState<RecognizedFaceData>();
+  const [selectedEvent, setSelectedEvent] = useState<Event>();
 
   const formattedDate = useFormattedTimestamp(
-    selectedEvent?.timestamp ?? 0,
+    selectedEvent?.start_time ?? 0,
     config?.ui.time_format == "24hour"
       ? t("time.formattedTimestampWithYear.24hour", { ns: "common" })
       : t("time.formattedTimestampWithYear.12hour", { ns: "common" }),
@@ -462,16 +462,20 @@ function TrainingGrid({
           </DialogHeader>
           <div className="flex flex-col gap-1.5">
             <div className="text-sm text-primary/40">{t("details.person")}</div>
-            <div className="text-sm capitalize">{selectedEvent?.name}</div>
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <div className="text-sm text-primary/40">
-              {t("details.confidence")}
-            </div>
             <div className="text-sm capitalize">
-              {(selectedEvent?.score || 0) * 100}%
+              {selectedEvent?.sub_label ?? "Unknown"}
             </div>
           </div>
+          {selectedEvent?.data.sub_label_score && (
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary/40">
+                {t("details.confidence")}
+              </div>
+              <div className="text-sm capitalize">
+                {(selectedEvent?.data?.sub_label_score || 0) * 100}%
+              </div>
+            </div>
+          )}
           <div className="flex flex-col gap-1.5">
             <div className="text-sm text-primary/40">
               {t("details.timestamp")}
@@ -480,7 +484,7 @@ function TrainingGrid({
           </div>
           <img
             className="w-full"
-            src={`${baseUrl}api/events/${selectedEvent?.eventId}/thumbnail.jpg`}
+            src={`${baseUrl}api/events/${selectedEvent?.id}/${selectedEvent?.has_snapshot ? "snapshot.jpg" : "thumbnail.jpg"}`}
           />
         </DialogContent>
       </Dialog>
@@ -513,7 +517,7 @@ function TrainingGrid({
                       if (meta) {
                         onClickFace(data.filename, meta);
                       } else {
-                        setSelectedEvent(data);
+                        setSelectedEvent(event);
                       }
                     }}
                     onRefresh={onRefresh}