From 938e387356119ee8dc281bef4917c695cbec52fd Mon Sep 17 00:00:00 2001
From: Blake Blackshear <blakeb@blakeshome.com>
Date: Sun, 9 Jul 2023 09:43:10 -0500
Subject: [PATCH] show sublabel score

---
 web/src/icons/Score.jsx   | 20 ++++++++++++++++++++
 web/src/routes/Events.jsx | 19 +++++++++++++------
 2 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 web/src/icons/Score.jsx

diff --git a/web/src/icons/Score.jsx b/web/src/icons/Score.jsx
new file mode 100644
index 000000000..2abed4b9e
--- /dev/null
+++ b/web/src/icons/Score.jsx
@@ -0,0 +1,20 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Score({ className = 'h-6 w-6', stroke = 'currentColor', fill = 'currentColor', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <title>percent</title>
+      <path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M19,19H15V21H19A2,2 0 0,0 21,19V15H19M19,3H15V5H19V9H21V5A2,2 0 0,0 19,3M5,5H9V3H5A2,2 0 0,0 3,5V9H5M5,15H3V19A2,2 0 0,0 5,21H9V19H5V15Z" />
+    </svg>
+  );
+}
+
+export default memo(Score);
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 9d503cb8b..7d04d3bc4 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -30,6 +30,7 @@ import TimeAgo from '../components/TimeAgo';
 import Timepicker from '../components/TimePicker';
 import TimelineSummary from '../components/TimelineSummary';
 import TimelineEventOverlay from '../components/TimelineEventOverlay';
+import { Score } from '../icons/Score';
 
 const API_LIMIT = 25;
 
@@ -602,13 +603,10 @@ export default function Events({ path, ...props }) {
                     <div className="m-2 flex grow">
                       <div className="flex flex-col grow">
                         <div className="capitalize text-lg font-bold">
-                          {event.sub_label
-                            ? `${event.label.replaceAll('_', ' ')}: ${event.sub_label.replaceAll('_', ' ')}`
-                            : event.label.replaceAll('_', ' ')}
-                          {(event?.data?.top_score || event.top_score || 0) == 0
-                            ? null
-                            : ` (${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%)`}
+                          {event.label.replaceAll('_', ' ')}
+                          {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null}
                         </div>
+
                         <div className="text-sm flex">
                           <Clock className="h-5 w-5 mr-2 inline" />
                           {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })}
@@ -628,6 +626,15 @@ export default function Events({ path, ...props }) {
                           <Zone className="w-5 h-5 mr-2 inline" />
                           {event.zones.join(', ').replaceAll('_', ' ')}
                         </div>
+                        <div className="capitalize  text-sm flex align-center">
+                          <Score className="w-5 h-5 mr-2 inline" />
+                          {(event?.data?.top_score || event.top_score || 0) == 0
+                            ? null
+                            : `Label: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`}
+                          {(event?.data?.sub_label_score || 0) == 0
+                            ? null
+                            : `, Sub Label: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`}
+                        </div>
                       </div>
                       <div class="hidden sm:flex flex-col justify-end mr-2">
                         {event.end_time && event.has_snapshot && (