@deephaven/iris-grid 0.72.1-xcomponent.2 → 0.73.0

package/dist/IrisGrid.js

@@ -57,6 +57,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var log = Log.module('IrisGrid');
+var VIEWPORT_LOADING_DELAY = 500;
 var UPDATE_DOWNLOAD_THROTTLE = 500;
 var SET_FILTER_DEBOUNCE = 250;
 var SEEK_ROW_DEBOUNCE = 250;
@@ -349,6 +350,25 @@ class IrisGrid extends Component {
         searchFilter
       });
     }, SET_FILTER_DEBOUNCE));
+    _defineProperty(this, "showViewportLoading", throttle(() => {
+      var {
+        model
+      } = this.props;
+      var {
+        loadingSpinnerShown
+      } = this.state;
+      if (model.isViewportPending && !loadingSpinnerShown) {
+        // We only want to show the viewport loading if the viewport is still loading
+        // and we're not already showing a loader for something else
+        this.startLoading('Waiting for viewport...', {
+          loadingCancelShown: false,
+          loadingBlocksGrid: false
+        });
+      }
+    }, VIEWPORT_LOADING_DELAY, {
+      leading: false,
+      trailing: true
+    }));
     _defineProperty(this, "handleConditionalFormatEditorUpdate", debounce(conditionalFormatPreview => {
       this.setState({
         conditionalFormatPreview
@@ -504,6 +524,7 @@ class IrisGrid extends Component {
     this.handleCustomColumnsChanged = this.handleCustomColumnsChanged.bind(this);
     this.handleSelectDistinctChanged = this.handleSelectDistinctChanged.bind(this);
     this.handlePendingDataUpdated = this.handlePendingDataUpdated.bind(this);
+    this.handleViewportUpdated = this.handleViewportUpdated.bind(this);
     this.handlePendingCommitClicked = this.handlePendingCommitClicked.bind(this);
     this.handlePendingDiscardClicked = this.handlePendingDiscardClicked.bind(this);
     this.handleGotoRowSelectedRowNumberSubmit = this.handleGotoRowSelectedRowNumberSubmit.bind(this);
@@ -525,6 +546,7 @@ class IrisGrid extends Component {
     this.handleGotoValueSelectedFilterChanged = this.handleGotoValueSelectedFilterChanged.bind(this);
     this.handleGotoValueChanged = this.handleGotoValueChanged.bind(this);
     this.handleGotoValueSubmitted = this.handleGotoValueSubmitted.bind(this);
+    this.handleViewportUpdated = this.handleViewportUpdated.bind(this);
     this.makeQuickFilter = this.makeQuickFilter.bind(this);
     this.grid = null;
     this.lastLoadedConfig = null;
@@ -655,6 +677,8 @@ class IrisGrid extends Component {
       loadingText: null,
       loadingScrimProgress: null,
       loadingSpinnerShown: false,
+      loadingCancelShown: false,
+      loadingBlocksGrid: false,
       movedColumns: _movedColumns,
       movedRows,
       shownColumnTooltip: null,
@@ -737,7 +761,9 @@ class IrisGrid extends Component {
         this.clearGridInputField();
         this.clearCrossColumSearch();
       }
-      this.startLoading('Filtering...', true);
+      this.startLoading('Filtering...', {
+        resetRanges: true
+      });
       this.applyInputFilters(changedInputFilters, replaceExistingFilters);
     }
     if (isSelectingColumn !== prevProps.isSelectingColumn) {
@@ -747,7 +773,9 @@ class IrisGrid extends Component {
       this.updateFormatterSettings(settings);
     }
     if (customFilters !== prevProps.customFilters) {
-      this.startLoading('Filtering...', true);
+      this.startLoading('Filtering...', {
+        resetRanges: true
+      });
     }
     if (sorts !== prevProps.sorts) {
       this.updateSorts(sorts);
@@ -802,6 +830,7 @@ class IrisGrid extends Component {
     if (this.animationFrame !== undefined) {
       cancelAnimationFrame(this.animationFrame);
     }
+    this.showViewportLoading.cancel();
   }
 
   // When the loading scrim started/when it should extend to the end of the screen.
@@ -997,7 +1026,9 @@ class IrisGrid extends Component {
   }
   setAdvancedFilter(modelIndex, filter, options) {
     log.debug('Setting advanced filter', modelIndex, filter);
-    this.startLoading('Filtering...', true);
+    this.startLoading('Filtering...', {
+      resetRanges: true
+    });
     this.setState(_ref7 => {
       var {
         advancedFilters
@@ -1025,7 +1056,9 @@ class IrisGrid extends Component {
    */
   setQuickFilter(modelIndex, filter, text) {
     log.debug('Setting quick filter', modelIndex, filter, text);
-    this.startLoading('Filtering...', true);
+    this.startLoading('Filtering...', {
+      resetRanges: true
+    });
     this.setState(_ref8 => {
       var {
         quickFilters
@@ -1081,7 +1114,9 @@ class IrisGrid extends Component {
     });
   }
   removeColumnFilter(modelRange) {
-    this.startLoading('Filtering...', true);
+    this.startLoading('Filtering...', {
+      resetRanges: true
+    });
     var clearRange = Array.isArray(modelRange) ? modelRange : [modelRange, modelRange];
     this.setState(_ref10 => {
       var {
@@ -1107,7 +1142,9 @@ class IrisGrid extends Component {
     });
   }
   removeQuickFilter(modelColumn) {
-    this.startLoading('Clearing Filter...', true);
+    this.startLoading('Clearing Filter...', {
+      resetRanges: true
+    });
     this.setState(_ref11 => {
       var {
         quickFilters
@@ -1132,7 +1169,9 @@ class IrisGrid extends Component {
 
     // if there is an active quick filter input field, reset it as well
     this.clearGridInputField();
-    this.startLoading('Clearing Filters...', true);
+    this.startLoading('Clearing Filters...', {
+      resetRanges: true
+    });
     this.setState({
       quickFilters: new Map(),
       advancedFilters: new Map(),
@@ -1192,7 +1231,9 @@ class IrisGrid extends Component {
         filter: this.makeQuickFilter(column, text, formatter.timeZone)
       });
     });
-    this.startLoading('Rebuilding filters...', true);
+    this.startLoading('Rebuilding filters...', {
+      resetRanges: true
+    });
     this.setState({
       quickFilters: newQuickFilters,
       advancedFilters: newAdvancedFilters
@@ -1452,9 +1493,15 @@ class IrisGrid extends Component {
     }
   }
   startLoading(loadingText) {
-    var resetRanges = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var {
+      resetRanges = false,
+      loadingCancelShown = true,
+      loadingBlocksGrid = true
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this.setState({
-      loadingText
+      loadingText,
+      loadingCancelShown,
+      loadingBlocksGrid
     });
     var theme = this.getTheme();
     if (resetRanges && this.grid) {
@@ -1486,12 +1533,14 @@ class IrisGrid extends Component {
     }
   }
   stopLoading() {
+    this.showViewportLoading.cancel();
     this.loadingScrimStartTime = undefined;
     this.loadingScrimFinishTime = undefined;
     this.setState({
       loadingText: null,
       loadingScrimProgress: null,
-      loadingSpinnerShown: false
+      loadingSpinnerShown: false,
+      loadingCancelShown: false
     });
     if (this.loadingTimer != null) {
       clearTimeout(this.loadingTimer);
@@ -1555,12 +1604,14 @@ class IrisGrid extends Component {
     model.addEventListener(IrisGridModel.EVENT.REQUEST_FAILED, this.handleRequestFailed);
     model.addEventListener(IrisGridModel.EVENT.COLUMNS_CHANGED, this.handleCustomColumnsChanged);
     model.addEventListener(IrisGridModel.EVENT.PENDING_DATA_UPDATED, this.handlePendingDataUpdated);
+    model.addEventListener(IrisGridModel.EVENT.VIEWPORT_UPDATED, this.handleViewportUpdated);
   }
   stopListening(model) {
     model.removeEventListener(IrisGridModel.EVENT.UPDATED, this.handleUpdate);
     model.removeEventListener(IrisGridModel.EVENT.REQUEST_FAILED, this.handleRequestFailed);
     model.removeEventListener(IrisGridModel.EVENT.COLUMNS_CHANGED, this.handleCustomColumnsChanged);
     model.removeEventListener(IrisGridModel.EVENT.PENDING_DATA_UPDATED, this.handlePendingDataUpdated);
+    model.removeEventListener(IrisGridModel.EVENT.VIEWPORT_UPDATED, this.handleViewportUpdated);
   }
   focus() {
     var _this$grid2;
@@ -1752,6 +1803,24 @@ class IrisGrid extends Component {
     } = this.props;
     onError(error);
   }
+  handleViewportUpdated() {
+    var {
+      model
+    } = this.props;
+    var {
+      loadingText,
+      loadingSpinnerShown
+    } = this.state;
+    var loadingMessage = 'Waiting for viewport...';
+
+    // pending and no timer already exists
+    if (model.isViewportPending && !loadingSpinnerShown) {
+      this.showViewportLoading();
+    } else if (loadingText === loadingMessage && !model.isViewportPending) {
+      // extra conditions because timeout might get cleared by update
+      this.stopLoading();
+    }
+  }
   showAllColumns() {
     var _this$grid9;
     var {
@@ -2179,7 +2248,9 @@ class IrisGrid extends Component {
     });
   }
   handleFilterBarChange(value) {
-    this.startLoading('Filtering...', true);
+    this.startLoading('Filtering...', {
+      resetRanges: true
+    });
     this.setState(_ref13 => {
       var {
         focusedFilterBarColumn,
@@ -2286,14 +2357,18 @@ class IrisGrid extends Component {
     } = this.state;
     if (isMissingPartitionError(error) && partitionConfig != null) {
       // We'll try loading the initial partition again
-      this.startLoading('Reloading partition...', true);
+      this.startLoading('Reloading partition...', {
+        resetRanges: true
+      });
       this.setState({
         partitionConfig: undefined
       }, () => {
         this.initState();
       });
     } else if (this.canRollback()) {
-      this.startLoading('Rolling back changes...', true);
+      this.startLoading('Rolling back changes...', {
+        resetRanges: true
+      });
       this.rollback();
     } else {
       log.error('Table failed and unable to rollback');
@@ -3164,6 +3239,8 @@ class IrisGrid extends Component {
       loadingText,
       loadingScrimProgress,
       loadingSpinnerShown,
+      loadingCancelShown,
+      loadingBlocksGrid,
       shownColumnTooltip,
       hoverAdvancedFilter,
       shownAdvancedFilter,
@@ -3305,7 +3382,7 @@ class IrisGrid extends Component {
           type: "button",
           onClick: this.handleCancel,
           className: classNames('iris-grid-btn-cancel', {
-            show: loadingSpinnerShown
+            show: loadingCancelShown
           }),
           children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
             icon: vsClose,
@@ -3316,9 +3393,9 @@ class IrisGrid extends Component {
       var _gridY = metrics ? metrics.gridY : 0;
       loadingElement = /*#__PURE__*/_jsx("div", {
         className: "iris-grid-loading",
-        style: {
+        style: loadingBlocksGrid ? {
           top: _gridY
-        },
+        } : {},
         children: loadingStatus
       });
     }