Review timeline improvements (#10102)

* make event bars clickable

* outline and scroll when segment is clicked

* match outline colors to event type

* hover thumbnails

* make event bars clickable

* outline and scroll when segment is clicked

* match outline colors to event type

* hover thumbnails

* fix merge from rebase

* remove minimap opacity classes

* live player outline colors

* safelist shadow classes

web/src/hooks/use-segment-utils.ts

@@ -84,7 +84,14 @@ export const useSegmentUtils = (
   );
 
   const shouldShowRoundedCorners = useCallback(
-    (segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
+    (
+      segmentTime: number
+    ): {
+      roundTopPrimary: boolean;
+      roundBottomPrimary: boolean;
+      roundTopSecondary: boolean;
+      roundBottomSecondary: boolean;
+    } => {
       const prevSegmentTime = segmentTime - segmentDuration;
       const nextSegmentTime = segmentTime + segmentDuration;
 
@@ -134,28 +141,61 @@ export const useSegmentUtils = (
         );
       });
 
-      let roundTop = false;
-      let roundBottom = false;
+      let roundTopPrimary = false;
+      let roundBottomPrimary = false;
+      let roundTopSecondary = false;
+      let roundBottomSecondary = false;
 
       if (hasOverlappingSeverityEvent) {
-        roundBottom = !hasPrevSeverityEvent;
-        roundTop = !hasNextSeverityEvent;
-      } else if (hasOverlappingOtherEvent) {
-        roundBottom = !hasPrevOtherEvent;
-        roundTop = !hasNextOtherEvent;
-      } else {
-        roundTop = !hasNextSeverityEvent || !hasNextOtherEvent;
-        roundBottom = !hasPrevSeverityEvent || !hasPrevOtherEvent;
+        roundBottomPrimary = !hasPrevSeverityEvent;
+        roundTopPrimary = !hasNextSeverityEvent;
+      }
+
+      if (hasOverlappingOtherEvent) {
+        roundBottomSecondary = !hasPrevOtherEvent;
+        roundTopSecondary = !hasNextOtherEvent;
       }
 
       return {
-        roundTop,
-        roundBottom,
+        roundTopPrimary,
+        roundBottomPrimary,
+        roundTopSecondary,
+        roundBottomSecondary,
       };
     },
     [events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
   );
 
+  const getEventStart = useCallback(
+    (time: number): number => {
+      const matchingEvent = events.find((event) => {
+        return (
+          time >= getSegmentStart(event.start_time) &&
+          time < getSegmentEnd(event.end_time) &&
+          event.severity == severityType
+        );
+      });
+
+      return matchingEvent?.start_time ?? 0;
+    },
+    [events, getSegmentStart, getSegmentEnd, severityType]
+  );
+
+  const getEventThumbnail = useCallback(
+    (time: number): string => {
+      const matchingEvent = events.find((event) => {
+        return (
+          time >= getSegmentStart(event.start_time) &&
+          time < getSegmentEnd(event.end_time) &&
+          event.severity == severityType
+        );
+      });
+
+      return matchingEvent?.thumb_path ?? "";
+    },
+    [events, getSegmentStart, getSegmentEnd, severityType]
+  );
+
   return {
     getSegmentStart,
     getSegmentEnd,
@@ -163,5 +203,7 @@ export const useSegmentUtils = (
     displaySeverityType,
     getReviewed,
     shouldShowRoundedCorners,
+    getEventStart,
+    getEventThumbnail
   };
-};
+};