@adaptabletools/adaptable-cjs 18.0.0-canary.8 → 18.0.0

package/src/agGrid/AdaptableAgGrid.js

@@ -63,12 +63,12 @@ const ColumnInfoModule_1 = require("../Strategy/ColumnInfoModule");
 const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
-const NotesModule_1 = require("../Strategy/NotesModule");
+const NoteModule_1 = require("../Strategy/NoteModule");
 const StyledColumnModule_1 = require("../Strategy/StyledColumnModule");
 const Fdc3Module_1 = require("../Strategy/Fdc3Module");
 const GridFilterModule_1 = require("../Strategy/GridFilterModule");
 const NamedQueryModule_1 = require("../Strategy/NamedQueryModule");
-const CommentsModule_1 = require("../Strategy/CommentsModule");
+const CommentModule_1 = require("../Strategy/CommentModule");
 const AdaptableNumberEditor_1 = require("./editors/AdaptableNumberEditor");
 const AdaptableDateEditor_1 = require("./editors/AdaptableDateEditor");
 const Helper_1 = require("../Utilities/Helpers/Helper");
@@ -99,6 +99,8 @@ 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 RowNodeProto = core_1.RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 /**
@@ -142,6 +144,11 @@ const adaptableInstances = {};
 const publishTimestamp = Number(EnvVars_1.ADAPTABLE_PUBLISH_TIMESTAMP);
 class AdaptableAgGrid {
     constructor() {
+        /**
+         * once layouts are properly handled with the new aggrid methods & events
+         * we can remove this hack
+         */
+        this.previousAgGridLayoutState = '';
         this.columnMinMaxValuesCache = {};
         this.renderReactRoot = (node, container) => (0, renderReactRoot_1.renderReactRoot)(node, container);
         /**
@@ -252,11 +259,11 @@ class AdaptableAgGrid {
     async _initAdaptableAgGrid(config) {
         var _a, _b;
         // Phase 1: Preprocess Adaptable Options
+        this._isDetailGrid = config.isDetailGrid === true;
         this.lifecycleState = 'preprocessOptions';
         this._rawAdaptableOptions = config.adaptableOptions;
         if (StringExtensions_1.default.IsNullOrEmptyOrWhiteSpace(this._rawAdaptableOptions.adaptableId)) {
-            AdaptableLogger_1.AdaptableLogger.consoleErrorBase(`'AdaptableOptions.adaptableId' is a required property and cannot be empty or null`);
-            this._rawAdaptableOptions.adaptableId = `AdapTable_${Date.now()}`;
+            this._rawAdaptableOptions.adaptableId = `adaptable_id_${Date.now()}`;
         }
         this.logger = (_a = this.logger) !== null && _a !== void 0 ? _a : new AdaptableLogger_1.AdaptableLogger(this._rawAdaptableOptions.adaptableId);
         const perfInitAdaptableAgGrid = this.logger.beginPerf(`Adaptable._initAdaptableAgGrid()`);
@@ -294,6 +301,7 @@ class AdaptableAgGrid {
         this.forPlugins((plugin) => plugin.afterInitModules(this, this.adaptableModules));
         const perfLoadStore = this.logger.beginPerf(`loadStore()`);
         this.adaptableStore = this.initAdaptableStore();
+        this.forPlugins((plugin) => plugin.afterInitStore(this));
         await this.adaptableStore.loadStore({
             adaptable: this,
             adaptableStateKey: this.adaptableOptions.adaptableStateKey,
@@ -303,15 +311,14 @@ class AdaptableAgGrid {
              * e.g. adding default Layout, migrating deprecated state, etc.
              */
             postLoadHook: (state) => {
-                if (this.adaptableOptions.autoMigrateState) {
+                if (this.adaptableOptions.stateOptions.autoMigrateState) {
                     state = AdaptableUpgradeHelper_1.AdaptableUpgradeHelper.migrateAdaptableState(state, {
                         // version 16 actually includes all versions up until 16
                         fromVersion: 16,
                         logger: this.logger,
                     });
                 }
-                state = this.normaliseLayoutState(state, config);
-                state = this.normaliseToolPanelState(state);
+                state = this.normalizeAdaptableState(state, config.gridOptions);
                 return state;
             },
         });
@@ -321,8 +328,7 @@ class AdaptableAgGrid {
             return Promise.reject('Adaptable was destroyed while loading the store.');
             // FIXME AFL MIG: is this enough?! talk with the team
         }
-        this.forPlugins((plugin) => plugin.afterInitServices(this));
-        this.forPlugins((plugin) => plugin.afterInitModules(this, this.adaptableModules));
+        this.forPlugins((plugin) => plugin.afterInitialStateLoaded(this));
         // do this now so it sets module entitlements
         this.EntitlementService.setModulesEntitlements();
         /**
@@ -358,7 +364,7 @@ class AdaptableAgGrid {
         this.api.themeApi.applyCurrentTheme();
         this.validatePrimaryKey();
         this.embedColumnMenu = this.agGridAdapter.isModulePresent(core_1.ModuleNames.MenuModule);
-        this.api.internalApi.setTreeMode(this.agGridAdapter.initialGridOptions.treeData);
+        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();
@@ -366,6 +372,16 @@ class AdaptableAgGrid {
         this.temporaryAdaptableStateUpdates();
         this.redrawBody();
         this.refreshHeader();
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        if (currentLayout.EnablePivot) {
+            // 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
+            // this proj works without the hack: /tests/pages/format-column/initial-pivot-layout.page.tsx
+            // 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);
+        }
         // 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();
@@ -382,14 +398,18 @@ class AdaptableAgGrid {
             adaptableApi: this.api,
             agGridApi: this.agGridAdapter.getAgGridApi(),
         });
-        this.api.userInterfaceApi.hideLoadingScreen();
         perfInitAdaptableAgGrid.end();
         return Promise.resolve(this.api);
     }
-    normaliseLayoutState(state, config) {
+    normalizeAdaptableState(state, gridOptions) {
+        state = this.normaliseLayoutState(state, gridOptions);
+        state = this.normaliseToolPanelState(state);
+        return state;
+    }
+    normaliseLayoutState(state, gridOptions) {
         var _a, _b, _c, _d, _e, _f;
         if (this.shouldCreateDefaultLayout(state, this.adaptableOptions)) {
-            const defaultLayout = this.createDefaultLayout(state, config.gridOptions.columnDefs);
+            const defaultLayout = this.createDefaultLayout(state, gridOptions.columnDefs);
             const layoutState = state.Layout || {};
             const availableLayouts = layoutState.Layouts || [];
             availableLayouts.push(defaultLayout);
@@ -425,7 +445,7 @@ class AdaptableAgGrid {
          * logic where layout is applied, it is easier and
          * less error prone to just remove it.
          */
-        if (config.gridOptions.rowModelType === 'viewport') {
+        if (gridOptions.rowModelType === 'viewport') {
             (_f = state.Layout.Layouts) === null || _f === void 0 ? void 0 : _f.forEach((layout) => {
                 if (layout.RowGroupedColumns) {
                     delete layout.RowGroupedColumns;
@@ -455,15 +475,19 @@ class AdaptableAgGrid {
         state.ToolPanel = toolPanelState;
         return state;
     }
-    applyColumnFiltering() {
-        if (this.api.columnFilterApi.isQuickFilterAvailable()) {
-            if (this.api.columnFilterApi.isQuickFilterVisible()) {
-                this.showQuickFilter();
+    refreshQuickFilter() {
+        const isQuickFilterVisible = this.api.internalApi.getSystemState().IsQuickFilterVisible;
+        if (this.isQuickFilterAvailable()) {
+            if (isQuickFilterVisible) {
+                this.api.columnFilterApi.showQuickFilterBar();
             }
             else {
-                this.hideQuickFilter();
+                this.api.columnFilterApi.hideQuickFilterBar();
             }
         }
+    }
+    applyColumnFiltering() {
+        this.refreshQuickFilter();
         this.applyGridFiltering();
         this.agGridAdapter.updateColumnFilterActiveState();
     }
@@ -706,6 +730,20 @@ class AdaptableAgGrid {
                     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`
@@ -854,12 +892,40 @@ class AdaptableAgGrid {
                 return (returnValue === null || returnValue === void 0 ? void 0 : 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
+                return 0;
+            }
+            return original_floatingFiltersHeight;
+        });
+        /**
+         * `excelStyles`
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'excelStyles', (original_excelStyles) => {
+            // we need this here just to register the original excelStyles in the service
+            return original_excelStyles;
+        });
+        /**
+         * `processPivotResultColDef`
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'processPivotResultColDef', () => {
+            return (colDef) => {
+                if (this.adaptableOptions.columnFilterOptions.useAdaptableColumnFiltering) {
+                    colDef.floatingFilter = false;
+                    colDef.filter = false;
+                }
+            };
+        });
         /**
          * `columnTypes`
          */
         // 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, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const providedColumnTypes = original_columnTypes || {};
             const gridOptionsColumnTypes = gridOptions.columnTypes || {};
             const patchedColumnTypes = Object.assign(providedColumnTypes, {
@@ -876,6 +942,12 @@ class AdaptableAgGrid {
                 abColDefTupleNumberArray: (_j = gridOptionsColumnTypes.abColDefTupleNumberArray) !== null && _j !== void 0 ? _j : {},
                 abColDefObjectNumberArray: (_k = gridOptionsColumnTypes.abColDefObjectNumberArray) !== null && _k !== void 0 ? _k : {},
             });
+            const customColumnTypes = (_l = this.api.columnApi.getColumnTypes()) !== null && _l !== void 0 ? _l : [];
+            for (const customColumnType of customColumnTypes) {
+                if (!patchedColumnTypes[customColumnType]) {
+                    patchedColumnTypes[customColumnType] = {};
+                }
+            }
             if (patchedColumnTypes.abColDefNumber.cellEditor == undefined) {
                 patchedColumnTypes.abColDefNumber.cellEditor =
                     this.variant === 'react' ? AdaptableNumberEditor_1.ReactAdaptableNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
@@ -910,6 +982,9 @@ class AdaptableAgGrid {
             return revertedDateTypeDefinitions;
         });
     }
+    isDetailGrid() {
+        return this._isDetailGrid;
+    }
     /**
      * Either initializes the AG Grid instance or delegates it to the framework wrappers (React/Anglar)
      */
@@ -923,7 +998,9 @@ class AdaptableAgGrid {
             // framework wrapper may pass the rowData as a prop
             const rowData = agGridApi.getGridOption('rowData');
             this.initWithLazyData = rowData == undefined || rowData.length === 0;
-            this.logger.info('initWithLazyData = TRUE');
+            if (this.initWithLazyData) {
+                this.logger.info('initWithLazyData = TRUE');
+            }
             if (!this.getAgGridContainerElement()) {
                 // initialize the agGridContainerElement from the AgGrid instance
                 // @ts-ignore
@@ -951,19 +1028,21 @@ class AdaptableAgGrid {
     }
     getAllColumnDefinitions(agGridColDefs) {
         const allColDefs = this.enhanceColDefsWithSpecialColumns(agGridColDefs !== null && agGridColDefs !== void 0 ? agGridColDefs : this.agGridAdapter.getAgGridApi().getColumnDefs());
-        this.agGridAdapter.assignColumnIdsToColDefs(allColDefs);
         return allColDefs;
     }
     getSpecialColDefs() {
-        return [
+        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;
@@ -987,7 +1066,9 @@ class AdaptableAgGrid {
                 else {
                     if (!isSpecialColDef(colDef)) {
                         // if it's not a special column, return it as is
-                        return colDef;
+                        // 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) {
@@ -995,7 +1076,9 @@ class AdaptableAgGrid {
                         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({}, colDef), newlyCreatedSpecialColDef);
+                        const mergedColDef = Object.assign(Object.assign({ 
+                            // see above comment for minWidth
+                            minWidth: 10 }, colDef), newlyCreatedSpecialColDef);
                         return mergedColDef;
                     }
                     else {
@@ -1024,7 +1107,7 @@ class AdaptableAgGrid {
         return resultColDefs;
     }
     useRowNodeLookUp() {
-        return this.agGridAdapter.initialGridOptions.getRowId != undefined;
+        return this.agGridAdapter.getAgGridApi().getGridOption('getRowId') != undefined;
     }
     getAgGridContainerElement() {
         if (!this.DANGER_USE_GETTER_agGridContainerElement) {
@@ -1047,10 +1130,7 @@ class AdaptableAgGrid {
     // This method returns selected cells ONLY (if selection mode is cells or multiple cells).
     // If the selection mode is row it will returns nothing - use the setSelectedRows() method
     refreshSelectedCellsState() {
-        var _a;
-        const isRangeSelectionModuleRegistered = this.agGridAdapter.isModulePresent(core_1.ModuleNames.RangeSelectionModule);
-        if (!isRangeSelectionModuleRegistered ||
-            !((_a = this.agGridAdapter.getLiveGridOptions()) === null || _a === void 0 ? void 0 : _a.enableRangeSelection) === true) {
+        if (!this.isGridRangeSelectable()) {
             return;
         }
         const selectedCellInfo = this.agGridAdapter.deriveSelectedCellInfoFromAgGrid();
@@ -1061,8 +1141,8 @@ class AdaptableAgGrid {
         return selectedCellInfo;
     }
     refreshSelectedRowsState() {
-        if (!this.isGridSelectable()) {
-            return undefined;
+        if (!this.isGridRowSelectable()) {
+            return;
         }
         const selectedRowInfo = this.agGridAdapter.deriveSelectedRowInfoFromAgGrid();
         this.api.gridApi.internalApi.setSelectedRows(selectedRowInfo);
@@ -1070,9 +1150,13 @@ class AdaptableAgGrid {
         this.api.eventApi.emit('RowSelectionChanged', rowSelectionChangedInfo);
         return selectedRowInfo;
     }
-    isGridSelectable() {
-        return (this.agGridAdapter.initialGridOptions.rowSelection === 'single' ||
-            this.agGridAdapter.initialGridOptions.rowSelection === 'multiple');
+    isGridRowSelectable() {
+        const rowSelection = this.agGridAdapter.getAgGridApi().getGridOption('rowSelection');
+        return rowSelection === 'single' || rowSelection === 'multiple';
+    }
+    isGridRangeSelectable() {
+        return (this.agGridAdapter.isModulePresent(core_1.ModuleNames.RangeSelectionModule) &&
+            this.agGridAdapter.getGridOption('enableRangeSelection'));
     }
     initAdaptableStore() {
         const perfNewAdaptableStore = this.logger.beginPerf(`initAdaptableStore()`);
@@ -1088,15 +1172,26 @@ class AdaptableAgGrid {
         var _a, _b, _c;
         const agGridState = {};
         const currentLayoutName = (_a = adaptableState.Layout) === null || _a === void 0 ? void 0 : _a.CurrentLayout;
-        const currentLayout = currentLayoutName &&
+        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) {
+        if (!_currentLayout) {
             return agGridState;
         }
-        const allAgGridColDefIds = agGridColDefs.map((colDef) => colDef.colId);
-        const getColDef = (colId) => agGridColDefs.find((colDef) => colDef.colId == colId);
+        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: allAgGridColDefIds.filter((colDefId) => { var _a; return !((_a = currentLayout.Columns) === null || _a === void 0 ? void 0 : _a.includes(colDefId)); }),
+            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: (0, sortWithOrder_1.sortWithOrderArray)(allAgGridColDefIds, currentLayout.Columns || [], {
@@ -1239,7 +1334,9 @@ class AdaptableAgGrid {
             if (this.initWithLazyData) {
                 this.updateColumnModelAndRefreshGrid();
                 this.api.calculatedColumnApi.refreshAggregatedCalculatedColumns();
+                this._emit('FirstDataRendered');
             }
+            this.autoSizeLayoutIfNeeded();
         }));
         /**
          * Use Case: Entered or Left Pivot Mode
@@ -1290,16 +1387,17 @@ class AdaptableAgGrid {
         // ADD filter event
         this.agGridAdapter.getAgGridApi().addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
             if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
-                this.debouncedSaveGridLayout();
+                this.debouncedSaveGridLayout(type);
             }
         }));
         /**
          * Save Layout if Display Row Groups is "dynamic
          */
-        this.debouncedSaveGridLayout = (0, debounce_1.default)(() => {
+        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 = [
@@ -1309,7 +1407,7 @@ class AdaptableAgGrid {
         this.agGridAdapter.getAgGridApi().addGlobalListener((this.listenerGlobalRowGroupEventsThatTriggerAutoLayoutSave = (type) => {
             if (rowGroupEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
                 if (this.adaptableOptions.layoutOptions.displayRowGroups == 'dynamic') {
-                    this.debouncedSaveGridLayout();
+                    this.debouncedSaveGridLayout(type);
                 }
             }
         }));
@@ -1333,7 +1431,7 @@ class AdaptableAgGrid {
          */
         this.agGridAdapter.getAgGridApi().addEventListener(core_1.Events.EVENT_COLUMN_RESIZED, (this.listenerColumnResized = (params) => {
             if (params.finished == true && params.type == 'columnResized' && params.column) {
-                this.debouncedSaveGridLayout();
+                this.debouncedSaveGridLayout(params.type);
             }
         }));
         /**
@@ -1380,26 +1478,6 @@ class AdaptableAgGrid {
             this.onSortChanged();
             this.debouncedSetSelectedCells();
         }));
-        const showGroupingTotalsAsHeader = this.adaptableOptions.groupingOptions.showGroupingTotalsAsHeader;
-        /**
-         * Use Case: Model has updated
-         * Action: If user has set to see grouping totals as header create a pinned row (bit of a hack)
-         */
-        this.agGridAdapter.getAgGridApi().addEventListener(core_1.Events.EVENT_MODEL_UPDATED, (this.listenerModelUpdated = (params) => {
-            if (showGroupingTotalsAsHeader) {
-                if (params && params.api) {
-                    const pinnedData = params.api.getPinnedTopRow(0);
-                    const model = params.api.getModel();
-                    const rootNode = model.getRootNode();
-                    if (!pinnedData) {
-                        params.api.setPinnedTopRowData([rootNode.aggData]);
-                    }
-                    else {
-                        pinnedData.updateData(rootNode.aggData);
-                    }
-                }
-            }
-        }));
         const eventsThatTriggerChartingChanges = [
             core_1.Events.EVENT_CHART_CREATED,
             /** Chart Range selection has changed */
@@ -1441,6 +1519,25 @@ class AdaptableAgGrid {
             },
         };
     }
+    shouldAutoSizeLayout() {
+        const { layoutApi } = this.api;
+        const { layoutOptions } = this.adaptableOptions;
+        const currentLayout = layoutApi.getCurrentLayout();
+        if (currentLayout.ColumnWidthMap && Object.keys(currentLayout.ColumnWidthMap).length > 0) {
+            return;
+        }
+        const autoSize = currentLayout.EnablePivot
+            ? layoutOptions.autoSizeColumnsInPivotLayout
+            : layoutOptions.autoSizeColumnsInLayout;
+        return autoSize;
+    }
+    autoSizeLayoutIfNeeded() {
+        if (this.shouldAutoSizeLayout()) {
+            requestAnimationFrame(() => {
+                this.autoSizeAllColumns();
+            });
+        }
+    }
     performAudit(action, oldState, newState) {
         if (this.isReady) {
             const adaptableStateChangedInfo = {
@@ -1516,7 +1613,7 @@ class AdaptableAgGrid {
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(this.api));
         modules.set(ModuleConstants.ColumnFilterModuleId, new ColumnFilterModule_1.ColumnFilterModule(this.api));
         modules.set(ModuleConstants.ColumnInfoModuleId, new ColumnInfoModule_1.ColumnInfoModule(this.api));
-        modules.set(ModuleConstants.CommentsModuleId, new CommentsModule_1.CommentsModule(this.api));
+        modules.set(ModuleConstants.CommentModuleId, new CommentModule_1.CommentModule(this.api));
         modules.set(ModuleConstants.CustomSortModuleId, new CustomSortModule_1.CustomSortModule(this.api));
         modules.set(ModuleConstants.DashboardModuleId, new DashboardModule_1.DashboardModule(this.api));
         modules.set(ModuleConstants.DataChangeHistoryModuleId, new DataChangeHistoryModule_1.DataChangeHistoryModule(this.api));
@@ -1531,7 +1628,7 @@ class AdaptableAgGrid {
         modules.set(ModuleConstants.GridInfoModuleId, new GridInfoModule_1.GridInfoModule(this.api));
         modules.set(ModuleConstants.LayoutModuleId, new LayoutModule_1.LayoutModule(this.api));
         modules.set(ModuleConstants.NamedQueryModuleId, new NamedQueryModule_1.NamedQueryModule(this.api));
-        modules.set(ModuleConstants.NotesModuleId, new NotesModule_1.NotesModule(this.api));
+        modules.set(ModuleConstants.NoteModuleId, new NoteModule_1.NoteModule(this.api));
         modules.set(ModuleConstants.PlusMinusModuleId, new PlusMinusModule_1.PlusMinusModule(this.api));
         modules.set(ModuleConstants.QuickSearchModuleId, new QuickSearchModule_1.QuickSearchModule(this.api));
         modules.set(ModuleConstants.ScheduleModuleId, new ScheduleModule_1.ScheduleModule(this.api));
@@ -1556,7 +1653,9 @@ class AdaptableAgGrid {
         this.api.eventApi.on('AdaptableReady', () => {
             var _a, _b;
             // update status bar state
-            const adaptableStatusPanels = (_b = (_a = this.agGridAdapter.initialGridOptions.statusBar) === null || _a === void 0 ? void 0 : _a.statusPanels) === null || _b === void 0 ? void 0 : _b.filter((statusPanel) => this.adaptableStatusPanelKeys.includes(statusPanel.key));
+            const adaptableStatusPanels = (_b = (_a = 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));
             const statusBarModule = this.ModuleService.getModuleById(ModuleConstants.StatusBarModuleId);
             // need to add only the adaptable panels
             statusBarModule.syncStateWithOptions(adaptableStatusPanels);
@@ -1589,13 +1688,14 @@ class AdaptableAgGrid {
             // TODO AFL MIG: check why this assertion is here
             .getAllDisplayedColumnGroups();
         const groupsCount = {};
-        const colsToGroups = columnGroupChildren.reduce((acc, columnGroup) => {
+        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())) {
                 return acc;
             }
             const ColumnGroupId = columnGroup.getGroupId();
-            const AllowGroupSplit = !columnGroup.getProvidedColumnGroup().getColGroupDef().marryChildren;
+            const AllowGroupSplit = !columnGroup.getProvidedColumnGroup().getColGroupDef()
+                .marryChildren;
             const FriendlyName = (_c = columnGroup.getProvidedColumnGroup().getColGroupDef().headerName) !== null && _c !== void 0 ? _c : ColumnGroupId;
             const columnsInGroup = columnGroup.getLeafColumns();
             columnsInGroup.forEach((col) => {
@@ -1756,7 +1856,10 @@ class AdaptableAgGrid {
         }
         return rawValue;
     }
-    updateColumnModelAndRefreshGrid() {
+    updateColumnModelAndRefreshGrid(config) {
+        if (!(config === null || config === void 0 ? void 0 : config.skipColDefsRefresh)) {
+            this.refreshColDefs();
+        }
         this.deriveAdaptableColumnStateFromAgGrid();
         this.agGridColumnAdapter.setupColumns();
         this.redrawBody();
@@ -2118,50 +2221,20 @@ class AdaptableAgGrid {
         });
         this.deriveAdaptableColumnStateFromAgGrid();
     }
-    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState) {
+    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, layout) {
+        layout = layout || this.api.layoutApi.getCurrentLayout();
+        visibleColumnList = visibleColumnList || layout.Columns;
         columnState = columnState || this.agGridAdapter.getAgGridApi().getColumnState();
-        const NewVisibleColumnIdsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const columnsStateIndexes = columnState.reduce((acc, colState, index) => {
-            acc[colState.colId] = index;
-            return acc;
-        }, {});
-        const newVisibleColumnsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const result = [...columnState]
-            .sort((colState1, colState2) => {
-            const colId1 = colState1.colId;
-            const colId2 = colState2.colId;
-            const originalIndex1 = columnsStateIndexes[colId1];
-            const originalIndex2 = columnsStateIndexes[colId2];
-            const isRowGroup1 = this.api.columnApi.isAutoRowGroupColumn(colId1);
-            const isRowGroup2 = this.api.columnApi.isAutoRowGroupColumn(colId2);
-            if (isRowGroup1 && isRowGroup2) {
-                return 1;
-            }
-            if (isRowGroup1) {
-                return -1;
-            }
-            if (isRowGroup2) {
-                return 1;
-            }
-            if (newVisibleColumnsMap[colId1] != null && newVisibleColumnsMap[colId2] == null) {
-                return -1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] != null) {
-                return 1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] == null) {
-                return originalIndex1 - originalIndex2;
-            }
-            return newVisibleColumnsMap[colState1.colId] - newVisibleColumnsMap[colState2.colId];
-        })
-            .map((colState) => (Object.assign(Object.assign({}, colState), { hide: NewVisibleColumnIdsMap[colState.colId] == null })));
-        return result;
+        return (0, buildSortedColumnStateForLayout_1.buildSortedColumnStateForLayout)({
+            columnState: columnState.map((colState) => {
+                return {
+                    colId: colState.colId,
+                    hide: colState.hide,
+                };
+            }),
+            layout: Object.assign(Object.assign({}, layout), { Columns: visibleColumnList }),
+            gridOptions: this.agGridAdapter.getLiveGridOptions(),
+        });
     }
     getDistinctValuesForColumn(column, distinctValuesParams) {
         let gridCells = this.getGridCellsForPermittedValues(column, distinctValuesParams);
@@ -2346,10 +2419,10 @@ class AdaptableAgGrid {
         });
     }
     getAgGridRowModelType() {
-        var _a, _b;
+        var _a;
         // 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...
-        return (_b = (_a = this.agGridAdapter.initialGridOptions) === null || _a === void 0 ? void 0 : _a.rowModelType) !== null && _b !== void 0 ? _b : 'clientSide';
+        return (_a = this.agGridAdapter.getAgGridApi().getGridOption('rowModelType')) !== null && _a !== void 0 ? _a : 'clientSide';
     }
     getAllRowNodes(config) {
         let rowNodes = [];
@@ -2472,7 +2545,7 @@ class AdaptableAgGrid {
     }
     canGenerateCharts() {
         return (this.agGridAdapter.isModulePresent(core_1.ModuleNames.GridChartsModule) &&
-            this.agGridAdapter.initialGridOptions.enableCharts);
+            this.agGridAdapter.getAgGridApi().getGridOption('enableCharts'));
     }
     canDisplaySparklines() {
         return this.agGridAdapter.isModulePresent(core_1.ModuleNames.SparklinesModule);
@@ -2688,7 +2761,7 @@ class AdaptableAgGrid {
     setRowGroupColumns(columnIds) {
         this.agGridAdapter.getAgGridApi().setRowGroupColumns(columnIds);
     }
-    getAgGridAllGridColumns() {
+    getAllGridColumns() {
         return this.agGridAdapter.getAgGridApi().getAllGridColumns();
     }
     clearRowGroupColumns() {
@@ -2869,6 +2942,7 @@ class AdaptableAgGrid {
         else {
             (_b = this.agGridAdapter.getAgGridApi()) === null || _b === void 0 ? void 0 : _b.destroy();
         }
+        this.previousAgGridLayoutState = '';
         const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
             gridContainerElement.removeEventListener('keydown', this.agGridListenerKeydown);
@@ -2986,54 +3060,89 @@ class AdaptableAgGrid {
         ephemeralGridApi.destroy();
     }
     exportVisualDataToExcel() {
-        // // add adaptable style props to user defined props
-        // this.setExcelStylesForExport();
-        //
-        // this.gridOptions.api.exportDataAsExcel({
-        //   sheetName: 'Sheet 1',
-        //   fileName: this.ReportService.getReportFileName(this.adaptableOptions.adaptableId, 'Excel'),
-        //   // delegate the cell value processing to Adaptable
-        //   processCellCallback: ({ node, column, value }: ProcessCellForExportParams): string => {
-        //     const columnId = column.getColId();
-        //     if (
-        //         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
-        //             node?.aggData?.[columnId] == undefined)
-        //     ) {
-        //       // skip processing of row groups, this was already handled in processRowGroupCallback()
-        //       return value;
-        //     }
-        //     return this.processCellForExcelExport(node, columnId);
-        //   },
-        //   processRowGroupCallback: (params: ProcessRowGroupForExportParams): string => {
-        //     // 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 = [this.processRowGroupForExcelExport(rowGroupNode) ?? ''];
-        //     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;
-        //   },
-        // });
-        //
-        // // keep only the user defined props
-        // this.setGridOptionsProperty('excelStyles', (userExcelStyles) => {
-        //   return userExcelStyles;
-        // });
+        try {
+            const exportExcelStyles = this.ReportService.buildExcelStylesForVisualReports();
+            this.agGridOptionsService.CAREFUL_patchGridOptionsProperty('excelStyles', exportExcelStyles);
+            this.agGridAdapter.getAgGridApi().exportDataAsExcel({
+                sheetName: 'Sheet 1',
+                fileName: this.ReportService.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.agGridOptionsService.revertGridOptionsPropertyToUserValue('excelStyles');
+        }
+        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.ReportService.getCellExportValueFromRawValue(rowNode, rawValue, columnId);
+    }
+    processCellForExcelExport(rowNode, columnId) {
+        if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
+            const cellKey = this.agGridColumnAdapter.getExcelClassNameForCell(columnId, this.getPrimaryKeyValueFromRowNode(rowNode));
+            const isoFormattedDate = this.ReportService.getExcelStyleWithFormattedDate(cellKey);
+            if (isoFormattedDate) {
+                // this is a Date cell which will be formatted by Excel
+                return isoFormattedDate;
+            }
+        }
+        return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
     }
     isQuickFilterAvailable() {
+        if (this.api.layoutApi.isCurrentLayoutPivot() &&
+            this.adaptableOptions.columnFilterOptions.useAdaptableColumnFiltering) {
+            // hide completely the quick filter if pivot is enabled
+            return false;
+        }
         return this.hasFloatingFilterOnAtLeastOneColumn(this.agGridAdapter.getAgGridApi().getColumnDefs());
     }
     hasFloatingFilterOnAtLeastOneColumn(columnDefs) {
@@ -3066,10 +3175,6 @@ class AdaptableAgGrid {
             layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
             layout.PinnedColumnsMap[actionRowColumn.colId] = actionRowColumn.pinned;
         }
-        const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
-            acc[colId] = true;
-            return acc;
-        }, {});
         const columnsState = this.agGridAdapter.getAgGridApi().getColumnState();
         const columnsStateIndexes = {};
         const columnsStateMap = columnsState.reduce((acc, colState, index) => {
@@ -3101,20 +3206,19 @@ class AdaptableAgGrid {
                 .getPivotResultColumns()) === null || _b === void 0 ? void 0 : _b.map((column) => column.getColId())) || [];
         let isChanged = false;
         const colsToAutoSize = {};
-        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState);
+        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, layout);
         newColumnsState = newColumnsState
             .map((colState) => {
             var _a, _b, _c;
             const { colId } = colState;
             const oldColState = columnsStateMap[colId];
-            const hide = this.api.columnApi.isAutoPivotColumn(colId)
-                ? colState.hide
-                : !layoutColumnsMap[colId];
-            const newColState = Object.assign(Object.assign({}, oldColState), { hide });
+            // 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 (!hide) {
+            else if (!colState.hide) {
                 // autosize only the columns which are part of the selected layout
                 colsToAutoSize[colId] = true;
             }
@@ -3123,11 +3227,7 @@ class AdaptableAgGrid {
             }
             newColState.rowGroupIndex =
                 groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
-            const previousRowGroup = newColState.rowGroup;
             newColState.rowGroup = newColState.rowGroupIndex != null;
-            if (!previousRowGroup && newColState.rowGroup) {
-                this.agGridColumnAdapter.triggerSetupColumnKeyCreator(colId);
-            }
             const normalizePinned = (pinnedValue) => {
                 if (typeof pinnedValue === 'string') {
                     return pinnedValue;
@@ -3232,14 +3332,13 @@ class AdaptableAgGrid {
             // as otherwise column order is not preserved properly when
             // going from pivoted to unpivoted layout
             if (shouldUpdatePivoted) {
-                this.agGridAdapter.getAgGridApi().setPivotMode(pivoted);
+                this.agGridAdapter.setGridOption('pivotMode', pivoted);
             }
             const perfApplyColumnState = this.logger.beginPerf('applyColumnState (layout.isChanged)');
             this.agGridAdapter.getAgGridApi().applyColumnState({
                 state: newColumnsState,
                 applyOrder: true,
             });
-            this.applyGroupColumnWidth(layout);
             perfApplyColumnState.end();
             this.api.gridApi.setColumnSorts(layout.ColumnSorts);
             this.agGridAdapter.getAgGridApi().setPivotColumns(layout.PivotColumns || []);
@@ -3258,18 +3357,22 @@ class AdaptableAgGrid {
             requestAnimationFrame(() => {
                 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);
+            // //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) {
-            this.agGridAdapter.getAgGridApi().autoSizeColumns(colsToAutoSizeArray);
+        else {
+            if (((_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.layoutOptions) === null || _f === void 0 ? void 0 : _f.autoSizeColumnsInLayout) &&
+                colsToAutoSizeArray.length) {
+                requestAnimationFrame(() => {
+                    this.autoSizeColumns(colsToAutoSizeArray);
+                });
+            }
         }
         this.forPlugins((plugin) => {
             if (plugin.afterSetLayout) {
@@ -3292,38 +3395,6 @@ class AdaptableAgGrid {
         }
         return null;
     }
-    /**
-     * Setting layout works by modifing the column state.
-     * The column state is based on the current existing columns.
-     * At this point the column groups do not exist, and the widths from layout are not applied.
-     *
-     * After the col sate is applied and the column groups are created we need
-     * to apply the state again to update the widths of the group columns.
-     */
-    applyGroupColumnWidth(layout) {
-        if (!layout.RowGroupedColumns || !layout.RowGroupedColumns.length) {
-            return;
-        }
-        const groupColumnWithDifferentWidths = this.agGridAdapter
-            .getAgGridApi()
-            .getColumnState()
-            .reduce((acc, col) => {
-            var _a;
-            if (this.api.columnApi.isAutoRowGroupColumn(col.colId)) {
-                const widthInLayout = (_a = layout.ColumnWidthMap) === null || _a === void 0 ? void 0 : _a[col.colId];
-                if (widthInLayout && widthInLayout !== col.width) {
-                    acc.push(Object.assign(Object.assign({}, col), { width: widthInLayout }));
-                }
-            }
-            return acc;
-        }, []);
-        if (groupColumnWithDifferentWidths.length === 0) {
-            return;
-        }
-        this.agGridAdapter.getAgGridApi().applyColumnState({
-            state: groupColumnWithDifferentWidths,
-        });
-    }
     onRowDataChanged({ rowNode, oldData, newData, }) {
         if (oldData == null || oldData == undefined) {
             return;
@@ -3502,12 +3573,12 @@ class AdaptableAgGrid {
                     if (!dataChangedScope.wholeRow) {
                         const columnIds = this.api.expressionApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.scopeApi.scopeIsAll(styleModule.Scope)) {
+                            if (this.api.columnScopeApi.scopeIsAll(styleModule.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
                             }
                             else {
-                                this.api.scopeApi
+                                this.api.columnScopeApi
                                     .getColumnsForScope(styleModule.Scope)
                                     .map((c) => c.columnId)
                                     .forEach((colId) => {
@@ -3618,6 +3689,24 @@ class AdaptableAgGrid {
      */
     updateLayoutFromGrid() {
         var _a, _b;
+        const agGridApi = this.agGridAdapter.getAgGridApi();
+        const columnState = agGridApi.getColumnState();
+        const expandedState = agGridApi.getState().rowGroupExpansion || { expandedRowGroupIds: [] };
+        const currentLayoutState = { columnState, expandedState };
+        try {
+            // TODO
+            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
@@ -3629,7 +3718,6 @@ class AdaptableAgGrid {
         const columnFlexes = {};
         const pinnedColumns = {};
         const columnSorts = [];
-        const columnState = this.agGridAdapter.getAgGridApi().getColumnState();
         let groupedColumns = [...new Array(columnState.length)];
         let pivotedColumns = [...new Array(columnState.length)];
         const pivotColumns = [];