From be825cb37c6401cb9e288c848ad512d6fde5b988 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 22 Feb 2024 10:05:27 -0600
Subject: [PATCH] scroll minimap to keep it in view

---
 web/src/components/timeline/EventSegment.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 8d3507079..5595d799f 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -1,7 +1,7 @@
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useSegmentUtils } from "@/hooks/use-segment-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -179,6 +179,18 @@ export function EventSegment({
     return showMinimap && segmentTime === alignedMinimapEndTime;
   }, [showMinimap, segmentTime, alignedMinimapEndTime]);
 
+  const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Check if the first segment is out of view
+    const firstSegment = firstMinimapSegmentRef.current;
+    if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
+      // Scroll the first segment into view
+      console.log("scrolling into view");
+      firstSegment.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [showMinimap, isFirstSegmentInMinimap, timestampSpread]);
+
   const segmentClasses = `flex flex-row ${
     showMinimap
       ? isInMinimapRange
@@ -235,6 +247,7 @@ export function EventSegment({
             <div
               className="mr-3 w-[8px] h-2 flex justify-left items-end"
               data-severity={severityValue}
+              ref={isFirstSegmentInMinimap ? firstMinimapSegmentRef : undefined}
             >
               <div
                 key={`${segmentKey}_${index}_primary_data`}