fix(segmentation): Fixed the manual scrolling of the segments list and implemented automatic scrolling to the active segment. (#5510)

The height of the list container is now calculated based on a parent div instead of itself.
DataRow component now has a forward ref to allow for automatic scrolling.

Added better detection to the useDynamicMaxHeight hook for when to recalculate the max height using intersection observers.

The useEffect for scrolling a segment into view used to be excessively called to the point
where it was auto scrolling after the user manually scrolled. The auto scroll useEffect is
now dependent on the segment index changing which should only happen once per active segment change.

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { Button } from '../../components/Button/Button';
 import {
   DropdownMenu,
@@ -107,7 +107,9 @@ interface DataRowProps {
   children?: React.ReactNode;
 }
 
-const DataRowComponent: React.FC<DataRowProps> = ({
+const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
+  (
+    {
       number,
       title,
       colorHex,
@@ -124,27 +126,20 @@ const DataRowComponent: React.FC<DataRowProps> = ({
       disableEditing = false,
       className,
       children,
-}) => {
+    },
+    ref
+  ) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const isTitleLong = title?.length > 25;
-  const rowRef = useRef<HTMLDivElement>(null);
 
     // Extract Status components from children
     const statusComponents = React.Children.toArray(children).filter(
       child =>
         React.isValidElement(child) &&
         child.type &&
-      (child.type as any).displayName?.startsWith('DataRow.Status')
+        (child.type as React.ComponentType).displayName?.startsWith('DataRow.Status')
     );
 
-  // useEffect(() => {
-  //   if (isSelected && rowRef.current) {
-  //     setTimeout(() => {
-  //       rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  //     }, 200);
-  //   }
-  // }, [isSelected]);
-
     const handleAction = (action: string, e: React.MouseEvent) => {
       e.stopPropagation();
       switch (action) {
@@ -229,7 +224,7 @@ const DataRowComponent: React.FC<DataRowProps> = ({
 
     return (
       <div
-      ref={rowRef}
+        ref={ref}
         className={cn('flex flex-col', !isVisible && 'opacity-60', className)}
       >
         <div
@@ -314,7 +309,9 @@ const DataRowComponent: React.FC<DataRowProps> = ({
             </Button>
 
             {/* Lock Icon (if needed) */}
-          {isLocked && !disableEditing && <Icons.Lock className="text-muted-foreground h-6 w-6" />}
+            {isLocked && !disableEditing && (
+              <Icons.Lock className="text-muted-foreground h-6 w-6" />
+            )}
 
             {/* Status Components */}
             {statusComponents}
@@ -405,7 +402,10 @@ const DataRowComponent: React.FC<DataRowProps> = ({
         )}
       </div>
     );
-};
+  }
+);
+
+DataRowComponent.displayName = 'DataRow';
 
 interface StatusProps {
   children: React.ReactNode;
@@ -490,7 +490,7 @@ Status.Success = StatusSuccess;
 Status.Error = StatusError;
 Status.Info = StatusInfo;
 
-const DataRow = DataRowComponent as React.FC<DataRowProps> & {
+const DataRow = DataRowComponent as typeof DataRowComponent & {
   Status: typeof Status;
 };
 

platform/ui-next/src/components/SegmentationTable/SegmentationSegments.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ScrollArea, DataRow } from '../../components';
 import { HoverCard, HoverCardTrigger, HoverCardContent } from '../../components/HoverCard';
 import { useSegmentationTableContext, useSegmentationExpanded } from './contexts';
@@ -23,6 +23,11 @@ export const SegmentationSegments = ({ children = null }: { children?: React.Rea
   let segmentation;
   let representation;
 
+  const activeSegmentRef = React.useRef<{
+    element: HTMLElement | null;
+    index: number | null;
+  }>({ element: null, index: null });
+
   try {
     // Try to use the SegmentationExpanded context if available
     const segmentationInfo = useSegmentationExpanded('SegmentationSegments');
@@ -38,23 +43,61 @@ export const SegmentationSegments = ({ children = null }: { children?: React.Rea
   }
 
   const segments = Object.values(representation.segments);
+
+  // Find the active segment to scroll to it when it changes
+  const activeSegment = segments.find(segment => {
+    if (!segment) {
+      return false;
+    }
+    const segmentFromSegmentation = segmentation.segments[segment.segmentIndex];
+    return segmentFromSegmentation?.active;
+  });
+
   const isActiveSegmentation = segmentation.segmentationId === activeSegmentationId;
 
   const { ref: scrollableContainerRef, maxHeight } = useDynamicMaxHeight(segments);
 
+  useEffect(() => {
+    const activeSegmentIndex = activeSegmentRef.current.index;
+    if (!activeSegmentIndex || activeSegmentIndex !== activeSegment?.segmentIndex) {
+      return;
+    }
+
+    const activeSegmentElement = activeSegmentRef.current.element;
+
+    if (!activeSegmentElement) {
+      return;
+    }
+
+    // Check if the active segment is already visible.
+    const activeSegmentElementBounds = activeSegmentElement.getBoundingClientRect();
+    const scrollableContainerRect = scrollableContainerRef.current.getBoundingClientRect();
+    if (
+      activeSegmentElementBounds.top > scrollableContainerRect.top &&
+      activeSegmentElementBounds.bottom < scrollableContainerRect.bottom
+    ) {
+      // The active segment is already visible, so we don't need to scroll.
+      return;
+    }
+
+    activeSegmentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }, [activeSegment?.segmentIndex, scrollableContainerRef]);
+
   if (!representation || !segmentation) {
     return null;
   }
 
   return (
+    <div ref={scrollableContainerRef}>
       <ScrollArea
         className={`bg-bkg-low space-y-px`}
-      showArrows={true}
+        showArrows={
-    >
+          scrollableContainerRef?.current
-      <div
+            ? scrollableContainerRef?.current?.offsetHeight >= parseFloat(maxHeight)
-        ref={scrollableContainerRef}
+            : false
-        style={{ maxHeight: maxHeight }}
+        }
       >
+        <div style={{ maxHeight: maxHeight }}>
           {segments.map(segment => {
             if (!segment) {
               return null;
@@ -74,8 +117,22 @@ export const SegmentationSegments = ({ children = null }: { children?: React.Rea
             const cssColor = `rgb(${color[0]},${color[1]},${color[2]})`;
 
             const hasStats = segmentFromSegmentation.cachedStats?.namedStats;
+
+            const segmentRowRef = (element: HTMLElement) => {
+              if (!active) {
+                return;
+              }
+
+              if (element) {
+                activeSegmentRef.current = { element, index: segmentIndex };
+              } else {
+                activeSegmentRef.current = { element: null, index: null };
+              }
+            };
+
             const DataRowComponent = (
               <DataRow
+                ref={segmentRowRef}
                 key={segmentIndex}
                 number={showSegmentIndex ? segmentIndex : null}
                 title={label}
@@ -95,7 +152,9 @@ export const SegmentationSegments = ({ children = null }: { children?: React.Rea
                     representation.type
                   )
                 }
-              onToggleLocked={() => onToggleSegmentLock(segmentation.segmentationId, segmentIndex)}
+                onToggleLocked={() =>
+                  onToggleSegmentLock(segmentation.segmentationId, segmentIndex)
+                }
                 onSelect={() => onSegmentClick(segmentation.segmentationId, segmentIndex)}
                 onRename={() => onSegmentEdit(segmentation.segmentationId, segmentIndex)}
                 onDelete={() => onSegmentDelete(segmentation.segmentationId, segmentIndex)}
@@ -140,6 +199,7 @@ export const SegmentationSegments = ({ children = null }: { children?: React.Rea
           })}
         </div>
       </ScrollArea>
+    </div>
   );
 };
 

platform/ui-next/src/hooks/useDynamicMaxHeight.ts

@@ -1,5 +1,29 @@
 import { useRef, useState, useEffect, RefObject } from 'react';
 
+const _getMovementIntersectionObserver = ({
+  callback,
+  rootMargin,
+  threshold,
+}: {
+  callback: () => void;
+  rootMargin: string;
+  threshold: number[];
+}): IntersectionObserver => {
+  return new IntersectionObserver(
+    entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          callback();
+        }
+      });
+    },
+    {
+      threshold,
+      rootMargin,
+    }
+  );
+};
+
 /**
  * Calculates the maximum height for an element based on its position
  * relative to the bottom of the viewport.
@@ -31,20 +55,49 @@ export function useDynamicMaxHeight(
       }
     };
 
-    // Calculate initially
+    // Two intersection observers to trigger a recalculation when the target element
-    // Use requestAnimationFrame to ensure layout is stable after initial render
+    // moves up or down. One for moving up and one for moving down.
-    const rafId = requestAnimationFrame(calculateMaxHeight);
+    // Note that with this approach we don't need to use a resize observer nor
+    // a window resize listener.
 
-    // Recalculate on window resize
+    // The trick is to use a margin for the IntersectionObserver to detect movement.
-    window.addEventListener('resize', calculateMaxHeight);
+    // See more below.
+    const rootMarginHeight = maxHeight === '100vh' ? `${window.innerHeight}px` : `${maxHeight}`;
+
+    // Note that we use a fine grained threshold because we don't know how
+    // much it will move and we want any movement to trigger the intersection observer.
+    const threshold = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
+
+    // The trick here is to use the calculated maxHeight as the root margin height
+    // so that any movement of the target element down (i.e. "out of the" viewport)
+    // will trigger the intersection observer.
+    const moveDownIntersectionObserver = _getMovementIntersectionObserver({
+      callback: calculateMaxHeight,
+      rootMargin: `0px 0px ${rootMarginHeight} 0px`,
+      threshold,
+    });
+
+    // The trick here is to use the calculated maxHeight as the negative
+    // root margin height so that any movement of the target element up
+    // (i.e. "into the" viewport) will trigger the intersection observer.
+    const moveUpIntersectionObserver = _getMovementIntersectionObserver({
+      callback: calculateMaxHeight,
+      rootMargin: `0px 0px -${rootMarginHeight} 0px`,
+      threshold,
+    });
+
+    if (ref.current) {
+      moveUpIntersectionObserver.observe(ref.current);
+      moveDownIntersectionObserver.observe(ref.current);
+    }
 
     // Cleanup listener and requestAnimationFrame on component unmount
     return () => {
-      window.removeEventListener('resize', calculateMaxHeight);
+      moveUpIntersectionObserver.disconnect();
-      cancelAnimationFrame(rafId);
+      moveDownIntersectionObserver.disconnect();
     };
     // Dependencies: buffer, minHeight, and data.
-  }, [data, buffer, minHeight]);
+  }, [data, buffer, minHeight, maxHeight]);
 
   return { ref, maxHeight };
 }