feat(ag-grid): Server Side Filtering for Column Level Filters

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/components/CustomHeader.tsx

@@ -19,16 +19,19 @@
  * under the License.
  */
 
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { t } from '@superset-ui/core';
 import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+import { Column } from '@superset-ui/core/components/ThemedAgGridReact';
 import FilterIcon from './Filter';
 import KebabMenu from './KebabMenu';
 import {
   CustomColDef,
   CustomHeaderParams,
   SortState,
   UserProvidedColDef,
+  FilterInputPosition,
+  AGGridFilterInstance,
 } from '../../types';
 import CustomPopover from './CustomPopover';
 import {
@@ -39,6 +42,13 @@ import {
   MenuContainer,
   SortIconWrapper,
 } from '../../styles';
+import { GridApi } from 'ag-grid-community';
+import {
+  FILTER_POPOVER_OPEN_DELAY,
+  FILTER_INPUT_POSITIONS,
+  FILTER_CONDITION_BODY_INDEX,
+  FILTER_INPUT_SELECTOR,
+} from '../../consts';
 
 const getSortIcon = (sortState: SortState[], colId: string | null) => {
   if (!sortState?.length || !colId) return null;
@@ -53,6 +63,56 @@ const getSortIcon = (sortState: SortState[], colId: string | null) => {
   return null;
 };
 
+/**
+ * Auto-opens the filter popover and focuses the correct input field.
+ * Used when restoring filter state after server-side filtering to maintain UX continuity.
+ *
+ * @param column - AG Grid column instance
+ * @param api - AG Grid API instance
+ * @param filterRef - React ref to the filter DOM container
+ * @param setFilterVisible - State setter to control filter popover visibility
+ * @param lastFilteredInputPosition - Position of the last filtered input
+ */
+const autoOpenFilterAndFocus = async (
+  column: Column,
+  api: GridApi,
+  filterRef: React.RefObject<HTMLDivElement>,
+  setFilterVisible: (visible: boolean) => void,
+  lastFilteredInputPosition?: FilterInputPosition,
+) => {
+  setFilterVisible(true);
+
+  const filterInstance = (await api.getColumnFilterInstance(
+    column,
+  )) as AGGridFilterInstance | null;
+  const filterEl = filterInstance?.eGui;
+
+  if (!filterEl || !filterRef.current) return;
+
+  // Clear children safely without innerHTML to prevent XSS
+  while (filterRef.current.firstChild) {
+    filterRef.current.removeChild(filterRef.current.firstChild);
+  }
+  filterRef.current.appendChild(filterEl);
+
+  // Focus the correct input based on lastFilteredInputPosition
+  if (filterInstance?.eConditionBodies) {
+    const conditionBodies = filterInstance.eConditionBodies;
+    const targetIndex =
+      lastFilteredInputPosition === FILTER_INPUT_POSITIONS.SECOND
+        ? FILTER_CONDITION_BODY_INDEX.SECOND
+        : FILTER_CONDITION_BODY_INDEX.FIRST;
+    const targetBody = conditionBodies[targetIndex];
+
+    if (targetBody) {
+      const input = targetBody.querySelector(
+        FILTER_INPUT_SELECTOR,
+      ) as HTMLInputElement | null;
+      input?.focus();
+    }
+  }
+};
+
 const CustomHeader: React.FC<CustomHeaderParams> = ({
   displayName,
   enableSorting,
@@ -61,7 +121,12 @@ const CustomHeader: React.FC<CustomHeaderParams> = ({
   column,
   api,
 }) => {
-  const { initialSortState, onColumnHeaderClicked } = context;
+  const {
+    initialSortState,
+    onColumnHeaderClicked,
+    lastFilteredColumn,
+    lastFilteredInputPosition,
+  } = context;
   const colId = column?.getColId();
   const colDef = column?.getColDef() as CustomColDef;
   const userColDef = column.getUserProvidedColDef() as UserProvidedColDef;
@@ -102,18 +167,44 @@ const CustomHeader: React.FC<CustomHeaderParams> = ({
     else clearSort();
   };
 
-  const handleFilterClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleFilterClick = async (e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
     setFilterVisible(!isFilterVisible);
 
-    const filterInstance = await api.getColumnFilterInstance<any>(column);
+    const filterInstance = (await api.getColumnFilterInstance(
+      column,
+    )) as AGGridFilterInstance | null;
     const filterEl = filterInstance?.eGui;
     if (filterEl && filterRef.current) {
-      filterRef.current.innerHTML = '';
+      // Clear children safely without innerHTML to prevent XSS
+      while (filterRef.current.firstChild) {
+        filterRef.current.removeChild(filterRef.current.firstChild);
+      }
       filterRef.current.appendChild(filterEl);
     }
   };
 
+  // Auto-open filter popover for the last filtered column
+  useEffect(() => {
+    if (lastFilteredColumn === colId && !isFilterVisible) {
+      const timeoutId = setTimeout(
+        () =>
+          autoOpenFilterAndFocus(
+            column,
+            api,
+            filterRef,
+            setFilterVisible,
+            lastFilteredInputPosition,
+          ),
+        FILTER_POPOVER_OPEN_DELAY,
+      );
+      return () => clearTimeout(timeoutId);
+    }
+    return undefined;
+  }, [lastFilteredColumn, colId, lastFilteredInputPosition]);
+
   const handleMenuClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     setMenuVisible(!isMenuVisible);

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx

@@ -55,7 +55,9 @@ import Pagination from './components/Pagination';
 import SearchSelectDropdown from './components/SearchSelectDropdown';
 import { SearchOption, SortByItem } from '../types';
 import getInitialSortState, { shouldSort } from '../utils/getInitialSortState';
+import getInitialFilterModel from '../utils/getInitialFilterModel';
 import { PAGE_SIZE_OPTIONS } from '../consts';
+import { getCompleteFilterState } from '../utils/filterStateManager';
 
 export interface AgGridState extends Partial<GridState> {
   timestamp?: number;
@@ -100,6 +102,8 @@ export interface AgGridTableProps {
   showTotals: boolean;
   width: number;
   onColumnStateChange?: (state: AgGridChartStateWithMetadata) => void;
+  onFilterChanged?: (filterModel: Record<string, any>) => void;
+  metricColumns?: string[];
   gridRef?: RefObject<AgGridReact>;
   chartState?: AgGridChartState;
 }
@@ -137,6 +141,8 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
     showTotals,
     width,
     onColumnStateChange,
+    onFilterChanged,
+    metricColumns = [],
     chartState,
   }) => {
     const gridRef = useRef<AgGridReact>(null);
@@ -146,12 +152,24 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
     const lastCapturedStateRef = useRef<string | null>(null);
 
     const searchId = `search-${id}`;
+
+    const initialFilterModel = getInitialFilterModel(
+      chartState,
+      serverPaginationData,
+      serverPagination,
+    );
+
     const gridInitialState: GridState = {
       ...(serverPagination && {
         sort: {
           sortModel: getInitialSortState(serverPaginationData?.sortBy || []),
         },
       }),
+      ...(initialFilterModel && {
+        filter: {
+          filterModel: initialFilterModel,
+        },
+      }),
     };
 
     const defaultColDef = useMemo<ColDef>(
@@ -332,6 +350,29 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
       [onColumnStateChange],
     );
 
+    const handleFilterChanged = useCallback(async () => {
+      const completeFilterState = await getCompleteFilterState(
+        gridRef,
+        metricColumns,
+      );
+
+      // Guard clause: Only call onFilterChanged if filter model has actually changed
+      if (
+        !isEqual(
+          serverPaginationData?.agGridFilterModel,
+          completeFilterState.originalFilterModel,
+        )
+      ) {
+        if (onFilterChanged) {
+          onFilterChanged(completeFilterState);
+        }
+      }
+    }, [
+      onFilterChanged,
+      metricColumns,
+      serverPaginationData?.agGridFilterModel,
+    ]);
+
     useEffect(() => {
       if (
         hasServerPageLengthChanged &&
@@ -356,19 +397,14 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
       // This will make columns fill the grid width
       params.api.sizeColumnsToFit();
 
-      // Restore saved AG Grid state from permalink if available
-      if (chartState && params.api) {
+      // Restore saved column state from permalink if available
+      // Note: filterModel is now handled via gridInitialState for better performance
+      if (chartState?.columnState && params.api) {
         try {
-          if (chartState.columnState) {
-            params.api.applyColumnState?.({
-              state: chartState.columnState as ColumnState[],
-              applyOrder: true,
-            });
-          }
-
-          if (chartState.filterModel) {
-            params.api.setFilterModel?.(chartState.filterModel);
-          }
+          params.api.applyColumnState?.({
+            state: chartState.columnState as ColumnState[],
+            applyOrder: true,
+          });
         } catch {
           // Silently fail if state restoration fails
         }
@@ -429,6 +465,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
           rowSelection="multiple"
           animateRows
           onCellClicked={handleCrossFilter}
+          onFilterChanged={handleFilterChanged}
           onStateUpdated={handleGridStateChange}
           initialState={gridInitialState}
           maintainColumnOrder
@@ -520,6 +557,9 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
               serverPaginationData?.sortBy || [],
             ),
             isActiveFilterValue,
+            lastFilteredColumn: serverPaginationData?.lastFilteredColumn,
+            lastFilteredInputPosition:
+              serverPaginationData?.lastFilteredInputPosition,
           }}
         />
         {serverPagination && (