@deephaven/iris-grid 0.85.40 → 0.85.41

package/dist/IrisGrid.js

@@ -1738,7 +1738,7 @@ class IrisGrid extends Component {
       columnCount
     } = model;
     var modelColumn = GridUtils.getModelIndex(column, movedColumns);
-    if (column == null || column < 0 || columnCount <= column || !model.isFilterable(modelColumn)) {
+    if (column == null || columnCount <= column || !model.isFilterable(modelColumn)) {
       this.setState({
         focusedFilterBarColumn: null
       });
@@ -1749,23 +1749,13 @@ class IrisGrid extends Component {
       metrics
     } = this.state;
     assertNotNull(metrics);
-    var {
-      left,
-      rightVisible,
-      lastLeft
-    } = metrics;
-    if (column < left) {
+    var metricState = this.getMetricState();
+    assertNotNull(metricState);
+    var scrollColumn = metricCalculator.getScrollLeftForColumn(column, metricState, metrics);
+    if (scrollColumn != null) {
       var _this$grid4;
       (_this$grid4 = this.grid) === null || _this$grid4 === void 0 ? void 0 : _this$grid4.setViewState({
-        left: column
-      }, true);
-    } else if (rightVisible < column) {
-      var _this$grid5;
-      var metricState = this.getMetricState();
-      assertNotNull(metricState);
-      var newLeft = metricCalculator.getLastLeft(metricState, column, metricCalculator.getVisibleWidth(metricState));
-      (_this$grid5 = this.grid) === null || _this$grid5 === void 0 ? void 0 : _this$grid5.setViewState({
-        left: Math.min(newLeft, lastLeft),
+        left: scrollColumn,
         leftOffset: 0
       }, true);
     }
@@ -1776,13 +1766,13 @@ class IrisGrid extends Component {
     });
   }
   hideColumnByVisibleIndex(columnVisibleIndex) {
-    var _this$grid6;
+    var _this$grid5;
     var {
       metricCalculator,
       movedColumns
     } = this.state;
     metricCalculator.setColumnWidth(GridUtils.getModelIndex(columnVisibleIndex, movedColumns), 0);
-    (_this$grid6 = this.grid) === null || _this$grid6 === void 0 ? void 0 : _this$grid6.forceUpdate();
+    (_this$grid5 = this.grid) === null || _this$grid5 === void 0 ? void 0 : _this$grid5.forceUpdate();
   }
   freezeColumnByColumnName(columnName) {
     var {
@@ -1854,7 +1844,7 @@ class IrisGrid extends Component {
     }
   }
   handleColumnVisibilityChanged(modelIndexes, isVisible) {
-    var _this$grid7;
+    var _this$grid6;
     var {
       metricCalculator,
       metrics
@@ -1875,7 +1865,7 @@ class IrisGrid extends Component {
         metricCalculator.setColumnWidth(modelIndex, 0);
       });
     }
-    (_this$grid7 = this.grid) === null || _this$grid7 === void 0 ? void 0 : _this$grid7.forceUpdate();
+    (_this$grid6 = this.grid) === null || _this$grid6 === void 0 ? void 0 : _this$grid6.forceUpdate();
   }
   handleColumnVisibilityReset() {
     var _model$layoutHints$fr, _model$layoutHints2;
@@ -1905,8 +1895,8 @@ class IrisGrid extends Component {
     });
   }
   handleAnimationLoop() {
-    var _this$grid8;
-    (_this$grid8 = this.grid) === null || _this$grid8 === void 0 ? void 0 : _this$grid8.updateCanvas();
+    var _this$grid7;
+    (_this$grid7 = this.grid) === null || _this$grid7 === void 0 ? void 0 : _this$grid7.updateCanvas();
     if (this.isAnimating) {
       this.animationFrame = requestAnimationFrame(this.handleAnimationLoop);
     }
@@ -1960,7 +1950,7 @@ class IrisGrid extends Component {
     }
   }
   showAllColumns() {
-    var _this$grid9;
+    var _this$grid8;
     var {
       metricCalculator
     } = this.state;
@@ -1972,7 +1962,7 @@ class IrisGrid extends Component {
         metricCalculator.resetColumnWidth(modelIndex);
       }
     }
-    (_this$grid9 = this.grid) === null || _this$grid9 === void 0 ? void 0 : _this$grid9.forceUpdate();
+    (_this$grid8 = this.grid) === null || _this$grid8 === void 0 ? void 0 : _this$grid8.forceUpdate();
   }
 
   /**
@@ -1980,9 +1970,9 @@ class IrisGrid extends Component {
    * to keep Grid and IrisGrid metrics in sync since metrics are stored in both places.
    */
   updateMetrics() {
-    var _this$grid10;
+    var _this$grid9;
     this.setState({
-      metrics: (_this$grid10 = this.grid) === null || _this$grid10 === void 0 ? void 0 : _this$grid10.updateMetrics()
+      metrics: (_this$grid9 = this.grid) === null || _this$grid9 === void 0 ? void 0 : _this$grid9.updateMetrics()
     });
   }
   toggleSort(columnIndex, addToExisting) {
@@ -2003,15 +1993,15 @@ class IrisGrid extends Component {
     }
   }
   updateSorts(sorts) {
-    var _this$grid11;
+    var _this$grid10;
     this.startLoading('Sorting...');
     this.setState({
       sorts
     });
-    (_this$grid11 = this.grid) === null || _this$grid11 === void 0 ? void 0 : _this$grid11.forceUpdate();
+    (_this$grid10 = this.grid) === null || _this$grid10 === void 0 ? void 0 : _this$grid10.forceUpdate();
   }
   sortColumn(modelColumn) {
-    var _this$grid12;
+    var _this$grid11;
     var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TableUtils.sortDirection.none;
     var isAbs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var addToExisting = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -2024,15 +2014,15 @@ class IrisGrid extends Component {
     this.setState({
       sorts
     });
-    (_this$grid12 = this.grid) === null || _this$grid12 === void 0 ? void 0 : _this$grid12.forceUpdate();
+    (_this$grid11 = this.grid) === null || _this$grid11 === void 0 ? void 0 : _this$grid11.forceUpdate();
   }
   reverse(reverse) {
-    var _this$grid13;
+    var _this$grid12;
     this.startLoading('Reversing...');
     this.setState({
       reverse
     });
-    (_this$grid13 = this.grid) === null || _this$grid13 === void 0 ? void 0 : _this$grid13.forceUpdate();
+    (_this$grid12 = this.grid) === null || _this$grid12 === void 0 ? void 0 : _this$grid12.forceUpdate();
   }
   isReversible() {
     var {
@@ -2073,8 +2063,8 @@ class IrisGrid extends Component {
         this.focusFilterBar(columnIndex);
       }
     } else {
-      var _this$grid14;
-      (_this$grid14 = this.grid) === null || _this$grid14 === void 0 ? void 0 : _this$grid14.focus();
+      var _this$grid13;
+      (_this$grid13 = this.grid) === null || _this$grid13 === void 0 ? void 0 : _this$grid13.focus();
     }
   }
   isTableSearchAvailable() {
@@ -2111,13 +2101,13 @@ class IrisGrid extends Component {
         var _this$crossColumnRef2;
         (_this$crossColumnRef2 = this.crossColumnRef) === null || _this$crossColumnRef2 === void 0 ? void 0 : _this$crossColumnRef2.current.focus();
       } else {
-        var _this$grid15;
-        (_this$grid15 = this.grid) === null || _this$grid15 === void 0 ? void 0 : _this$grid15.focus();
+        var _this$grid14;
+        (_this$grid14 = this.grid) === null || _this$grid14 === void 0 ? void 0 : _this$grid14.focus();
       }
     });
   }
   toggleGotoRow() {
-    var _this$grid16, _this$grid17;
+    var _this$grid15, _this$grid16;
     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] : '';
@@ -2139,8 +2129,8 @@ class IrisGrid extends Component {
       (_this$gotoRowRef$curr = this.gotoRowRef.current) === null || _this$gotoRowRef$curr === void 0 ? void 0 : _this$gotoRowRef$curr.focus();
       return;
     }
-    var cursorRow = (_this$grid16 = this.grid) === null || _this$grid16 === void 0 ? void 0 : _this$grid16.state.cursorRow;
-    var cursorColumn = (_this$grid17 = this.grid) === null || _this$grid17 === void 0 ? void 0 : _this$grid17.state.cursorColumn;
+    var cursorRow = (_this$grid15 = this.grid) === null || _this$grid15 === void 0 ? void 0 : _this$grid15.state.cursorRow;
+    var cursorColumn = (_this$grid16 = this.grid) === null || _this$grid16 === void 0 ? void 0 : _this$grid16.state.cursorColumn;
     if (cursorRow == null || cursorColumn == null) {
       // if a cell is not selected / grid is not rendered
       this.setState({
@@ -2307,7 +2297,7 @@ class IrisGrid extends Component {
     this.setAdvancedFilter(index, filter, options);
   }
   handleAdvancedFilterSortChange(column, direction) {
-    var _this$grid18;
+    var _this$grid17;
     var addToExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var {
       model
@@ -2330,11 +2320,11 @@ class IrisGrid extends Component {
     this.setState({
       sorts
     });
-    (_this$grid18 = this.grid) === null || _this$grid18 === void 0 ? void 0 : _this$grid18.forceUpdate();
+    (_this$grid17 = this.grid) === null || _this$grid17 === void 0 ? void 0 : _this$grid17.forceUpdate();
   }
   handleAdvancedFilterDone() {
-    var _this$grid19;
-    (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.focus();
+    var _this$grid18;
+    (_this$grid18 = this.grid) === null || _this$grid18 === void 0 ? void 0 : _this$grid18.focus();
   }
   handleAdvancedMenuOpened(column) {
     this.setState({
@@ -2420,8 +2410,8 @@ class IrisGrid extends Component {
     var setGridFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     var defocusInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     if (setGridFocus) {
-      var _this$grid20;
-      (_this$grid20 = this.grid) === null || _this$grid20 === void 0 ? void 0 : _this$grid20.focus();
+      var _this$grid19;
+      (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.focus();
     }
     if (defocusInput) {
       this.setState({
@@ -2528,7 +2518,7 @@ class IrisGrid extends Component {
     }
   }
   handleUpdate() {
-    var _this$grid21;
+    var _this$grid20;
     log.debug2('Received model update');
     var {
       advancedFilters,
@@ -2557,7 +2547,7 @@ class IrisGrid extends Component {
     } else {
       this.lastLoadedConfig = null;
     }
-    (_this$grid21 = this.grid) === null || _this$grid21 === void 0 ? void 0 : _this$grid21.forceUpdate();
+    (_this$grid20 = this.grid) === null || _this$grid20 === void 0 ? void 0 : _this$grid20.forceUpdate();
     this.stopLoading();
   }
   handleTableChanged() {
@@ -2570,13 +2560,13 @@ class IrisGrid extends Component {
     });
   }
   handleViewChanged(metrics) {
-    var _this$grid$state, _this$grid22;
+    var _this$grid$state, _this$grid21;
     var {
       model
     } = this.props;
     var {
       selectionEndRow = 0
-    } = (_this$grid$state = (_this$grid22 = this.grid) === null || _this$grid22 === void 0 ? void 0 : _this$grid22.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
+    } = (_this$grid$state = (_this$grid21 = this.grid) === null || _this$grid21 === void 0 ? void 0 : _this$grid21.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
     var pendingRowCount = 0;
     if (isEditableGridModel(model) && model.isEditable) {
       assertNotNull(metrics);
@@ -2604,7 +2594,7 @@ class IrisGrid extends Component {
     });
   }
   handleSelectionChanged(selectedRanges) {
-    var _this$grid23;
+    var _this$grid22;
     assertNotNull(selectedRanges);
     var {
       onSelectionChanged
@@ -2620,7 +2610,7 @@ class IrisGrid extends Component {
         copyOperation: null
       });
     }
-    if (((_this$grid23 = this.grid) === null || _this$grid23 === void 0 ? void 0 : _this$grid23.state.cursorRow) != null) {
+    if (((_this$grid22 = this.grid) === null || _this$grid22 === void 0 ? void 0 : _this$grid22.state.cursorRow) != null) {
       this.setState({
         gotoRow: "".concat(this.grid.state.cursorRow + 1)
       });
@@ -2639,8 +2629,8 @@ class IrisGrid extends Component {
     this.setState({
       columnHeaderGroups: IrisGridUtils.parseColumnHeaderGroups(model, columnHeaderGroups).groups
     }, () => {
-      var _this$grid24;
-      return (_this$grid24 = this.grid) === null || _this$grid24 === void 0 ? void 0 : _this$grid24.forceUpdate();
+      var _this$grid23;
+      return (_this$grid23 = this.grid) === null || _this$grid23 === void 0 ? void 0 : _this$grid23.forceUpdate();
     });
   }
   handleTooltipRef(tooltip) {
@@ -2795,7 +2785,7 @@ class IrisGrid extends Component {
     return this.discardPending();
   }
   handlePendingDataUpdated() {
-    var _this$grid25;
+    var _this$grid24;
     log.debug('pending data updated');
     var {
       model
@@ -2809,7 +2799,7 @@ class IrisGrid extends Component {
       pendingDataErrors,
       pendingSaveError: null
     });
-    (_this$grid25 = this.grid) === null || _this$grid25 === void 0 ? void 0 : _this$grid25.forceUpdate();
+    (_this$grid24 = this.grid) === null || _this$grid24 === void 0 ? void 0 : _this$grid24.forceUpdate();
   }
 
   /**
@@ -3223,22 +3213,22 @@ class IrisGrid extends Component {
         gotoRowError: 'Invalid row index'
       });
     } else if (rowInt === 0) {
-      var _this$grid26;
+      var _this$grid25;
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
       });
-      (_this$grid26 = this.grid) === null || _this$grid26 === void 0 ? void 0 : _this$grid26.setFocusRow(0);
+      (_this$grid25 = this.grid) === null || _this$grid25 === void 0 ? void 0 : _this$grid25.setFocusRow(0);
     } else if (rowInt < 0) {
-      var _this$grid27;
+      var _this$grid26;
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
       });
-      (_this$grid27 = this.grid) === null || _this$grid27 === void 0 ? void 0 : _this$grid27.setFocusRow(rowInt + rowCount);
+      (_this$grid26 = this.grid) === null || _this$grid26 === void 0 ? void 0 : _this$grid26.setFocusRow(rowInt + rowCount);
     } else {
-      var _this$grid28;
-      (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.setFocusRow(rowInt - 1);
+      var _this$grid27;
+      (_this$grid27 = this.grid) === null || _this$grid27 === void 0 ? void 0 : _this$grid27.setFocusRow(rowInt - 1);
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
@@ -3338,11 +3328,11 @@ class IrisGrid extends Component {
     });
   }
   handleGotoValueSelectedColumnNameChanged(columnName) {
-    var _this$grid29;
+    var _this$grid28;
     var {
       model
     } = this.props;
-    var cursorRow = (_this$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : _this$grid29.state.cursorRow;
+    var cursorRow = (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.state.cursorRow;
     var {
       gotoValueSelectedColumnName: prevColumnName,
       gotoValueManuallyChanged
@@ -3390,12 +3380,87 @@ class IrisGrid extends Component {
     } = this.state;
     this.seekRow(gotoValue, isBackwards);
   }
+
+  /**
+   * Render the input field for the focused filter
+   * @param metrics Grid metrics
+   * @param metricCalculator Metric calculator
+   * @param focusedFilterBarColumn Column index for the focused filter
+   * @param quickFilters Quick filters map
+   * @param advancedFilters Advanced filters map
+   * @returns The filter input field element or null if not applicable
+   */
+  getFilterBarInput(metrics, metricCalculator, focusedFilterBarColumn, quickFilters, advancedFilters) {
+    var _this$grid29;
+    if (metrics == null || focusedFilterBarColumn == null) {
+      return null;
+    }
+    var metricState = this.getMetricState();
+    if (metricState == null) {
+      return null;
+    }
+    var filterBoxCoordinates = metricCalculator.getFilterInputCoordinates(focusedFilterBarColumn, metricState, metrics);
+    if (filterBoxCoordinates == null) {
+      return null;
+    }
+    var debounceMs = Math.min(Math.max(IrisGrid.minDebounce, Math.round(metrics.rowCount / 200)), IrisGrid.maxDebounce);
+    var {
+      x,
+      y,
+      width: fieldWidth,
+      height: fieldHeight
+    } = filterBoxCoordinates;
+    var {
+      width
+    } = metrics;
+    var style = {
+      top: y,
+      left: x,
+      minWidth: Math.min(fieldWidth, width - x),
+      // Don't cause overflow
+      height: fieldHeight
+    };
+    var value = '';
+    var isValid = true;
+    var modelColumn = this.getModelColumn(focusedFilterBarColumn);
+    assertNotNull(modelColumn);
+    var quickFilter = quickFilters.get(modelColumn);
+    var advancedFilter = advancedFilters.get(modelColumn);
+    if (quickFilter != null) {
+      value = quickFilter.text;
+      isValid = quickFilter.filter != null;
+    }
+    var isBarFiltered = quickFilters.size !== 0 || advancedFilters.size !== 0;
+    var showAdvancedFilterButton = metricCalculator.getAdvancedFilterButtonCoordinates(focusedFilterBarColumn, metricState, metrics) != null;
+    return /*#__PURE__*/_jsx(FilterInputField, {
+      ref: this.filterInputRef,
+      style: style,
+      className: classNames({
+        error: !isValid,
+        active: value !== '' || advancedFilter != null,
+        'iris-grid-has-filter': isBarFiltered
+      }),
+      showAdvancedFilterButton: showAdvancedFilterButton,
+      isAdvancedFilterSet: advancedFilter != null,
+      onAdvancedFiltersTriggered: () => {
+        this.setState({
+          shownAdvancedFilter: focusedFilterBarColumn
+        });
+      },
+      onChange: this.handleFilterBarChange,
+      onDone: this.handleFilterBarDone,
+      onTab: this.handleFilterBarTab,
+      onContextMenu: (_this$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : _this$grid29.handleContextMenu,
+      debounceMs: debounceMs,
+      value: value
+    }, focusedFilterBarColumn);
+  }
   render() {
     var _rollupConfig$columns7,
       _rollupConfig$columns8,
       _this7 = this,
-      _this$grid31,
-      _this$grid31$state$dr,
+      _this$grid30,
+      _this$grid30$state$dr,
       _openOptions;
     var {
       children,
@@ -3499,65 +3564,7 @@ class IrisGrid extends Component {
     }
     var isVisible = metrics != null && metrics.width > 0 && metrics.height > 0;
     var isRollup = ((_rollupConfig$columns7 = rollupConfig === null || rollupConfig === void 0 ? void 0 : (_rollupConfig$columns8 = rollupConfig.columns) === null || _rollupConfig$columns8 === void 0 ? void 0 : _rollupConfig$columns8.length) !== null && _rollupConfig$columns7 !== void 0 ? _rollupConfig$columns7 : 0) > 0;
-    var focusField = null;
-    var debounceMs = metrics ? Math.min(Math.max(IrisGrid.minDebounce, Math.round(metrics.rowCount / 200)), IrisGrid.maxDebounce) : IrisGrid.maxDebounce;
-    if (isFilterBarShown && focusedFilterBarColumn != null && metrics != null) {
-      var {
-        gridX,
-        gridY,
-        allColumnXs,
-        allColumnWidths,
-        width
-      } = metrics;
-      var columnX = allColumnXs.get(focusedFilterBarColumn);
-      var columnWidth = allColumnWidths.get(focusedFilterBarColumn);
-      if (columnX != null && columnWidth != null) {
-        var _theme$filterBarHeigh, _theme$filterBarHeigh2, _this$grid30;
-        var x = gridX + columnX;
-        var y = gridY - ((_theme$filterBarHeigh = theme.filterBarHeight) !== null && _theme$filterBarHeigh !== void 0 ? _theme$filterBarHeigh : 0);
-        var fieldWidth = columnWidth + 1; // cover right border
-        var fieldHeight = ((_theme$filterBarHeigh2 = theme.filterBarHeight) !== null && _theme$filterBarHeigh2 !== void 0 ? _theme$filterBarHeigh2 : 0) - 1; // remove bottom border
-        var style = {
-          top: y,
-          left: x,
-          minWidth: Math.min(fieldWidth, width - x),
-          // Don't cause overflow
-          height: fieldHeight
-        };
-        var _value4 = '';
-        var isValid = true;
-        var modelColumn = this.getModelColumn(focusedFilterBarColumn);
-        assertNotNull(modelColumn);
-        var quickFilter = quickFilters.get(modelColumn);
-        var advancedFilter = advancedFilters.get(modelColumn);
-        if (quickFilter != null) {
-          _value4 = quickFilter.text;
-          isValid = quickFilter.filter != null;
-        }
-        var isBarFiltered = quickFilters.size !== 0 || advancedFilters.size !== 0;
-        focusField = /*#__PURE__*/_jsx(FilterInputField, {
-          ref: this.filterInputRef,
-          style: style,
-          className: classNames({
-            error: !isValid,
-            active: _value4 !== '' || advancedFilter != null,
-            'iris-grid-has-filter': isBarFiltered
-          }),
-          isAdvancedFilterSet: advancedFilter != null,
-          onAdvancedFiltersTriggered: () => {
-            this.setState({
-              shownAdvancedFilter: focusedFilterBarColumn
-            });
-          },
-          onChange: this.handleFilterBarChange,
-          onDone: this.handleFilterBarDone,
-          onTab: this.handleFilterBarTab,
-          onContextMenu: (_this$grid30 = this.grid) === null || _this$grid30 === void 0 ? void 0 : _this$grid30.handleContextMenu,
-          debounceMs: debounceMs,
-          value: _value4
-        }, focusedFilterBarColumn);
-      }
-    }
+    var focusField = isFilterBarShown ? this.getFilterBarInput(metrics, metricCalculator, focusedFilterBarColumn, quickFilters, advancedFilters) : null;
     var loadingElement = null;
     if (loadingText != null) {
       var loadingStatus = /*#__PURE__*/_jsxs("div", {
@@ -3579,11 +3586,11 @@ class IrisGrid extends Component {
           }), "Cancel"]
         })]
       });
-      var _gridY = metrics ? metrics.gridY : 0;
+      var gridY = metrics ? metrics.gridY : 0;
       loadingElement = /*#__PURE__*/_jsx("div", {
         className: "iris-grid-loading",
         style: loadingBlocksGrid ? {
-          top: _gridY
+          top: gridY
         } : {},
         children: loadingStatus
       });
@@ -3597,39 +3604,36 @@ class IrisGrid extends Component {
     }
     var filterBar = [];
     if (metrics && isFilterBarShown) {
+      var metricState = this.getMetricState();
+
+      // Advanced Filter buttons
       var {
-        gridX: _gridX,
-        gridY: _gridY2,
-        visibleColumns,
-        allColumnXs: _allColumnXs,
-        allColumnWidths: _allColumnWidths
+        visibleColumns
       } = metrics;
-      var {
-        filterBarHeight
-      } = theme;
       var _loop2 = function _loop2() {
         var columnIndex = visibleColumns[i];
-        var columnX = _allColumnXs.get(columnIndex);
-        var columnWidth = _allColumnWidths.get(columnIndex);
         var modelColumn = _this7.getModelColumn(columnIndex);
         if (modelColumn != null) {
           var isFilterable = model.isFilterable(modelColumn);
-          if (isFilterable && columnX != null && columnWidth != null && columnWidth > 0) {
-            var _x = _gridX + columnX + columnWidth - 24;
-            var _y = _gridY2 - (filterBarHeight !== null && filterBarHeight !== void 0 ? filterBarHeight : 0) + 2; // 2 acts as top margin for the button
-            var _style = {
+          var buttonCoordinates = isFilterable && metricState ? metricCalculator.getAdvancedFilterButtonCoordinates(columnIndex, metricState, metrics) : null;
+          if (buttonCoordinates != null) {
+            var {
+              x,
+              y
+            } = buttonCoordinates;
+            var style = {
               position: 'absolute',
-              top: _y,
-              left: _x
+              top: y,
+              left: x
             };
-            var _advancedFilter = advancedFilters.get(modelColumn);
-            var isFilterSet = _advancedFilter != null;
+            var advancedFilter = advancedFilters.get(modelColumn);
+            var isFilterSet = advancedFilter != null;
             var isFilterVisible = columnIndex === hoverAdvancedFilter || columnIndex === focusedFilterBarColumn || isFilterSet;
             var element = /*#__PURE__*/_jsx("div", {
               className: classNames('advanced-filter-button-container', {
                 hidden: !isFilterVisible
               }),
-              style: _style,
+              style: style,
               children: isFilterVisible && /*#__PURE__*/_jsx(Button, {
                 kind: "ghost",
                 className: classNames('btn-link-icon advanced-filter-button', {
@@ -3677,20 +3681,20 @@ class IrisGrid extends Component {
     var advancedFilterMenus = [];
     if (metrics) {
       var {
-        gridX: _gridX2,
+        gridX,
         visibleColumns: _visibleColumns,
-        allColumnXs: _allColumnXs2,
-        allColumnWidths: _allColumnWidths2,
+        allColumnXs,
+        allColumnWidths,
         columnHeaderHeight
       } = metrics;
       var _loop3 = function _loop3() {
         var columnIndex = _visibleColumns[_i3];
-        var columnX = _allColumnXs2.get(columnIndex);
-        var columnWidth = _allColumnWidths2.get(columnIndex);
+        var columnX = allColumnXs.get(columnIndex);
+        var columnWidth = allColumnWidths.get(columnIndex);
         if (columnX != null && columnWidth != null && columnWidth > 0) {
-          var xColumnHeader = _gridX2 + columnX;
-          var xFilterBar = _gridX2 + columnX + columnWidth - 20;
-          var _style2 = isFilterBarShown ? {
+          var xColumnHeader = gridX + columnX;
+          var xFilterBar = gridX + columnX + columnWidth - 20;
+          var style = isFilterBarShown ? {
             position: 'absolute',
             top: columnHeaderHeight,
             left: xFilterBar,
@@ -3703,19 +3707,19 @@ class IrisGrid extends Component {
             width: columnWidth,
             height: columnHeaderHeight
           };
-          var _modelColumn = _this7.getModelColumn(columnIndex);
-          if (_modelColumn != null) {
-            var _column3 = model.columns[_modelColumn];
+          var modelColumn = _this7.getModelColumn(columnIndex);
+          if (modelColumn != null) {
+            var _column3 = model.columns[modelColumn];
             if (_column3 == null) {
               // Grid metrics is likely out of sync with model
-              log.warn("Column does not exist at index ".concat(_modelColumn, " for column array of length ").concat(model.columns.length));
+              log.warn("Column does not exist at index ".concat(modelColumn, " for column array of length ").concat(model.columns.length));
               // eslint-disable-next-line no-continue
               return "continue";
             }
-            var _advancedFilter2 = advancedFilters.get(_modelColumn);
+            var advancedFilter = advancedFilters.get(modelColumn);
             var {
               options: advancedFilterOptions
-            } = _advancedFilter2 || {};
+            } = advancedFilter || {};
             var sort = TableUtils.getSortForColumn(model.sort, _column3.name);
             var sortDirection = sort ? sort.direction : null;
             if (!isSortDirection(sortDirection)) {
@@ -3723,7 +3727,7 @@ class IrisGrid extends Component {
             }
             var element = /*#__PURE__*/_jsx("div", {
               className: "advanced-filter-menu-container",
-              style: _style2,
+              style: style,
               children: /*#__PURE__*/_jsx(Popper, {
                 className: "advanced-filter-menu-popper",
                 onEntered: _this7.getAdvancedMenuOpenedHandler(columnIndex),
@@ -3929,7 +3933,7 @@ class IrisGrid extends Component {
             movedColumns: movedColumns,
             customColumns: customColumns,
             hiddenColumns: hiddenColumns,
-            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid31 = this.grid) === null || _this$grid31 === void 0 ? void 0 : (_this$grid31$state$dr = _this$grid31.state.draggingColumn) === null || _this$grid31$state$dr === void 0 ? void 0 : _this$grid31$state$dr.range),
+            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid30 = this.grid) === null || _this$grid30 === void 0 ? void 0 : (_this$grid30$state$dr = _this$grid30.state.draggingColumn) === null || _this$grid30$state$dr === void 0 ? void 0 : _this$grid30$state$dr.range),
             formatColumns: this.getCachedPreviewFormatColumns(model.dh, model.columns, conditionalFormats, conditionalFormatPreview,
             // Disable the preview format when we press Back on the format edit page
             ((_openOptions = openOptions[openOptions.length - 1]) === null || _openOptions === void 0 ? void 0 : _openOptions.type) === OptionType.CONDITIONAL_FORMATTING_EDIT ? conditionalFormatEditIndex !== null && conditionalFormatEditIndex !== void 0 ? conditionalFormatEditIndex : undefined : undefined),