From 8803fd7fffd6af66b62286d1a697d373d19baf8c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 15 Apr 2025 08:46:33 -0600
Subject: [PATCH] Add snapshot score to explore details (#17713)

* Add snapshot score to details

* Only show snapshot score if it has a snapshot
---
 web/public/locales/en/views/explore.json      |  3 +++
 web/src/components/card/SearchThumbnail.tsx   |  2 +-
 .../overlay/detail/SearchDetailDialog.tsx     | 24 +++++++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/public/locales/en/views/explore.json b/web/public/locales/en/views/explore.json
index 7ba43d176..c75951f93 100644
--- a/web/public/locales/en/views/explore.json
+++ b/web/public/locales/en/views/explore.json
@@ -112,6 +112,9 @@
       "desc": "Enter a new license plate value for this {{label}}",
       "descNoLabel": "Enter a new license plate value for this tracked object"
     },
+    "snapshotScore": {
+      "label": "Snapshot Score"
+    },
     "topScore": {
       "label": "Top Score",
       "info": "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."
diff --git a/web/src/components/card/SearchThumbnail.tsx b/web/src/components/card/SearchThumbnail.tsx
index e58977f74..75bae5cef 100644
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -135,7 +135,7 @@ export default function SearchThumbnail({
                     onClick={() => onClick(searchResult, false, true)}
                   >
                     {getIconForLabel(objectLabel, "size-3 text-white")}
-                    {Math.round(
+                    {Math.floor(
                       (searchResult.data.score ??
                         searchResult.data.top_score ??
                         searchResult.top_score) * 100,
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 9ad722ac4..e0f9e0577 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -325,7 +325,7 @@ function ObjectDetailsTab({
     config?.ui.timezone,
   );
 
-  const score = useMemo(() => {
+  const topScore = useMemo(() => {
     if (!search) {
       return 0;
     }
@@ -364,6 +364,16 @@ function ObjectDetailsTab({
     }
   }, [search]);
 
+  const snapScore = useMemo(() => {
+    if (!search?.has_snapshot) {
+      return 0;
+    }
+
+    const value = search.data.score ?? search.score ?? 0;
+
+    return Math.floor(value * 100);
+  }, [search]);
+
   const averageEstimatedSpeed = useMemo(() => {
     if (!search || !search.data?.average_estimated_speed) {
       return undefined;
@@ -773,9 +783,19 @@ function ObjectDetailsTab({
               </div>
             </div>
             <div className="text-sm">
-              {score}%{subLabelScore && ` (${subLabelScore}%)`}
+              {topScore}%{subLabelScore && ` (${subLabelScore}%)`}
             </div>
           </div>
+          {snapScore && (
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary/40">
+                <div className="flex flex-row items-center gap-1">
+                  {t("details.snapshotScore.label")}
+                </div>
+              </div>
+              <div className="text-sm">{snapScore}%</div>
+            </div>
+          )}
           {averageEstimatedSpeed && (
             <div className="flex flex-col gap-1.5">
               <div className="text-sm text-primary/40">