Review timeline bugfixes (#9962)

* fix severity logic

* timestamp line height

* use timestamp for end of timeline instead of duration

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

@@ -1,37 +1,61 @@
-import { useCallback } from 'react';
-import { ReviewSegment } from '@/types/review';
+import { useCallback } from "react";
+import { ReviewSegment } from "@/types/review";
 
-export const useEventUtils = (events: ReviewSegment[], segmentDuration: number) => {
-  const isStartOfEvent = useCallback((time: number): boolean => {
-    return events.some((event) => {
-      const segmentStart = getSegmentStart(event.start_time);
-      return time >= segmentStart && time < segmentStart + segmentDuration;
-    });
-  }, [events, segmentDuration]);
+export const useEventUtils = (
+  events: ReviewSegment[],
+  segmentDuration: number
+) => {
+  const isStartOfEvent = useCallback(
+    (time: number): boolean => {
+      return events.some((event) => {
+        const segmentStart = getSegmentStart(event.start_time);
+        return time >= segmentStart && time < segmentStart + segmentDuration;
+      });
+    },
+    [events, segmentDuration]
+  );
 
-  const isEndOfEvent = useCallback((time: number): boolean => {
-    return events.some((event) => {
-      if (typeof event.end_time === 'number') {
-        const segmentEnd = getSegmentEnd(event.end_time);
-        return time >= segmentEnd - segmentDuration && time < segmentEnd;
-      }
-      return false; // Return false if end_time is undefined
-    });
-  }, [events, segmentDuration]);
+  const isEndOfEvent = useCallback(
+    (time: number): boolean => {
+      return events.some((event) => {
+        if (typeof event.end_time === "number") {
+          const segmentEnd = getSegmentEnd(event.end_time);
+          return time >= segmentEnd - segmentDuration && time < segmentEnd;
+        }
+        return false;
+      });
+    },
+    [events, segmentDuration]
+  );
 
-  const getSegmentStart = useCallback((time: number): number => {
-    return Math.floor(time / (segmentDuration)) * (segmentDuration);
-  }, [segmentDuration]);
+  const getSegmentStart = useCallback(
+    (time: number): number => {
+      return Math.floor(time / segmentDuration) * segmentDuration;
+    },
+    [segmentDuration]
+  );
 
-  const getSegmentEnd = useCallback((time: number): number => {
-    return Math.ceil(time / (segmentDuration)) * (segmentDuration);
-  }, [segmentDuration]);
+  const getSegmentEnd = useCallback(
+    (time: number): number => {
+      return Math.ceil(time / segmentDuration) * segmentDuration;
+    },
+    [segmentDuration]
+  );
 
-  const alignDateToTimeline = useCallback((time: number): number => {
-    const remainder = time % (segmentDuration);
-    const adjustment = remainder !== 0 ? segmentDuration - remainder : 0;
-    return time + adjustment;
-  }, [segmentDuration]);
+  const alignDateToTimeline = useCallback(
+    (time: number): number => {
+      const remainder = time % segmentDuration;
+      const adjustment = remainder !== 0 ? segmentDuration - remainder : 0;
+      return time + adjustment;
+    },
+    [segmentDuration]
+  );
 
-  return { isStartOfEvent, isEndOfEvent, getSegmentStart, getSegmentEnd, alignDateToTimeline };
+  return {
+    isStartOfEvent,
+    isEndOfEvent,
+    getSegmentStart,
+    getSegmentEnd,
+    alignDateToTimeline,
+  };
 };

web/src/hooks/use-handle-dragging.ts

@@ -50,7 +50,11 @@ function useDraggableHandler({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      if (!contentRef.current || !timelineRef.current || !scrollTimeRef.current) {
+      if (
+        !contentRef.current ||
+        !timelineRef.current ||
+        !scrollTimeRef.current
+      ) {
         return;
       }
 
@@ -68,9 +72,7 @@ function useDraggableHandler({
         const segmentHeight =
           timelineHeight / (timelineDuration / segmentDuration);
 
-        const getCumulativeScrollTop = (
-          element: HTMLElement | null
-        ) => {
+        const getCumulativeScrollTop = (element: HTMLElement | null) => {
           let scrollTop = 0;
           while (element) {
             scrollTop += element.scrollTop;
@@ -100,7 +102,7 @@ function useDraggableHandler({
             thumb.style.top = `${newHandlePosition - segmentHeight}px`;
             if (currentTimeRef.current) {
               currentTimeRef.current.textContent = new Date(
-                segmentStartTime*1000
+                segmentStartTime * 1000
               ).toLocaleTimeString([], {
                 hour: "2-digit",
                 minute: "2-digit",

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

@@ -1,22 +1,30 @@
-import { useCallback, useMemo } from 'react';
-import { ReviewSegment } from '@/types/review';
+import { useCallback, useMemo } from "react";
+import { ReviewSegment } from "@/types/review";
 
 export const useSegmentUtils = (
   segmentDuration: number,
   events: ReviewSegment[],
-  severityType: string,
+  severityType: string
 ) => {
-  const getSegmentStart = useCallback((time: number): number => {
-    return Math.floor(time / (segmentDuration)) * (segmentDuration);
-  }, [segmentDuration]);
+  const getSegmentStart = useCallback(
+    (time: number): number => {
+      return Math.floor(time / segmentDuration) * segmentDuration;
+    },
+    [segmentDuration]
+  );
 
-    const getSegmentEnd = useCallback((time: number | undefined): number => {
-        if (time) {
-            return Math.ceil(time / (segmentDuration)) * (segmentDuration);
-        } else {
-            return (Date.now()/1000)+(segmentDuration);
-        }
-  }, [segmentDuration]);
+  const getSegmentEnd = useCallback(
+    (time: number | undefined): number => {
+      if (time) {
+        return (
+          Math.floor(time / segmentDuration) * segmentDuration + segmentDuration
+        );
+      } else {
+        return Date.now() / 1000 + segmentDuration;
+      }
+    },
+    [segmentDuration]
+  );
 
   const mapSeverityToNumber = useCallback((severity: string): number => {
     switch (severity) {
@@ -36,75 +44,94 @@ export const useSegmentUtils = (
     [severityType]
   );
 
-  const getSeverity = useCallback((time: number): number => {
-    const activeEvents = events?.filter((event) => {
-      const segmentStart = getSegmentStart(event.start_time);
-      const segmentEnd = getSegmentEnd(event.end_time);
-      return time >= segmentStart && time < segmentEnd;
-    });
-    if (activeEvents?.length === 0) return 0; // No event at this time
-    const severityValues = activeEvents?.map((event) =>
-      mapSeverityToNumber(event.severity)
-    );
-    return Math.max(...severityValues);
-  }, [events, getSegmentStart, getSegmentEnd, mapSeverityToNumber]);
+  const getSeverity = useCallback(
+    (time: number, displaySeverityType: number): number[] => {
+      const activeEvents = events?.filter((event) => {
+        const segmentStart = getSegmentStart(event.start_time);
+        const segmentEnd = getSegmentEnd(event.end_time);
+        return time >= segmentStart && time < segmentEnd;
+      });
 
-  const getReviewed = useCallback((time: number): boolean => {
-    return events.some((event) => {
-      const segmentStart = getSegmentStart(event.start_time);
-      const segmentEnd = getSegmentEnd(event.end_time);
-      return (
-        time >= segmentStart && time < segmentEnd && event.has_been_reviewed
+      if (activeEvents?.length === 0) return [0];
+      const severityValues = activeEvents.map((event) =>
+        mapSeverityToNumber(event.severity)
       );
-    });
-  }, [events, getSegmentStart, getSegmentEnd]);
+      const highestSeverityValue = Math.max(...severityValues);
+
+      if (
+        severityValues.includes(displaySeverityType) &&
+        displaySeverityType !== highestSeverityValue
+      ) {
+        return [displaySeverityType, highestSeverityValue];
+      } else {
+        return [highestSeverityValue];
+      }
+    },
+    [events, getSegmentStart, getSegmentEnd, mapSeverityToNumber]
+  );
+
+  const getReviewed = useCallback(
+    (time: number): boolean => {
+      return events.some((event) => {
+        const segmentStart = getSegmentStart(event.start_time);
+        const segmentEnd = getSegmentEnd(event.end_time);
+        return (
+          time >= segmentStart && time < segmentEnd && event.has_been_reviewed
+        );
+      });
+    },
+    [events, getSegmentStart, getSegmentEnd]
+  );
 
   const shouldShowRoundedCorners = useCallback(
-    (segmentTime: number): { roundTop: boolean, roundBottom: boolean } => {
-
+    (segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
       const prevSegmentTime = segmentTime - segmentDuration;
       const nextSegmentTime = segmentTime + segmentDuration;
 
-      const severityEvents = events.filter(e => e.severity === severityType);
+      const severityEvents = events.filter((e) => e.severity === severityType);
 
-      const otherEvents = events.filter(e => e.severity !== severityType);
+      const otherEvents = events.filter((e) => e.severity !== severityType);
 
-      const hasPrevSeverityEvent = severityEvents.some(e => {
+      const hasPrevSeverityEvent = severityEvents.some((e) => {
         return (
           prevSegmentTime >= getSegmentStart(e.start_time) &&
           prevSegmentTime < getSegmentEnd(e.end_time)
         );
       });
 
-      const hasNextSeverityEvent = severityEvents.some(e => {
+      const hasNextSeverityEvent = severityEvents.some((e) => {
         return (
           nextSegmentTime >= getSegmentStart(e.start_time) &&
           nextSegmentTime < getSegmentEnd(e.end_time)
         );
       });
 
-      const hasPrevOtherEvent = otherEvents.some(e => {
-         return (
-           prevSegmentTime >= getSegmentStart(e.start_time) &&
-           prevSegmentTime < getSegmentEnd(e.end_time)
-         );
+      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 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 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)
+      const hasOverlappingOtherEvent = otherEvents.some((e) => {
+        return (
+          segmentTime >= getSegmentStart(e.start_time) &&
+          segmentTime < getSegmentEnd(e.end_time)
+        );
       });
 
       let roundTop = false;
@@ -123,12 +150,18 @@ export const useSegmentUtils = (
 
       return {
         roundTop,
-        roundBottom
+        roundBottom,
       };
-
     },
     [events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
   );
 
-  return { getSegmentStart, getSegmentEnd, getSeverity, displaySeverityType, getReviewed, shouldShowRoundedCorners };
+  return {
+    getSegmentStart,
+    getSegmentEnd,
+    getSeverity,
+    displaySeverityType,
+    getReviewed,
+    shouldShowRoundedCorners,
+  };
 };