Timeline minimap and scrolling changes (#10589)

* add function to get visible timeline duration

* Don't show minimap when minimap bounds exceed timeline area

* when minimap is hidden, only scroll timeline when needed

* observe only when not showing minimap

* no need to duplicate observer

* fix out of order param

* timeline utils hook props

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/timeline/EventSegment.tsx

@@ -53,8 +53,9 @@ export function EventSegment({
     getEventThumbnail,
   } = useEventSegmentUtils(segmentDuration, events, severityType);
 
-  const { alignStartDateToTimeline, alignEndDateToTimeline } =
-    useTimelineUtils(segmentDuration);
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
+    { segmentDuration },
+  );
 
   const severity = useMemo(
     () => getSeverity(segmentTime, displaySeverityType),
@@ -199,6 +200,7 @@ export function EventSegment({
   return (
     <div
       key={segmentKey}
+      data-segment-id={segmentKey}
       className={segmentClasses}
       onClick={segmentClick}
       onTouchEnd={(event) => handleTouchStart(event, segmentClick)}