@adaptabletools/adaptable-cjs 19.2.3 → 20.0.0-canary.0

package/src/agGrid/AdaptableAgGrid.js

@@ -4,7 +4,7 @@ exports.AdaptableAgGrid = void 0;
 const tslib_1 = require("tslib");
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const core_1 = require("ag-grid-community");
+const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const AdaptableLogger_1 = require("./AdaptableLogger");
 const DocumentationLinkConstants_1 = require("../Utilities/Constants/DocumentationLinkConstants");
 const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
@@ -17,7 +17,7 @@ const DataService_1 = require("../Utilities/Services/DataService");
 const AdaptableStore_1 = require("../Redux/Store/AdaptableStore");
 const AdaptableApiImpl_1 = require("../Api/Implementation/AdaptableApiImpl");
 const Fdc3Service_1 = require("../Utilities/Services/Fdc3Service");
-const CellPopupService_1 = require("../Utilities/Services/CellPopupService");
+const AnnotationsService_1 = require("../Utilities/Services/AnnotationsService");
 const ChartingService_1 = require("../Utilities/Services/ChartingService");
 const ThemeService_1 = require("../Utilities/Services/ThemeService");
 const ValidationService_1 = require("../Utilities/Services/ValidationService");
@@ -72,7 +72,6 @@ const uuid_1 = require("../components/utils/uuid");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const AdaptableToolPanel_1 = require("../View/Components/ToolPanel/AdaptableToolPanel");
 const StatusBarState_1 = require("../PredefinedConfig/StatusBarState");
-const createAgStatusPanelComponent_1 = require("./createAgStatusPanelComponent");
 const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const AgGridMenuAdapter_1 = require("./AgGridMenuAdapter");
@@ -81,46 +80,33 @@ const renderReactRoot_1 = require("../renderReactRoot");
 const AgGridOptionsService_1 = require("./AgGridOptionsService");
 const DateHelper_1 = require("../Utilities/Helpers/DateHelper");
 const AgGridColumnAdapter_1 = require("./AgGridColumnAdapter");
-const uniqBy_1 = tslib_1.__importDefault(require("lodash/uniqBy"));
 const getScrollbarSize_1 = tslib_1.__importDefault(require("../Utilities/getScrollbarSize"));
 const AggregationColumns_1 = require("../PredefinedConfig/Common/AggregationColumns");
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
-const RowEditService_1 = require("../Utilities/Services/RowEditService");
-const weightedAverage_1 = require("./weightedAverage");
+const RowFormService_1 = require("../Utilities/Services/RowFormService");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
-const ObjectFactory_1 = tslib_1.__importStar(require("../Utilities/ObjectFactory"));
 const EnvVars_1 = require("../EnvVars");
 const AdaptableUpgradeHelper_1 = require("../migration/AdaptableUpgradeHelper");
 const Modal_1 = require("../components/Modal");
 const AdaptableLoadingScreen_1 = require("../View/Components/Popups/AdaptableLoadingScreen");
 const react_1 = require("react");
-const AdaptableHelper_1 = require("../Utilities/Helpers/AdaptableHelper");
-const buildSortedColumnStateForLayout_1 = require("./buildSortedColumnStateForLayout");
+const createAgStatusPanelComponent_1 = require("../Utilities/createAgStatusPanelComponent");
+const weightedAverage_1 = require("../Utilities/weightedAverage");
 const RowSummary_1 = require("../PredefinedConfig/Common/RowSummary");
 const FlashingCellService_1 = require("../Utilities/Services/FlashingCellService");
-const LocalEventService_Prototype = core_1.LocalEventService.prototype;
+const AgGridExportAdapter_1 = require("./AgGridExportAdapter");
+const LayoutHelpers_1 = require("../Api/Implementation/LayoutHelpers");
+const src_1 = require("../layout-manager/src");
+const isPivotLayoutModel_1 = require("../layout-manager/src/isPivotLayoutModel");
+const AdaptableColumn_1 = require("../PredefinedConfig/Common/AdaptableColumn");
+const agGridDataTypeDefinitions_1 = require("./agGridDataTypeDefinitions");
+const LocalEventService_Prototype = ag_grid_enterprise_1.LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
-const GridOptionsService_updateGridOptions = core_1.GridOptionsService.prototype.updateGridOptions;
-const EventService_Prototype = core_1.EventService.prototype;
-const EventService_wireBeans = EventService_Prototype.wireBeans;
-// AG GRID obfuscates its internals, this is (currently) the best way to get hold of its internal services
-const DANGER_AG_GRID_BEANS_MAP = {};
-EventService_Prototype.wireBeans = function (beans) {
-    var _a;
-    EventService_wireBeans.apply(this, arguments);
-    const gridId = (_a = beans === null || beans === void 0 ? void 0 : beans.context) === null || _a === void 0 ? void 0 : _a.getGridId();
-    if (!gridId) {
-        console.error('CRITICAL: No gridId found in beans, this should never happen!');
-    }
-    DANGER_AG_GRID_BEANS_MAP[gridId] = beans;
-};
 LocalEventService_Prototype.dispatchEvent = function (event) {
     LocalEventService_dispatchEvent.apply(this, arguments);
     if (event.type === 'cellChanged' || event.type === 'dataChanged') {
         const eventRowNode = event.node;
         const extractGridApiFromRowNode = (rowNode) => {
-            var _a;
-            const rowNodeApi = (_a = rowNode === null || rowNode === void 0 ? void 0 : rowNode.beans) === null || _a === void 0 ? void 0 : _a.gridApi;
+            const rowNodeApi = rowNode?.beans?.gridApi;
             if (!rowNodeApi) {
                 AdaptableLogger_1.AdaptableLogger.consoleErrorBase(`No GridAPI found in passed RowNode, this should never happen!`, rowNode);
             }
@@ -130,8 +116,7 @@ LocalEventService_Prototype.dispatchEvent = function (event) {
         // as this fn is shared by all instances
         if (eventRowNode) {
             AdaptableAgGrid.forEachAdaptable((adaptable) => {
-                var _a;
-                if (extractGridApiFromRowNode(eventRowNode) !== ((_a = adaptable.agGridAdapter) === null || _a === void 0 ? void 0 : _a.getAgGridApi(true))) {
+                if (extractGridApiFromRowNode(eventRowNode) !== adaptable.agGridAdapter?.getAgGridApi(true)) {
                     // the event is coming from another aggrid instance
                     // so IGNORE IT
                     return;
@@ -149,19 +134,15 @@ LocalEventService_Prototype.dispatchEvent = function (event) {
 const adaptableInstances = {};
 const publishTimestamp = Number(EnvVars_1.ADAPTABLE_PUBLISH_TIMESTAMP);
 class AdaptableAgGrid {
-    constructor() {
+    constructor(config) {
         /**
          * once layouts are properly handled with the new aggrid methods & events
          * we can remove this hack
          */
         this.previousAgGridLayoutState = '';
+        this.filteredOutPrimaryKeys = new Set();
         this.columnMinMaxValuesCache = {};
         this.renderReactRoot = (node, container) => (0, renderReactRoot_1.renderReactRoot)(node, container);
-        /**
-         * do NOT mutate this array reference, this is passed only initially to AG Grid and we can only change it's internal state
-         */
-        this.DANGER_excelStyles = [];
-        this.originalExcelStyles = [];
         /**
          * Temporary, these are MIGRATION technical debts, and should be removed as soon as possible
          */
@@ -193,9 +174,10 @@ class AdaptableAgGrid {
         this.lifecycleState = 'initial';
         this.emitter = new Emitter_1.default();
         this.agGridOptionsService = new AgGridOptionsService_1.AgGridOptionsService(this);
-        this.agGridAdapter = new AgGridAdapter_1.AgGridAdapter(this);
+        this.agGridAdapter = new AgGridAdapter_1.AgGridAdapter(this, config);
         this.agGridMenuAdapter = new AgGridMenuAdapter_1.AgGridMenuAdapter(this);
         this.agGridColumnAdapter = new AgGridColumnAdapter_1.AgGridColumnAdapter(this);
+        this.agGridExportAdapter = new AgGridExportAdapter_1.AgGridExportAdapter(this);
         this.DataService = new DataService_1.DataService(this);
     }
     static forEachAdaptable(fn) {
@@ -261,17 +243,20 @@ class AdaptableAgGrid {
         };
         if (promise && promise.then) {
             return promise.then(() => {
-                const adaptableInstance = new AdaptableAgGrid();
+                const adaptableInstance = new AdaptableAgGrid({
+                    getAgGridColumnApiModuleReference: config.getAgGridColumnApiModuleReference,
+                });
                 return doInit(adaptableInstance);
             });
         }
         else {
-            const adaptableInstance = new AdaptableAgGrid();
+            const adaptableInstance = new AdaptableAgGrid({
+                getAgGridColumnApiModuleReference: config.getAgGridColumnApiModuleReference,
+            });
             return doInit(adaptableInstance);
         }
     }
     async _initAdaptableAgGrid(config) {
-        var _a, _b;
         // Phase 1: Preprocess Adaptable Options
         this._isDetailGrid = config.isDetailGrid === true;
         this._isDetailGridForIndex = config.isDetailGridForRowIndex;
@@ -280,7 +265,7 @@ class AdaptableAgGrid {
         if (StringExtensions_1.default.IsNullOrEmptyOrWhiteSpace(this._rawAdaptableOptions.adaptableId)) {
             this._rawAdaptableOptions.adaptableId = `adaptable_id_${Date.now()}`;
         }
-        this.logger = (_a = this.logger) !== null && _a !== void 0 ? _a : new AdaptableLogger_1.AdaptableLogger(this._rawAdaptableOptions.adaptableId);
+        this.logger = this.logger ?? new AdaptableLogger_1.AdaptableLogger(this._rawAdaptableOptions.adaptableId);
         const perfInitAdaptableAgGrid = this.logger.beginPerf(`Adaptable._initAdaptableAgGrid()`);
         AdaptableAgGrid.collectInstance(this, this._rawAdaptableOptions.adaptableId);
         this.variant = config.variant;
@@ -289,10 +274,15 @@ class AdaptableAgGrid {
         this.hasAutogeneratedPrimaryKey = !!this._rawAdaptableOptions.autogeneratePrimaryKey;
         this.adaptableOptions = (0, DefaultAdaptableOptions_1.applyDefaultAdaptableOptions)(this._rawAdaptableOptions);
         this.adaptableOptions = this.normalizeAdaptableOptions(this.adaptableOptions);
-        const { showLoadingScreen, loadingScreenDelay, loadingScreenText, loadingScreenTitle } = this.adaptableOptions.userInterfaceOptions;
+        const { showLoadingScreen, loadingScreenDelay, loadingScreenText, loadingScreenTitle } = this.adaptableOptions.userInterfaceOptions.loadingScreenOptions;
         if (showLoadingScreen) {
             this.logger.info(`Show Loading Screen`);
-            const portalElement = (0, Modal_1.ensurePortalElement)();
+            // it's important to use ensureLoadingScreenPortalElement
+            // and not ensurePortalElement, because multiple adaptable instances share the same portal element
+            // so when displaying the second one, the react root associated to the portal element
+            // seems to be somewhat shared via the html element, so the portal element of the first one is destroyed
+            // resulting in the settings popup not being displayed anymore
+            const portalElement = (0, Modal_1.ensureLoadingScreenPortalElement)();
             if (portalElement) {
                 this.unmountLoadingScreen = this.renderReactRoot((0, react_1.createElement)(AdaptableLoadingScreen_1.AdaptableLoadingScreen, {
                     showLoadingScreen,
@@ -327,7 +317,7 @@ class AdaptableAgGrid {
             /**
              * This method is called after the store is loaded;
              * it allows to modify the state before it is used by the application
-             * e.g. adding default Layout, migrating deprecated state, etc.
+             * e.g. migrating deprecated state, etc.
              */
             postLoadHook: (state) => {
                 if (this.adaptableOptions.stateOptions.autoMigrateState) {
@@ -357,10 +347,20 @@ class AdaptableAgGrid {
         this.lifecycleState = 'setupAgGrid';
         const gridOptions = config.gridOptions;
         // Needed here because special column defs are required for deriving the adaptable column state
-        const columnDefs = this.getColumnDefinitionsInclSpecialColumns(gridOptions.columnDefs || []);
+        const columnDefs = this.agGridAdapter.getColumnDefinitionsInclSpecialColumns(gridOptions.columnDefs || []);
         gridOptions.columnDefs = columnDefs;
         this.setInitialGridOptions(gridOptions, config.variant);
-        gridOptions.initialState = this.mapAdaptableStateToAgGridState(this.adaptableStore.TheStore.getState(), gridOptions.columnDefs);
+        const { gridState: initialGridState, layoutModel } = this.mapAdaptableStateToAgGridState(this.adaptableStore.TheStore.getState(), gridOptions.columnDefs, { isTree: !!gridOptions.treeData });
+        gridOptions.initialState = initialGridState;
+        if (layoutModel) {
+            if ((0, isPivotLayoutModel_1.isPivotLayoutModel)(layoutModel)) {
+                gridOptions.pivotDefaultExpanded = layoutModel.PivotExpandLevel;
+            }
+            else {
+                gridOptions.groupDisplayType =
+                    layoutModel.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+            }
+        }
         this.lifecycleState = 'initAgGrid';
         this.agGridAdapter.initialGridOptions = gridOptions;
         const perfInitAgGrid = this.logger.beginPerf(`initAgGrid()`);
@@ -372,14 +372,40 @@ class AdaptableAgGrid {
             this.logger.consoleError(`Adaptable failed to initialize AG Grid!`);
             return Promise.reject('Adaptable failed to initialize AG Grid!');
         }
+        this.layoutManager = new src_1.LayoutManager({
+            gridApi: agGridApi,
+            debugId: this.adaptableOptions.adaptableId,
+        });
+        this.layoutManager.silentSetCurrentLayout(layoutModel, {
+            normalize: true,
+        });
+        // this shouldn't be needed
+        // but AG Grid has a bug, and in pivot layout,
+        // even if we provide an initial AG Grid state with
+        // the aggregations in the correct order,
+        // they will end up in the wrong order
+        // so we need to force the layout to be applied again
+        if ((0, isPivotLayoutModel_1.isPivotLayoutModel)(layoutModel)) {
+            this.layoutManager.setLayout(layoutModel, {
+                force: true,
+            });
+        }
+        this.layoutManager.onChange((layoutModel) => {
+            const currentLayout = this.api.layoutApi.getCurrentLayout();
+            const newLayoutObject = (0, LayoutHelpers_1.layoutModelToLayoutState)(layoutModel, currentLayout);
+            this.onLayoutChange(newLayoutObject);
+        });
+        this.layoutManager.onColumnDefsChanged(() => {
+            this.updateColumnModelAndRefreshGrid();
+        });
         this.logger.info(`Hide Loading Screen`);
-        (_b = this.unmountLoadingScreen) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.unmountLoadingScreen?.();
         perfInitAgGrid.end();
         // we need to intercept several AG Grid Api methods and trigger Adaptale state changes
-        this.monkeyPatchingGridOptionsUpdates(agGridApi);
         this.agGridAdapter.setAgGridApi(agGridApi);
+        this.agGridAdapter.monkeyPatchingGridOptionsUpdates(agGridApi);
         this.lifecycleState = 'agGridReady';
-        this.logger.info(`Registered AG Grid modules: `, this.agGridAdapter.getRegisteredModuleNames().sort());
+        this.logger.info(`Registered AG Grid modules: `, this.agGridAdapter.getAgGridRegisteredModuleNames().sort());
         /**
          * At this point AG Grid is initialized!
          */
@@ -389,17 +415,17 @@ class AdaptableAgGrid {
         this.lifecycleState = 'available';
         this.api.themeApi.applyCurrentTheme();
         this.validatePrimaryKey();
-        this.embedColumnMenu = this.agGridAdapter.isModulePresent(core_1.ModuleNames.MenuModule);
-        this.api.internalApi.setTreeMode(!!this.agGridAdapter.getAgGridApi().getGridOption('treeData'));
         // TODO AFL MIG: we could just patch the defautl Layout on init? instead
         this.checkShouldClearExistingFiltersOrSearches();
-        this.applyColumnFiltering();
+        this.applyFiltering();
         this.addGridEventListeners();
         this.temporaryAdaptableStateUpdates();
         this.redrawBody();
         this.refreshHeader();
         const currentLayout = this.api.layoutApi.getCurrentLayout();
-        if (currentLayout.EnablePivot) {
+        (0, LayoutHelpers_1.checkForDuplicateColumns)(currentLayout);
+        this.layoutManager.silentSetCurrentLayout((0, LayoutHelpers_1.layoutStateToLayoutModel)(currentLayout));
+        if ((0, LayoutHelpers_1.isPivotLayout)(currentLayout)) {
             // this is very very strange!
             // for some projects, if the initial layout is pivot, the columnDefs of the pivot resutl columns are NOT derived correctly from the main colDefs
             // doing the following line fixes the issue because it foces the pivot columns to be created again
@@ -407,12 +433,16 @@ class AdaptableAgGrid {
             // but this proj needs the hack: /tests/pages/format-column/initial-pivot-layout-docs.page.tsx
             this.agGridAdapter.setGridOption('pivotMode', false);
             this.agGridAdapter.setGridOption('pivotMode', true);
+            // also quick search is not working initially, although the setupColumns is called correctly
+            // so we need to do this to make it work
+            // see test /tests/pages/quick-search/pivot-search.spec.ts
+            this.updateColumnModelAndRefreshGrid();
         }
-        // create the module menu (for use in the dashboard and the toolpanel)
-        // TODO see #create-create-module-menu - make sure it's the same here and there
-        this.ModuleService.createModuleMenus();
-        // update initial mode of DataChangeHistory
-        this.api.internalApi.initializeDataChangeHistory();
+        else {
+            this.layoutManager.applyRowGroupValues((0, LayoutHelpers_1.layoutStateToLayoutModel)(currentLayout).RowGroupValues);
+        }
+        this.autoSizeLayoutIfNeeded();
+        this.ModuleService.createModuleUIItems();
         const adaptableContainerElem = this.getAdaptableContainerElement();
         if (adaptableContainerElem != null) {
             adaptableContainerElem.innerHTML = '';
@@ -433,13 +463,12 @@ class AdaptableAgGrid {
         this.lifecycleState = 'ready';
         this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
         setTimeout(() => {
-            var _a, _b;
             // without the setTimeout, calling autoSizeAllColumns immediately in the onAdaptableReady
             // does not work. (I prefer setTimeout to rAF, as raf is not running when you switch tabs)
             //
             // it also makes it possible to listen to CALCULATED_COLUMN_READY, DASHBOARD_READY, etc.
             // in onAdaptableReady - without this those event listeners are not triggered
-            (_b = (_a = this.api) === null || _a === void 0 ? void 0 : _a.eventApi) === null || _b === void 0 ? void 0 : _b.emit('AdaptableReady', {
+            this.api?.eventApi?.emit('AdaptableReady', {
                 adaptableApi: this.api,
                 agGridApi: this.agGridAdapter.getAgGridApi(),
             });
@@ -453,95 +482,70 @@ class AdaptableAgGrid {
         return state;
     }
     normaliseLayoutState(state, gridOptions) {
-        var _a, _b, _c, _d, _e, _f;
-        if (this.shouldCreateDefaultLayout(state, this.adaptableOptions)) {
-            const defaultLayout = this.createDefaultLayout(state, gridOptions);
-            const layoutState = state.Layout || {};
-            const availableLayouts = layoutState.Layouts || [];
-            availableLayouts.push(defaultLayout);
-            layoutState.Layouts = availableLayouts;
-            layoutState.CurrentLayout = defaultLayout.Name;
-            state.Layout = layoutState;
-        }
-        else {
-            const layoutState = state.Layout;
-            // ensure CurrentLayout is valid
-            if (!layoutState.CurrentLayout ||
-                !layoutState.Layouts.find((l) => l.Name === layoutState.CurrentLayout)) {
-                layoutState.CurrentLayout = (_b = (_a = layoutState.Layouts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Name;
-            }
+        const layoutState = state.Layout;
+        // ensure that at least one Layout has been provided
+        if (!layoutState || !layoutState.Layouts?.length) {
+            this.logger
+                .consoleError(`You have not defined any Layout in your predefinedConfig.Layout.Layouts[] state!
+
+You need to define at least one Layout!`);
         }
-        // for the initial state, we need to dynamically add the ActionRowColumn (if necessary)
-        // for subsequent layout changes, the `Adaptable.setLayout()` method handles this
-        // this is a serious code smell, hopefully we will delete `setLayout()` at some point
-        const hasActionRowButtons = !!((_c = this.adaptableOptions.actionRowOptions) === null || _c === void 0 ? void 0 : _c.actionRowButtons);
-        if (hasActionRowButtons) {
-            const currentLayout = state.Layout.Layouts.find((l) => l.Name === state.Layout.CurrentLayout);
-            if (currentLayout && !currentLayout.Columns.includes(GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS)) {
-                currentLayout.Columns.push(GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS);
-                const columnPosition = (_e = (_d = this.adaptableOptions.actionRowOptions) === null || _d === void 0 ? void 0 : _d.actionRowButtonOptions) === null || _e === void 0 ? void 0 : _e.position;
-                currentLayout.PinnedColumnsMap = currentLayout.PinnedColumnsMap || {};
-                currentLayout.PinnedColumnsMap[GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS] =
-                    columnPosition === 'pinnedRight' ? 'right' : 'left';
-            }
+        // ensure CurrentLayout is valid
+        if (!layoutState.CurrentLayout ||
+            !layoutState.Layouts.find((l) => l.Name === layoutState.CurrentLayout)) {
+            layoutState.CurrentLayout = layoutState.Layouts?.[0]?.Name;
         }
         /**
-         * Viewport mode does not support a few
-         * features instead of complicating the
-         * logic where layout is applied, it is easier and
-         * less error prone to just remove it.
+         * Viewport mode does not support a few AG Grid features which are contained in a Layout
+         * Accordingly we remove this when using this Row Model
          */
         if (gridOptions.rowModelType === 'viewport') {
-            (_f = state.Layout.Layouts) === null || _f === void 0 ? void 0 : _f.forEach((layout) => {
-                if (layout.RowGroupedColumns) {
-                    delete layout.RowGroupedColumns;
-                }
-                if (layout.AggregationColumns) {
-                    delete layout.AggregationColumns;
-                }
-                if (layout.PivotColumns) {
-                    delete layout.PivotColumns;
-                    delete layout.EnablePivot;
-                }
-            });
+            if (state.Layout.Layouts) {
+                state.Layout.Layouts = state.Layout.Layouts.filter((layout) => {
+                    if ((0, LayoutHelpers_1.isPivotLayout)(layout)) {
+                        return false;
+                    }
+                    if (layout.RowGroupedColumns) {
+                        delete layout.RowGroupedColumns;
+                    }
+                    if (layout.TableAggregationColumns) {
+                        delete layout.TableAggregationColumns;
+                    }
+                    return true;
+                });
+            }
+        }
+        if (state.Layout.Layouts) {
+            const normalizeOptions = {
+                isTree: !!gridOptions.treeData,
+            };
+            // it's very important that we do this here
+            // as the layout may not be fully specified in the predefinedConfig
+            // 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) => (0, LayoutHelpers_1.normalizeLayout)(layout, normalizeOptions));
         }
         return state;
     }
     normaliseToolPanelState(state) {
-        var _a, _b, _c;
-        if ((_a = state === null || state === void 0 ? void 0 : state.ToolPanel) === null || _a === void 0 ? void 0 : _a.ToolPanels) {
+        if (state?.ToolPanel?.ToolPanels) {
             return state;
         }
         // no predefined config provided, we will display all the panels collapsed (custom & module)
         const defaultToolPanels = [];
-        (_c = (_b = this.adaptableOptions.toolPanelOptions) === null || _b === void 0 ? void 0 : _b.customToolPanels) === null || _c === void 0 ? void 0 : _c.forEach((customToolPanel) => defaultToolPanels.push({ Name: customToolPanel.name }));
+        this.adaptableOptions.toolPanelOptions?.customToolPanels?.forEach((customToolPanel) => defaultToolPanels.push({ Name: customToolPanel.name }));
         Types_1.ALL_TOOL_PANELS.forEach((moduleToolPanel) => defaultToolPanels.push({ Name: moduleToolPanel }));
         const toolPanelState = state.ToolPanel || {};
         toolPanelState.ToolPanels = defaultToolPanels;
         state.ToolPanel = toolPanelState;
         return state;
     }
-    refreshQuickFilter() {
-        const isQuickFilterVisible = this.api.internalApi.getSystemState().IsQuickFilterVisible;
-        if (this.isQuickFilterAvailable()) {
-            if (isQuickFilterVisible) {
-                this.api.columnFilterApi.showQuickFilterBar();
-            }
-            else {
-                this.api.columnFilterApi.hideQuickFilterBar();
-            }
-        }
-    }
-    applyColumnFiltering() {
-        this.refreshQuickFilter();
-        this.applyGridFiltering();
-        this.agGridAdapter.updateColumnFilterActiveState();
-    }
-    applyGridFiltering() {
+    applyFiltering() {
         this.agGridAdapter.getAgGridApi().onFilterChanged();
         this._emit('AdapTableFiltersApplied');
         this.refreshSelectedCellsState();
         this.refreshSelectedRowsState();
+        this.agGridAdapter.updateColumnFilterActiveState();
     }
     // refreshAgGridWithAdaptableState() {
     //   this.refreshColDefs();
@@ -550,12 +554,8 @@ class AdaptableAgGrid {
     //   this.checkShouldClearExistingFiltersOrSearches();
     //   this.applyColumnFiltering();
     // }
-    refreshColDefs(agGridColDefs) {
-        const freshColDefs = this.getColumnDefinitionsInclSpecialColumns(agGridColDefs);
-        this.agGridAdapter.setGridOption('columnDefs', freshColDefs);
-    }
     showQuickFilter() {
-        const height = this.api.optionsApi.getColumnFilterOptions().quickFilterOptions.quickFilterHeight;
+        const height = this.api.optionsApi.getFilterOptions().columnFilterOptions.quickFilterHeight;
         this.agGridAdapter.getAgGridApi().setGridOption('floatingFiltersHeight', height);
     }
     hideQuickFilter() {
@@ -585,7 +585,11 @@ class AdaptableAgGrid {
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'context', (original_context) => {
             const userContext = original_context || {};
-            return Object.assign(Object.assign({}, userContext), { __adaptable: this, adaptableApi: this.api });
+            return {
+                ...userContext,
+                __adaptable: this,
+                adaptableApi: this.api,
+            };
         });
         /**
          * `gridId`
@@ -595,9 +599,16 @@ class AdaptableAgGrid {
             if (this._isDetailGridForIndex != null) {
                 agGridId = `${agGridId}_detail-${this._isDetailGridForIndex}`;
             }
-            this._agGridId = agGridId;
+            this.agGridAdapter.setAgGridId(agGridId);
             return agGridId;
         });
+        // FIXME AFL: handle both ThemingApi and legacy CSS
+        /**
+         * `theme`
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'theme', (original_gridId) => {
+            return 'legacy';
+        });
         /**
          *  `getRowId`
          */
@@ -623,20 +634,19 @@ class AdaptableAgGrid {
                 };
             }
             return (params) => {
-                var _a, _b, _c;
-                if ((_a = params.data) === null || _a === void 0 ? void 0 : _a[primaryKey]) {
+                if (params.data?.[primaryKey]) {
                     const primaryKeyValue = params.data[primaryKey];
                     return typeof primaryKeyValue === 'number'
                         ? `${primaryKeyValue}`
                         : params.data[primaryKey];
                 }
                 // might be a summary row
-                if ((_b = params.data) === null || _b === void 0 ? void 0 : _b[RowSummary_1.ROW_SUMMARY_ROW_ID]) {
+                if (params.data?.[RowSummary_1.ROW_SUMMARY_ROW_ID]) {
                     return params.data[RowSummary_1.ROW_SUMMARY_ROW_ID];
                 }
                 // AFL 2024.08.17 - no idea why is this here and when it's used
                 //  might be a group row
-                const parentKeys = (_c = params.parentKeys) !== null && _c !== void 0 ? _c : [];
+                const parentKeys = params.parentKeys ?? [];
                 const values = Object.values(params.data);
                 if (values.length) {
                     const id = [...parentKeys, values[0]].join('/');
@@ -688,9 +698,8 @@ class AdaptableAgGrid {
                 if (!this.isAvailable) {
                     return true;
                 }
-                const columnFilters = this.api.columnFilterApi.getActiveColumnFilters();
-                const isColumnFiltersActive = ArrayExtensions_1.default.IsNotNullOrEmpty(columnFilters);
-                const isGridFilterActive = StringExtensions_1.default.IsNotNullOrEmpty(this.api.gridFilterApi.getCurrentGridFilterExpression());
+                const isColumnFiltersActive = ArrayExtensions_1.default.IsNotNullOrEmpty(this.api.filterApi.columnFilterApi.getActiveColumnFilters());
+                const isGridFilterActive = StringExtensions_1.default.IsNotNullOrEmpty(this.api.filterApi.gridFilterApi.getCurrentGridFilterExpression());
                 return (isColumnFiltersActive ||
                     isGridFilterActive ||
                     // it means that userPropertyValue will be called so we re-init that collection
@@ -701,39 +710,65 @@ class AdaptableAgGrid {
          * `doesExternalFilterPass`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'doesExternalFilterPass', (original_doesExternalFilterPass) => {
+            const { filteredOutPrimaryKeys } = this;
+            filteredOutPrimaryKeys.clear();
             return (node) => {
+                if (node.rowIndex === 0) {
+                    filteredOutPrimaryKeys.clear();
+                }
                 if (!this.isAvailable) {
                     return true;
                 }
-                // first we assess a Grid Filter (if its running locally)
-                if (!this.isGroupRowNode(node)) {
-                    const currentGridFilter = this.api.gridFilterApi.getCurrentGridFilterExpression();
-                    if (currentGridFilter) {
-                        const evaluateGridFilterOnClient = this.api.expressionApi.internalApi.evaluateExpressionInAdaptableQL('GridFilter', undefined, currentGridFilter);
-                        if (evaluateGridFilterOnClient) {
-                            const isCurrentGridFilterValid = this.api.expressionApi.isValidBooleanExpression(currentGridFilter, ModuleConstants_1.GridFilterModuleId, `Invalid Grid Filter '${currentGridFilter}'`);
-                            if (!isCurrentGridFilterValid ||
-                                !this.api.internalApi
-                                    .getQueryLanguageService()
-                                    .evaluateBooleanExpression(currentGridFilter, ModuleConstants_1.GridFilterModuleId, node)) {
-                                return false;
-                            }
+                // Note: not sure we need this check as doubtful AG Grid ever passes in a Group Row node to filter...
+                // But if it does, then we might change this IF we allow Column filtering (but not Grid Filters) for Group nodes
+                if (this.isGroupRowNode(node)) {
+                    return true;
+                }
+                // first assess if the Row is filterable - if not, then return true so it appears in Grid
+                const isRowFilterable = this.api.optionsApi.getFilterOptions().isRowFilterable;
+                if (typeof isRowFilterable === 'function') {
+                    const rowFilterableContext = {
+                        ...this.api.internalApi.buildBaseContext(),
+                        rowNode: node,
+                        data: node.data,
+                    };
+                    if (!isRowFilterable(rowFilterableContext)) {
+                        return true;
+                    }
+                }
+                // get the Primary Key Value for the Row Node being evaluated
+                const primaryKey = this.getPrimaryKeyValueFromRowNode(node);
+                // next we assess a Grid Filter (if its running locally)
+                const currentGridFilterExpression = this.api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
+                if (StringExtensions_1.default.IsNotNullOrEmpty(currentGridFilterExpression)) {
+                    const evaluateGridFilterOnClient = this.api.expressionApi.internalApi.evaluateExpressionInAdaptableQL('GridFilter', undefined, currentGridFilterExpression);
+                    if (evaluateGridFilterOnClient) {
+                        const isCurrentGridFilterValid = this.api.expressionApi.isValidBooleanExpression(currentGridFilterExpression, ModuleConstants_1.GridFilterModuleId, `Invalid Grid Filter '${currentGridFilterExpression}'`);
+                        // Not sure about this - what should we do with an invalid Grid Filter?
+                        // Here we essentially clear the Grid for invalid Grid Filter by returning false for each row
+                        if (!isCurrentGridFilterValid) {
+                            filteredOutPrimaryKeys.add(primaryKey);
+                            return false;
+                        }
+                        const gridFilterEvaluationResult = this.api.internalApi
+                            .getQueryLanguageService()
+                            .evaluateBooleanExpression(currentGridFilterExpression, ModuleConstants_1.GridFilterModuleId, node);
+                        if (!gridFilterEvaluationResult) {
+                            filteredOutPrimaryKeys.add(primaryKey);
+                            return false;
                         }
                     }
                 }
-                const columnFilters = this.api.columnFilterApi.getActiveColumnFilters();
+                // finally we evaluate column filters
+                const columnFilters = this.api.filterApi.columnFilterApi.getActiveColumnFilters();
                 try {
                     if (columnFilters.length > 0) {
-                        const isRowFiltrable = this.api.optionsApi.getColumnFilterOptions().isRowFilterable;
                         for (const columnFilter of columnFilters) {
-                            const evaluateFilterOnClient = this.api.expressionApi.internalApi.evaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, [columnFilter.Predicate]);
-                            if (evaluateFilterOnClient) {
-                                // we then assess filters (if running locally)
-                                if (typeof isRowFiltrable === 'function' &&
-                                    !isRowFiltrable(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(this.api)), { rowNode: node, data: node.data }))) {
-                                    return true;
-                                }
-                                if (!this.api.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, node)) {
+                            const evaluateColumnFilterOnClient = this.api.expressionApi.internalApi.evaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Predicates);
+                            if (evaluateColumnFilterOnClient) {
+                                const columnFilterEvaluationResult = this.api.filterApi.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, node);
+                                if (!columnFilterEvaluationResult) {
+                                    filteredOutPrimaryKeys.add(primaryKey);
                                     return false;
                                 }
                             }
@@ -742,9 +777,16 @@ class AdaptableAgGrid {
                 }
                 catch (ex) {
                     this.logger.error(ex);
+                    filteredOutPrimaryKeys.add(primaryKey);
                     return false;
                 }
-                return original_doesExternalFilterPass ? original_doesExternalFilterPass(node) : true;
+                const result = original_doesExternalFilterPass
+                    ? original_doesExternalFilterPass(node)
+                    : true;
+                if (!result) {
+                    filteredOutPrimaryKeys.add(primaryKey);
+                }
+                return result;
             };
         });
         /**
@@ -764,59 +806,16 @@ class AdaptableAgGrid {
                 return this.agGridMenuAdapter.buildContextMenu(params, original_getContextMenuItems);
             };
         });
-        /**
-         * `initialGroupOrderComparator
-         */
-        // Build the default group sort comparator - will get custom sort values (but not functions) in real time
-        // TODO: if  a custom 'aggFunc' property is defined (see setupColumnAggFunc()), it won't be evaluated
-        if (this.getAgGridRowModelType(gridOptions) === 'clientSide' &&
-            this.adaptableOptions.groupingOptions.autoOrderGroupedColumns) {
-            this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'initialGroupOrderComparator', (original_initialGroupOrderComparator) => {
-                if (original_initialGroupOrderComparator) {
-                    return original_initialGroupOrderComparator;
-                }
-                return (params) => {
-                    const { nodeA, nodeB } = params;
-                    const firstGroupedColumnId = this.agGridAdapter.getFirstGroupedColumn();
-                    if (firstGroupedColumnId) {
-                        const definedColumnComparator = this.api.columnApi.internalApi.getActiveColumnComparator(firstGroupedColumnId, this.api.customSortApi.getCustomSortForColumn(firstGroupedColumnId), this.api.customSortApi.internalApi.getCustomSortComparer(firstGroupedColumnId));
-                        if (definedColumnComparator) {
-                            return definedColumnComparator(nodeA.key, nodeB.key);
-                        }
-                        const sortOder = this.api.layoutApi.getCurrentLayoutColumnSort(firstGroupedColumnId);
-                        if (sortOder === 'Desc') {
-                            return nodeA.key > nodeB.key ? -1 : 1;
-                        }
-                    }
-                    // if no comparator available, just sort alphanumerically
-                    if (nodeA.key == nodeB.key) {
-                        return 0;
-                    }
-                    return nodeA.key < nodeB.key ? -1 : 1;
-                };
-            });
-            /**
-             * `autoSizeStrategy`
-             *
-             * This is needed here, even if we do auto sizing on FIRST_DATA_RENDERED.
-             * Sometimes FIRST_DATA_RENDERED is triggered too early and autoSizing doesn't work initially
-             * so we need this block
-             */
-            this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'autoSizeStrategy', (original_autoSizeStrategy) => {
-                return this.shouldAutoSizeLayout()
-                    ? {
-                        type: 'fitCellContents',
-                    }
-                    : original_autoSizeStrategy;
-            });
-        }
         /**
          * `components`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'components', (original_components) => {
             const AdaptableToolPanel = (0, AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent)(this);
             const components = original_components || {};
-            const adaptableComponents = Object.assign(Object.assign({}, components), { AdaptableToolPanel });
+            const adaptableComponents = {
+                ...components,
+                AdaptableToolPanel,
+            };
             return adaptableComponents;
         });
         if (variant === 'react') {
@@ -832,7 +831,6 @@ class AdaptableAgGrid {
          * `sidebar`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'sideBar', (original_sideBar) => {
-            var _a, _b;
             if (!original_sideBar) {
                 // lucky us, no sideBar is defined, so we don't have to do anything
                 return original_sideBar;
@@ -855,7 +853,7 @@ class AdaptableAgGrid {
                     : toolPanelDef);
             };
             const isSideBarDefObject = (sidebarDef) => {
-                return Array.isArray(sidebarDef === null || sidebarDef === void 0 ? void 0 : sidebarDef.toolPanels);
+                return Array.isArray(sidebarDef?.toolPanels);
             };
             let result;
             if (original_sideBar === true) {
@@ -895,45 +893,54 @@ class AdaptableAgGrid {
             }
             // if it's fully-fledged SideBarDef, process its tool panel definitions
             else if (isSideBarDefObject(original_sideBar)) {
-                if ((_a = original_sideBar.toolPanels) === null || _a === void 0 ? void 0 : _a.some((toolpanelDef) => typeof toolpanelDef !== 'string' &&
+                if (original_sideBar.toolPanels?.some((toolpanelDef) => typeof toolpanelDef !== 'string' &&
                     toolpanelDef.id === GeneralConstants.ADAPTABLE_TOOLPANEL_ID &&
                     !isAdaptableToolPanelHidden)) {
                     // if there is an Adaptable SideBarDef, don't touch it as it may contain user-defined properties
                     result = original_sideBar;
                 }
                 else {
-                    result = Object.assign(Object.assign({}, original_sideBar), { toolPanels: mapToolPanelDefs(original_sideBar.toolPanels) });
+                    result = {
+                        ...original_sideBar,
+                        toolPanels: mapToolPanelDefs(original_sideBar.toolPanels),
+                    };
                 }
             }
             this.hasAdaptableToolPanel =
                 isSideBarDefObject(result) &&
-                    ((_b = result.toolPanels) === null || _b === void 0 ? void 0 : _b.some((toolPanelDef) => typeof toolPanelDef !== 'string' &&
-                        toolPanelDef.id === GeneralConstants.ADAPTABLE_TOOLPANEL_ID));
+                    result.toolPanels?.some((toolPanelDef) => typeof toolPanelDef !== 'string' &&
+                        toolPanelDef.id === GeneralConstants.ADAPTABLE_TOOLPANEL_ID);
             return result;
         });
         /**
          * `statusBar`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'statusBar', (original_statusBar) => {
-            var _a, _b;
-            const statusPanels = (_b = ((_a = original_statusBar === null || original_statusBar === void 0 ? void 0 : original_statusBar.statusPanels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.map((statusPanel) => {
+            const statusPanels = (original_statusBar?.statusPanels ?? [])?.map((statusPanel) => {
                 if (statusPanel.statusPanel === StatusBarState_1.ADAPTABLE_STATUS_PANEL) {
                     this.adaptableStatusPanelKeys.push(statusPanel.key);
                     const context = {
                         Key: statusPanel.key,
                     };
-                    return Object.assign(Object.assign({}, statusPanel), { statusPanel: (0, createAgStatusPanelComponent_1.createAgStatusPanelComponent)(AdaptableStatusBar_1.AdaptableStatusBar, this, context) });
+                    return {
+                        ...statusPanel,
+                        statusPanel: (0, createAgStatusPanelComponent_1.createAgStatusPanelComponent)(AdaptableStatusBar_1.AdaptableStatusBar, this, context),
+                    };
                 }
                 return statusPanel;
             });
-            return Object.assign(Object.assign({}, original_statusBar), { statusPanels });
+            return { ...original_statusBar, statusPanels };
         });
         /**
          * `getRowStyle`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'getRowStyle', (original_getRowStyle) => {
             return (params) => {
-                const result = Object.assign(Object.assign(Object.assign({}, original_getRowStyle === null || original_getRowStyle === void 0 ? void 0 : original_getRowStyle(params)), this.api.gridApi.internalApi.getRowHighlightStyle(params)), this.api.gridApi.internalApi.getAlertRowStyle(params));
+                const result = {
+                    ...original_getRowStyle?.(params),
+                    ...this.api.gridApi.internalApi.getRowHighlightStyle(params),
+                    ...this.api.gridApi.internalApi.getAlertRowStyle(params),
+                };
                 return result;
             };
         });
@@ -954,15 +961,15 @@ class AdaptableAgGrid {
                     // we flatten it because 'original_getRowClass' might return a string[]
                     .flat()
                     .filter((x) => !!x);
-                return (returnValue === null || returnValue === void 0 ? void 0 : returnValue.length) ? returnValue : undefined;
+                return returnValue?.length ? returnValue : undefined;
             };
         });
         /**
          * `floatingFiltersHeight`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'floatingFiltersHeight', (original_floatingFiltersHeight) => {
-            if (this.api.layoutApi.getCurrentLayout().EnablePivot) {
-                // if the default layout is a pivot on, hide the floating filters from the beginning, otherwise we get an annoying flicker
+            if (this.api.layoutApi.isCurrentLayoutPivot()) {
+                // if Current Layout is Pivot, hide the floating filters from the beginning, otherwise we get an annoying flicker
                 return 0;
             }
             return original_floatingFiltersHeight;
@@ -971,21 +978,30 @@ class AdaptableAgGrid {
          * `excelStyles`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'excelStyles', (original_excelStyles) => {
-            this.originalExcelStyles = original_excelStyles !== null && original_excelStyles !== void 0 ? original_excelStyles : [];
-            this.DANGER_excelStyles = this.originalExcelStyles;
+            const excelStyles = original_excelStyles || [];
+            // see ##masterDetailHeader
+            excelStyles.push({
+                id: '_masterDetailHeader',
+                interior: {
+                    color: '#aaaaaa',
+                    pattern: 'Solid',
+                },
+            });
+            this.agGridExportAdapter.originalExcelStyles = excelStyles;
+            this.agGridExportAdapter.DANGER_excelStyles = this.agGridExportAdapter.originalExcelStyles;
             // this array reference will be used for the entire AG Grid session
-            return this.DANGER_excelStyles;
+            return this.agGridExportAdapter.DANGER_excelStyles;
         });
         /**
          * `processPivotResultColDef`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'processPivotResultColDef', (original_processPivotResultColDef) => {
             return (colDef) => {
-                if (this.adaptableOptions.columnFilterOptions.useAdaptableColumnFiltering) {
+                if (this.adaptableOptions.filterOptions.useAdaptableFiltering) {
                     colDef.floatingFilter = false;
                     colDef.filter = false;
                 }
-                original_processPivotResultColDef === null || original_processPivotResultColDef === void 0 ? void 0 : original_processPivotResultColDef(colDef);
+                original_processPivotResultColDef?.(colDef);
             };
         });
         /**
@@ -1001,80 +1017,34 @@ class AdaptableAgGrid {
          */
         // this will have to go/be heavily extended with https://github.com/AdaptableTools/adaptable/issues/2230
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'columnTypes', (original_columnTypes) => {
-            var _a;
             const providedColumnTypes = original_columnTypes || {};
-            const gridOptionsColumnTypes = gridOptions.columnTypes || {};
-            const patchedColumnTypes = Object.assign({}, providedColumnTypes, {
-                [GeneralConstants_1.AB_SPECIAL_COLUMN]: {},
-                [GeneralConstants_1.AB_FDC3_COLUMN]: {},
-                abColDefNumber: Object.assign({}, gridOptionsColumnTypes.abColDefNumber),
-                abColDefString: Object.assign({}, gridOptionsColumnTypes.abColDefString),
-                abColDefBoolean: Object.assign({}, gridOptionsColumnTypes.abColDefBoolean),
-                abColDefDate: Object.assign({}, gridOptionsColumnTypes.abColDefDate),
-                abColDefObject: Object.assign({}, gridOptionsColumnTypes.abColDefObject),
-                abColDefCustom: Object.assign({}, gridOptionsColumnTypes.abColDefCustom),
-                abColDefStringArray: Object.assign({}, gridOptionsColumnTypes.abColDefStringArray),
-                abColDefNumberArray: Object.assign({}, gridOptionsColumnTypes.abColDefNumberArray),
-                abColDefTupleNumberArray: Object.assign({}, gridOptionsColumnTypes.abColDefTupleNumberArray),
-                abColDefObjectNumberArray: Object.assign({}, gridOptionsColumnTypes.abColDefObjectNumberArray),
-            });
-            const customColumnTypes = (_a = this.api.columnApi.getColumnTypes()) !== null && _a !== void 0 ? _a : [];
+            const adaptableColumnTypes = {
+                [AdaptableColumn_1.CALCULATED_COLUMN_TYPE]: {},
+                [AdaptableColumn_1.FREE_TEXT_COLUMN_TYPE]: {},
+                [AdaptableColumn_1.ACTION_COLUMN_TYPE]: {},
+                [AdaptableColumn_1.FDC3_COLUMN_TYPE]: {},
+            };
+            const patchedColumnTypes = Object.assign({}, providedColumnTypes, adaptableColumnTypes);
+            const customColumnTypes = this.api.columnApi.getColumnTypes() ?? [];
             for (const customColumnType of customColumnTypes) {
                 if (!patchedColumnTypes[customColumnType]) {
                     patchedColumnTypes[customColumnType] = {};
                 }
             }
-            const colTypesToEditors = (0, AgGridColumnAdapter_1.getEditorsForColumnTypes)(this.variant);
-            // we used to patch here the column types
-            // and have the editors for abColDefNumber and abColDefDate set here
-            // but AG Grid seems to have a bug where if we have a custom editor
-            // for a specific number column, it's applied to all abColDefNumber columns, because they
-            // share the same column type
-            // so we're now doing this logic in AgGridColumnAdaptapter.setupColumnCellEditor
-            // and instead, here we're just assigning the editor to null
-            // because if we don't assign to null, the default that AG Grid provides
-            // will be used instead, and we don't want that for those column types
-            Object.keys(colTypesToEditors).forEach((colType) => {
-                if (patchedColumnTypes[colType].cellEditor == undefined) {
-                    patchedColumnTypes[colType].cellEditor = null; // colTypesToEditors[colType];
-                    // if you dont believe me, just put colTypesToEditors[colType] in the line above instead of the null value
-                    // and see the editing/percentage-editor.spec.ts test fail as it wont be using the correct editor
-                }
-            });
             return patchedColumnTypes;
         });
         /**
          * `dataTypeDefinitions`
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'dataTypeDefinitions', () => {
-            // temporary workaround until https://github.com/AdaptableTools/adaptable/issues/2230
-            const revertedDateTypeDefinitions = {
-                date: {
-                    baseDataType: 'date',
-                    extendsDataType: 'date',
-                    valueParser: null,
-                    valueFormatter: null,
-                    suppressDefaultProperties: true,
-                },
-                dateString: {
-                    baseDataType: 'dateString',
-                    extendsDataType: 'dateString',
-                    valueParser: null,
-                    valueFormatter: null,
-                    suppressDefaultProperties: true,
-                },
-            };
+            const revertedDateTypeDefinitions = agGridDataTypeDefinitions_1.agGridDataTypeDefinitions;
             return revertedDateTypeDefinitions;
         });
     }
-    isDetailGrid() {
-        return this._isDetailGrid;
-    }
     /**
      * Either initializes the AG Grid instance or delegates it to the framework wrappers (React/Anglar)
      */
     async initializeAgGrid(gridOptions, modules, renderAgGridFrameworkComponent) {
-        var _a;
         if (renderAgGridFrameworkComponent) {
             const result = await renderAgGridFrameworkComponent(gridOptions);
             if (result === false) {
@@ -1096,9 +1066,8 @@ class AdaptableAgGrid {
             }
             if (!this.getAgGridContainerElement()) {
                 // initialize the agGridContainerElement from the AgGrid instance
-                // @ts-ignore
-                const gridRoot = (_a = this.DANGER_getPrivateAgGridBeans()) === null || _a === void 0 ? void 0 : _a.eGridDiv;
-                const gridContainer = gridRoot === null || gridRoot === void 0 ? void 0 : gridRoot.closest('[class*="ag-theme"]');
+                const gridRoot = this.agGridAdapter.getAgGridRootElement();
+                const gridContainer = gridRoot?.closest('[class*="ag-theme"]');
                 if (!gridContainer) {
                     this.logger.consoleError(`No AG Grid container could be derived from the Adaptable framework wrapper.
             Please contact AdapTable Support and in the meantime provide a valid container element in 'ContainerOptions.agGridContainer'!`);
@@ -1113,108 +1082,33 @@ class AdaptableAgGrid {
             return Promise.resolve(false);
         }
         let gridParams;
-        if (modules === null || modules === void 0 ? void 0 : modules.length) {
+        if (modules?.length) {
             gridParams = { modules };
         }
-        const agGridApi = (0, core_1.createGrid)(agGridContainer, gridOptions, gridParams);
+        const agGridApi = (0, ag_grid_enterprise_1.createGrid)(agGridContainer, gridOptions, gridParams);
         return agGridApi;
     }
-    getColumnDefinitionsInclSpecialColumns(agGridColDefs) {
-        const allColDefs = this.enhanceColDefsWithSpecialColumns(agGridColDefs !== null && agGridColDefs !== void 0 ? agGridColDefs : this.agGridAdapter.getAgGridApi().getColumnDefs());
-        return allColDefs;
-    }
-    getSpecialColDefs() {
-        const specialColDefs = [
-            ...this.api.calculatedColumnApi.internalApi.getColDefsForCalculatedColumns(),
-            ...this.api.actionColumnApi.getColDefsForActionColumns(),
-            ...this.api.freeTextColumnApi.internalApi.getColDefsForFreeTextColumns(),
-            ...this.api.actionRowApi.internalApi.getColDefsForActionRowColumns(),
-            ...this.api.fdc3Api.internalApi.getFdc3ActionColDefs(),
-        ];
-        this.agGridAdapter.assignColumnIdsToColDefs(specialColDefs);
-        return specialColDefs;
-    }
-    enhanceColDefsWithSpecialColumns(agGridColDefs) {
-        this.agGridAdapter.assignColumnIdsToColDefs(agGridColDefs);
-        const specialColDefs = this.getSpecialColDefs();
-        const isSpecialColDef = (colDef) => {
-            const { type } = colDef;
-            if (type === GeneralConstants_1.AB_SPECIAL_COLUMN || (Array.isArray(type) && type.includes(GeneralConstants_1.AB_SPECIAL_COLUMN))) {
-                return true;
-            }
-            return false;
-        };
-        const processedSpecialColDefIds = [];
-        const mapColDefs = (colDefs) => {
-            return colDefs.map((colDef) => {
-                if (this.agGridColumnAdapter.isColGroupDef(colDef)) {
-                    // if it's a group column, recursively map its children
-                    colDef.children = mapColDefs(colDef.children);
-                    return colDef;
-                }
-                else {
-                    if (!isSpecialColDef(colDef)) {
-                        // if it's not a special column, return it as is
-                        // without a minWidth, columns in details grid are VERY wide
-                        // so the line below fixes https://github.com/AdaptableTools/adaptable/issues/2559
-                        return Object.assign({ minWidth: 10 }, colDef);
-                    }
-                    const newlyCreatedSpecialColDef = specialColDefs.find((specialColDef) => specialColDef.colId === colDef.colId);
-                    if (newlyCreatedSpecialColDef) {
-                        // if it's a special column and we have a special col def for it, return the special col def
-                        processedSpecialColDefIds.push(colDef.colId);
-                        // merge the user defined colDef with the special col def
-                        // this way the user may provide some custom settings for the special col def (tooltip, etc)
-                        const mergedColDef = Object.assign(Object.assign({ 
-                            // see above comment for minWidth
-                            minWidth: 10 }, colDef), newlyCreatedSpecialColDef);
-                        return mergedColDef;
-                    }
-                    else {
-                        // otherwise, return the original col def
-                        return colDef;
-                    }
-                }
-            });
-        };
-        let resultColDefs = mapColDefs(agGridColDefs);
-        // check if there are any special colDefs that were not processed
-        // in that case, add them to the end of the colDefs
-        specialColDefs.forEach((specialColDef) => {
-            if (!processedSpecialColDefIds.includes(specialColDef.colId)) {
-                resultColDefs.push(specialColDef);
-            }
-        });
-        // remove special column that are no longer defined
-        resultColDefs = resultColDefs.filter((colDef) => {
-            if (isSpecialColDef(colDef)) {
-                // must be in specialColDefs
-                return specialColDefs.some((specialColDef) => specialColDef.colId === colDef.colId);
-            }
-            return true;
-        });
-        return resultColDefs;
-    }
     useRowNodeLookUp() {
         return this.agGridAdapter.getAgGridApi().getGridOption('getRowId') != undefined;
     }
+    getAgGridRegisteredModules() {
+        return this.agGridAdapter.getAgGridRegisteredModules();
+    }
     getAgGridContainerElement() {
-        var _a, _b, _c, _d, _e, _f;
         if (!this.DANGER_USE_GETTER_agGridContainerElement) {
             this.DANGER_USE_GETTER_agGridContainerElement =
-                typeof ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.agGridContainer) === 'string'
-                    ? document.getElementById((_d = (_c = this.adaptableOptions) === null || _c === void 0 ? void 0 : _c.containerOptions) === null || _d === void 0 ? void 0 : _d.agGridContainer)
-                    : (_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.containerOptions) === null || _f === void 0 ? void 0 : _f.agGridContainer;
+                typeof this.adaptableOptions?.containerOptions?.agGridContainer === 'string'
+                    ? document.getElementById(this.adaptableOptions?.containerOptions?.agGridContainer)
+                    : this.adaptableOptions?.containerOptions?.agGridContainer;
         }
         return this.DANGER_USE_GETTER_agGridContainerElement;
     }
     getAdaptableContainerElement() {
-        var _a, _b, _c, _d, _e, _f;
         if (!this.DANGER_USE_GETTER_adaptableContainerElement) {
             this.DANGER_USE_GETTER_adaptableContainerElement =
-                typeof ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.adaptableContainer) === 'string'
-                    ? document.getElementById((_d = (_c = this.adaptableOptions) === null || _c === void 0 ? void 0 : _c.containerOptions) === null || _d === void 0 ? void 0 : _d.adaptableContainer)
-                    : (_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.containerOptions) === null || _f === void 0 ? void 0 : _f.adaptableContainer;
+                typeof this.adaptableOptions?.containerOptions?.adaptableContainer === 'string'
+                    ? document.getElementById(this.adaptableOptions?.containerOptions?.adaptableContainer)
+                    : this.adaptableOptions?.containerOptions?.adaptableContainer;
         }
         return this.DANGER_USE_GETTER_adaptableContainerElement;
     }
@@ -1227,7 +1121,10 @@ class AdaptableAgGrid {
         const selectedCellInfo = this.agGridAdapter.deriveSelectedCellInfoFromAgGrid();
         this.api.gridApi.internalApi.setSelectedCells(selectedCellInfo);
         this._emit('CellsSelected');
-        let cellSelectionChangedInfo = Object.assign(Object.assign({}, this.api.internalApi.buildBaseContext()), { selectedCellInfo: this.api.gridApi.getGridState().SelectedCellInfo });
+        let cellSelectionChangedInfo = {
+            ...this.api.internalApi.buildBaseContext(),
+            selectedCellInfo: this.api.gridApi.getInternalState().SelectedCellInfo,
+        };
         this.api.eventApi.emit('CellSelectionChanged', cellSelectionChangedInfo);
         return selectedCellInfo;
     }
@@ -1237,7 +1134,10 @@ class AdaptableAgGrid {
         }
         const selectedRowInfo = this.agGridAdapter.deriveSelectedRowInfoFromAgGrid();
         this.api.gridApi.internalApi.setSelectedRows(selectedRowInfo);
-        const rowSelectionChangedInfo = Object.assign(Object.assign({}, this.api.internalApi.buildBaseContext()), { selectedRowInfo: this.api.gridApi.getGridState().SelectedRowInfo });
+        const rowSelectionChangedInfo = {
+            ...this.api.internalApi.buildBaseContext(),
+            selectedRowInfo: this.api.gridApi.getInternalState().SelectedRowInfo,
+        };
         this.api.eventApi.emit('RowSelectionChanged', rowSelectionChangedInfo);
         return selectedRowInfo;
     }
@@ -1255,7 +1155,7 @@ class AdaptableAgGrid {
         return false;
     }
     isGridRangeSelectable() {
-        return (this.agGridAdapter.isModulePresent(core_1.ModuleNames.RangeSelectionModule) &&
+        return (this.agGridAdapter.isAgGridModuleRegistered('CellSelection') &&
             (this.agGridAdapter.getGridOption('enableRangeSelection') ||
                 !!this.agGridAdapter.getGridOption('cellSelection')));
     }
@@ -1263,114 +1163,34 @@ class AdaptableAgGrid {
         const perfNewAdaptableStore = this.logger.beginPerf(`initAdaptableStore()`);
         const adaptableStore = new AdaptableStore_1.AdaptableStore(this);
         adaptableStore.onAny((eventName, data) => {
-            this.performAudit(data.action, data.state, data.newState);
+            if (this.isReady) {
+                this.api.eventApi.internalApi.fireAdaptableStateChangedEvent(data.action, data.state, data.newState);
+            }
             this.forPlugins((plugin) => plugin.onStoreEvent(eventName, data, this.adaptableStore));
         });
         perfNewAdaptableStore.end();
         return adaptableStore;
     }
-    mapAdaptableStateToAgGridState(adaptableState, agGridColDefs) {
-        var _a, _b, _c;
-        const agGridState = {};
-        const currentLayoutName = (_a = adaptableState.Layout) === null || _a === void 0 ? void 0 : _a.CurrentLayout;
-        const _currentLayout = currentLayoutName &&
-            ((_c = (_b = adaptableState.Layout) === null || _b === void 0 ? void 0 : _b.Layouts) === null || _c === void 0 ? void 0 : _c.find((l) => l.Name === currentLayoutName));
-        if (!_currentLayout) {
-            return agGridState;
-        }
-        const currentLayout = (0, AdaptableHelper_1.removeUuidAndSource)(_currentLayout);
-        const allAgGridFlattenedColDefs = this.agGridAdapter.getFlattenedColDefs(agGridColDefs);
-        const allAgGridColDefIds = allAgGridFlattenedColDefs.map((colDef) => colDef.colId);
-        const { columnApi } = this.api;
-        // also add the row group columns, if they are specified in the layout
-        currentLayout.Columns.forEach((colId) => {
-            if (columnApi.isAutoRowGroupColumn(colId)) {
-                allAgGridColDefIds.push(colId);
-            }
-        });
-        const getColDef = (colId) => allAgGridFlattenedColDefs.find((colDef) => colDef.colId === colId);
-        agGridState.columnVisibility = {
-            hiddenColIds: allAgGridFlattenedColDefs
-                .filter((colDef) => { var _a; return !((_a = currentLayout.Columns) === null || _a === void 0 ? void 0 : _a.includes(colDef.colId)) || colDef.hide || colDef.initialHide; })
-                .map((colDef) => colDef.colId),
-        };
-        agGridState.columnOrder = {
-            orderedColIds: ArrayExtensions_1.default.sortArrayWithOrder(allAgGridColDefIds, currentLayout.Columns || [], {
-                sortUnorderedItems: false,
-            }),
-        };
-        if (currentLayout.ColumnWidthMap) {
-            agGridState.columnSizing = {
-                columnSizingModel: Object.keys(currentLayout.ColumnWidthMap).map((colId) => {
-                    const width = currentLayout.ColumnWidthMap[colId];
-                    return {
-                        colId,
-                        width,
-                    };
-                }),
-            };
-        }
-        if (currentLayout.ColumnSorts) {
-            agGridState.sort = {
-                sortModel: currentLayout.ColumnSorts.map((columnSort) => {
-                    return {
-                        colId: columnSort.ColumnId,
-                        sort: columnSort.SortOrder === 'Asc' ? 'asc' : 'desc',
-                    };
-                }),
-            };
-        }
-        if (currentLayout.RowGroupedColumns) {
-            agGridState.rowGroup = {
-                groupColIds: currentLayout.RowGroupedColumns,
-            };
-        }
-        if (currentLayout.AggregationColumns) {
-            agGridState.aggregation = {
-                aggregationModel: Object.keys(currentLayout.AggregationColumns).map((colId) => {
-                    let aggFunc = currentLayout.AggregationColumns[colId];
-                    if (aggFunc === true) {
-                        const colDef = getColDef(colId);
-                        // fallback to SUM if no defaultAggFunc is defined
-                        aggFunc = (colDef === null || colDef === void 0 ? void 0 : colDef.defaultAggFunc) || 'sum';
-                    }
-                    if ((0, AggregationColumns_1.isWeightedAverageAggregation)(aggFunc)) {
-                        aggFunc = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
-                    }
-                    return {
-                        colId,
-                        aggFunc,
-                    };
-                }),
-            };
-        }
-        if (currentLayout.PivotColumns || currentLayout.EnablePivot) {
-            agGridState.pivot = {
-                pivotMode: currentLayout.EnablePivot,
-                pivotColIds: currentLayout.PivotColumns || [],
-            };
-        }
-        if (currentLayout.PinnedColumnsMap) {
-            const columnPinning = {
-                leftColIds: [],
-                rightColIds: [],
-            };
-            Object.keys(currentLayout.PinnedColumnsMap).forEach((colId) => {
-                const pinned = currentLayout.PinnedColumnsMap[colId];
-                if (pinned === 'left') {
-                    columnPinning.leftColIds.push(colId);
-                }
-                else if (pinned === 'right') {
-                    columnPinning.rightColIds.push(colId);
-                }
-            });
-            agGridState.columnPinning = columnPinning;
+    mapAdaptableStateToAgGridState(adaptableState, agGridColDefs, options) {
+        const currentLayoutName = adaptableState.Layout?.CurrentLayout;
+        let currentLayout = currentLayoutName &&
+            adaptableState.Layout?.Layouts?.find((l) => l.Name === currentLayoutName);
+        if (!currentLayout) {
+            currentLayout = GeneralConstants_1.ERROR_LAYOUT;
         }
-        return agGridState;
+        const layoutModel = (0, LayoutHelpers_1.layoutStateToLayoutModel)(currentLayout);
+        return {
+            gridState: src_1.LayoutManager.getAGGridInitialStateForLayout(layoutModel, agGridColDefs, options),
+            currentLayout: currentLayout,
+            layoutModel,
+        };
     }
     addGridEventListeners() {
         /**
-         * Intercept DOM events and emit them as Adaptable events
+         * Intercept 3 DOM events and emit them as Adaptable events:
+         * KeyDown
+         * MouseEnter
+         * MouseLeave
          */
         const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
@@ -1383,80 +1203,33 @@ class AdaptableAgGrid {
             }), true);
             gridContainerElement.addEventListener('mouseleave', (this.agGridListenerMouseLeave = (event) => this._emit('MouseLeave', event)));
         }
-        this.throttleFilterOnEditDataChange = (0, throttle_1.default)(
+        this.throttleFilterOnDataChange = (0, throttle_1.default)(
         // the extra function is to make sure we have a reference to ag-grid-api
-        () => { var _a; return (_a = this.agGridAdapter.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.onFilterChanged(); }, this.adaptableOptions.columnFilterOptions.filterActionOnUserDataChange.throttleDelay, {
-            trailing: true,
-            leading: false,
-        });
-        this.throttleFilterOnTickingDataChange = (0, throttle_1.default)(() => { var _a; return (_a = this.agGridAdapter.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.onFilterChanged(); }, this.adaptableOptions.columnFilterOptions.filterActionOnExternalDataChange.throttleDelay, {
+        () => this.agGridAdapter.getAgGridApi()?.onFilterChanged(), this.adaptableOptions.filterOptions.filterActionOnDataChange.throttleDelay, {
             trailing: true,
             leading: false,
         });
         /**
-         * Use Case: AG Grid columns have changed
-         * Action: Set Columns in store and filter grid
-         */
-        this.debouncedSetColumnIntoStore = (0, debounce_1.default)(() => {
-            if (!this.isReady) {
-                return;
-            }
-            this.deriveAdaptableColumnStateFromAgGrid();
-        }, GeneralConstants_1.HALF_SECOND);
-        const columnEventsThatTriggersStateChange = [
-            'columnMoved',
-            'gridColumnsChanged',
-            'displayedColumnsChanged',
-            'columnVisible',
-            'newColumnsLoaded',
-        ];
-        this.agGridAdapter.getAgGridApi().addGlobalListener((this.listenerGlobalColumnEventsThatTriggerStateChange = (type) => {
-            if (columnEventsThatTriggersStateChange.indexOf(type) > -1) {
-                this.debouncedSetColumnIntoStore();
-            }
-        }));
-        /**
-         * Use Case: User has started inline editing but its distabled in Action Row Options
+         * Use Case: User has started inline editing but its disabled in Row Form Options
          * Action: Stop editing
          */
         this.agGridAdapter.getAgGridApi().addEventListener('cellEditingStarted', (this.listenerCellEditingStarted = () => {
-            var _a;
-            if ((_a = this.adaptableOptions.actionRowOptions) === null || _a === void 0 ? void 0 : _a.disableInlineEditing)
+            if (this.adaptableOptions.rowFormOptions.disableInlineEditing)
                 this.agGridAdapter.getAgGridApi().stopEditing();
         }));
         /**
-         * Use Case: initial data has been displayed in grid
-         * Action1: Set the Layout
-         * Action2: Ensure that we have set column data types
-         * Note: Deals with scenario where the data is provided to AdapTable after grid has been setup
+         * Use Case: Grid was already set up and now the initial data has been displayed
+         * Action1: Update the Column Model
+         * Action2: Refresh Calculated Columns
          */
         this.agGridAdapter.getAgGridApi().addEventListener('firstDataRendered', (this.listenerFirstDataRendered = () => {
             if (this.initWithLazyData) {
-                this.updateColumnModelAndRefreshGrid({ skipColDefsRefresh: true });
+                this.updateColumnModelAndRefreshGrid();
                 this.api.calculatedColumnApi.refreshAggregatedCalculatedColumns();
                 this._emit('FirstDataRendered');
             }
             this.autoSizeLayoutIfNeeded();
         }));
-        /**
-         * Use Case: Entered or Left Pivot Mode
-         * Action 1: Autosize pivot columns when entering pivot mode (if autosize pivot in Layout is true)
-         * Action 2: Set pivot mode on / off in api as necessary
-         */
-        this.agGridAdapter.getAgGridApi().addEventListener('columnPivotModeChanged', (this.listenerPivotModeChanged = (params) => {
-            if (params.type == 'columnPivotModeChanged' &&
-                params.columnApi != null &&
-                params.columnApi.columnController != null &&
-                params.columnApi.columnController.pivotMode == true) {
-                if (this.adaptableOptions.layoutOptions.autoSizeColumnsInPivotLayout == true) {
-                    this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-                }
-                this.api.internalApi.setPivotModeOn();
-            }
-            else {
-                this.api.internalApi.setPivotModeOff();
-            }
-        }));
         /**
          * Use Case: A pivot column has changed
          * Action: Autosize pivot columns (if autosize pivot in Layout is true)
@@ -1466,77 +1239,14 @@ class AdaptableAgGrid {
                 params.columnApi != null &&
                 params.columnApi.columnController != null &&
                 params.columnApi.columnController.pivotMode == true) {
-                if (this.adaptableOptions.layoutOptions.autoSizeColumnsInPivotLayout == true) {
+                if (this.api.layoutApi.getCurrentLayout().AutoSizeColumns) {
                     this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
                 }
             }
         }));
         /**
-         * Use Case: Things have changed in the grid that require the Layout to be saved
-         * Action: Save the Layout (on a debounce)
-         */
-        const columnEventsThatTriggersAutoLayoutSave = [
-            'columnPinned',
-            'columnPivotChanged',
-            'columnPivotModeChanged',
-            'displayedColumnsChanged',
-            'sortChanged',
-            'columnRowGroupChanged',
-            'columnValueChanged',
-        ];
-        // ADD filter event
-        this.agGridAdapter.getAgGridApi().addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
-            if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
-                this.debouncedSaveGridLayout(type);
-            }
-        }));
-        /**
-         * Save Layout if Display Row Groups is "dynamic
-         */
-        this.debouncedSaveGridLayout = (0, debounce_1.default)((type) => {
-            if (!this.isReady) {
-                return;
-            }
-            this.logger.info('Event Triggering Auto Layout Save', type || '');
-            this.updateLayoutFromGrid();
-        }, GeneralConstants_1.HALF_SECOND);
-        const rowGroupEventsThatTriggersAutoLayoutSave = [
-            'rowGroupOpened',
-            'expandOrCollapseAll',
-        ];
-        this.agGridAdapter.getAgGridApi().addGlobalListener((this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave = (type) => {
-            if (rowGroupEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
-                if (this.adaptableOptions.layoutOptions.displayRowGroups == 'dynamic') {
-                    this.debouncedSaveGridLayout(type);
-                }
-            }
-        }));
-        /**
-         * Use Case: Column Row Grouping changes and 'restoreUngroupedColumns' is true
-         * Action: Make the column invisiblel
-         */
-        this.agGridAdapter.getAgGridApi().addEventListener('columnRowGroupChanged', (this.listenerColumnRowGroupChanged = (params) => {
-            var _a, _b;
-            if (this.api.internalApi.isGridInPivotMode()) {
-                return;
-            }
-            if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.groupingOptions) === null || _b === void 0 ? void 0 : _b.restoreUngroupedColumns) {
-                this.persistColumnIndexBeforeGrouping(params);
-            }
-        }));
-        /**
-         * Use Case: A Column has finished being resized
-         * Action 1: Save the Layout (on a debounce)
-         * Action 2: Emit the internal ColumnResized event - used by Sparkline Column (in Charts)
-         */
-        this.agGridAdapter.getAgGridApi().addEventListener('columnResized', (this.listenerColumnResized = (params) => {
-            if (params.finished == true && params.type == 'columnResized' && params.column) {
-                this.debouncedSaveGridLayout(params.type);
-            }
-        }));
-        /**
-         * Use Case: Row Selection has changed
-         * Action: Set Selected Rows (on a debeounce)
+         * Use Case: User has selected Rows or opened a Row Group
+         * Action: Set Selected Rows (on a debounce of 500ms)
          */
         this.debouncedSetSelectedRows = (0, debounce_1.default)(() => {
             if (!this.isReady) {
@@ -1556,14 +1266,14 @@ class AdaptableAgGrid {
         }));
         /**
          * Use Case: User has selected a range of cells
-         * Action: Set Selected Cells (on a debounce)
+         * Action: Set Selected Cells (on a debounce of 250ms)
          */
         this.debouncedSetSelectedCells = (0, debounce_1.default)(() => {
             if (!this.isReady) {
                 return;
             }
             this.refreshSelectedCellsState();
-        }, 250);
+        }, GeneralConstants_1.QUARTER_SECOND);
         this.agGridAdapter.getAgGridApi().addEventListener('cellSelectionChanged', (this.listenerCellSelectionChanged = (params) => {
             if (params.finished == true) {
                 this.debouncedSetSelectedCells();
@@ -1571,20 +1281,21 @@ class AdaptableAgGrid {
         }));
         /**
          * Use Case: Sort has changed in the Grid
-         * Action1: Update AdapTable Sort Info
+         * Action1: Fire the Grid Sorted Event
          * Action2: Set Selected Cells (on a debounce)
          */
         this.agGridAdapter.getAgGridApi().addEventListener('sortChanged', (this.listenerSortChanged = () => {
-            this.onSortChanged();
+            this.api.eventApi.internalApi.fireGridSortedEvent();
             this.debouncedSetSelectedCells();
         }));
+        /**
+         * Use Case: Charts have been created or destroyed, Chart ranges selected or Chart options changed
+         * Action: Call onChartModelChange in Charting Service
+         */
         const eventsThatTriggerChartingChanges = [
             'chartCreated',
-            /** Chart Range selection has changed */
             'chartRangeSelectionChanged',
-            /** Chart Options have changed */
             'chartOptionsChanged',
-            /** Chart was destroyed */
             'chartDestroyed',
         ];
         const chartingModule = this.ModuleService.getModuleById('Charting');
@@ -1621,32 +1332,21 @@ class AdaptableAgGrid {
     }
     shouldAutoSizeLayout() {
         const { layoutApi } = this.api;
-        const { layoutOptions } = this.adaptableOptions;
         const currentLayout = layoutApi.getCurrentLayout();
-        if (currentLayout.ColumnWidthMap && Object.keys(currentLayout.ColumnWidthMap).length > 0) {
+        if (currentLayout.ColumnWidths && Object.keys(currentLayout.ColumnWidths).length > 0) {
             return;
         }
-        const autoSize = currentLayout.EnablePivot
-            ? layoutOptions.autoSizeColumnsInPivotLayout
-            : layoutOptions.autoSizeColumnsInLayout;
-        return autoSize;
+        return currentLayout.AutoSizeColumns;
     }
     autoSizeLayoutIfNeeded() {
         if (this.shouldAutoSizeLayout()) {
             requestAnimationFrame(() => {
-                var _a;
                 if (this.isAvailable) {
-                    (_a = this.agGridAdapter.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.autoSizeAllColumns();
+                    this.autoSizeAllColumns();
                 }
             });
         }
     }
-    performAudit(action, oldState, newState) {
-        if (this.isReady) {
-            const adaptableStateChangedInfo = Object.assign(Object.assign({ actionName: action.type, clientTimestamp: new Date() }, this.api.internalApi.buildBaseContext()), { adaptableStateKey: this.adaptableOptions.adaptableStateKey, action: action, oldState: oldState, newState: newState });
-            this.api.eventApi.emit('AdaptableStateChanged', adaptableStateChangedInfo);
-        }
-    }
     forPlugins(callback) {
         if (Array.isArray(this.adaptableOptions.plugins)) {
             this.adaptableOptions.plugins.forEach((plugin) => {
@@ -1684,9 +1384,9 @@ class AdaptableAgGrid {
         this.AlertService = new AlertService_1.AlertService(this.api);
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
         this.Fdc3Service = new Fdc3Service_1.Fdc3Service(this.api);
-        this.CellPopupService = new CellPopupService_1.CellPopupService(this.api);
+        this.AnnotationsService = new AnnotationsService_1.AnnotationsService(this.api);
         this.FlashingCellService = new FlashingCellService_1.FlashingCellService(this.api);
-        this.RowEditService = new RowEditService_1.RowEditService(this.api);
+        this.RowFormService = new RowFormService_1.RowFormService(this.api);
         this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.optionsApi.getAdaptableOptions(), true);
     }
     initLicenseService() {
@@ -1743,18 +1443,17 @@ class AdaptableAgGrid {
      */
     temporaryAdaptableStateUpdates() {
         this.api.eventApi.on('AdaptableReady', () => {
-            var _a, _b;
             // update status bar state
-            const adaptableStatusPanels = (_b = (_a = this.agGridAdapter
+            const adaptableStatusPanels = this.agGridAdapter
                 .getAgGridApi()
-                .getGridOption('statusBar')) === null || _a === void 0 ? void 0 : _a.statusPanels) === null || _b === void 0 ? void 0 : _b.filter((statusPanel) => this.adaptableStatusPanelKeys.includes(statusPanel.key));
+                .getGridOption('statusBar')
+                ?.statusPanels?.filter((statusPanel) => this.adaptableStatusPanelKeys.includes(statusPanel.key));
             const statusBarModule = this.ModuleService.getModuleById(ModuleConstants.StatusBarModuleId);
             // need to add only the adaptable panels
             statusBarModule.syncStateWithOptions(adaptableStatusPanels);
         });
     }
     validatePrimaryKey() {
-        var _a;
         if (this.hasAutogeneratedPrimaryKey) {
             return;
         }
@@ -1764,7 +1463,7 @@ class AdaptableAgGrid {
         if (!primaryKeyColDef) {
             let errorMessage;
             // if no primary key column then lets check the first row to see if its a data item
-            const primaryKeyDataItem = (_a = this.getFirstRowNode()) === null || _a === void 0 ? void 0 : _a.data[primaryKey];
+            const primaryKeyDataItem = this.getFirstRowNode()?.data[primaryKey];
             if (!primaryKeyDataItem) {
                 errorMessage = `The Primary Key '${this.adaptableOptions.primaryKey}' does not exist.  This will affect many functions in AdapTable.`;
                 if (this.adaptableOptions.alertOptions.showMissingPrimaryKeyAlert) {
@@ -1781,21 +1480,31 @@ class AdaptableAgGrid {
     }
     deriveAdaptableColumnStateFromAgGrid() {
         const allColumns = [];
-        const agGridCols = this.agGridAdapter.getAgGridApi().getColumns();
-        const columnGroupChildren = this.agGridAdapter
-            .getAgGridApi()
+        const gridApi = this.agGridAdapter.getAgGridApi();
+        const isPivot = gridApi.isPivotMode();
+        let agGridCols = isPivot
+            ? gridApi.getColumns()
+            : // we call getAllGridColumns because we want to also have the generated group columns
+                gridApi.getAllGridColumns();
+        if (isPivot) {
+            // let's also support the pivot result columns
+            const pivotResultColumns = gridApi.getPivotResultColumns() || [];
+            if (pivotResultColumns.length) {
+                agGridCols = [...agGridCols, ...pivotResultColumns];
+            }
+        }
+        const columnGroupChildren = gridApi
             // TODO AFL MIG: check why this assertion is here
             .getAllDisplayedColumnGroups();
         const groupsCount = {};
-        const colsToGroups = (columnGroupChildren !== null && columnGroupChildren !== void 0 ? columnGroupChildren : []).reduce((acc, columnGroup) => {
-            var _a, _b, _c;
-            if (!((_b = (_a = columnGroup.getProvidedColumnGroup) === null || _a === void 0 ? void 0 : _a.call(columnGroup)) === null || _b === void 0 ? void 0 : _b.getColGroupDef())) {
+        const colsToGroups = (columnGroupChildren ?? []).reduce((acc, columnGroup) => {
+            if (!columnGroup.getProvidedColumnGroup?.()?.getColGroupDef()) {
                 return acc;
             }
             const ColumnGroupId = columnGroup.getGroupId();
             const AllowGroupSplit = !columnGroup.getProvidedColumnGroup().getColGroupDef()
                 .marryChildren;
-            const FriendlyName = (_c = columnGroup.getProvidedColumnGroup().getColGroupDef().headerName) !== null && _c !== void 0 ? _c : ColumnGroupId;
+            const FriendlyName = columnGroup.getProvidedColumnGroup().getColGroupDef().headerName ?? ColumnGroupId;
             const columnsInGroup = columnGroup.getLeafColumns();
             columnsInGroup.forEach((col) => {
                 const group = {
@@ -1813,58 +1522,96 @@ class AdaptableAgGrid {
         Object.keys(colsToGroups).forEach((colId) => {
             colsToGroups[colId].groupCount = groupsCount[colsToGroups[colId].columnGroupId];
         });
-        // TODO sort the visible columns by layout order
+        agGridCols = agGridCols.filter((agGridColumn) => !this.agGridColumnAdapter.shouldSkipColumn(agGridColumn.getId()));
         agGridCols.forEach((agGridColumn) => {
-            const colId = agGridColumn.getColId();
-            if (!this.api.columnApi.isAutoRowGroupColumn(colId)) {
-                allColumns.push(this.agGridAdapter.createAdaptableColumnFromAgGridColumn(agGridColumn, colsToGroups));
-            }
+            allColumns.push(this.agGridAdapter.createAdaptableColumnFromAgGridColumn(agGridColumn, colsToGroups));
         });
         this.api.gridApi.internalApi.setColumns(allColumns);
     }
     checkShouldClearExistingFiltersOrSearches() {
-        // if they have selected to clear column filters on startup then do it
-        if (this.adaptableOptions.columnFilterOptions.clearColumnFiltersOnStartUp) {
-            if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.api.columnFilterApi.getColumnFilters())) {
-                this.logger.warn('Clearing existing Column Filters as "clearColumnFiltersOnStartUp" is true');
-                this.api.columnFilterApi.clearColumnFilters();
-            }
-        }
-        // if they have selected to clear the Grid filter on startup then do it
-        if (this.adaptableOptions.gridFilterOptions.clearGridFilterOnStartUp) {
-            if (StringExtensions_1.default.IsNotNullOrEmpty(this.api.gridFilterApi.getCurrentGridFilterExpression())) {
-                this.logger.warn('Clearing existing Grid Filter as "clearGridFilterOnStartUp" is true');
-                this.api.gridFilterApi.setGridFilterExpression('');
-            }
+        // if they have selected to clear Filters on startup then do it
+        if (this.adaptableOptions.filterOptions.clearFiltersOnStartUp) {
+            this.logger.warn('Clearing any saved Filters as "clearFiltersOnStartUp" is true');
+            this.api.filterApi.clearAllFilters();
         }
         // if they have selected to clear searches on startup then do it
         if (this.adaptableOptions.quickSearchOptions.clearQuickSearchOnStartUp) {
-            if (StringExtensions_1.default.IsNotNullOrEmpty(this.api.quickSearchApi.getQuickSearchState().QuickSearchText)) {
-                this.logger.warn('Clearing existing Searches as "clearQuickSearchOnStartUp" is true');
-                this.api.quickSearchApi.clearQuickSearch();
-            }
+            this.logger.warn('Clearing any saved Searches as "clearQuickSearchOnStartUp" is true');
+            this.api.quickSearchApi.clearQuickSearch();
         }
     }
     getGridCellFromRowNode(rowNode, columnId) {
         if (rowNode == null) {
             return undefined;
         }
-        const abColumn = this.api.columnApi.getColumnWithColumnId(columnId);
-        const pkValue = this.getPrimaryKeyValueFromRowNode(rowNode);
-        const rawValue = this.getRawValueFromRowNode(rowNode, columnId);
-        const displayValue = this.getDisplayValueFromRawValue(rowNode, columnId, rawValue);
-        const normalisedValue = this.getNormalisedValueFromRawValue(rawValue, abColumn);
-        const isPivotCell = this.api.columnApi.isAutoPivotColumn(columnId);
-        const isRowGroupCell = rowNode.group;
+        return this.createGridCell(rowNode, columnId);
+    }
+    /**
+     * Use (lazy evaluated) getters to avoid unnecessary calculations and memoization to avoid recalculating the same values
+     */
+    createGridCell(rowNode, columnId) {
+        let _column;
+        let _primaryKeyValue;
+        let _rawValue;
+        let _displayValue;
+        let _normalisedValue;
+        let _isPivotCell;
+        let _isRowGroupCell;
+        const self = this;
+        const api = this.api;
+        const getRawValue = () => {
+            if (_rawValue === undefined) {
+                _rawValue = self.getRawValueFromRowNode(rowNode, columnId);
+            }
+            return _rawValue;
+        };
+        const getColumn = () => {
+            if (_column === undefined) {
+                _column = api.columnApi.getColumnWithColumnId(columnId);
+            }
+            return _column;
+        };
         return {
-            rawValue: rawValue,
-            displayValue: displayValue,
-            normalisedValue: normalisedValue,
-            column: abColumn,
-            primaryKeyValue: pkValue,
+            get rawValue() {
+                return getRawValue();
+            },
+            get visible() {
+                return self.isPrimaryKeyVisible(this.primaryKeyValue);
+            },
+            get displayValue() {
+                if (_displayValue === undefined) {
+                    _displayValue = self.getDisplayValueFromRawValue(rowNode, columnId, getRawValue());
+                }
+                return _displayValue;
+            },
+            get normalisedValue() {
+                if (_normalisedValue === undefined) {
+                    _normalisedValue = self.getNormalisedValueFromRawValue(getRawValue(), getColumn());
+                }
+                return _normalisedValue;
+            },
+            get column() {
+                return getColumn();
+            },
+            get primaryKeyValue() {
+                if (_primaryKeyValue === undefined) {
+                    _primaryKeyValue = self.getPrimaryKeyValueFromRowNode(rowNode);
+                }
+                return _primaryKeyValue;
+            },
+            get isPivotCell() {
+                if (_isPivotCell === undefined) {
+                    _isPivotCell = api.columnApi.isPivotResultColumn(columnId);
+                }
+                return _isPivotCell;
+            },
+            get isRowGroupCell() {
+                if (_isRowGroupCell === undefined) {
+                    _isRowGroupCell = rowNode.group;
+                }
+                return _isRowGroupCell;
+            },
             rowNode: rowNode,
-            isPivotCell,
-            isRowGroupCell,
         };
     }
     getPrimaryKeyValueFromRowNode(rowNode, gridApi) {
@@ -1944,31 +1691,25 @@ class AdaptableAgGrid {
             return rawValue;
         }
         const dataType = column.dataType;
-        if (dataType === 'String') {
+        if (dataType === 'text') {
             return typeof rawValue !== 'string' ? String(rawValue) : rawValue;
         }
-        if (dataType === 'Number') {
+        if (dataType === 'number') {
             // empty string or space should not be converted to 0
             return typeof rawValue !== 'number' && StringExtensions_1.default.IsNumeric(rawValue)
                 ? Number(rawValue)
                 : rawValue;
         }
-        if (dataType === 'Boolean') {
+        if (dataType === 'boolean') {
             return typeof rawValue !== 'boolean' ? Boolean(rawValue) : rawValue;
         }
-        if (dataType === 'Date') {
+        if (dataType === 'date' || dataType === 'dateString') {
             return rawValue instanceof Date ? rawValue : (0, DateHelper_1.parseDateValue)(rawValue);
         }
         return rawValue;
     }
-    updateColumnModelAndRefreshGrid(config) {
-        this.logger.info(`Updating Column Model and Refreshing Grid ${config ? `with config ${JSON.stringify(config)}` : ''}`);
-        if (config === null || config === void 0 ? void 0 : config.preemptiveColumnStateRefresh) {
-            this.deriveAdaptableColumnStateFromAgGrid();
-        }
-        if (!(config === null || config === void 0 ? void 0 : config.skipColDefsRefresh)) {
-            this.refreshColDefs();
-        }
+    updateColumnModelAndRefreshGrid() {
+        this.logger.info(`Updating Column Model and Refreshing Grid.`);
         this.deriveAdaptableColumnStateFromAgGrid();
         this.agGridColumnAdapter.setupColumns();
         this.redrawBody();
@@ -2000,9 +1741,12 @@ class AdaptableAgGrid {
     redrawRow(rowNode) {
         this.redrawRows([rowNode]);
     }
-    refreshCells(rowNodes, columns, forceUpdate, suppressFlash = false) {
+    refreshCell(rowNode, column, forceUpdate, suppressFlash = false) {
+        this.refreshCells(rowNode, [column], forceUpdate, suppressFlash);
+    }
+    refreshCells(rowNode, columns, forceUpdate, suppressFlash = false) {
         const refreshCellParams = {
-            rowNodes,
+            rowNodes: [rowNode],
             columns: columns,
             force: forceUpdate,
             suppressFlash,
@@ -2013,7 +1757,13 @@ class AdaptableAgGrid {
         this.agGridAdapter.getAgGridApi().refreshCells({ force: forceUpdate });
     }
     refreshColumns(columns, forceUpdate, suppressFlash) {
-        this.refreshCells(null, columns, forceUpdate, suppressFlash);
+        const refreshCellParams = {
+            rowNodes: null,
+            columns: columns,
+            force: forceUpdate,
+            suppressFlash,
+        };
+        this.agGridAdapter.getAgGridApi().refreshCells(refreshCellParams);
     }
     jumpToRow(rowNode) {
         this.agGridAdapter.getAgGridApi().ensureNodeVisible(rowNode, 'middle');
@@ -2026,7 +1776,7 @@ class AdaptableAgGrid {
         this.jumpToColumn(columnId);
     }
     selectColumn(columnId, config) {
-        if (!(config === null || config === void 0 ? void 0 : config.keepExistingSelection)) {
+        if (!config?.keepExistingSelection) {
             this.agGridAdapter.getAgGridApi().clearCellSelection();
         }
         const cellRangeParams = {
@@ -2038,7 +1788,7 @@ class AdaptableAgGrid {
         this.agGridAdapter.getAgGridApi().addCellRange(cellRangeParams);
     }
     selectColumns(columnIds, config) {
-        if (!(config === null || config === void 0 ? void 0 : config.keepExistingSelection)) {
+        if (!config?.keepExistingSelection) {
             this.agGridAdapter.getAgGridApi().clearCellSelection();
         }
         const rowCount = this.agGridAdapter.getAgGridApi().getDisplayedRowCount();
@@ -2069,7 +1819,7 @@ class AdaptableAgGrid {
         }
         this.agGridAdapter.setGridOption('rowData', dataSource);
         this.updateRowGroupsExpandedState();
-        this.updateColumnModelAndRefreshGrid();
+        // this.updateColumnModelAndRefreshGrid();
     }
     getGridData() {
         const data = [];
@@ -2102,7 +1852,7 @@ class AdaptableAgGrid {
     }
     getFirstRowNode() {
         let firstRowNode = this.getFirstDisplayedRowNode();
-        if (firstRowNode === null || firstRowNode === void 0 ? void 0 : firstRowNode.group) {
+        if (firstRowNode?.group) {
             // all groups may be closed so it is safer to get first leaf node
             // all groups should have at least one leafe node (though not necessarily if using SSRM)
             if (ArrayExtensions_1.default.IsNotNullOrEmpty(firstRowNode.allLeafChildren)) {
@@ -2115,12 +1865,10 @@ class AdaptableAgGrid {
         if (!layout) {
             layout = this.api.layoutApi.getCurrentLayout();
         }
-        if (this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts() &&
-            ArrayExtensions_1.default.IsNotNullOrEmpty(layout.ExpandedRowGroupValues)) {
-            this.expandRowGroupsForValues(layout.ExpandedRowGroupValues);
-        }
-        if (this.adaptableOptions.layoutOptions.displayRowGroups === 'expanded') {
-            this.expandAllRowGroups();
+        if (!(0, LayoutHelpers_1.isPivotLayout)(layout)) {
+            const layoutModel = (0, LayoutHelpers_1.tableLayoutToTableLayoutModel)(layout);
+            this.layoutManager.applyRowGroupValues(layoutModel.RowGroupValues);
+            return;
         }
     }
     isGroupRowNode(rowNode) {
@@ -2154,7 +1902,7 @@ class AdaptableAgGrid {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
-                    resolve(transaction === null || transaction === void 0 ? void 0 : transaction.update);
+                    resolve(transaction?.update);
                 });
                 if (dataUpdateConfig.flushAsync) {
                     this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
@@ -2168,7 +1916,7 @@ class AdaptableAgGrid {
             if (dataUpdateConfig.flushAsync) {
                 this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
             }
-            return Promise.resolve(transaction === null || transaction === void 0 ? void 0 : transaction.update);
+            return Promise.resolve(transaction?.update);
         }
     }
     addRows(dataRows, dataUpdateConfig) {
@@ -2186,7 +1934,7 @@ class AdaptableAgGrid {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
-                    resolve(transaction === null || transaction === void 0 ? void 0 : transaction.add);
+                    resolve(transaction?.add);
                     this.updateRowGroupsExpandedState();
                 });
                 if (dataUpdateConfig.flushAsync) {
@@ -2200,7 +1948,7 @@ class AdaptableAgGrid {
                 this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
             }
             this.updateRowGroupsExpandedState();
-            return Promise.resolve(transaction === null || transaction === void 0 ? void 0 : transaction.add);
+            return Promise.resolve(transaction?.add);
         }
     }
     addOrUpdateRows(dataRows, dataUpdateConfig) {
@@ -2228,12 +1976,12 @@ class AdaptableAgGrid {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
-                    if (transaction === null || transaction === void 0 ? void 0 : transaction.add) {
+                    if (transaction?.add) {
                         this.updateRowGroupsExpandedState();
                     }
                     resolve({
-                        added: transaction === null || transaction === void 0 ? void 0 : transaction.add,
-                        updated: transaction === null || transaction === void 0 ? void 0 : transaction.update,
+                        added: transaction?.add,
+                        updated: transaction?.update,
                     });
                 });
                 if (dataUpdateConfig.flushAsync) {
@@ -2247,15 +1995,15 @@ class AdaptableAgGrid {
                 add: addDataRows,
                 addIndex: dataUpdateConfig.addIndex,
             });
-            if (transaction === null || transaction === void 0 ? void 0 : transaction.add) {
+            if (transaction?.add) {
                 this.updateRowGroupsExpandedState();
             }
             if (dataUpdateConfig.flushAsync) {
                 this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
             }
             return Promise.resolve({
-                added: transaction === null || transaction === void 0 ? void 0 : transaction.add,
-                updated: transaction === null || transaction === void 0 ? void 0 : transaction.update,
+                added: transaction?.add,
+                updated: transaction?.update,
             });
         }
     }
@@ -2269,7 +2017,7 @@ class AdaptableAgGrid {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
-                    resolve(transaction === null || transaction === void 0 ? void 0 : transaction.remove);
+                    resolve(transaction?.remove);
                 });
                 if (dataUpdateConfig.flushAsync) {
                     this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
@@ -2316,51 +2064,137 @@ class AdaptableAgGrid {
         this.autoSizeColumns([columnId]);
     }
     autoSizeColumns(columnIds) {
-        this.agGridAdapter.getAgGridApi().autoSizeColumns(columnIds);
+        this.layoutManager.autoSizeColumns(columnIds);
     }
     autoSizeAllColumns() {
-        this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-    }
-    setColumnOrder(VisibleColumnList) {
-        const newColumnState = this.getSortedColumnStateForVisibleColumns(VisibleColumnList);
-        this.agGridAdapter.getAgGridApi().applyColumnState({
-            state: newColumnState,
-            applyOrder: true,
-        });
-        this.deriveAdaptableColumnStateFromAgGrid();
-    }
-    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, layout) {
-        layout = layout || this.api.layoutApi.getCurrentLayout();
-        visibleColumnList = visibleColumnList || layout.Columns;
-        columnState = columnState || this.agGridAdapter.getAgGridApi().getColumnState();
-        return (0, buildSortedColumnStateForLayout_1.buildSortedColumnStateForLayout)({
-            columnState: columnState.map((colState) => {
-                return {
-                    colId: colState.colId,
-                    hide: colState.hide,
-                };
-            }),
-            layout: Object.assign(Object.assign({}, layout), { Columns: visibleColumnList }),
-            groupDisplayType: this.agGridAdapter.getGridOption('groupDisplayType'),
-        });
-    }
-    getDistinctValuesForColumn(column, distinctValuesParams) {
-        let gridCells = this.getGridCellsForPermittedValues(column, distinctValuesParams);
-        if (ArrayExtensions_1.default.IsNullOrEmpty(gridCells)) {
-            gridCells = this.getDistinctGridCellsForColumn(column, distinctValuesParams);
-        }
-        return this.getUniqueGridCells(column, gridCells);
-    }
-    getGridCellsForPermittedValues(column, distinctValuesParams) {
-        var _a;
-        let gridCells = [];
-        const permittedValues = (_a = distinctValuesParams.permittedValues) !== null && _a !== void 0 ? _a : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
-        if (ArrayExtensions_1.default.IsNotNullOrEmpty(permittedValues)) {
-            gridCells = permittedValues.map((pv) => {
+        const agGridApi = this.agGridAdapter.getAgGridApi();
+        if (agGridApi) {
+            agGridApi.autoSizeAllColumns();
+        }
+    }
+    async getDistinctValuesForColumn(column) {
+        return this.getDistinctGridCellsForColumn(column);
+    }
+    async getDistinctFilterValuesForColumn(options) {
+        const { column } = options;
+        // First get the Grid Cells in the Column
+        const currentGridCells = this.getDistinctGridCellsForColumn(column);
+        // If there are custom distinct value, return them; otherwise return the Grids Cells just retrieved
+        const customInFilterValues = this.adaptableOptions.filterOptions.customInFilterValues;
+        if (customInFilterValues) {
+            const gridApiInternal = this.api.gridApi.internalApi;
+            const customInFilterValuesContext = {
+                ...this.api.internalApi.buildBaseContext(),
+                column,
+                get currentSearchValue() {
+                    return options.currentSearchValue;
+                },
+                get sortedValues() {
+                    const result = gridApiInternal
+                        .sortDistinctValues(currentGridCells, column)
+                        .map((gridCell) => {
+                        return {
+                            label: gridCell.displayValue,
+                            value: gridCell.rawValue,
+                            isSelected: gridCell.rowNode.displayed,
+                            count: gridCell.count,
+                            get visible() {
+                                return gridCell.visible;
+                            },
+                        };
+                    });
+                    return result;
+                },
+                get defaultValues() {
+                    const result = currentGridCells.map((gridCell) => {
+                        return {
+                            label: gridCell.displayValue,
+                            value: gridCell.rawValue,
+                            isSelected: gridCell.rowNode.displayed,
+                            count: gridCell.count,
+                            get visible() {
+                                return gridCell.visible;
+                            },
+                        };
+                    });
+                    return result;
+                },
+            };
+            let customDistinctValues;
+            try {
+                customDistinctValues = await customInFilterValues(customInFilterValuesContext);
+            }
+            catch (error) {
+                this.logger.consoleError(`Failed to fetch custom filter values`, column, error);
+            }
+            if (customDistinctValues) {
+                return this.getGridCellsForCustomColumnValues(customDistinctValues, column);
+            }
+        }
+        // No distinct values so lets return unique grid cells
+        return currentGridCells;
+    }
+    async getDistinctEditValuesForColumn(options) {
+        const { column, gridCell } = options;
+        // First get the Grid Cells in the Column
+        const currentGridCells = this.getDistinctGridCellsForColumn(column);
+        // If there are custom distinct value, return them, but only if a module has been specifically set
+        const customEditColumnValues = this.adaptableOptions.editOptions.customEditColumnValues;
+        if (customEditColumnValues) {
+            const customEditValuesContext = {
+                ...this.api.internalApi.buildBaseContext(),
+                column,
+                gridCell: gridCell,
+                get currentSearchValue() {
+                    return options.currentSearchValue;
+                },
+                get defaultValues() {
+                    const result = currentGridCells.map((gridCell) => {
+                        return {
+                            label: gridCell.displayValue,
+                            value: gridCell.rawValue,
+                            get visible() {
+                                return gridCell.visible;
+                            },
+                        };
+                    });
+                    return result;
+                },
+            };
+            if (customEditColumnValues) {
+                let customDistinctValues;
+                try {
+                    customDistinctValues = await customEditColumnValues(customEditValuesContext);
+                }
+                catch (error) {
+                    this.logger.consoleError(`Failed to fetch custom edit values`, column, error);
+                }
+                if (customDistinctValues) {
+                    return this.getGridCellsForCustomColumnValues(customDistinctValues, column);
+                }
+            }
+        }
+        // No distinct values so lets return unique grid cells
+        return currentGridCells;
+    }
+    getDistinctGridCellsForColumn(column) {
+        let gridCells = [];
+        this.agGridAdapter.getAgGridApi().forEachNode((rowNode) => {
+            const gridCell = this.addDistinctColumnValue(rowNode, column.columnId);
+            if (gridCell) {
+                gridCells.push(gridCell);
+            }
+        });
+        return this.getUniqueGridCells(column, gridCells);
+    }
+    getGridCellsForCustomColumnValues(customColumnValues, column) {
+        let gridCells = [];
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(customColumnValues)) {
+            gridCells = customColumnValues.map((pv) => {
                 return {
-                    rawValue: pv,
-                    displayValue: pv,
-                    normalisedValue: pv,
+                    rawValue: pv.value,
+                    displayValue: pv.label ?? pv.value,
+                    normalisedValue: pv.value,
                     columnId: column.columnId,
                     column: column,
                     rowNode: undefined,
@@ -2371,25 +2205,8 @@ class AdaptableAgGrid {
             return gridCells;
         }
     }
-    getDistinctGridCellsForColumn(column, distinctValuesParams) {
-        let gridCells = [];
-        if (distinctValuesParams.visibleRowsOnly === true) {
-            this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter((rowNode) => {
-                const gridCell = this.addDistinctColumnValue(rowNode, column.columnId);
-                if (gridCell && gridCell.rowNode !== distinctValuesParams.skipRowNode) {
-                    gridCells.push(gridCell);
-                }
-            });
-        }
-        else {
-            this.agGridAdapter.getAgGridApi().forEachNode((rowNode) => {
-                const gridCell = this.addDistinctColumnValue(rowNode, column.columnId);
-                if (gridCell && gridCell.rowNode !== distinctValuesParams.skipRowNode) {
-                    gridCells.push(gridCell);
-                }
-            });
-        }
-        return gridCells;
+    isPrimaryKeyVisible(primaryKey) {
+        return !this.filteredOutPrimaryKeys.has(primaryKey);
     }
     addDistinctColumnValue(rowNode, columnId) {
         // we do not return the values of the aggregates when in grouping mode
@@ -2405,17 +2222,43 @@ class AdaptableAgGrid {
         }
     }
     getUniqueGridCells(column, gridCells) {
-        let uniqueVals = (0, uniqBy_1.default)(gridCells, (dataItem) => {
-            const value = dataItem.rawValue;
+        const cache = new Map();
+        const lowercase = this.api.predicateApi.useCaseSensitivity();
+        const getter = (dataItem) => {
+            let value = dataItem.rawValue;
             if (value instanceof Date) {
                 return value.toISOString();
             }
+            if (lowercase && column.dataType == 'text') {
+                value = dataItem.displayValue.toLowerCase();
+            }
             return value;
+        };
+        gridCells.forEach((dataItem) => {
+            const value = getter(dataItem);
+            const primaryKey = dataItem.primaryKeyValue;
+            if (!cache.has(value)) {
+                cache.set(value, {
+                    count: 1,
+                    cell: dataItem,
+                    visible: this.isPrimaryKeyVisible(primaryKey),
+                });
+            }
+            else {
+                const data = cache.get(value);
+                data.count++;
+                data.visible = data.visible || this.isPrimaryKeyVisible(primaryKey);
+            }
         });
-        if (column.dataType == 'String' && this.api.predicateApi.useCaseSensitivity()) {
-            uniqueVals = (0, uniqBy_1.default)(uniqueVals, (d) => d.displayValue.toLowerCase());
-        }
-        return uniqueVals.slice(0, this.api.columnFilterApi.internalApi.getFilterValuesMaxNumberOfItems(column));
+        const result = [];
+        cache.forEach(({ count, cell, visible }) => {
+            result.push({
+                ...cell,
+                count,
+                visible,
+            });
+        });
+        return result;
     }
     getGridCellsForColumn(columnId, onlyVisibleRows = false) {
         let returnValues = [];
@@ -2435,27 +2278,6 @@ class AdaptableAgGrid {
         }
         return returnValues;
     }
-    // This horrible method is temporary until we can get rid of having predicates inside values which is coming soon
-    // We need it in case Blanks is requested
-    // once we go to the new multi predicate screen then we wont show blanks any more - which we should never have done
-    getGridCellsForColumnTemp(columnId, onlyVisibleRows) {
-        let returnValues = [];
-        const handler = (rowNode) => {
-            if (!this.isGroupRowNode(rowNode)) {
-                const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
-                if (gridCell) {
-                    returnValues.push(gridCell);
-                }
-            }
-        };
-        if (onlyVisibleRows) {
-            this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter(handler);
-        }
-        else {
-            this.agGridAdapter.getAgGridApi().forEachNode(handler);
-        }
-        return returnValues;
-    }
     getRowNodesForPrimaryKeys(primaryKeyValues) {
         let rowNodes = [];
         if (this.useRowNodeLookUp) {
@@ -2483,15 +2305,14 @@ class AdaptableAgGrid {
         return this.agGridAdapter.getAgGridApi().getDisplayedRowAtIndex(index);
     }
     getAgGridStatusPanels() {
-        var _a, _b;
-        return (_b = (_a = this.agGridAdapter.getGridOption('statusBar')) === null || _a === void 0 ? void 0 : _a.statusPanels) !== null && _b !== void 0 ? _b : [];
+        return this.agGridAdapter.getGridOption('statusBar')?.statusPanels ?? [];
     }
     setDataValue(value, column, primaryKeyValue, rowNode) {
         // note: because we use RowNode.setDataValue() this will cause Validation to fire
         // see https://www.ag-grid.com/javascript-data-grid/change-detection/#triggering-value-change-detection
         let newValue;
         let dataType = column.dataType;
-        newValue = dataType == 'Number' ? Number(value) : value;
+        newValue = dataType == 'number' ? Number(value) : value;
         if (dataType == undefined) {
             return; // no point continuing as probably a wrong column
         }
@@ -2521,8 +2342,8 @@ class AdaptableAgGrid {
     }
     forAllRowNodesDo(func, config) {
         this.agGridAdapter.getAgGridApi().forEachNode((rowNode, rowIndex) => {
-            const includeGroupRows = (config === null || config === void 0 ? void 0 : config.includeGroupRows) || !this.isGroupRowNode(rowNode);
-            const filterFnFulfilled = !(config === null || config === void 0 ? void 0 : config.filterFn) || (config === null || config === void 0 ? void 0 : config.filterFn(rowNode));
+            const includeGroupRows = config?.includeGroupRows || !this.isGroupRowNode(rowNode);
+            const filterFnFulfilled = !config?.filterFn || config?.filterFn(rowNode);
             if (includeGroupRows && filterFnFulfilled) {
                 func(rowNode, rowIndex);
             }
@@ -2536,8 +2357,8 @@ class AdaptableAgGrid {
             return this.forAllRowNodesDo(func, config);
         }
         this.agGridAdapter.getAgGridApi().forEachNodeAfterFilterAndSort((rowNode, rowIndex) => {
-            const includeGroupRows = (config === null || config === void 0 ? void 0 : config.includeGroupRows) || !this.isGroupRowNode(rowNode);
-            const filterFnFulfilled = !(config === null || config === void 0 ? void 0 : config.filterFn) || (config === null || config === void 0 ? void 0 : config.filterFn(rowNode));
+            const includeGroupRows = config?.includeGroupRows || !this.isGroupRowNode(rowNode);
+            const filterFnFulfilled = !config?.filterFn || config?.filterFn(rowNode);
             if (includeGroupRows && filterFnFulfilled) {
                 func(rowNode, rowIndex);
             }
@@ -2546,11 +2367,10 @@ class AdaptableAgGrid {
     getAgGridRowModelType(gridOptions) {
         // it seems that this can be null so we need explicitly to return "clientSide" in this case
         // need to check that for ServerSideRowModel it is ALWAYS returned...
-        var _a, _b;
         if (gridOptions) {
-            return (_a = gridOptions.rowModelType) !== null && _a !== void 0 ? _a : 'clientSide';
+            return gridOptions.rowModelType ?? 'clientSide';
         }
-        return (_b = this.agGridAdapter.getAgGridApi().getGridOption('rowModelType')) !== null && _b !== void 0 ? _b : 'clientSide';
+        return this.agGridAdapter.getAgGridApi().getGridOption('rowModelType') ?? 'clientSide';
     }
     getAllRowNodes(config) {
         let rowNodes = [];
@@ -2609,16 +2429,18 @@ class AdaptableAgGrid {
         this.agGridAdapter.getAgGridApi().addCellRange(cellRangeParams);
     }
     getAgGridColumnType(columnId) {
-        var _a;
-        const { type } = (_a = this.agGridAdapter.getAgGridApi().getColumnDef(columnId)) !== null && _a !== void 0 ? _a : {};
+        const { type } = this.agGridAdapter.getAgGridApi().getColumnDef(columnId) ?? {};
         return type || '';
     }
     setColumnSort(columnSorts) {
         if (!this.isReady) {
             return;
         }
-        const columnSortsMap = columnSorts === null || columnSorts === void 0 ? void 0 : columnSorts.reduce((acc, columnSort, index) => {
-            acc[columnSort.ColumnId] = Object.assign(Object.assign({}, columnSort), { SortIndex: index });
+        const columnSortsMap = columnSorts?.reduce((acc, columnSort, index) => {
+            acc[columnSort.ColumnId] = {
+                ...columnSort,
+                SortIndex: index,
+            };
             return acc;
         }, {});
         const newColumnState = this.agGridAdapter
@@ -2626,7 +2448,7 @@ class AdaptableAgGrid {
             .getColumnState()
             .map((colState) => {
             const { colId } = colState;
-            const state = Object.assign({}, colState);
+            const state = { ...colState };
             const colSort = columnSortsMap ? columnSortsMap[colId] : undefined;
             if (colSort) {
                 state.sort = colSort.SortOrder === 'Asc' ? 'asc' : 'desc';
@@ -2647,11 +2469,6 @@ class AdaptableAgGrid {
     clearColumnSort() {
         this.setColumnSort(null);
     }
-    hideColumnFilterForm() {
-        if (this.hideFilterFormPopup) {
-            this.hideFilterFormPopup();
-        }
-    }
     clearColumnFiltering() {
         this.agGridAdapter
             .getAgGridApi()
@@ -2672,11 +2489,11 @@ class AdaptableAgGrid {
         });
     }
     canGenerateCharts() {
-        return (this.agGridAdapter.isModulePresent(core_1.ModuleNames.GridChartsModule) &&
+        return (this.agGridAdapter.isAgGridModuleRegistered('IntegratedCharts') &&
             this.agGridAdapter.getAgGridApi().getGridOption('enableCharts'));
     }
     canDisplaySparklines() {
-        return this.agGridAdapter.isModulePresent(core_1.ModuleNames.SparklinesModule);
+        return this.agGridAdapter.isAgGridModuleRegistered('Sparklines');
     }
     showCharts(chartsDefinitions, chartContainer) {
         return chartsDefinitions.map((chartDefinition) => this.showChart(chartDefinition, chartContainer));
@@ -2696,7 +2513,10 @@ class AdaptableAgGrid {
             .restoreChart(chartDefinition.Model, container);
         const chartModel = this.getChartModels().find((chartModel) => chartModel.chartId === chartRef.chartId);
         // Update the definition in state so it is not considered new
-        this.api.chartingApi.editChartDefinition(Object.assign(Object.assign({}, chartDefinition), { Model: chartModel }));
+        this.api.chartingApi.editChartDefinition({
+            ...chartDefinition,
+            Model: chartModel,
+        });
         return chartRef;
     }
     updateChart(chart) {
@@ -2726,17 +2546,13 @@ class AdaptableAgGrid {
         return this.agGridAdapter.getAgGridApi().getDisplayedRowCount();
     }
     getColumnCount() {
-        var _a, _b;
-        return (_b = (_a = this.agGridAdapter.getAgGridApi().getColumns()) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        return this.agGridAdapter.getAgGridApi().getColumns()?.length ?? 0;
     }
     getVisibleColumnCount() {
-        var _a, _b;
-        return ((_b = (_a = this.agGridAdapter
+        return (this.agGridAdapter
             .getAgGridApi()
-            .getColumns()) === null || _a === void 0 ? void 0 : _a.filter((c) => c.isVisible()).length) !== null && _b !== void 0 ? _b : 0);
-    }
-    isGridGroupable() {
-        return !this.api.internalApi.isGridInTreeMode();
+            .getColumns()
+            ?.filter((c) => c.isVisible()).length ?? 0);
     }
     isGridGroupingActive() {
         let isGroupedActive = false;
@@ -2752,6 +2568,9 @@ class AdaptableAgGrid {
     setAgGridQuickSearch(searchText) {
         this.agGridAdapter.setGridOption('quickFilterText', searchText);
     }
+    clearAgGridQuickSearch() {
+        this.setAgGridQuickSearch('');
+    }
     getAgGridCurrentThemeName() {
         const container = this.getAgGridContainerElement();
         if (container && container.classList) {
@@ -2790,7 +2609,7 @@ class AdaptableAgGrid {
         const container = this.getAgGridContainerElement();
         if (container != null) {
             container.classList.add('ab-Grid');
-            if (this.adaptableOptions.columnFilterOptions.indicateFilteredColumns) {
+            if (this.adaptableOptions.filterOptions.columnFilterOptions.indicateFilteredColumns) {
                 container.classList.add('ab-Grid--indicate-filtered-columns');
             }
         }
@@ -2806,7 +2625,7 @@ class AdaptableAgGrid {
             // we mutate the theme later,
             // and since we don't want the mutation to end up in state
             // we better clone it here
-            return Object.assign({}, t);
+            return { ...t };
         });
         const allThemesMap = allThemes.reduce((acc, theme) => {
             acc[theme.Name] = theme;
@@ -2938,36 +2757,15 @@ class AdaptableAgGrid {
             this.agGridAdapter.getAgGridApi().onGroupExpandedOrCollapsed();
         }
     }
-    getExpandRowGroupsKeys() {
-        let returnValues = [];
-        if (this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts()) {
-            this.agGridAdapter.getAgGridApi().forEachNode((node) => {
-                if (node.group && node.expanded) {
-                    let current = node;
-                    const path = [];
-                    while (current) {
-                        path.push(current.key);
-                        current = current.parent;
-                    }
-                    returnValues.push(path
-                        .filter((x) => !!x)
-                        .reverse()
-                        .join(GeneralConstants_1.GROUP_PATH_SEPARATOR));
-                }
-            });
-        }
-        return returnValues;
-    }
     getAgGridColumnForColumnId(columnId) {
         return this.agGridAdapter.getAgGridApi().getColumn(columnId);
     }
     getMinMaxCachedValueForColumn(column, minMax) {
-        var _a;
         const { columnId, dataType } = column;
-        if (dataType !== 'Number') {
+        if (dataType !== 'number') {
             return undefined;
         }
-        let value = (_a = this.columnMinMaxValuesCache[columnId]) === null || _a === void 0 ? void 0 : _a[minMax];
+        let value = this.columnMinMaxValuesCache[columnId]?.[minMax];
         if (value !== undefined) {
             return value;
         }
@@ -2975,14 +2773,13 @@ class AdaptableAgGrid {
             .getUnsortedDistinctRawValuesForColumn(columnId)
             .map((item) => item.rawValue);
         value = minMax === 'min' ? Math.min(...distinctRawValues) : Math.max(...distinctRawValues);
-        this.columnMinMaxValuesCache[columnId] = Object.assign(Object.assign({}, this.columnMinMaxValuesCache[columnId]), { [minMax]: value });
+        this.columnMinMaxValuesCache[columnId] = {
+            ...this.columnMinMaxValuesCache[columnId],
+            [minMax]: value,
+        };
         return value;
     }
-    getAgGridRegisteredModules() {
-        return this.agGridAdapter.getRegisteredModules();
-    }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
         if (!config) {
             config = {
                 unmount: true,
@@ -2998,16 +2795,13 @@ class AdaptableAgGrid {
                 config.destroyAgGrid = true;
             }
         }
-        if ((config === null || config === void 0 ? void 0 : config.destroyApi) === true) {
-            this.logger.warn(`Use of 'destroyApi' is deprecated. Use 'destroyAgGrid' instead.`);
-        }
-        if (((_a = this.agGridAdapter) === null || _a === void 0 ? void 0 : _a.getAgGridApi()) && !this.agGridAdapter.getAgGridApi().isDestroyed()) {
+        this.__prevLayoutForOnChange = undefined;
+        this.layoutManager.destroy();
+        this.filteredOutPrimaryKeys.clear();
+        if (this.agGridAdapter?.getAgGridApi() && !this.agGridAdapter.getAgGridApi().isDestroyed()) {
             this.agGridAdapter
                 .getAgGridApi()
                 .removeEventListener('firstDataRendered', this.listenerFirstDataRendered);
-            this.agGridAdapter
-                .getAgGridApi()
-                .removeEventListener('columnPivotModeChanged', this.listenerPivotModeChanged);
             this.agGridAdapter
                 .getAgGridApi()
                 .removeEventListener('columnPivotChanged', this.listenerPivotChanged);
@@ -3040,7 +2834,6 @@ class AdaptableAgGrid {
                 .getAgGridApi()
                 .removeGlobalListener(this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave);
             this.listenerFirstDataRendered = null;
-            this.listenerPivotModeChanged = null;
             this.listenerPivotChanged = null;
             this.listenerCellEditingStarted = null;
             this.listenerColumnRowGroupChanged = null;
@@ -3052,9 +2845,8 @@ class AdaptableAgGrid {
             this.listenerGlobalColumnEventsThatTriggerStateChange = null;
             this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = null;
             this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave = null;
-            this.throttleFilterOnEditDataChange = null;
-            this.throttleFilterOnTickingDataChange = null;
-            const liveGridOptions = this.DANGER_getPrivateAgGridBeans().gridOptions;
+            this.throttleFilterOnDataChange = null;
+            const liveGridOptions = this.agGridAdapter.DANGER_getLiveGridOptions();
             if (liveGridOptions) {
                 this.agGridOptionsService.revertGridOptionsPropertiesToUserValue(liveGridOptions, [
                     'aggFuncs',
@@ -3071,7 +2863,6 @@ class AdaptableAgGrid {
                     'getRowId',
                     'getRowStyle',
                     'gridId',
-                    'initialGroupOrderComparator',
                     'isExternalFilterPresent',
                     'sideBar',
                     'statusBar',
@@ -3082,10 +2873,8 @@ class AdaptableAgGrid {
                 }
             }
         }
-        DANGER_AG_GRID_BEANS_MAP[this._agGridId] = null;
-        this.DANGER_updateGridOptionsMonkeyPatcher = null;
-        if ((config === null || config === void 0 ? void 0 : config.destroyApi) === true || (config === null || config === void 0 ? void 0 : config.destroyAgGrid) === true) {
-            (_b = this.agGridAdapter.getAgGridApi()) === null || _b === void 0 ? void 0 : _b.destroy();
+        if (config?.destroyAgGrid === true) {
+            this.agGridAdapter.getAgGridApi()?.destroy();
         }
         this.previousAgGridLayoutState = '';
         const gridContainerElement = this.getAgGridContainerElement();
@@ -3098,14 +2887,18 @@ class AdaptableAgGrid {
             this.agGridListenerMouseLeave = null;
         }
         this.api._internalDestroySelf();
-        (_c = this.agGridOptionsService) === null || _c === void 0 ? void 0 : _c.destroy();
+        this.layoutManager?.destroy();
+        this.layoutManager = null;
+        this.agGridOptionsService?.destroy();
         this.agGridOptionsService = null;
-        (_d = this.agGridAdapter) === null || _d === void 0 ? void 0 : _d.destroy();
+        this.agGridAdapter?.destroy();
         this.agGridAdapter = null;
-        (_e = this.agGridMenuAdapter) === null || _e === void 0 ? void 0 : _e.destroy();
+        this.agGridMenuAdapter?.destroy();
         this.agGridMenuAdapter = null;
-        (_f = this.agGridColumnAdapter) === null || _f === void 0 ? void 0 : _f.destroy();
+        this.agGridColumnAdapter?.destroy();
         this.agGridColumnAdapter = null;
+        this.agGridExportAdapter?.destroy();
+        this.agGridExportAdapter = null;
         this.rowListeners = null;
         this.emitter.destroy();
         this.emitter = null;
@@ -3114,189 +2907,65 @@ class AdaptableAgGrid {
         this.lifecycleState = 'preDestroyed';
         AdaptableAgGrid.dismissInstance(this);
         // !! this has to be before clearing up references to container and/or adaptableOptions
-        if (config === null || config === void 0 ? void 0 : config.unmount) {
+        if (config?.unmount) {
             const abContainerElement = this.getAdaptableContainerElement();
             if (abContainerElement != null) {
-                (_g = this.unmountReactRoot) === null || _g === void 0 ? void 0 : _g.call(this);
+                this.unmountReactRoot?.();
             }
             this.unmountReactRoot = null;
         }
         this.DANGER_USE_GETTER_adaptableContainerElement = null;
         this.DANGER_USE_GETTER_agGridContainerElement = null;
-        this.debouncedSaveGridLayout = null;
-        this.debouncedSetColumnIntoStore = null;
         this.debouncedSetSelectedCells = null;
         this.debouncedSetSelectedRows = null;
-        (_h = this.adaptableStore) === null || _h === void 0 ? void 0 : _h.destroy();
+        this.adaptableStore?.destroy();
         this.adaptableStore = null;
-        (_j = this.adaptableModules) === null || _j === void 0 ? void 0 : _j.clear();
+        this.adaptableModules?.clear();
         this.adaptableModules = null;
         this.adaptableOptions = null;
         this.adaptableStatusPanelKeys = null;
-        (_l = (_k = this.CalculatedColumnExpressionService) === null || _k === void 0 ? void 0 : _k.destroy) === null || _l === void 0 ? void 0 : _l.call(_k);
+        this.CalculatedColumnExpressionService?.destroy?.();
         this.CalculatedColumnExpressionService = null;
-        (_o = (_m = this.DataService) === null || _m === void 0 ? void 0 : _m.destroy) === null || _o === void 0 ? void 0 : _o.call(_m);
+        this.DataService?.destroy?.();
         this.DataService = null;
-        (_q = (_p = this.Fdc3Service) === null || _p === void 0 ? void 0 : _p.destroy) === null || _q === void 0 ? void 0 : _q.call(_p);
+        this.Fdc3Service?.destroy?.();
         this.Fdc3Service = null;
-        (_s = (_r = this.ModuleService) === null || _r === void 0 ? void 0 : _r.destroy) === null || _s === void 0 ? void 0 : _s.call(_r);
+        this.ModuleService?.destroy?.();
         this.ModuleService = null;
-        (_u = (_t = this.ValidationService) === null || _t === void 0 ? void 0 : _t.destroy) === null || _u === void 0 ? void 0 : _u.call(_t);
+        this.ValidationService?.destroy?.();
         this.ValidationService = null;
-        (_w = (_v = this.QueryLanguageService) === null || _v === void 0 ? void 0 : _v.destroy) === null || _w === void 0 ? void 0 : _w.call(_v);
+        this.QueryLanguageService?.destroy?.();
         this.QueryLanguageService = null;
-        (_y = (_x = this.AlertService) === null || _x === void 0 ? void 0 : _x.destroy) === null || _y === void 0 ? void 0 : _y.call(_x);
+        this.AlertService?.destroy?.();
         this.AlertService = null;
-        (_0 = (_z = this.TeamSharingService) === null || _z === void 0 ? void 0 : _z.destroy) === null || _0 === void 0 ? void 0 : _0.call(_z);
+        this.TeamSharingService?.destroy?.();
         this.TeamSharingService = null;
-        (_2 = (_1 = this.RowEditService) === null || _1 === void 0 ? void 0 : _1.destroy) === null || _2 === void 0 ? void 0 : _2.call(_1);
-        this.RowEditService = null;
-        (_4 = (_3 = this.MetamodelService) === null || _3 === void 0 ? void 0 : _3.destroy) === null || _4 === void 0 ? void 0 : _4.call(_3);
+        this.RowFormService?.destroy?.();
+        this.RowFormService = null;
+        this.MetamodelService?.destroy?.();
         this.MetamodelService = null;
-        (_6 = (_5 = this.LicenseService) === null || _5 === void 0 ? void 0 : _5.destroy) === null || _6 === void 0 ? void 0 : _6.call(_5);
+        this.LicenseService?.destroy?.();
         this.LicenseService = null;
-        (_8 = (_7 = this.FlashingCellService) === null || _7 === void 0 ? void 0 : _7.destroy) === null || _8 === void 0 ? void 0 : _8.call(_7);
+        this.FlashingCellService?.destroy?.();
         this.FlashingCellService = null;
-        (_10 = (_9 = this.ThemeService) === null || _9 === void 0 ? void 0 : _9.destroy) === null || _10 === void 0 ? void 0 : _10.call(_9);
+        this.ThemeService?.destroy?.();
         this.ThemeService = null;
-        (_12 = (_11 = this.ChartingService) === null || _11 === void 0 ? void 0 : _11.destroy) === null || _12 === void 0 ? void 0 : _12.call(_11);
+        this.ChartingService?.destroy?.();
         this.ChartingService = null;
-        (_14 = (_13 = this.CellPopupService) === null || _13 === void 0 ? void 0 : _13.destroy) === null || _14 === void 0 ? void 0 : _14.call(_13);
-        this.CellPopupService = null;
-        (_15 = this.unmountLoadingScreen) === null || _15 === void 0 ? void 0 : _15.call(this);
+        this.AnnotationsService?.destroy?.();
+        this.AnnotationsService = null;
+        this.unmountLoadingScreen?.();
         this.unmountLoadingScreen = null;
     }
     canExportToExcel() {
-        return this.agGridAdapter.isModulePresent(core_1.ModuleNames.ExcelExportModule);
+        return this.agGridAdapter.isAgGridModuleRegistered('ExcelExport');
     }
-    exportToExcel(reportData, fileName) {
-        const columnDefs = reportData.columns.map((column) => ({
-            field: column.columnId,
-            headerName: column.friendlyName,
-        }));
-        const NESTED_COL_SEPARATOR = '.';
-        const nestedColumns = reportData.columns.filter((column) => column.columnId.includes(NESTED_COL_SEPARATOR));
-        if (nestedColumns.length) {
-            // the rowData of nested fields (containing dots) was flattened during the report data extraction and we need to un-flatten it back
-            // ex.
-            // current state: { field: 'outerKey.innerKey', value: 2}
-            // original (desired) state: { field: 'outerKey.innerKey', value: {outerKey: {innerKey: 2}}}
-            reportData.rows.forEach((rowDataEntry) => nestedColumns.forEach((nestedColumn) => {
-                const cellExportValue = rowDataEntry[nestedColumn.columnId];
-                let intermediaryValue = rowDataEntry;
-                // augment the rowDataEntry with the new object
-                nestedColumn.columnId
-                    .split(NESTED_COL_SEPARATOR)
-                    .forEach((nestedKey, index, nestedCols) => {
-                    // we reached the leaf node, so we set the cell value and break
-                    if (index === nestedCols.length - 1) {
-                        intermediaryValue[nestedKey] = cellExportValue;
-                        return;
-                    }
-                    if (intermediaryValue[nestedKey] == undefined) {
-                        intermediaryValue[nestedKey] = {};
-                    } // else means that the object already has a property with this key
-                    intermediaryValue = intermediaryValue[nestedKey];
-                });
-                // delete the obsolete flattened property
-                delete rowDataEntry[nestedColumn.columnId];
-            }));
-        }
-        const gridOptions = {
-            columnDefs,
-            rowData: reportData.rows,
-        };
-        let gridParams = { modules: this.getAgGridRegisteredModules() };
-        const ephemeralGridApi = (0, core_1.createGrid)(document.createElement('div'), gridOptions, gridParams);
-        ephemeralGridApi.exportDataAsExcel({
-            sheetName: 'Sheet 1',
-            fileName: fileName,
-        });
-        ephemeralGridApi.destroy();
-    }
-    exportVisualDataToExcel() {
-        try {
-            const exportExcelStyles = this.api.exportApi.internalApi.buildExcelStylesForVisualReports();
-            // set DANGER_excelStyles without changing the array reference
-            this.DANGER_excelStyles.splice(0, this.DANGER_excelStyles.length, ...exportExcelStyles);
-            // this.agGridOptionsService.CAREFUL_patchGridOptionsProperty('excelStyles', exportExcelStyles);
-            this.agGridAdapter.getAgGridApi().exportDataAsExcel({
-                sheetName: 'Sheet 1',
-                fileName: this.api.exportApi.internalApi.getReportFileName(this.adaptableOptions.adaptableId, 'Excel'),
-                // delegate the cell value processing to Adaptable
-                processCellCallback: ({ node, column, value }) => {
-                    var _a;
-                    const columnId = column.getColId();
-                    if ((node === null || node === void 0 ? void 0 : node.group) &&
-                        (this.api.columnApi.isAutoRowGroupColumn(columnId) ||
-                            // we would still need to process the cell if this is a group row with an aggregated value
-                            ((_a = node === null || node === void 0 ? void 0 : node.aggData) === null || _a === void 0 ? void 0 : _a[columnId]) == undefined)) {
-                        // skip processing of row groups, this was already handled in processRowGroupCallback()
-                        return value;
-                    }
-                    return this.processCellForExcelExport(node, columnId);
-                },
-                processRowGroupCallback: (params) => {
-                    var _a;
-                    // recreating the standard AG Grid styling for row groups: 'Parent -> Child'
-                    // additionally the values are formatted
-                    let rowGroupNode = params.node;
-                    const isFooterRow = rowGroupNode.footer;
-                    const rowGroupSummary = [(_a = this.processRowGroupForExcelExport(rowGroupNode)) !== null && _a !== void 0 ? _a : ''];
-                    while (rowGroupNode.parent) {
-                        rowGroupNode = rowGroupNode.parent;
-                        const formattedParentNode = this.processRowGroupForExcelExport(rowGroupNode);
-                        if (formattedParentNode) {
-                            rowGroupSummary.push(formattedParentNode);
-                        }
-                    }
-                    let summary = rowGroupSummary.reverse().join(' -> ');
-                    if (isFooterRow) {
-                        summary = `Total: ${summary}`;
-                    }
-                    return summary;
-                },
-            });
-            this.DANGER_excelStyles.splice(0, this.DANGER_excelStyles.length, ...this.originalExcelStyles);
-        }
-        catch (error) {
-            this.logger.consoleError('Error exporting visual data to Excel', error);
-        }
-    }
-    processRowGroupForExcelExport(rowNode) {
-        var _a, _b, _c, _d, _e;
-        const columnId = (_c = (_a = rowNode.field) !== null && _a !== void 0 ? _a : (_b = rowNode.rowGroupColumn) === null || _b === void 0 ? void 0 : _b.getColId()) !== null && _c !== void 0 ? _c : (_e = (_d = rowNode.rowGroupColumn) === null || _d === void 0 ? void 0 : _d.getColDef()) === null || _e === void 0 ? void 0 : _e.field;
-        if (!columnId || !rowNode.key) {
-            return;
-        }
-        let rawValue = rowNode.key;
-        if (this.api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Date' &&
-            typeof rawValue === 'string' &&
-            // rawValue is composed only of digits
-            /^\d+$/.test(rawValue)) {
-            // AG-Grid converts the value to string, we have to reconvert it back
-            const dateRawValue = parseInt(rawValue);
-            if (dateRawValue != undefined) {
-                // @ts-ignore
-                rawValue = dateRawValue;
-            }
-        }
-        return this.api.exportApi.internalApi.getCellExportValueFromRawValue(rowNode, rawValue, columnId, GeneralConstants.VISUAL_DATA_REPORT);
-    }
-    processCellForExcelExport(rowNode, columnId) {
-        if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
-            const cellKey = this.agGridColumnAdapter.getExcelClassNameForCell(columnId, this.getPrimaryKeyValueFromRowNode(rowNode));
-            const isoFormattedDate = this.api.exportApi.internalApi.getExcelStyleWithFormattedDate(cellKey);
-            if (isoFormattedDate) {
-                // this is a Date cell which will be formatted by Excel
-                return isoFormattedDate;
-            }
-        }
-        return this.api.exportApi.internalApi.getCellExportValueFromRowNode(rowNode, columnId, GeneralConstants.VISUAL_DATA_REPORT);
+    canExportToCsv() {
+        return this.agGridAdapter.isAgGridModuleRegistered('CsvExport');
     }
     isQuickFilterAvailable() {
         if (this.api.layoutApi.isCurrentLayoutPivot() &&
-            this.adaptableOptions.columnFilterOptions.useAdaptableColumnFiltering) {
+            this.adaptableOptions.filterOptions.useAdaptableFiltering) {
             // hide completely the quick filter if pivot is enabled
             return false;
         }
@@ -3320,152 +2989,23 @@ class AdaptableAgGrid {
         return this.agGridAdapter.getAgGridApi().getChartRef(chartId);
     }
     setLayout(layout) {
-        var _a, _b, _c, _d, _e, _f;
         if (!layout) {
             layout = this.api.layoutApi.getCurrentLayout();
         }
+        (0, LayoutHelpers_1.checkForDuplicateColumns)(layout);
+        const isLayoutSwitch = this._prevLayout && layout.Name != this._prevLayout.Name;
+        let shouldUpdateExpandState = isLayoutSwitch;
+        if (!isLayoutSwitch &&
+            this._prevLayout &&
+            layout.RowGroupValues?.RowGroupDefaultBehavior &&
+            this._prevLayout?.RowGroupValues?.RowGroupDefaultBehavior !=
+                layout.RowGroupValues?.RowGroupDefaultBehavior) {
+            shouldUpdateExpandState = true;
+        }
+        this._prevLayout = layout;
         const perfSetLayout = this.logger.beginPerf(`setLayout(${layout.Name})`);
-        layout.Columns = layout.Columns || [];
-        const actionRowColumn = this.api.actionRowApi.internalApi.getColDefsForActionRowColumns()[0];
-        if (actionRowColumn) {
-            layout.Columns.push(actionRowColumn.colId);
-            layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
-            layout.PinnedColumnsMap[actionRowColumn.colId] = actionRowColumn.pinned;
-        }
-        const columnsState = this.agGridAdapter.getAgGridApi().getColumnState();
-        const columnsStateIndexes = {};
-        const columnsStateMap = columnsState.reduce((acc, colState, index) => {
-            columnsStateIndexes[colState.colId] = index;
-            acc[colState.colId] = colState;
-            return acc;
-        }, {});
-        let sortIndex = 0;
-        const sortModelMap = ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).reduce((acc, customSort) => {
-            const colId = customSort.ColumnId;
-            acc[colId] = {
-                colId,
-                sort: customSort.SortOrder === 'Asc' ? 'asc' : 'desc',
-                sortIndex,
-            };
-            sortIndex++;
-            return acc;
-        }, {});
-        const groupedColumnsIndexesMap = (layout.RowGroupedColumns || []).reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        let pivotedColumnsIndexesMap = {};
-        const aggregationFunctionsColumnsMap = layout.AggregationColumns || {};
-        const columnsToShow = !layout.EnablePivot
-            ? layout.Columns
-            : ((_b = this.agGridAdapter
-                .getAgGridApi()
-                .getPivotResultColumns()) === null || _b === void 0 ? void 0 : _b.map((column) => column.getColId())) || [];
-        let isChanged = false;
-        const colsToAutoSize = {};
-        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, layout);
-        newColumnsState = newColumnsState
-            .map((colState) => {
-            var _a, _b, _c;
-            const { colId } = colState;
-            const oldColState = columnsStateMap[colId];
-            // it's important to have width here, so it's not inherited from the existing colState
-            // which could be from a different layout
-            const newColState = Object.assign(Object.assign(Object.assign({}, oldColState), { width: null }), colState);
-            if (layout.ColumnWidthMap && layout.ColumnWidthMap[colId] != null) {
-                newColState.width = layout.ColumnWidthMap[colId];
-            }
-            else if (!colState.hide) {
-                // autosize only the columns which are part of the selected layout
-                colsToAutoSize[colId] = true;
-            }
-            if (actionRowColumn && actionRowColumn.colId === colId) {
-                newColState.width = actionRowColumn.width;
-            }
-            newColState.rowGroupIndex =
-                groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
-            newColState.rowGroup = newColState.rowGroupIndex != null;
-            const normalizePinned = (pinnedValue) => {
-                if (typeof pinnedValue === 'string') {
-                    return pinnedValue;
-                }
-                return pinnedValue == true ? 'left' : !!pinnedValue;
-            };
-            const newValuePinned = normalizePinned(layout.PinnedColumnsMap ? layout.PinnedColumnsMap[colId] : false);
-            const stateValuePinned = normalizePinned(newColState.pinned);
-            if (newValuePinned !== stateValuePinned) {
-                newColState.pinned = newValuePinned;
-            }
-            newColState.pivotIndex = null;
-            if (pivotedColumnsIndexesMap[colId] != null) {
-                newColState.pivotIndex = pivotedColumnsIndexesMap[colId];
-            }
-            newColState.aggFunc = null;
-            if (aggregationFunctionsColumnsMap[colId] != null) {
-                const colDef = this.agGridAdapter.getAgGridApi().getColumnDef(colId);
-                let aggFunc = null;
-                const aggFuncFromLayout = aggregationFunctionsColumnsMap[colId];
-                const adaptableAggFunc = this.getActiveAdaptableAggFuncForCol(colId);
-                if (aggFuncFromLayout === true) {
-                    // if we have true, it means - take the default aggFunc from colDef
-                    // NOTE: colState gives us the current aggFunc, which can be null,
-                    // while the colDef gives us the initially configured aggFunc for that column
-                    aggFunc =
-                        (_c = (_b = (_a = colState.aggFunc) !== null && _a !== void 0 ? _a : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _b !== void 0 ? _b : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === null || colDef === void 0 ? void 0 : colDef.defaultAggFunc) !== null && _c !== void 0 ? _c : 'sum';
-                }
-                else if (adaptableAggFunc && adaptableAggFunc.type === 'weightedAverage') {
-                    aggFunc = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
-                }
-                else if (typeof aggFuncFromLayout === 'string') {
-                    aggFunc = aggFuncFromLayout;
-                }
-                newColState.aggFunc = aggFunc;
-            }
-            if (sortModelMap[colId]) {
-                newColState.sort = sortModelMap[colId].sort;
-                newColState.sortIndex = sortModelMap[colId].sortIndex;
-            }
-            else {
-                newColState.sort = null;
-                newColState.sortIndex = null;
-            }
-            isChanged = isChanged || !(0, isEqual_1.default)(newColState, oldColState);
-            return newColState;
-        })
-            .filter((x) => !!x);
-        if (!isChanged) {
-            // order changed
-            const toString = (c) => `${c.colId}-${c.rowGroupIndex}-${c.pivotIndex}-${c.aggFunc}-${c.pinned}-${c.width}-${c.hide}`;
-            const oldColStateString = columnsState.map(toString).join(',');
-            const newColStateString = newColumnsState.map(toString).join(',');
-            isChanged = newColStateString != oldColStateString;
-        }
-        const pivoted = !!layout.EnablePivot;
-        const shouldUpdatePivoted = this.agGridAdapter.getAgGridApi().isPivotMode() !== pivoted;
-        /**
-         * Pivot columns are secondary columns that are created on the fly and base
-         * their configuration on the main columns by copying that configuration.
-         * Because they copy the colDefs they might have an old copy of the colldefs.
-         * This is why when the layout is pivoted we need to set columns before pivoting is applied.
-         * e.g. {
-         *  field: 'pivot-1',
-         *  pivotValueColumn: {
-         *   colDef: {
-         *     field: 'price',
-         *     // this is a copy of the original column
-         *   }
-         * }
-         *
-         */
-        if (shouldUpdatePivoted) {
-            this.updateColumnModelAndRefreshGrid();
-        }
-        isChanged = isChanged || shouldUpdatePivoted;
-        let shouldUpdateHeaders = false;
+        const isPivot = (0, LayoutHelpers_1.isPivotLayout)(layout);
         // update the header name for all columns
-        // there should be a simpler solution for this, once the Layout Management is refactored
         this.agGridAdapter
             .getAgGridApi()
             .getColumns()
@@ -3479,66 +3019,27 @@ class AdaptableAgGrid {
                 colId,
                 abColumn,
             };
-            shouldUpdateHeaders =
-                this.agGridColumnAdapter.setupColumnHeader(colSetupInfo) || shouldUpdateHeaders;
+            this.agGridColumnAdapter.setupColumnHeader(colSetupInfo);
         });
-        isChanged = isChanged || shouldUpdateHeaders;
-        if (isChanged) {
-            // it's important we set pivot mode
-            // before we set column state
-            // as otherwise column order is not preserved properly when
-            // going from pivoted to unpivoted layout
-            if (shouldUpdatePivoted) {
-                this.agGridAdapter.setGridOption('pivotMode', pivoted);
-            }
-            const perfApplyColumnState = this.logger.beginPerf('applyColumnState (layout.isChanged)');
-            this.agGridAdapter.getAgGridApi().applyColumnState({
-                state: newColumnsState,
-                applyOrder: true,
-            });
-            perfApplyColumnState.end();
-            this.api.gridApi.setColumnSorts(layout.ColumnSorts);
-            if (shouldUpdatePivoted) {
-                // simply setting PivotColumns fires an AG Grid 'modelChanged' event which cascades to a full row reload in SSRM
-                // this includes the case when we simply set an empty array of pivot columns
-                this.agGridAdapter.getAgGridApi().setPivotColumns(layout.PivotColumns || []);
-            }
-            // aggrid 25.1.0 introduced a bug such that a layout that has a grouped column, if the column has enableRowGroup: true but not rowGroup: true
-            // the group column is not possitioned correctly at the start of the layout
-            // see the test in layout/layout-switch/"should be able to switch from grouped to non-grouped and back"
-            // so we figured out the following line fixes the issue
-            // this.gridOptions.api.setColumnDefs(this.gridOptions.api.getColumnDefs()); //TODO find a solution for weighted averages - column floating filters are not showing
-            // these updates need to be at the end, the methods are based on the grid state/col defs
-            // the layout needs to be applied for them to work
-            this.updateRowGroupsExpandedState(layout);
-        }
-        const colsToAutoSizeArray = Object.keys(colsToAutoSize);
-        if (pivoted && ((_d = (_c = this.adaptableOptions) === null || _c === void 0 ? void 0 : _c.layoutOptions) === null || _d === void 0 ? void 0 : _d.autoSizeColumnsInPivotLayout)) {
-            // when a pivoted layout loads, autosize all cols
-            requestAnimationFrame(() => {
-                if (this.isAvailable) {
-                    this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-                }
-            });
-            // //but if it's also the first time the grid is loading
-            // //it's not timely enough the above call, so we keep trying... I know it's ugly, we need to find a better way
-            // setTimeout(() => {
-            //   this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-            //   setTimeout(() => {
-            //     this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-            //   }, 200);
-            // }, 100);
-        }
-        else {
-            if (((_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.layoutOptions) === null || _f === void 0 ? void 0 : _f.autoSizeColumnsInLayout) &&
-                colsToAutoSizeArray.length) {
+        const layoutModel = (0, LayoutHelpers_1.layoutStateToLayoutModel)(layout);
+        this.layoutManager?.setLayout(layoutModel, {
+            skipApplyRowGroupsExpandedState: !shouldUpdateExpandState,
+        });
+        if (layout.AutoSizeColumns) {
+            if (isPivot) {
                 requestAnimationFrame(() => {
                     if (this.isAvailable) {
-                        this.autoSizeColumns(colsToAutoSizeArray);
+                        this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
                     }
                 });
             }
+            else {
+                requestAnimationFrame(() => {
+                    this.autoSizeColumns();
+                });
+            }
         }
+        // this.showQuickFilter()
         this.forPlugins((plugin) => {
             if (plugin.afterSetLayout) {
                 plugin.afterSetLayout(this, layout);
@@ -3551,7 +3052,12 @@ class AdaptableAgGrid {
             return null;
         }
         const currentLayout = this.api.layoutApi.getCurrentLayout();
-        const aggregationFunctionsColumnsMap = currentLayout.AggregationColumns || {};
+        const aggregationFunctionsColumnsMap = ((0, LayoutHelpers_1.isPivotLayout)(currentLayout)
+            ? currentLayout.PivotAggregationColumns
+            : currentLayout.TableAggregationColumns).reduce((acc, col) => {
+            acc[col.ColumnId] = col.AggFunc;
+            return acc;
+        }, {});
         const adaptableAggFunc = aggregationFunctionsColumnsMap[columnId];
         if (typeof adaptableAggFunc === 'object' &&
             'type' in adaptableAggFunc &&
@@ -3571,14 +3077,13 @@ class AdaptableAgGrid {
         if (!primaryKeyValue) {
             return;
         }
-        // rowNode = this.getRowNodeForPrimaryKey(primaryKeyValue);
         let cellDataChangedInfos = [];
         Object.keys(oldData).forEach((key) => {
             if (this.api.columnApi.isColumnInGrid(key)) {
                 const oldValue = oldData[key];
                 const newValue = newData[key];
                 if (oldValue != newValue) {
-                    const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+                    const cellDataChangedInfo = this.api.internalApi.buildCellDataChangedInfo({
                         oldValue: oldValue,
                         newValue: newValue,
                         column: this.api.columnApi.getColumnWithColumnId(key),
@@ -3593,7 +3098,7 @@ class AdaptableAgGrid {
                 }
             }
         });
-        this.performPostEditChecks(cellDataChangedInfos);
+        this.performPostEditChecks(rowNode, cellDataChangedInfos);
     }
     onCellDataChanged({ rowNode, oldValue, newValue, colId, }) {
         if (oldValue == newValue) {
@@ -3604,7 +3109,7 @@ class AdaptableAgGrid {
             return;
         }
         if (this.isGroupRowNode(rowNode)) {
-            const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+            const cellDataChangedInfo = this.api.internalApi.buildCellDataChangedInfo({
                 oldValue: oldValue,
                 newValue: newValue,
                 column: abColumn,
@@ -3616,14 +3121,14 @@ class AdaptableAgGrid {
                 rowNode: rowNode,
                 trigger: 'aggChange',
             });
-            this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
+            this.DataService.CreateCellDataChangedEvent(cellDataChangedInfo);
             return;
         }
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
         if (!primaryKeyValue) {
             return;
         }
-        const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+        const cellDataChangedInfo = this.api.internalApi.buildCellDataChangedInfo({
             oldValue: oldValue,
             newValue: newValue,
             column: abColumn,
@@ -3634,7 +3139,7 @@ class AdaptableAgGrid {
         if (this.isUndoChange(cellDataChangedInfo)) {
             cellDataChangedInfo.trigger = 'undo';
         }
-        this.performPostEditChecks([cellDataChangedInfo]);
+        this.performPostEditChecks(rowNode, [cellDataChangedInfo]);
     }
     isUndoChange(dataChange) {
         // check if this is not a reverted change
@@ -3642,70 +3147,67 @@ class AdaptableAgGrid {
         return !!undoChange;
     }
     /**
-     * There are a few things that we need to do AFTER we edit a cell and it makes sense to put them in one place
+     * There are a few things we need to do AFTER we edit a cell and it makes sense to put them in one place
      */
-    performPostEditChecks(cellDataChangedInfos) {
-        const firstInfo = cellDataChangedInfos[0];
-        if (!firstInfo || !firstInfo.rowNode) {
-            return;
-        }
+    performPostEditChecks(rowNode, cellDataChangedInfos) {
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
+            // if a Cell Data Change is undone, log to the Console
             if (cellDataChangedInfo.trigger === 'undo') {
                 this.logger.info(`Undo data change: PK(${cellDataChangedInfo.primaryKeyValue}) Col(${cellDataChangedInfo.column}) RevertedValue(${cellDataChangedInfo.oldValue}) OriginalValue(${cellDataChangedInfo.newValue})`);
             }
+            // For Changes except Aggregations, reset cell selection if required
             if (cellDataChangedInfo.trigger === 'edit' ||
                 cellDataChangedInfo.trigger === 'undo' ||
                 cellDataChangedInfo.trigger === 'tick') {
-                this.checkChangedCellCurrentlySelected(cellDataChangedInfo);
-                this.api.freeTextColumnApi.internalApi.handleFreeTextColumnDataChange(cellDataChangedInfo);
+                this.checkIfChangedCellCurrentlySelected(cellDataChangedInfo);
             }
-            this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
+            // Call the Data Service to create an Internal Event so other parts of App can respond
+            this.DataService.CreateCellDataChangedEvent(cellDataChangedInfo);
+            // Reset Min and Max values for the Column
             this.resetMinMaxCachedValueForColumn(cellDataChangedInfo.column);
         });
-        this.refreshCellsBasedOnCellDataChange(cellDataChangedInfos);
-        firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
-    }
-    refreshCellsBasedOnCellDataChange(cellDataChangedInfos) {
-        const [firstInfo] = cellDataChangedInfos;
-        // if node is visible then check if need to refresh other columns / whole row if the updating column is:
-        // 1. referenced in Format Column Styles that have Expressions (refreshing whole row if Scope is All)
-        // 2. referenced in Format Column styles that use Column Comparisons (which might also be calculated columns)
-        if (this.agGridAdapter.isVisibleNode(firstInfo.rowNode)) {
+        this.refreshCellsBasedOnCellDataChange(rowNode, cellDataChangedInfos);
+        this.refreshColumnsBasedOnCellDataChange(cellDataChangedInfos);
+        this.filterOnDataChange();
+    }
+    refreshCellsBasedOnCellDataChange(rowNode, cellDataChangedInfos) {
+        //  Check if node is visible as otherwise AG Grid wont refresh
+        if (this.agGridAdapter.isVisibleNode(rowNode)) {
             let dataChangedScope = {
                 wholeRow: false,
                 columnIds: new Set(),
             };
-            this.getFormatColumnExpressionStylesChanges(dataChangedScope, cellDataChangedInfos);
-            if (dataChangedScope.wholeRow === false) {
-                this.getFormatColumnPredicateStyleChanges(dataChangedScope, cellDataChangedInfos);
-            }
+            // First check Format Column Expressions
+            this.checkFormatColumnExpressionStyleChanges(dataChangedScope, cellDataChangedInfos);
+            //  If Scope is whole row then redraw row and return
             if (dataChangedScope.wholeRow) {
-                this.redrawRow(firstInfo.rowNode);
+                this.redrawRow(rowNode);
+                return;
             }
-            else {
-                this.getStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
-                if (dataChangedScope.columnIds.size > 0) {
-                    this.refreshCells([firstInfo.rowNode], Array.from(dataChangedScope.columnIds.values()), true);
-                }
+            // Next check for Format Column Predicates, Styled Columns and FreeText Columns to update the ColumnIds refresh list as required
+            this.checkFormatColumnPredicateStyleChanges(dataChangedScope, cellDataChangedInfos);
+            this.checkFreeTextColumnChanges(dataChangedScope, cellDataChangedInfos);
+            this.checkStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
+            if (dataChangedScope.columnIds.size > 0) {
+                this.refreshCells(rowNode, Array.from(dataChangedScope.columnIds.values()), true);
             }
         }
-        this.refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos);
     }
-    refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos) {
-        const columnIdMap = new Set();
+    refreshColumnsBasedOnCellDataChange(cellDataChangedInfos) {
+        const columnIdsToUpdate = [];
+        // The only use case is Styled Columns with a Relative Cell Range
         cellDataChangedInfos.forEach((cellDataChangeInfo) => {
             const styledColumn = this.api.styledColumnApi.getActiveStyledColumnForColumn(cellDataChangeInfo.column);
             if (styledColumn &&
                 this.api.styledColumnApi.internalApi.hasStyledColumnRelativeCellRange(styledColumn)) {
-                columnIdMap.add(styledColumn.ColumnId);
+                columnIdsToUpdate.push(styledColumn.ColumnId);
             }
         });
-        const columnIdsToUpdate = [...columnIdMap];
-        if (columnIdsToUpdate.length) {
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(columnIdsToUpdate)) {
             this.refreshColumns(columnIdsToUpdate, true);
         }
     }
-    getStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
+    checkStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
         this.api.styledColumnApi.getStyledColumns().forEach((sc) => {
             let columnComparison = this.api.styledColumnApi.internalApi.getColumnComparisonForStyledColumn(sc);
             if (columnComparison) {
@@ -3720,7 +3222,7 @@ class AdaptableAgGrid {
             }
         });
     }
-    getFormatColumnPredicateStyleChanges(dataChangedScope, cellDataChangedInfos) {
+    checkFormatColumnPredicateStyleChanges(dataChangedScope, cellDataChangedInfos) {
         cellDataChangedInfos.forEach((cellDataChangeInfo) => {
             const dependentColumns = this.api.formatColumnApi.internalApi.getFormatColumnColumnsDependentOnColumnChange(cellDataChangeInfo.column);
             for (let colId of dependentColumns) {
@@ -3728,7 +3230,21 @@ class AdaptableAgGrid {
             }
         });
     }
-    getFormatColumnExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
+    checkFreeTextColumnChanges(dataChangedScope, cellDataChangedInfos) {
+        cellDataChangedInfos.forEach((cellDataChangedInfo) => {
+            const freeTextColumn = this.api.freeTextColumnApi
+                .getFreeTextColumns()
+                .find((fc) => fc.ColumnId == cellDataChangedInfo.column.columnId);
+            if (freeTextColumn) {
+                dataChangedScope.columnIds.add(freeTextColumn.ColumnId);
+                const refencedCalcColumns = this.api.calculatedColumnApi.internalApi.getCalculatedColumnsReferencingColumnId(cellDataChangedInfo.column.columnId);
+                refencedCalcColumns.forEach((calculatedColumn) => {
+                    dataChangedScope.columnIds.add(calculatedColumn.ColumnId);
+                });
+            }
+        });
+    }
+    checkFormatColumnExpressionStyleChanges(dataChangedScope, cellDataChangedInfos) {
         const formatColumnsWithExpression = [];
         formatColumnsWithExpression.push(...this.api.formatColumnApi.internalApi.getFormatColumnsWithExpression());
         if (ArrayExtensions_1.default.IsNullOrEmpty(formatColumnsWithExpression)) {
@@ -3736,17 +3252,17 @@ class AdaptableAgGrid {
         }
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
-                formatColumnsWithExpression.forEach((styleModule) => {
+                formatColumnsWithExpression.forEach((formatColumn) => {
                     if (!dataChangedScope.wholeRow) {
-                        const columnIds = this.api.expressionApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
+                        const columnIds = this.api.expressionApi.getColumnsFromExpression(formatColumn.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.columnScopeApi.scopeIsAll(styleModule.Scope)) {
+                            if (this.api.columnScopeApi.scopeIsAll(formatColumn.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
                             }
                             else {
                                 this.api.columnScopeApi
-                                    .getColumnsForScope(styleModule.Scope)
+                                    .getColumnsInScope(formatColumn.Scope)
                                     .map((c) => c.columnId)
                                     .forEach((colId) => {
                                     dataChangedScope.columnIds.add(colId);
@@ -3758,7 +3274,7 @@ class AdaptableAgGrid {
             }
         });
     }
-    checkChangedCellCurrentlySelected(cellDataChangedInfo) {
+    checkIfChangedCellCurrentlySelected(cellDataChangedInfo) {
         let selectedCellInfo = this.api.gridApi.getSelectedCellInfo();
         if (selectedCellInfo && ArrayExtensions_1.default.IsNotNullOrEmpty(selectedCellInfo.gridCells)) {
             let matchingCell = selectedCellInfo.gridCells.find((gc) => gc.primaryKeyValue == cellDataChangedInfo.primaryKeyValue &&
@@ -3783,298 +3299,60 @@ class AdaptableAgGrid {
             this.columnMinMaxValuesCache[column.columnId] = undefined;
         }
     }
-    filterOnTickingDataChange() {
-        var _a;
-        if (this.adaptableOptions.columnFilterOptions.filterActionOnExternalDataChange.applyFilter ==
-            Enums_1.FilterOnDataChangeOptions.Always) {
-            (_a = this.agGridAdapter.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.onFilterChanged();
-        }
-        else if (this.adaptableOptions.columnFilterOptions.filterActionOnExternalDataChange.applyFilter ==
-            Enums_1.FilterOnDataChangeOptions.Throttle) {
-            this.throttleFilterOnTickingDataChange();
-        }
-    }
-    filterOnEditDataChange() {
-        var _a;
-        if (this.adaptableOptions.columnFilterOptions.filterActionOnUserDataChange.applyFilter ==
+    filterOnDataChange() {
+        if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
             Enums_1.FilterOnDataChangeOptions.Always) {
-            (_a = this.agGridAdapter.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.onFilterChanged();
+            this.agGridAdapter.getAgGridApi()?.onFilterChanged();
         }
-        else if (this.adaptableOptions.columnFilterOptions.filterActionOnUserDataChange.applyFilter ==
+        else if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
             Enums_1.FilterOnDataChangeOptions.Throttle) {
-            this.throttleFilterOnEditDataChange();
-        }
-    }
-    shouldCreateDefaultLayout(adaptableState, adaptableOptions) {
-        var _a, _b, _c;
-        const layoutState = adaptableState.Layout || {};
-        if (((_a = adaptableOptions.layoutOptions) === null || _a === void 0 ? void 0 : _a.createDefaultLayout) &&
-            !((_b = layoutState.Layouts) === null || _b === void 0 ? void 0 : _b.find((layout) => layout.Name === GeneralConstants_1.DEFAULT_LAYOUT))) {
+            this.throttleFilterOnDataChange();
+        }
+    }
+    refreshLayout() {
+        const columnDefs = this.agGridAdapter.getColumnDefinitionsInclSpecialColumns();
+        // this setGridOption call will also trigger layout.onColumnDefsChanged()
+        // which will in turn call updateColumnModelAndRefreshGrid
+        this.agGridAdapter.setGridOption('columnDefs', columnDefs);
+        // this is needed here for when we call setAdaptableStateKey
+        // and pass a new config
+        this.setLayout();
+        this.applyFiltering();
+    }
+    isRowGroupDifferentInLayout(one, other) {
+        const prevRowGroupedColumns = one.RowGroupedColumns || one.PivotGroupedColumns || [];
+        const currentRowGroupedColumns = other.RowGroupedColumns || other.PivotGroupedColumns || [];
+        const prevRowGroupDisplayType = one.RowGroupDisplayType;
+        const currentRowGroupDisplayType = other.RowGroupDisplayType;
+        if (prevRowGroupDisplayType !== currentRowGroupDisplayType) {
             return true;
         }
-        return !((_c = layoutState.Layouts) === null || _c === void 0 ? void 0 : _c.length);
-    }
-    createDefaultLayout(state, agGridOptions) {
-        var _a, _b, _c;
-        const agGridColDefs = agGridOptions.columnDefs;
-        const agGridAutoGroupColDef = agGridOptions.autoGroupColumnDef;
-        const allColumnDefs = this.agGridAdapter.getFlattenedColDefs(agGridColDefs);
-        const defaultLayout = ObjectFactory_1.default.CreateEmptyLayout({
-            Name: GeneralConstants_1.DEFAULT_LAYOUT,
-            Columns: allColumnDefs.map((c) => c.colId),
-            AggregationColumns: allColumnDefs.reduce((acc, col) => {
-                if (typeof col.aggFunc === 'string') {
-                    acc[col.colId] = col.aggFunc;
-                }
-                return acc;
-            }, {}),
-            PinnedColumnsMap: allColumnDefs.reduce((acc, col) => {
-                const pinned = col.pinned;
-                if (pinned) {
-                    acc[col.colId] = pinned === true ? 'left' : pinned;
-                }
-                return acc;
-            }, {}),
-            RowGroupedColumns: allColumnDefs.reduce((acc, col) => {
-                if (col.rowGroup) {
-                    acc.push(col.colId);
-                }
-                return acc;
-            }, []),
-        });
-        // handle optional 'gridOptions.autoGroupColumnDefs' parameter
-        if (agGridAutoGroupColDef &&
-            (((_a = defaultLayout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) || agGridOptions.treeData)) {
-            defaultLayout.Columns = [GeneralConstants_1.AG_GRID_GROUPED_COLUMN, ...defaultLayout.Columns];
-        }
-        if (agGridAutoGroupColDef === null || agGridAutoGroupColDef === void 0 ? void 0 : agGridAutoGroupColDef.pinned) {
-            defaultLayout.PinnedColumnsMap[GeneralConstants_1.AG_GRID_GROUPED_COLUMN] =
-                agGridAutoGroupColDef.pinned === true ? 'left' : agGridAutoGroupColDef.pinned;
-        }
-        if (agGridAutoGroupColDef === null || agGridAutoGroupColDef === void 0 ? void 0 : agGridAutoGroupColDef.width) {
-            defaultLayout.ColumnWidthMap[GeneralConstants_1.AG_GRID_GROUPED_COLUMN] = agGridAutoGroupColDef.width;
-        }
-        // ADD special columns
-        const calculatedColumns = ((_b = state.CalculatedColumn) === null || _b === void 0 ? void 0 : _b.CalculatedColumns) || [];
-        if (calculatedColumns.length) {
-            defaultLayout.Columns.push(...calculatedColumns.map((c) => c.ColumnId));
-        }
-        const freeTextColumns = ((_c = state.FreeTextColumn) === null || _c === void 0 ? void 0 : _c.FreeTextColumns) || [];
-        if (freeTextColumns.length) {
-            defaultLayout.Columns.push(...freeTextColumns.map((c) => c.ColumnId));
-        }
-        return defaultLayout;
+        return prevRowGroupedColumns.join(',') !== currentRowGroupedColumns.join(',');
     }
-    /*
-     * This is the opposite of setLayout
-     */
-    updateLayoutFromGrid() {
-        var _a, _b;
-        this.logger.info('updateLayoutFromGrid()');
-        const agGridApi = this.agGridAdapter.getAgGridApi();
-        const columnState = agGridApi.getColumnState();
-        const expandedState = agGridApi.getState().rowGroupExpansion || { expandedRowGroupIds: [] };
-        const currentLayoutState = { columnState, expandedState };
-        try {
-            const stringifiedLayoutState = JSON.stringify(currentLayoutState);
-            if (stringifiedLayoutState === this.previousAgGridLayoutState) {
-                // same grid column state as a previous,
-                // so no need to update, as the layout has already been updated
-                // for this grid column state
-                return;
-            }
-            this.previousAgGridLayoutState = stringifiedLayoutState;
-        }
-        catch (ex) {
-            this.logger.consoleError('Error stringifying column state', ex);
-        }
-        const currentLayout = this.api.layoutApi.getCurrentLayout();
-        if (currentLayout.IsReadOnly) {
-            // reaply the layout so the grid is reverted
-            this.setLayout();
-            return;
-        }
-        const layout = Object.assign({}, currentLayout);
-        let columnOrder = [];
-        const columnFlexes = {};
-        const pinnedColumns = {};
-        const columnSorts = [];
-        let groupedColumns = [...new Array(columnState.length)];
-        let pivotedColumns = [...new Array(columnState.length)];
-        const pivotColumns = [];
-        const aggregatedColumns = {};
-        const columnWidths = columnState.reduce((acc, colState) => {
-            const { colId } = colState;
-            if (colState.sort && colState.sortIndex != null) {
-                columnSorts.push({
-                    ColumnId: colId,
-                    SortOrder: colState.sort === 'asc' ? 'Asc' : 'Desc',
-                    SortIndex: colState.sortIndex,
-                });
-            }
-            if (colState.width != null) {
-                acc[colId] = colState.width;
-            }
-            if (colState.flex != null) {
-                columnFlexes[colId] = colState.flex;
-            }
-            if (colState.pinned === 'left') {
-                pinnedColumns[colId] = 'left';
-            }
-            if (colState.pinned === 'right') {
-                pinnedColumns[colId] = 'right';
-            }
-            if (!colState.hide) {
-                columnOrder.push(colId);
-            }
-            if (colState.rowGroupIndex != null) {
-                groupedColumns[colState.rowGroupIndex] = colId;
-            }
-            if (colState.pivotIndex != null) {
-                pivotedColumns[colState.pivotIndex] = colId;
-            }
-            if (colState.aggFunc && typeof colState.aggFunc === 'string') {
-                aggregatedColumns[colId] = colState.aggFunc;
-            }
-            return acc;
-        }, {});
-        columnSorts.sort((a, b) => a.SortIndex - b.SortIndex);
-        this.agGridAdapter
-            .getAgGridApi()
-            .getPivotColumns()
-            .forEach((col) => {
-            pivotColumns.push(col.getColId());
-        });
-        groupedColumns = groupedColumns.filter((x) => !!x);
-        pivotedColumns = pivotedColumns.filter((x) => !!x);
-        if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.groupingOptions) === null || _b === void 0 ? void 0 : _b.restoreUngroupedColumns) {
-            columnOrder = this.restoreUnGroupColumnOrder({
-                columnOrder,
-                newGroupColumns: groupedColumns,
-            });
-        }
-        layout.ColumnWidthMap = columnWidths;
-        //  layout.ColumnFlexMap = columnFlexes;
-        layout.PinnedColumnsMap = pinnedColumns;
-        layout.Columns = columnOrder;
-        layout.ColumnSorts = columnSorts;
-        layout.RowGroupedColumns = groupedColumns;
-        if (Object.keys(aggregatedColumns).length) {
-            // AG Grid aggregations are not 1-1 with adaptable column-aggregations
-            layout.AggregationColumns = this.mapAggregationColumnsFromGrid(aggregatedColumns, currentLayout);
-        }
-        else {
-            layout.AggregationColumns = {};
-        }
-        layout.EnablePivot = this.agGridAdapter.getAgGridApi().isPivotMode();
-        layout.PivotColumns = pivotColumns;
-        if (
-        // check first row node for presence of data without iterating over whole grid
-        this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts() &&
-            this.api.gridApi.getFirstDisplayedRowNode()) {
-            layout.ExpandedRowGroupValues = this.getExpandRowGroupsKeys();
-        }
-        const previousVisibleColumns = currentLayout.Columns;
-        const newVisibleColumns = layout.Columns;
-        // check if all new columns were previously visible
-        const someColumnsAreNew = newVisibleColumns.some((colId) => !previousVisibleColumns.includes(colId));
-        if (someColumnsAreNew) {
+    onLayoutChange(layout) {
+        this.logger.info('onLayoutChange()');
+        const prevOnChangeLayout = this.__prevLayoutForOnChange || this.api.layoutApi.getCurrentLayout();
+        // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
+        const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevOnChangeLayout, layout);
+        const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevOnChangeLayout.PivotColumns);
+        if (rowGroupsChanged || pivotColsChanged) {
             this.updateColumnModelAndRefreshGrid();
         }
-        this.persistLayout(layout);
-    }
-    persistLayout(layout) {
-        if (this.api.layoutApi.shouldAutoSaveLayouts()) {
-            this.api.layoutApi.createOrUpdateLayout(layout);
-        }
         else {
-            this.api.layoutApi.internalApi.updateCurrentDraftLayout(layout);
-        }
-    }
-    /**
-     * When reading the state from the grid, we have to make sure 'avg' is not overriden with the 'avg' string.
-     */
-    mapAggregationColumnsFromGrid(aggFuncFromGrid, currentLayout) {
-        return Object.entries(aggFuncFromGrid).reduce((acc, [colId, agg]) => {
-            const adaptableAggFunc = this.getActiveAdaptableAggFuncForCol(colId);
-            if ((adaptableAggFunc === null || adaptableAggFunc === void 0 ? void 0 : adaptableAggFunc.type) === 'weightedAverage' && agg === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME) {
-                // do not override the agg func
-                acc[colId] = currentLayout.AggregationColumns[colId];
-            }
-            else {
-                acc[colId] = agg;
-            }
-            return acc;
-        }, {});
-    }
-    persistColumnIndexBeforeGrouping(params) {
-        const layout = this.api.layoutApi.getCurrentLayout();
-        const columnGroupsInLayout = layout.RowGroupedColumns;
-        const columnGroupsInGrid = params.columns.map((col) => col.getColId());
-        // what is new
-        const newGroups = columnGroupsInGrid.filter((colId) => !columnGroupsInLayout.includes(colId));
-        newGroups.forEach((colId) => {
-            const columnIndex = layout.Columns.filter((colId) => !(this.api.columnApi.isAutoRowGroupColumn(colId) ||
-                this.api.columnApi.isAutoPivotColumn(colId))).findIndex((columnIdInLayout) => columnIdInLayout === colId);
-            // user may group after a column not in layout
-            if (columnIndex !== -1) {
-                this.api.internalApi.persistPreviousGroupedColumnsIndex(layout.Uuid, colId, columnIndex);
-            }
-        });
-    }
-    /**
-     * Restores the order previous grouping order.
-     */
-    restoreUnGroupColumnOrder({ newGroupColumns, columnOrder, }) {
-        var _a;
-        const newColumnOrder = [...columnOrder];
-        const currentLayout = this.api.layoutApi.getCurrentLayout();
-        const previousGroupedColumnsIndex = this.api.internalApi.getPreviousGroupedColumnsIndex(currentLayout.Uuid);
-        const isUnGroup = newGroupColumns.length < ((_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length);
-        if (!isUnGroup) {
-            return columnOrder;
-        }
-        if (!previousGroupedColumnsIndex) {
-            return columnOrder;
-        }
-        for (let [colId, previousIndex] of Object.entries(previousGroupedColumnsIndex)) {
-            const isStillGrouped = newGroupColumns.includes(colId);
-            const isAlreadyInGrid = currentLayout.Columns.includes(colId); // was not just added by ungrouping
-            if (isStillGrouped) {
-                continue;
-            }
-            if (isAlreadyInGrid) {
-                // no longer grouped, but already in grid, this means it was already in grid before ungrouping
-                // in this case the state can be cleared
-                this.api.internalApi.persistPreviousGroupedColumnsIndex(currentLayout.Uuid, colId, null);
-                continue;
-            }
-            // need to ajust index based if grouped
-            const numberOfGroupedColumns = newColumnOrder.filter((colId) => this.api.columnApi.isAutoRowGroupColumn(colId)).length;
-            const adjustedPreviousIndex = previousIndex + numberOfGroupedColumns;
-            const indexInGrid = newColumnOrder.indexOf(colId);
-            const hasDifferentPositionAsPreviousLayout = adjustedPreviousIndex !== null && // if null, the reorder was already applied
-                indexInGrid > 0 && // needs to be in grid
-                adjustedPreviousIndex !== indexInGrid;
-            const isPreviousPositionInRange = adjustedPreviousIndex < newColumnOrder.length;
-            if (hasDifferentPositionAsPreviousLayout && isPreviousPositionInRange) {
-                newColumnOrder.splice(indexInGrid, 1);
-                newColumnOrder.splice(adjustedPreviousIndex, 0, colId);
-            }
-            this.api.internalApi.persistPreviousGroupedColumnsIndex(currentLayout.Uuid, colId, null);
+            this.deriveAdaptableColumnStateFromAgGrid();
         }
-        return newColumnOrder;
-    }
-    onSortChanged() {
-        const columnSorts = this.getColumnSorts();
-        this.api.gridApi.setColumnSorts(columnSorts);
-        this._emit('SortChanged', columnSorts);
+        this.__prevLayoutForOnChange = layout;
+        this.api.layoutApi.createOrUpdateLayout(layout);
     }
     getColumnSorts() {
         const columnSorts = [];
+        const { columnApi } = this.api;
         const columnState = this.agGridAdapter.getAgGridApi().getColumnState();
         columnState.forEach((colState) => {
             const { colId } = colState;
+            if (columnApi.isAutoRowGroupColumn(colId)) {
+                return;
+            }
             if (colState.sort && colState.sortIndex != null) {
                 columnSorts.push({
                     ColumnId: colId,
@@ -4091,50 +3369,5 @@ class AdaptableAgGrid {
             };
         });
     }
-    // #gridOpts_monkey_patch
-    // we need to intercept some of the GridOptions updates and refresh the Adaptable state
-    monkeyPatchingGridOptionsUpdates(agGridApi) {
-        var _a;
-        const gridOptionsService = (_a = this.DANGER_getPrivateAgGridBeans()) === null || _a === void 0 ? void 0 : _a.gos;
-        if (!gridOptionsService) {
-            this.logger.consoleError('Could not get hold of GridOptionsService! This is a critical error and will prevent Adaptable from working correctly.');
-        }
-        const self = this;
-        this.DANGER_updateGridOptionsMonkeyPatcher = function ({ options, force, source = 'api', }) {
-            // `columnDefs`
-            const passedColumnDefs = options.columnDefs;
-            if (passedColumnDefs) {
-                const colDefsWithSpecialColumns = self.getColumnDefinitionsInclSpecialColumns(passedColumnDefs);
-                const allDisplayedColIds = self.agGridAdapter
-                    .getAgGridApi()
-                    .getAllDisplayedColumns()
-                    .map((col) => col.getColId());
-                // mark as hidden the colDefs of special columns which are not visible
-                self.agGridAdapter.patchColDefs(colDefsWithSpecialColumns, (colDef) => {
-                    if (self.api.columnApi.isSpecialColumn(colDef.colId)) {
-                        colDef.hide = !allDisplayedColIds.includes(colDef.colId);
-                    }
-                });
-                options['columnDefs'] = colDefsWithSpecialColumns;
-                self.logger.info(`Added SpecialColumns on GridOptions.columnDefs update (source=${source})`);
-            }
-            // `context`
-            const passedContext = options.context;
-            if (passedContext) {
-                passedContext['__adaptable'] = self;
-                passedContext['adaptableApi'] = self.api;
-            }
-            // we mutated the options array, so it's OK to use the 'arguments' object
-            GridOptionsService_updateGridOptions.apply(this, arguments);
-        };
-        gridOptionsService.updateGridOptions = this.DANGER_updateGridOptionsMonkeyPatcher;
-    }
-    DANGER_getPrivateAgGridBeans() {
-        const beans = DANGER_AG_GRID_BEANS_MAP[this._agGridId];
-        if (!beans) {
-            this.logger.consoleError('Could not get hold of AgGridBeans! This is a critical error and will prevent Adaptable from working correctly.');
-        }
-        return beans;
-    }
 }
 exports.AdaptableAgGrid = AdaptableAgGrid;