@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.0-canary.3",
+  "version": "23.0.0-canary.4",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableOptions/DefaultAdaptableOptions.js

@@ -165,10 +165,6 @@ const DefaultAdaptableOptions = {
         },
     },
     filterOptions: {
-        filterActionOnDataChange: {
-            applyFilter: 'Always',
-            throttleDelay: 0,
-        },
         clearFiltersOnStartUp: false,
         enableFilterOnSpecialColumns: true,
         useAdaptableFiltering: true,

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -1,4 +1,3 @@
-import { FilterActionOnDataChange } from '../AdaptableState/Common/FilterActionOnDataChange';
 import { BaseContext } from '../../types';
 import { AdaptableColumn } from '../AdaptableState/Common/AdaptableColumn';
 import { SystemAlertPredicateId, SystemFilterPredicateId } from '../../types';
@@ -30,12 +29,6 @@ export interface FilterOptions<TData = any> {
      * @returns
      */
     customInFilterValues?: (context: CustomInFilterValuesContext<TData>) => Promise<InFilterValueResult> | InFilterValueResult;
-    /**
-     * When to re-filter grid after data changes: 'Always', 'Never' or 'Throttle' (with a delay value)
-     *
-     * @defaultValue 'Always'
-     */
-    filterActionOnDataChange?: FilterActionOnDataChange;
     /**
      * Allow filtering on Calculated & FreeText columns
      *

package/src/AdaptableState/Common/AdaptableForm.d.ts

@@ -133,8 +133,19 @@ export interface AdaptableFormField {
     /**
      * Field Default Value - can be of type string, boolean, number, or for
      * `select` fields with `multi: true` an array of those.
+     *
+     * For single `select` fields, this is also the value restored when the user
+     * clears the combobox (unless {@link clearToDefault} is `false`).
      */
     defaultValue?: string | boolean | number | Array<string | number | boolean>;
+    /**
+     * For single `select` fields only. When the user clears the combobox,
+     * whether to restore {@link defaultValue} instead of leaving the field empty.
+     *
+     * Defaults to `true` when `defaultValue` is set, otherwise `false`.
+     * Set to `false` when an empty selection is a distinct state from the default.
+     */
+    clearToDefault?: boolean;
     /**
      * Items to populate the `select` and `radio` fieldTypes.
      *
@@ -166,7 +177,10 @@ export interface AdaptableFormField {
     /**
      * Placeholder text shown inside `text`, `textarea`, `number`, `date`,
      * `time` and `datetime` inputs when empty. For `select` fields it is
-     * rendered as the empty-state label.
+     * rendered as the empty-state label when no value is selected.
+     *
+     * When omitted on a `select` field with a {@link defaultValue}, the label of
+     * the matching `options` entry is used as the empty-state label.
      */
     placeholder?: string;
     /**
@@ -310,6 +324,9 @@ export declare function isAdaptableFormFieldGroup(entry: AdaptableFormField | Ad
  * computing defaults, validation or per-field lookups.
  */
 export declare function flattenAdaptableFormFields<T extends BaseContext>(formDef?: AdaptableForm<T, any>): AdaptableFormField[];
+export declare function shouldClearSelectToDefault(field: AdaptableFormField): boolean;
+export declare function resolveSelectValueAfterClear(field: AdaptableFormField, newValue: unknown): unknown;
+export declare function resolveSelectPlaceholder(field: AdaptableFormField, options: AdaptableFormFieldOption[]): string | undefined;
 export declare function getDefaultAdaptableFormData<T extends BaseContext = BaseContext>(formDef?: AdaptableForm<T, any>): AdaptableFormData;
 /**
  * Resolves a field's `options` to the current array of options.

package/src/AdaptableState/Common/AdaptableForm.js

@@ -32,6 +32,37 @@ export function flattenAdaptableFormFields(formDef) {
     }
     return out;
 }
+export function shouldClearSelectToDefault(field) {
+    if (field.fieldType !== 'select' || field.multi) {
+        return false;
+    }
+    if (field.clearToDefault === false) {
+        return false;
+    }
+    if (field.clearToDefault === true) {
+        return true;
+    }
+    return (field.defaultValue !== undefined && field.defaultValue !== null && field.defaultValue !== '');
+}
+export function resolveSelectValueAfterClear(field, newValue) {
+    if (field.fieldType !== 'select' || field.multi) {
+        return newValue;
+    }
+    const isEmpty = newValue === null || newValue === undefined || newValue === '';
+    if (!isEmpty || !shouldClearSelectToDefault(field)) {
+        return newValue;
+    }
+    return field.defaultValue;
+}
+export function resolveSelectPlaceholder(field, options) {
+    if (field.placeholder) {
+        return field.placeholder;
+    }
+    if (field.defaultValue === undefined || field.defaultValue === null || field.defaultValue === '') {
+        return undefined;
+    }
+    return options.find((option) => option.value === field.defaultValue)?.label;
+}
 export function getDefaultAdaptableFormData(formDef) {
     return flattenAdaptableFormFields(formDef).reduce((data, field) => {
         if (field.fieldType === 'select' && field.multi) {

package/src/AdaptableState/Common/CellDataChangedInfo.d.ts

@@ -33,9 +33,10 @@ export interface CellDataChangedInfo<TData = any> {
      */
     rowData?: TData;
     /**
-     * What triggered the change - user, background change or a reverted change?
+     * What triggered the change - user, background change, a reverted change, or a
+     * derived update on a Calculated Column whose source value changed?
      */
-    trigger?: 'edit' | 'tick' | 'undo' | 'aggChange';
+    trigger?: 'edit' | 'tick' | 'undo' | 'aggChange' | 'calculatedColumnChange';
     /**
      * Whether the change was prevented by a validation rule
      */

package/src/AdaptableState/Common/Enums.d.ts

@@ -49,11 +49,6 @@ export declare enum SummaryOperation {
     Only = "Only",
     Weighted_Average = "Weighted Avg"
 }
-export declare enum FilterOnDataChangeOptions {
-    Always = "Always",
-    Never = "Never",
-    Throttle = "Throttle"
-}
 export declare enum ChangeDirection {
     Up = "Up",
     Down = "Down",

package/src/AdaptableState/Common/Enums.js

@@ -61,12 +61,6 @@ export var SummaryOperation;
     SummaryOperation["Only"] = "Only";
     SummaryOperation["Weighted_Average"] = "Weighted Avg";
 })(SummaryOperation || (SummaryOperation = {}));
-export var FilterOnDataChangeOptions;
-(function (FilterOnDataChangeOptions) {
-    FilterOnDataChangeOptions["Always"] = "Always";
-    FilterOnDataChangeOptions["Never"] = "Never";
-    FilterOnDataChangeOptions["Throttle"] = "Throttle";
-})(FilterOnDataChangeOptions || (FilterOnDataChangeOptions = {}));
 export var ChangeDirection;
 (function (ChangeDirection) {
     ChangeDirection["Up"] = "Up";

package/src/Api/Implementation/LayoutHelpers.js

@@ -248,6 +248,9 @@ export const tableLayoutToTableLayoutModel = (tableLayout) => {
     if (tableLayout.Metadata) {
         result.Ignore_Metadata = tableLayout.Metadata;
     }
+    if (tableLayout.OpenCharts) {
+        result.Ignore_OpenCharts = tableLayout.OpenCharts;
+    }
     if (tableLayout.RowSummaries != null) {
         result.Ignore_RowSummaries = tableLayout.RowSummaries;
     }
@@ -327,6 +330,9 @@ export const pivotLayoutToPivotLayoutModel = (pivotLayout) => {
     if (pivotLayout.Metadata) {
         result.Ignore_Metadata = pivotLayout.Metadata;
     }
+    if (pivotLayout.OpenCharts) {
+        result.Ignore_OpenCharts = pivotLayout.OpenCharts;
+    }
     return result;
 };
 function toAggFunc(aggFunc) {
@@ -376,6 +382,9 @@ export const tableLayoutModelToTableLayout = (layoutModel) => {
     if (layoutModel.Ignore_Metadata) {
         tableLayout.Metadata = layoutModel.Ignore_Metadata;
     }
+    if (layoutModel.Ignore_OpenCharts) {
+        tableLayout.OpenCharts = layoutModel.Ignore_OpenCharts;
+    }
     // if (layoutModel.RowGroupDisplayType) {
     tableLayout.RowGroupDisplayType = layoutModel.RowGroupDisplayType ?? 'single';
     // }
@@ -481,6 +490,9 @@ export const pivotLayoutModelToPivotLayout = (layoutModel) => {
     if (layoutModel.Ignore_Metadata) {
         pivotLayout.Metadata = layoutModel.Ignore_Metadata;
     }
+    if (layoutModel.Ignore_OpenCharts) {
+        pivotLayout.OpenCharts = layoutModel.Ignore_OpenCharts;
+    }
     if (layoutModel.PivotGroupedColumns) {
         pivotLayout.PivotGroupedColumns = layoutModel.PivotGroupedColumns;
     }

package/src/Strategy/CalculatedColumnModule.js

@@ -32,7 +32,9 @@ export class CalculatedColumnModule extends AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (cellDataChangedInfo.trigger !== 'aggChange' && !cellDataChangedInfo.preventEdit) {
+            if (cellDataChangedInfo.trigger !== 'aggChange' &&
+                cellDataChangedInfo.trigger !== 'calculatedColumnChange' &&
+                !cellDataChangedInfo.preventEdit) {
                 this.api.internalApi
                     .getCalculatedColumnExpressionService()
                     .listentoCellDataChange(cellDataChangedInfo);

package/src/Utilities/Services/CalculatedColumnExpressionService.d.ts

@@ -8,6 +8,7 @@ export declare class CalculatedColumnExpressionService implements ICalculatedCol
     private adaptableApi;
     private aggregatedScalarLiveValuesMap;
     constructor(adaptableApi: AdaptableApi);
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo: CellDataChangedInfo): CellDataChangedInfo[];
     listentoCellDataChange(cellDataChangedInfo: CellDataChangedInfo): void;
     listentoRowDataChange(rowDataChangedInfo: RowDataChangedInfo): void;
     destroy(): void;

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -1,5 +1,6 @@
 import { CalculatedColumnModuleId } from '../Constants/ModuleConstants';
 import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
+import { buildSyntheticCellDataChangedInfosForCalcColumns } from './CalculatedColumnSyntheticChange';
 export class CalculatedColumnExpressionService {
     adaptableApi;
     aggregatedScalarLiveValuesMap = new Map();
@@ -7,7 +8,13 @@ export class CalculatedColumnExpressionService {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;
     }
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo) {
+        return buildSyntheticCellDataChangedInfosForCalcColumns(this.adaptableApi, cellDataChangedInfo);
+    }
     listentoCellDataChange(cellDataChangedInfo) {
+        if (cellDataChangedInfo.trigger === 'calculatedColumnChange') {
+            return;
+        }
         const refreshedCalculatedColumns = [];
         this.aggregatedScalarLiveValuesMap.forEach((aggregatedScalarLiveValue, calculatedColumnId) => {
             const calculatedColumn = this.adaptableApi.calculatedColumnApi.getCalculatedColumnById(calculatedColumnId);

package/src/Utilities/Services/CalculatedColumnSyntheticChange.d.ts

@@ -0,0 +1,4 @@
+import { AdaptableApi } from '../../types';
+import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
+export declare function buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi: AdaptableApi, info: CellDataChangedInfo): CellDataChangedInfo[];
+export declare function expandCellDataChangedInfosWithCalculatedColumns(adaptableApi: AdaptableApi, cellDataChangedInfos: CellDataChangedInfo[]): CellDataChangedInfo[];

package/src/Utilities/Services/CalculatedColumnSyntheticChange.js

@@ -0,0 +1,115 @@
+import * as parser from '../../parser/src';
+import { CalculatedColumnModuleId } from '../Constants/ModuleConstants';
+import Helper from '../Helpers/Helper';
+function isScalarCalculatedColumn(calculatedColumn) {
+    return !!calculatedColumn.Query?.ScalarExpression;
+}
+function collectDependentScalarCalculatedColumns(adaptableApi, rootColumnId) {
+    const collected = [];
+    const seenCalcColumnIds = new Set();
+    const queue = [rootColumnId];
+    while (queue.length > 0) {
+        const columnId = queue.shift();
+        const adaptableColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        if (!adaptableColumn) {
+            continue;
+        }
+        const dependentColumnIds = adaptableApi.calculatedColumnApi.internalApi.getCalculatedColumnsDependentOnColumn(adaptableColumn);
+        dependentColumnIds.forEach((dependentColumnId) => {
+            if (seenCalcColumnIds.has(dependentColumnId)) {
+                return;
+            }
+            const calculatedColumn = adaptableApi.calculatedColumnApi.getCalculatedColumnForColumnId(dependentColumnId);
+            if (!calculatedColumn || !isScalarCalculatedColumn(calculatedColumn)) {
+                return;
+            }
+            seenCalcColumnIds.add(dependentColumnId);
+            collected.push(calculatedColumn);
+            queue.push(dependentColumnId);
+        });
+    }
+    return collected;
+}
+function buildShadowRowData(adaptableApi, info) {
+    const shadowData = Helper.cloneObject(info.rowNode?.data ?? info.rowData ?? {});
+    const fieldName = info.column.field ?? info.column.columnId;
+    adaptableApi.internalApi.setValueUsingField(shadowData, fieldName, info.oldValue);
+    return shadowData;
+}
+function evaluateScalarExpressionWithShadowData(adaptableApi, calculatedColumn, rowNode, shadowData) {
+    const internalApi = adaptableApi.internalApi;
+    const moduleFns = internalApi
+        .getQueryLanguageService()
+        .getModuleExpressionFunctionsMap(CalculatedColumnModuleId);
+    const baseFunctions = { ...moduleFns.booleanFunctions, ...moduleFns.scalarFunctions };
+    const resolveColumnValue = (columnId) => {
+        const childCalculatedColumn = adaptableApi.calculatedColumnApi.getCalculatedColumnForColumnId(columnId);
+        if (childCalculatedColumn?.Query?.ScalarExpression) {
+            return evaluateScalarExpressionWithShadowData(adaptableApi, childCalculatedColumn, rowNode, shadowData);
+        }
+        const adaptableColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        return internalApi.getValueUsingField(shadowData, adaptableColumn?.field ?? columnId);
+    };
+    const customFunctions = {
+        ...baseFunctions,
+        COL: {
+            ...baseFunctions.COL,
+            handler: (args) => resolveColumnValue(args[0]),
+        },
+        FIELD: {
+            ...baseFunctions.FIELD,
+            handler: (args) => internalApi.getValueUsingField(shadowData, args[0]),
+        },
+    };
+    return parser.evaluate(calculatedColumn.Query.ScalarExpression, {
+        node: { ...rowNode, data: shadowData },
+        functions: customFunctions,
+        ...internalApi.buildBaseContext(),
+    });
+}
+export function buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi, info) {
+    if (!info.rowNode ||
+        info.preventEdit ||
+        info.trigger === 'undo' ||
+        info.trigger === 'aggChange' ||
+        info.trigger === 'calculatedColumnChange') {
+        return [];
+    }
+    const calculatedColumns = collectDependentScalarCalculatedColumns(adaptableApi, info.column.columnId);
+    if (!calculatedColumns.length) {
+        return [];
+    }
+    const shadowData = buildShadowRowData(adaptableApi, info);
+    const expressionService = adaptableApi.internalApi.getCalculatedColumnExpressionService();
+    const syntheticEvents = [];
+    calculatedColumns.forEach((calculatedColumn) => {
+        const oldValue = evaluateScalarExpressionWithShadowData(adaptableApi, calculatedColumn, info.rowNode, shadowData);
+        const newValue = expressionService.evaluateCalculatedColumnQuery(calculatedColumn, info.rowNode);
+        if (oldValue == newValue) {
+            return;
+        }
+        const column = adaptableApi.columnApi.getColumnWithColumnId(calculatedColumn.ColumnId);
+        if (!column) {
+            return;
+        }
+        syntheticEvents.push(adaptableApi.internalApi.buildCellDataChangedInfo({
+            oldValue,
+            newValue,
+            column,
+            primaryKeyValue: info.primaryKeyValue,
+            rowNode: info.rowNode,
+            trigger: 'calculatedColumnChange',
+        }));
+    });
+    return syntheticEvents;
+}
+export function expandCellDataChangedInfosWithCalculatedColumns(adaptableApi, cellDataChangedInfos) {
+    if (!cellDataChangedInfos.length) {
+        return cellDataChangedInfos;
+    }
+    const syntheticEvents = cellDataChangedInfos.flatMap((info) => buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi, info));
+    if (!syntheticEvents.length) {
+        return cellDataChangedInfos;
+    }
+    return [...cellDataChangedInfos, ...syntheticEvents];
+}

package/src/Utilities/Services/Interface/ICalculatedColumnExpressionService.d.ts

@@ -11,4 +11,5 @@ export interface ICalculatedColumnExpressionService extends IAdaptableService {
     destroyAggregatedScalarLiveValue(calculatedColumn: CalculatedColumn): void;
     listentoCellDataChange(cellDataChangedInfo: CellDataChangedInfo): void;
     listentoRowDataChange(rowDataChangedInfo: RowDataChangedInfo): void;
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo: CellDataChangedInfo): CellDataChangedInfo[];
 }

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
+import { SingleSelect } from '../../../../components/NewSelect';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { validateChartName } from '../../../../Utilities/Helpers/chartingHelper';
 import AdaptableInput from '../../../Components/AdaptableInput';
@@ -35,27 +35,19 @@ export const SettingsSection = (props) => {
         });
     }, [props.chartDefinition]);
     const aggFuncs = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
-    const aggFuncsOptions = aggFuncs.map((aggFunc) => ({
-        label: aggFunc,
-        onClick: () => {
-            props.onChange({
-                ...props.chartDefinition,
-                Model: {
-                    ...props.chartDefinition.Model,
-                    aggFunc,
-                },
-            });
-        },
-    }));
     const aggFunc = props.chartDefinition.Model.aggFunc;
-    const handleAggFuncClear = React.useCallback(() => {
+    const handleAggFuncChange = React.useCallback((value) => {
         props.onChange({
             ...props.chartDefinition,
             Model: {
                 ...props.chartDefinition.Model,
-                aggFunc: '',
+                aggFunc: value,
             },
         });
     }, [props.chartDefinition]);
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), _jsx(FormRow, { label: "Unlink Chart", children: _jsx(CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), _jsx(FormRow, { label: "Suppress Chart Ranges", children: _jsx(CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (_jsx(FormRow, { label: "Agg Func", children: _jsx(DropdownButton, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear, children: aggFunc ? aggFunc : 'Select ' }) }))] }));
+    const aggFuncsOptions = aggFuncs.map((option) => ({
+        label: option,
+        value: option,
+    }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), _jsx(FormRow, { label: "Unlink Chart", children: _jsx(CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), _jsx(FormRow, { label: "Suppress Chart Ranges", children: _jsx(CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (_jsx(FormRow, { label: "Agg Func", children: _jsx(SingleSelect, { placeholder: "Select", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: handleAggFuncChange }) }))] }));
 };

package/src/View/Components/ColumnFilter/ColumnFilterWindow.js

@@ -28,5 +28,5 @@ export const ColumnFilterWindow = (props) => {
                                     return (_jsxs(Flex, { children: [label, _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableIconComponent, { icon: { name: 'filter' } })] }));
                                 }
                                 return label;
-                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId }) }) }) }), _jsx(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
+                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, value: columnId }) }) }) }), _jsx(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
 };

package/src/View/Components/Selectors/ColumnSelector.js

@@ -15,6 +15,7 @@ export const ColumnSelector = function (props) {
         return {
             label,
             textLabel,
+            tooltip: textLabel,
             value: column.columnId,
         };
     })
@@ -31,7 +32,11 @@ export const ColumnSelector = function (props) {
         virtualized: true,
         items: options,
         showClear: false,
+        showItemTooltip: true,
         onValueChange: (colId) => {
+            if (colId === null) {
+                return;
+            }
             props.onChange(colId);
         },
         value: props.value,

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -6,7 +6,9 @@ import { Flex } from '../../../components/Flex';
 import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
+    const availableColumns = React.useMemo(() => api.columnApi
+        .getUIAvailableColumns()
+        .filter((column) => !column.isActionColumn && !api.columnApi.isFdc3Column(column.columnId)), [api]);
     return (_jsx(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: _jsx(NewScopeComponent, { descriptions: {
                 rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
                 columnScope: 'Changes in selected columns will trigger an Flashing Cell',

package/src/View/Layout/LayoutViewPanel.js

@@ -33,29 +33,31 @@ const LayoutViewPanelComponent = (props) => {
     const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
+    const toLayoutSelectItems = (layouts) => layouts.map((layout) => ({
+        label: layout.Name,
+        value: layout.Name,
+    }));
     const tableLayoutsArray = Layouts.filter((layout) => !isPivotLayout(layout));
     const pivotLayoutsArray = Layouts.filter((layout) => isPivotLayout(layout));
-    const layoutGroups = [
-        tableLayoutsArray.length > 0
-            ? {
-                label: 'Table Layouts',
-                items: tableLayoutsArray.map((layout) => ({
-                    label: layout.Name,
-                    value: layout.Name,
-                })),
-            }
-            : null,
-        pivotLayoutsArray.length > 0
-            ? {
-                label: 'Pivot Layouts',
-                items: pivotLayoutsArray.map((layout) => ({
-                    label: layout.Name,
-                    value: layout.Name,
-                })),
-            }
-            : null,
-    ].filter(Boolean);
-    return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: _jsx(SingleSelect, { groups: layoutGroups, showItemTooltip: true, disabled: isErrorLayout, className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`, ariaLabel: 'Select Layout', value: layoutEntity ? layoutEntity.Name : null, onValueChange: (layout) => onSelectLayout(layout) }) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+    const showLayoutTypeHeadings = tableLayoutsArray.length > 0 && pivotLayoutsArray.length > 0;
+    const layoutSelectCommonProps = {
+        showItemTooltip: true,
+        disabled: isErrorLayout,
+        className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`,
+        ariaLabel: 'Select Layout',
+        value: layoutEntity ? layoutEntity.Name : null,
+        onValueChange: (layout) => onSelectLayout(layout),
+    };
+    return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: showLayoutTypeHeadings ? (_jsx(SingleSelect, { ...layoutSelectCommonProps, groups: [
+                        {
+                            label: 'Table Layouts',
+                            items: toLayoutSelectItems(tableLayoutsArray),
+                        },
+                        {
+                            label: 'Pivot Layouts',
+                            items: toLayoutSelectItems(pivotLayoutsArray),
+                        },
+                    ] })) : (_jsx(SingleSelect, { ...layoutSelectCommonProps, items: toLayoutSelectItems(Layouts) })) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
                     ? GeneralConstants.READ_ONLY_STYLE
                     : '', `ab-${elementType}__Layout__wrap`), children: [_jsx(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), _jsx(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), _jsx(NewDropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
                             {

package/src/View/renderWithAdaptableContext.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
 import AdaptableContext from './AdaptableContext';
-import { WithAdaptableComputedCSSVars } from './AdaptableComputedCSSVarsContext';
-import { TooltipProvider } from '../components/ui/tooltip';
+import { TooltipProvider } from "../components/ui/tooltip";
 export const renderWithAdaptableContext = (children, adaptable) => {
-    return (_jsx(TooltipProvider, { delay: 300, children: _jsx(Provider, { store: adaptable.adaptableStore.TheStore, children: _jsx(WithAdaptableComputedCSSVars, { children: _jsx(AdaptableContext.Provider, { value: adaptable, children: children }) }) }) }));
+    return (_jsx(TooltipProvider, { delay: 300, children: _jsx(Provider, { store: adaptable.adaptableStore.TheStore, children: _jsx(AdaptableContext.Provider, { value: adaptable, children: children }) }) }));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -97,7 +97,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private LicenseService;
     private ChartingService;
     private rowListeners;
-    private throttleFilterOnDataChange;
     private debouncedSetSelectedRows;
     private debouncedSetSelectedCells;
     private agGridListenerKeydown;

package/src/agGrid/AdaptableAgGrid.js

@@ -1,4 +1,3 @@
-import throttle from '../Utilities/utils/throttle';
 import debounce from '../Utilities/utils/debounce';
 import { createGrid, LocalEventService, } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
@@ -21,6 +20,7 @@ import { ThemeService } from '../Utilities/Services/ThemeService';
 import { ValidationService } from '../Utilities/Services/ValidationService';
 import { ModuleService } from '../Utilities/Services/ModuleService';
 import { CalculatedColumnExpressionService } from '../Utilities/Services/CalculatedColumnExpressionService';
+import { expandCellDataChangedInfosWithCalculatedColumns } from '../Utilities/Services/CalculatedColumnSyntheticChange';
 import { QueryLanguageService } from '../Utilities/Services/QueryLanguageService';
 import { AlertService } from '../Utilities/Services/AlertService';
 import { TeamSharingService } from '../Utilities/Services/TeamSharingService';
@@ -83,7 +83,6 @@ import { computeParameterizedAggregation, getParameterizedAggregationDefinitions
 import { getParameterizedAggForColumn } from '../Aggregation/parameterizedAggregationHelpers';
 import { getParameterizedAggregationHeaderParenthesisValue } from '../Aggregation/parameterizedAggregationHeader';
 import { RowFormService } from '../Utilities/Services/RowFormService';
-import { FilterOnDataChangeOptions } from '../AdaptableState/Common/Enums';
 import { ADAPTABLE_PUBLISH_TIMESTAMP } from '../EnvVars';
 import { AdaptableUpgradeHelper } from '../migration/AdaptableUpgradeHelper';
 import { ensureLoadingScreenPortalElement } from '../components/Modal';
@@ -204,7 +203,6 @@ export class AdaptableAgGrid {
     LicenseService;
     ChartingService;
     rowListeners;
-    throttleFilterOnDataChange;
     debouncedSetSelectedRows;
     debouncedSetSelectedCells;
     agGridListenerKeydown;
@@ -1699,12 +1697,6 @@ export class AdaptableAgGrid {
             }), true);
             gridContainerElement.addEventListener('mouseleave', (this.agGridListenerMouseLeave = (event) => this._emit('MouseLeave', event)));
         }
-        this.throttleFilterOnDataChange = throttle(
-        // the extra function is to make sure we have a reference to ag-grid-api
-        () => this.agGridAdapter.getAgGridApi()?.onFilterChanged(), this.adaptableOptions.filterOptions.filterActionOnDataChange.throttleDelay, {
-            trailing: true,
-            leading: false,
-        });
         /**
          * Use Case: User has started inline editing but its disabled in Row Form Options
          * Action: Stop editing
@@ -3813,7 +3805,6 @@ export class AdaptableAgGrid {
             this.listenerCellSelectionChanged = null;
             this.listenerGlobalSetRowSelection = null;
             this.listenerSortChanged = null;
-            this.throttleFilterOnDataChange = null;
             const liveGridOptions = this.agGridAdapter.DANGER_getLiveGridOptions();
             if (liveGridOptions) {
                 this.agGridOptionsService.revertGridOptionsPropertiesToUserValue(liveGridOptions, [
@@ -4133,6 +4124,7 @@ export class AdaptableAgGrid {
      * There are a few things we need to do AFTER we edit a cell and it makes sense to put them in one place
      */
     performPostEditChecks(rowNode, cellDataChangedInfos) {
+        cellDataChangedInfos = expandCellDataChangedInfosWithCalculatedColumns(this.api, cellDataChangedInfos);
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             // if a Cell Data Change is undone, log to the Console
             if (cellDataChangedInfo.trigger === 'undo') {
@@ -4290,14 +4282,7 @@ export class AdaptableAgGrid {
         }
     }
     filterOnDataChange() {
-        if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
-            FilterOnDataChangeOptions.Always) {
-            this.agGridAdapter.getAgGridApi()?.onFilterChanged();
-        }
-        else if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
-            FilterOnDataChangeOptions.Throttle) {
-            this.throttleFilterOnDataChange();
-        }
+        this.agGridAdapter.getAgGridApi()?.onFilterChanged();
     }
     refreshLayout() {
         const columnDefs = this.agGridAdapter.getColumnDefinitionsInclSpecialColumns();

package/src/agGrid/AgGridColumnAdapter.js

@@ -951,10 +951,7 @@ export class AgGridColumnAdapter {
                 // 1. evaluate EditOptions.isCellEditable if provided
                 if (this.adaptableApi.gridApi.internalApi.hasCellEditableAccordingToEditOptions()) {
                     const gridCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, params.column.getColId());
-                    const editOptionsEditability = this.adaptableApi.gridApi.internalApi.isCellEditableAccordingToEditOptions(gridCell, getOriginalColDefEditable());
-                    if (editOptionsEditability) {
-                        return editOptionsEditability;
-                    }
+                    return this.adaptableApi.gridApi.internalApi.isCellEditableAccordingToEditOptions(gridCell, getOriginalColDefEditable());
                 }
                 // 2. otherwise, fallback to colDef.editable
                 return getOriginalColDefEditable();