From a3693e907f7b04d19140640dc983abb4b2e22f1c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:59:05 -0600
Subject: [PATCH] fix corner rounding

---
 web/src/components/timeline/EventSegment.tsx | 30 ++--------
 web/src/hooks/use-segment-utils.ts           | 63 +++++++++++++++++---
 2 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index d300969ae..07ba503a4 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -127,10 +127,6 @@ export function EventSegment({
   minimapEndTime,
   severityType,
 }: EventSegmentProps) {
-  const { isStartOfEvent, isEndOfEvent } = useEventUtils(
-    events,
-    segmentDuration
-  );
   const {
     getSeverity,
     getReviewed,
@@ -148,7 +144,7 @@ export function EventSegment({
     () => getReviewed(segmentTime),
     [getReviewed, segmentTime]
   );
-  const showRoundedCorners = useMemo(
+  const { roundTop, roundBottom } = useMemo(
     () => shouldShowRoundedCorners(segmentTime),
     [shouldShowRoundedCorners, segmentTime]
   );
@@ -239,16 +235,8 @@ export function EventSegment({
             key={`${segmentKey}_primary_data`}
             className={`
           w-full h-2 bg-gradient-to-r
-          ${
-            showRoundedCorners && isStartOfEvent(segmentTime)
-              ? "rounded-bl-full rounded-br-full"
-              : ""
-          }
-          ${
-            showRoundedCorners && isEndOfEvent(segmentTime)
-              ? "rounded-tl-full rounded-tr-full"
-              : ""
-          }
+          ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
+          ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
           ${severityColors[severity]}
 
           `}
@@ -262,16 +250,8 @@ export function EventSegment({
             key={`${segmentKey}_secondary_data`}
             className={`
             w-1 h-2 bg-gradient-to-r
-            ${
-              showRoundedCorners && isStartOfEvent(segmentTime)
-                ? "rounded-bl-full rounded-br-full"
-                : ""
-            }
-            ${
-              showRoundedCorners && isEndOfEvent(segmentTime)
-                ? "rounded-tl-full rounded-tr-full"
-                : ""
-            }
+            ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
+            ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
             ${severityColors[severity]}
 
           `}
diff --git a/web/src/hooks/use-segment-utils.ts b/web/src/hooks/use-segment-utils.ts
index 82458e751..3180bb924 100644
--- a/web/src/hooks/use-segment-utils.ts
+++ b/web/src/hooks/use-segment-utils.ts
@@ -60,27 +60,72 @@ export const useSegmentUtils = (
   }, [events, getSegmentStart, getSegmentEnd]);
 
   const shouldShowRoundedCorners = useCallback(
-    (segmentTime: number): boolean => {
+    (segmentTime: number): { roundTop: boolean, roundBottom: boolean } => {
+
       const prevSegmentTime = segmentTime - segmentDuration;
       const nextSegmentTime = segmentTime + segmentDuration;
 
-      const hasPrevEvent = events.some((e) => {
+      const severityEvents = events.filter(e => e.severity === severityType);
+
+      const otherEvents = events.filter(e => e.severity !== severityType);
+
+      const hasPrevSeverityEvent = severityEvents.some(e => {
         return (
           prevSegmentTime >= getSegmentStart(e.start_time) &&
-          prevSegmentTime < getSegmentEnd(e.end_time) &&
-          e.severity === severityType
+          prevSegmentTime < getSegmentEnd(e.end_time)
         );
       });
 
-      const hasNextEvent = events.some((e) => {
+      const hasNextSeverityEvent = severityEvents.some(e => {
         return (
-          nextSegmentTime >= getSegmentStart(e.start_time) &&
-          nextSegmentTime < getSegmentEnd(e.end_time) &&
-          e.severity === severityType
+          nextSegmentTime > getSegmentStart(e.start_time) &&
+          nextSegmentTime < getSegmentEnd(e.end_time)
         );
       });
 
-      return !hasPrevEvent || !hasNextEvent;
+      const hasPrevOtherEvent = otherEvents.some(e => {
+         return (
+           prevSegmentTime >= getSegmentStart(e.start_time) &&
+           prevSegmentTime < getSegmentEnd(e.end_time)
+         );
+      });
+
+      const hasNextOtherEvent = otherEvents.some(e => {
+         return (
+           nextSegmentTime > getSegmentStart(e.start_time) &&
+           nextSegmentTime < getSegmentEnd(e.end_time)
+         );
+      });
+
+      const hasOverlappingSeverityEvent = severityEvents.some(e => {
+        return segmentTime >= getSegmentStart(e.start_time) &&
+               segmentTime < getSegmentEnd(e.end_time)
+      });
+
+      const hasOverlappingOtherEvent = otherEvents.some(e => {
+        return segmentTime >= getSegmentStart(e.start_time) &&
+               segmentTime < getSegmentEnd(e.end_time)
+      });
+
+      let roundTop = false;
+      let roundBottom = false;
+
+      if (hasOverlappingSeverityEvent) {
+        roundBottom = !hasPrevSeverityEvent;
+        roundTop = !hasNextSeverityEvent;
+      } else if (hasOverlappingOtherEvent) {
+        roundBottom = !hasPrevOtherEvent;
+        roundTop = !hasNextOtherEvent;
+      } else {
+        roundTop = !hasNextSeverityEvent && !hasNextOtherEvent;
+        roundBottom = !hasPrevSeverityEvent && !hasPrevOtherEvent;
+      }
+
+      return {
+        roundTop,
+        roundBottom
+      };
+
     },
     [events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
   );