@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

package/src/View/Filter/ColumnFilter/useColumnFilterQlPredicate.d.ts

@@ -0,0 +1,27 @@
+import { QlGroup } from "../../../../vendor/aql/index.js";
+import { AdaptableFilterComponentLocation, ColumnFilter } from '../../../types';
+import { ColumnFilterOperatorDef } from '../../../aql/columnFilterQl';
+/**
+ * Expression-based replacement for the legacy `useAdaptableFilterWrapper`
+ * (now removed).
+ *
+ * Read: `columnFilter.Expression` → `QlPredicate` (via the ColumnFilter
+ * module mapper); falls back to `PreferredFilter`, then to the data-type
+ * default operator.
+ *
+ * Write:
+ * - complete predicates → `{ ColumnId, Expression }` (no PreferredFilter);
+ * - operator-only / incomplete → `{ ColumnId, PreferredFilter }` (no Expression);
+ * - the full — possibly incomplete — group also goes to the per-column draft
+ *   in internal (non-persisted) Redux state.
+ * External filter changes invalidate the draft in the reducer itself
+ * (see the `LAYOUT_COLUMN_FILTER_*` cases in `InternalRedux`).
+ */
+export declare const useColumnFilterQlPredicate: (columnId: string, filterComponent: AdaptableFilterComponentLocation) => {
+    qlGroup: QlGroup;
+    operatorDefs: ColumnFilterOperatorDef[];
+    columnFilter: ColumnFilter;
+    column: import("../../../types").AdaptableColumn<any>;
+    handleGroupChange: (newGroup: QlGroup) => void;
+    handleClear: () => void;
+};

package/src/View/Filter/ColumnFilter/useColumnFilterQlPredicate.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
+import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
+import { getCurrentLayoutSelector } from '../../../Redux/ActionsReducers/LayoutRedux';
+import * as ModuleConstants from '../../../Utilities/Constants/ModuleConstants';
+import { buildQueryBuilderMapper } from '../../../components/aql/QueryBuilder/mapper';
+import { useAdaptable } from '../../AdaptableContext';
+import { buildColumnFilterFromGroup, deriveColumnFilterGroup, expressionForColumnFilterChangedEvent, getColumnFilterOperatorDefs, isQlPredicateComplete, } from '../../../aql/columnFilterQl';
+export const useColumnFilterQlPredicate = (columnId, filterComponent) => {
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
+    const api = adaptable.api;
+    const column = api.columnApi.getColumnWithColumnId(columnId);
+    const operatorDefs = React.useMemo(() => (column ? getColumnFilterOperatorDefs(api, column) : []), [api, columnId]);
+    const mapper = React.useMemo(() => buildQueryBuilderMapper(api, ModuleConstants.ColumnFilterModuleId), [api]);
+    const currentLayout = useSelector(getCurrentLayoutSelector);
+    const columnFilter = React.useMemo(() => {
+        return currentLayout?.ColumnFilters?.find((cf) => cf.ColumnId === columnId);
+    }, [currentLayout?.ColumnFilters, columnId]);
+    const draft = useSelector((state) => InternalRedux.ColumnFilterDraftSelector(state.Internal, columnId));
+    const derivedGroup = React.useMemo(() => deriveColumnFilterGroup(api, column, columnFilter, mapper, filterComponent), [columnFilter, columnId, mapper]);
+    const qlGroup = draft ?? derivedGroup;
+    const handleClear = React.useCallback(() => {
+        dispatch(LayoutRedux.LayoutColumnFilterClear(columnId));
+    }, [columnId]);
+    const handleGroupChange = React.useCallback((newGroup) => {
+        const latestColumnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(columnId);
+        const next = buildColumnFilterFromGroup(api, latestColumnFilter, columnId, newGroup);
+        if (next && next !== 'clear') {
+            dispatch(latestColumnFilter?.Uuid
+                ? LayoutRedux.LayoutColumnFilterEdit(next)
+                : LayoutRedux.LayoutColumnFilterAdd(next));
+            dispatch(InternalRedux.ColumnFilterDraftSet(columnId, newGroup));
+            return;
+        }
+        if (next === 'clear' && latestColumnFilter?.Uuid) {
+            dispatch(LayoutRedux.LayoutColumnFilterClear(columnId));
+            dispatch(InternalRedux.ColumnFilterDraftSet(columnId, newGroup));
+            return;
+        }
+        dispatch(InternalRedux.ColumnFilterDraftSet(columnId, newGroup));
+        api.eventApi.internalApi.fireColumnFilterChangedEvent({
+            columnId,
+            isApplied: false,
+            isComplete: isQlPredicateComplete(api, newGroup),
+            expression: expressionForColumnFilterChangedEvent(api, newGroup),
+        });
+    }, [columnId, api]);
+    return {
+        qlGroup,
+        operatorDefs,
+        columnFilter,
+        column,
+        handleGroupChange,
+        handleClear,
+    };
+};

package/src/View/Filter/FilterForm/ListBoxFilterForm.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import { isEqual } from 'date-fns';
+import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
+import join from '../../../components/utils/join';
+import { toDisplayValueDefault, toDisplayValueFromOptionTree, } from '../../../components/Tree/TreeDropdown';
+import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
+import { isInFilterFunctionToken } from '../../../aql/columnFilterQl';
+import { useMemo } from 'react';
+import { GridFilterCombobox } from '../../../components/Combobox';
+import { isEmbeddedColumnFilterLocation, useColumnFilterLocation, } from '../ColumnFilter/columnFilterLocation';
+import { useAdaptable } from '../../AdaptableContext';
+import { GridFilterTreeDropdown } from '../../../components/Tree/TreeDropdown';
+const baseClassName = 'ab-ListBoxFilterForm';
+function toDateDisplayValue(values) {
+    values = values.map((v) => {
+        if (!Array.isArray(v)) {
+            return v;
+        }
+        return v[v.length - 1];
+    });
+    return toDisplayValueDefault(values);
+}
+const dateOnChangeParser = (value) => {
+    return value.map((v) => {
+        return v[v.length - 1];
+    });
+};
+const EMPTY_ARRAY = [];
+export const ColumnValuesSelect = (props) => {
+    const location = useColumnFilterLocation();
+    const adaptable = useAdaptable();
+    const column = props.column;
+    let selectedColumnValues = props.value || EMPTY_ARRAY;
+    const rawOptionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
+    const lookupItems = adaptable?.api.filterApi.columnFilterApi.internalApi.getRememberedLazyInFilterValues(column.columnId) ?? EMPTY_ARRAY;
+    const optionsFromProps = useMemo(() => {
+        if (rawOptionsFromProps === EMPTY_ARRAY) {
+            return rawOptionsFromProps;
+        }
+        let hasNullOrEmpty = false;
+        for (const option of rawOptionsFromProps) {
+            if (StringExtensions.IsNullOrEmpty(option?.value)) {
+                hasNullOrEmpty = true;
+                break;
+            }
+        }
+        if (!hasNullOrEmpty) {
+            return rawOptionsFromProps;
+        }
+        return rawOptionsFromProps.filter((option) => !StringExtensions.IsNullOrEmpty(option?.value));
+    }, [rawOptionsFromProps]);
+    const value = [];
+    const dateOptions = useMemo(() => {
+        if (column.dataType !== 'date') {
+            return optionsFromProps;
+        }
+        const convert = (option) => {
+            const value = option?.value;
+            const nextValue = value instanceof Date ? value.toISOString() : value;
+            const children = Array.isArray(option?.children)
+                ? option.children.map(convert)
+                : option?.children;
+            if (nextValue === value && children === option?.children) {
+                return option;
+            }
+            return { ...option, value: nextValue, children };
+        };
+        return optionsFromProps.map(convert);
+    }, [column.dataType, optionsFromProps]);
+    if (column.dataType === 'date') {
+        const valueToPath = useMemo(() => {
+            const valueToPath = new Map();
+            const withOption = (option, parentPath = []) => {
+                const optionPath = [...parentPath, option.value];
+                valueToPath.set(option.value, optionPath);
+                if (Array.isArray(option.children)) {
+                    option.children.forEach((child) => withOption(child, optionPath));
+                }
+            };
+            dateOptions.forEach((option) => withOption(option, []));
+            return valueToPath;
+        }, [dateOptions]);
+        selectedColumnValues = selectedColumnValues
+            .map((v) => {
+            const key = v instanceof Date ? v.toISOString() : v;
+            return valueToPath.get(key);
+        })
+            .filter(Boolean);
+    }
+    const options = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN
+        ? dateOptions
+        : optionsFromProps;
+    if (column.dataType !== 'date' && column.columnId !== AG_GRID_GROUPED_COLUMN) {
+        for (const selected of selectedColumnValues) {
+            if (options.some((option) => option.value === selected)) {
+                value.push(selected);
+                continue;
+            }
+            const dateOption = options.find((option) => option.value instanceof Date &&
+                isEqual(parseDateValue(selected), parseDateValue(option.value)));
+            value.push(dateOption ? dateOption.value : selected);
+        }
+    }
+    const labelByValue = React.useMemo(() => {
+        const map = new Map();
+        const walk = (opts) => opts?.forEach((option) => {
+            if (!option) {
+                return;
+            }
+            map.set(option.value, option.label);
+            if (Array.isArray(option.children)) {
+                walk(option.children);
+            }
+        });
+        walk(optionsFromProps);
+        return map;
+    }, [optionsFromProps]);
+    const treeDropdownToDisplayValue = React.useMemo(() => {
+        if (column.dataType === 'date') {
+            return (paths) => toDateDisplayValue(paths.map((path) => {
+                const last = Array.isArray(path) ? path[path.length - 1] : path;
+                return isInFilterFunctionToken(last) ? labelByValue.get(last) ?? last : path;
+            }));
+        }
+        return (paths) => toDisplayValueFromOptionTree(paths, optionsFromProps);
+    }, [column.dataType, optionsFromProps, labelByValue]);
+    const selectProps = (props.selectProps || {});
+    const onOpenChange = props.onMenuOpen
+        ? (open) => {
+            if (open) {
+                props.onMenuOpen?.();
+            }
+        }
+        : undefined;
+    const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (_jsx(GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, renderInputValues: selectProps.renderInputValues, resizable: true, onValueChange: column.dataType === 'date'
+            ? (value) => props.onChange(dateOnChangeParser(value))
+            : props.onChange, items: options, value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, lookupItems: lookupItems, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
+    return (_jsx("div", { className: join(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
+            if (e.key === 'Tab') {
+                e.stopPropagation();
+                return;
+            }
+            const event = e.nativeEvent || e;
+            event.stopPropagation = () => {
+            };
+        }, children: component }));
+};

package/src/View/Filter/FilterViewPanel.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as React from 'react';
-import { ActiveFiltersPanel } from './ActiveFiltersPanel';
 import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
-import { AdaptablePopover } from '../AdaptablePopover';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
+import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { CheckBox } from '../../components/CheckBox';
 import { connect } from 'react-redux';
 import { getColumnFiltersSelector } from '../../Redux/ActionsReducers/LayoutRedux';
@@ -28,7 +27,7 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { children: [ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (_jsx(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [_jsx(ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), _jsx(ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), _jsx(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), _jsx(Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (_jsx(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === ACCESS_LEVEL_READ_ONLY ||
+        return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { children: [ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (_jsx(ButtonEdit, { className: `ab-${elementType}__Filter__edit`, onClick: () => this.props.api.settingsPanelApi.openSettingsPanel('ColumnFilter'), tooltip: "Edit Column Filters", accessLevel: this.props.accessLevel })), _jsx(ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), _jsx(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), _jsx(Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (_jsx(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === ACCESS_LEVEL_READ_ONLY ||
                             this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                             checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                         }, children: "Filter Bar" })) })] }));

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

@@ -1,21 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
-import { Box, Flex } from '../../../components/Flex';
-import { Card } from '../../../components/Card';
-import { getRuleViewItems } from '../../../Utilities/getRuleViewItems';
-import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
+import { Flex } from '../../../components/Flex';
+import { getRuleViewItems } from '../../ObjectItemViews/getRuleViewItems';
+import { ExpressionTag } from '../../../components/Tag';
+import { CHANGE_EXPRESSION_FUNCTION_MENUS, ExpressionEditor, ExpressionUseCaseCard, } from '../../../components/aql/ExpressionEditor';
 export const renderFlashingAlertRulesSummary = (flashingAlert, api) => {
     const { values } = getRuleViewItems(flashingAlert.Rule, api);
-    return renderSummaryStringTags(values ?? ['No condition']);
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: (values ?? ['No condition']).map((item) => (_jsx(ExpressionTag, { children: item }, String(item)))) }));
+};
+const CHANGE_EDITOR_BUTTONS = [
+    {
+        functionName: 'ANY_CHANGE',
+        data: 'ANY_CHANGE()',
+        text: 'AnyChange',
+    },
+];
+const ChangeRuleEditor = (props) => {
+    const { api, moduleInfo } = useOnePageAdaptableWizardContext();
+    const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    return (_jsx(ExpressionUseCaseCard, { title: "Change Expression", description: _jsx(_Fragment, { children: "Build a boolean (true / false) rule that determines when cells should flash based on cell value changes (any / percent / absolute) or a value comparison." }), examplesKind: "relativeChange", children: _jsx(ExpressionEditor, { type: "scalar", module: moduleInfo.ModuleName, className: "twa:pl-0", value: props.data.Rule ?? '', onChange: (expression) => {
+                props.onChange({
+                    ...props.data,
+                    Rule: expression,
+                });
+            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: true, columnScope: props.data.Scope, extraEditorButtons: [...CHANGE_EDITOR_BUTTONS], extraFunctionMenus: CHANGE_EXPRESSION_FUNCTION_MENUS, suppressObservable: true, suppressTypeInfoCard: true, examplesKind: "relativeChange" }) }));
+};
+const ObservableRuleEditor = (props) => {
+    const { api, moduleInfo } = useOnePageAdaptableWizardContext();
+    const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    return (_jsx(ExpressionUseCaseCard, { title: "Observable Expression", description: _jsx(_Fragment, { children: "Build a boolean (true / false) Expression over change history or time. Cells flash when the Expression turns true and are re-evaluated as time windows expire." }), examplesKind: "observable", children: _jsx(ExpressionEditor, { type: "scalar", scalarVariant: "observable", module: moduleInfo.ModuleName, className: "twa:pl-0", value: props.data.Rule ?? '', onChange: (expression) => {
+                props.onChange({
+                    ...props.data,
+                    Rule: expression,
+                });
+            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: false, columnScope: props.data.Scope, suppressTypeInfoCard: true, examplesKind: "observable" }) }));
 };
 export const FlashingAlertRulesWizardSection = (props) => {
-    const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
-    const predicateDefs = api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Rule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build the rule that determines when cells should flash on a data change" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
-                            selectPredicate: 'Select a Flashing Cell Rule - to be applied when data changes',
-                            useBooleanQuery: (_jsxs(_Fragment, { children: ["Use an BooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
-                            useObservableQuery: (_jsxs(_Fragment, { children: ["Use an ObservableQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
-                            useAggregationQuery: (_jsxs(_Fragment, { children: ["Use an AggregatedBooleanQuery if ", _jsx("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
-                        } }) })] }) }));
+    const { data } = useOnePageAdaptableWizardContext();
+    const flashingType = data.Type ?? 'Change';
+    if (flashingType === 'Observable') {
+        return _jsx(ObservableRuleEditor, { data: data, onChange: props.onChange });
+    }
+    return _jsx(ChangeRuleEditor, { data: data, onChange: props.onChange });
 };

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
-import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi
@@ -15,17 +14,6 @@ export const FlashingAlertScopeWizardSection = (props) => {
                         dataTypeScope: 'Changes in columns with these Data Types will trigger a Flashing Cell',
                     }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
                         const newData = { ...data, Scope };
-                        if (newData.Rule.Predicates) {
-                            const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
-                            newData.Rule = {
-                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                                    if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
-                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                                    }
-                                    return true;
-                                }),
-                            };
-                        }
                         props.onChange(newData);
                     } }) })] }));
 };

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

@@ -24,7 +24,7 @@ const FLASH_STYLE_CARDS = [
 export const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
     flashingAlert = flashingAlert ?? props.flashingAlert;
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), _jsx(Card.Body, { children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), _jsx(Card.Body, { children: _jsx(StyleComponent, { headless: true, api: api, previewText: title, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
 export const renderFlashingAlertStyleSummary = (flashingAlert) => {
     return _jsx(FlashingCellStyle, { data: flashingAlert });

package/src/View/FlashingCell/Wizard/FlashingCellTypeWizardSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { FlashingCellType } from '../../../AdaptableState/FlashingCellState';
+type FlashingCellTypeWizardSectionProps = {
+    onTypeChange: (type: FlashingCellType) => void;
+    type: FlashingCellType;
+};
+export declare const renderFlashingCellTypeSummary: (type: FlashingCellType) => React.JSX.Element;
+export declare const FlashingCellTypeWizardSection: (props: FlashingCellTypeWizardSectionProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex } from '../../../components/Flex';
+import { Tag } from '../../../components/Tag';
+import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
+import { WizardTypeSelectionCard, WizardTypeSelectionPreviewFrame, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
+const FLASHING_CELL_TYPE_OPTIONS = [
+    {
+        type: 'Change',
+        label: 'Change',
+        description: 'Flash when a cell value changes — any amount, a percent or absolute amount, or a value comparison',
+        expressionExample: 'ANY_CHANGE([price])',
+    },
+    {
+        type: 'Observable',
+        label: 'Observable',
+        description: 'Flash from how a value has changed over time — counts, moves, highs and lows, previous values',
+        expressionExample: 'CHANGE_COUNT{[price], WITHIN(5m)} > 3',
+    },
+];
+const FLASHING_CELL_TYPE_COUNT = FLASHING_CELL_TYPE_OPTIONS.length;
+export const renderFlashingCellTypeSummary = (type) => {
+    const label = FLASHING_CELL_TYPE_OPTIONS.find((option) => option.type === type)?.label ?? type;
+    return (_jsxs(SummaryText, { children: ["Type ", _jsx(Tag, { children: label })] }));
+};
+export const FlashingCellTypeWizardSection = (props) => {
+    return (_jsx(Flex, { flexDirection: "column", "data-name": "flashing-cell-type", className: "twa:h-full twa:min-h-0 twa:p-2", children: _jsx(WizardTypeSelectionSection, { headingId: "flashing-cell-type-heading", title: "Flashing Cell Type", dataName: "flashing-cell-type-grid", columns: 2, intro: _jsxs(_Fragment, { children: ["Click a card to choose one of ", FLASHING_CELL_TYPE_COUNT, " Flashing Cell types"] }), children: FLASHING_CELL_TYPE_OPTIONS.map((option) => (_jsx(WizardTypeSelectionCard, { label: option.label, description: option.description, selected: props.type === option.type, dataName: `flashing-cell-type-${option.type}`, minHeightClassName: "twa:min-h-[148px]", onSelect: () => props.onTypeChange(option.type), footer: _jsx(WizardTypeSelectionPreviewFrame, { children: _jsx(Box, { as: "code", className: "ab-CodeBlock twa:block twa:w-full twa:truncate twa:bg-transparent twa:p-0 twa:font-mono twa:text-2 twa:leading-snug twa:text-foreground twa:opacity-90", children: option.expressionExample }) }) }, option.type))) }) }));
+};

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

@@ -13,28 +13,47 @@ import { useDispatch } from 'react-redux';
 import { isValidFlashingCellRules } from './isValidFlashingCellRules';
 import * as FlashingCellRedux from '../../../Redux/ActionsReducers/FlashingCellRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { isLayoutExtensionInfoWizardSectionVisible, LayoutExtensionInfoWizardSection, renderLayoutExtensionInfoSummary, useLayoutExtensionInfoState, } from '../../Wizard/LayoutExtensionInfoWizardSection';
 import { Box } from '../../../components/Flex';
+import { FlashingCellTypeWizardSection, renderFlashingCellTypeSummary, } from './FlashingCellTypeWizardSection';
 export const FlashingCellWizard = (props) => {
     const { api } = useAdaptable();
     const [flashingCell, doSetFlashingCell] = useState(() => {
         let flashingCell = props.data
             ? cloneObject(props.data)
             : ObjectFactory.CreateEmptyFlashingCellDefinition();
+        if (flashingCell.Type == null) {
+            flashingCell.Type = 'Change';
+        }
         flashingCell =
             api.flashingCellApi.internalApi.mergeFlashingCellDefinitionWithDefaults(flashingCell);
-        if (!flashingCell.Rule.BooleanExpression && !flashingCell.Rule?.Predicates?.length) {
-            flashingCell.Rule.BooleanExpression = '';
-        }
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
+            const columnId = props.popupParams.column.columnId;
             flashingCell.Scope = {
-                ColumnIds: [props.popupParams.column.columnId],
+                ColumnIds: [columnId],
             };
+            if (!flashingCell.Rule) {
+                flashingCell.Type = 'Change';
+                flashingCell.Rule = `ANY_CHANGE([${columnId}])`;
+            }
         }
         return flashingCell;
     });
     const setFlashingCell = useCallback((data) => {
         doSetFlashingCell(data);
     }, []);
+    const handleTypeChange = (type) => {
+        doSetFlashingCell((current) => {
+            if (current.Type === type) {
+                return current;
+            }
+            return {
+                ...current,
+                Type: type,
+                Rule: '',
+            };
+        });
+    };
     const updateProperty = (propName) => {
         return (value) => {
             doSetFlashingCell((flashingCell) => {
@@ -48,6 +67,7 @@ export const FlashingCellWizard = (props) => {
         UpChangeStyle: useCallback(updateProperty('UpChangeStyle'), []),
         NeutralChangeStyle: useCallback(updateProperty('NeutralChangeStyle'), []),
     };
+    const layoutExtensionInfo = useLayoutExtensionInfoState('FlashingCell', props.data);
     const dispatch = useDispatch();
     const handleFinish = () => {
         if (props.data) {
@@ -56,9 +76,19 @@ export const FlashingCellWizard = (props) => {
         else {
             dispatch(FlashingCellRedux.FlashingCellDefinitionAdd(flashingCell));
         }
+        layoutExtensionInfo.applyLayoutExtensionInfo(flashingCell);
         props.onFinishWizard(flashingCell);
     };
-    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const flashingType = flashingCell.Type ?? 'Change';
+    const isEdit = Boolean(props.data);
+    const defaultCurrentSectionName = props.defaultCurrentSectionName ?? (isEdit ? 'Rule' : undefined);
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                details: 'Choose whether the flash reacts to a Change or an Observable Expression',
+                render: () => (_jsx(FlashingCellTypeWizardSection, { type: flashingType, onTypeChange: handleTypeChange })),
+                renderSummary: () => renderFlashingCellTypeSummary(flashingType),
+                title: 'Type',
+            },
             {
                 details: 'Set Name, Duration and Target Properties',
                 isValid: isSettingsValid,
@@ -74,7 +104,9 @@ export const FlashingCellWizard = (props) => {
                 title: 'Columns',
             },
             {
-                details: 'Build the Rules for when Cells should Flash',
+                details: flashingType === 'Observable'
+                    ? 'Build an Observable Expression for when Cells should Flash'
+                    : 'Build the Change Expression for when Cells should Flash',
                 isValid: isValidFlashingCellRules,
                 render: () => _jsx(FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderFlashingAlertRulesSummary,
@@ -95,6 +127,13 @@ export const FlashingCellWizard = (props) => {
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setFlashingCell }) })),
                 renderSummary: renderObjectTagsSummary,
             },
+            {
+                details: 'Select the Layouts where this Flashing Cell is available',
+                title: 'Layouts',
+                isVisible: (_, api) => isLayoutExtensionInfoWizardSectionVisible(api),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(LayoutExtensionInfoWizardSection, { layoutNames: layoutExtensionInfo.layoutNames, onChange: layoutExtensionInfo.setLayoutNames }) })),
+                renderSummary: () => renderLayoutExtensionInfoSummary(layoutExtensionInfo.layoutNames),
+            },
             '-',
             {
                 details: 'Review the Flashing Cell Rule',

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

@@ -1,9 +1,9 @@
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 export const isValidFlashingCellRules = (flashingCell, api, context) => {
-    if (!flashingCell.Rule?.Predicates?.length && !flashingCell.Rule.BooleanExpression) {
+    if (!flashingCell.Rule?.trim()) {
         return 'A rule is required for the Flashing Cell.';
     }
-    const isRuleValid = isAdaptableRuleValid(flashingCell, api, context);
+    const isRuleValid = isAdaptableRuleValid(flashingCell, api, context, 'scalar');
     if (typeof isRuleValid === 'string') {
         return isRuleValid;
     }