@deephaven/iris-grid 1.9.1-beta.1 → 1.9.1-beta.2

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.js

@@ -4,7 +4,6 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { memo, PureComponent, useCallback, useEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
 import classNames from 'classnames';
 import { GridUtils } from '@deephaven/grid';
 import { TextUtils, assertNotNull, DbNameValidator } from '@deephaven/utils';
@@ -41,6 +40,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
      */
     _defineProperty(this, "lastFocusedItemIndex", null);
     _defineProperty(this, "list", void 0);
+    _defineProperty(this, "virtualizerRef", /*#__PURE__*/React.createRef());
     /**
      * This is set by the search modal handlers since a column could be hidden
      * and not displayed in the list. We need to wait until the update to scroll to it.
@@ -86,7 +86,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       max: 10
     }));
     _defineProperty(this, "memoizedGetTreeItems", memoize((columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns, showHiddenColumns) => getTreeItems(columns, movedColumns, columnHeaderGroups, hiddenColumns, [...selectedColumns.values()], showHiddenColumns), {
-      max: 1000
+      max: 2
+    }));
+    _defineProperty(this, "memoizedGetFlattenedTree", memoize(treeItems => flattenTree(treeItems), {
+      max: 2
     }));
     _defineProperty(this, "makeVisibilityOrderingList", memoize((columns, treeItems, showHiddenColumns, isDraggable) => {
       var {
@@ -101,7 +104,9 @@ class VisibilityOrderingBuilderInner extends PureComponent {
         } = _ref2;
         return Array.isArray(data.visibleIndex) ? data.visibleIndex[0] === firstMovableIndex : data.visibleIndex === firstMovableIndex;
       });
-      var lastMovableTreeIndex = treeItems.findIndex(_ref3 => {
+
+      // Searches from the end so it's faster than findIndex
+      var lastMovableTreeIndex = treeItems.findLastIndex(_ref3 => {
         var {
           data
         } = _ref3;
@@ -138,7 +143,8 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       elements.push(/*#__PURE__*/_jsx(SortableTree, {
         items: movableItems,
         renderItem: this.renderItem,
-        isDraggable: isDraggable
+        isDraggable: isDraggable,
+        virtualizerRef: this.virtualizerRef
       }, "movable-items"));
       if (lastMovableIndex != null && lastMovableIndex < columns.length - 1) {
         elements.push(/*#__PURE__*/_jsx("hr", {}, "bottom-horizontal-divider"));
@@ -164,7 +170,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
         })
       })
     }, columnName), {
-      max: 1000
+      max: 100
     }));
     this.handleItemClick = this.handleItemClick.bind(this);
     this.handleDragEnd = this.handleDragEnd.bind(this);
@@ -185,7 +191,8 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       lastSelectedColumn: '',
       showHiddenColumns: true,
       isSearchModalOpen: false,
-      movedColumns: props.movedColumns
+      movedColumns: props.movedColumns,
+      columnHeaderGroups: props.columnHeaderGroups
     };
     this.list = null;
   }
@@ -206,25 +213,40 @@ class VisibilityOrderingBuilderInner extends PureComponent {
   componentDidUpdate(prevProps) {
     // If we change because of undo/redo or reorders in the grid, update internal state
     var {
-      movedColumns
+      movedColumns,
+      columnHeaderGroups
     } = this.props;
     if (prevProps.movedColumns !== movedColumns) {
       this.setState({
         movedColumns
       });
     }
+    if (prevProps.columnHeaderGroups !== columnHeaderGroups) {
+      this.setState({
+        columnHeaderGroups
+      });
+    }
 
     // Scroll to the item when it's available
     if (this.scrollAndFocusColumnOnUpdate != null) {
-      var _this$list;
-      var itemElement = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelector(".item-wrapper[data-id=\"".concat(this.scrollAndFocusColumnOnUpdate, "\"] .tree-item"));
-      if (itemElement instanceof HTMLElement) {
-        itemElement.scrollIntoView({
-          block: 'nearest'
-        });
-        itemElement.focus();
+      var _this$virtualizerRef$;
+      var [itemIndex, itemName] = this.scrollAndFocusColumnOnUpdate;
+      (_this$virtualizerRef$ = this.virtualizerRef.current) === null || _this$virtualizerRef$ === void 0 || _this$virtualizerRef$.scrollToIndex(itemIndex);
+
+      // Need to wait for the paint after the scroll so the item exists in the DOM
+      window.requestAnimationFrame(() => {
+        var _this$list;
+        if (this.scrollAndFocusColumnOnUpdate == null) {
+          return;
+        }
+        var itemElement = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelector(".item-wrapper[data-id=\"".concat(itemName, "\"] .tree-item"));
+        if (itemElement instanceof HTMLElement) {
+          itemElement.focus();
+        } else {
+          log.warn("Could not focus item ".concat(itemName, " after scroll"));
+        }
         this.scrollAndFocusColumnOnUpdate = null;
-      }
+      });
     }
 
     // document.activeElement is either body or html when nothing is focused.
@@ -234,7 +256,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     // (except in Chrome which is against the spec here).
     if ((document.activeElement === document.body || document.activeElement === document.documentElement) && this.lastFocusedItemIndex !== null) {
       var _this$list2;
-      var itemToFocus = (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelector(".item-wrapper:nth-child(".concat(this.lastFocusedItemIndex + 1, ") .tree-item"));
+      var itemToFocus = (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelector(".item-wrapper[data-index=\"".concat(this.lastFocusedItemIndex, "\"] .tree-item"));
       if (itemToFocus != null && itemToFocus instanceof HTMLElement) {
         itemToFocus.focus();
       } else {
@@ -308,7 +330,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var {
       selectedColumns
     } = this.state;
-    var treeItems = flattenTree(this.getTreeItems());
+    var treeItems = this.getFlattenedTree();
     var firstMovableIndex = this.getFirstMovableIndex();
     var lastMovableIndex = this.getLastMovableIndex();
     assertNotNull(firstMovableIndex);
@@ -430,18 +452,14 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var scrollListAfterMove;
     if (option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP) {
       scrollListAfterMove = () => {
-        var _this$list3;
-        (_this$list3 = this.list) === null || _this$list3 === void 0 || (_this$list3 = _this$list3.parentElement) === null || _this$list3 === void 0 || _this$list3.scroll({
-          top: 0
-        });
+        var _this$virtualizerRef$2;
+        (_this$virtualizerRef$2 = this.virtualizerRef.current) === null || _this$virtualizerRef$2 === void 0 || _this$virtualizerRef$2.scrollToOffset(0);
       };
     }
     if (option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM) {
       scrollListAfterMove = () => {
-        var _this$list4;
-        (_this$list4 = this.list) === null || _this$list4 === void 0 || (_this$list4 = _this$list4.parentElement) === null || _this$list4 === void 0 || _this$list4.scroll({
-          top: this.list.parentElement.scrollHeight
-        });
+        var _this$virtualizerRef$3;
+        (_this$virtualizerRef$3 = this.virtualizerRef.current) === null || _this$virtualizerRef$3 === void 0 || _this$virtualizerRef$3.scrollBy(this.virtualizerRef.current.getTotalSize());
       };
     }
     onColumnHeaderGroupChanged(groups);
@@ -553,7 +571,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       this.removeColumnFromSelected(name);
       return [];
     }
-    var movableItems = flattenTree(this.getTreeItems(showHiddenColumns));
+    var movableItems = this.getFlattenedTree(showHiddenColumns);
     if (isSelected && !isShiftKeyDown && lastSelectedColumn === name) {
       var selectedItem = movableItems.find(_ref4 => {
         var {
@@ -580,8 +598,8 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     });
     return columnsToBeAdded;
   }
-  handleSearchItemClicked(name, event) {
-    var columnsToAdd = this.handleItemClick(name, event, true);
+  handleSearchItemClicked(item, event) {
+    var columnsToAdd = this.handleItemClick(item.id, event, true);
     var {
       showHiddenColumns
     } = this.state;
@@ -598,10 +616,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     if (event.shiftKey || GridUtils.isModifierKeyDown(event)) {
       return;
     }
-    this.scrollAndFocusColumnOnUpdate = name;
+    this.scrollAndFocusColumnOnUpdate = [item.index, item.id];
   }
-  handleSearchSelect(names) {
-    if (names.length === 0) {
+  handleSearchSelect(items) {
+    if (items.length === 0) {
       return;
     }
     var {
@@ -611,12 +629,11 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       onColumnVisibilityChanged
     } = this.props;
     if (!showHiddenColumns) {
-      var modelIndexesToShow = this.getSelectedItemModelIndexes(new Set(names));
+      var modelIndexesToShow = [...new Set(items.map(item => item.data.modelIndex).flat())];
       onColumnVisibilityChanged(modelIndexesToShow, true);
     }
-    var [firstItem] = names;
-    this.scrollAndFocusColumnOnUpdate = firstItem;
-    this.addColumnToSelected(names, false);
+    this.scrollAndFocusColumnOnUpdate = [items[0].index, items[0].id];
+    this.addColumnToSelected(items.map(item => item.id), false);
   }
 
   /**
@@ -631,7 +648,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       selectedColumns
     } = this.state;
     var newSelectedColumns = new Set(addToExisting ? [...selectedColumns.values()].concat(columnsToBeAdded) : columnsToBeAdded);
-    var flattenedItems = flattenTree(this.getTreeItems());
+    var flattenedItems = this.getFlattenedTree();
 
     // Add all children of selected groups to the selected columns
     // The treeItems array will always be parent -> child in the order
@@ -665,7 +682,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var {
       selectedColumns
     } = this.state;
-    var flattenedItems = flattenTree(this.getTreeItems());
+    var flattenedItems = this.getFlattenedTree();
     var item = flattenedItems.find(_ref6 => {
       var {
         id
@@ -711,34 +728,33 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     }
     var dragEvent = event.activatorEvent;
     var isAddingToSelection = GridUtils.isModifierKeyDown(dragEvent) || dragEvent.shiftKey;
-    // For some reason, flushSync is needed here to prevent issues when
-    // dragging multiple items, dropping, then immediately dragging a single item
-    // over the previously dragged group. Without flushSync, the item being dragged
-    // can cause items in the previously dragged group to be in completely wrong places.
-    flushSync(() => {
-      this.handleItemClick(id, event.activatorEvent, true);
-      // Always add the dragged item back to selected in case the user ctrl+dragged on an already
-      // selected item. The handleItemClick would deselect it, but we want to keep it selected.
-      this.addColumnToSelected([id], isAddingToSelection);
-    });
+    this.handleItemClick(id, event.activatorEvent, true);
+    // Always add the dragged item back to selected in case the user ctrl+dragged on an already
+    // selected item. The handleItemClick would deselect it, but we want to keep it selected.
+    this.addColumnToSelected([id], isAddingToSelection);
   }
   handleDragEnd(from, to) {
     var {
+      model,
       movedColumns,
       onMovedColumnsChanged,
       columnHeaderGroups,
       onColumnHeaderGroupChanged
     } = this.props;
     var selectedParentItems = this.getSelectedParentItems();
-    var flattenedItems = flattenTree(this.getTreeItems());
     var firstMovableIndex = this.getFirstMovableIndex();
     var lastMovableIndex = this.getLastMovableIndex();
     assertNotNull(firstMovableIndex);
     assertNotNull(lastMovableIndex);
     var {
-      groups: newGroups,
+      groups: groupsAfterDrop,
       movedColumns: newMoves
-    } = moveItemsFromDrop(from, to, movedColumns, columnHeaderGroups, flattenedItems, selectedParentItems, firstMovableIndex, lastMovableIndex);
+    } = moveItemsFromDrop(from, to, movedColumns, columnHeaderGroups, selectedParentItems, firstMovableIndex, lastMovableIndex);
+
+    // Need to parse so the internal state is correct to prevent weird drop animations
+    // when adding/removing from groups. But don't parse if nothing changed to prevent
+    // unnecessary undo/redo states.
+    var newGroups = groupsAfterDrop !== columnHeaderGroups ? IrisGridUtils.parseColumnHeaderGroups(model, groupsAfterDrop).groups : columnHeaderGroups;
     onColumnHeaderGroupChanged(newGroups);
     onMovedColumnsChanged(newMoves);
     // Without tracking the state here, React 18 is rendering the child separately from
@@ -746,12 +762,14 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     // original location because of that render with stale items. I could not find any
     // other way to fix this (removing memoization, removing keys, etc.)
     this.setState({
-      movedColumns: newMoves
+      movedColumns: newMoves,
+      columnHeaderGroups: newGroups
     });
     // Focus the dragged item after the move. Should not scroll since it's already in view
-    this.scrollAndFocusColumnOnUpdate = from.id;
+    this.scrollAndFocusColumnOnUpdate = [to.index, from.id];
   }
   handleGroupNameChange(group, newName) {
+    var _this$list3;
     var {
       columnHeaderGroups,
       onColumnHeaderGroupChanged,
@@ -783,10 +801,13 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       newParent.addChildren([newName]);
       newGroups.splice(parentIndex, 1, newParent);
     }
-
-    // The group will be a new item, so focus it after the update
-    // otherwise we may lose focus entirely
-    this.scrollAndFocusColumnOnUpdate = newName;
+    var oldElement = (_this$list3 = this.list) === null || _this$list3 === void 0 ? void 0 : _this$list3.querySelector(".item-wrapper[data-id=\"".concat(oldName, "\"]"));
+    if (oldElement != null) {
+      // The group will be a new item, so focus it after the update
+      // otherwise we may lose focus entirely
+      var indexAttr = oldElement.getAttribute('data-index');
+      this.scrollAndFocusColumnOnUpdate = indexAttr != null ? [parseInt(indexAttr, 10), newName] : null;
+    }
     onColumnHeaderGroupChanged(newGroups);
     endUndoGroup();
   }
@@ -839,8 +860,8 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     });
     startUndoGroup();
     onMovedColumnsChanged(movedColumns.concat(newMoves), () => {
-      var _this$list5;
-      (_this$list5 = this.list) === null || _this$list5 === void 0 || (_this$list5 = _this$list5.parentElement) === null || _this$list5 === void 0 || _this$list5.scroll({
+      var _this$virtualizerRef$4;
+      (_this$virtualizerRef$4 = this.virtualizerRef.current) === null || _this$virtualizerRef$4 === void 0 || (_this$virtualizerRef$4 = _this$virtualizerRef$4.scrollElement) === null || _this$virtualizerRef$4 === void 0 || _this$virtualizerRef$4.scrollTo({
         top: 0
       });
     });
@@ -943,24 +964,32 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     return this.getMemoizedLastMovableIndex(model, model.columns, movedColumns);
   }
   /**
-   * Gets the tree of movable items in order. Memoized for efficiency
-   * Use flattenItems(this.getTreeItems()) if a flat list is needed
+   * Gets the tree items in order. Memoized for efficiency
+   * Use this.getFlattenedTree() if a flat list is needed
    * @param showHiddenColumns Whether to show hidden columns in the tree. Defaults to the current state value.
-   * @returns The movable tree items in order
+   * @returns The tree items in order
    */
   getTreeItems(showHiddenColumns) {
     var {
       model,
-      hiddenColumns,
-      columnHeaderGroups
+      hiddenColumns
     } = this.props;
     var {
       movedColumns,
+      columnHeaderGroups,
       selectedColumns,
       showHiddenColumns: showHiddenColumnsState
     } = this.state;
     return this.memoizedGetTreeItems(model.columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns, showHiddenColumns !== null && showHiddenColumns !== void 0 ? showHiddenColumns : showHiddenColumnsState);
   }
+  /**
+   * Gets the flattened tree items in order. Memoized for efficiency
+   * @param showHiddenColumns Whether to show hidden columns in the tree. Defaults to the current state value.
+   * @returns The flattened tree items in order
+   */
+  getFlattenedTree(showHiddenColumns) {
+    return this.memoizedGetFlattenedTree(this.getTreeItems(showHiddenColumns));
+  }
   getSelectedItemModelIndexes(columnNames) {
     var {
       model
@@ -978,7 +1007,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var {
       selectedColumns
     } = this.state;
-    var treeItems = flattenTree(this.getTreeItems());
+    var treeItems = this.getFlattenedTree();
     return treeItems.filter(_ref14 => {
       var {
         id,
@@ -1060,14 +1089,13 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       isSearchModalOpen
     } = this.state;
     var hasSelection = selectedColumns.size > 0;
-    var treeItems = this.getTreeItems();
-    var flattenedItems = flattenTree(treeItems);
+    var flattenedItems = this.getFlattenedTree();
     var hiddenColumnsSet = new Set(hiddenColumns);
-    var columnsToToggle = hasSelection ? this.getSelectedItemModelIndexes(selectedColumns) : treeItems.map(item => item.data.modelIndex).flat();
-    var areSomeVisible = columnsToToggle.some(column => !hiddenColumnsSet.has(column));
+    var columnsToToggle = hasSelection ? this.getSelectedItemModelIndexes(selectedColumns) : model.columns.map((_, i) => i);
+    var areSomeVisible = hasSelection ? columnsToToggle.some(column => !hiddenColumnsSet.has(column)) : hiddenColumnsSet.size < model.columns.length;
     var allToggleText = areSomeVisible ? 'Hide All' : 'Show All';
     var selectedToggleText = areSomeVisible ? 'Hide Selected' : 'Show Selected';
-    var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, treeItems, showHiddenColumns, !isSearchModalOpen);
+    var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, flattenedItems, showHiddenColumns, !isSearchModalOpen);
     return /*#__PURE__*/_jsx(SortableTreeDndContext, {
       items: flattenedItems,
       onDragStart: this.handleDragStart,
@@ -1235,14 +1263,11 @@ class VisibilityOrderingBuilderInner extends PureComponent {
           })]
         }), /*#__PURE__*/_jsx("div", {
           role: "menu",
+          ref: list => {
+            this.list = list;
+          },
           className: classNames('visibility-ordering-list'),
-          children: /*#__PURE__*/_jsx("div", {
-            className: "column-list",
-            ref: list => {
-              this.list = list;
-            },
-            children: visibilityOrderingList
-          })
+          children: visibilityOrderingList
         })]
       })
     });