@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

package/src/View/Alert/Wizard/AlertWizard.js

@@ -18,6 +18,7 @@ import { useDispatch } from 'react-redux';
 import * as AlertRedux from '../../../Redux/ActionsReducers/AlertRedux';
 import { useAdaptable } from '../../AdaptableContext';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { isLayoutExtensionInfoWizardSectionVisible, LayoutExtensionInfoWizardSection, renderLayoutExtensionInfoSummary, useLayoutExtensionInfoState, } from '../../Wizard/LayoutExtensionInfoWizardSection';
 import { AlertTypeWizardSection, renderAlertTypeSummary, isSettingsValid, } from './AlertTypeWizardSection';
 import { AlertType, getAlertType } from '../Utilities/getAlertType';
 import { mapAlertDefinition } from '../Utilities/mapAlertDefinition';
@@ -33,16 +34,12 @@ export const AlertWizard = (props) => {
         const alertDefinition = props.data
             ? cloneObject(props.data)
             : ObjectFactory.CreateEmptyAlertDefinition();
-        const initialType = getAlertType(alertDefinition);
+        const initialType = getAlertType(alertDefinition) ?? AlertType.DataChange;
+        alertDefinition.Type = initialType;
         if (initialType !== AlertType.Scheduled &&
             'Rule' in alertDefinition &&
-            !alertDefinition.Rule.BooleanExpression &&
-            !alertDefinition.Rule.ObservableExpression &&
-            !alertDefinition.Rule.AggregatedBooleanExpression &&
-            !alertDefinition.Rule.Predicates) {
-            alertDefinition.Rule = {
-                BooleanExpression: '',
-            };
+            typeof alertDefinition.Rule !== 'string') {
+            alertDefinition.Rule = '';
         }
         if (props.popupParams?.column &&
             props.popupParams?.action === 'New' &&
@@ -57,9 +54,8 @@ export const AlertWizard = (props) => {
     const setAlertDefinition = useCallback((data) => {
         doSetAlertDefinition(data);
     }, []);
-    const [alertType, setAlertType] = useState(() => {
-        return getAlertType(alertDefinition) ?? AlertType.DataChange;
-    });
+    const alertType = alertDefinition.Type ?? getAlertType(alertDefinition) ?? AlertType.DataChange;
+    const layoutExtensionInfo = useLayoutExtensionInfoState('Alert', props.data);
     const handleFinish = () => {
         if (props.data) {
             dispatch(AlertRedux.AlertDefinitionEdit(alertDefinition));
@@ -67,13 +63,13 @@ export const AlertWizard = (props) => {
         else {
             dispatch(AlertRedux.AlertDefinitionAdd(alertDefinition));
         }
+        layoutExtensionInfo.applyLayoutExtensionInfo(alertDefinition);
         props.onCloseWizard();
     };
     const updateAlertDefinition = useCallback((newAlertDefinition) => {
         doSetAlertDefinition(mapAlertDefinition(api, newAlertDefinition));
     }, [api]);
     const handleAlertTypeChange = (newAlertType) => {
-        setAlertType(newAlertType);
         doSetAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
     };
     const defaultEditSectionName = React.useMemo(() => {
@@ -100,7 +96,9 @@ export const AlertWizard = (props) => {
             },
             {
                 title: 'Trigger',
-                isVisible: () => alertType === AlertType.DataChange || alertType == AlertType.Validation,
+                isVisible: () => alertType === AlertType.DataChange ||
+                    alertType === AlertType.RelativeChange ||
+                    alertType === AlertType.Validation,
                 details: (_jsx(_Fragment, { children: "Specify which columns should trigger the Alert" })),
                 isValid: (data) => isRuleBasedAlertDefinition(data) ? isScopeValid(data) : true,
                 render: () => (_jsx(AlertScopeWizardSection, { alertType: alertType, onChange: setAlertDefinition })),
@@ -140,6 +138,13 @@ export const AlertWizard = (props) => {
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setAlertDefinition }) })),
                 renderSummary: renderObjectTagsSummary,
             },
+            {
+                details: 'Select the Layouts where this Alert is available',
+                title: 'Layouts',
+                isVisible: () => isLayoutExtensionInfoWizardSectionVisible(api),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(LayoutExtensionInfoWizardSection, { layoutNames: layoutExtensionInfo.layoutNames, onChange: layoutExtensionInfo.setLayoutNames }) })),
+                renderSummary: () => renderLayoutExtensionInfoSummary(layoutExtensionInfo.layoutNames),
+            },
             '-',
             {
                 details: 'Review your Alert',

package/src/View/Alert/Wizard/isValidAlertRules.js

@@ -1,16 +1,21 @@
+import { expressionKindForAlertType, isRowChangeAlertDefinition, } from '../../../AdaptableState/AlertState';
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 import { isScheduledAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
 export const isValidAlertRules = (alert, api, context) => {
     if (isScheduledAlertDefinition(alert)) {
         return true;
     }
-    if (!alert.Rule.Predicates?.length &&
-        !alert.Rule.BooleanExpression &&
-        !alert.Rule.ObservableExpression &&
-        !alert.Rule.AggregatedBooleanExpression) {
+    if (isRowChangeAlertDefinition(alert)) {
+        if (!alert.Rule?.trim()) {
+            return true;
+        }
+        const isConditionValid = isAdaptableRuleValid(alert, api, context, 'scalar');
+        return typeof isConditionValid === 'string' ? isConditionValid : true;
+    }
+    if (!alert.Rule?.trim()) {
         return 'A rule is required for the Alert.';
     }
-    const isRuleValid = isAdaptableRuleValid(alert, api, context);
+    const isRuleValid = isAdaptableRuleValid(alert, api, context, expressionKindForAlertType(alert.Type));
     if (typeof isRuleValid === 'string') {
         return isRuleValid;
     }

package/src/View/BulkUpdate/BulkUpdatePopup.d.ts

@@ -20,8 +20,10 @@ export interface BulkUpdatePopupState {
     useSelector: boolean;
 }
 declare class BulkUpdatePopupComponent extends React.Component<BulkUpdatePopupProps, BulkUpdatePopupState> {
+    private cleanupEvent?;
     constructor(props: BulkUpdatePopupProps);
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): React.JSX.Element;
     private onColumnValueSelectedChanged;
     private onUseColumnValuesSelectorChanged;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -1,18 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
-import { PanelWithImage } from '../Components/Panels/PanelWithImage';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
-import { BulkUpdateValueSelector } from '../Components/Selectors/BulkUpdateValueSelector';
+import { BulkUpdateValueSelector } from './BulkUpdateValueSelector';
 import SimpleButton from '../../components/SimpleButton';
-import HelpBlock from '../../components/HelpBlock';
+import EmptyContent from '../../components/EmptyContent';
 import { Flex } from '../../components/Flex';
 class BulkUpdatePopupComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
         this.state = { isShowingError: false, errorText: '', useSelector: false };
@@ -20,6 +21,13 @@ class BulkUpdatePopupComponent extends React.Component {
     componentDidMount() {
         this.props.onBulkUpdateValueChange('');
         this.props.onBulkUpdateCheckSelectedCells();
+        const adaptable = this.props.api.internalApi.getAdaptableInstance();
+        this.cleanupEvent = adaptable?._on('CellsSelected', () => {
+            this.props.onBulkUpdateCheckSelectedCells();
+        });
+    }
+    componentWillUnmount() {
+        this.cleanupEvent?.();
     }
     render() {
         let col = this.props.BulkUpdateValidationResult.Column;
@@ -34,22 +42,20 @@ class BulkUpdatePopupComponent extends React.Component {
             }
         }
         let globalValidationMessage = PreviewHelper.GetValidationMessage(this.props.PreviewInfo, this.props.BulkUpdateValue);
-        let showPanel = this.props.PreviewInfo &&
-            StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
-            StringExtensions.IsNotNullOrEmpty(globalValidationMessage);
+        let showPanel = this.props.PreviewInfo != null && this.props.PreviewInfo.previewResults.length > 0;
         let previewPanel = showPanel ? (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
         if (!col) {
-            return null;
+            const message = this.props.BulkUpdateValidationResult.Alert?.message ??
+                'Select one or more cells in a single editable column to continue.';
+            return (_jsx(PopupPanel, { bodyClassName: "twa:p-2", glyphicon: this.props.moduleInfo.Glyph, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsx(EmptyContent, { children: message }) }));
         }
-        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-2' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
-                                        this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
-                                        this.onApplyClick();
-                                    }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
-                                        this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
-                                        hasDataTypeError, variant: "raised", tone: "accent", onClick: () => {
-                                        this.onApplyClick();
-                                    }, children: "Apply Bulk Update" }), ' ', hasDataTypeError && (_jsx(AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })), StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
-                                    this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))] })] })), previewPanel] }));
+        const applyDisabled = StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
+            hasDataTypeError;
+        return (_jsx(PopupPanel, { bodyClassName: "twa:flex twa:flex-col", glyphicon: this.props.moduleInfo.Glyph, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0 twa:gap-4 twa:p-2", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:shrink-0 twa:w-full twa:max-w-[640px]", children: [_jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), placeholder: "Select an existing Column value, or enter a new value", className: "twa:w-full twa:max-w-[inherit] twa:flex-1 twa:min-w-0" }), hasDataTypeError && (_jsx(AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })), StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
+                                this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' })), _jsx(SimpleButton, { disabled: applyDisabled, onClick: () => {
+                                    this.onApplyClick();
+                                }, variant: "raised", tone: "accent", className: "twa:shrink-0", children: "Apply Bulk Update" })] }), previewPanel] }) }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/BulkUpdate/BulkUpdateValueSelector.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { GridCell } from '../../types';
+export interface BulkUpdateValueSelectorProps {
+    selectedColumn: AdaptableColumn;
+    selectedColumnValue: string;
+    onColumnValueChange: (columnvalue: any) => void;
+    api: AdaptableApi;
+    allowNew?: boolean;
+    style?: React.CSSProperties;
+    newLabel?: string;
+    existingLabel?: string;
+    selectedGridCells: GridCell[];
+    disabled?: boolean;
+    className?: string;
+    /** Placeholder for the value selector. @defaultValue 'Select value' */
+    placeholder?: string;
+}
+export declare const BulkUpdateValueSelector: (props: BulkUpdateValueSelectorProps) => React.JSX.Element;

package/src/View/BulkUpdate/BulkUpdateValueSelector.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback } from 'react';
+import UIHelper from '../../Utilities/Helpers/UIHelper';
+import AdaptableInput from '../Components/AdaptableInput';
+import { PermittedValuesSelector } from '../Components/Selectors/PermittedValuesSelector';
+import { useAdaptable } from '../AdaptableContext';
+import { Box, Flex } from '../../components/Flex';
+import { Icon } from '../../components/icons';
+import { InputGroup } from '../../components/InputGroup';
+import { NewDropdownButton } from '../../components/DropdownButton';
+import { cn } from '../../lib/utils';
+export const BulkUpdateValueSelector = (props) => {
+    const [valueType, setValueType] = React.useState('existing');
+    const adaptable = useAdaptable();
+    const columnDataType = props.selectedColumn?.dataType;
+    const isDateType = props.selectedColumn && columnDataType === 'date';
+    const columnId = props.selectedColumn?.columnId;
+    const permittedValueSelector = (_jsx(Box, { className: 'twa:flex-1', children: _jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: props.placeholder ?? 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
+                if (!columnId || !props.selectedGridCells.length) {
+                    return Promise.resolve([]);
+                }
+                return adaptable.api.gridApi.internalApi.getDistinctEditDisplayValuesForColumn({
+                    columnId,
+                    gridCell: props.selectedGridCells[0],
+                    currentSearchValue,
+                });
+            }, [
+                columnId,
+                props.selectedGridCells?.[0]?.column.columnId,
+                props.selectedGridCells?.[0]?.primaryKeyValue,
+            ]), onChange: (value) => {
+                props.onColumnValueChange(value || null);
+            } }) }));
+    const input = (_jsx(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
+            ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
+            : 'text', placeholder: props.selectedColumn
+            ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
+            : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
+            props.onColumnValueChange(e.target.value);
+        } }));
+    return (_jsx(Flex, { className: cn('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+                            { label: 'New', icon: _jsx(Icon, { name: "edit" }), onClick: () => setValueType('new') },
+                            {
+                                label: 'Existing',
+                                icon: _jsx(Icon, { name: "grid" }),
+                                onClick: () => setValueType('existing'),
+                            },
+                        ], children: _jsx(_Fragment, { children: valueType === 'existing' ? _jsx(Icon, { name: "grid" }) : _jsx(Icon, { name: "edit" }) }) }), valueType === 'new' ? input : permittedValueSelector] }) })) : (permittedValueSelector) }));
+};

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { StatusColour } from '../../AdaptableState/Common/Enums';
-import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import { BulkUpdateValueSelector } from '../Components/Selectors/BulkUpdateValueSelector';
+import { BulkUpdateValueSelector } from './BulkUpdateValueSelector';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { ButtonApply } from '../Components/Buttons/ButtonApply';
-import { AdaptablePopover } from '../AdaptablePopover';
-import { UIHelper } from '../UIHelper';
+import SimpleButton from '../../components/SimpleButton';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
 import { connect } from 'react-redux';
@@ -38,7 +36,6 @@ class BulkUpdateViewPanelComponent extends React.Component {
     render() {
         let statusColour = this.getStatusColour();
         let selectedColumn = this.props.BulkUpdateValidationResult.Column;
-        let previewPanel = (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
         const valueSelectorDisabled = this.props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY ||
             !this.props.BulkUpdateValidationResult.IsValid ||
             this.props.api.layoutApi.isCurrentLayoutPivot();
@@ -52,15 +49,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
         };
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-        const messageStyle = UIHelper.getMessageTypeByStatusColour(statusColour);
-        const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
         return (_jsxs(Flex, { className: cn(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
                 'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
             }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [_jsx(Flex, { className: cn('twa:flex-1', {
                         'twa:min-w-[100px]': !isToolbar,
                         'twa:min-w-0': isToolbar,
-                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
+                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(SimpleButton, { className: `ab-${elementType}__BulkUpdate__preview`, variant: "text", icon: "visibility-on", tooltip: "Preview Results", onClick: () => this.props.api.settingsPanelApi.openSettingsPanel('BulkUpdate'), disabled: valueSelectorDisabled, accessLevel: this.props.accessLevel })] })] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingsTags.js

@@ -1,8 +1,9 @@
 export const getCalculatedColumnSettingsTags = (settings) => {
-    const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings ?? {};
+    const { DataType, CellDataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, } = settings ?? {};
     const colTypes = settings?.ColumnTypes ? settings.ColumnTypes.join(', ') : '';
     return [
         DataType ? `DataType: ${DataType}` : null,
+        CellDataType ? `Cell Data Type: ${CellDataType}` : null,
         Width ? `Width: ${Width}px` : null,
         Pivotable ? 'Pivotable' : null,
         Filterable ? 'Filterable' : null,

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { CalculatedColumn } from '../../../AdaptableState/CalculatedColumnState';
+import { CalculatedColumn, CalculatedColumnType } from '../../../AdaptableState/CalculatedColumnState';
 export type CalculatedColumnDefinitionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;
 };
-export declare const renderCalculatedColumnDefinitionSummary: (data: CalculatedColumn) => React.JSX.Element;
+export declare const renderCalculatedColumnDefinitionSummary: (data: CalculatedColumn, api: AdaptableApi, calculatedColumnType?: CalculatedColumnType) => React.JSX.Element;
 export declare const isValidCalculatedColumnDefinition: (data: CalculatedColumn, api: AdaptableApi) => true | string;
 export declare const CalculatedColumnDefinitionWizardSection: (props: CalculatedColumnDefinitionWizardSectionProps) => React.JSX.Element;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { getCalculatedColumnType, } from '../../../AdaptableState/CalculatedColumnState';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import Input from '../../../components/Input';
 import { CheckBox } from '../../../components/CheckBox';
-import { Tag } from '../../../components/Tag';
+import { ExpressionTag, Tag } from '../../../components/Tag';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-export const renderCalculatedColumnDefinitionSummary = (data) => {
-    return (_jsxs(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [_jsx(Box, { children: "Column Identifier:" }), _jsx(Box, { children: _jsx(Tag, { children: data.ColumnId }) }), data.FriendlyName ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "Column Name:" }), _jsx(Box, { children: _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
+export const renderCalculatedColumnDefinitionSummary = (data, api, calculatedColumnType) => {
+    const type = calculatedColumnType ?? getCalculatedColumnType(data);
+    const expression = api.internalApi.getAdaptableQueryExpressionText(data.Expression);
+    return (_jsxs(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [_jsx(Box, { children: "Type:" }), _jsx(Box, { children: _jsx(Tag, { children: type }) }), _jsx(Box, { children: "Column Identifier:" }), _jsx(Box, { children: _jsx(Tag, { children: data.ColumnId }) }), data.FriendlyName ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "Column Name:" }), _jsx(Box, { children: _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null, _jsx(Box, { children: "Expression:" }), _jsx(Box, { children: _jsx(ExpressionTag, { children: expression }) })] }));
 };
 export const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.d.ts

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { CalculatedColumn } from '../../../types';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { type ExpressionType } from './calculatedColumnTypes';
+import { type CalculatedColumnType } from './calculatedColumnTypes';
 export type CalculatedColumnExpressionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
-    expressionType: ExpressionType;
+    calculatedColumnType: CalculatedColumnType;
+    /**
+     * Switches the wizard's type card (used by the "Switch to Observable" hint
+     * shown under the Standard editor when the expression uses observable
+     * functions). Optional: without it the hint is not rendered.
+     */
+    onCalculatedColumnTypeChange?: (type: CalculatedColumnType) => void;
 };
-export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const OBSERVABLE_EXPRESSION_REQUIRED_MESSAGE = "An Observable Calculated Column must use at least one observable function (e.g. CHANGE_COUNT, NET_CHANGE, PREVIOUS, ROW_AGE). For a plain per-row value choose the Standard type.";
 export declare const isValidCalculatedColumnExpression: (data: CalculatedColumn, api: AdaptableApi) => true | string;
 export declare const CalculatedColumnExpressionWizardSection: (props: CalculatedColumnExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -1,77 +1,125 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { ExpressionEvaluationError } from "../../../../vendor/aql/index.js";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { ExpressionEditor } from '../../../components/ExpressionEditor';
-import { CodeBlock } from '../../../components/CodeBlock';
-import { Humanize } from '../../../Utilities/Extensions/StringExtensions';
-import { Box, Flex } from '../../../components/Flex';
-import { Card } from '../../../components/Card';
-const getExpressionTypeDescription = (expressionType) => {
-    switch (expressionType) {
-        case 'ScalarExpression':
-            return 'Define an expression using values from other cells in each row';
-        case 'AggregatedScalarExpression':
-            return 'Define an expression using aggregated values from other rows';
-        case 'CumulativeAggregatedExpression':
-            return 'Define a cumulative expression using values from other rows';
-        case 'QuantileAggregatedExpression':
-            return 'Define a quantile expression using values from other rows';
-        default:
-            return '';
+import { ExpressionEditor, ExpressionUseCaseCard, } from '../../../components/aql/ExpressionEditor';
+import HelpBlock from '../../../components/HelpBlock';
+import SimpleButton from '../../../components/SimpleButton';
+import { expressionContainsObservableCall, getCalculatedColumnType, isPerRowCalculatedColumnType, } from './calculatedColumnTypes';
+export const OBSERVABLE_EXPRESSION_REQUIRED_MESSAGE = 'An Observable Calculated Column must use at least one observable function (e.g. CHANGE_COUNT, NET_CHANGE, PREVIOUS, ROW_AGE). For a plain per-row value choose the Standard type.';
+const getTypeTitle = (type) => {
+    switch (type) {
+        case 'Standard':
+            return 'Standard Expression';
+        case 'Observable':
+            return 'Observable Expression';
+        case 'Aggregated':
+            return 'Aggregated Expression';
+        case 'Cumulative':
+            return 'Cumulative Expression';
+        case 'Quantile':
+            return 'Quantile Expression';
+        case 'Window':
+            return 'Window Expression';
     }
 };
-export const renderCalculatedColumnExpressionSummary = (data, api) => {
-    return (_jsxs(Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', _jsx(CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
+const getTypeDescription = (type) => {
+    switch (type) {
+        case 'Standard':
+            return (_jsxs(_Fragment, { children: ["Build an Expression that returns a value for each row from other cells in that row. The result can be any type (number, text, date, boolean, \u2026). For values over the row's change history choose the ", _jsx("b", { children: "Observable" }), " type."] }));
+        case 'Observable':
+            return (_jsxs(_Fragment, { children: ["Build an Expression whose value comes from the row's ", _jsx("b", { children: "change history" }), " \u2014 how often a cell ticked, how far it moved, its high / low / previous value, or how long the row has been in the grid. The column refreshes on data changes and as time windows expire."] }));
+        case 'Aggregated':
+            return (_jsxs(_Fragment, { children: ["Build an Expression that returns a value for each row from ", _jsx("b", { children: "aggregated" }), " column data across multiple rows (e.g. SUM, AVG). Optionally add WHERE to include only matching rows."] }));
+        case 'Cumulative':
+            return (_jsxs(_Fragment, { children: ["Build an Expression that returns a ", _jsx("b", { children: "running" }), " (cumulative) aggregation ordered by another column (OVER), optionally within groups."] }));
+        case 'Quantile':
+            return (_jsxs(_Fragment, { children: ["Build an Expression that places each row into a ", _jsx("b", { children: "quantile" }), " (or percentile) bucket based on a numeric column across rows, optionally within groups."] }));
+        case 'Window':
+            return (_jsxs(_Fragment, { children: ["Build an Expression that reads values from an ", _jsx("b", { children: "ordered series" }), " of rows (previous, next, first, last, or rank) using OVER (and optional GROUP_BY)."] }));
+    }
+};
+const getExamplesKind = (type) => {
+    switch (type) {
+        case 'Standard':
+            return 'standard';
+        case 'Observable':
+            return 'observableValue';
+        case 'Aggregated':
+            return 'aggregatedScalar';
+        case 'Cumulative':
+            return 'cumulative';
+        case 'Quantile':
+            return 'quantile';
+        case 'Window':
+            return 'window';
+    }
+};
+const getEditorType = (type) => {
+    switch (type) {
+        case 'Standard':
+        case 'Observable':
+            return 'scalar';
+        case 'Aggregated':
+            return 'aggregatedScalar';
+        case 'Cumulative':
+            return 'cumulativeAggregatedScalar';
+        case 'Quantile':
+            return 'quantileAggregatedScalar';
+        case 'Window':
+            return 'windowAggregatedScalar';
+    }
 };
 export const isValidCalculatedColumnExpression = (data, api) => {
     const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
-    const expression = api.expressionApi.getAdaptableQueryExpression(data.Query)?.trim();
+    const expression = data.Expression?.trim();
     if (!expression) {
-        return 'An expression is required for the Calculated Column.';
+        return 'An Expression is required for the Calculated Column.';
+    }
+    if (data.ColumnId) {
+        try {
+            api.internalApi
+                .getQueryLanguageService()
+                .validateCircularCalculatedColumnReferences(expression, data.ColumnId);
+        }
+        catch (error) {
+            if (error instanceof ExpressionEvaluationError) {
+                return `${error.expressionFnName}${error.message}`;
+            }
+            return 'The Calculated Column expression is not valid.';
+        }
     }
-    const isValid = calculatedColumnExpressionService.isCalculatedColumnQueryValid(data.Query);
+    const isValid = calculatedColumnExpressionService.isCalculatedColumnQueryValid(data, data.ColumnId);
     if (!isValid) {
         return 'The Calculated Column expression is not valid.';
     }
+    if (getCalculatedColumnType(data) === 'Observable' &&
+        !expressionContainsObservableCall(expression)) {
+        return OBSERVABLE_EXPRESSION_REQUIRED_MESSAGE;
+    }
     return true;
 };
 export const CalculatedColumnExpressionWizardSection = (props) => {
     const { api, data, moduleInfo } = useOnePageAdaptableWizardContext();
     const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
-    const setCalculatedColumnExpression = (calculatedColumnQuery) => {
+    const setCalculatedColumnExpression = (expression) => {
         const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
-        const dataType = calculatedColumnExpressionService.getCalculatedColumnDataType(calculatedColumnQuery);
+        const nextData = { ...data, Expression: expression };
+        const dataType = calculatedColumnExpressionService.getCalculatedColumnDataType(nextData);
         props.onChange({
-            ...data,
-            Query: calculatedColumnQuery,
+            ...nextData,
             CalculatedColumnSettings: {
                 ...data.CalculatedColumnSettings,
                 DataType: dataType,
             },
         });
     };
-    const getEditorType = (expressionType) => {
-        switch (expressionType) {
-            case 'AggregatedScalarExpression':
-                return 'aggregatedScalar';
-            case 'CumulativeAggregatedExpression':
-                return 'cumulativeAggregatedScalar';
-            case 'QuantileAggregatedExpression':
-                return 'quantileAggregatedScalar';
-        }
-    };
     const columns = api.columnApi.internalApi.getQueryableColumnsForUIEditor();
-    const expressionEditor = (() => {
-        switch (props.expressionType) {
-            case 'ScalarExpression':
-                return (_jsx(ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
-            case 'AggregatedScalarExpression':
-            case 'CumulativeAggregatedExpression':
-            case 'QuantileAggregatedExpression':
-                return (_jsx(ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
-            default:
-                return null;
-        }
-    })();
-    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: Humanize(props.expressionType) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: getExpressionTypeDescription(props.expressionType) })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: expressionEditor })] }) }));
+    const editorType = getEditorType(props.calculatedColumnType);
+    const isPerRow = isPerRowCalculatedColumnType(props.calculatedColumnType);
+    const isObservable = props.calculatedColumnType === 'Observable';
+    const showObservableHint = props.calculatedColumnType === 'Standard' &&
+        props.onCalculatedColumnTypeChange != null &&
+        expressionContainsObservableCall(data.Expression);
+    return (_jsxs(ExpressionUseCaseCard, { title: getTypeTitle(props.calculatedColumnType), description: getTypeDescription(props.calculatedColumnType), examplesKind: getExamplesKind(props.calculatedColumnType), children: [_jsx(ExpressionEditor, { type: editorType, scalarVariant: isObservable ? 'observable' : undefined, module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Expression ?? '', onChange: (expression) => setCalculatedColumnExpression(expression), initialData: initialData, columns: columns, fields: isPerRow ? api.expressionApi.internalApi.getAvailableFields() : undefined, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api, suppressTypeInfoCard: true, examplesKind: getExamplesKind(props.calculatedColumnType) }), showObservableHint ? (_jsxs(HelpBlock, { "data-name": "calculated-column-observable-hint", className: "twa:mt-2 twa:flex twa:items-center twa:gap-2 twa:text-3", children: [_jsx("span", { children: "This Expression uses observable (live) functions." }), _jsx(SimpleButton, { variant: "outlined", "data-name": "calculated-column-switch-to-observable", onClick: () => props.onCalculatedColumnTypeChange?.('Observable'), children: "Switch to Observable" })] })) : null] }));
 };