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

@@ -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."

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,

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">