From b3a13a1454b6548f32285076943de5f7c7496b7e Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 21 Jun 2023 16:22:50 -0600
Subject: [PATCH 1/5] Show overlay when hovering on timeline box

---
 web/src/components/TimelineEventOverlay.jsx | 65 +++++++++++++++++++++
 web/src/routes/Events.jsx                   | 23 ++------
 2 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 web/src/components/TimelineEventOverlay.jsx

diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
new file mode 100644
index 000000000..33c6b99bf
--- /dev/null
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -0,0 +1,65 @@
+import { Fragment, h } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import Heading from './Heading';
+
+export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig }) {
+  const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
+  const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100);
+  const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100);
+  const boxBottomEdge = Math.round((1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100);
+
+  const [isHovering, setIsHovering] = useState(false);
+  const getHoverStyle = () => {
+    if (boxLeftEdge < 15) {
+      // show object stats on right side
+      return {
+        left: `${boxLeftEdge + eventOverlay.data.box[2] * 100 + 1}%`,
+        top: `${boxTopEdge}%`,
+      };
+    }
+
+    return {
+      right: `${boxRightEdge + eventOverlay.data.box[2] * 100 + 1}%`,
+      top: `${boxTopEdge}%`,
+    };
+  };
+
+  const getObjectArea = () => {
+    const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
+    const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
+    return Math.round(width * height);
+  };
+
+  const getObjectRatio = () => {
+    const width = eventOverlay.data.box[2];
+    const height = eventOverlay.data.box[3];
+    return Math.round(100 * width / height) / 100;
+  };
+
+  return (
+    <Fragment>
+      <div
+        className="absolute border-4 border-red-600"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        style={{
+          left: `${boxLeftEdge}%`,
+          top: `${boxTopEdge}%`,
+          right: `${boxRightEdge}%`,
+          bottom: `${boxBottomEdge}%`,
+        }}
+      >
+        {eventOverlay.class_type == 'entered_zone' ? (
+          <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
+        ) : null}
+      </div>
+      {isHovering && (
+        <div className="absolute bg-slate-800 p-4 block text-white text-lg" style={getHoverStyle()}>
+          <div className="font-bold text-xl">{event.label} attributes:</div>
+          <div>{`Object Area: ${getObjectArea()} px`}</div>
+          <div>{`Object Ratio: ${getObjectRatio()}`}</div>
+        </div>
+      )}
+    </Fragment>
+  );
+}
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 21b282a53..9742ed130 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -29,6 +29,7 @@ import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../uti
 import TimeAgo from '../components/TimeAgo';
 import Timepicker from '../components/TimePicker';
 import TimelineSummary from '../components/TimelineSummary';
+import TimelineEventOverlay from '../components/TimelineEventOverlay';
 
 const API_LIMIT = 25;
 
@@ -721,23 +722,11 @@ export default function Events({ path, ...props }) {
                                   }}
                                 >
                                   {eventOverlay ? (
-                                    <div
-                                      className="absolute border-4 border-red-600"
-                                      style={{
-                                        left: `${Math.round(eventOverlay.data.box[0] * 100)}%`,
-                                        top: `${Math.round(eventOverlay.data.box[1] * 100)}%`,
-                                        right: `${Math.round(
-                                          (1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100
-                                        )}%`,
-                                        bottom: `${Math.round(
-                                          (1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100
-                                        )}%`,
-                                      }}
-                                    >
-                                      {eventOverlay.class_type == 'entered_zone' ? (
-                                        <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
-                                      ) : null}
-                                    </div>
+                                    <TimelineEventOverlay
+                                      event={event}
+                                      eventOverlay={eventOverlay}
+                                      cameraConfig={config.cameras[event.camera]}
+                                    />
                                   ) : null}
                                 </VideoPlayer>
                               </div>

From 8fb0772fa91c017d1ec975ccf752613e926c619d Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 21 Jun 2023 16:23:55 -0600
Subject: [PATCH 2/5] Make it work with mobile too

---
 web/src/components/TimelineEventOverlay.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
index 33c6b99bf..c8dc4cd20 100644
--- a/web/src/components/TimelineEventOverlay.jsx
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -42,6 +42,8 @@ export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig
         className="absolute border-4 border-red-600"
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}
+        onTouchStart={() => setIsHovering(true)}
+        onTouchEnd={() => setIsHovering(false)}
         style={{
           left: `${boxLeftEdge}%`,
           top: `${boxTopEdge}%`,

From a55c5c42e5054fb8791def16e2160be62a133ddd Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 21 Jun 2023 16:33:51 -0600
Subject: [PATCH 3/5] Fix lint

---
 web/src/components/TimelineEventOverlay.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
index c8dc4cd20..7d31ba49d 100644
--- a/web/src/components/TimelineEventOverlay.jsx
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -1,6 +1,5 @@
 import { Fragment, h } from 'preact';
-import { useCallback, useState } from 'preact/hooks';
-import Heading from './Heading';
+import { useState } from 'preact/hooks';
 
 export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig }) {
   const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
@@ -31,9 +30,9 @@ export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig
   };
 
   const getObjectRatio = () => {
-    const width = eventOverlay.data.box[2];
-    const height = eventOverlay.data.box[3];
-    return Math.round(100 * width / height) / 100;
+    const width = eventOverlay.data.box[2] * 100;
+    const height = eventOverlay.data.box[3] * 100;
+    return Math.round(100 * (width / height)) / 100;
   };
 
   return (

From 4f92fa2552c7d8cba35d18134dad399fb56e90d1 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 21 Jun 2023 16:52:26 -0600
Subject: [PATCH 4/5] Fix ratio

---
 web/src/components/TimelineEventOverlay.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
index 7d31ba49d..57262651b 100644
--- a/web/src/components/TimelineEventOverlay.jsx
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -30,8 +30,8 @@ export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig
   };
 
   const getObjectRatio = () => {
-    const width = eventOverlay.data.box[2] * 100;
-    const height = eventOverlay.data.box[3] * 100;
+    const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
+    const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
     return Math.round(100 * (width / height)) / 100;
   };
 

From ec3c2674486e53b5554cfbd12edf6fd435cde08f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 28 Jun 2023 06:13:34 -0600
Subject: [PATCH 5/5] Update web/src/components/TimelineEventOverlay.jsx

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
---
 web/src/components/TimelineEventOverlay.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
index 57262651b..05806727c 100644
--- a/web/src/components/TimelineEventOverlay.jsx
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -57,8 +57,8 @@ export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig
       {isHovering && (
         <div className="absolute bg-slate-800 p-4 block text-white text-lg" style={getHoverStyle()}>
           <div className="font-bold text-xl">{event.label} attributes:</div>
-          <div>{`Object Area: ${getObjectArea()} px`}</div>
-          <div>{`Object Ratio: ${getObjectRatio()}`}</div>
+          <div>{`Area: ${getObjectArea()} px`}</div>
+          <div>{`Ratio: ${getObjectRatio()}`}</div>
         </div>
       )}
     </Fragment>