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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "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

@@ -170,10 +170,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

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableFormFieldGroup = isAdaptableFormFieldGroup;
 exports.flattenAdaptableFormFields = flattenAdaptableFormFields;
+exports.shouldClearSelectToDefault = shouldClearSelectToDefault;
+exports.resolveSelectValueAfterClear = resolveSelectValueAfterClear;
+exports.resolveSelectPlaceholder = resolveSelectPlaceholder;
 exports.getDefaultAdaptableFormData = getDefaultAdaptableFormData;
 exports.resolveAdaptableFormFieldOptionsSync = resolveAdaptableFormFieldOptionsSync;
 exports.isAdaptableFormFieldHidden = isAdaptableFormFieldHidden;
@@ -42,6 +45,37 @@ function flattenAdaptableFormFields(formDef) {
     }
     return out;
 }
+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 !== '');
+}
+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;
+}
+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;
+}
 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

@@ -1,7 +1,7 @@
 "use strict";
 // General Enums
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChangeDirection = exports.FilterOnDataChangeOptions = exports.SummaryOperation = exports.StatusColour = exports.FontSize = exports.FontStyle = exports.FontWeight = exports.SelectionMode = exports.SortOrder = exports.ScheduleType = exports.MathOperation = void 0;
+exports.ChangeDirection = exports.SummaryOperation = exports.StatusColour = exports.FontSize = exports.FontStyle = exports.FontWeight = exports.SelectionMode = exports.SortOrder = exports.ScheduleType = exports.MathOperation = void 0;
 var MathOperation;
 (function (MathOperation) {
     MathOperation["Add"] = "Add";
@@ -64,12 +64,6 @@ var SummaryOperation;
     SummaryOperation["Only"] = "Only";
     SummaryOperation["Weighted_Average"] = "Weighted Avg";
 })(SummaryOperation || (exports.SummaryOperation = SummaryOperation = {}));
-var FilterOnDataChangeOptions;
-(function (FilterOnDataChangeOptions) {
-    FilterOnDataChangeOptions["Always"] = "Always";
-    FilterOnDataChangeOptions["Never"] = "Never";
-    FilterOnDataChangeOptions["Throttle"] = "Throttle";
-})(FilterOnDataChangeOptions || (exports.FilterOnDataChangeOptions = FilterOnDataChangeOptions = {}));
 var ChangeDirection;
 (function (ChangeDirection) {
     ChangeDirection["Up"] = "Up";

package/src/Api/Implementation/LayoutHelpers.js

@@ -263,6 +263,9 @@ 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;
     }
@@ -343,6 +346,9 @@ const pivotLayoutToPivotLayoutModel = (pivotLayout) => {
     if (pivotLayout.Metadata) {
         result.Ignore_Metadata = pivotLayout.Metadata;
     }
+    if (pivotLayout.OpenCharts) {
+        result.Ignore_OpenCharts = pivotLayout.OpenCharts;
+    }
     return result;
 };
 exports.pivotLayoutToPivotLayoutModel = pivotLayoutToPivotLayoutModel;
@@ -393,6 +399,9 @@ 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';
     // }
@@ -499,6 +508,9 @@ 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

@@ -36,7 +36,9 @@ class CalculatedColumnModule extends AdaptableModuleBase_1.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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnExpressionService = void 0;
 const ModuleConstants_1 = require("../Constants/ModuleConstants");
 const AggregatedScalarLiveValue_1 = require("./AggregatedScalarLiveValue");
+const CalculatedColumnSyntheticChange_1 = require("./CalculatedColumnSyntheticChange");
 class CalculatedColumnExpressionService {
     adaptableApi;
     aggregatedScalarLiveValuesMap = new Map();
@@ -10,7 +11,13 @@ class CalculatedColumnExpressionService {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;
     }
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo) {
+        return (0, CalculatedColumnSyntheticChange_1.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,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSyntheticCellDataChangedInfosForCalcColumns = buildSyntheticCellDataChangedInfosForCalcColumns;
+exports.expandCellDataChangedInfosWithCalculatedColumns = expandCellDataChangedInfosWithCalculatedColumns;
+const tslib_1 = require("tslib");
+const parser = tslib_1.__importStar(require("../../parser/src"));
+const ModuleConstants_1 = require("../Constants/ModuleConstants");
+const Helper_1 = tslib_1.__importDefault(require("../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_1.default.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(ModuleConstants_1.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(),
+    });
+}
+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;
+}
+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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const NewSelect_1 = require("../../../../components/NewSelect");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
@@ -40,28 +40,20 @@ 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 ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Unlink Chart", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Chart Ranges", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Agg Func", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear, children: aggFunc ? aggFunc : 'Select ' }) }))] }));
+    const aggFuncsOptions = aggFuncs.map((option) => ({
+        label: option,
+        value: option,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Unlink Chart", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Chart Ranges", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Agg Func", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Select", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: handleAggFuncChange }) }))] }));
 };
 exports.SettingsSection = SettingsSection;

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

@@ -32,6 +32,6 @@ const ColumnFilterWindow = (props) => {
                                     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [label, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })] }));
                                 }
                                 return label;
-                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId }) }) }) }), (0, jsx_runtime_1.jsx)(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
+                            }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, value: columnId }) }) }) }), (0, jsx_runtime_1.jsx)(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
 };
 exports.ColumnFilterWindow = ColumnFilterWindow;

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

@@ -19,6 +19,7 @@ const ColumnSelector = function (props) {
         return {
             label,
             textLabel,
+            tooltip: textLabel,
             value: column.columnId,
         };
     })
@@ -35,7 +36,11 @@ 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

@@ -10,7 +10,9 @@ const Flex_1 = require("../../../components/Flex");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.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

@@ -37,29 +37,31 @@ const LayoutViewPanelComponent = (props) => {
     const entityAccessLevel = AdaptableHelper_1.default.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) => !(0, isPivotLayout_1.isPivotLayout)(layout));
     const pivotLayoutsArray = Layouts.filter((layout) => (0, isPivotLayout_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: showLayoutTypeHeadings ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ...layoutSelectCommonProps, groups: [
+                        {
+                            label: 'Table Layouts',
+                            items: toLayoutSelectItems(tableLayoutsArray),
+                        },
+                        {
+                            label: 'Pivot Layouts',
+                            items: toLayoutSelectItems(pivotLayoutsArray),
+                        },
+                    ] })) : ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ...layoutSelectCommonProps, items: toLayoutSelectItems(Layouts) })) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
                     ? GeneralConstants.READ_ONLY_STYLE
                     : '', `ab-${elementType}__Layout__wrap`), children: [(0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), (0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), (0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
                             {

package/src/View/renderWithAdaptableContext.js

@@ -5,9 +5,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
-const AdaptableComputedCSSVarsContext_1 = require("./AdaptableComputedCSSVarsContext");
 const tooltip_1 = require("../components/ui/tooltip");
 const renderWithAdaptableContext = (children, adaptable) => {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { delay: 300, children: (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore, children: (0, jsx_runtime_1.jsx)(AdaptableComputedCSSVarsContext_1.WithAdaptableComputedCSSVars, { children: (0, jsx_runtime_1.jsx)(AdaptableContext_1.default.Provider, { value: adaptable, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { delay: 300, children: (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore, children: (0, jsx_runtime_1.jsx)(AdaptableContext_1.default.Provider, { value: adaptable, children: children }) }) }));
 };
 exports.renderWithAdaptableContext = renderWithAdaptableContext;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableAgGrid = void 0;
 const tslib_1 = require("tslib");
-const throttle_1 = tslib_1.__importDefault(require("../Utilities/utils/throttle"));
 const debounce_1 = tslib_1.__importDefault(require("../Utilities/utils/debounce"));
 const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const AdaptableLogger_1 = require("./AdaptableLogger");
@@ -25,6 +24,7 @@ const ThemeService_1 = require("../Utilities/Services/ThemeService");
 const ValidationService_1 = require("../Utilities/Services/ValidationService");
 const ModuleService_1 = require("../Utilities/Services/ModuleService");
 const CalculatedColumnExpressionService_1 = require("../Utilities/Services/CalculatedColumnExpressionService");
+const CalculatedColumnSyntheticChange_1 = require("../Utilities/Services/CalculatedColumnSyntheticChange");
 const QueryLanguageService_1 = require("../Utilities/Services/QueryLanguageService");
 const AlertService_1 = require("../Utilities/Services/AlertService");
 const TeamSharingService_1 = require("../Utilities/Services/TeamSharingService");
@@ -87,7 +87,6 @@ const ParameterizedAggregationRegistry_1 = require("../Aggregation/Parameterized
 const parameterizedAggregationHelpers_1 = require("../Aggregation/parameterizedAggregationHelpers");
 const parameterizedAggregationHeader_1 = require("../Aggregation/parameterizedAggregationHeader");
 const RowFormService_1 = require("../Utilities/Services/RowFormService");
-const Enums_1 = require("../AdaptableState/Common/Enums");
 const EnvVars_1 = require("../EnvVars");
 const AdaptableUpgradeHelper_1 = require("../migration/AdaptableUpgradeHelper");
 const Modal_1 = require("../components/Modal");
@@ -208,7 +207,6 @@ class AdaptableAgGrid {
     LicenseService;
     ChartingService;
     rowListeners;
-    throttleFilterOnDataChange;
     debouncedSetSelectedRows;
     debouncedSetSelectedCells;
     agGridListenerKeydown;
@@ -1703,12 +1701,6 @@ class AdaptableAgGrid {
             }), true);
             gridContainerElement.addEventListener('mouseleave', (this.agGridListenerMouseLeave = (event) => this._emit('MouseLeave', event)));
         }
-        this.throttleFilterOnDataChange = (0, throttle_1.default)(
-        // 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
@@ -3817,7 +3809,6 @@ 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, [
@@ -4137,6 +4128,7 @@ 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 = (0, CalculatedColumnSyntheticChange_1.expandCellDataChangedInfosWithCalculatedColumns)(this.api, cellDataChangedInfos);
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             // if a Cell Data Change is undone, log to the Console
             if (cellDataChangedInfo.trigger === 'undo') {
@@ -4294,14 +4286,7 @@ class AdaptableAgGrid {
         }
     }
     filterOnDataChange() {
-        if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
-            Enums_1.FilterOnDataChangeOptions.Always) {
-            this.agGridAdapter.getAgGridApi()?.onFilterChanged();
-        }
-        else if (this.adaptableOptions.filterOptions.filterActionOnDataChange.applyFilter ==
-            Enums_1.FilterOnDataChangeOptions.Throttle) {
-            this.throttleFilterOnDataChange();
-        }
+        this.agGridAdapter.getAgGridApi()?.onFilterChanged();
     }
     refreshLayout() {
         const columnDefs = this.agGridAdapter.getColumnDefinitionsInclSpecialColumns();