@deephaven/iris-grid 0.59.1-beta.0 → 0.59.1-beta.4

package/dist/IrisGridPartitionSelector.js

@@ -1,49 +1,43 @@
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 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 memoizee from 'memoizee';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { DropdownMenu, Tooltip } from '@deephaven/components';
-import { vsTriangleDown, vsClose } from '@deephaven/icons';
+import { Button } from '@deephaven/components';
+import { vsChevronRight, vsMerge, vsKey } from '@deephaven/icons';
 import Log from '@deephaven/log';
-import debounce from 'lodash.debounce';
+import { TableDropdown } from '@deephaven/jsapi-components';
 import { TableUtils } from '@deephaven/jsapi-utils';
-import PartitionSelectorSearch from "./PartitionSelectorSearch.js";
+import { assertNotNull, Pending, PromiseUtils } from '@deephaven/utils';
 import "./IrisGridPartitionSelector.css";
-import IrisGridUtils from "./IrisGridUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var log = Log.module('IrisGridPartitionSelector');
-var PARTITION_CHANGE_DEBOUNCE_MS = 250;
 class IrisGridPartitionSelector extends Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "pending", void 0);
     _defineProperty(this, "tableUtils", void 0);
-    _defineProperty(this, "searchMenu", void 0);
-    _defineProperty(this, "selectorSearch", void 0);
-    _defineProperty(this, "debounceUpdate", debounce(() => {
-      this.sendUpdate();
-    }, PARTITION_CHANGE_DEBOUNCE_MS));
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleIgnoreClick = this.handleIgnoreClick.bind(this);
-    this.handlePartitionChange = this.handlePartitionChange.bind(this);
+    _defineProperty(this, "getCachedChangeCallback", memoizee(index => value => this.handlePartitionSelect(index, value)));
+    _defineProperty(this, "getCachedFormatValueCallback", memoizee(index => value => this.getDisplayValue(index, value)));
+    this.handleKeyTableClick = this.handleKeyTableClick.bind(this);
+    this.handleMergeClick = this.handleMergeClick.bind(this);
     this.handlePartitionSelect = this.handlePartitionSelect.bind(this);
-    this.handlePartitionListResized = this.handlePartitionListResized.bind(this);
-    this.handleSearchOpened = this.handleSearchOpened.bind(this);
-    this.handleSearchClosed = this.handleSearchClosed.bind(this);
     var {
-      dh,
-      columns,
-      partitions
+      model
     } = props;
-    this.tableUtils = new TableUtils(dh);
-    this.searchMenu = columns.map(() => null);
-    this.selectorSearch = columns.map(() => null);
+    this.tableUtils = new TableUtils(model.dh);
+    this.pending = new Pending();
     this.state = {
-      partitions,
+      // We start be loading the partition tables, so we should be in a loading state
+      isLoading: true,
+      keysTable: null,
+      partitionFilters: null,
       partitionTables: null
     };
   }
@@ -51,254 +45,286 @@ class IrisGridPartitionSelector extends Component {
     var _this = this;
     return _asyncToGenerator(function* () {
       var {
-        columns,
-        table
+        model
       } = _this.props;
-      var {
-        partitions
-      } = _this.state;
-      var partitionTables = yield Promise.all(columns.map( /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator(function* (_, i) {
-          return table.selectDistinct(columns.slice(0, i + 1));
+      try {
+        var keysTable = yield _this.pending.add(model.partitionKeysTable().then(keyTable => {
+          var sorts = model.partitionColumns.map(column => column.sort().desc());
+          keyTable.applySort(sorts);
+          return keyTable;
+        }), t => t.close());
+        var partitionTables = yield Promise.all(model.partitionColumns.map( /*#__PURE__*/function () {
+          var _ref = _asyncToGenerator(function* (_, i) {
+            return _this.pending.add(keysTable.selectDistinct(model.partitionColumns.slice(0, i + 1)), t => t.close());
+          });
+          return function (_x, _x2) {
+            return _ref.apply(this, arguments);
+          };
+        }()));
+        var partitionFilters = _this.getPartitionFilters(partitionTables);
+        _this.setState({
+          isLoading: false,
+          keysTable,
+          partitionFilters,
+          partitionTables
         });
-        return function (_x, _x2) {
-          return _ref.apply(this, arguments);
-        };
-      }()));
-      _this.updatePartitionFilters(partitions, partitionTables);
+      } catch (e) {
+        if (!PromiseUtils.isCanceled(e)) {
+          // Just re-throw the error if it's not a cancel
+          throw e;
+        }
+      }
     })();
   }
-  componentWillUnmount() {
+  componentDidUpdate(prevProps) {
     var {
-      partitionTables
-    } = this.state;
-    partitionTables === null || partitionTables === void 0 ? void 0 : partitionTables.forEach(table => table.close());
-    this.debounceUpdate.cancel();
-  }
-  handleCloseClick() {
-    log.debug2('handleCloseClick');
-    this.sendDone();
-  }
-  handleIgnoreClick() {
-    log.debug2('handleIgnoreClick');
-    this.sendFetchAll();
-  }
-  handlePartitionChange(index, event) {
-    log.debug2('handlePartitionChange');
+      partitionConfig: prevConfig
+    } = prevProps;
     var {
-      columns
+      partitionConfig
     } = this.props;
-    var {
-      partitions,
-      partitionTables
-    } = this.state;
-    var {
-      value: partition
-    } = event.target;
-    var newPartitions = [...partitions];
-    newPartitions[index] = TableUtils.isCharType(columns[index].type) && partition.length > 0 ? partition.charCodeAt(0).toString() : partition;
-    if (partitionTables) {
-      this.updatePartitionFilters(newPartitions, partitionTables);
+    if (prevConfig !== partitionConfig) {
+      this.updatePartitionFilters();
     }
-    this.setState({
-      partitions: newPartitions
-    });
-    this.debounceUpdate();
   }
-  handlePartitionSelect(index, partition) {
+  componentWillUnmount() {
+    this.pending.cancel();
     var {
-      partitions,
+      keysTable,
       partitionTables
     } = this.state;
-    var selectedMenu = this.searchMenu[index];
-    if (selectedMenu) {
-      selectedMenu.closeMenu();
-    }
-    var newPartitions = [...partitions];
-    newPartitions[index] = partition;
-    if (partitionTables) {
-      this.updatePartitionFilters(newPartitions, partitionTables);
-    }
-    this.setState({
-      partitions: newPartitions
-    }, () => {
-      this.sendUpdate();
-    });
+    keysTable === null || keysTable === void 0 ? void 0 : keysTable.close();
+    partitionTables === null || partitionTables === void 0 ? void 0 : partitionTables.forEach(table => table.close());
   }
-  handlePartitionListResized(index) {
-    var selectedMenu = this.searchMenu[index];
-    if (selectedMenu) {
-      selectedMenu.scheduleUpdate();
-    }
+  handleKeyTableClick() {
+    log.debug2('handleKeyTableClick');
+    var {
+      partitionConfig
+    } = this.props;
+    var newPartitionConfig = _objectSpread({}, partitionConfig);
+    // Toggle between Keys and Partition mode
+    newPartitionConfig.mode = partitionConfig.mode === 'keys' ? 'partition' : 'keys';
+    this.sendUpdate(newPartitionConfig);
   }
-  handleSearchClosed() {
-    // Reset the table filter so it's ready next time user opens search
+  handleMergeClick() {
+    log.debug2('handleMergeClick');
     var {
-      table
+      partitionConfig
     } = this.props;
-    table.applyFilter([]);
+    var newPartitionConfig = _objectSpread({}, partitionConfig);
+    // Toggle between Merged and Partition mode
+    newPartitionConfig.mode = partitionConfig.mode === 'merged' ? 'partition' : 'merged';
+    this.sendUpdate(newPartitionConfig);
   }
-  handleSearchOpened(index) {
-    var selectedSearch = this.selectorSearch[index];
-    if (selectedSearch) {
-      selectedSearch.focus();
-    }
+
+  /**
+   * Handles when a partition dropdown selection is changed. Will send an update with the new partition config
+   * @param index Index of the partition column that was changed
+   * @param selectedValue Selected value of the partition column
+   */
+  handlePartitionSelect(index, selectedValue) {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      var {
+        model,
+        partitionConfig: prevConfig
+      } = _this2.props;
+      log.debug('handlePartitionSelect', index, selectedValue, prevConfig);
+      var newPartitions = [...prevConfig.partitions];
+      newPartitions[index] = selectedValue;
+
+      // If it's the last partition changed, we know it's already a valid value, just emit it
+      if (index === model.partitionColumns.length - 1) {
+        _this2.sendUpdate({
+          partitions: newPartitions,
+          mode: 'partition'
+        });
+        return;
+      }
+      var {
+        keysTable
+      } = _this2.state;
+      // Otherwise, we need to get the value from a filtered key table
+      assertNotNull(keysTable);
+      try {
+        _this2.setState({
+          isLoading: true
+        });
+        var t = yield _this2.pending.add(keysTable.copy(), tCopy => tCopy.close());
+
+        // Apply our partition filters, and just get the first value
+        var partitionFilters = newPartitions.slice(0, index + 1).map((partition, i) => {
+          var partitionColumn = t.columns[i];
+          return partitionColumn.filter().eq(_this2.tableUtils.makeFilterRawValue(partitionColumn.type, partition));
+        });
+        t.applyFilter(partitionFilters);
+        t.setViewport(0, 0, t.columns);
+        var data = yield _this2.pending.add(t.getViewportData());
+        var newConfig = {
+          partitions: t.columns.map(column => data.rows[0].get(column)),
+          mode: 'partition'
+        };
+        t.close();
+        _this2.sendUpdate(newConfig);
+      } catch (e) {
+        if (!PromiseUtils.isCanceled(e)) {
+          log.error('Unable to get partition tables', e);
+        }
+      } finally {
+        _this2.setState({
+          isLoading: false
+        });
+      }
+    })();
   }
-  sendDone() {
-    this.debounceUpdate.flush();
+  sendUpdate(partitionConfig) {
+    log.debug2('sendUpdate', partitionConfig);
     var {
-      onDone
+      onChange
     } = this.props;
-    onDone();
+    onChange(partitionConfig);
   }
-  sendUpdate() {
-    log.debug2('sendUpdate');
+
+  /**
+   * Calls model.displayString with a special character case
+   * @param index The index of the partition column to get the display value for
+   * @param value The partition value to get the display value for
+   */
+  getDisplayValue(index, value) {
     var {
-      onChange
+      model
     } = this.props;
+    if (value == null || value === '') {
+      return '';
+    }
+    var column = model.partitionColumns[index];
+    if (TableUtils.isCharType(column.type) && value.toString().length > 0) {
+      return String.fromCharCode(parseInt(value.toString(), 10));
+    }
+    return model.displayString(value, column.type, column.name);
+  }
+
+  /**
+   * Update the filters on the partition dropdown tables
+   */
+  updatePartitionFilters() {
     var {
-      partitions
+      partitionTables
     } = this.state;
-    onChange(partitions);
-  }
-  sendFetchAll() {
-    log.debug2('sendFetchAll');
-    this.debounceUpdate.cancel();
+    assertNotNull(partitionTables);
     var {
-      onFetchAll
+      partitionConfig
     } = this.props;
-    onFetchAll();
+    var {
+      mode
+    } = partitionConfig;
+    log.debug('updatePartitionFilters', partitionConfig);
+    if (mode !== 'partition') {
+      // We only need to update the filters if the mode is `partitions`
+      // In the other modes, we disable the dropdowns anyway
+      return;
+    }
+    var partitionFilters = this.getPartitionFilters(partitionTables);
+    this.setState({
+      partitionFilters
+    });
   }
-  getDisplayValue(column, index) {
+  getPartitionFilters(partitionTables) {
+    var {
+      model,
+      partitionConfig
+    } = this.props;
     var {
       partitions
-    } = this.state;
-    var partition = partitions[index];
-    if (partition == null) {
-      return '';
+    } = partitionConfig;
+    log.debug('getPartitionFilters', partitionConfig);
+    if (partitions.length !== partitionTables.length) {
+      throw new Error("Invalid partition config set. Expected ".concat(partitionTables.length, " partitions, but got ").concat(partitions.length));
     }
-    if (TableUtils.isCharType(column.type) && partition.toString().length > 0) {
-      return String.fromCharCode(parseInt(partition, 10));
-    }
-    return IrisGridUtils.convertValueToText(partition, column.type);
-  }
-  updatePartitionFilters(partitions, partitionTables) {
-    var _this2 = this;
-    return _asyncToGenerator(function* () {
-      var _partitionTables;
-      var {
-        columns,
-        getFormattedString
-      } = _this2.props;
-      var partitionFilters = [];
-      for (var i = 0; i < columns.length - 1; i += 1) {
-        var _partitionTables$i;
-        var partition = partitions[i];
-        var partitionColumn = columns[i];
-        (_partitionTables$i = partitionTables[i]) === null || _partitionTables$i === void 0 ? void 0 : _partitionTables$i.applyFilter(partitionFilters);
-        if (partition !== null && !(TableUtils.isCharType(partitionColumn.type) && partition === '')) {
-          var partitionText = TableUtils.isCharType(partitionColumn.type) ? getFormattedString(partition, partitionColumn.type, partitionColumn.name) : partition;
-          var partitionFilter = _this2.tableUtils.makeQuickFilterFromComponent(partitionColumn, partitionText);
-          if (partitionFilter !== null) {
-            partitionFilters.push(partitionFilter);
-          }
-        }
+
+    // The filters are applied in order, so we need to build up the filters for each partition
+    var partitionFilters = [];
+    for (var i = 0; i < partitions.length; i += 1) {
+      if (i === 0) {
+        // There's no reason to ever filter the first table
+        partitionFilters.push([]);
+      } else {
+        var previousFilter = partitionFilters[i - 1];
+        var previousPartition = partitions[i - 1];
+        var previousColumn = model.partitionColumns[i - 1];
+        var partitionFilter = [...previousFilter, previousColumn.filter().eq(this.tableUtils.makeFilterRawValue(previousColumn.type, previousPartition))];
+        partitionFilters.push(partitionFilter);
       }
-      (_partitionTables = partitionTables[partitionTables.length - 1]) === null || _partitionTables === void 0 ? void 0 : _partitionTables.applyFilter(partitionFilters);
-      _this2.setState({
-        partitionTables
-      });
-    })();
+    }
+    return partitionFilters;
   }
   render() {
     var {
-      columns,
-      dh,
-      getFormattedString,
-      onDone
+      model,
+      partitionConfig
     } = this.props;
     var {
+      isLoading,
+      partitionFilters,
       partitionTables
     } = this.state;
-    var partitionSelectorSearch = columns.map((column, index) => partitionTables && /*#__PURE__*/_jsx(PartitionSelectorSearch, {
-      dh: dh,
-      column: column,
-      getFormattedString: getFormattedString,
-      table: partitionTables[index],
-      onSelect: partition => this.handlePartitionSelect(index, partition),
-      onListResized: () => this.handlePartitionListResized(index),
-      ref: selectorSearch => {
-        this.selectorSearch[index] = selectorSearch;
-      }
-    }, "search-".concat(column.name)));
-    var partitionSelectors = columns.map((column, index) => {
-      var _partitionSelectorSea;
-      return /*#__PURE__*/_jsxs(_Fragment, {
+    var {
+      mode,
+      partitions
+    } = partitionConfig;
+    var partitionSelectors = model.partitionColumns.map((column, index) => {
+      var _partitionTables$inde;
+      return /*#__PURE__*/_jsxs("div", {
+        className: "column-selector",
         children: [/*#__PURE__*/_jsx("div", {
-          className: "status-message",
-          children: /*#__PURE__*/_jsxs("span", {
-            children: [column.name, ": "]
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: "input-group",
-          children: [/*#__PURE__*/_jsx("input", {
-            type: "text",
-            value: this.getDisplayValue(column, index),
-            onChange: e => {
-              this.handlePartitionChange(index, e);
-            },
-            className: "form-control input-partition"
-          }), /*#__PURE__*/_jsx("div", {
-            className: "input-group-append",
-            children: /*#__PURE__*/_jsxs("button", {
-              type: "button",
-              className: "btn btn-outline-primary",
-              children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
-                icon: vsTriangleDown
-              }), /*#__PURE__*/_jsx(Tooltip, {
-                children: "Partitions"
-              }), /*#__PURE__*/_jsx(DropdownMenu, {
-                ref: searchMenu => {
-                  this.searchMenu[index] = searchMenu;
-                },
-                actions: [{
-                  menuElement: (_partitionSelectorSea = partitionSelectorSearch[index]) !== null && _partitionSelectorSea !== void 0 ? _partitionSelectorSea : undefined
-                }],
-                onMenuOpened: () => {
-                  this.handleSearchOpened(index);
-                },
-                onMenuClosed: this.handleSearchClosed
-              })]
-            })
-          })]
-        }), /*#__PURE__*/_jsx("div", {
-          className: "iris-grid-partition-selector-spacer"
+          className: "column-name",
+          children: column.name
+        }), /*#__PURE__*/_jsx(TableDropdown, {
+          className: "custom-select-sm",
+          table: partitionTables === null || partitionTables === void 0 ? void 0 : partitionTables[index],
+          column: partitionTables === null || partitionTables === void 0 ? void 0 : (_partitionTables$inde = partitionTables[index]) === null || _partitionTables$inde === void 0 ? void 0 : _partitionTables$inde.columns[index],
+          filter: partitionFilters === null || partitionFilters === void 0 ? void 0 : partitionFilters[index],
+          onChange: this.getCachedChangeCallback(index),
+          selectedValue: mode === 'partition' ? partitions[index] : undefined,
+          disabled: index > 0 && partitionConfig.mode !== 'partition' || isLoading,
+          formatValue: this.getCachedFormatValueCallback(index)
+        }), model.partitionColumns.length - 1 === index || /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: vsChevronRight
         })]
-      });
+      }, "selector-".concat(column.name));
     });
     return /*#__PURE__*/_jsxs("div", {
       className: "iris-grid-partition-selector",
-      children: [partitionSelectors, /*#__PURE__*/_jsx("button", {
-        type: "button",
-        className: "btn btn-outline-primary btn-ignore",
-        onClick: this.handleIgnoreClick,
-        children: "Ignore & Fetch All"
-      }), /*#__PURE__*/_jsx("button", {
-        type: "button",
-        className: "btn btn-link btn-link-icon btn-close",
-        onClick: onDone,
-        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-          icon: vsClose
-        })
-      })]
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "table-name",
+        children: "Partitioned Table"
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "partition-button-group",
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: "btn-sm",
+          onClick: this.handleKeyTableClick,
+          kind: "inline",
+          tooltip: "View keys as table",
+          icon: vsKey,
+          active: partitionConfig.mode === 'keys',
+          disabled: isLoading,
+          children: "Keys"
+        }), /*#__PURE__*/_jsx(Button, {
+          className: "btn-sm",
+          onClick: this.handleMergeClick,
+          kind: "inline",
+          tooltip: "View all partitions as one merged table",
+          icon: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: vsMerge,
+            rotation: 90
+          }),
+          active: partitionConfig.mode === 'merged',
+          disabled: isLoading,
+          children: "Merge"
+        })]
+      }), partitionSelectors]
     });
   }
 }
-_defineProperty(IrisGridPartitionSelector, "defaultProps", {
-  onChange: () => undefined,
-  onFetchAll: () => undefined,
-  onDone: () => undefined,
-  partitions: []
-});
 export default IrisGridPartitionSelector;
 //# sourceMappingURL=IrisGridPartitionSelector.js.map