@deephaven/iris-grid 1.11.0 → 1.12.1

package/dist/IrisGrid.js

@@ -1779,7 +1779,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
       });
@@ -1790,23 +1790,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 || _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 || _this$grid5.setViewState({
-        left: Math.min(newLeft, lastLeft),
+        left: scrollColumn,
         leftOffset: 0
       }, true);
     }
@@ -1817,13 +1807,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 || _this$grid6.forceUpdate();
+    (_this$grid5 = this.grid) === null || _this$grid5 === void 0 || _this$grid5.forceUpdate();
   }
   freezeColumnByColumnName(columnName) {
     var {
@@ -1906,7 +1896,7 @@ class IrisGrid extends Component {
     }
   }
   handleColumnVisibilityChanged(modelIndexes, isVisible) {
-    var _this$grid7;
+    var _this$grid6;
     var {
       metricCalculator,
       metrics
@@ -1931,7 +1921,7 @@ class IrisGrid extends Component {
         metricCalculator.setColumnWidth(modelIndex, 0);
       });
     }
-    (_this$grid7 = this.grid) === null || _this$grid7 === void 0 || _this$grid7.forceUpdate();
+    (_this$grid6 = this.grid) === null || _this$grid6 === void 0 || _this$grid6.forceUpdate();
   }
   handleColumnVisibilityReset() {
     var _model$layoutHints$fr, _model$layoutHints2;
@@ -1961,8 +1951,8 @@ class IrisGrid extends Component {
     });
   }
   handleAnimationLoop() {
-    var _this$grid8;
-    (_this$grid8 = this.grid) === null || _this$grid8 === void 0 || _this$grid8.updateCanvas();
+    var _this$grid7;
+    (_this$grid7 = this.grid) === null || _this$grid7 === void 0 || _this$grid7.updateCanvas();
     if (this.isAnimating) {
       this.animationFrame = requestAnimationFrame(this.handleAnimationLoop);
     }
@@ -2016,7 +2006,7 @@ class IrisGrid extends Component {
     }
   }
   showAllColumns() {
-    var _this$grid9;
+    var _this$grid8;
     var {
       metricCalculator
     } = this.state;
@@ -2028,7 +2018,7 @@ class IrisGrid extends Component {
         metricCalculator.resetColumnWidth(modelIndex);
       }
     }
-    (_this$grid9 = this.grid) === null || _this$grid9 === void 0 || _this$grid9.forceUpdate();
+    (_this$grid8 = this.grid) === null || _this$grid8 === void 0 || _this$grid8.forceUpdate();
   }
 
   /**
@@ -2036,9 +2026,9 @@ class IrisGrid extends Component {
    * to keep Grid and IrisGrid metrics in sync since metrics are stored in both places.
    */
   updateMetrics() {
-    var _this$grid0;
+    var _this$grid9;
     this.setState({
-      metrics: (_this$grid0 = this.grid) === null || _this$grid0 === void 0 ? void 0 : _this$grid0.updateMetrics()
+      metrics: (_this$grid9 = this.grid) === null || _this$grid9 === void 0 ? void 0 : _this$grid9.updateMetrics()
     });
   }
   toggleSort(columnIndex, addToExisting) {
@@ -2059,15 +2049,15 @@ class IrisGrid extends Component {
     }
   }
   updateSorts(sorts) {
-    var _this$grid1;
+    var _this$grid0;
     this.startLoading('Sorting...');
     this.setState({
       sorts
     });
-    (_this$grid1 = this.grid) === null || _this$grid1 === void 0 || _this$grid1.forceUpdate();
+    (_this$grid0 = this.grid) === null || _this$grid0 === void 0 || _this$grid0.forceUpdate();
   }
   sortColumn(modelColumn) {
-    var _this$grid10;
+    var _this$grid1;
     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;
@@ -2080,15 +2070,15 @@ class IrisGrid extends Component {
     this.setState({
       sorts
     });
-    (_this$grid10 = this.grid) === null || _this$grid10 === void 0 || _this$grid10.forceUpdate();
+    (_this$grid1 = this.grid) === null || _this$grid1 === void 0 || _this$grid1.forceUpdate();
   }
   reverse(reverse) {
-    var _this$grid11;
+    var _this$grid10;
     this.startLoading('Reversing...');
     this.setState({
       reverse
     });
-    (_this$grid11 = this.grid) === null || _this$grid11 === void 0 || _this$grid11.forceUpdate();
+    (_this$grid10 = this.grid) === null || _this$grid10 === void 0 || _this$grid10.forceUpdate();
   }
   isReversible() {
     var {
@@ -2129,8 +2119,8 @@ class IrisGrid extends Component {
         this.focusFilterBar(columnIndex);
       }
     } else {
-      var _this$grid12;
-      (_this$grid12 = this.grid) === null || _this$grid12 === void 0 || _this$grid12.focus();
+      var _this$grid11;
+      (_this$grid11 = this.grid) === null || _this$grid11 === void 0 || _this$grid11.focus();
     }
   }
   isTableSearchAvailable() {
@@ -2167,13 +2157,13 @@ class IrisGrid extends Component {
         var _this$crossColumnRef2;
         (_this$crossColumnRef2 = this.crossColumnRef) === null || _this$crossColumnRef2 === void 0 || _this$crossColumnRef2.current.focus();
       } else {
-        var _this$grid13;
-        (_this$grid13 = this.grid) === null || _this$grid13 === void 0 || _this$grid13.focus();
+        var _this$grid12;
+        (_this$grid12 = this.grid) === null || _this$grid12 === void 0 || _this$grid12.focus();
       }
     });
   }
   toggleGotoRow() {
-    var _this$grid14, _this$grid15;
+    var _this$grid13, _this$grid14;
     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] : '';
@@ -2195,8 +2185,8 @@ class IrisGrid extends Component {
       (_this$gotoRowRef$curr = this.gotoRowRef.current) === null || _this$gotoRowRef$curr === void 0 || _this$gotoRowRef$curr.focus();
       return;
     }
-    var cursorRow = (_this$grid14 = this.grid) === null || _this$grid14 === void 0 ? void 0 : _this$grid14.state.cursorRow;
-    var cursorColumn = (_this$grid15 = this.grid) === null || _this$grid15 === void 0 ? void 0 : _this$grid15.state.cursorColumn;
+    var cursorRow = (_this$grid13 = this.grid) === null || _this$grid13 === void 0 ? void 0 : _this$grid13.state.cursorRow;
+    var cursorColumn = (_this$grid14 = this.grid) === null || _this$grid14 === void 0 ? void 0 : _this$grid14.state.cursorColumn;
     if (cursorRow == null || cursorColumn == null) {
       // if a cell is not selected / grid is not rendered
       this.setState({
@@ -2363,7 +2353,7 @@ class IrisGrid extends Component {
     this.setAdvancedFilter(index, filter, options);
   }
   handleAdvancedFilterSortChange(column, direction) {
-    var _this$grid16;
+    var _this$grid15;
     var addToExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var {
       model
@@ -2386,11 +2376,11 @@ class IrisGrid extends Component {
     this.setState({
       sorts
     });
-    (_this$grid16 = this.grid) === null || _this$grid16 === void 0 || _this$grid16.forceUpdate();
+    (_this$grid15 = this.grid) === null || _this$grid15 === void 0 || _this$grid15.forceUpdate();
   }
   handleAdvancedFilterDone() {
-    var _this$grid17;
-    (_this$grid17 = this.grid) === null || _this$grid17 === void 0 || _this$grid17.focus();
+    var _this$grid16;
+    (_this$grid16 = this.grid) === null || _this$grid16 === void 0 || _this$grid16.focus();
   }
   handleAdvancedMenuOpened(column) {
     this.setState({
@@ -2476,8 +2466,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$grid18;
-      (_this$grid18 = this.grid) === null || _this$grid18 === void 0 || _this$grid18.focus();
+      var _this$grid17;
+      (_this$grid17 = this.grid) === null || _this$grid17 === void 0 || _this$grid17.focus();
     }
     if (defocusInput) {
       this.setState({
@@ -2604,7 +2594,7 @@ class IrisGrid extends Component {
     }
   }
   handleUpdate() {
-    var _this$grid19;
+    var _this$grid18;
     log.debug2('Received model update');
     var {
       advancedFilters,
@@ -2633,7 +2623,7 @@ class IrisGrid extends Component {
     } else {
       this.lastLoadedConfig = null;
     }
-    (_this$grid19 = this.grid) === null || _this$grid19 === void 0 || _this$grid19.forceUpdate();
+    (_this$grid18 = this.grid) === null || _this$grid18 === void 0 || _this$grid18.forceUpdate();
     this.stopLoading();
   }
   handleTableChanged() {
@@ -2646,13 +2636,13 @@ class IrisGrid extends Component {
     });
   }
   handleViewChanged(metrics) {
-    var _this$grid$state, _this$grid20;
+    var _this$grid$state, _this$grid19;
     var {
       model
     } = this.props;
     var {
       selectionEndRow = 0
-    } = (_this$grid$state = (_this$grid20 = this.grid) === null || _this$grid20 === void 0 ? void 0 : _this$grid20.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
+    } = (_this$grid$state = (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
     var pendingRowCount = 0;
     if (isEditableGridModel(model) && model.isEditable) {
       assertNotNull(metrics);
@@ -2727,8 +2717,8 @@ class IrisGrid extends Component {
       // Parsing them again causes a loop with undo/redo that makes it unusable
       columnHeaderGroups: columnHeaderGroups.every(group => isColumnHeaderGroup(group) && group.isValid()) ? columnHeaderGroups : IrisGridUtils.parseColumnHeaderGroups(model, columnHeaderGroups).groups
     }, () => {
-      var _this$grid21;
-      return (_this$grid21 = this.grid) === null || _this$grid21 === void 0 ? void 0 : _this$grid21.forceUpdate();
+      var _this$grid20;
+      return (_this$grid20 = this.grid) === null || _this$grid20 === void 0 ? void 0 : _this$grid20.forceUpdate();
     });
   }
   handleTooltipRef(tooltip) {
@@ -2880,7 +2870,7 @@ class IrisGrid extends Component {
     return this.discardPending();
   }
   handlePendingDataUpdated() {
-    var _this$grid22;
+    var _this$grid21;
     log.debug('pending data updated');
     var {
       model
@@ -2894,10 +2884,10 @@ class IrisGrid extends Component {
       pendingDataErrors,
       pendingSaveError: null
     });
-    (_this$grid22 = this.grid) === null || _this$grid22 === void 0 || _this$grid22.forceUpdate();
+    (_this$grid21 = this.grid) === null || _this$grid21 === void 0 || _this$grid21.forceUpdate();
   }
   handleResizeColumn(modelIndex) {
-    var _this$grid23;
+    var _this$grid22;
     var {
       metrics,
       metricCalculator
@@ -2911,10 +2901,10 @@ class IrisGrid extends Component {
     } else {
       metricCalculator.setColumnWidth(modelIndex, contentWidth);
     }
-    (_this$grid23 = this.grid) === null || _this$grid23 === void 0 || _this$grid23.forceUpdate();
+    (_this$grid22 = this.grid) === null || _this$grid22 === void 0 || _this$grid22.forceUpdate();
   }
   handleResizeAllColumns() {
-    var _this$grid24;
+    var _this$grid23;
     var {
       metrics,
       metricCalculator
@@ -2947,7 +2937,7 @@ class IrisGrid extends Component {
         metricCalculator.setColumnWidth(_modelIndex, _contentWidth);
       }
     }
-    (_this$grid24 = this.grid) === null || _this$grid24 === void 0 || _this$grid24.forceUpdate();
+    (_this$grid23 = this.grid) === null || _this$grid23 === void 0 || _this$grid23.forceUpdate();
   }
 
   /**
@@ -3373,22 +3363,22 @@ class IrisGrid extends Component {
         gotoRowError: 'Invalid row index'
       });
     } else if (rowInt === 0) {
-      var _this$grid25;
+      var _this$grid24;
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
       });
-      (_this$grid25 = this.grid) === null || _this$grid25 === void 0 || _this$grid25.setFocusRow(0);
+      (_this$grid24 = this.grid) === null || _this$grid24 === void 0 || _this$grid24.setFocusRow(0);
     } else if (rowInt < 0) {
-      var _this$grid26;
+      var _this$grid25;
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
       });
-      (_this$grid26 = this.grid) === null || _this$grid26 === void 0 || _this$grid26.setFocusRow(rowInt + rowCount);
+      (_this$grid25 = this.grid) === null || _this$grid25 === void 0 || _this$grid25.setFocusRow(rowInt + rowCount);
     } else {
-      var _this$grid27;
-      (_this$grid27 = this.grid) === null || _this$grid27 === void 0 || _this$grid27.setFocusRow(rowInt - 1);
+      var _this$grid26;
+      (_this$grid26 = this.grid) === null || _this$grid26 === void 0 || _this$grid26.setFocusRow(rowInt - 1);
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
@@ -3488,11 +3478,11 @@ class IrisGrid extends Component {
     });
   }
   handleGotoValueSelectedColumnNameChanged(columnName) {
-    var _this$grid28;
+    var _this$grid27;
     var {
       model
     } = this.props;
-    var cursorRow = (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.state.cursorRow;
+    var cursorRow = (_this$grid27 = this.grid) === null || _this$grid27 === void 0 ? void 0 : _this$grid27.state.cursorRow;
     var {
       gotoValueSelectedColumnName: prevColumnName,
       gotoValueManuallyChanged
@@ -3540,11 +3530,86 @@ 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$grid28;
+    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$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.handleContextMenu,
+      debounceMs: debounceMs,
+      value: value
+    }, focusedFilterBarColumn);
+  }
   render() {
     var _rollupConfig$columns7,
       _rollupConfig$columns8,
       _this7 = this,
-      _this$grid30,
+      _this$grid29,
       _openOptions;
     var {
       children,
@@ -3651,65 +3716,7 @@ class IrisGrid extends Component {
     }
     var isVisible = metrics != null && metrics.width > 0 && metrics.height > 0;
     var isRollup = ((_rollupConfig$columns7 = rollupConfig === null || rollupConfig === 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$grid29;
-        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 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;
-        focusField = /*#__PURE__*/_jsx(FilterInputField, {
-          ref: this.filterInputRef,
-          style: style,
-          className: classNames({
-            error: !isValid,
-            active: value !== '' || 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$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : _this$grid29.handleContextMenu,
-          debounceMs: debounceMs,
-          value: value
-        }, focusedFilterBarColumn);
-      }
-    }
+    var focusField = isFilterBarShown ? this.getFilterBarInput(metrics, metricCalculator, focusedFilterBarColumn, quickFilters, advancedFilters) : null;
     var loadingElement = null;
     if (loadingText != null) {
       var loadingStatus = /*#__PURE__*/_jsxs("div", {
@@ -3731,11 +3738,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
       });
@@ -3749,39 +3756,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', {
@@ -3829,20 +3833,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[_i4];
-        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,
@@ -3855,19 +3859,19 @@ class IrisGrid extends Component {
             width: columnWidth,
             height: columnHeaderHeight
           };
-          var _modelColumn = _this7.getModelColumn(columnIndex);
-          if (_modelColumn != null) {
-            var column = model.columns[_modelColumn];
+          var modelColumn = _this7.getModelColumn(columnIndex);
+          if (modelColumn != null) {
+            var column = model.columns[modelColumn];
             if (column == 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 1; // continue
             }
-            var _advancedFilter2 = advancedFilters.get(_modelColumn);
+            var advancedFilter = advancedFilters.get(modelColumn);
             var {
               options: advancedFilterOptions
-            } = _advancedFilter2 || {};
+            } = advancedFilter || {};
             var sort = TableUtils.getSortForColumn(model.sort, column.name);
             var sortDirection = sort ? sort.direction : null;
             if (!isSortDirection(sortDirection)) {
@@ -3875,7 +3879,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),
@@ -4086,7 +4090,7 @@ class IrisGrid extends Component {
             movedColumns: movedColumns,
             customColumns: customColumns,
             hiddenColumns: hiddenColumns,
-            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid30 = this.grid) === null || _this$grid30 === void 0 || (_this$grid30 = _this$grid30.state.draggingColumn) === null || _this$grid30 === void 0 ? void 0 : _this$grid30.range),
+            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid29 = this.grid) === null || _this$grid29 === void 0 || (_this$grid29 = _this$grid29.state.draggingColumn) === null || _this$grid29 === void 0 ? void 0 : _this$grid29.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),