fix timeline overscrolling

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

@@ -44,6 +44,7 @@ function useDraggableElement({
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
   const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
+  const [fullTimelineHeight, setFullTimelineHeight] = useState<number>();
   const [segments, setSegments] = useState<HTMLDivElement[]>([]);
   const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
     {
@@ -218,7 +219,8 @@ function useDraggableElement({
         showDraggableElement &&
         isDragging &&
         clientYPosition &&
-        segments
+        segments &&
+        fullTimelineHeight
       ) {
         const { scrollTop: scrolled } = timelineRef.current;
 
@@ -227,8 +229,7 @@ function useDraggableElement({
         // bottom of timeline
         const elementEarliest = draggableElementEarliestTime
           ? timestampToPixels(draggableElementEarliestTime)
-          : segmentHeight * (timelineDuration / segmentDuration) -
+          : fullTimelineHeight - segmentHeight * 1.5;
-            segmentHeight * 3.5;
 
         // top of timeline - default 2 segments added for draggableElement visibility
         const elementLatest = draggableElementLatestTime
@@ -302,7 +303,11 @@ function useDraggableElement({
                   scrollEdgeSize)) /
                 scrollEdgeSize,
             );
-            timelineRef.current.scrollTop += segmentHeight * intensity;
+            const newScrollTop = Math.min(
+              fullTimelineHeight - segmentHeight,
+              timelineRef.current.scrollTop + segmentHeight * intensity,
+            );
+            timelineRef.current.scrollTop = newScrollTop;
           }
         }
 
@@ -405,6 +410,7 @@ function useDraggableElement({
 
   useEffect(() => {
     if (timelineRef.current && draggableElementTime && timelineCollapsed) {
+      setFullTimelineHeight(timelineRef.current.scrollHeight);
       const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
 
       let segmentElement = timelineRef.current.querySelector(
@@ -414,8 +420,12 @@ function useDraggableElement({
       if (!segmentElement) {
         // segment not found, maybe we collapsed over a collapsible segment
         let searchTime = alignedSegmentTime;
-        while (searchTime >= timelineStartAligned - timelineDuration) {
+
-          searchTime -= segmentDuration;
+        while (
+          searchTime < timelineStartAligned &&
+          searchTime < timelineStartAligned + timelineDuration
+        ) {
+          searchTime += segmentDuration;
           segmentElement = timelineRef.current.querySelector(
             `[data-segment-id="${searchTime}"]`,
           );
@@ -435,10 +445,11 @@ function useDraggableElement({
   }, [timelineCollapsed]);
 
   useEffect(() => {
-    if (timelineRef.current) {
+    if (timelineRef.current && segments) {
       setScrollEdgeSize(timelineRef.current.clientHeight * 0.03);
+      setFullTimelineHeight(timelineRef.current.scrollHeight);
     }
-  }, [timelineRef]);
+  }, [timelineRef, segments]);
 
   return { handleMouseDown, handleMouseUp, handleMouseMove };
 }

web/src/pages/UIPlayground.tsx

@@ -367,7 +367,7 @@ function UIPlayground() {
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
                 timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
-                timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
+                timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
                 showHandlebar // show / hide the handlebar
                 handlebarTime={handlebarTime} // set the time of the handlebar
                 setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@@ -391,7 +391,7 @@ function UIPlayground() {
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
                 timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
-                timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
+                timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
                 showHandlebar // show / hide the handlebar
                 handlebarTime={handlebarTime} // set the time of the handlebar
                 setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@@ -416,7 +416,7 @@ function UIPlayground() {
               <SummaryTimeline
                 reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
                 timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
-                timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
+                timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
                 segmentDuration={zoomSettings.segmentDuration}
                 events={mockEvents}
                 severityType={"alert"} // show only events of this severity on the summary timeline