@deephaven/iris-grid 0.26.2-beta.3 → 0.27.1-beta.2

package/dist/IrisGrid.js

@@ -19,6 +19,7 @@ import { dhEye, dhFilterFilled, dhGraphLineUp, dhTriangleDownSquare, vsClose, vs
 import dh from '@deephaven/jsapi-shim';
 import { DateUtils, Formatter, FormatterUtils, TableUtils } from '@deephaven/jsapi-utils';
 import { assertNotNull, copyToClipboard, Pending, PromiseUtils, ValidationError } from '@deephaven/utils';
+import { Type as FilterType } from '@deephaven/filters';
 import throttle from 'lodash.throttle';
 import debounce from 'lodash.debounce';
 import clamp from 'lodash.clamp';
@@ -52,6 +53,7 @@ import GotoRow from "./GotoRow.js";
 var log = Log.module('IrisGrid');
 var UPDATE_DOWNLOAD_THROTTLE = 500;
 var SET_FILTER_DEBOUNCE = 250;
+var SEEK_ROW_DEBOUNCE = 250;
 var SET_CONDITIONAL_FORMAT_DEBOUNCE = 250;
 var DEFAULT_AGGREGATION_SETTINGS = Object.freeze({
   aggregations: [],
@@ -370,6 +372,15 @@ export class IrisGrid extends Component {
         ref: this.handleTooltipRef
       }, "View full contents"));
     }));
+    _defineProperty(this, "handleGotoValueChanged", input => {
+      this.setState({
+        gotoValue: input
+      });
+      this.debouncedSeekRow(input);
+    });
+    _defineProperty(this, "debouncedSeekRow", debounce(input => {
+      this.seekRow(input);
+    }, SEEK_ROW_DEBOUNCE));
     this.handleAdvancedFilterChange = this.handleAdvancedFilterChange.bind(this);
     this.handleAdvancedFilterSortChange = this.handleAdvancedFilterSortChange.bind(this);
     this.handleAdvancedFilterDone = this.handleAdvancedFilterDone.bind(this);
@@ -430,6 +441,10 @@ export class IrisGrid extends Component {
     this.handleOverflowClose = this.handleOverflowClose.bind(this);
     this.getColumnBoundingRect = this.getColumnBoundingRect.bind(this);
     this.handleGotoRowSelectedRowNumberChanged = this.handleGotoRowSelectedRowNumberChanged.bind(this);
+    this.handleGotoValueSelectedColumnNameChanged = this.handleGotoValueSelectedColumnNameChanged.bind(this);
+    this.handleGotoValueSelectedFilterChanged = this.handleGotoValueSelectedFilterChanged.bind(this);
+    this.handleGotoValueChanged = this.handleGotoValueChanged.bind(this);
+    this.handleGotoValueSubmitted = this.handleGotoValueSubmitted.bind(this);
     this.grid = null;
     this.gridWrapper = null;
     this.lastLoadedConfig = null;
@@ -586,9 +601,13 @@ export class IrisGrid extends Component {
       showOverflowModal: false,
       overflowText: '',
       overflowButtonTooltipProps: null,
-      isGotoRowShown: false,
+      isGotoShown: false,
       gotoRow: '',
       gotoRowError: '',
+      gotoValueError: '',
+      gotoValueSelectedColumnName: _model.columns[0].name,
+      gotoValueSelectedFilter: FilterType.eq,
+      gotoValue: '',
       columnHeaderGroups: columnHeaderGroups !== null && columnHeaderGroups !== void 0 ? columnHeaderGroups : _model.initialColumnHeaderGroups
     };
   }
@@ -1661,22 +1680,30 @@ export class IrisGrid extends Component {
   }
   toggleGotoRow() {
     var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var columnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     var {
-      isGotoRowShown
+      isGotoShown
     } = this.state;
-    if (row) {
+    if (row || value) {
       // if invoked with a row, keep open instead of toggle
       this.setState({
-        isGotoRowShown: true,
+        isGotoShown: true,
         gotoRow: row,
-        gotoRowError: ''
+        gotoValue: value,
+        gotoValueSelectedColumnName: columnName,
+        gotoRowError: '',
+        gotoValueError: ''
       });
+      this.focusRowInGrid(row);
       return;
     }
     this.setState({
-      isGotoRowShown: !isGotoRowShown,
+      isGotoShown: !isGotoShown,
       gotoRow: '',
-      gotoRowError: ''
+      gotoValue: '',
+      gotoRowError: '',
+      gotoValueError: ''
     });
   }
   commitPending() {
@@ -1838,12 +1865,12 @@ export class IrisGrid extends Component {
   }
   handleGotoRowOpened() {
     this.setState({
-      isGotoRowShown: true
+      isGotoShown: true
     });
   }
   handleGotoRowClosed() {
     this.setState({
-      isGotoRowShown: false
+      isGotoShown: false
     });
   }
   handleAdvancedMenuClosed(columnIndex) {
@@ -2225,7 +2252,11 @@ export class IrisGrid extends Component {
     this.setState({
       customColumns
     });
-    this.startLoading('Applying custom columns...');
+    if (customColumns.length > 0) {
+      // If there are no custom columns, the change handler never fires
+      // This causes the loader to stay until canceled by the user
+      this.startLoading('Applying custom columns...');
+    }
   }
   handleCustomColumnsChanged() {
     log.debug('custom columns changed');
@@ -2378,6 +2409,86 @@ export class IrisGrid extends Component {
       log.error('Attempted to handleDownloadTable for user without download CSV permission.');
     }
   }
+  seekRow(inputString) {
+    var _arguments = arguments,
+      _this5 = this;
+    return _asyncToGenerator(function* () {
+      var isBackwards = _arguments.length > 1 && _arguments[1] !== undefined ? _arguments[1] : false;
+      var {
+        gotoValueSelectedColumnName: selectedColumnName,
+        gotoValueSelectedFilter
+      } = _this5.state;
+      var {
+        model
+      } = _this5.props;
+      if (!model.isSeekRowAvailable) {
+        return;
+      }
+      if (inputString === '') {
+        return;
+      }
+      var columnIndex = model.getColumnIndexByName(selectedColumnName);
+      if (columnIndex === undefined) {
+        return;
+      }
+      var selectedColumn = model.columns[columnIndex];
+      var searchFromRow;
+      if (_this5.grid) {
+        ({
+          selectionEndRow: searchFromRow
+        } = _this5.grid.state);
+      }
+      if (searchFromRow == null) {
+        searchFromRow = 0;
+      }
+      var isContains = gotoValueSelectedFilter === FilterType.contains;
+      var isEquals = gotoValueSelectedFilter === FilterType.eq || gotoValueSelectedFilter === FilterType.eqIgnoreCase;
+      try {
+        var _this5$grid;
+        var columnDataType = TableUtils.getNormalizedType(selectedColumn.type);
+        var rowIndex;
+        switch (columnDataType) {
+          case TableUtils.dataType.STRING:
+            {
+              rowIndex = yield model.seekRow(isBackwards === true ? searchFromRow - 1 : searchFromRow + 1, selectedColumn, dh.ValueType.STRING, inputString, isEquals, isContains, isBackwards !== null && isBackwards !== void 0 ? isBackwards : false);
+              break;
+            }
+          case TableUtils.dataType.DATETIME:
+            {
+              var {
+                formatter
+              } = model;
+              var [startDate] = DateUtils.parseDateRange(inputString, formatter.timeZone);
+              rowIndex = yield model.seekRow(isBackwards === true ? searchFromRow - 1 : searchFromRow + 1, selectedColumn, dh.ValueType.DATETIME, startDate, undefined, undefined, isBackwards !== null && isBackwards !== void 0 ? isBackwards : false);
+              break;
+            }
+          case TableUtils.dataType.DECIMAL:
+          case TableUtils.dataType.INT:
+            {
+              if (!TableUtils.isBigDecimalType(selectedColumn.type) && !TableUtils.isBigIntegerType(selectedColumn.type)) {
+                var inputValue = parseInt(inputString, 10);
+                rowIndex = yield model.seekRow(searchFromRow, selectedColumn, dh.ValueType.NUMBER, inputValue, undefined, undefined, isBackwards !== null && isBackwards !== void 0 ? isBackwards : false);
+              } else {
+                rowIndex = yield model.seekRow(searchFromRow, selectedColumn, dh.ValueType.STRING, inputString, undefined, undefined, isBackwards !== null && isBackwards !== void 0 ? isBackwards : false);
+              }
+              break;
+            }
+          default:
+            {
+              rowIndex = yield model.seekRow(searchFromRow, selectedColumn, dh.ValueType.STRING, inputString, undefined, undefined, isBackwards !== null && isBackwards !== void 0 ? isBackwards : false);
+            }
+        }
+        (_this5$grid = _this5.grid) === null || _this5$grid === void 0 ? void 0 : _this5$grid.setFocusRow(rowIndex);
+        _this5.setState({
+          gotoValueError: ''
+        });
+      } catch (e) {
+        _this5.setState({
+          gotoValueError: 'invalid input'
+        });
+      }
+    })();
+  }
   handleCancelDownloadTable() {
     var _this$tableSaver;
     (_this$tableSaver = this.tableSaver) === null || _this$tableSaver === void 0 ? void 0 : _this$tableSaver.cancelDownload();
@@ -2525,7 +2636,8 @@ export class IrisGrid extends Component {
     });
     if (rowNumber === '') {
       this.setState({
-        gotoRowError: ''
+        gotoRowError: '',
+        gotoValueError: ''
       });
       return;
     }
@@ -2537,20 +2649,23 @@ export class IrisGrid extends Component {
     } else if (rowInt === 0) {
       var _this$grid23;
       this.setState({
-        gotoRowError: ''
+        gotoRowError: '',
+        gotoValueError: ''
       });
       (_this$grid23 = this.grid) === null || _this$grid23 === void 0 ? void 0 : _this$grid23.setFocusRow(0);
     } else if (rowInt < 0) {
       var _this$grid24;
       this.setState({
-        gotoRowError: ''
+        gotoRowError: '',
+        gotoValueError: ''
       });
       (_this$grid24 = this.grid) === null || _this$grid24 === void 0 ? void 0 : _this$grid24.setFocusRow(rowInt + rowCount);
     } else {
       var _this$grid25;
       (_this$grid25 = this.grid) === null || _this$grid25 === void 0 ? void 0 : _this$grid25.setFocusRow(rowInt - 1);
       this.setState({
-        gotoRowError: ''
+        gotoRowError: '',
+        gotoValueError: ''
       });
     }
   }
@@ -2645,10 +2760,28 @@ export class IrisGrid extends Component {
       }
     })));
   }
+  handleGotoValueSelectedColumnNameChanged(columnName) {
+    this.setState({
+      gotoValueSelectedColumnName: columnName,
+      gotoValueError: ''
+    });
+  }
+  handleGotoValueSelectedFilterChanged(value) {
+    this.setState({
+      gotoValueSelectedFilter: value,
+      gotoValueError: ''
+    });
+  }
+  handleGotoValueSubmitted(isBackwards) {
+    var {
+      gotoValue
+    } = this.state;
+    this.seekRow(gotoValue, isBackwards);
+  }
   render() {
     var _rollupConfig$columns3,
       _rollupConfig$columns4,
-      _this5 = this,
+      _this6 = this,
       _this$grid27,
       _this$grid27$state$dr,
       _openOptions;
@@ -2727,9 +2860,12 @@ export class IrisGrid extends Component {
       showOverflowModal,
       overflowText,
       overflowButtonTooltipProps,
-      isGotoRowShown,
+      isGotoShown,
       gotoRow,
-      gotoRowError
+      gotoRowError,
+      gotoValueError,
+      gotoValueSelectedColumnName,
+      gotoValue
     } = this.state;
     if (!isReady) {
       return null;
@@ -2857,7 +2993,7 @@ export class IrisGrid extends Component {
         var columnIndex = visibleColumns[i];
         var columnX = _allColumnXs.get(columnIndex);
         var columnWidth = _allColumnWidths.get(columnIndex);
-        var modelColumn = _this5.getModelColumn(columnIndex);
+        var modelColumn = _this6.getModelColumn(columnIndex);
         if (modelColumn != null) {
           var isFilterable = model.isFilterable(modelColumn);
           if (isFilterable && columnX != null && columnWidth != null && columnWidth > 0) {
@@ -2883,21 +3019,21 @@ export class IrisGrid extends Component {
                 'filter-set': isFilterSet
               }),
               onClick: () => {
-                _this5.setState({
+                _this6.setState({
                   shownAdvancedFilter: columnIndex
                 });
               },
               onContextMenu: event => {
-                var _this5$grid;
-                (_this5$grid = _this5.grid) === null || _this5$grid === void 0 ? void 0 : _this5$grid.handleContextMenu(event);
+                var _this6$grid;
+                (_this6$grid = _this6.grid) === null || _this6$grid === void 0 ? void 0 : _this6$grid.handleContextMenu(event);
               },
               onMouseEnter: () => {
-                _this5.setState({
+                _this6.setState({
                   hoverAdvancedFilter: columnIndex
                 });
               },
               onMouseLeave: () => {
-                _this5.setState({
+                _this6.setState({
                   hoverAdvancedFilter: null
                 });
               }
@@ -2947,7 +3083,7 @@ export class IrisGrid extends Component {
             width: columnWidth,
             height: columnHeaderHeight
           };
-          var _modelColumn = _this5.getModelColumn(columnIndex);
+          var _modelColumn = _this6.getModelColumn(columnIndex);
           if (_modelColumn != null) {
             var _column3 = model.columns[_modelColumn];
             var _advancedFilter2 = advancedFilters.get(_modelColumn);
@@ -2962,9 +3098,9 @@ export class IrisGrid extends Component {
               style: _style2
             }, /*#__PURE__*/React.createElement(Popper, {
               className: "advanced-filter-menu-popper",
-              onEntered: _this5.getAdvancedMenuOpenedHandler(columnIndex),
+              onEntered: _this6.getAdvancedMenuOpenedHandler(columnIndex),
               onExited: () => {
-                _this5.handleAdvancedMenuClosed(columnIndex);
+                _this6.handleAdvancedMenuClosed(columnIndex);
               },
               isShown: shownAdvancedFilter === columnIndex,
               interactive: true,
@@ -2972,7 +3108,7 @@ export class IrisGrid extends Component {
               options: {
                 positionFixed: true
               }
-            }, _this5.getCachedAdvancedFilterMenuActions(model, _column3, advancedFilterOptions, sortDirection, formatter)));
+            }, _this6.getCachedAdvancedFilterMenuActions(model, _column3, advancedFilterOptions, sortDirection, formatter)));
             advancedFilterMenus.push(element);
           }
         }
@@ -2981,7 +3117,7 @@ export class IrisGrid extends Component {
         _loop3();
       }
     }
-    var optionItems = this.getCachedOptionItems(onCreateChart !== undefined && model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable(), isGotoRowShown, advancedSettings.size > 0);
+    var optionItems = this.getCachedOptionItems(onCreateChart !== undefined && model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable(), isGotoShown, advancedSettings.size > 0);
     var openOptionsStack = openOptions.map(option => {
       switch (option.type) {
         case OptionType.CHART_BUILDER:
@@ -3193,10 +3329,11 @@ export class IrisGrid extends Component {
       tooltip: "Table Options"
     })), focusField, loadingElement, filterBar, columnTooltip, advancedFilterMenus, overflowButtonTooltipProps && this.getOverflowButtonTooltip(overflowButtonTooltipProps)), /*#__PURE__*/React.createElement(GotoRow, {
       model: model,
-      isShown: isGotoRowShown,
+      isShown: isGotoShown,
       gotoRow: gotoRow,
       gotoRowError: gotoRowError,
-      onSubmit: this.handleGotoRowSelectedRowNumberSubmit,
+      gotoValueError: gotoValueError,
+      onGotoRowSubmit: this.handleGotoRowSelectedRowNumberSubmit,
       onGotoRowNumberChanged: this.handleGotoRowSelectedRowNumberChanged,
       onClose: this.handleGotoRowClosed,
       onEntering: this.handleAnimationStart,
@@ -3205,7 +3342,13 @@ export class IrisGrid extends Component {
         this.handleAnimationStart();
         this.focus();
       },
-      onExited: this.handleAnimationEnd
+      onExited: this.handleAnimationEnd,
+      gotoValueSelectedColumnName: gotoValueSelectedColumnName,
+      gotoValue: gotoValue,
+      onGotoValueSelectedColumnNameChanged: this.handleGotoValueSelectedColumnNameChanged,
+      onGotoValueSelectedFilterChanged: this.handleGotoValueSelectedFilterChanged,
+      onGotoValueChanged: this.handleGotoValueChanged,
+      onGotoValueSubmit: this.handleGotoValueSubmitted
     }), /*#__PURE__*/React.createElement(PendingDataBottomBar, {
       error: pendingSaveError,
       isSaving: pendingSavePromise != null,