From 37f60f7140d0b357038fd1353d4edfe9ee33649c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 24 Mar 2024 12:39:28 -0500
Subject: [PATCH] UI changes (#10651)

* Check if event time is in segment

* conditionally render minimap bounds for event segments
---
 web/src/components/timeline/EventSegment.tsx  | 16 +++++----
 web/src/components/timeline/MotionSegment.tsx | 16 +++++----
 web/src/hooks/use-event-segment-utils.ts      | 35 ++++++++++++-------
 web/src/pages/UIPlayground.tsx                | 10 +++---
 web/src/views/events/EventView.tsx            | 11 ++++--
 5 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 1984d448c..596c9788e 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -205,13 +205,15 @@ export function EventSegment({
       onClick={segmentClick}
       onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
     >
-      <MinimapBounds
-        isFirstSegmentInMinimap={isFirstSegmentInMinimap}
-        isLastSegmentInMinimap={isLastSegmentInMinimap}
-        alignedMinimapStartTime={alignedMinimapStartTime}
-        alignedMinimapEndTime={alignedMinimapEndTime}
-        firstMinimapSegmentRef={firstMinimapSegmentRef}
-      />
+      {showMinimap && (
+        <MinimapBounds
+          isFirstSegmentInMinimap={isFirstSegmentInMinimap}
+          isLastSegmentInMinimap={isLastSegmentInMinimap}
+          alignedMinimapStartTime={alignedMinimapStartTime}
+          alignedMinimapEndTime={alignedMinimapEndTime}
+          firstMinimapSegmentRef={firstMinimapSegmentRef}
+        />
+      )}
 
       <Tick timestamp={timestamp} timestampSpread={timestampSpread} />
 
diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index dd54a03b6..748024239 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -196,13 +196,15 @@ export function MotionSegment({
         >
           {!motionOnly && (
             <>
-              <MinimapBounds
-                isFirstSegmentInMinimap={isFirstSegmentInMinimap}
-                isLastSegmentInMinimap={isLastSegmentInMinimap}
-                alignedMinimapStartTime={alignedMinimapStartTime}
-                alignedMinimapEndTime={alignedMinimapEndTime}
-                firstMinimapSegmentRef={firstMinimapSegmentRef}
-              />
+              {showMinimap && (
+                <MinimapBounds
+                  isFirstSegmentInMinimap={isFirstSegmentInMinimap}
+                  isLastSegmentInMinimap={isLastSegmentInMinimap}
+                  alignedMinimapStartTime={alignedMinimapStartTime}
+                  alignedMinimapEndTime={alignedMinimapEndTime}
+                  firstMinimapSegmentRef={firstMinimapSegmentRef}
+                />
+              )}
 
               <Tick
                 key={`${segmentKey}_tick`}
diff --git a/web/src/hooks/use-event-segment-utils.ts b/web/src/hooks/use-event-segment-utils.ts
index 61bbe2119..3ecafcded 100644
--- a/web/src/hooks/use-event-segment-utils.ts
+++ b/web/src/hooks/use-event-segment-utils.ts
@@ -46,24 +46,33 @@ export const useEventSegmentUtils = (
 
   const getSeverity = useCallback(
     (time: number, displaySeverityType: number): number[] => {
-      const activeEvents = events?.filter((event) => {
+      let highestSeverityValue = 0;
+      let highestOtherSeverityValue = 0;
+      let hasDisplaySeverityType = false;
+
+      for (const event of events || []) {
         const segmentStart = getSegmentStart(event.start_time);
         const segmentEnd = getSegmentEnd(event.end_time);
-        return time >= segmentStart && time < segmentEnd;
-      });
 
-      if (activeEvents?.length === 0) return [0];
-      const severityValues = activeEvents.map((event) =>
-        mapSeverityToNumber(event.severity),
-      );
-      const highestSeverityValue = Math.max(...severityValues);
+        if (time >= segmentStart && time < segmentEnd) {
+          const severity = mapSeverityToNumber(event.severity);
 
-      if (severityValues.includes(displaySeverityType)) {
-        const otherSeverityValues = severityValues.filter(
-          (severity) => severity !== displaySeverityType,
-        );
-        const highestOtherSeverityValue = Math.max(...otherSeverityValues);
+          if (severity === displaySeverityType) {
+            hasDisplaySeverityType = true;
+            highestOtherSeverityValue = Math.max(
+              highestOtherSeverityValue,
+              highestSeverityValue,
+            );
+          } else {
+            highestSeverityValue = Math.max(highestSeverityValue, severity);
+          }
+        }
+      }
+
+      if (hasDisplaySeverityType) {
         return [displaySeverityType, highestOtherSeverityValue];
+      } else if (highestSeverityValue === 0) {
+        return [0];
       } else {
         return [highestSeverityValue];
       }
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 4f44564ad..bec9828c3 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -89,7 +89,7 @@ function generateRandomMotionAudioData(): MotionData[] {
 
 const generateRandomEvent = (): ReviewSegment => {
   const start_time =
-    Math.floor(Date.now() / 1000) - 10800 - Math.random() * 60 * 60;
+    Math.floor(Date.now() / 1000) - 60 * 30 - Math.random() * 60 * 60;
   const end_time = Math.floor(start_time + Math.random() * 60 * 10);
   const severities: ReviewSeverity[] = [
     "significant_motion",
@@ -365,12 +365,12 @@ function UIPlayground() {
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
                 timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
-                timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
+                timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
                 showHandlebar // show / hide the handlebar
                 handlebarTime={handlebarTime} // set the time of the handlebar
                 setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
                 onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
-                showMinimap // show / hide the minimap
+                showMinimap={false} // show / hide the minimap
                 minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
                 minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
                 showExportHandles={showExportHandles}
@@ -389,7 +389,7 @@ function UIPlayground() {
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
                 timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
-                timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
+                timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
                 showHandlebar // show / hide the handlebar
                 handlebarTime={handlebarTime} // set the time of the handlebar
                 setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@@ -414,7 +414,7 @@ function UIPlayground() {
               <SummaryTimeline
                 reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
                 timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
-                timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
+                timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
                 segmentDuration={zoomSettings.segmentDuration}
                 events={mockEvents}
                 severityType={"alert"} // show only events of this severity on the summary timeline
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 141766a29..41101807d 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -758,21 +758,26 @@ function MotionReview({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playing, playbackRate]);
 
+  const { alignStartDateToTimeline } = useTimelineUtils({
+    segmentDuration,
+  });
+
   const getDetectionType = useCallback(
     (cameraName: string) => {
       if (motionOnly) {
         return null;
       }
+      const segmentTime = alignStartDateToTimeline(currentTime);
       const matchingItem = reviewItems?.all.find(
         (item) =>
-          currentTime >= item.start_time &&
-          currentTime <= item.end_time &&
+          item.start_time >= segmentTime &&
+          item.end_time <= segmentTime + segmentDuration &&
           item.camera === cameraName,
       );
 
       return matchingItem ? matchingItem.severity : null;
     },
-    [reviewItems, currentTime, motionOnly],
+    [reviewItems, currentTime, motionOnly, alignStartDateToTimeline],
   );
 
   if (!relevantPreviews) {