initial : server side filters implementation

Author: amaannawab923

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

@@ -39,6 +39,7 @@ import {
   CellClickedEvent,
   IMenuActionParams,
 } from '@superset-ui/core/components/ThemedAgGridReact';
+import type { FilterChangedEvent } from 'ag-grid-community';
 import { type FunctionComponent } from 'react';
 import { JsonObject, DataRecordValue, DataRecord, t } from '@superset-ui/core';
 import { SearchOutlined } from '@ant-design/icons';
@@ -48,6 +49,11 @@ import SearchSelectDropdown from './components/SearchSelectDropdown';
 import { SearchOption, SortByItem } from '../types';
 import getInitialSortState, { shouldSort } from '../utils/getInitialSortState';
 import { PAGE_SIZE_OPTIONS } from '../consts';
+import {
+  convertAgGridFiltersToSQL,
+  logFilterConversion,
+  type AgGridFilterModel,
+} from '../utils/agGridFilterConverter';
 
 export interface AgGridTableProps {
   gridTheme?: string;
@@ -70,6 +76,7 @@ export interface AgGridTableProps {
   onSearchColChange: (searchCol: string) => void;
   onSearchChange: (searchText: string) => void;
   onSortChange: (sortBy: SortByItem[]) => void;
+  onAgGridColumnFiltersChange?: (filterModel: AgGridFilterModel) => void;
   id: number;
   percentMetrics: string[];
   serverPageLength: number;
@@ -104,6 +111,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
     onSearchColChange,
     onSearchChange,
     onSortChange,
+    onAgGridColumnFiltersChange,
     id,
     percentMetrics,
     serverPageLength,
@@ -153,6 +161,11 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
       serverPaginationData?.searchText || '',
     );
 
+    // State to store column-level filters - initialize from ownState if available
+    const [columnFilters, setColumnFilters] = useState<any>(
+      serverPaginationData?.agGridFilterModel || {},
+    );
+
     const debouncedSearch = useMemo(
       () =>
         debounce((value: string) => {
@@ -254,11 +267,75 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
       }
     }, [width]);
 
+    // Restore AG Grid filter state from ownState (similar to search box pattern)
+    useEffect(() => {
+      if (gridRef.current?.api && serverPagination) {
+        const storedFilterModel = serverPaginationData?.agGridFilterModel;
+
+        if (storedFilterModel && Object.keys(storedFilterModel).length > 0) {
+          // Only restore if the current filter model is different
+          const currentFilterModel = gridRef.current.api.getFilterModel();
+
+          if (!isEqual(currentFilterModel, storedFilterModel)) {
+            console.log('Restoring AG Grid filters from ownState:', storedFilterModel);
+            gridRef.current.api.setFilterModel(storedFilterModel);
+          }
+        } else if (Object.keys(columnFilters).length > 0) {
+          // Clear filters if ownState has no filters but local state does
+          console.log('Clearing AG Grid filters (ownState is empty)');
+          gridRef.current.api.setFilterModel(null);
+          setColumnFilters({});
+        }
+      }
+    }, [serverPaginationData?.agGridFilterModel, serverPagination]);
+
     const onGridReady = (params: GridReadyEvent) => {
       // This will make columns fill the grid width
       params.api.sizeColumnsToFit();
+
+      // Restore filter state on grid ready if server pagination is enabled
+      if (serverPagination && serverPaginationData?.agGridFilterModel) {
+        const storedFilterModel = serverPaginationData.agGridFilterModel;
+        if (Object.keys(storedFilterModel).length > 0) {
+          console.log('Restoring AG Grid filters on grid ready:', storedFilterModel);
+          params.api.setFilterModel(storedFilterModel);
+        }
+      }
     };
 
+    // Handler for column filter changes
+    const onFilterChanged = useCallback((event: FilterChangedEvent) => {
+      const filterModel = event.api.getFilterModel();
+      console.log('Column Filters Changed:', filterModel);
+
+      // Only trigger API call if filters actually changed (deep comparison)
+      // This prevents infinite loops when restoring filters from ownState
+      if (isEqual(filterModel, serverPaginationData?.agGridFilterModel)) {
+        console.log('Filter model unchanged - skipping API call');
+        return;
+      }
+
+      // Convert AG Grid filters to SQLAlchemy format
+      const convertedFilters = convertAgGridFiltersToSQL(
+        filterModel as AgGridFilterModel,
+      );
+
+      // Log the conversion for debugging
+      logFilterConversion(filterModel as AgGridFilterModel, convertedFilters);
+
+      setColumnFilters(filterModel);
+
+      // Call the handler to update ownState if server pagination is enabled
+      if (onAgGridColumnFiltersChange && serverPagination) {
+        onAgGridColumnFiltersChange(filterModel as AgGridFilterModel);
+      }
+    }, [onAgGridColumnFiltersChange, serverPagination, serverPaginationData?.agGridFilterModel]);
+
+    // Log filter state whenever it changes
+    useEffect(() => {
+      console.log('Current Filter State:', columnFilters);
+    }, [columnFilters]);
+
     return (
       <div style={containerStyles} ref={containerRef}>
         <div className="dropdown-controls-container">
@@ -303,6 +380,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
         <ThemedAgGridReact
           ref={gridRef}
           onGridReady={onGridReady}
+          onFilterChanged={onFilterChanged}
           className="ag-container"
           rowData={rowData}
           headerHeight={36}

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

@@ -42,6 +42,7 @@ import TimeComparisonVisibility from './AgGridTable/components/TimeComparisonVis
 import { useColDefs } from './utils/useColDefs';
 import { getCrossFilterDataMask } from './utils/getCrossFilterDataMask';
 import { StyledChartContainer } from './styles';
+import { convertAgGridFiltersToSQL, type AgGridFilterModel } from './utils/agGridFilterConverter';
 
 const getGridHeight = (height: number, includeSearch: boolean | undefined) => {
   let calculatedGridHeight = height;
@@ -250,6 +251,26 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     [setDataMask, serverPagination],
   );
 
+  const handleAgGridColumnFiltersChange = useCallback(
+    (filterModel: AgGridFilterModel) => {
+      if (!serverPagination) return;
+
+      // Convert AG Grid filters to SQLAlchemy format
+      const converted = convertAgGridFiltersToSQL(filterModel);
+
+      const modifiedOwnState = {
+        ...serverPaginationData,
+        agGridFilterModel: filterModel, // Store raw filter model for state restoration
+        agGridSimpleFilters: converted.simpleFilters,
+        agGridComplexWhere: converted.complexWhere,
+        currentPage: 0, // Reset to first page when filtering
+      };
+
+      updateTableOwnState(setDataMask, modifiedOwnState);
+    },
+    [setDataMask, serverPagination, serverPaginationData],
+  );
+
   const renderTimeComparisonVisibility = (): JSX.Element => (
     <TimeComparisonVisibility
       comparisonColumns={comparisonColumns}
@@ -277,6 +298,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         onSearchColChange={handleChangeSearchCol}
         onSearchChange={handleSearch}
         onSortChange={handleSortByChange}
+        onAgGridColumnFiltersChange={handleAgGridColumnFiltersChange}
         id={slice_id}
         handleCrossFilter={toggleFilter}
         percentMetrics={percentMetrics}

superset-frontend/plugins/plugin-chart-ag-grid-table/src/buildQuery.ts

@@ -257,9 +257,16 @@ const buildQuery: BuildQuery<TableChartFormData> = (
       formData.show_totals &&
       queryMode === QueryMode.Aggregate
     ) {
+      // Create a copy of extras without the WHERE clause
+      // AG Grid filters in extras.where can reference calculated columns
+      // which aren't available in the totals subquery
+      const totalsExtras = { ...extras };
+      delete totalsExtras.where; // Remove AG Grid WHERE clause from totals query
+
       extraQueries.push({
         ...queryObject,
         columns: [],
+        extras: totalsExtras, // Use extras without WHERE clause
         row_limit: 0,
         row_offset: 0,
         post_processing: [],
@@ -290,6 +297,28 @@ const buildQuery: BuildQuery<TableChartFormData> = (
           ],
         };
       }
+
+      // Add AG Grid column filters from ownState
+      if (ownState.agGridSimpleFilters && ownState.agGridSimpleFilters.length > 0) {
+        queryObject = {
+          ...queryObject,
+          filters: [
+            ...(queryObject.filters || []),
+            ...ownState.agGridSimpleFilters,
+          ],
+        };
+      }
+
+      // Add AG Grid complex WHERE clause from ownState
+      if (ownState.agGridComplexWhere) {
+        queryObject = {
+          ...queryObject,
+          extras: {
+            ...(queryObject.extras || {}),
+            where: ownState.agGridComplexWhere,
+          },
+        };
+      }
     }
 
     // Now since row limit control is always visible even

superset-frontend/plugins/plugin-chart-ag-grid-table/src/types.ts

@@ -132,12 +132,21 @@ export type SearchOption = {
   label: string;
 };
 
+export interface AgGridColumnFilter {
+  col: string;
+  op: string;
+  val: any;
+}
+
 export interface ServerPaginationData {
   pageSize?: number;
   currentPage?: number;
   sortBy?: SortByItem[];
   searchText?: string;
   searchColumn?: string;
+  agGridFilterModel?: Record<string, any>; // Raw AG Grid filter model for state restoration
+  agGridSimpleFilters?: AgGridColumnFilter[];
+  agGridComplexWhere?: string;
 }
 
 export interface AgGridTableChartTransformedProps<