feat: Virtualize column organization lists (#2568)

Fixes #1650

Further improvement for DH-18960 that wasn't part of the ticket, but
will be appreciated. The original ticket was big enough I didn't want to
add another feature to that PR.

Fixes the issue when dragging lots of columns the drag overlay grew. It
is now properly truncating. Also removed the drag handle icon from the
drag overlay just to give a bit more room when dragging groups (and I
think the handle doesn't make that much sense to show when you're
already dragging)

Also fixed the drop animation when dragging from/to a group. Same issue
as the general `movedColumns` fixed in the first PR.

Author: mattrunyon

package-lock.json

@@ -49,6 +49,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hello-pangea/dnd": "^18.0.1",
+    "@tanstack/react-virtual": "^3.13.12",
     "classnames": "^2.3.1",
     "fast-deep-equal": "^3.1.3",
     "lodash.clamp": "^4.0.3",

packages/iris-grid/package.json

@@ -8,8 +8,14 @@ import { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';
 type SearchItemProps = {
   value: string;
   item: FlattenedIrisGridTreeItem;
-  onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;
-  onKeyDown: (name: string, event: React.KeyboardEvent<HTMLElement>) => void;
+  onClick: (
+    item: FlattenedIrisGridTreeItem,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  onKeyDown: (
+    item: FlattenedIrisGridTreeItem,
+    event: React.KeyboardEvent<HTMLElement>
+  ) => void;
   handleProps?: Record<string, unknown>;
 };
 
@@ -19,16 +25,16 @@ const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>(
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLElement>) => {
-        onClick(value, event);
+        onClick(item, event);
       },
-      [onClick, value]
+      [onClick, item]
     );
 
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLElement>) => {
-        onKeyDown(value, event);
+        onKeyDown(item, event);
       },
-      [onKeyDown, value]
+      [onKeyDown, item]
     );
 
     return (

packages/iris-grid/src/sidebar/visibility-ordering-builder/SearchItem.tsx

@@ -24,8 +24,13 @@
   flex-direction: column;
   max-height: inherit;
 
-  .tree-container {
-    max-height: inherit;
+  .search-tree-container {
+    /**
+     * Prevents the virtualized list from rendering all items
+     * and then popper limiting the height to a reasonable amount
+     * since popper needs to know the internal height to limit the container after
+     */
+    max-height: 100vh;
     padding: $spacer-1;
     overflow: auto;
     flex-grow: 1;

packages/iris-grid/src/sidebar/visibility-ordering-builder/SearchWithModal.scss

@@ -14,11 +14,14 @@ import './SearchWithModal.scss';
 import MemoizedSearchItem from './SearchItem';
 
 interface SearchWithModalProps {
-  items: FlattenedIrisGridTreeItem[];
+  items: readonly FlattenedIrisGridTreeItem[];
   onModalOpenChange: (isOpen: boolean) => void;
-  onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;
+  onClick: (
+    item: FlattenedIrisGridTreeItem,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
   onDragStart?: (event: DragStartEvent) => void;
-  setSelection: (columnNames: string[]) => void;
+  setSelection: (items: readonly FlattenedIrisGridTreeItem[]) => void;
 }
 
 export function SearchWithModal({
@@ -94,8 +97,8 @@ export function SearchWithModal({
   });
 
   const handleClick = useCallback(
-    (name: string, event: React.MouseEvent<HTMLElement>) => {
-      onClick(name, event);
+    (item: FlattenedIrisGridTreeItem, event: React.MouseEvent<HTMLElement>) => {
+      onClick(item, event);
       if (!event.shiftKey && !GridUtils.isModifierKeyDown(event)) {
         handleModalClose();
       }
@@ -104,13 +107,16 @@ export function SearchWithModal({
   );
 
   const handleItemKeyDown = useCallback(
-    (name: string, event: React.KeyboardEvent<HTMLElement>) => {
+    (
+      item: FlattenedIrisGridTreeItem,
+      event: React.KeyboardEvent<HTMLElement>
+    ) => {
       const { key } = event;
       if (key === 'Enter') {
         // Select item and close modal
         event.preventDefault();
         event.stopPropagation();
-        setSelection([name]);
+        setSelection([item]);
         handleModalClose();
       } else if (key === 'ArrowDown') {
         // Move focus to the next item
@@ -191,7 +197,7 @@ export function SearchWithModal({
         e.preventDefault();
         // Select the first item in the list
         const firstItem = filteredItems[0];
-        setSelection([firstItem.id]);
+        setSelection([firstItem]);
         handleModalClose();
       }
 
@@ -208,8 +214,7 @@ export function SearchWithModal({
   );
 
   const handleSelectMatching = useCallback(() => {
-    const matchingNames = filteredItems.map(item => item.id);
-    setSelection(matchingNames);
+    setSelection(filteredItems);
     handleModalClose();
   }, [filteredItems, setSelection, handleModalClose]);
 
@@ -266,11 +271,13 @@ export function SearchWithModal({
             <div className="no-results">No matching columns</div>
           ) : (
             <>
-              <SortableTree
-                items={filteredItems}
-                withDepthMarkers={false}
-                renderItem={renderItem}
-              />
+              <div className="search-tree-container">
+                <SortableTree
+                  items={filteredItems}
+                  withDepthMarkers={false}
+                  renderItem={renderItem}
+                />
+              </div>
               {showFooterButtons && (
                 <div className="footer-buttons">
                   {hasMultipleSelection && (

packages/iris-grid/src/sidebar/visibility-ordering-builder/SearchWithModal.tsx

@@ -30,6 +30,7 @@
   .visibility-ordering-list {
     overflow-y: auto;
     flex-grow: 1;
+    padding: $spacer-1;
 
     .btn {
       height: 28px;
@@ -72,8 +73,4 @@
     margin-left: $spacer-1;
     height: 1rem;
   }
-
-  .tree-container {
-    padding: $spacer-1;
-  }
 }

packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.scss

@@ -55,8 +55,31 @@ const NESTED_COLUMN_HEADER_GROUPS = [
 ] satisfies (Omit<DhType.ColumnGroup, 'color'> & { color?: string | null })[];
 
 window.HTMLElement.prototype.scroll = jest.fn();
+window.HTMLElement.prototype.scrollTo = jest.fn();
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+jest.mock<typeof import('@tanstack/react-virtual')>(
+  '@tanstack/react-virtual',
+  () => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    const actual = jest.requireActual<typeof import('@tanstack/react-virtual')>(
+      '@tanstack/react-virtual'
+    );
+    return {
+      ...actual,
+      useVirtualizer(options) {
+        return actual.useVirtualizer({
+          ...options,
+          observeElementRect: (instance, callback) => {
+            if (instance.scrollElement) callback({ width: 300, height: 1000 });
+          },
+        });
+      },
+    };
+  }
+);
+
 function Builder({
   model = makeModel(),
   hiddenColumns = [],
@@ -1743,15 +1766,16 @@ describe('Search', () => {
       ).toBe(2 * COLUMNS.length)
     );
 
-    // Globally mocked scrollIntoView for this test file
-    jest.mocked(window.HTMLElement.prototype.scrollIntoView).mockClear();
+    // Virtualizer calls scrollTo on the container element
+    const mockScrollTo = jest.fn();
+    HTMLElement.prototype.scrollTo = mockScrollTo;
 
     // Click the search item
-    await user.click(screen.getAllByText(COLUMNS.at(-1)!.name)[1]);
+    await user.click(screen.getAllByText(COLUMNS[COLUMNS.length - 1].name)[1]);
 
     await waitFor(() => {
-      const item = screen.getByText(COLUMNS.at(-1)!.name);
-      expect(item.scrollIntoView).toHaveBeenCalledTimes(1);
+      const item = screen.getByText(COLUMNS[COLUMNS.length - 1].name);
+      expect(mockScrollTo).toHaveBeenCalledTimes(1);
       expect(item.closest('.tree-item')).toHaveFocus();
     });
   });