feat: DH-18960: Improve column selection functionality for large tables (#2555)

Author: mattrunyon

package-lock.json

@@ -7,6 +7,10 @@ $animation-offset: 10px;
 .popper-container {
   position: absolute;
   z-index: 5000;
+
+  .spectrum-theme-provider {
+    max-height: inherit;
+  }
 }
 
 .popper.popper-tooltip {
@@ -25,9 +29,11 @@ $animation-offset: 10px;
     opacity $transition;
   pointer-events: none;
   outline: 0;
+  max-height: inherit;
 
   .popper-content {
     position: relative;
+    max-height: inherit;
 
     .tooltip-content {
       text-align: center;

packages/components/src/popper/Popper.scss

@@ -26,16 +26,48 @@ import { SpectrumThemeProvider } from '../theme/SpectrumThemeProvider';
 
 const POPPER_CLASS_NAME = 'popper';
 
+const KEEP_IN_PARENT_OPTIONS: PopperOptions = {
+  placement: 'bottom-end',
+  modifiers: {
+    preventOverflow: {
+      boundariesElement: 'scrollParent',
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      fn: (data, options: any) => {
+        const modified = PopperJs.Defaults.modifiers?.preventOverflow?.fn?.(
+          data,
+          options
+        );
+
+        if (modified == null) {
+          return data;
+        }
+
+        modified.styles.maxHeight = `${
+          document.documentElement.clientHeight -
+          data.offsets.popper.top -
+          2 * options.padding // Double padding because there is top and bottom to account for
+        }px`;
+        return modified ?? data;
+      },
+    },
+    flip: {
+      enabled: false,
+    },
+  },
+};
+
 interface PopperProps {
   children: React.ReactNode;
   options: PopperOptions;
   className: string;
   timeout: number;
   onEntered: () => void;
   onExited: () => void;
+  onBlur: (e: React.FocusEvent) => void;
   isShown: boolean;
   closeOnBlur: boolean;
   interactive: boolean;
+  keepInParent: boolean;
   referenceObject: ReferenceObject | null;
   'data-testid'?: string;
 }
@@ -56,9 +88,13 @@ class Popper extends Component<PopperProps, PopperState> {
     onExited(): void {
       // no-op
     },
+    onBlur(): void {
+      // no-op
+    },
     isShown: false,
     interactive: false,
     closeOnBlur: false,
+    keepInParent: false,
     referenceObject: null,
     'data-testid': undefined,
   };
@@ -87,16 +123,21 @@ class Popper extends Component<PopperProps, PopperState> {
 
   componentDidUpdate(prevProps: PopperProps): void {
     const { isShown } = this.props;
+    const { popper } = this.state;
 
     if (prevProps.isShown !== isShown) {
-      if (isShown) {
-        cancelAnimationFrame(this.rAF);
-        this.rAF = window.requestAnimationFrame(() => {
+      cancelAnimationFrame(this.rAF);
+      this.rAF = window.requestAnimationFrame(() => {
+        if (isShown) {
           this.show();
-        });
-      } else {
-        this.hide();
-      }
+        } else {
+          this.hide();
+        }
+      });
+    }
+
+    if (popper) {
+      popper.scheduleUpdate();
     }
   }
 
@@ -138,12 +179,27 @@ class Popper extends Component<PopperProps, PopperState> {
       return;
     }
 
-    let { options } = this.props;
-    options = {
-      placement: 'auto',
-      modifiers: { preventOverflow: { boundariesElement: 'viewport' } },
-      ...options,
-    };
+    const { options: optionsProp, keepInParent } = this.props;
+    const defaultOptions = keepInParent
+      ? KEEP_IN_PARENT_OPTIONS
+      : ({
+          placement: 'auto',
+          modifiers: { preventOverflow: { boundariesElement: 'viewport' } },
+        } satisfies PopperOptions);
+
+    const options = {
+      ...defaultOptions,
+      ...optionsProp,
+      modifiers: {
+        ...defaultOptions.modifiers,
+        ...optionsProp.modifiers,
+        preventOverflow: {
+          ...defaultOptions.modifiers?.preventOverflow,
+          ...optionsProp.modifiers?.preventOverflow,
+        },
+      },
+    } satisfies PopperOptions;
+
     document.body.appendChild(this.element);
 
     let parent = this.getVisibleElement(this.container.current);
@@ -223,11 +279,15 @@ class Popper extends Component<PopperProps, PopperState> {
   }
 
   handleBlur(e: React.FocusEvent): void {
+    const { closeOnBlur, onBlur } = this.props;
     if (!(e.relatedTarget instanceof HTMLElement)) {
       return;
     }
     if (!this.element.contains(e.relatedTarget)) {
-      this.hide();
+      onBlur?.(e);
+      if (closeOnBlur) {
+        this.hide();
+      }
     }
   }
 
@@ -274,7 +334,7 @@ class Popper extends Component<PopperProps, PopperState> {
               { interactive },
               className
             )}
-            onBlur={closeOnBlur ? this.handleBlur : undefined}
+            onBlur={this.handleBlur}
             tabIndex={closeOnBlur ? -1 : undefined}
             role="presentation"
           >

packages/components/src/popper/Popper.tsx

@@ -149,6 +149,7 @@
 
   /* Popovers */
   --dh-color-popover-bg: var(--dh-color-bg);
+  --dh-color-popover-border: var(--dh-color-gray-400);
 
   /* Tooltips */
   --dh-color-tooltip-bg: var(--dh-color-gray-400);

packages/components/src/theme/theme-dark/theme-dark-components.css

@@ -149,6 +149,7 @@
 
   /* Popovers */
   --dh-color-popover-bg: var(--dh-color-gray-50);
+  --dh-color-popover-border: var(--dh-color-gray-400);
 
   /* Tooltips */
   --dh-color-tooltip-bg: var(--dh-color-gray-50);

packages/components/src/theme/theme-light/theme-light-components.css

@@ -44,7 +44,8 @@
     "@deephaven/storage": "file:../storage",
     "@deephaven/utils": "file:../utils",
     "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hello-pangea/dnd": "^18.0.1",
@@ -60,8 +61,8 @@
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@deephaven/jsapi-shim": "file:../jsapi-shim",

packages/iris-grid/package.json

@@ -2647,12 +2647,12 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       modelIndexes.forEach(modelIndex => {
         const defaultWidth =
           metricCalculator.initialColumnWidths.get(modelIndex);
-        const calculatedWidth = getOrThrow(
-          metrics.calculatedColumnWidths,
-          modelIndex
-        );
+        const calculatedWidth = metrics.calculatedColumnWidths.get(modelIndex);
 
-        if (defaultWidth !== calculatedWidth) {
+        // If we haven't scrolled to the column, the calculated width will be undefined.
+        // This means the function was triggered by the visibility ordering menu,
+        // so just reset the column width to default.
+        if (defaultWidth !== calculatedWidth && calculatedWidth != null) {
           metricCalculator.setColumnWidth(modelIndex, calculatedWidth);
         } else {
           metricCalculator.resetColumnWidth(modelIndex);

packages/iris-grid/src/IrisGrid.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, memo, useCallback } from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsGripper } from '@deephaven/icons';
+import { Tooltip } from '@deephaven/components';
+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;
+  handleProps?: Record<string, unknown>;
+};
+
+const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>(
+  function SearchItem(props, ref) {
+    const { value, item, onClick, onKeyDown, handleProps } = props;
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLElement>) => {
+        onClick(value, event);
+      },
+      [onClick, value]
+    );
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLElement>) => {
+        onKeyDown(value, event);
+      },
+      [onKeyDown, value]
+    );
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div
+        ref={ref}
+        className={classNames('tree-item', {
+          isSelected: item.selected,
+        })}
+        onClick={handleClick}
+        onKeyDownCapture={handleKeyDown}
+        data-index={item.index}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...handleProps}
+      >
+        <span title={value} className={classNames('column-name')}>
+          {value}
+        </span>
+        <div>
+          <Tooltip>Drag to re-order</Tooltip>
+          <FontAwesomeIcon icon={vsGripper} />
+        </div>
+      </div>
+    );
+  }
+);
+
+const MemoizedSearchItem = memo(SearchItem);
+
+export default MemoizedSearchItem;

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

@@ -0,0 +1,47 @@
+@import '../../IrisGrid.scss';
+
+.visibility-search-list {
+  width: 0.75 * $table-sidebar-max-width;
+  border: 1px solid var(--dh-color-popover-border);
+
+  .popper-arrow {
+    display: none;
+  }
+
+  .tree-item {
+    padding: $spacer-1;
+  }
+
+  .no-results {
+    padding: $spacer-1;
+    margin: auto;
+    color: var(--dh-color-text-disabled);
+  }
+}
+
+.visibility-search-list-inner {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+
+  .tree-container {
+    max-height: inherit;
+    padding: $spacer-1;
+    overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .footer-buttons {
+    border-top: 1px solid var(--dh-color-popover-border);
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    & > * {
+      flex-grow: 1;
+    }
+  }
+}