feat: Cherry-pick DH-20363: Pivot filter support #2602 (#2608)

Added support for filtering on pivot columns (e.g., ColumnBy) that use
negative column indices, and makes filter input positioning extensible
for plugins.

Added two new methods to `IrisGridMetricCalculator`:
`getFilterInputCoordinates`: Returns positioning for the filter input
field
`getAdvancedFilterButtonCoordinates`: Returns positioning for the
advanced filter button
Both methods return null for negative indices by default, allowing
plugins to override for custom column types

Added `showAdvancedFilterButton` prop to `FilterInputField` to hide the
advanced filter button for columns that don't support advanced filters.

Author: vbabich

packages/grid/src/GridMetricCalculator.ts

@@ -604,7 +604,7 @@ export class GridMetricCalculator {
       visibleRows,
       visibleColumns,
 
-      // Map of the height/width of visible rows/columns
+      // Map of the height/width of columns in the viewport (excluding floating columns)
       visibleRowHeights,
       visibleColumnWidths,
 
@@ -616,7 +616,7 @@ export class GridMetricCalculator {
       allRows,
       allColumns,
 
-      // Map of the height/width of visible rows/columns
+      // Map of the height/width of all rendered columns (visible + floating + dragging)
       allRowHeights,
       allColumnWidths,
 

packages/iris-grid/src/FilterInputField.tsx

@@ -11,6 +11,7 @@ interface FilterInputFieldProps {
   className: string;
   style: React.CSSProperties;
   value: string;
+  showAdvancedFilterButton: boolean;
   isAdvancedFilterSet: boolean;
   onAdvancedFiltersTriggered: React.MouseEventHandler<HTMLButtonElement>;
   onChange: (value: string) => void;
@@ -35,6 +36,7 @@ class FilterInputField extends PureComponent<
     style: {},
     className: '',
     value: '',
+    showAdvancedFilterButton: false,
     isAdvancedFilterSet: false,
     onAdvancedFiltersTriggered: (): void => undefined,
     onChange: (): void => undefined,
@@ -203,6 +205,7 @@ class FilterInputField extends PureComponent<
     const {
       className,
       style,
+      showAdvancedFilterButton,
       isAdvancedFilterSet,
       onAdvancedFiltersTriggered,
     } = this.props;
@@ -230,21 +233,26 @@ class FilterInputField extends PureComponent<
           autoCapitalize="off"
           spellCheck="false"
         />
-        <div className="advanced-filter-button-container">
-          <Button
-            kind="ghost"
-            className={classNames('btn-link-icon advanced-filter-button', {
-              'filter-set': isAdvancedFilterSet,
-            })}
-            onClick={onAdvancedFiltersTriggered}
-            onContextMenu={this.handleContextMenu}
-          >
-            <div className="fa-layers ">
-              <FontAwesomeIcon icon={dhFilterFilled} className="filter-solid" />
-              <FontAwesomeIcon icon={vsFilter} className="filter-light" />
-            </div>
-          </Button>
-        </div>
+        {showAdvancedFilterButton && (
+          <div className="advanced-filter-button-container">
+            <Button
+              kind="ghost"
+              className={classNames('btn-link-icon advanced-filter-button', {
+                'filter-set': isAdvancedFilterSet,
+              })}
+              onClick={onAdvancedFiltersTriggered}
+              onContextMenu={this.handleContextMenu}
+            >
+              <div className="fa-layers ">
+                <FontAwesomeIcon
+                  icon={dhFilterFilled}
+                  className="filter-solid"
+                />
+                <FontAwesomeIcon icon={vsFilter} className="filter-light" />
+              </div>
+            </Button>
+          </div>
+        )}
       </div>
     );
   }

packages/iris-grid/src/IrisGrid.test.tsx

@@ -1,11 +1,11 @@
 import React, { ReactElement } from 'react';
-import TestRenderer from 'react-test-renderer';
+import TestRenderer, { act } from 'react-test-renderer';
 import dh from '@deephaven/jsapi-shim';
 import { DateUtils, Settings } from '@deephaven/jsapi-utils';
 import { TestUtils } from '@deephaven/utils';
 import { TypeValue } from '@deephaven/filters';
 import {
-  ExpandableColumnGridModel,
+  type ExpandableColumnGridModel,
   isExpandableColumnGridModel,
 } from '@deephaven/grid';
 import IrisGrid from './IrisGrid';
@@ -92,9 +92,13 @@ function makeComponent(
     IrisGrid;
 }
 
-function keyDown(key, component, extraArgs?) {
+function keyDown(
+  key: string,
+  component: IrisGrid,
+  extraArgs?: KeyboardEventInit
+): void {
   const args = { key, ...extraArgs };
-  component.grid.notifyKeyboardHandlers(
+  component.grid?.notifyKeyboardHandlers(
     'onDown',
     new KeyboardEvent('keydown', args)
   );
@@ -329,3 +333,73 @@ describe('column expand/collapse', () => {
     expect(model.collapseAllColumns).not.toHaveBeenCalled();
   });
 });
+
+describe('rebuildFilters', () => {
+  it('updates state if filters not empty', () => {
+    const testComponent = makeComponent(undefined, undefined, {
+      quickFilters: [
+        [
+          '2',
+          {
+            columnType: IrisGridTestUtils.DEFAULT_TYPE,
+            filterList: [
+              {
+                operator: 'eq',
+                text: 'null',
+                value: null,
+                startColumnIndex: 0,
+              },
+            ],
+          },
+        ],
+      ],
+    });
+    jest.spyOn(testComponent, 'setState');
+    expect(testComponent.setState).not.toBeCalled();
+    act(() => {
+      testComponent.rebuildFilters();
+    });
+    expect(testComponent.setState).toBeCalled();
+  });
+
+  it('does not update state for empty filters', () => {
+    const testComponent = makeComponent();
+    jest.spyOn(testComponent, 'setState');
+    testComponent.rebuildFilters();
+    expect(testComponent.setState).not.toBeCalled();
+  });
+});
+
+describe('Advanced Filter', () => {
+  it.each([
+    { columnIndex: -1, expectedVisibility: false },
+    { columnIndex: 0, expectedVisibility: true },
+    { columnIndex: 1, expectedVisibility: true },
+  ])(
+    'advanced filter button for column index $columnIndex should be rendered: $expectedVisibility',
+    ({ columnIndex, expectedVisibility }) => {
+      const model = irisGridTestUtils.makeModel();
+      const testRenderer = TestRenderer.create(
+        <IrisGrid model={model} settings={DEFAULT_SETTINGS} />,
+        { createNodeMock }
+      );
+      const component =
+        testRenderer.getInstance() as TestRenderer.ReactTestInstance & IrisGrid;
+
+      act(() => {
+        component.setState({
+          hoverAdvancedFilter: columnIndex,
+          isFilterBarShown: true,
+        });
+      });
+
+      const advancedFilterButtons = testRenderer.root.findAll(
+        el =>
+          el.props?.className?.includes('advanced-filter-button') === true &&
+          el.props?.className?.includes('container') !== true
+      );
+
+      expect(advancedFilterButtons.length > 0).toBe(expectedVisibility);
+    }
+  );
+});