@deephaven/iris-grid 0.43.0 → 0.44.1-beta.0

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

@@ -0,0 +1,964 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { GridUtils } from '@deephaven/grid';
+import { TextUtils, assertNotNull, DbNameValidator } from '@deephaven/utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { dhEye, dhEyeSlash, dhSortAlphaDown, dhSortAlphaUp, dhArrowToTop, dhArrowToBottom, vsChevronUp, vsChevronDown, vsSymbolStructure, vsRefresh, vsCircleLargeFilled, vsAdd } from '@deephaven/icons';
+import memoize from 'memoizee';
+import debounce from 'lodash.debounce';
+import { Button, SearchInput } from '@deephaven/components';
+import clamp from 'lodash.clamp';
+import throttle from 'lodash.throttle';
+import "./VisibilityOrderingBuilder.css";
+import ColumnHeaderGroup from "../../ColumnHeaderGroup.js";
+import VisibilityOrderingItem from "./VisibilityOrderingItem.js";
+import { flattenTree, getTreeItems } from "./sortable-tree/utilities.js";
+import SortableTree from "./sortable-tree/SortableTree.js";
+import { moveItemsFromDrop, moveToGroup } from "./VisibilityOrderingBuilderUtils.js";
+var DEBOUNCE_SEARCH_COLUMN = 150;
+class VisibilityOrderingBuilder extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "list", void 0);
+    _defineProperty(this, "debouncedSearchColumns", debounce(this.searchColumns, DEBOUNCE_SEARCH_COLUMN));
+    _defineProperty(this, "handleGroupColorChange", throttle((group, color) => {
+      var {
+        columnHeaderGroups,
+        onColumnHeaderGroupChanged
+      } = this.props;
+      var newGroups = [...columnHeaderGroups];
+      var newGroup = new ColumnHeaderGroup(_objectSpread(_objectSpread({}, group), {}, {
+        color
+      }));
+      newGroups.splice(newGroups.findIndex(_ref => {
+        var {
+          name
+        } = _ref;
+        return name === group.name;
+      }), 1, newGroup);
+      onColumnHeaderGroupChanged(newGroups);
+    }, 250));
+    _defineProperty(this, "renderItem", memoize(_ref2 => {
+      var {
+        value,
+        clone,
+        item,
+        ref,
+        handleProps
+      } = _ref2;
+      var {
+        onColumnVisibilityChanged
+      } = this.props;
+      var {
+        selectedColumns
+      } = this.state;
+      var displayString = value;
+
+      // The cloned drag overlay we want to show the items being dragged
+      if (clone) {
+        var selectedItemNames = this.getSelectedParentItems().map(_ref3 => {
+          var {
+            id
+          } = _ref3;
+          return id;
+        });
+        displayString = selectedItemNames.join(', ');
+      }
+      return /*#__PURE__*/React.createElement(VisibilityOrderingItem, {
+        ref: ref,
+        value: displayString,
+        clone: clone,
+        item: item,
+        childCount: selectedColumns.size,
+        onVisibilityChange: onColumnVisibilityChanged,
+        onClick: this.handleItemClick,
+        onGroupDelete: this.handleGroupDelete,
+        onGroupColorChange: this.handleGroupColorChange,
+        onGroupNameChange: this.handleGroupNameChange,
+        validateGroupName: this.validateGroupName,
+        handleProps: handleProps
+      });
+    }));
+    _defineProperty(this, "getMemoizedFirstMovableIndex", memoize((model, columns, movedColumns) => {
+      for (var i = 0; i < columns.length; i += 1) {
+        var modelIndex = GridUtils.getModelIndex(i, movedColumns);
+        if (model.isColumnMovable(modelIndex)) {
+          return i;
+        }
+      }
+      return null;
+    }));
+    _defineProperty(this, "getMemoizedLastMovableIndex", memoize((model, columns, movedColumns) => {
+      for (var i = columns.length - 1; i >= 0; i -= 1) {
+        var modelIndex = GridUtils.getModelIndex(i, movedColumns);
+        if (model.isColumnMovable(modelIndex)) {
+          return i;
+        }
+      }
+      return null;
+    }));
+    _defineProperty(this, "memoizedGetTreeItems", memoize((columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns) => getTreeItems(columns, movedColumns, columnHeaderGroups, hiddenColumns, [...selectedColumns.values()])));
+    _defineProperty(this, "makeVisibilityOrderingList", memoize((columns, treeItems) => {
+      var {
+        movedColumns
+      } = this.props;
+      var elements = [];
+      var firstMovableIndex = this.getFirstMovableIndex();
+      var lastMovableIndex = this.getLastMovableIndex();
+      var firstMovableTreeIndex = treeItems.findIndex(_ref4 => {
+        var {
+          data
+        } = _ref4;
+        return Array.isArray(data.visibleIndex) ? data.visibleIndex[0] === firstMovableIndex : data.visibleIndex === firstMovableIndex;
+      });
+      var lastMovableTreeIndex = treeItems.findIndex(_ref5 => {
+        var {
+          data
+        } = _ref5;
+        return Array.isArray(data.visibleIndex) ? data.visibleIndex[1] === lastMovableIndex : data.visibleIndex === lastMovableIndex;
+      });
+      var movableItems = treeItems.slice(firstMovableTreeIndex, lastMovableTreeIndex + 1);
+
+      // No movable items. Render all as immovable
+      if (firstMovableIndex == null || lastMovableIndex === null) {
+        for (var visibleIndex = 0; visibleIndex < columns.length; visibleIndex += 1) {
+          var modelIndex = GridUtils.getModelIndex(visibleIndex, movedColumns);
+          var column = columns[modelIndex];
+          elements.push(this.renderImmovableItem(column.name));
+        }
+        return elements;
+      }
+
+      // Currently immovable groups are not supported
+      for (var _visibleIndex = 0; _visibleIndex < firstMovableIndex; _visibleIndex += 1) {
+        var _modelIndex = GridUtils.getModelIndex(_visibleIndex, movedColumns);
+        var _column = columns[_modelIndex];
+        elements.push(this.renderImmovableItem(_column.name));
+      }
+      if (firstMovableIndex !== null && firstMovableIndex > 0) {
+        elements.push( /*#__PURE__*/React.createElement("hr", {
+          key: "top-horizontal-divider"
+        }));
+      }
+      elements.push( /*#__PURE__*/React.createElement(SortableTree, {
+        key: "movable-items",
+        items: movableItems,
+        renderItem: this.renderItem,
+        onDragStart: this.handleDragStart,
+        onDragEnd: this.handleDragEnd
+      }));
+      if (lastMovableIndex != null && lastMovableIndex < columns.length - 1) {
+        elements.push( /*#__PURE__*/React.createElement("hr", {
+          key: "bottom-horizontal-divider"
+        }));
+      }
+      for (var _visibleIndex2 = lastMovableIndex + 1; _visibleIndex2 < columns.length; _visibleIndex2 += 1) {
+        var _modelIndex2 = GridUtils.getModelIndex(_visibleIndex2, movedColumns);
+        var _column2 = columns[_modelIndex2];
+        elements.push(this.renderImmovableItem(_column2.name));
+      }
+      return elements;
+    }));
+    _defineProperty(this, "renderImmovableItem", memoize(columnName => /*#__PURE__*/React.createElement("div", {
+      className: "visibility-ordering-list-item immovable",
+      key: columnName
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "column-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "column-name"
+    }, columnName)))));
+    this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
+    this.searchColumns = this.searchColumns.bind(this);
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+    this.handleGroupDelete = this.handleGroupDelete.bind(this);
+    this.handleGroupNameChange = this.handleGroupNameChange.bind(this);
+    this.handleGroupCreate = this.handleGroupCreate.bind(this);
+    this.validateGroupName = this.validateGroupName.bind(this);
+    this.addColumnToSelected = this.addColumnToSelected.bind(this);
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.state = {
+      selectedColumns: new Set(),
+      lastSelectedColumn: '',
+      searchFilter: ''
+    };
+    this.list = null;
+  }
+  componentWillUnmount() {
+    this.debouncedSearchColumns.cancel();
+  }
+  resetVisibilityOrdering() {
+    var {
+      model,
+      onReset,
+      onMovedColumnsChanged,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    this.setState({
+      selectedColumns: new Set(),
+      lastSelectedColumn: '',
+      searchFilter: ''
+    });
+    onReset();
+    onColumnHeaderGroupChanged(model.initialColumnHeaderGroups);
+    onMovedColumnsChanged(model.initialMovedColumns);
+  }
+  resetSelection() {
+    this.setState({
+      selectedColumns: new Set(),
+      lastSelectedColumn: ''
+    });
+  }
+  handleSearchInputChange(event) {
+    var searchFilter = event.target.value;
+    this.setState({
+      searchFilter
+    });
+    if (!searchFilter) {
+      this.debouncedSearchColumns.cancel();
+      this.resetSelection();
+      return;
+    }
+    this.debouncedSearchColumns(searchFilter);
+  }
+  searchColumns(searchFilter) {
+    var flattenedItems = flattenTree(this.getTreeItems());
+    var itemsMatch = flattenedItems.filter(_ref6 => {
+      var _data$group$isNew, _data$group;
+      var {
+        id,
+        data
+      } = _ref6;
+      return !((_data$group$isNew = (_data$group = data.group) === null || _data$group === void 0 ? void 0 : _data$group.isNew) !== null && _data$group$isNew !== void 0 ? _data$group$isNew : false) && id.toLowerCase().includes(searchFilter.toLowerCase());
+    });
+    var columnsMatch = itemsMatch.map(_ref7 => {
+      var {
+        id
+      } = _ref7;
+      return id;
+    });
+    var visibleIndexToFocus = flattenedItems.findIndex(_ref8 => {
+      var {
+        id
+      } = _ref8;
+      return id.toLowerCase().includes(searchFilter.toLowerCase());
+    });
+    this.addColumnToSelected(columnsMatch, false);
+    if (columnsMatch.length > 0) {
+      var _this$list;
+      var columnItemToFocus = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelectorAll('.item-wrapper')[visibleIndexToFocus];
+      columnItemToFocus === null || columnItemToFocus === void 0 ? void 0 : columnItemToFocus.scrollIntoView({
+        block: 'center'
+      });
+    }
+  }
+
+  /**
+   * Moves the currently selected columns in the direction specified.
+   * Does not commit any changes to any state, just gets the required modifications.
+   *
+   * Items that are part of a selected group should not be moved separate from the group.
+   *
+   * Items moved to top or bottom should be removed from any groups they are within,
+   * unless part of a group that is also selected. The highest level selected group will
+   * be moved to the root level of the tree.
+   *
+   * Items moved up or down should move into and out of groups when applicable.
+   * They should never move more than 1 depth level at a time.
+   *
+   * Multiple selected items should move to the top or bottom in their existing order,
+   * but become one block of continuous columns.
+   *
+   * Multiple selected items moving up or down should move independently,
+   * unless they are at the same depth and contiguous. In that case, they should
+   * move in and out of groups together. I.e. if the 2 items above a group are selected,
+   * and the move down button is pressed, then both items should be moved into the group.
+   *
+   * @param option The movement option
+   * @returns A new copy of the movedColumns including moves required to perform the operation.
+   *
+   */
+  moveSelectedColumns(option) {
+    var {
+      columnHeaderGroups
+    } = this.props;
+    var {
+      selectedColumns
+    } = this.state;
+    var treeItems = flattenTree(this.getTreeItems());
+    var firstMovableIndex = this.getFirstMovableIndex();
+    var lastMovableIndex = this.getLastMovableIndex();
+    assertNotNull(firstMovableIndex);
+    assertNotNull(lastMovableIndex);
+    var selectedItems = this.getSelectedParentItems();
+    var isMovingUpward = option === VisibilityOrderingBuilder.MOVE_OPTIONS.UP || option === VisibilityOrderingBuilder.MOVE_OPTIONS.TOP;
+
+    // for moving up and to the top, move column(s) in visibility index order
+    // for moving down and to the bottom, move column(s) in reverse visibility index order
+    if (!isMovingUpward) {
+      selectedItems.reverse();
+    }
+    var newMoves = [];
+    var updatedGroups = columnHeaderGroups;
+    var _loop = function _loop() {
+      var {
+        id,
+        parentId,
+        depth,
+        data: {
+          visibleIndex
+        }
+      } = selectedItems[i];
+      switch (option) {
+        case VisibilityOrderingBuilder.MOVE_OPTIONS.TOP:
+          {
+            newMoves = GridUtils.moveItemOrRange(visibleIndex, firstMovableIndex, newMoves, true);
+            var size = Array.isArray(visibleIndex) ? visibleIndex[1] - visibleIndex[0] + 1 : 1;
+            firstMovableIndex += size;
+            // Moving items to top should move out of any groups
+            updatedGroups = moveToGroup(selectedItems[i], null, updatedGroups);
+            break;
+          }
+        case VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM:
+          {
+            newMoves = GridUtils.moveItemOrRange(visibleIndex, lastMovableIndex, newMoves, true);
+            var _size = Array.isArray(visibleIndex) ? visibleIndex[1] - visibleIndex[0] + 1 : 1;
+            lastMovableIndex -= _size;
+            // Moving items to bottom should move out of any groups
+            updatedGroups = moveToGroup(selectedItems[i], null, updatedGroups);
+            break;
+          }
+        case VisibilityOrderingBuilder.MOVE_OPTIONS.UP:
+          {
+            var itemIndex = treeItems.findIndex(item => item.id === id);
+            // Array.findLast would be better here, but it's too new for our browser support
+            var prevItemIndex = treeItems.map((item, idx) => idx < itemIndex && !selectedColumns.has(item.id)).lastIndexOf(true);
+            var prevItem = treeItems[prevItemIndex];
+            if (prevItem != null && prevItem.parentId !== parentId) {
+              // Moving into a different parent
+              if (Math.abs(prevItem.depth - depth) > 1) {
+                // Prev item is more than 1 level away
+                // Find prev parent at same depth as current
+                // This way we only ever move 1 depth level per event
+                var newParentItemIndex = treeItems.map((item, idx) => idx < prevItemIndex && item.depth === depth).lastIndexOf(true);
+                var newParentItem = treeItems[newParentItemIndex];
+                updatedGroups = moveToGroup(selectedItems[i], newParentItem.id, updatedGroups);
+              } else {
+                updatedGroups = moveToGroup(selectedItems[i], prevItem.parentId, updatedGroups);
+              }
+            } else {
+              var toIndex = clamp(Array.isArray(visibleIndex) ? visibleIndex[0] - 1 : visibleIndex - 1, firstMovableIndex, lastMovableIndex);
+              newMoves = GridUtils.moveItemOrRange(visibleIndex, toIndex, newMoves, false);
+              var _size2 = Array.isArray(visibleIndex) ? visibleIndex[1] - visibleIndex[0] + 1 : 1;
+              firstMovableIndex += _size2;
+            }
+            break;
+          }
+        case VisibilityOrderingBuilder.MOVE_OPTIONS.DOWN:
+          {
+            var _itemIndex = treeItems.findIndex(item => item.id === id);
+            var nextItem = treeItems.find((item, idx) => idx > _itemIndex && !selectedColumns.has(item.id));
+            if ((nextItem === null || nextItem === void 0 ? void 0 : nextItem.parentId) !== parentId) {
+              var _parentItem$parentId;
+              // Moving out of our group
+              // Move to the parent of our parent
+              // That way we only ever move 1 level at a time
+              var parentItem = treeItems.find(item => item.id === parentId);
+              updatedGroups = moveToGroup(selectedItems[i], (_parentItem$parentId = parentItem === null || parentItem === void 0 ? void 0 : parentItem.parentId) !== null && _parentItem$parentId !== void 0 ? _parentItem$parentId : null, updatedGroups);
+              break;
+            } else if ((nextItem === null || nextItem === void 0 ? void 0 : nextItem.children.length) > 0) {
+              // Moving into a group as 1st item
+              updatedGroups = moveToGroup(selectedItems[i], nextItem.id, updatedGroups);
+              break;
+            }
+            var _toIndex = clamp(Array.isArray(visibleIndex) ? visibleIndex[0] + 1 : visibleIndex + 1, firstMovableIndex, lastMovableIndex);
+            newMoves = GridUtils.moveItemOrRange(visibleIndex, _toIndex, newMoves, false);
+            var _size3 = Array.isArray(visibleIndex) ? visibleIndex[1] - visibleIndex[0] + 1 : 1;
+            lastMovableIndex -= _size3;
+            break;
+          }
+      }
+    };
+    for (var i = 0; i < selectedItems.length; i += 1) {
+      _loop();
+    }
+    return {
+      newMoves,
+      groups: updatedGroups
+    };
+  }
+
+  /**
+   * Moves the selected columns according to the option.
+   * Commits changes to state and scrolls the list if moving to top or bottom.
+   *
+   * @param option The move operation
+   */
+  handleMoveColumns(option) {
+    var {
+      onMovedColumnsChanged,
+      movedColumns,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    var {
+      newMoves,
+      groups
+    } = this.moveSelectedColumns(option);
+    var scrollListAfterMove;
+    if (option === VisibilityOrderingBuilder.MOVE_OPTIONS.TOP) {
+      scrollListAfterMove = () => {
+        var _this$list2, _this$list2$parentEle;
+        (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : (_this$list2$parentEle = _this$list2.parentElement) === null || _this$list2$parentEle === void 0 ? void 0 : _this$list2$parentEle.scroll({
+          top: 0
+        });
+      };
+    }
+    if (option === VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM) {
+      scrollListAfterMove = () => {
+        var _this$list3, _this$list3$parentEle;
+        (_this$list3 = this.list) === null || _this$list3 === void 0 ? void 0 : (_this$list3$parentEle = _this$list3.parentElement) === null || _this$list3$parentEle === void 0 ? void 0 : _this$list3$parentEle.scroll({
+          top: this.list.parentElement.scrollHeight
+        });
+      };
+    }
+    onColumnHeaderGroupChanged(groups);
+    if (newMoves.length > 0) {
+      onMovedColumnsChanged(movedColumns.concat(newMoves), scrollListAfterMove);
+    }
+  }
+
+  /**
+   * Get the move operations required to recursively sort the grid
+   * Column header groups are sorted using their name
+   * Children of column header groups are then sorted within each group
+   *
+   * @param items The tree items to sort
+   * @param option Direction of the sort
+   * @param movedColumns The existing moved columns for the sort
+   *                     Grids may use an initial move list from the model (e.g. column header groups)
+   *                     Also used to recursively sort header groups
+   * @returns The moves required to sort the grid. Includes the starting movedColumns in the array
+   */
+  getSortMoves(itemsParam, option, movedColumns) {
+    var items = [...itemsParam];
+    // Sort all the movable columns
+    var isAscending = option === VisibilityOrderingBuilder.SORTING_OPTIONS.ASC;
+    items.sort((a, b) => {
+      var aName = a.id.toUpperCase();
+      var bName = b.id.toUpperCase();
+      return TextUtils.sort(aName, bName, isAscending);
+    });
+    var newMoves = [...movedColumns]; // Start with the base state moves by the model
+    var moveToIndex = Math.min(...items.flatMap(item => {
+      var {
+        modelIndex
+      } = item.data;
+      return Array.isArray(modelIndex) ? GridUtils.getVisibleIndexes(modelIndex, newMoves) : GridUtils.getVisibleIndex(modelIndex, newMoves);
+    }));
+    for (var i = 0; i < items.length; i += 1) {
+      var item = items[i];
+      var {
+        modelIndex
+      } = item.data;
+      var visibleIndex = Array.isArray(modelIndex) ? GridUtils.getVisibleIndexes(modelIndex, newMoves) : GridUtils.getVisibleIndex(modelIndex, newMoves);
+      newMoves = Array.isArray(visibleIndex) ? GridUtils.moveRange([Math.min(...visibleIndex), Math.max(...visibleIndex)], moveToIndex, newMoves, true) : GridUtils.moveItem(visibleIndex, moveToIndex, newMoves);
+      if (Array.isArray(visibleIndex)) {
+        // Recursively sort groups
+        newMoves = this.getSortMoves(item.children, option, newMoves);
+      }
+      moveToIndex += Array.isArray(modelIndex) ? modelIndex.length : 1;
+    }
+    return newMoves;
+  }
+  handleSortColumns(option) {
+    var {
+      model,
+      onMovedColumnsChanged
+    } = this.props;
+    var newMoves = this.getSortMoves(this.getTreeItems(), option, model.initialMovedColumns);
+    onMovedColumnsChanged(newMoves);
+  }
+  handleItemClick(name, event) {
+    event.stopPropagation();
+
+    // Click was triggered by an interactive element. Ignore select
+    if (event.target instanceof HTMLElement && (event.target.tagName === 'BUTTON' || event.target.tagName === 'INPUT')) {
+      return;
+    }
+    event.currentTarget.focus();
+    var {
+      selectedColumns,
+      lastSelectedColumn
+    } = this.state;
+    var isModifierKeyDown = GridUtils.isModifierKeyDown(event);
+    var isShiftKeyDown = event.shiftKey;
+    var isSelected = selectedColumns.has(name);
+    var columnsToBeAdded = [name];
+    if (isSelected && isModifierKeyDown) {
+      this.removeColumnFromSelected(name);
+      return;
+    }
+    var movableItems = flattenTree(this.getTreeItems());
+    if (isSelected && !isShiftKeyDown && lastSelectedColumn === name) {
+      var selectedItem = movableItems.find(_ref9 => {
+        var {
+          id
+        } = _ref9;
+        return id === name;
+      });
+      assertNotNull(selectedItem);
+      var childCount = flattenTree(selectedItem.children).length;
+      // If clicking on an item and it's the only thing selected, deselect it
+      if (childCount + 1 === selectedColumns.size) {
+        this.resetSelection();
+        return;
+      }
+    }
+    if (isShiftKeyDown) {
+      var selectedIndex = movableItems.findIndex(item => item.id === name);
+      var lastSelectedIndex = movableItems.findIndex(item => item.id === lastSelectedColumn);
+      columnsToBeAdded.push(...movableItems.slice(Math.min(lastSelectedIndex, selectedIndex), Math.max(lastSelectedIndex, selectedIndex) + 1).map(item => item.id));
+    }
+    this.addColumnToSelected(columnsToBeAdded, isModifierKeyDown || isShiftKeyDown);
+    this.setState({
+      lastSelectedColumn: name
+    });
+  }
+
+  /**
+   * Adds columns or groups to the selected column set
+   * Groups being added will add all of their children to the selection as well
+   *
+   * @param columnsToBeAdded Array of column or group names to add
+   * @param addToExisting If these should be added to the existing selection or overwrite it
+   */
+  addColumnToSelected(columnsToBeAdded, addToExisting) {
+    var {
+      selectedColumns
+    } = this.state;
+    var newSelectedColumns = new Set(addToExisting ? [...selectedColumns.values()].concat(columnsToBeAdded) : columnsToBeAdded);
+    var flattenedItems = flattenTree(this.getTreeItems());
+
+    // Add all children of selected groups to the selected columns
+    // The treeItems array will always be parent -> child in the order
+    // We don't need to recursively iterate because of this
+    // The parent will always be added before any children for nested selections
+    flattenedItems.forEach(_ref10 => {
+      var {
+        id,
+        children
+      } = _ref10;
+      if (newSelectedColumns.has(id)) {
+        children.forEach(child => newSelectedColumns.add(child.id));
+      }
+    });
+    this.setState({
+      selectedColumns: newSelectedColumns
+    });
+  }
+
+  /**
+   * Removes a column or group from selected columns set.
+   *
+   * Removing a group will deselect all of its children.
+   *
+   * Removing a child will deselect all parent groups.
+   * Other children in those parents will stay selected, just not the group item.
+   *
+   * @param name Name of the column to remove
+   */
+  removeColumnFromSelected(name) {
+    var {
+      selectedColumns
+    } = this.state;
+    var flattenedItems = flattenTree(this.getTreeItems());
+    var item = flattenedItems.find(_ref11 => {
+      var {
+        id
+      } = _ref11;
+      return id === name;
+    });
+    assertNotNull(item);
+    var parentItem = flattenedItems.find(_ref12 => {
+      var {
+        id
+      } = _ref12;
+      return id === item.parentId;
+    });
+
+    // Remove all children of deselected groups
+    flattenTree(item === null || item === void 0 ? void 0 : item.children).forEach(child => selectedColumns.delete(child.id));
+
+    // Remove all parents of the removed group since it is no longer fully selected
+    var _loop2 = function _loop2() {
+      selectedColumns.delete(parentItem.id);
+      var newParentId = parentItem.parentId;
+      parentItem = flattenedItems.find(_ref13 => {
+        var {
+          id
+        } = _ref13;
+        return id === newParentId;
+      });
+    };
+    while (parentItem != null) {
+      _loop2();
+    }
+    selectedColumns.delete(name);
+    this.setState({
+      selectedColumns: new Set(selectedColumns)
+    });
+  }
+  handleDragStart(id) {
+    var {
+      selectedColumns
+    } = this.state;
+    if (!selectedColumns.has(id)) {
+      this.addColumnToSelected([id], false);
+    }
+  }
+  handleDragEnd(from, to) {
+    var {
+      movedColumns,
+      onMovedColumnsChanged,
+      columnHeaderGroups,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    var selectedParentItems = this.getSelectedParentItems();
+    var flattenedItems = flattenTree(this.getTreeItems()).map((item, i) => _objectSpread(_objectSpread({}, item), {}, {
+      index: i
+    }));
+    var firstMovableIndex = this.getFirstMovableIndex();
+    var lastMovableIndex = this.getLastMovableIndex();
+    assertNotNull(firstMovableIndex);
+    assertNotNull(lastMovableIndex);
+    var {
+      groups: newGroups,
+      movedColumns: newMoves
+    } = moveItemsFromDrop(from, to, movedColumns, columnHeaderGroups, flattenedItems, selectedParentItems, firstMovableIndex, lastMovableIndex);
+    onColumnHeaderGroupChanged(newGroups);
+    onMovedColumnsChanged(newMoves);
+  }
+  handleGroupNameChange(group, newName) {
+    var {
+      columnHeaderGroups,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    var newGroups = [...columnHeaderGroups];
+    var oldName = group.name;
+    var groupIndex = newGroups.findIndex(_ref14 => {
+      var {
+        name
+      } = _ref14;
+      return name === oldName;
+    });
+    var oldGroup = newGroups[groupIndex];
+    assertNotNull(oldGroup); // Also means groupIndex >= 0
+
+    var newGroup = new ColumnHeaderGroup(oldGroup);
+    newGroup.name = newName;
+    newGroups.splice(groupIndex, 1, newGroup);
+    var parentIndex = newGroups.findIndex(_ref15 => {
+      var {
+        name
+      } = _ref15;
+      return name === newGroup.parent;
+    });
+    if (parentIndex >= 0) {
+      var newParent = new ColumnHeaderGroup(newGroups[parentIndex]);
+      newParent.removeChildren([oldName]);
+      newParent.addChildren([newName]);
+      newGroups.splice(parentIndex, 1, newParent);
+    }
+    onColumnHeaderGroupChanged(newGroups);
+  }
+  handleGroupDelete(group) {
+    var {
+      columnHeaderGroups,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    var newGroups = columnHeaderGroups.filter(g => g.name !== group.name);
+    var parentIndex = newGroups.findIndex(g => g.name === group.parent);
+    if (parentIndex >= 0) {
+      var newParent = new ColumnHeaderGroup(newGroups[parentIndex]);
+      newParent.addChildren(group.children);
+      newParent.removeChildren([group.name]);
+      newGroups.splice(parentIndex, 1, newParent);
+    }
+    onColumnHeaderGroupChanged(newGroups);
+  }
+  handleGroupCreate() {
+    var {
+      movedColumns,
+      onMovedColumnsChanged,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    var {
+      newMoves,
+      groups
+    } = this.moveSelectedColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.TOP);
+    var newGroups = groups.filter(group => !group.isNew);
+    var selectedItems = this.getSelectedParentItems();
+    var childIndexes = selectedItems.map(item => item.data.modelIndex).flat().filter(index => index >= 0);
+
+    // We don't care about this name really as long as it's unique
+    // The user must change it and we display a placeholder instead
+    var name = "".concat(ColumnHeaderGroup.NEW_GROUP_PREFIX, "-").concat(Date.now());
+    var newGroup = new ColumnHeaderGroup({
+      name,
+      children: selectedItems.map(_ref16 => {
+        var {
+          id
+        } = _ref16;
+        return id;
+      }),
+      depth: 0,
+      childIndexes: [...new Set(childIndexes)] // Remove any duplicates
+    });
+
+    onMovedColumnsChanged(movedColumns.concat(newMoves), () => {
+      var _this$list4, _this$list4$parentEle;
+      (_this$list4 = this.list) === null || _this$list4 === void 0 ? void 0 : (_this$list4$parentEle = _this$list4.parentElement) === null || _this$list4$parentEle === void 0 ? void 0 : _this$list4$parentEle.scroll({
+        top: 0
+      });
+    });
+    onColumnHeaderGroupChanged(newGroups.concat([newGroup]));
+    this.resetSelection();
+  }
+
+  /**
+   * Validates if a header group name is valid and not in use by any header groups or columns
+   * @param groupName The name to validate
+   * @returns Error message if invalid
+   */
+  validateGroupName(groupName) {
+    var {
+      model,
+      columnHeaderGroups
+    } = this.props;
+    var {
+      columns
+    } = model;
+    if (!DbNameValidator.isValidColumnName(groupName)) {
+      return 'Invalid name';
+    }
+    if (columns.some(_ref17 => {
+      var {
+        name
+      } = _ref17;
+      return name === groupName;
+    }) || columnHeaderGroups.some(_ref18 => {
+      var {
+        name
+      } = _ref18;
+      return name === groupName;
+    })) {
+      return 'Duplicate name';
+    }
+    return '';
+  }
+  /**
+   * Gets the first movable visible index
+   */
+  getFirstMovableIndex() {
+    var {
+      model,
+      movedColumns
+    } = this.props;
+    return this.getMemoizedFirstMovableIndex(model, model.columns, movedColumns);
+  }
+  /**
+   * Gets the last movable visible index
+   */
+  getLastMovableIndex() {
+    var {
+      model,
+      movedColumns
+    } = this.props;
+    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
+   * @returns The movable tree items in order
+   */
+  getTreeItems() {
+    var {
+      model,
+      movedColumns,
+      hiddenColumns,
+      columnHeaderGroups
+    } = this.props;
+    var {
+      selectedColumns
+    } = this.state;
+    return this.memoizedGetTreeItems(model.columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns);
+  }
+
+  /**
+   * Gets the selected items that are movable.
+   * This is any item whose parent is not also selected.
+   *
+   * @returns The array of items whose parents are not selected
+   */
+  getSelectedParentItems() {
+    var {
+      selectedColumns
+    } = this.state;
+    var treeItems = flattenTree(this.getTreeItems());
+    return treeItems.filter(_ref19 => {
+      var {
+        id,
+        parentId
+      } = _ref19;
+      return (
+        // All items whose parents are not selected
+        selectedColumns.has(id) && !selectedColumns.has(parentId !== null && parentId !== void 0 ? parentId : '')
+      );
+    });
+  }
+  render() {
+    var {
+      model,
+      hiddenColumns,
+      onColumnVisibilityChanged
+    } = this.props;
+    var {
+      selectedColumns,
+      searchFilter
+    } = this.state;
+    var hasSelection = selectedColumns.size > 0;
+    var treeItems = this.getTreeItems();
+    var nameToIndexes = new Map(flattenTree(treeItems).map(item => [item.id, item.data.modelIndex]));
+    var hiddenColumnsSet = new Set(hiddenColumns);
+    var columnsToToggle = [
+    // Pass through Set to dedupe model indexes
+    ...new Set(hasSelection ? [...selectedColumns.values()].map(name => nameToIndexes.get(name)).filter(i => i != null).flat() : treeItems.map(item => item.data.modelIndex).flat())];
+    var areSomeVisible = columnsToToggle.some(column => !hiddenColumnsSet.has(column));
+    var allToggleText = areSomeVisible ? 'Hide All' : 'Show All';
+    var selectedToggleText = areSomeVisible ? 'Hide Selected' : 'Show Selected';
+    var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, treeItems);
+    return /*#__PURE__*/React.createElement("div", {
+      role: "menu",
+      className: "visibility-ordering-builder",
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "top-menu"
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "toggle-visibility-btn",
+      onClick: () => {
+        onColumnVisibilityChanged(columnsToToggle, !areSomeVisible);
+      },
+      icon: areSomeVisible ? dhEye : dhEyeSlash,
+      tooltip: "Toggle column visibility"
+    }, !hasSelection ? allToggleText : selectedToggleText), /*#__PURE__*/React.createElement(SearchInput, {
+      className: "visibility-search",
+      value: searchFilter,
+      matchCount: searchFilter ? selectedColumns.size : undefined,
+      onChange: this.handleSearchInputChange
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "top-menu"
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: vsRefresh,
+      tooltip: "Reset to default",
+      onClick: () => {
+        this.resetVisibilityOrdering();
+      }
+    }, "Reset"), /*#__PURE__*/React.createElement("span", {
+      className: "vertical-divider"
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: dhSortAlphaDown,
+      tooltip: "Sort ascending",
+      onClick: () => {
+        this.handleSortColumns(VisibilityOrderingBuilder.SORTING_OPTIONS.ASC);
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: dhSortAlphaUp,
+      tooltip: "Sort descending",
+      onClick: () => {
+        this.handleSortColumns(VisibilityOrderingBuilder.SORTING_OPTIONS.DSC);
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "vertical-divider"
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      tooltip: "Create group from selection",
+      disabled: !hasSelection,
+      onClick: this.handleGroupCreate
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "fa-layers",
+      style: {
+        marginRight: '0.75rem'
+      }
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      mask: vsSymbolStructure,
+      icon: vsCircleLargeFilled,
+      transform: "right-7 down-5 shrink-6"
+    }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsAdd,
+      transform: "right-8 down-6 shrink-8"
+    })), "Group"), /*#__PURE__*/React.createElement("span", {
+      className: "vertical-divider"
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: vsChevronUp,
+      tooltip: "Move selection up",
+      onClick: () => {
+        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.UP);
+      },
+      disabled: !hasSelection
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: vsChevronDown,
+      tooltip: "Move selection down",
+      onClick: () => {
+        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.DOWN);
+      },
+      disabled: !hasSelection
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: dhArrowToTop,
+      tooltip: "Move selection to top",
+      onClick: () => {
+        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.TOP);
+      },
+      disabled: !hasSelection
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      icon: dhArrowToBottom,
+      tooltip: "Move selection to bottom",
+      onClick: () => {
+        this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM);
+      },
+      disabled: !hasSelection
+    })), /*#__PURE__*/React.createElement("div", {
+      role: "menu",
+      className: classNames('visibility-ordering-list')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "column-list",
+      ref: list => {
+        this.list = list;
+      }
+    }, visibilityOrderingList)));
+  }
+}
+_defineProperty(VisibilityOrderingBuilder, "SORTING_OPTIONS", {
+  DSC: 'DSC',
+  ASC: 'ASC'
+});
+_defineProperty(VisibilityOrderingBuilder, "MOVE_OPTIONS", {
+  TOP: 'TOP',
+  BOTTOM: 'BOTTOM',
+  UP: 'UP',
+  DOWN: 'DOWN'
+});
+export default VisibilityOrderingBuilder;
+//# sourceMappingURL=VisibilityOrderingBuilder.js.map