update: filters ux improvement

Author: amaannawab923

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

@@ -19,7 +19,7 @@
  * 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 FilterIcon from './Filter';
@@ -61,7 +61,7 @@ const CustomHeader: React.FC<CustomHeaderParams> = ({
   column,
   api,
 }) => {
-  const { initialSortState, onColumnHeaderClicked } = context;
+  const { initialSortState, onColumnHeaderClicked, lastFilteredColumn, activeFilterColumns } = context;
   const colId = column?.getColId();
   const colDef = column?.getColDef() as CustomColDef;
   const userColDef = column.getUserProvidedColDef() as UserProvidedColDef;
@@ -70,7 +70,19 @@ const CustomHeader: React.FC<CustomHeaderParams> = ({
   const [isFilterVisible, setFilterVisible] = useState(false);
   const [isMenuVisible, setMenuVisible] = useState(false);
   const filterRef = useRef<HTMLDivElement>(null);
-  const isFilterActive = column?.isFilterActive();
+  const filterButtonRef = useRef<HTMLDivElement>(null);
+  // Use activeFilterColumns from context as reliable backup for AG Grid's isFilterActive
+  const isFilterActive = column?.isFilterActive() || (colId ? activeFilterColumns?.has(colId) : false);
+
+  // Auto-open filter popover if this column was last filtered
+  useEffect(() => {
+    setTimeout(() => {
+      if (lastFilteredColumn === colId && !isFilterVisible) {
+        handleFilterClick(undefined)
+      }
+    }, 200)
+    
+  }, [lastFilteredColumn, colId]);
 
   const currentSort = initialSortState?.[0];
   const isMain = userColDef?.isMain;
@@ -102,8 +114,10 @@ const CustomHeader: React.FC<CustomHeaderParams> = ({
     else clearSort();
   };
 
-  const handleFilterClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleFilterClick = async (e: React.MouseEvent | undefined) => {
+    if(e) {
+      e?.stopPropagation();
+    }
     setFilterVisible(!isFilterVisible);
 
     const filterInstance = await api.getColumnFilterInstance<any>(column);
@@ -161,6 +175,7 @@ const CustomHeader: React.FC<CustomHeaderParams> = ({
         onClose={() => setFilterVisible(false)}
       >
         <FilterIconWrapper
+          ref={filterButtonRef}
           className="header-filter"
           onClick={handleFilterClick}
           isFilterActive={isFilterActive}

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

@@ -76,7 +76,7 @@ export interface AgGridTableProps {
   onSearchColChange: (searchCol: string) => void;
   onSearchChange: (searchText: string) => void;
   onSortChange: (sortBy: SortByItem[]) => void;
-  onAgGridColumnFiltersChange?: (filterModel: AgGridFilterModel) => void;
+  onAgGridColumnFiltersChange?: (filterModel: AgGridFilterModel, lastFilteredColumn?: string) => void;
   id: number;
   percentMetrics: string[];
   serverPageLength: number;
@@ -289,6 +289,12 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
       }
     }, [serverPaginationData?.agGridFilterModel, serverPagination]);
 
+    // Calculate active filter columns from ownState filter model
+    const activeFilterColumns = useMemo(() => {
+      const filterModel = serverPaginationData?.agGridFilterModel || {};
+      return new Set(Object.keys(filterModel));
+    }, [serverPaginationData?.agGridFilterModel]);
+
     const onGridReady = (params: GridReadyEvent) => {
       // This will make columns fill the grid width
       params.api.sizeColumnsToFit();
@@ -315,6 +321,23 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
         return;
       }
 
+      // Determine which column was just filtered by comparing models
+      const previousModel = serverPaginationData?.agGridFilterModel || {};
+      let lastFilteredColumn: string | undefined;
+
+      // Find the column that changed
+      const allColumns = new Set([
+        ...Object.keys(filterModel),
+        ...Object.keys(previousModel),
+      ]);
+
+      for (const colId of allColumns) {
+        if (!isEqual(filterModel[colId], previousModel[colId])) {
+          lastFilteredColumn = colId;
+          break; // Use the first changed column
+        }
+      }
+
       // Convert AG Grid filters to SQLAlchemy format
       const convertedFilters = convertAgGridFiltersToSQL(
         filterModel as AgGridFilterModel,
@@ -327,7 +350,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
 
       // Call the handler to update ownState if server pagination is enabled
       if (onAgGridColumnFiltersChange && serverPagination) {
-        onAgGridColumnFiltersChange(filterModel as AgGridFilterModel);
+        onAgGridColumnFiltersChange(filterModel as AgGridFilterModel, lastFilteredColumn);
       }
     }, [onAgGridColumnFiltersChange, serverPagination, serverPaginationData?.agGridFilterModel]);
 
@@ -480,6 +503,8 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
               serverPaginationData?.sortBy || [],
             ),
             isActiveFilterValue,
+            lastFilteredColumn: serverPaginationData?.lastFilteredColumn, // Pass last filtered column for auto-opening popover
+            activeFilterColumns, // Pass active filter columns as reliable backup for isFilterActive
           }}
         />
         {serverPagination && (

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

@@ -196,10 +196,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         ...serverPaginationData,
         currentPage: pageNumber,
         pageSize,
+        lastFilteredColumn: undefined, // Clear filter popover state on pagination
       };
       updateTableOwnState(setDataMask, modifiedOwnState);
     },
-    [setDataMask],
+    [setDataMask, serverPaginationData],
   );
 
   const handlePageSizeChange = useCallback(
@@ -208,10 +209,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         ...serverPaginationData,
         currentPage: 0,
         pageSize,
+        lastFilteredColumn: undefined, // Clear filter popover state on page size change
       };
       updateTableOwnState(setDataMask, modifiedOwnState);
     },
-    [setDataMask],
+    [setDataMask, serverPaginationData],
   );
 
   const handleChangeSearchCol = (searchCol: string) => {
@@ -220,6 +222,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         ...(serverPaginationData || {}),
         searchColumn: searchCol,
         searchText: '',
+        lastFilteredColumn: undefined, // Clear filter popover state on search column change
       };
       updateTableOwnState(setDataMask, modifiedOwnState);
     }
@@ -233,10 +236,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
           serverPaginationData?.searchColumn || searchOptions[0]?.value,
         searchText,
         currentPage: 0, // Reset to first page when searching
+        lastFilteredColumn: undefined, // Clear filter popover state on search
       };
       updateTableOwnState(setDataMask, modifiedOwnState);
     },
-    [setDataMask, searchOptions],
+    [setDataMask, searchOptions, serverPaginationData],
   );
 
   const handleSortByChange = useCallback(
@@ -245,14 +249,15 @@ export default function TableChart<D extends DataRecord = DataRecord>(
       const modifiedOwnState = {
         ...serverPaginationData,
         sortBy,
+        lastFilteredColumn: undefined, // Clear filter popover state on sort
       };
       updateTableOwnState(setDataMask, modifiedOwnState);
     },
-    [setDataMask, serverPagination],
+    [setDataMask, serverPagination, serverPaginationData],
   );
 
   const handleAgGridColumnFiltersChange = useCallback(
-    (filterModel: AgGridFilterModel) => {
+    (filterModel: AgGridFilterModel, lastFilteredColumn?: string) => {
       if (!serverPagination) return;
 
       // Convert AG Grid filters to SQLAlchemy format
@@ -263,6 +268,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         agGridFilterModel: filterModel, // Store raw filter model for state restoration
         agGridSimpleFilters: converted.simpleFilters,
         agGridComplexWhere: converted.complexWhere,
+        lastFilteredColumn, // Track which column was filtered to keep popover open
         currentPage: 0, // Reset to first page when filtering
       };
 

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

@@ -147,6 +147,7 @@ export interface ServerPaginationData {
   agGridFilterModel?: Record<string, any>; // Raw AG Grid filter model for state restoration
   agGridSimpleFilters?: AgGridColumnFilter[];
   agGridComplexWhere?: string;
+  lastFilteredColumn?: string; // Track which column was last filtered to keep popover open
 }
 
 export interface AgGridTableChartTransformedProps<
@@ -200,6 +201,9 @@ export interface SortState {
 export interface CustomContext {
   initialSortState: SortState[];
   onColumnHeaderClicked: (args: { column: SortState }) => void;
+  isActiveFilterValue: (key: string, val: DataRecordValue) => boolean;
+  lastFilteredColumn?: string; // Column that was last filtered (to keep popover open)
+  activeFilterColumns?: Set<string>; // Columns that have active filters (from ownState)
 }
 
 export interface CustomHeaderParams extends IHeaderParams {

superset-frontend/src/components/Chart/ChartRenderer.jsx

@@ -355,9 +355,16 @@ class ChartRenderer extends Component {
       ?.behaviors.find(behavior => behavior === Behavior.DrillToDetail)
       ? { inContextMenu: this.state.inContextMenu }
       : {};
-    // By pass no result component when server pagination is enabled & the table has a backend search query
+    // By pass no result component when server pagination is enabled & the table has:
+    // - a backend search query, OR
+    // - AG Grid column filters applied
+    const hasSearchQuery = (ownState?.searchText?.length || 0) > 0;
+    const hasAgGridFilters =
+      (ownState?.agGridSimpleFilters?.length || 0) > 0 ||
+      (ownState?.agGridComplexWhere?.length || 0) > 0;
+
     const bypassNoResult = !(
-      formData?.server_pagination && (ownState?.searchText?.length || 0) > 0
+      formData?.server_pagination && (hasSearchQuery || hasAgGridFilters)
     );
 
     return (