@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.1

package/src/agGrid/AdaptableFilterHandler.js

@@ -1,3 +1,4 @@
+import { getColumnFilterInListValues } from '../aql/columnFilterQl';
 export class AdaptableFilterHandler {
     adaptableApi;
     colId;
@@ -83,9 +84,7 @@ export class AdaptableFilterHandler {
             return;
         }
         const columnFilter = this.adaptableApi.filterApi.columnFilterApi.getColumnFilterForColumn(this.colId);
-        const selectedInputs = new Set((columnFilter?.Predicates ?? [])
-            .filter((predicate) => predicate.PredicateId === 'In' || predicate.PredicateId === 'NotIn')
-            .flatMap((predicate) => (Array.isArray(predicate.Inputs) ? predicate.Inputs : [])));
+        const selectedInputs = new Set(getColumnFilterInListValues(columnFilter));
         for (const value of this.rememberedInFilterValues.keys()) {
             if (!selectedInputs.has(value)) {
                 this.rememberedInFilterValues.delete(value);

package/src/agGrid/AgGridAdapter.d.ts

@@ -24,6 +24,11 @@ import { SelectedRowInfo } from '../AdaptableState/Selection/SelectedRowInfo';
  * The patched prototype is shared by ALL grids (and all their RowNodes), so the patch identifies the
  * originating grid via `rowNode.beans` and routes the event to that grid's AgGridAdapter
  * (see DANGER_AG_GRID_ADAPTERS_MAP & AgGridAdapter.handleRowNodeEvent).
+ * Adaptable handles the event *before* the original dispatch so the history
+ * store contains the change when AG Grid re-runs value getters for that row.
+ *
+ * Row-node local events only fire on rendered rows. Off-screen updates are
+ * covered by grid `cellValueChanged` plus the `updateRows` old-data diff.
  */
 export type RowNodeEventType = 'dataChanged' | 'cellChanged';
 export interface RowNodeEvent extends AgEvent<RowNodeEventType> {

package/src/agGrid/AgGridAdapter.js

@@ -5,7 +5,8 @@ import { ACCESS_LEVEL_HIDDEN, ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME, } from
 import { createUuid } from '../AdaptableState/Uuid';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
-import { agGridDataTypeDefinitions, ALL_ADAPTABLE_DATA_TYPES } from './agGridDataTypeDefinitions';
+import { agGridDataTypeDefinitions, ALL_ADAPTABLE_DATA_TYPES } from './AgGridDataTypeDefinitions';
+import { getAdaptableDataTypeForCellDataType } from './AgGridCellDataTypeHelper';
 import { isPivotGrandTotal } from '../Api/Implementation/ColumnApiImpl';
 import { isPivotColumnTotal } from '../layout-manager/src/isPivotColumnTotal';
 import { isPivotAggTotalColumn } from '../layout-manager/src/isPivotAggTotalColumn';
@@ -30,22 +31,28 @@ const patchLocalEventServiceDispatchEvent = (beans) => {
     PATCHED_LOCAL_EVENT_SERVICE_PROTOTYPES.add(LocalEventService_Prototype);
     const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
     LocalEventService_Prototype.dispatchEvent = function (event) {
-        LocalEventService_dispatchEvent.apply(this, arguments);
-        if (event.type !== 'cellChanged' && event.type !== 'dataChanged') {
-            return;
-        }
-        const rowNodeEvent = event;
-        const rowNode = rowNodeEvent.node;
-        if (!rowNode) {
-            AdaptableLogger.consoleErrorBase(`No RowNode found in passed event, this should never happen!`, event);
-            return;
-        }
-        const gridId = rowNode.beans?.context?.getId();
-        if (!gridId) {
-            AdaptableLogger.consoleErrorBase(`No gridId found in passed RowNode, this should never happen!`, rowNode);
-            return;
+        if (event.type === 'cellChanged' || event.type === 'dataChanged') {
+            const rowNodeEvent = event;
+            const rowNode = rowNodeEvent.node;
+            if (!rowNode) {
+                AdaptableLogger.consoleErrorBase(`No RowNode found in passed event, this should never happen!`, event);
+            }
+            else {
+                const gridId = rowNode.beans?.context?.getId();
+                if (!gridId) {
+                    AdaptableLogger.consoleErrorBase(`No gridId found in passed RowNode, this should never happen!`, rowNode);
+                }
+                else {
+                    try {
+                        DANGER_AG_GRID_ADAPTERS_MAP[gridId]?.handleRowNodeEvent(rowNodeEvent);
+                    }
+                    catch (error) {
+                        AdaptableLogger.consoleErrorBase('Adaptable row-node change handler threw; AG Grid will still receive the event', error);
+                    }
+                }
+            }
         }
-        DANGER_AG_GRID_ADAPTERS_MAP[gridId]?.handleRowNodeEvent(rowNodeEvent);
+        LocalEventService_dispatchEvent.apply(this, arguments);
     };
 };
 export class AgGridAdapter {
@@ -116,7 +123,7 @@ export class AgGridAdapter {
             this.adaptableApi.columnApi.isAutoRowGroupColumnForSingle(columnFilter.ColumnId) ||
             this.adaptableApi.columnApi.isPivotAggColumnWithNoPivotColumns(columnFilter.ColumnId))
             .filter((columnFilter) => this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter))
-            .filter((columnFilter) => this.adaptableApi.expressionApi.internalApi.shouldEvaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Predicates));
+            .filter((columnFilter) => this.adaptableApi.expressionApi.internalApi.evaluateExpressionInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Expression));
         this.activePivotColumnFilters_MEMO.set(layoutColumnFilters, pivotColumnFilters);
         return pivotColumnFilters;
     }
@@ -594,6 +601,12 @@ export class AgGridAdapter {
         if (typeof colDefDataType === 'string' && ALL_ADAPTABLE_DATA_TYPES.includes(colDefDataType)) {
             return colDefDataType;
         }
+        if (typeof colDefDataType === 'string') {
+            const definitions = this.getAgGridApi().getGridOption('dataTypeDefinitions');
+            if (definitions?.[colDefDataType]) {
+                return getAdaptableDataTypeForCellDataType(colDefDataType, definitions);
+            }
+        }
         let row = this.getAgGridApi().getDisplayedRowAtIndex(0);
         if (row == null) {
             this.logger.consoleError(`No data in grid. Returning type "unknown" for column "${agColumn.getColId()}". This will affect features such as Filters and Column Formats.`);

package/src/agGrid/AgGridCellDataTypeHelper.d.ts

@@ -0,0 +1,35 @@
+import type { GridOptions } from 'ag-grid-enterprise';
+import type { AdaptableColumnDataType } from '../AdaptableState/Common/AdaptableColumn';
+import type { SpecialColumnSettings } from '../AdaptableState/Common/SpecialColumnSettings';
+export type AvailableCellDataTypeInfo = {
+    /** AG Grid `cellDataType` key (e.g. `currency`). */
+    cellDataType: string;
+    /** Label for UI dropdowns. */
+    label: string;
+    /**
+     * AdapTable `DataType` this AG Grid type is compatible with
+     * (from the definition's `baseDataType` / `extendsDataType`).
+     */
+    adaptableDataType: AdaptableColumnDataType;
+};
+/**
+ * Merge application `dataTypeDefinitions` with AdapTable's built-ins.
+ * AdapTable keys win on conflict; app-only keys (e.g. `currency`) are kept.
+ */
+export declare function mergeDataTypeDefinitions(userDefinitions: GridOptions['dataTypeDefinitions'] | undefined): NonNullable<GridOptions['dataTypeDefinitions']>;
+export declare function mapAgGridBaseDataTypeToAdaptable(baseDataType: string | undefined): AdaptableColumnDataType;
+export declare function getAdaptableDataTypeForCellDataType(cellDataType: string, definitions: GridOptions['dataTypeDefinitions'] | undefined): AdaptableColumnDataType;
+/**
+ * AG Grid cell data types for the optional second wizard dropdown: the
+ * application's own plus {@link OFFERED_BUILTIN_CELL_DATA_TYPES}. Does not
+ * include AdapTable baselines (those stay on the Data Type control).
+ */
+export declare function buildCustomCellDataTypes(mergedDefinitions: GridOptions['dataTypeDefinitions'] | undefined, userDefinitions: GridOptions['dataTypeDefinitions'] | undefined): AvailableCellDataTypeInfo[];
+/** @deprecated use {@link buildCustomCellDataTypes} */
+export declare const buildAvailableCellDataTypes: typeof buildCustomCellDataTypes;
+/** Effective AG Grid `cellDataType` for a special column ColDef. */
+export declare function getCellDataTypeForSpecialColumnSettings(settings: Pick<SpecialColumnSettings, 'DataType' | 'CellDataType'>): string;
+/**
+ * Whether a stored `CellDataType` is still valid for the given AdapTable `DataType`.
+ */
+export declare function isCellDataTypeCompatibleWithDataType(cellDataType: string | undefined, dataType: AdaptableColumnDataType | undefined, definitions: GridOptions['dataTypeDefinitions'] | undefined): boolean;

package/src/agGrid/AgGridCellDataTypeHelper.js

@@ -0,0 +1,100 @@
+import { ALL_ADAPTABLE_DATA_TYPES, agGridDataTypeDefinitions, } from './AgGridDataTypeDefinitions';
+import { DURATION_CELL_DATA_TYPE } from '../aql/durationHelper';
+const ADAPTABLE_DATA_TYPE_SET = new Set(ALL_ADAPTABLE_DATA_TYPES);
+const EXCLUDED_CUSTOM_CELL_DATA_TYPES = new Set([
+    'unknown',
+    'text',
+    'number',
+    'date',
+    'boolean',
+    'object',
+    'numberArray',
+    'textArray',
+    'tupleArray',
+    'objectArray',
+]);
+const BASE_LABELS = {
+    number: 'Number',
+    text: 'Text',
+    date: 'Date',
+    boolean: 'Boolean',
+    object: 'Object',
+    unknown: 'Unknown',
+    numberArray: 'Number Array',
+    textArray: 'Text Array',
+    tupleArray: 'Tuple Array',
+    objectArray: 'Object Array',
+    [DURATION_CELL_DATA_TYPE]: 'Duration',
+};
+const OFFERED_BUILTIN_CELL_DATA_TYPES = [DURATION_CELL_DATA_TYPE];
+export function mergeDataTypeDefinitions(userDefinitions) {
+    return {
+        ...(userDefinitions ?? {}),
+        ...agGridDataTypeDefinitions,
+    };
+}
+export function mapAgGridBaseDataTypeToAdaptable(baseDataType) {
+    switch ((baseDataType ?? '').toLowerCase()) {
+        case 'number':
+            return 'number';
+        case 'date':
+        case 'datestring':
+            return 'date';
+        case 'boolean':
+            return 'boolean';
+        case 'object':
+            return 'object';
+        case 'text':
+        case 'string':
+        default:
+            return 'text';
+    }
+}
+export function getAdaptableDataTypeForCellDataType(cellDataType, definitions) {
+    if (ADAPTABLE_DATA_TYPE_SET.has(cellDataType)) {
+        return cellDataType;
+    }
+    const definition = definitions?.[cellDataType];
+    const base = definition?.baseDataType ??
+        definition?.extendsDataType;
+    return mapAgGridBaseDataTypeToAdaptable(base);
+}
+function formatCellDataTypeLabel(cellDataType) {
+    if (BASE_LABELS[cellDataType]) {
+        return BASE_LABELS[cellDataType];
+    }
+    return cellDataType
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/[-_]/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+export function buildCustomCellDataTypes(mergedDefinitions, userDefinitions) {
+    const defs = mergedDefinitions ?? agGridDataTypeDefinitions;
+    const items = [];
+    const candidates = new Set([
+        ...OFFERED_BUILTIN_CELL_DATA_TYPES,
+        ...Object.keys(userDefinitions ?? {}),
+    ]);
+    for (const cellDataType of candidates) {
+        if (EXCLUDED_CUSTOM_CELL_DATA_TYPES.has(cellDataType)) {
+            continue;
+        }
+        items.push({
+            cellDataType,
+            label: formatCellDataTypeLabel(cellDataType),
+            adaptableDataType: getAdaptableDataTypeForCellDataType(cellDataType, defs),
+        });
+    }
+    items.sort((a, b) => a.label.localeCompare(b.label));
+    return items;
+}
+export const buildAvailableCellDataTypes = buildCustomCellDataTypes;
+export function getCellDataTypeForSpecialColumnSettings(settings) {
+    return settings.CellDataType ?? settings.DataType;
+}
+export function isCellDataTypeCompatibleWithDataType(cellDataType, dataType, definitions) {
+    if (!cellDataType || !dataType) {
+        return false;
+    }
+    return getAdaptableDataTypeForCellDataType(cellDataType, definitions) === dataType;
+}

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -20,6 +20,13 @@ export declare class AgGridColumnAdapter {
     private get adaptableApi();
     private get adaptableOptions();
     private get agGridApi();
+    /**
+     * Restore user ColDef values that Adaptable had patched.
+     * Needed when Adaptable is destroyed but AG Grid is kept alive
+     * (`destroyAgGrid: false`) — e.g. framework unmount / HMR — so AG Grid
+     * no longer invokes callbacks that close over a destroyed adapter.
+     */
+    revertColDefPropertiesToUserValues(columns: Column[]): void;
     /**
      * The colDef that `setupColumnXxx` methods should read from & write to:
      * the working copy while the column is being set up (see #col_def_commit), the live colDef otherwise.
@@ -40,6 +47,9 @@ export declare class AgGridColumnAdapter {
      * see #stable_col_def_callbacks
      * Returns the (stable) function AG Grid should see for this column & property,
      * delegating to the given (latest) implementation.
+     *
+     * Also guards against `destroyAgGrid: false` / HMR: after Adaptable is torn down,
+     * falls back to the cached user callback so AG Grid does not call into a destroyed adapter.
      */
     private toStableCallback;
     /**
@@ -63,6 +73,12 @@ export declare class AgGridColumnAdapter {
      * @param specificColumnIds - optional list of column Ids to setup. If not provided, all columns are setup
      */
     setupColumns(specificColumnIds?: string[]): void;
+    /**
+     * Maps `noteOptions.isCellNotable` onto AG Grid's `colDef.suppressNoteActions` so that,
+     * when Notes are rendered via AG Grid, cells for which `isCellNotable` returns false have
+     * their add / edit / remove Note actions suppressed. Only applied when AG Grid Notes are active.
+     */
+    private setupColumnSuppressNoteActions;
     private setupColumn;
     private setupColumnValueGetter;
     private setupColumnCellClass;
@@ -103,8 +119,19 @@ export declare class AgGridColumnAdapter {
     private getEditedCellClass;
     private getAlertCellClass;
     private getFlashingCellClass;
-    private getNoteCellClassName;
+    /**
+     * When a cell has a Note, returns an `ab-NoteType-<Type>` class (e.g. `ab-NoteType-Error`).
+     * The class only sets the `--ag-note-indicator-color` CSS variable (see `View/Note/Styles/base.css`),
+     * which AG Grid's native Cell Note indicator inherits - so the triangle takes the Note's
+     * type colour without AdapTable drawing its own indicator.
+     */
+    private getNoteTypeCellClassName;
     private getCommentCellClassName;
+    private getFormulaTraceCellClass;
+    /**
+     * Aggregated Formula Trace: highlight referenced column headers only.
+     */
+    private getFormulaTraceHeaderClass;
     private getFormatColumnCellClass;
     private getQuickSearchCellStyle;
     private getQuickSearchTextMatchStyle;

package/src/agGrid/AgGridColumnAdapter.js

@@ -7,7 +7,7 @@ import { convertAdaptableStyleToCSS, getAutoContrastTextColor, getVariableColor,
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import tinycolor from 'tinycolor2';
-import UIHelper from '../View/UIHelper';
+import UIHelper from '../Utilities/Helpers/UIHelper';
 import { getPercentBarRendererForColumn } from './cellRenderers/PercentBarRenderer';
 import { getBadgeRendererForColumn } from './cellRenderers/BadgeRenderer';
 import { getBulletChartRendererForColumn } from './cellRenderers/BulletChartRenderer';
@@ -49,6 +49,11 @@ const stripCssKeys = (style, keys) => {
 };
 const stripFontCssKeys = (style) => stripCssKeys(style, FONT_CSS_KEYS);
 const stripCellBoxCssKeys = (style) => stripCssKeys(style, CELL_BOX_CSS_KEYS);
+const FORMULA_TRACE_CLEARED_CELL_STYLE = {
+    borderRadius: '',
+    textDecoration: '',
+    textAlign: '',
+};
 const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
     'cellStyle',
     'cellClass',
@@ -64,6 +69,7 @@ const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
     'getQuickFilterText',
     'tooltipValueGetter',
     'cellEditorParams',
+    'suppressNoteActions',
 ]);
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
@@ -117,6 +123,30 @@ export class AgGridColumnAdapter {
     get agGridApi() {
         return this.adaptableApi.agGridApi;
     }
+    revertColDefPropertiesToUserValues(columns) {
+        if (!this.colDefPropertyCache || !columns?.length) {
+            return;
+        }
+        const columnsById = new Map(columns.map((column) => [column.getColId(), column]));
+        for (const key of this.colDefPropertyCache.keys()) {
+            if (!key.startsWith('adaptable.')) {
+                continue;
+            }
+            const withoutPrefix = key.slice('adaptable.'.length);
+            const lastDot = withoutPrefix.lastIndexOf('.');
+            if (lastDot === -1) {
+                continue;
+            }
+            const colId = withoutPrefix.slice(0, lastDot);
+            const propertyName = withoutPrefix.slice(lastDot + 1);
+            const column = columnsById.get(colId);
+            if (!column) {
+                continue;
+            }
+            const userKey = `user.${colId}.${propertyName}`;
+            column.getColDef()[propertyName] = this.colDefPropertyCache.get(userKey);
+        }
+    }
     getColDefForSetup(col) {
         return this.workingColDefs.get(col.getColId()) ?? col.getColDef();
     }
@@ -146,6 +176,13 @@ export class AgGridColumnAdapter {
         let stableCallback = this.stableCallbacks.get(key);
         if (!stableCallback) {
             stableCallback = (...args) => {
+                if (!this.adaptableInstance || this.adaptableInstance.isDestroyed) {
+                    const userValue = this.colDefPropertyCache?.get(`user.${colId}.${propertyName}`);
+                    if (typeof userValue === 'function') {
+                        return userValue(...args);
+                    }
+                    return userValue;
+                }
                 return this.stableCallbackImplementations?.get(key)?.(...args);
             };
             this.stableCallbacks.set(key, stableCallback);
@@ -164,6 +201,9 @@ export class AgGridColumnAdapter {
         return this.colDefPropertyCache.get(`user.${owner.colId}.${propertyName}`);
     }
     setColDefProperty(col, propertyName, propertyGetter) {
+        if (!this.adaptableInstance || this.adaptableInstance.isDestroyed) {
+            return;
+        }
         const colId = col.getColId();
         const colDef = this.getColDefForSetup(col);
         const colSetupInfo = {
@@ -257,6 +297,27 @@ export class AgGridColumnAdapter {
             this.adaptableInstance.agGridAdapter?.DANGER_invalidateSortCache();
         }
     }
+    setupColumnSuppressNoteActions({ col, abColumn }) {
+        this.setColDefProperty(col, 'suppressNoteActions', (userSuppressNoteActions) => {
+            if (!this.adaptableApi.noteApi.internalApi.isAgGridNotesActive()) {
+                return userSuppressNoteActions;
+            }
+            const isCellNotable = this.adaptableApi.optionsApi.getNoteOptions()?.isCellNotable;
+            if (typeof isCellNotable !== 'function') {
+                return userSuppressNoteActions;
+            }
+            return (params) => {
+                const gridCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, abColumn.columnId);
+                if (!gridCell?.column) {
+                    return false;
+                }
+                return !isCellNotable({
+                    gridCell,
+                    ...this.adaptableApi.internalApi.buildBaseContext(),
+                });
+            };
+        });
+    }
     setupColumn({ col, colDef, colId }) {
         const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
         const colSetupInfo = {
@@ -288,6 +349,7 @@ export class AgGridColumnAdapter {
         this.setupColumnAllowedAggFuncs(colSetupInfo);
         this.setupColumnType(colSetupInfo);
         this.setupColumnCellDataType(colSetupInfo);
+        this.setupColumnSuppressNoteActions(colSetupInfo);
     }
     setupColumnValueGetter({ col }) {
         this.setColDefProperty(col, 'valueGetter', (userValue) => {
@@ -333,21 +395,26 @@ export class AgGridColumnAdapter {
                 const flashingClassName = this.getFlashingCellClass(gridCell, params);
                 const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(colId);
                 const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
-                const noteClassName = this.getNoteCellClassName(gridCell, params);
+                const noteTypeClassName = this.getNoteTypeCellClassName(gridCell);
                 const commentsClassName = this.getCommentCellClassName(gridCell, params);
+                const formulaTraceClassName = this.getFormulaTraceCellClass(gridCell, params);
+                const isFormulaTraceHighlight = !!formulaTraceClassName;
                 const returnValue = [
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    !hasStyledColumn && formatColumns.length
+                    !isFormulaTraceHighlight && !hasStyledColumn && formatColumns.length
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
-                    isQuickSearchActive && !isServerSideRowModel ? 'ab-QuickSearchFind' : null,
+                    !isFormulaTraceHighlight && isQuickSearchActive && !isServerSideRowModel
+                        ? 'ab-QuickSearchFind'
+                        : null,
                     editableClassName,
                     readonlyClassName,
                     editedClassName,
-                    highlightAlertClassName,
-                    flashingClassName,
-                    noteClassName,
+                    !isFormulaTraceHighlight ? highlightAlertClassName : null,
+                    !isFormulaTraceHighlight ? flashingClassName : null,
+                    noteTypeClassName,
                     commentsClassName,
+                    formulaTraceClassName,
                 ]
                     .flat()
                     .filter((x) => !!x);
@@ -409,21 +476,21 @@ export class AgGridColumnAdapter {
                     const alignment = formatColumnWithTextAlignment.Style.Alignment.toLowerCase();
                     baseHeaderClass = [...baseHeaderClass, `ab-header__align-${alignment}`];
                 }
+                const formulaTraceHeaderClass = this.getFormulaTraceHeaderClass(columnId);
                 const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, {
                     target,
                 });
-                if (!formatColumns.length) {
-                    return baseHeaderClass;
-                }
-                const formatColumnClasses = formatColumns
-                    .map((formatColumn) => {
-                    if (formatColumn.Style?.ClassName &&
-                        this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInHeader(formatColumn, abColumn)) {
-                        return formatColumn.Style?.ClassName;
-                    }
-                })
-                    .filter((x) => !!x);
-                return [...baseHeaderClass, ...formatColumnClasses];
+                const formatColumnClasses = !formulaTraceHeaderClass && formatColumns.length
+                    ? formatColumns
+                        .map((formatColumn) => {
+                        if (formatColumn.Style?.ClassName &&
+                            this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInHeader(formatColumn, abColumn)) {
+                            return formatColumn.Style?.ClassName;
+                        }
+                    })
+                        .filter((x) => !!x)
+                    : [];
+                return [...baseHeaderClass, ...formatColumnClasses, ...(formulaTraceHeaderClass ?? [])];
             };
             return headerClass;
         });
@@ -464,19 +531,27 @@ export class AgGridColumnAdapter {
                     : textMatchStyle;
                 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, pivotResultCell),
-                    ...(isQuickSearchActive ? quickSearchStyle : {}),
-                    ...(isQuickSearchActive && textStyleToApply ? textStyleToApply : {}),
-                    ...this.getAlertCellStyle(gridCell, params),
-                    ...this.getFlashingCellStyle(gridCell, params),
-                    ...this.getCellHighlightStyle(gridCell, params),
-                    ...this.getColumnHighlightStyle(gridCell, params),
-                };
+                const isFormulaTraceHighlight = !!this.getFormulaTraceCellClass(gridCell, params);
+                const result = isFormulaTraceHighlight
+                    ? {
+                        ...FORMULA_TRACE_CLEARED_CELL_STYLE,
+                        ...this.getReadOnlyCellStyle(gridCell, params),
+                        ...this.getEditableCellStyle(gridCell, params),
+                        ...this.getEditedCellStyle(gridCell, params),
+                    }
+                    : {
+                        ...baseStyles,
+                        ...this.getReadOnlyCellStyle(gridCell, params),
+                        ...this.getEditableCellStyle(gridCell, params),
+                        ...this.getEditedCellStyle(gridCell, params),
+                        ...this.getFormatColumnAndStyledColumnCellStyle(gridCell.column, params, pivotResultCell),
+                        ...(isQuickSearchActive ? quickSearchStyle : {}),
+                        ...(isQuickSearchActive && textStyleToApply ? textStyleToApply : {}),
+                        ...this.getAlertCellStyle(gridCell, params),
+                        ...this.getFlashingCellStyle(gridCell, params),
+                        ...this.getCellHighlightStyle(gridCell, params),
+                        ...this.getColumnHighlightStyle(gridCell, params),
+                    };
                 return normalizeStyleForAgGrid(result);
             };
             return cellStyle;
@@ -496,11 +571,14 @@ export class AgGridColumnAdapter {
                 if (!adaptableColumn) {
                     return baseStyles;
                 }
-                const result = {
-                    ...baseStyles,
-                    ...this.getFormatColumnHeaderStyle(adaptableColumn, params),
-                };
-                if (result['borderColor']) {
+                const isFormulaTraceHeader = !!this.getFormulaTraceHeaderClass(columnId);
+                const result = isFormulaTraceHeader
+                    ? { ...FORMULA_TRACE_CLEARED_CELL_STYLE }
+                    : {
+                        ...baseStyles,
+                        ...this.getFormatColumnHeaderStyle(adaptableColumn, params),
+                    };
+                if (!isFormulaTraceHeader && result['borderColor']) {
                     result['borderWidth'] = `1px`;
                     result['borderStyle'] = 'solid';
                 }
@@ -855,6 +933,7 @@ export class AgGridColumnAdapter {
             typeof userProvidedFilterProp?.handler !== 'function' &&
             !this.adaptableInstance.isInPivotMode();
         if (hasInvalidFilterProp) {
+            this.setColDefProperty(col, 'floatingFilter', () => false);
             return false;
         }
         const isFloatingFilterDisabled = !colDef.filter ||
@@ -1198,22 +1277,22 @@ export class AgGridColumnAdapter {
                     ? flashingCell.flashingCellDefinition.NeutralChangeStyle?.ClassName
                     : undefined;
     }
-    getNoteCellClassName(gridCell, params) {
-        if (!this.adaptableApi.internalApi.getModuleService().isAdapTableModulePresent('Note')) {
+    getNoteTypeCellClassName(gridCell) {
+        if (!this.adaptableApi.noteApi.internalApi.isAgGridNotesActive()) {
             return;
         }
-        if (!this.adaptableApi.noteApi.internalApi.areNotesSupported()) {
+        if (!gridCell?.column) {
             return;
         }
-        const cellPosition = {
+        const note = this.adaptableApi.noteApi.getNoteForCell({
             PrimaryKeyValue: gridCell.primaryKeyValue,
             ColumnId: gridCell.column.columnId,
-        };
-        const cellNote = this.adaptableApi.noteApi.getNoteForCell(cellPosition);
-        if (!cellNote) {
-            return undefined;
+        });
+        if (!note) {
+            return;
         }
-        return 'ab-Cell-Note';
+        const noteType = note.NoteType ?? this.adaptableApi.optionsApi.getNoteOptions()?.defaultNoteType ?? 'Info';
+        return `ab-NoteType-${noteType}`;
     }
     getCommentCellClassName(gridCell, params) {
         if (!this.adaptableApi.internalApi.getModuleService().isAdapTableModulePresent('Comment')) {
@@ -1232,6 +1311,40 @@ export class AgGridColumnAdapter {
         }
         return 'ab-Cell-Comment';
     }
+    getFormulaTraceCellClass(gridCell, _params) {
+        const formulaTraceInfo = this.adaptableApi.internalApi.getInternalState().FormulaTraceInfo;
+        if (!formulaTraceInfo || !gridCell?.column) {
+            return;
+        }
+        const columnId = gridCell.column.columnId;
+        if (columnId === formulaTraceInfo.calculatedColumnId) {
+            if (gridCell.primaryKeyValue === formulaTraceInfo.primaryKeyValue) {
+                return 'ab-FormulaTrace__source';
+            }
+            return;
+        }
+        if (formulaTraceInfo.isAggregated) {
+            return;
+        }
+        const entry = formulaTraceInfo.entries.find((e) => e.columnId === columnId);
+        if (!entry || !entry.isVisible) {
+            return;
+        }
+        if (gridCell.primaryKeyValue === formulaTraceInfo.primaryKeyValue) {
+            return ['ab-FormulaTrace', `ab-FormulaTrace--${entry.colorIndex}`];
+        }
+    }
+    getFormulaTraceHeaderClass(columnId) {
+        const formulaTraceInfo = this.adaptableApi.internalApi.getInternalState().FormulaTraceInfo;
+        if (!formulaTraceInfo?.isAggregated) {
+            return;
+        }
+        const entry = formulaTraceInfo.entries.find((e) => e.columnId === columnId);
+        if (!entry || !entry.isVisible) {
+            return;
+        }
+        return ['ab-FormulaTrace', 'ab-FormulaTrace--column', `ab-FormulaTrace--${entry.colorIndex}`];
+    }
     getFormatColumnCellClass(formatColumns, abColumn, params) {
         const classNames = formatColumns
             .map((formatColumn) => {