@adaptabletools/adaptable 21.0.12 → 21.1.0-canary.1

package/src/agGrid/AdaptableAgGrid.js

@@ -8,7 +8,7 @@ import Emitter from '../Utilities/Emitter';
 import { applyDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
 import { AgGridAdapter } from './AgGridAdapter';
 import * as GeneralConstants from '../Utilities/Constants/GeneralConstants';
-import { AG_GRID_GRAND_TOTAL_ROW_ID, AUTOGENERATED_PK_COLUMN, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
+import { AG_GRID_GRAND_TOTAL_ROW_ID, AG_GRID_GROUPED_COLUMN, AUTOGENERATED_PK_COLUMN, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
@@ -99,6 +99,9 @@ import { AgGridThemeAdapter } from './AgGridThemeAdapter';
 import { mapOldTypeToDataType } from '../migration/VersionUpgrade20';
 import { tagProvidedByAdaptable } from '../Utilities/adaptableOverrideCheck';
 import { AgGridModulesAdapter } from './AgGridModulesAdapter';
+import { getMarker } from '../devTools';
+import { DeepMap } from '@infinite-table/infinite-react';
+import { DateFormatter } from '../Utilities/Helpers/FormatHelper';
 const LocalEventService_Prototype = LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
 LocalEventService_Prototype.dispatchEvent = function (event) {
@@ -277,6 +280,8 @@ export class AdaptableAgGrid {
             this._rawAdaptableOptions.adaptableId = `adaptable_id_${Date.now()}`;
         }
         this.logger = this.logger ?? new AdaptableLogger(this._rawAdaptableOptions.adaptableId);
+        const adaptableId = this._rawAdaptableOptions.adaptableId;
+        const initMarker = getMarker(adaptableId).track.Init.label.Init.start();
         const perfInitAdaptableAgGrid = this.logger.beginPerf(`Adaptable._initAdaptableAgGrid()`);
         AdaptableAgGrid.collectInstance(this, this._rawAdaptableOptions.adaptableId);
         this.variant = config.variant;
@@ -314,6 +319,7 @@ export class AdaptableAgGrid {
         this.forPlugins((plugin) => plugin.afterInitServices(this));
         this.adaptableModules = this.initModules();
         this.forPlugins((plugin) => plugin.afterInitModules(this, this.adaptableModules));
+        const loadStoreMarker = getMarker(adaptableId).track.Init.label.LoadStore.start();
         const perfLoadStore = this.logger.beginPerf(`loadStore()`);
         this.adaptableStore = this.initAdaptableStore();
         this.forPlugins((plugin) => plugin.afterInitStore(this));
@@ -340,6 +346,7 @@ export class AdaptableAgGrid {
             },
         });
         perfLoadStore.end();
+        loadStoreMarker.end();
         // just in case Adaptable was destroyed while loading the store (which is an async operation)
         if (this.isDestroyed) {
             this.midwayDestroy();
@@ -386,6 +393,7 @@ export class AdaptableAgGrid {
         this.lifecycleState = 'initAgGrid';
         this.agGridAdapter.initialGridOptions = gridOptions;
         const perfInitAgGrid = this.logger.beginPerf(`initAgGrid()`);
+        const initAgGridMarker = getMarker(adaptableId).track.Init.label.InitAGGrid.start();
         this.validateColumnDefTypes(gridOptions.columnDefs);
         const agGridApi = await this.initializeAgGrid(gridOptions, config.modules, config.renderAgGridFrameworkComponent);
         if (agGridApi === false) {
@@ -419,6 +427,7 @@ export class AdaptableAgGrid {
         this.logger.info(`Hide Loading Screen`);
         this.unmountLoadingScreen?.();
         perfInitAgGrid.end();
+        initAgGridMarker.end();
         // we need to intercept several AG Grid Api methods and trigger Adaptable state changes
         this.agGridAdapter.setAgGridApi(agGridApi);
         this.agGridAdapter.monkeyPatchingGridOptionsUpdates();
@@ -494,6 +503,7 @@ export class AdaptableAgGrid {
             });
         });
         perfInitAdaptableAgGrid.end();
+        initMarker.end();
         return Promise.resolve(this.api);
     }
     midwayDestroy() {
@@ -550,6 +560,36 @@ You need to define at least one Layout!`);
             // eg: might not include the generated row group columns in the column order
             // but the normalization does this for us
             state.Layout.Layouts = state.Layout.Layouts.map((layout) => normalizeLayout(layout, normalizeOptions));
+            //now let's normalize the In/NotIn predicate for the group column
+            // the inputs in this predicate should be an array of arrays
+            // but for ease of use (and also for similarity with the In predicate for
+            // other columns) we allow the inputs to be an array of strings
+            // and change them to an array of arrays
+            state.Layout.Layouts = state.Layout.Layouts.map((layout) => {
+                if (Array.isArray(layout.ColumnFilters)) {
+                    layout.ColumnFilters = layout.ColumnFilters.map((columnFilter) => {
+                        if (columnFilter.ColumnId === AG_GRID_GROUPED_COLUMN) {
+                            if (Array.isArray(columnFilter.Predicates)) {
+                                columnFilter.Predicates = columnFilter.Predicates.map((predicate) => {
+                                    if (predicate.PredicateId === 'In' || predicate.PredicateId === 'NotIn') {
+                                        if (Array.isArray(predicate.Inputs)) {
+                                            predicate.Inputs = predicate.Inputs.map((input) => {
+                                                if (!Array.isArray(input)) {
+                                                    return [input];
+                                                }
+                                                return input;
+                                            });
+                                        }
+                                    }
+                                    return predicate;
+                                });
+                            }
+                        }
+                        return columnFilter;
+                    });
+                }
+                return layout;
+            });
         }
         return state;
     }
@@ -1288,6 +1328,7 @@ You need to define at least one Layout!`);
     }
     initAdaptableStore() {
         const perfNewAdaptableStore = this.logger.beginPerf(`initAdaptableStore()`);
+        const initAdaptableStoreMarker = getMarker(this.adaptableOptions.adaptableId).track.Init.label.InitStore.start();
         const adaptableStore = new AdaptableStore(this);
         adaptableStore.onAny((eventName, data) => {
             if (this.isReady) {
@@ -1296,6 +1337,7 @@ You need to define at least one Layout!`);
             this.forPlugins((plugin) => plugin.onStoreEvent(eventName, data, this.adaptableStore));
         });
         perfNewAdaptableStore.end();
+        initAdaptableStoreMarker.end();
         return adaptableStore;
     }
     mapAdaptableStateToAgGridState(adaptableState, agGridColDefs, options) {
@@ -1714,12 +1756,12 @@ You need to define at least one Layout!`);
     /**
      * Use (lazy evaluated) getters to avoid unnecessary calculations and memoization to avoid recalculating the same values
      */
-    createGridCell(rowNode, columnId) {
+    createGridCell(rowNode, columnId, defaults) {
         let _column;
         let _primaryKeyValue;
-        let _rawValue;
-        let _displayValue;
-        let _normalisedValue;
+        let _rawValue = defaults ? defaults.rawValue : undefined;
+        let _displayValue = defaults ? defaults.displayValue : undefined;
+        let _normalisedValue = defaults ? defaults.normalisedValue : undefined;
         let _isRowGroupCell;
         const _isPivotCell = this.api.columnApi.isPivotResultColumn(columnId);
         const self = this;
@@ -2316,7 +2358,41 @@ You need to define at least one Layout!`);
             if (currentGridCells) {
                 return currentGridCells;
             }
-            return (currentGridCells = this.getDistinctGridCellsForColumn(column));
+            return (currentGridCells =
+                column.columnId === AG_GRID_GROUPED_COLUMN
+                    ? this.getDistinctGridCellsForGroupedColumn()
+                    : column.dataType === 'date'
+                        ? this.getDistinctGridCellsForDateColumn(column)
+                        : this.getDistinctGridCellsForColumn(column));
+        };
+        // No distinct values so lets return unique grid cells
+        const mapFn = (gridCell, level) => {
+            if (level || Array.isArray(gridCell.children)) {
+                const cell = gridCell;
+                const inFilterValue = {
+                    value: gridCell.rawValue,
+                    label: gridCell.displayValue,
+                    level: level ?? 0,
+                    tooltip: false,
+                    get visible() {
+                        return gridCell.visible;
+                    },
+                    count: gridCell.count ?? 0,
+                    leafChildrenCount: cell.leafChildrenCount ?? 0,
+                    get visibleCount() {
+                        return gridCell.visibleCount ?? 0;
+                    },
+                    isSelected: gridCell.rowNode.displayed,
+                    children: cell.children
+                        ? cell.children.map((v) => mapFn(v, level ? level + 1 : 1))
+                        : undefined,
+                };
+                return inFilterValue;
+            }
+            return {
+                value: gridCell.rawValue,
+                label: gridCell.displayValue,
+            };
         };
         // If there are custom distinct value, return them; otherwise return the Grids Cells just retrieved
         const customInFilterValues = this.adaptableOptions.filterOptions.customInFilterValues;
@@ -2337,13 +2413,21 @@ You need to define at least one Layout!`);
                             label: gridCell.displayValue,
                             value: gridCell.rawValue,
                             isSelected: gridCell.rowNode.displayed,
-                            count: gridCell.count,
+                            count: gridCell.count ?? 0,
                             tooltip: false,
+                            level: 0,
+                            leafChildrenCount: gridCell.leafChildrenCount ?? 0,
+                            get children() {
+                                if (!gridCell.children) {
+                                    return undefined;
+                                }
+                                return gridCell.children.map((gridCell) => mapFn(gridCell, 1));
+                            },
                             get visible() {
                                 return gridCell.visible;
                             },
                             get visibleCount() {
-                                return gridCell.visibleCount;
+                                return gridCell.visibleCount ?? 0;
                             },
                         };
                     });
@@ -2355,13 +2439,21 @@ You need to define at least one Layout!`);
                             label: gridCell.displayValue,
                             value: gridCell.rawValue,
                             isSelected: gridCell.rowNode.displayed,
-                            count: gridCell.count,
+                            count: gridCell.count ?? 0,
                             tooltip: false,
+                            level: 0,
+                            leafChildrenCount: gridCell.leafChildrenCount ?? 0,
+                            get children() {
+                                if (!gridCell.children) {
+                                    return undefined;
+                                }
+                                return gridCell.children.map((gridCell) => mapFn(gridCell, 1));
+                            },
                             get visible() {
                                 return gridCell.visible;
                             },
                             get visibleCount() {
-                                return gridCell.visibleCount;
+                                return gridCell.visibleCount ?? 0;
                             },
                         };
                     });
@@ -2377,6 +2469,14 @@ You need to define at least one Layout!`);
                             isSelected: gridCell.rowNode.displayed,
                             count: gridCell.count,
                             tooltip: false,
+                            level: 0,
+                            get children() {
+                                if (!gridCell.children) {
+                                    return undefined;
+                                }
+                                return gridCell.children.map((gridCell) => mapFn(gridCell, 1));
+                            },
+                            leafChildrenCount: gridCell.leafChildrenCount ?? 0,
                             get visible() {
                                 return gridCell.visible;
                             },
@@ -2397,14 +2497,7 @@ You need to define at least one Layout!`);
             }
             return customInFilterValuesResult;
         }
-        // No distinct values so lets return unique grid cells
-        const values = getCurrentGridCells().map((gridCell) => {
-            const inFilterValue = {
-                value: gridCell.rawValue,
-                label: gridCell.displayValue,
-            };
-            return inFilterValue;
-        });
+        const values = getCurrentGridCells().map((gridCell) => mapFn(gridCell));
         return { values };
     }
     async getDistinctEditValuesForColumn(options) {
@@ -2454,6 +2547,218 @@ You need to define at least one Layout!`);
             return result;
         });
     }
+    getDistinctGridCellsForGroupedColumn(rowNodes) {
+        const groupedColumns = this.api.columnApi.getRowGroupedColumns();
+        const treeMode = this.api.gridApi.isTreeDataGrid();
+        // if we're not in tree mode, return if there are no grouped columns
+        // but in tree mode, we have to continue, even if there are no grouped columns
+        if (!groupedColumns.length && !treeMode) {
+            return [];
+        }
+        let prevLevel = -1;
+        const currentGroupKey = [];
+        const currentParentGridCells = [];
+        const topLevelGridCells = [];
+        const includeLeafNodes = treeMode || !!this.agGridAdapter.getAgGridApi().getColumnDef(AG_GRID_GROUPED_COLUMN)?.field;
+        const rowNodeCallback = (rowNode) => {
+            if (!rowNode.group && !includeLeafNodes) {
+                return;
+            }
+            const level = rowNode.level;
+            const key = rowNode.key;
+            if (level <= prevLevel) {
+                currentGroupKey.length = level;
+                currentParentGridCells.length = level;
+            }
+            prevLevel = level;
+            // for non-tree mode
+            // or for tree mode, if the rowNode has data - so it's not a filler group
+            if (!treeMode || (treeMode && rowNode.data)) {
+                currentGroupKey.push(key);
+            }
+            const parentGridCell = currentParentGridCells[currentParentGridCells.length - 1];
+            const gridCell = this.addDistinctColumnValue(rowNode, AG_GRID_GROUPED_COLUMN, false);
+            // for tree-mode filler nodes, we might end up without a gridCell
+            // so we need to make sure it's defined
+            if (gridCell) {
+                gridCell.leafChildrenCount = rowNode.allLeafChildren?.length ?? 0;
+                currentParentGridCells.push(gridCell);
+                if (parentGridCell) {
+                    parentGridCell.children = parentGridCell.children || [];
+                    parentGridCell.children.push(gridCell);
+                }
+                if (level === 0 && gridCell) {
+                    topLevelGridCells.push(gridCell);
+                }
+            }
+        };
+        if (rowNodes) {
+            rowNodes.forEach(rowNodeCallback);
+        }
+        else {
+            this.agGridAdapter.getAgGridApi().forEachNode(rowNodeCallback);
+        }
+        const column = this.api.columnApi.getColumnWithColumnId(AG_GRID_GROUPED_COLUMN);
+        return this.getUniqueGridCells(column, topLevelGridCells);
+    }
+    getDistinctGridCellsForDateColumn(column, rowNodes) {
+        const topLevelGridCells = [];
+        const treeDeepMap = new DeepMap();
+        const isPivotResultColumn = column.isGeneratedPivotResultColumn;
+        const includeTime = this.api.predicateApi.internalApi.shouldEvaluateInPredicateUsingTime(column.columnId);
+        const colId = column.columnId;
+        const rowNodeCallback = (rowNode) => {
+            if (!rowNode) {
+                return;
+            }
+            const initialCell = this.addDistinctColumnValue(rowNode, column.columnId, isPivotResultColumn);
+            if (initialCell) {
+                const value = initialCell.rawValue;
+                // we want to filter out empty values
+                if (value === '' || value === null || value === undefined) {
+                    return;
+                }
+                const dateInstance = parseDateValue(value);
+                if (!(dateInstance instanceof Date)) {
+                    return;
+                }
+                const year = dateInstance.getFullYear();
+                const month = dateInstance.getMonth() + 1;
+                const day = dateInstance.getDate();
+                const yearRawValue = `${year}`;
+                const monthRawValue = `${year}-${`${month}`.padStart(2, '0')}`;
+                const dayRawValue = `${monthRawValue}-${`${day}`.padStart(2, '0')}`;
+                const yearCells = treeDeepMap.get([year]) || [];
+                const yearCell = this.createGridCell(rowNode, colId, {
+                    rawValue: yearRawValue,
+                    displayValue: yearRawValue,
+                    normalisedValue: yearRawValue,
+                });
+                yearCells.push(yearCell);
+                treeDeepMap.set([year], yearCells);
+                const monthCells = treeDeepMap.get([year, month]) || [];
+                const monthCell = this.createGridCell(rowNode, colId, {
+                    rawValue: monthRawValue,
+                    displayValue: DateFormatter(`${monthRawValue}-01`, { Pattern: 'LLLL' }),
+                    normalisedValue: monthRawValue,
+                });
+                monthCells.push(monthCell);
+                treeDeepMap.set([year, month], monthCells);
+                const dayCells = treeDeepMap.get([year, month, day]) || [];
+                const dayCell = this.createGridCell(rowNode, colId, {
+                    rawValue: dayRawValue,
+                    displayValue: `${day}`.padStart(2, '0'),
+                    normalisedValue: dayRawValue,
+                });
+                dayCells.push(dayCell);
+                treeDeepMap.set([year, month, day], dayCells);
+                if (includeTime) {
+                    const timeCells = treeDeepMap.get([year, month, day, dateInstance.getTime()]) || [];
+                    // if the value is a string, let's use it as the final raw value
+                    const timeRawValue = typeof value === 'string' ? value : `${dateInstance.toISOString()}`;
+                    let timeDisplayValue = typeof value === 'string'
+                        ? value
+                        : [dateInstance.getHours(), dateInstance.getMinutes(), dateInstance.getSeconds()]
+                            .map((v) => `${v}`.padStart(2, '0'))
+                            .join(':')
+                            .concat(dateInstance.getMilliseconds()
+                            ? `.${dateInstance.getMilliseconds().toString().padStart(3, '0')}`
+                            : '');
+                    const timeCell = this.createGridCell(rowNode, colId, {
+                        rawValue: timeRawValue,
+                        displayValue: timeDisplayValue,
+                        normalisedValue: timeRawValue,
+                    });
+                    timeCells.push(timeCell);
+                    treeDeepMap.set([year, month, day, dateInstance.getTime()], timeCells);
+                }
+            }
+        };
+        if (rowNodes) {
+            rowNodes.forEach(rowNodeCallback);
+        }
+        else {
+            this.agGridAdapter.getAgGridApi().forEachNode(rowNodeCallback);
+        }
+        const years = treeDeepMap.getKeysStartingWith([], {
+            excludeSelf: true,
+            depthLimit: 1,
+        });
+        for (const keys of years) {
+            const [year] = keys;
+            const yearCells = treeDeepMap.get([year]) || [];
+            // should only be one item in the uniqueYearCells array
+            const uniqueYearCell = this.getUniqueGridCells(column, yearCells)[0];
+            if (!uniqueYearCell) {
+                continue;
+            }
+            uniqueYearCell.children = [];
+            topLevelGridCells.push(uniqueYearCell);
+            const keysForYear = treeDeepMap.getKeysStartingWith([year], {
+                depthLimit: 1,
+                excludeSelf: true,
+            });
+            for (const keys of keysForYear) {
+                const [_, month] = keys;
+                const monthCells = treeDeepMap.get([year, month]) || [];
+                const uniqueMonthCell = this.getUniqueGridCells(column, monthCells)[0];
+                if (!uniqueMonthCell) {
+                    continue;
+                }
+                uniqueMonthCell.children = [];
+                uniqueYearCell.children.push(uniqueMonthCell);
+                // those are all the days for which there are values in this year/month
+                const keysForMonth = treeDeepMap.getKeysStartingWith([year, month], {
+                    depthLimit: 1,
+                    excludeSelf: true,
+                });
+                for (const keys of keysForMonth) {
+                    const [_, __, day] = keys;
+                    const dayCells = treeDeepMap.get([year, month, day]) || [];
+                    const uniqueDayCell = this.getUniqueGridCells(column, dayCells)[0];
+                    if (!uniqueDayCell) {
+                        continue;
+                    }
+                    uniqueMonthCell.children.push(uniqueDayCell);
+                    if (includeTime) {
+                        uniqueDayCell.children = [];
+                        const keysForDay = treeDeepMap.getKeysStartingWith([year, month, day], {
+                            depthLimit: 1,
+                            excludeSelf: true,
+                        });
+                        for (const keys of keysForDay) {
+                            const [_, __, ___, time] = keys;
+                            const timeCells = treeDeepMap.get([year, month, day, time]) || [];
+                            const uniqueTimeCell = this.getUniqueGridCells(column, timeCells)[0];
+                            if (!uniqueTimeCell) {
+                                continue;
+                            }
+                            uniqueDayCell.children.push(uniqueTimeCell);
+                        }
+                        uniqueDayCell.leafChildrenCount =
+                            treeDeepMap.getKeysForLeafNodesStartingWith([year, month, day]).length;
+                        uniqueDayCell.children.sort((dayCell1, dayCell2) => {
+                            return dayCell1.rawValue.localeCompare(dayCell2.rawValue);
+                        });
+                    }
+                }
+                uniqueMonthCell.leafChildrenCount =
+                    treeDeepMap.getKeysForLeafNodesStartingWith([year, month]).length;
+                uniqueMonthCell.children.sort((monthCell1, monthCell2) => {
+                    return monthCell1.rawValue.localeCompare(monthCell2.rawValue);
+                });
+            }
+            uniqueYearCell.leafChildrenCount =
+                treeDeepMap.getKeysForLeafNodesStartingWith([year]).length;
+            uniqueYearCell.children.sort((monthCell1, monthCell2) => {
+                return monthCell1.rawValue.localeCompare(monthCell2.rawValue);
+            });
+        }
+        topLevelGridCells.sort((yearCell1, yearCell2) => {
+            return yearCell1.rawValue.localeCompare(yearCell2.rawValue);
+        });
+        return topLevelGridCells;
+    }
     getDistinctGridCellsForColumn(column, rowNodes) {
         let gridCells = [];
         const isPivotResultColumn = column.isGeneratedPivotResultColumn;
@@ -2490,10 +2795,17 @@ You need to define at least one Layout!`);
                     // see https://www.ag-grid.com/javascript-data-grid/tree-data-paths/#filler-groups
                     return;
                 }
+                // if (columnId !== AG_GRID_GROUPED_COLUMN) {
+                //   return;
+                // }
+                return this.getGridCellFromRowNode(rowNode, columnId);
             }
             else {
                 // for normal Table Columns we do NOT return the values of the aggregates
-                return;
+                if (columnId !== AG_GRID_GROUPED_COLUMN) {
+                    return;
+                }
+                return this.getGridCellFromRowNode(rowNode, columnId);
             }
         }
         if (isPivotResultColumn) {
@@ -2507,14 +2819,12 @@ You need to define at least one Layout!`);
             }
         }
         const returnValue = this.getGridCellFromRowNode(rowNode, columnId);
-        if (Helper.objectExists(returnValue)) {
-            return returnValue;
-        }
+        return returnValue;
     }
     getUniqueGridCells(column, gridCells) {
         let gridCellsToUse = gridCells;
         const cache = new Map();
-        const lowercase = this.api.predicateApi.useCaseSensitivity();
+        const lowercase = this.api.predicateApi.useCaseSensitivity(column.columnId);
         const getter = (dataItem) => {
             let value = dataItem.rawValue;
             if (value instanceof Date) {
@@ -3260,6 +3570,7 @@ You need to define at least one Layout!`);
         const prevLayout = this._prevLayout;
         this._prevLayout = layout;
         const perfSetLayout = this.logger.beginPerf(`setLayout(${layout.Name})`);
+        const setLayoutMarker = getMarker(this.adaptableOptions.adaptableId).track.Runtime.label.SetLayout.start();
         const isPivot = isPivotLayout(layout);
         // update the header name for all columns
         this.agGridAdapter
@@ -3311,6 +3622,22 @@ You need to define at least one Layout!`);
             }
         });
         perfSetLayout.end();
+        setLayoutMarker.end({
+            details: [
+                {
+                    name: 'Layout name',
+                    value: layout.Name,
+                },
+                {
+                    name: 'Type',
+                    value: isPivot ? 'Pivot' : 'Table',
+                },
+                {
+                    name: isPivot ? 'Pivot Columns' : 'Table Columns',
+                    value: isPivot ? layout.PivotColumns.join(', ') : layout.TableColumns.join(', '),
+                },
+            ],
+        });
     }
     getActiveAdaptableAggFuncForCol(columnId) {
         if (!columnId) {
@@ -3619,7 +3946,7 @@ You need to define at least one Layout!`);
         return hasPivotTotals(one) || hasPivotTotals(other);
     }
     onLayoutChange(layout) {
-        this.refreshAdaptableAfterLayoutChange(layout);
+        layout = this.refreshAdaptableAfterLayoutChange(layout);
         this.api.layoutApi.createOrUpdateLayout(layout);
     }
     refreshAdaptableAfterLayoutChange(layout) {
@@ -3627,6 +3954,15 @@ You need to define at least one Layout!`);
         const prevLayoutForRefresh = this.__prevLayoutForRefresh || this.api.layoutApi.getCurrentLayout();
         // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
         const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevLayoutForRefresh, layout);
+        // when grouping changes, if we have a filter on the grouped column, we need to remove it
+        // as it is no longer valid
+        if (rowGroupsChanged && layout.ColumnFilters) {
+            const newFilters = layout.ColumnFilters.filter((filter) => filter.ColumnId !== AG_GRID_GROUPED_COLUMN);
+            if (newFilters.length != layout.ColumnFilters.length) {
+                layout = { ...layout };
+                layout.ColumnFilters = newFilters;
+            }
+        }
         const hasPivotTotalsInLayout = this.hasPivotTotalsInLayout(prevLayoutForRefresh, layout);
         const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevLayoutForRefresh.PivotColumns);
         if (rowGroupsChanged || pivotColsChanged || hasPivotTotalsInLayout) {
@@ -3636,6 +3972,7 @@ You need to define at least one Layout!`);
             this.deriveAdaptableColumnStateFromAgGrid();
         }
         this.__prevLayoutForRefresh = layout;
+        return layout;
     }
     validateColumnDefTypes(columnDefs) {
         // in Adaptable version 20 we switched from colDef.type to colDef.cellDataType

package/src/agGrid/AdaptableFilterHandler.d.ts

@@ -2,12 +2,14 @@ import { DoesFilterPassParams, FilterHandler, FilterHandlerParams } from 'ag-gri
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { ColumnSetupInfo } from '../AdaptableState/Common/ColumnSetupInfo';
 import { InFilterValueResult } from '../AdaptableOptions/FilterOptions';
+import { ColumnFilter } from '../types';
 export declare class AdaptableFilterHandler implements FilterHandler {
     private adaptableApi;
     readonly colId: string;
     private filterDisplayValuesResult;
     private previousFilterDisplayValuesResult;
     constructor(adaptableApi: AdaptableApi, columnSetup: ColumnSetupInfo);
+    getCurrentColumnFilters(): ColumnFilter[];
     doesFilterPass(params: DoesFilterPassParams): boolean;
     getCachedFilterDisplayValues(): InFilterValueResult | undefined;
     getLastCachedFilterDisplayValues(): InFilterValueResult | undefined;
@@ -21,6 +23,6 @@ export declare class AdaptableFilterHandler implements FilterHandler {
     onAnyFilterChanged(): void;
     resetFilterDisplayValues(): void;
     refreshFilterDisplayValues(): Promise<InFilterValueResult>;
-    refresh(params: FilterHandlerParams<any, any, any, any>): void;
+    refresh(_params: FilterHandlerParams<any, any, any, any>): void;
     destroy(): void;
 }

package/src/agGrid/AdaptableFilterHandler.js

@@ -3,6 +3,17 @@ export class AdaptableFilterHandler {
         this.adaptableApi = adaptableApi;
         this.colId = columnSetup.colId;
     }
+    getCurrentColumnFilters() {
+        const columnFilters = this.adaptableApi.filterApi.columnFilterApi
+            .getActiveColumnFilters()
+            .filter((columnFilter) => this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter))
+            .filter((columnFilter) => columnFilter.ColumnId === this.colId)
+            .filter((columnFilter) => {
+            const shouldEvaluateFilterOnClient = this.adaptableApi.expressionApi.internalApi.shouldEvaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Predicates);
+            return shouldEvaluateFilterOnClient;
+        });
+        return columnFilters;
+    }
     doesFilterPass(params) {
         try {
             const rowNode = params.node;
@@ -11,15 +22,11 @@ export class AdaptableFilterHandler {
             if (!isRowFilterable) {
                 return true;
             }
-            const columnFilters = this.adaptableApi.filterApi.columnFilterApi
-                .getActiveColumnFilters()
-                .filter((columnFilter) => this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter))
-                .filter((columnFilter) => columnFilter.ColumnId === this.colId)
-                .filter((columnFilter) => {
-                const shouldEvaluateFilterOnClient = this.adaptableApi.expressionApi.internalApi.shouldEvaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Predicates);
-                return shouldEvaluateFilterOnClient;
+            const columnFilters = this.getCurrentColumnFilters();
+            const anyFilterFailed = columnFilters.some((columnFilter) => {
+                const result = !this.adaptableApi.filterApi.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, rowNode);
+                return result;
             });
-            const anyFilterFailed = columnFilters.some((columnFilter) => !this.adaptableApi.filterApi.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, rowNode));
             return anyFilterFailed ? false : true;
         }
         catch (ex) {
@@ -77,10 +84,7 @@ export class AdaptableFilterHandler {
         this.resetFilterDisplayValues();
         return this.getFromCacheOrFetchFilterDisplayValues({ currentSearchValue: '' });
     }
-    refresh(params) {
-        // No specific refresh logic needed for this handler
-        // The filter display values will be reset on new rows loaded or any filter changed
-    }
+    refresh(_params) { }
     destroy() {
         this.filterDisplayValuesResult = undefined;
         this.previousFilterDisplayValuesResult = undefined;