Summary timeline (#10569)

* implement summary timeline

* implement summary timeline

* merge dev

* conditionally attach listeners only when dragging

* set up listeners with a ref

web/src/hooks/use-draggable-element.ts

@@ -40,7 +40,8 @@ function useDraggableElement({
 }: DraggableElementProps) {
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
-  const { alignStartDateToTimeline } = useTimelineUtils(segmentDuration);
+  const { alignStartDateToTimeline, getCumulativeScrollTop } =
+    useTimelineUtils(segmentDuration);
 
   const draggingAtTopEdge = useMemo(() => {
     if (clientYPosition && timelineRef.current) {
@@ -125,15 +126,6 @@ function useDraggableElement({
     [isDragging, setIsDragging],
   );
 
-  const getCumulativeScrollTop = useCallback((element: HTMLElement | null) => {
-    let scrollTop = 0;
-    while (element) {
-      scrollTop += element.scrollTop;
-      element = element.parentElement;
-    }
-    return scrollTop;
-  }, []);
-
   const timestampToPixels = useCallback(
     (time: number) => {
       const { scrollHeight: timelineHeight } =

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

@@ -58,11 +58,12 @@ export const useEventSegmentUtils = (
       );
       const highestSeverityValue = Math.max(...severityValues);
 
-      if (
-        severityValues.includes(displaySeverityType) &&
-        displaySeverityType !== highestSeverityValue
-      ) {
-        return [displaySeverityType, highestSeverityValue];
+      if (severityValues.includes(displaySeverityType)) {
+        const otherSeverityValues = severityValues.filter(
+          (severity) => severity !== displaySeverityType,
+        );
+        const highestOtherSeverityValue = Math.max(...otherSeverityValues);
+        return [displaySeverityType, highestOtherSeverityValue];
       } else {
         return [highestSeverityValue];
       }

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

@@ -19,8 +19,18 @@ export const useTimelineUtils = (segmentDuration: number) => {
     [segmentDuration],
   );
 
+  const getCumulativeScrollTop = useCallback((element: HTMLElement | null) => {
+    let scrollTop = 0;
+    while (element) {
+      scrollTop += element.scrollTop;
+      element = element.parentElement;
+    }
+    return scrollTop;
+  }, []);
+
   return {
     alignEndDateToTimeline,
     alignStartDateToTimeline,
+    getCumulativeScrollTop,
   };
 };