@deephaven/iris-grid 1.22.0 → 1.22.1-alpha-pivot-builder.0

package/dist/IrisGrid.js

@@ -42,6 +42,7 @@ import IrisGridModel from "./IrisGridModel.js";
 import { isPartitionedGridModel } from "./PartitionedGridModel.js";
 import IrisGridPartitionSelector from "./IrisGridPartitionSelector.js";
 import SelectDistinctBuilder from "./sidebar/SelectDistinctBuilder.js";
+import PluginTableOptionsErrorBoundary from "./sidebar/PluginTableOptionsErrorBoundary.js";
 import AdvancedSettingsType from "./sidebar/AdvancedSettingsType.js";
 import AdvancedSettingsMenu from "./sidebar/AdvancedSettingsMenu.js";
 import SHORTCUTS from "./IrisGridShortcuts.js";
@@ -49,7 +50,6 @@ import ConditionalFormattingMenu from "./sidebar/conditional-formatting/Conditio
 import ConditionalFormatEditor from "./sidebar/conditional-formatting/ConditionalFormatEditor.js";
 import IrisGridCellOverflowModal from "./IrisGridCellOverflowModal.js";
 import GotoRow from "./GotoRow.js";
-import AggregationOperation from "./sidebar/aggregations/AggregationOperation.js";
 import { IrisGridThemeContext } from "./IrisGridThemeProvider.js";
 import { isMissingPartitionError } from "./MissingPartitionError.js";
 import { NoPastePermissionModal } from "./NoPastePermissionModal.js";
@@ -80,6 +80,17 @@ function isEmptyConfig(_ref) {
   } = _ref;
   return advancedFilters.size === 0 && aggregationSettings.aggregations.length === 0 && customColumns.length === 0 && quickFilters.size === 0 && !reverse && rollupConfig == null && searchFilter == null && selectDistinctColumns.length === 0 && sorts.length === 0;
 }
+
+/**
+ * The subset of `IrisGridProps` that overrides how the grid presents its
+ * model: theme, canvas renderer, extra mouse handlers, and the metric
+ * calculator factory. Hosts that render `<IrisGrid>` on behalf of a plugin
+ * (e.g. `GridWidgetPlugin`) accept this as a single passthrough bag so they
+ * don't need to know each view concern by name, and plugins build it from
+ * their own hooks. Kept as a `Pick` (not `Partial<IrisGridProps>`) so it can
+ * never clobber structural props like `model` or `ref`.
+ */
+
 class IrisGrid extends Component {
   constructor(props) {
     var _model$layoutHints, _model$columns$0$name, _model$columns$;
@@ -117,6 +128,13 @@ class IrisGrid extends Component {
     _defineProperty(this, "tableUtils", void 0);
     _defineProperty(this, "keyHandlers", void 0);
     _defineProperty(this, "mouseHandlers", void 0);
+    /**
+     * The metric calculator factory most recently used to instantiate the
+     * calculator currently stored in state. Used by `maybeRebuildMetricCalculator`
+     * (called from `componentDidUpdate` when the `getMetricCalculator` prop
+     * changes) to detect when a different factory is supplied and rebuild.
+     */
+    _defineProperty(this, "lastMetricCalculatorFactory", void 0);
     _defineProperty(this, "slideTransitionRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "bottomTransitionRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "getAdvancedMenuOpenedHandler", memoize(column => this.handleAdvancedMenuOpened.bind(this, column), {
@@ -146,63 +164,72 @@ class IrisGrid extends Component {
         optionItems.push({
           type: OptionType.CHART_BUILDER,
           title: 'Chart Builder',
-          icon: dhGraphLineUp
+          icon: dhGraphLineUp,
+          order: 100
         });
       }
       if (isOrganizeColumnsAvailable) {
         optionItems.push({
           type: OptionType.VISIBILITY_ORDERING_BUILDER,
           title: 'Organize Columns',
-          icon: dhEye
+          icon: dhEye,
+          order: 200
         });
       }
       if (isFormatColumnsAvailable) {
         optionItems.push({
           type: OptionType.CONDITIONAL_FORMATTING,
           title: 'Conditional Formatting',
-          icon: vsEdit
+          icon: vsEdit,
+          order: 300
         });
       }
       if (isCustomColumnsAvailable) {
         optionItems.push({
           type: OptionType.CUSTOM_COLUMN_BUILDER,
           title: 'Custom Columns',
-          icon: vsSplitHorizontal
+          icon: vsSplitHorizontal,
+          order: 400
         });
       }
       if (isRollupAvailable) {
         optionItems.push({
           type: OptionType.ROLLUP_ROWS,
           title: 'Rollup Rows',
-          icon: dhTriangleDownSquare
+          icon: dhTriangleDownSquare,
+          order: 500
         });
       }
       if (isTotalsAvailable) {
         optionItems.push({
           type: OptionType.AGGREGATIONS,
           title: 'Aggregate Columns',
-          icon: vsSymbolOperator
+          icon: vsSymbolOperator,
+          order: 600
         });
       }
       if (isSelectDistinctAvailable) {
         optionItems.push({
           type: OptionType.SELECT_DISTINCT,
           title: 'Select Distinct Values',
-          icon: vsRuby
+          icon: vsRuby,
+          order: 700
         });
       }
       if (isExportAvailable && canDownloadCsv) {
         optionItems.push({
           type: OptionType.TABLE_EXPORTER,
           title: 'Download CSV',
-          icon: vsCloudDownload
+          icon: vsCloudDownload,
+          order: 800
         });
       }
       if (hasAdvancedSettings) {
         optionItems.push({
           type: OptionType.ADVANCED_SETTINGS,
           title: 'Advanced Settings',
-          icon: vsTools
+          icon: vsTools,
+          order: 900
         });
       }
       optionItems.push({
@@ -211,7 +238,8 @@ class IrisGrid extends Component {
         subtitle: toggleFilterBarAction.shortcut.getDisplayText(),
         icon: vsFilter,
         isOn: isFilterBarShown,
-        onChange: toggleFilterBarAction.action
+        onChange: toggleFilterBarAction.action,
+        order: 1000
       });
       if (canToggleSearch) {
         optionItems.push({
@@ -220,7 +248,8 @@ class IrisGrid extends Component {
           subtitle: toggleSearchBarAction.shortcut.getDisplayText(),
           icon: vsSearch,
           isOn: showSearchBar,
-          onChange: toggleSearchBarAction.action
+          onChange: toggleSearchBarAction.action,
+          order: 1100
         });
       }
       optionItems.push({
@@ -229,48 +258,80 @@ class IrisGrid extends Component {
         subtitle: toggleGotoRowAction.shortcut.getDisplayText(),
         icon: vsReply,
         isOn: showGotoRow,
-        onChange: toggleGotoRowAction.action
+        onChange: toggleGotoRowAction.action,
+        order: 1200
       });
       return Object.freeze(optionItems);
     }, {
       max: 1
     }));
+    /**
+     * Apply the `transformTableOptions` transform (if any) to the
+     * default option list.
+     * Catches exceptions so a buggy plugin can't break the grid,
+     * and warns about duplicate `type` collisions.
+     */
+    _defineProperty(this, "getCachedTransformedOptionItems", memoize((items, transformTableOptions) => {
+      if (transformTableOptions == null) {
+        return items;
+      }
+      var transformedItems;
+      try {
+        transformedItems = transformTableOptions(items);
+      } catch (err) {
+        log.error('transformTableOptions threw an error; falling back to defaults.', err);
+        return items;
+      }
+      // Stably sort by ascending `order`. Items without an `order` sink to
+      // the end of the menu (default `Infinity`), while items with an `order`
+      // are positioned by their weight. Decorate-sort-undecorate guarantees
+      // stability regardless of the engine's sort implementation.
+      var sortedItems = transformedItems.map((item, index) => ({
+        item,
+        index
+      })).sort((a, b) => {
+        var _a$item$order, _b$item$order;
+        return ((_a$item$order = a.item.order) !== null && _a$item$order !== void 0 ? _a$item$order : Infinity) - ((_b$item$order = b.item.order) !== null && _b$item$order !== void 0 ? _b$item$order : Infinity) || a.index - b.index;
+      }).map(_ref2 => {
+        var {
+          item
+        } = _ref2;
+        return item;
+      });
+      var keys = new Set();
+      for (var i = 0; i < sortedItems.length; i += 1) {
+        var key = String(sortedItems[i].type);
+        if (keys.has(key)) {
+          log.warn("transformTableOptions produced duplicate type \"".concat(key, "\"; ") + 'only the first entry will be accessible from the menu.');
+          break;
+        }
+        keys.add(key);
+      }
+      return Object.freeze(sortedItems);
+    }, {
+      max: 1
+    }));
     _defineProperty(this, "getCachedHiddenColumns", memoize((metricCalculator, userColumnWidths) => IrisGridUtils.getHiddenColumns(new Map([...metricCalculator.initialColumnWidths, ...userColumnWidths])), {
       max: 1
     }));
     _defineProperty(this, "getAggregationMap", memoize((columns, aggregations) => {
       var aggregationMap = {};
-      aggregations.forEach(_ref2 => {
+      aggregations.forEach(_ref3 => {
         var {
           operation,
           selected,
           invert
-        } = _ref2;
+        } = _ref3;
         aggregationMap[operation] = AggregationUtils.getOperationColumnNames(columns, operation, selected, invert);
       });
       return aggregationMap;
     }, {
       max: 1
     }));
-    _defineProperty(this, "getOperationMap", memoize((columns, aggregations) => {
-      var operationMap = {};
-      aggregations.filter(a => !AggregationUtils.isRollupOperation(a.operation)).forEach(_ref3 => {
-        var {
-          operation,
-          selected,
-          invert
-        } = _ref3;
-        AggregationUtils.getOperationColumnNames(columns, operation, selected, invert).forEach(name => {
-          var _operationMap$name;
-          var newOperations = [...((_operationMap$name = operationMap[name]) !== null && _operationMap$name !== void 0 ? _operationMap$name : []), operation];
-          operationMap[name] = Object.freeze(newOperations);
-        });
-      });
-      return operationMap;
-    }, {
+    _defineProperty(this, "getOperationMap", memoize((columns, aggregations) => IrisGridUtils.getOperationMap(columns, aggregations), {
       max: 1
     }));
-    _defineProperty(this, "getOperationOrder", memoize(aggregations => aggregations.map(a => a.operation).filter(o => !AggregationUtils.isRollupOperation(o)), {
+    _defineProperty(this, "getOperationOrder", memoize(aggregations => IrisGridUtils.getOperationOrder(aggregations), {
       max: 1
     }));
     _defineProperty(this, "getCachedFormatColumns", memoize((dh, columns, rules) => getFormatColumns(dh, columns, rules), {
@@ -298,28 +359,7 @@ class IrisGrid extends Component {
     _defineProperty(this, "getModelRollupConfig", memoize((originalColumns, config, aggregationSettings) => IrisGridUtils.getModelRollupConfig(originalColumns, config, aggregationSettings), {
       max: 1
     }));
-    _defineProperty(this, "getModelTotalsConfig", memoize((columns, config, aggregationSettings) => {
-      var _config$columns$lengt, _config$columns;
-      if (((_config$columns$lengt = config === null || config === void 0 || (_config$columns = config.columns) === null || _config$columns === void 0 ? void 0 : _config$columns.length) !== null && _config$columns$lengt !== void 0 ? _config$columns$lengt : 0) > 0) {
-        // If we've got rollups, then aggregations are applied as part of that...
-        return null;
-      }
-
-      // Filter out aggregations without any columns actually selected
-      var aggregations = aggregationSettings.aggregations.filter(agg => agg.selected.length > 0 || agg.invert);
-      if (aggregations.length === 0) {
-        // We don't actually have any aggregations set, don't bother
-        return null;
-      }
-      var operationMap = this.getOperationMap(columns, aggregations);
-      var operationOrder = this.getOperationOrder(aggregations);
-      return {
-        operationMap,
-        operationOrder,
-        showOnTop: aggregationSettings.showOnTop,
-        defaultOperation: AggregationOperation.SKIP
-      };
-    }, {
+    _defineProperty(this, "getModelTotalsConfig", memoize((columns, config, aggregationSettings) => IrisGridUtils.getModelTotalsConfig(columns, config, aggregationSettings), {
       max: 1
     }));
     _defineProperty(this, "getCachedStateOverride", memoize((model, theme, hoverSelectColumn, isFilterBarShown, isSelectingColumn, loadingScrimProgress, quickFilters, advancedFilters, sorts, reverse, rollupConfig, isMenuShown) => ({
@@ -372,7 +412,7 @@ class IrisGrid extends Component {
     _defineProperty(this, "getCachedKeyHandlers", memoize(keyHandlers => [...keyHandlers, ...this.keyHandlers].sort((a, b) => a.order - b.order), {
       max: 1
     }));
-    _defineProperty(this, "getCachedMouseHandlers", memoize(mouseHandlers => [...mouseHandlers, ...this.mouseHandlers].map(handler => typeof handler === 'function' ? handler(this) : handler), {
+    _defineProperty(this, "getCachedMouseHandlers", memoize(mouseHandlersProp => [...mouseHandlersProp, ...this.mouseHandlers].map(handler => typeof handler === 'function' ? handler(this) : handler), {
       max: 1
     }));
     _defineProperty(this, "getCachedRenderer", memoize(rendererProp => rendererProp !== null && rendererProp !== void 0 ? rendererProp : new IrisGridRenderer(), {
@@ -571,11 +611,14 @@ class IrisGrid extends Component {
     this.handleMenuSelect = this.handleMenuSelect.bind(this);
     this.handleMenuBack = this.handleMenuBack.bind(this);
     this.handleRequestFailed = this.handleRequestFailed.bind(this);
+    this.handlePending = this.handlePending.bind(this);
+    this.handlePendingCleared = this.handlePendingCleared.bind(this);
     this.handleSelectionChanged = this.handleSelectionChanged.bind(this);
     this.handleMovedColumnsChanged = this.handleMovedColumnsChanged.bind(this);
     this.handleHeaderGroupsChanged = this.handleHeaderGroupsChanged.bind(this);
     this.handleUpdate = this.handleUpdate.bind(this);
     this.handleTableChanged = this.handleTableChanged.bind(this);
+    this.handleModelChanged = this.handleModelChanged.bind(this);
     this.handleTooltipRef = this.handleTooltipRef.bind(this);
     this.handleViewChanged = this.handleViewChanged.bind(this);
     this.handleFormatSelection = this.handleFormatSelection.bind(this);
@@ -702,23 +745,27 @@ class IrisGrid extends Component {
       dh: _dh
     } = _model;
     var _keyHandlers = [new CopyCellKeyHandler(this), new ReverseKeyHandler(this), new ClearFilterKeyHandler(this)];
-    var _mouseHandlers = [new IrisGridCellOverflowMouseHandler(this), new IrisGridRowTreeMouseHandler(this), new IrisGridTokenMouseHandler(this), new IrisGridColumnSelectMouseHandler(this), new IrisGridColumnTooltipMouseHandler(this), new IrisGridSortMouseHandler(this), new IrisGridFilterMouseHandler(this), new IrisGridContextMenuHandler(this, _dh), new IrisGridDataSelectMouseHandler(this), new PendingMouseHandler(this), new IrisGridPartitionedTableMouseHandler(this), ...(canCopy ? [new IrisGridCopyCellMouseHandler(this)] : [])];
+    var mouseHandlers = [new IrisGridCellOverflowMouseHandler(this), new IrisGridRowTreeMouseHandler(this), new IrisGridTokenMouseHandler(this), new IrisGridColumnSelectMouseHandler(this), new IrisGridColumnTooltipMouseHandler(this), new IrisGridSortMouseHandler(this), new IrisGridFilterMouseHandler(this), new IrisGridContextMenuHandler(this, _dh), new IrisGridDataSelectMouseHandler(this), new PendingMouseHandler(this), new IrisGridPartitionedTableMouseHandler(this), ...(canCopy ? [new IrisGridCopyCellMouseHandler(this)] : [])];
     if (canCopy) {
       _keyHandlers.push(new CopyKeyHandler(this));
     }
     var _movedColumns = movedColumnsProp.length > 0 ? movedColumnsProp : _model.initialMovedColumns;
     var movedRows = movedRowsProp.length > 0 ? movedRowsProp : _model.initialMovedRows;
-    var _metricCalculator = getMetricCalculator({
+    var metricCalculatorFactory = getMetricCalculator;
+    var _metricCalculator = metricCalculatorFactory({
       userColumnWidths: new Map(_userColumnWidths),
       userColumnWidthsByName: userColumnWidthsByName != null ? new Map(userColumnWidthsByName) : undefined,
       userRowHeights: new Map(userRowHeights),
       movedColumns: _movedColumns,
       initialColumnWidths: new Map(_model === null || _model === void 0 || (_model$layoutHints = _model.layoutHints) === null || _model$layoutHints === void 0 || (_model$layoutHints = _model$layoutHints.hiddenColumns) === null || _model$layoutHints === void 0 ? void 0 : _model$layoutHints.map(name => [_model.getColumnIndexByName(name), 0]))
     });
+    // Remember the factory we used so we can detect a model-driven swap
+    // (e.g. pivot-builder's proxy swapping its inner model) on COLUMNS_CHANGED.
+    this.lastMetricCalculatorFactory = metricCalculatorFactory;
     var searchColumns = _selectedSearchColumns !== null && _selectedSearchColumns !== void 0 ? _selectedSearchColumns : [];
     var _searchFilter = CrossColumnSearch.createSearchFilter(_dh, _searchValue, searchColumns, _model.columns, _invertSearchColumns);
     this.tableUtils = new TableUtils(_dh);
-    this.mouseHandlers = _mouseHandlers;
+    this.mouseHandlers = mouseHandlers;
     this.keyHandlers = _keyHandlers;
     this.state = {
       isFilterBarShown: _isFilterBarShown,
@@ -823,12 +870,24 @@ class IrisGrid extends Component {
       settings,
       model,
       customFilters,
-      sorts
+      sorts,
+      getMetricCalculator
     } = this.props;
     if (model !== prevProps.model) {
       this.stopListening(prevProps.model);
       this.startListening(model);
     }
+
+    // The renderer and mouse handlers flow through memoized getters in
+    // render(), so a `renderer` / `mouseHandlers` prop change naturally
+    // propagates on the next render. The metric calculator, however, lives in
+    // component state, so mirror that path when the `getMetricCalculator` prop
+    // changes (e.g. the pivot-builder middleware swapping the pivot factory in
+    // or out) so the calculator stays in sync. Moved columns are not touched
+    // here — a model swap resets them via `handleModelChanged`.
+    if (getMetricCalculator !== prevProps.getMetricCalculator) {
+      this.maybeRebuildMetricCalculator();
+    }
     var changedInputFilters = inputFilters !== prevProps.inputFilters ? inputFilters.filter(inputFilter => !prevProps.inputFilters.includes(inputFilter)) : [];
     if (changedInputFilters.length > 0) {
       var _advancedSettings$get;
@@ -1764,18 +1823,24 @@ class IrisGrid extends Component {
   startListening(model) {
     model.addEventListener(IrisGridModel.EVENT.UPDATED, this.handleUpdate);
     model.addEventListener(IrisGridModel.EVENT.REQUEST_FAILED, this.handleRequestFailed);
+    model.addEventListener(IrisGridModel.EVENT.PENDING, this.handlePending);
+    model.addEventListener(IrisGridModel.EVENT.PENDING_CLEARED, this.handlePendingCleared);
     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);
     model.addEventListener(IrisGridModel.EVENT.TABLE_CHANGED, this.handleTableChanged);
+    model.addEventListener(IrisGridModel.EVENT.MODEL_CHANGED, this.handleModelChanged);
   }
   stopListening(model) {
     model.removeEventListener(IrisGridModel.EVENT.UPDATED, this.handleUpdate);
     model.removeEventListener(IrisGridModel.EVENT.REQUEST_FAILED, this.handleRequestFailed);
+    model.removeEventListener(IrisGridModel.EVENT.PENDING, this.handlePending);
+    model.removeEventListener(IrisGridModel.EVENT.PENDING_CLEARED, this.handlePendingCleared);
     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);
     model.removeEventListener(IrisGridModel.EVENT.TABLE_CHANGED, this.handleTableChanged);
+    model.removeEventListener(IrisGridModel.EVENT.MODEL_CHANGED, this.handleModelChanged);
   }
   focus() {
     var _this$grid3;
@@ -2619,6 +2684,37 @@ class IrisGrid extends Component {
       onError(new Error("Error displaying table: ".concat(error)));
     }
   }
+
+  /**
+   * Raise the loading scrim in response to a model-driven `PENDING` event. The
+   * model is the start signal, mirroring how `UPDATED`/`COLUMNS_CHANGED` are
+   * already the model-driven stop signal. Idempotent: the first message within
+   * a commit wins (the `loadingScrimStartTime == null` guard collapses multiple
+   * pending operations into a single scrim).
+   */
+  handlePending(event) {
+    var {
+      detail
+    } = event;
+    var {
+      text,
+      options
+    } = detail !== null && detail !== void 0 ? detail : {};
+    if (this.loadingScrimStartTime == null) {
+      this.startLoading(text !== null && text !== void 0 ? text : 'Loading...', _objectSpread({
+        loadingCancelShown: false
+      }, options));
+    }
+  }
+
+  /**
+   * Clear the loading scrim in response to a model-driven `PENDING_CLEARED`
+   * event. Only needed for operations that do not naturally end in
+   * `UPDATED`/`COLUMNS_CHANGED`/`REQUEST_FAILED`.
+   */
+  handlePendingCleared() {
+    this.stopLoading();
+  }
   handleUpdate() {
     var _this$grid18;
     log.debug2('Received model update');
@@ -2656,10 +2752,6 @@ class IrisGrid extends Component {
     var {
       model
     } = this.props;
-    // movedColumns reset triggers metricCalculator update in the Grid component
-    this.setState({
-      movedColumns: model.initialMovedColumns
-    });
     // For partitioned tables, we want to rebuild filters on table change to ensure filters are applied to the new partition
     var {
       partitionConfig
@@ -2668,6 +2760,24 @@ class IrisGrid extends Component {
       this.rebuildFilters();
     }
   }
+
+  /**
+   * Handle an inner-model swap on a proxy model (`MODEL_CHANGED`). The previous
+   * model's `movedColumns` reference indices that may not exist in the new
+   * model (e.g. a pivot exposes a different column set), so reset them to the
+   * new model's initial order. The metric calculator is rebuilt separately when
+   * the `getMetricCalculator` prop changes (see `componentDidUpdate`); a calc
+   * whose seed `movedColumns` are now stale self-heals because `getMetrics`
+   * reconciles against the grid's current `movedColumns` at draw time.
+   */
+  handleModelChanged() {
+    var {
+      model
+    } = this.props;
+    this.setState({
+      movedColumns: model.initialMovedColumns
+    });
+  }
   handleViewChanged(metrics) {
     var _this$grid$state, _this$grid19;
     var {
@@ -2896,6 +3006,56 @@ class IrisGrid extends Component {
       this.loadTableState();
     }
   }
+
+  /**
+   * Rebuild the metric calculator when the `getMetricCalculator` prop swaps for
+   * a different factory (e.g. entering or leaving a pivot, where the
+   * pivot-builder middleware flips the prop). The renderer and mouse handlers
+   * are recomputed via their memoized getters on the next render and do not
+   * need explicit handling here.
+   *
+   * User column-widths / row-heights from the previous calculator are not
+   * carried over: a factory swap means the column set has effectively changed,
+   * so the stored sizes wouldn't map to anything meaningful.
+   *
+   * Moved columns are NOT reset here — that is owned by `handleModelChanged`
+   * (the `MODEL_CHANGED` event) so that a plain prop swap against the same
+   * model preserves the user's layout. The new calculator is seeded with the
+   * current moved columns; `getMetrics` reconciles against the grid's live
+   * `movedColumns` at draw time, so a later reset stays consistent.
+   */
+  maybeRebuildMetricCalculator() {
+    var _model$layoutHints4;
+    var {
+      getMetricCalculator
+    } = this.props;
+    var factory = getMetricCalculator;
+    if (factory === this.lastMetricCalculatorFactory) return;
+    var {
+      model
+    } = this.props;
+    var {
+      movedColumns
+    } = this.state;
+    var next = factory({
+      userColumnWidths: new Map(),
+      userRowHeights: new Map(),
+      movedColumns,
+      initialColumnWidths: new Map(model === null || model === void 0 || (_model$layoutHints4 = model.layoutHints) === null || _model$layoutHints4 === void 0 || (_model$layoutHints4 = _model$layoutHints4.hiddenColumns) === null || _model$layoutHints4 === void 0 ? void 0 : _model$layoutHints4.map(name => [model.getColumnIndexByName(name), 0]))
+    });
+    this.lastMetricCalculatorFactory = factory;
+    log.debug('Swapping metric calculator', next);
+    // Also push the new calculator onto the Grid synchronously so any
+    // immediately-following read of `Grid.metricCalculator` (before React has
+    // committed the setState below) uses the new instance against the new
+    // model rather than invoking the old calculator and potentially throwing.
+    if (this.grid != null) {
+      this.grid.metricCalculator = next;
+    }
+    this.setState({
+      metricCalculator: next
+    });
+  }
   handlePendingCommitClicked() {
     return this.commitPending();
   }
@@ -3672,7 +3832,8 @@ class IrisGrid extends Component {
       advancedSettings,
       onAdvancedSettingsChange,
       canDownloadCsv,
-      onCreateChart
+      onCreateChart,
+      transformTableOptions
     } = this.props;
     var {
       metricCalculator,
@@ -3953,7 +4114,8 @@ class IrisGrid extends Component {
         if (_loop3()) continue;
       }
     }
-    var optionItems = this.getCachedOptionItems(onCreateChart !== undefined && model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isOrganizeColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable || isRollup, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable(), isGotoShown, advancedSettings.size > 0);
+    var defaultOptionItems = this.getCachedOptionItems(onCreateChart !== undefined && model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isOrganizeColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable || isRollup, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable(), isGotoShown, advancedSettings.size > 0);
+    var optionItems = this.getCachedTransformedOptionItems(defaultOptionItems, transformTableOptions);
     var hiddenColumns = this.getCachedHiddenColumns(metricCalculator, userColumnWidths);
     var openOptionsStack = openOptions.map(option => {
       switch (option.type) {
@@ -4048,7 +4210,25 @@ class IrisGrid extends Component {
             onChange: onAdvancedSettingsChange
           });
         default:
-          throw Error("Unexpected option type ".concat(option.type));
+          {
+            // Plugin-contributed items render their own page via
+            // `configPage`. The page is isolated inside an error
+            // boundary so a throwing plugin doesn't tear down the
+            // entire grid subtree. Built-in items that hit the default
+            // case indicate a programmer error (unhandled enum case).
+            var PluginPage = option.configPage;
+            if (PluginPage == null) {
+              throw Error("Unexpected option type ".concat(option.type));
+            }
+            return /*#__PURE__*/_jsx(PluginTableOptionsErrorBoundary, {
+              itemType: String(option.type),
+              onBack: this.handleMenuBack,
+              children: /*#__PURE__*/_jsx(PluginPage, {
+                model: model,
+                onBack: this.handleMenuBack
+              })
+            }, String(option.type));
+          }
       }
     });
     return /*#__PURE__*/_jsxs("div", {
@@ -4238,7 +4418,7 @@ class IrisGrid extends Component {
         unmountOnExit: true,
         children: /*#__PURE__*/_jsx("div", {
           className: "table-sidebar",
-          children: /*#__PURE__*/_jsxs(Stack, {
+          children: /*#__PURE__*/_jsx(Stack, {
             children: [/*#__PURE__*/_jsx(Page, {
               title: "Table Options",
               onClose: this.handleMenuClose,
@@ -4246,7 +4426,7 @@ class IrisGrid extends Component {
                 onSelect: i => this.handleMenuSelect(optionItems[i]),
                 items: optionItems
               })
-            }), openOptionsStack.map((option, i) => /*#__PURE__*/_jsx(Page, {
+            }, "table-options"), ...openOptionsStack.map((option, i) => /*#__PURE__*/_jsx(Page, {
               title: openOptions[i].title,
               onBack: this.handleMenuBack,
               onClose: this.handleMenuClose,