@adaptabletools/adaptable 23.1.0-canary.0 → 23.1.0-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.1.0-canary.0",
+  "version": "23.1.0-canary.2",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",
@@ -68,8 +68,8 @@
     "uuid": "9.0.1"
   },
   "peerDependencies": {
-    "ag-grid-enterprise": ">=36.1.0",
-    "ag-stack": ">=36.1.0"
+    "ag-grid-enterprise": ">=36.2.0",
+    "ag-stack": ">=36.2.0"
   },
   "publishTimestamp": 0,
   "type": "module",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -48,6 +48,36 @@ export interface AgGridConfig {
     modules: Module[];
 }
 export type AdaptableVariant = 'vanilla' | 'react' | 'angular' | 'vue';
+/**
+ * #narrow_column_model_refresh
+ *
+ * What has to be refreshed in AG Grid after a column-model pass (`updateColumnModelAndRefreshGrid()`),
+ * ie. after `setupColumns()` re-installed the Adaptable colDef callbacks.
+ *
+ * Whatever changed in a colDef VALUE (eg. a new `cellRenderer`, `comparator` or `valueFormatter`) is
+ * already taken care of by AG Grid: `AgColumn.setColDef()` (see #col_def_commit) force-refreshes the
+ * rendered cells and header of the changed column. The scope only has to cover state read by the
+ * #stable_col_def_callbacks at render time, which AG Grid cannot know about.
+ */
+export interface GridRefreshScope {
+    /**
+     * Destroy & recreate the rendered rows (`redrawRows()`).
+     * Only needed when a ROW-level definition may have changed: `getRowStyle` / `getRowClass` (Alert row
+     * highlights), row height, full-width rows. Cancels cell editing; implies `cells`.
+     */
+    rows?: boolean;
+    /**
+     * Re-run the cell-level callbacks (`cellStyle`, `cellClass`, `valueFormatter`, `cellRenderer` params)
+     * on the rendered cells (`refreshCells({ force: true })`). Keeps focus, selection and in-progress edits.
+     */
+    cells?: boolean;
+    /**
+     * Recreate the header cells (`refreshHeader()`).
+     * Only needed when a header-level callback (`headerStyle` / `headerClass` / `headerValueGetter`) reads
+     * state that changed, ie. Format Columns targeting the column header.
+     */
+    header?: boolean;
+}
 /**
  *  The only interface for Adaptable
  *
@@ -280,7 +310,12 @@ export interface IAdaptable {
     expandRowGroupsForValues(columnValues: any[]): void;
     getAdaptableContainerElement(): HTMLElement | null;
     getAgGridContainerElement(): HTMLElement | null;
-    updateColumnModelAndRefreshGrid(): void;
+    /**
+     * Re-derives the Adaptable column state, sets up all columns again and refreshes AG Grid.
+     * @param refreshScope what to refresh after the columns were set up (see #narrow_column_model_refresh);
+     * defaults to a full refresh (rows + header)
+     */
+    updateColumnModelAndRefreshGrid(refreshScope?: GridRefreshScope): void;
     refreshSortIfColumnsSorted(): void;
     getAgGridColumnForColumnId(columnId: string): Column;
     getMinMaxCachedValueForColumn(column: AdaptableColumn, aggregation: 'min' | 'max' | 'avg' | 'median'): number | undefined;

package/src/Api/Internal/FormatColumnInternalApi.d.ts

@@ -7,6 +7,13 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * Column-model update alone can leave visible cells stale until scroll.
      */
     refreshFormatColumnPresentation(formatColumns: FormatColumn | FormatColumn[] | undefined): void;
+    /**
+     * see #narrow_column_model_refresh
+     * Whether ANY Format Column in state (suspended or not, in any layout) targets the column header -
+     * ie. whether the `headerStyle` / `headerClass` / header name callbacks read Format Column state at all.
+     * When none does, a Format Column change cannot alter the rendered header, so it does not have to be refreshed.
+     */
+    hasFormatColumnsTargetingHeader(): boolean;
     /**
      * Retrieves all Format Columns in Adaptable State with the `Style` property set
      * @returns format columns
@@ -83,8 +90,11 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * Checks if format column is relevant for a given cell (intersection of given AdaptableColumn and RowNode)
      *
      * @param formatColumn
-     * @param column
-     * @param params
+     * @param column - the column the Format Column is scoped to
+     * @param rowNode
+     * @param cellValue
+     * @param pivotResultColumn - set when the cell belongs to a pivot result column, so that a Rule Expression
+     * written against the base column reads the pivot result cell value (see #derived_pivot_cell_style)
      */
     formatColumnShouldRenderInCell(formatColumn: FormatColumn, column: AdaptableColumn, rowNode: IRowNode, cellValue: any, pivotResultColumn?: Column): boolean;
     /**

package/src/Api/Internal/FormatColumnInternalApi.js

@@ -49,6 +49,10 @@ export class FormatColumnInternalApi extends ApiBase {
             this.getGridApi().refreshColumns([...columnIds]);
         }
     }
+    hasFormatColumnsTargetingHeader() {
+        const headerTarget = 'columnHeader';
+        return (this.getFormatColumnApi().getFormatColumnState()?.FormatColumns ?? []).some((formatColumn) => formatColumn?.Target === headerTarget);
+    }
     getAllFormatColumnWithStyle(config) {
         return this.getFormatColumnApi()
             .getFormatColumns(config)

package/src/Api/Internal/GridInternalApi.js

@@ -205,7 +205,9 @@ export class GridInternalApi extends ApiBase {
             Aggregatable: defaultColumnDefinition.enableValue,
             SuppressMenu: defaultColumnDefinition.suppressHeaderMenuButton,
             SuppressMovable: defaultColumnDefinition.suppressMovable,
-            HeaderToolTip: defaultColumnDefinition.headerTooltip,
+            HeaderToolTip: typeof defaultColumnDefinition.headerTooltip === 'string'
+                ? defaultColumnDefinition.headerTooltip
+                : undefined,
             Width: defaultColumnDefinition.width,
         };
     }

package/src/Redux/Store/AdaptableStore.js

@@ -464,7 +464,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                             }
                         });
                     }
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ rows: true });
                     let module = (adaptable.adaptableModules.get(ModuleConstants.AlertModuleId));
                     if (module) {
                         module.checkListenToCellDataChanged();
@@ -480,7 +480,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case FlashingCellRedux.FLASHING_CELL_DEFINITION_UNSUSPEND_ALL:
                 case FlashingCellRedux.FLASHING_CELL_DEFINITION_SUSPEND_ALL: {
                     const returnAction = next(action);
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ cells: true });
                     let module = (adaptable.adaptableModules.get(ModuleConstants.FlashingCellModuleId));
                     if (module) {
                         module.checkListenToCellDataChanged();
@@ -542,7 +542,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     if (StringExtensions.IsNotNullOrEmpty(adaptable.api.quickSearchApi.getQuickSearchValue())) {
                         adaptable.refreshAgGridFind();
                     }
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ cells: true });
                     return returnAction;
                 }
                 case FormatColumnRedux.FORMAT_COLUMN_ADD_BATCH:
@@ -555,7 +555,16 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case FormatColumnRedux.FORMAT_COLUMN_SUSPEND:
                 case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND:
                 case FormatColumnRedux.FORMAT_COLUMN_SUSPEND_ALL:
-                case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND_ALL:
+                case FormatColumnRedux.FORMAT_COLUMN_UNSUSPEND_ALL: {
+                    const hadHeaderFormatColumns = adaptable.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader();
+                    const returnAction = next(action);
+                    const hasHeaderFormatColumns = adaptable.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader();
+                    adaptable.updateColumnModelAndRefreshGrid({
+                        cells: true,
+                        header: hadHeaderFormatColumns || hasHeaderFormatColumns,
+                    });
+                    return returnAction;
+                }
                 case StyledColumnRedux.STYLED_COLUMN_ADD:
                 case StyledColumnRedux.STYLED_COLUMN_EDIT:
                 case StyledColumnRedux.STYLED_COLUMN_DELETE:
@@ -564,7 +573,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case StyledColumnRedux.STYLED_COLUMN_SUSPEND_ALL:
                 case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND_ALL: {
                     const returnAction = next(action);
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({ cells: true });
                     return returnAction;
                 }
                 case CustomSortRedux.CUSTOM_SORT_ADD:
@@ -575,7 +584,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case CustomSortRedux.CUSTOM_SORT_SUSPEND_ALL:
                 case CustomSortRedux.CUSTOM_SORT_UNSUSPEND_ALL: {
                     const returnAction = next(action);
-                    adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.updateColumnModelAndRefreshGrid({});
                     adaptable.refreshSortIfColumnsSorted();
                     return returnAction;
                 }

package/src/Strategy/LayoutModule.js

@@ -361,7 +361,10 @@ export class LayoutModule extends AdaptableModuleBase {
             .getModuleService()
             .getModuleById('Shortcut')
             .checkListenToKeyDown();
-        this.api.internalApi.getAdaptableInstance().updateColumnModelAndRefreshGrid();
+        this.api.internalApi.getAdaptableInstance().updateColumnModelAndRefreshGrid({
+            cells: true,
+            header: this.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader(),
+        });
     }
     getReferencedNamedQueryNames(layout) {
         if (!layout.GridFilter?.Expression) {

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -2,7 +2,7 @@ import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType, StatusPanelDef } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
 import { AdaptableApi, DestroyConfig } from '../Api/AdaptableApi';
-import { AdaptableVariant, IAdaptable, NormalizeAdaptableStateOptions } from '../AdaptableInterfaces/IAdaptable';
+import { AdaptableVariant, GridRefreshScope, IAdaptable, NormalizeAdaptableStateOptions } from '../AdaptableInterfaces/IAdaptable';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter, RowNodeEvent } from './AgGridAdapter';
@@ -247,10 +247,47 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getDisplayValueFromRawValue(rowNode: IRowNode, columnId: string, rawValue: any): string | undefined;
     private getCleanValue;
     getNormalisedValueFromRawValue(rawValue: any, column: AdaptableColumn): string | number | boolean | Date | unknown;
-    private __updateColumnModelAndRefreshGrid_already_called;
+    /**
+     * The refresh scope already applied by a column-model pass in the current microtask window
+     * (`null` when no pass ran yet), see `updateColumnModelAndRefreshGrid`.
+     */
+    private __columnModelRefreshDoneInThisTick;
     private __forceUpdateColumnModel;
-    updateColumnModelAndRefreshGrid(): void;
-    _updateColumnModelAndRefreshGridNow(): void;
+    /**
+     * #narrow_column_model_refresh
+     *
+     * Runs the column-model pass at most once per microtask window: the first call runs it synchronously
+     * with the requested refresh scope; a later call in the same window does NOT set up the columns again
+     * (the #stable_col_def_callbacks read live state anyway) but still gets any refresh it asks for that
+     * the first call did not perform - eg a cells-only pass followed by a request for a row redraw.
+     */
+    updateColumnModelAndRefreshGrid(refreshScope?: GridRefreshScope): void;
+    /**
+     * #column_model_refresh_perf
+     *
+     * The whole pass and each of its phases are published as DevTools performance tracks
+     * (`Runtime` track, see `DevToolsTracks`) when profiling is enabled (`localStorage.adaptableProfileTracks = 'true'`).
+     * The `Update column model & refresh grid` entry carries the number of columns set up, the number of
+     * colDefs AG Grid actually saw as changed (see `AgGridAdapter.DANGER_getColDefsVersion`) and the refresh
+     * scope applied, so a `performance.getEntriesByName()` consumer (eg the `perf/column-model-refresh`
+     * Playwright spec) can tell a callback-only pass from one that committed real colDef changes.
+     *
+     * @param refreshScope see #narrow_column_model_refresh; defaults to a full refresh (rows + header)
+     */
+    _updateColumnModelAndRefreshGridNow(refreshScope?: GridRefreshScope): void;
+    /**
+     * see #narrow_column_model_refresh
+     * Applies the given refresh scope; each operation is a DevTools `Runtime` track entry (see #column_model_refresh_perf).
+     */
+    private refreshGridAfterColumnModelUpdate;
+    /**
+     * see #narrow_column_model_refresh
+     * The cell-level counterpart of `redrawBody()`: re-runs the colDef callbacks on every rendered cell
+     * without destroying the rows, so cell focus, selection and an in-progress edit survive.
+     * `cellStyle` results are normalised (see `normalizeStyleForAgGrid`), so a style that no longer applies
+     * is cleared even though AG Grid only ever ADDS inline styles on refresh.
+     */
+    refreshRenderedCells(): void;
     /**
      * Re-applies the current sort, eg. after a Custom Sort was added/edited/removed at runtime.
      * The column comparators are already up to date (see #stable_col_def_callbacks), AG Grid just has to sort again.

package/src/agGrid/AdaptableAgGrid.js

@@ -2,6 +2,7 @@ import { debounce } from '../Utilities/Helpers/TimingHelper';
 import { createGrid, } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
 import { PrimaryKeyDocsLink } from '../Utilities/Constants/DocumentationLinkConstants';
+import { describeGridRefreshScope, FULL_GRID_REFRESH_SCOPE, getMissingGridRefreshScope, mergeGridRefreshScopes, } from './gridRefreshScope';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import { applyQuickSearchFindCssVars } from '../Utilities/Helpers/QuickSearchHelper';
 import Emitter from '../Utilities/Emitter';
@@ -617,7 +618,6 @@ export class AdaptableAgGrid {
             agGridApi.onFilterChanged();
             filteringApplied = true;
         }
-        agGridApi.refreshCells();
         this._emit('AdapTableFiltersApplied');
         return filteringApplied;
     }
@@ -1429,7 +1429,10 @@ export class AdaptableAgGrid {
             if (this.api.formatColumnApi.getActiveFormatColumns().some((fc) => {
                 return fc.ColumnGroupScope != null;
             })) {
-                this.updateColumnModelAndRefreshGrid();
+                this.updateColumnModelAndRefreshGrid({
+                    cells: true,
+                    header: this.api.formatColumnApi.internalApi.hasFormatColumnsTargetingHeader(),
+                });
             }
         }));
         this.agGridAdapter.getAgGridApi().addEventListener('columnPivotChanged', (this.listenerPivotChanged = (params) => {
@@ -1883,30 +1886,81 @@ export class AdaptableAgGrid {
         }
         return rawValue;
     }
-    __updateColumnModelAndRefreshGrid_already_called = false;
+    __columnModelRefreshDoneInThisTick = null;
     __forceUpdateColumnModel = false;
-    updateColumnModelAndRefreshGrid() {
-        if (this.__updateColumnModelAndRefreshGrid_already_called && !this.__forceUpdateColumnModel) {
+    updateColumnModelAndRefreshGrid(refreshScope = FULL_GRID_REFRESH_SCOPE) {
+        const alreadyDone = this.__columnModelRefreshDoneInThisTick;
+        if (alreadyDone && !this.__forceUpdateColumnModel) {
+            const missingScope = getMissingGridRefreshScope(alreadyDone, refreshScope);
+            if (missingScope) {
+                this.refreshGridAfterColumnModelUpdate(missingScope);
+                this.__columnModelRefreshDoneInThisTick = mergeGridRefreshScopes(alreadyDone, missingScope);
+            }
             return;
         }
         this.__forceUpdateColumnModel = false;
         try {
-            this._updateColumnModelAndRefreshGridNow();
-            this.__updateColumnModelAndRefreshGrid_already_called = true;
+            this._updateColumnModelAndRefreshGridNow(refreshScope);
+            this.__columnModelRefreshDoneInThisTick = alreadyDone
+                ? mergeGridRefreshScopes(alreadyDone, refreshScope)
+                : { ...refreshScope };
         }
         finally {
             queueMicrotask(() => {
-                this.__updateColumnModelAndRefreshGrid_already_called = false;
+                this.__columnModelRefreshDoneInThisTick = null;
             });
         }
     }
-    _updateColumnModelAndRefreshGridNow() {
+    _updateColumnModelAndRefreshGridNow(refreshScope = FULL_GRID_REFRESH_SCOPE) {
         const startTime = performance.now();
+        const adaptableId = this.adaptableOptions.adaptableId;
+        const runtimeTrack = () => getMarker(adaptableId).track.Runtime.label;
+        const colDefsVersionBefore = this.agGridAdapter.DANGER_getColDefsVersion();
+        const passMarker = runtimeTrack().UpdateColumnModel.start();
+        const deriveMarker = runtimeTrack().DeriveColumnState.start();
         this.deriveAdaptableColumnStateFromAgGrid();
+        deriveMarker.end();
+        const setupColumnsMarker = runtimeTrack().SetupColumns.start();
         this.agGridColumnAdapter.setupColumns();
-        this.redrawBody();
-        this.refreshHeader();
-        this.logger.info(`Updated column model and refreshed grid in ${Math.round(performance.now() - startTime)}ms.`);
+        setupColumnsMarker.end();
+        this.refreshGridAfterColumnModelUpdate(refreshScope);
+        const colDefsVersionAfter = this.agGridAdapter.DANGER_getColDefsVersion();
+        const colDefsChanged = colDefsVersionBefore != null && colDefsVersionAfter != null
+            ? colDefsVersionAfter - colDefsVersionBefore
+            : -1;
+        const columnCount = this.api.columnApi.getColumns().length;
+        const refreshScopeLabel = describeGridRefreshScope(refreshScope);
+        passMarker.end({
+            details: [
+                { name: 'columns', value: columnCount },
+                { name: 'colDefsChanged', value: colDefsChanged },
+                { name: 'refresh', value: refreshScopeLabel },
+            ],
+        });
+        this.logger.info(`Updated column model and refreshed grid in ${Math.round(performance.now() - startTime)}ms (${columnCount} columns, ${colDefsChanged} colDefs changed, refresh: ${refreshScopeLabel}).`);
+    }
+    refreshGridAfterColumnModelUpdate(refreshScope) {
+        const runtimeTrack = getMarker(this.adaptableOptions.adaptableId).track.Runtime.label;
+        if (refreshScope.rows) {
+            const redrawBodyMarker = runtimeTrack.RedrawBody.start();
+            this.redrawBody();
+            redrawBodyMarker.end();
+        }
+        else if (refreshScope.cells) {
+            const refreshCellsMarker = runtimeTrack.RefreshCells.start();
+            this.refreshRenderedCells();
+            refreshCellsMarker.end();
+        }
+        if (refreshScope.header) {
+            const refreshHeaderMarker = runtimeTrack.RefreshHeader.start();
+            this.refreshHeader();
+            refreshHeaderMarker.end();
+        }
+    }
+    refreshRenderedCells() {
+        this.agGridAdapter.getAgGridApi().refreshCells({ force: true, suppressFlash: true });
+        this.refreshAgGridFindIfNeeded();
+        this._emit('GridRefreshed');
     }
     refreshSortIfColumnsSorted() {
         const columnSorts = this.api.layoutApi.getCurrentLayout()?.ColumnSorts;

package/src/agGrid/AgGridAdapter.d.ts

@@ -64,6 +64,7 @@ export declare class AgGridAdapter {
     private DANGER_getPrivateAgGridBeans;
     DANGER_getCreateSparkline(): ((options: AgSparklineOptions) => AgChartInstance<AgSparklineOptions>) | undefined;
     DANGER_getLiveGridOptions(): GridOptions<any>;
+    DANGER_getColDefsVersion(): number | undefined;
     DANGER_invalidateSortCache(): void;
     getAgGridRootElement(): HTMLElement;
     /**

package/src/agGrid/AgGridAdapter.js

@@ -48,47 +48,6 @@ const patchLocalEventServiceDispatchEvent = (beans) => {
         DANGER_AG_GRID_ADAPTERS_MAP[gridId]?.handleRowNodeEvent(rowNodeEvent);
     };
 };
-const patchVisibleColsPartition = (beans) => {
-    const visibleCols = beans?.visibleCols;
-    if (!visibleCols || typeof visibleCols.partitionVisibleCols !== 'function') {
-        console.error(`CRITICAL: could not get hold of AG Grid VisibleColsService.partitionVisibleCols, the selection column may NOT be displayed when it is the last column!`);
-        return;
-    }
-    const original_partitionVisibleCols = visibleCols.partitionVisibleCols;
-    visibleCols.partitionVisibleCols = function () {
-        const result = original_partitionVisibleCols.apply(this, arguments);
-        const leftCols = result?.leftCols ?? [];
-        const rightCols = result?.rightCols ?? [];
-        const centerCols = result?.centerCols ?? [];
-        if (leftCols.length + rightCols.length + centerCols.length === 0) {
-            return result;
-        }
-        const colModel = beans.colModel;
-        const selectionCol = colModel?.colsList?.find((col) => col?.colKind === 'selection');
-        if (!selectionCol || !selectionCol.visible) {
-            return result;
-        }
-        if (leftCols.includes(selectionCol) ||
-            rightCols.includes(selectionCol) ||
-            centerCols.includes(selectionCol)) {
-            return result;
-        }
-        const showAutoGroupAndValuesOnly = colModel.pivotMode && !colModel.showingPivotResult;
-        if (showAutoGroupAndValuesOnly && !(beans.selectionColSvc?.isEnabled?.() ?? false)) {
-            return result;
-        }
-        if (selectionCol.pinned === 'right') {
-            rightCols.push(selectionCol);
-        }
-        else if (selectionCol.pinned) {
-            leftCols.push(selectionCol);
-        }
-        else {
-            centerCols.push(selectionCol);
-        }
-        return result;
-    };
-};
 export class AgGridAdapter {
     _adaptableInstance;
     DANGER_USE_GETTER_gridApi;
@@ -117,7 +76,6 @@ export class AgGridAdapter {
                 }
                 DANGER_AG_GRID_BEANS_MAP[gridId] = beans;
                 patchLocalEventServiceDispatchEvent(beans);
-                patchVisibleColsPartition(beans);
             };
         }
     }
@@ -308,6 +266,9 @@ export class AgGridAdapter {
     DANGER_getLiveGridOptions() {
         return this.DANGER_getPrivateAgGridBeans()?.gridOptions;
     }
+    DANGER_getColDefsVersion() {
+        return this.DANGER_getPrivateAgGridBeans()?.colModel?.colDefsVersion;
+    }
     DANGER_invalidateSortCache() {
         this.DANGER_getPrivateAgGridBeans()?.sortSvc?.invalidate();
     }

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -116,6 +116,22 @@ export declare class AgGridColumnAdapter {
      * The combination of styled column and format cells
      * This function decides when the two can be merged.
      */
+    /**
+     * #derived_pivot_cell_style
+     *
+     * A pivot result column is generated by AG Grid for a value (base) column, so the cells of
+     * `pivot_make_Ford_rating` show (aggregated) `rating` values. Adaptable objects are defined
+     * against the base column, and its pivot result cells inherit them:
+     * - Format Columns whose Scope contains the base column style the pivot result cells, and their
+     *   Rule is evaluated against the pivot result cell: in a Rule Expression `[rating]` / `$SCOPE()`
+     *   resolve to the pivot result cell value (`COL` / `$SCOPE` in `scalarExpressionFunctions.ts`
+     *   read `pivotResultColumn` from the evaluation context), a Rule Predicate gets it as `value`;
+     * - the Styled Column of the base column contributes its cell style (e.g. Gradient background).
+     *
+     * Returns the context when `params` describe a pivot result cell, `undefined` otherwise.
+     * This is the single place deriving it; everything below `setupColumnCellStyle` receives it explicitly.
+     */
+    private getPivotResultCellContext;
     private getFormatColumnAndStyledColumnCellStyle;
     /**
      * Returns true when the active Styled Column declares a `Font` slot
@@ -136,7 +152,14 @@ export declare class AgGridColumnAdapter {
     private styledColumnClaimsCellBoxStyle;
     private getFormatColumnHeaderStyle;
     private getStyledColumnStyle;
-    private getFormatColumnCellStyle;
+    /**
+     * The given (in scope) Format Columns whose Rule matches the cell.
+     *
+     * @param abColumn - the column the Format Columns are scoped to: the cell's column, or its base column
+     * for a pivot result cell inheriting base column Format Columns (see #derived_pivot_cell_style)
+     * @param pivotResultColumn - set when the cell is a pivot result cell, see #derived_pivot_cell_style
+     */
+    private getRelevantFormatColumnsForCell;
     private getFormatColumnAdaptableStyle;
     private getAlertCellStyle;
     private getFlashingCellStyle;

package/src/agGrid/AgGridColumnAdapter.js

@@ -462,31 +462,14 @@ export class AgGridColumnAdapter {
                 const textStyleToApply = isCurrentMatch
                     ? { ...textMatchStyle, ...currentTextMatchStyle }
                     : textMatchStyle;
-                let baseStyles = {};
-                if (this.adaptableApi.columnApi.isPivotResultColumn(columnId)) {
-                    const baseColumn = params.column.getColDef()?.pivotValueColumn;
-                    if (baseColumn) {
-                        const baseColDefCellStyle = baseColumn?.getColDef()?.cellStyle;
-                        const baseColParams = {
-                            ...params,
-                            column: baseColumn,
-                            __pivotResultColumn: params.column,
-                        };
-                        baseStyles =
-                            typeof baseColDefCellStyle === 'function'
-                                ? baseColDefCellStyle(baseColParams)
-                                : baseColDefCellStyle;
-                    }
-                }
-                else {
-                    baseStyles = typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle;
-                }
+                const baseStyles = typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle;
+                const pivotResultCell = this.getPivotResultCellContext(params);
                 const result = {
                     ...baseStyles,
                     ...this.getReadOnlyCellStyle(gridCell, params),
                     ...this.getEditableCellStyle(gridCell, params),
                     ...this.getEditedCellStyle(gridCell, params),
-                    ...this.getFormatColumnAndStyledColumnCellStyle(gridCell.column, params),
+                    ...this.getFormatColumnAndStyledColumnCellStyle(gridCell.column, params, pivotResultCell),
                     ...(isQuickSearchActive ? quickSearchStyle : {}),
                     ...(isQuickSearchActive && textStyleToApply ? textStyleToApply : {}),
                     ...this.getAlertCellStyle(gridCell, params),
@@ -1317,21 +1300,44 @@ export class AgGridColumnAdapter {
         }
         return undefined;
     }
-    getFormatColumnAndStyledColumnCellStyle(column, params) {
-        const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+    getPivotResultCellContext(params) {
+        if (!this.adaptableApi.columnApi.isPivotResultColumn(params.column.getColId())) {
+            return undefined;
+        }
+        const baseAgColumn = params.column.getColDef()?.pivotValueColumn;
+        const baseColumn = baseAgColumn
+            ? this.adaptableApi.columnApi.getColumnWithColumnId(baseAgColumn.getColId())
+            : undefined;
+        if (!baseColumn) {
+            return undefined;
+        }
+        return { pivotResultColumn: params.column, baseColumn };
+    }
+    getFormatColumnAndStyledColumnCellStyle(column, params, pivotResultCell) {
+        let styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+        let styledColumnColumn = column;
+        if (!styledColumn && pivotResultCell) {
+            styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(pivotResultCell.baseColumn.columnId);
+            styledColumnColumn = pivotResultCell.baseColumn;
+        }
         const styledColumnIsActive = !!styledColumn && !styledColumn?.IsSuspended;
         const styledColumnStyle = styledColumnIsActive
-            ? this.getStyledColumnStyle(styledColumn, column, params)
+            ? this.getStyledColumnStyle(styledColumn, styledColumnColumn, params)
             : {};
-        const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(column, {
-            target: 'cell',
-        });
-        let formatColumnStyle = this.getFormatColumnCellStyle(column, activeFormatColumnsWithStyle, params);
+        const formatColumnInternalApi = this.adaptableApi.formatColumnApi.internalApi;
+        const relevantFormatColumnsWithStyle = this.getRelevantFormatColumnsForCell(column, formatColumnInternalApi.getFormatColumnsWithStyleForColumn(column, { target: 'cell' }), params, pivotResultCell?.pivotResultColumn);
+        if (pivotResultCell) {
+            const baseFormatColumnsWithStyle = formatColumnInternalApi
+                .getFormatColumnsWithStyleForColumn(pivotResultCell.baseColumn, { target: 'cell' })
+                .filter((formatColumn) => !relevantFormatColumnsWithStyle.includes(formatColumn));
+            relevantFormatColumnsWithStyle.push(...this.getRelevantFormatColumnsForCell(pivotResultCell.baseColumn, baseFormatColumnsWithStyle, params, pivotResultCell.pivotResultColumn));
+        }
+        let formatColumnStyle = this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
         if (styledColumnIsActive) {
-            if (this.styledColumnClaimsFontStyle(styledColumn, column)) {
+            if (this.styledColumnClaimsFontStyle(styledColumn, styledColumnColumn)) {
                 formatColumnStyle = stripFontCssKeys(formatColumnStyle);
             }
-            if (this.styledColumnClaimsCellBoxStyle(styledColumn, column)) {
+            if (this.styledColumnClaimsCellBoxStyle(styledColumn, styledColumnColumn)) {
                 formatColumnStyle = stripCellBoxCssKeys(formatColumnStyle);
             }
         }
@@ -1444,14 +1450,10 @@ export class AgGridColumnAdapter {
         }
         return style;
     }
-    getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params) {
-        if (!activeFormatColumnsWithStyle.length) {
-            return {};
-        }
-        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
-            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInCell(formatColumn, abColumn, params.node, params.value, params.__pivotResultColumn);
+    getRelevantFormatColumnsForCell(abColumn, activeFormatColumnsWithStyle, params, pivotResultColumn) {
+        return activeFormatColumnsWithStyle.filter((formatColumn) => {
+            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInCell(formatColumn, abColumn, params.node, params.value, pivotResultColumn);
         });
-        return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
     }
     getFormatColumnAdaptableStyle(formatColumns) {
         return formatColumns.reduceRight((style, formatColumn) => {

package/src/agGrid/gridRefreshScope.d.ts

@@ -0,0 +1,20 @@
+import type { GridRefreshScope } from '../AdaptableInterfaces/IAdaptable';
+/**
+ * see #narrow_column_model_refresh
+ *
+ * Helpers for the refresh scope of a column-model pass (`AdaptableAgGrid.updateColumnModelAndRefreshGrid`).
+ */
+/** The legacy behaviour: destroy & recreate every rendered row and every header cell. */
+export declare const FULL_GRID_REFRESH_SCOPE: Readonly<GridRefreshScope>;
+/** Re-run the cell-level callbacks on the rendered cells; rows and header are kept. */
+export declare const CELLS_GRID_REFRESH_SCOPE: Readonly<GridRefreshScope>;
+/** Only set up the columns; whatever colDef value changed is refreshed by AG Grid itself (see #col_def_commit). */
+export declare const NO_GRID_REFRESH_SCOPE: Readonly<GridRefreshScope>;
+export declare const mergeGridRefreshScopes: (a: GridRefreshScope, b: GridRefreshScope) => GridRefreshScope;
+/**
+ * The part of `requested` that `done` did not cover, or `null` when `done` already covers everything.
+ * A row redraw covers a cell refresh (the cells are recreated with the rows).
+ */
+export declare const getMissingGridRefreshScope: (done: GridRefreshScope, requested: GridRefreshScope) => GridRefreshScope | null;
+/** eg `rows+header`, `cells`, `none` - used in the perf track details and the log line */
+export declare const describeGridRefreshScope: (scope: GridRefreshScope) => string;