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

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

@@ -19,42 +19,34 @@ const AlertScopeWizardSection = (props) => {
         disableDataTypes = false;
         disableColumns = false;
     }
-    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, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
-                rowScope: 'Changes in any Column in the row will trigger an Alert',
-                columnScope: 'Changes in selected Columns will trigger an Alert',
-                dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
-            }, scope: data.Scope, updateScope: (Scope) => {
-                const newData = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                if (newData.Rule.ObservableExpression !== undefined &&
-                    !api.columnScopeApi.scopeIsAll(Scope)) {
-                    // if it had observable expression and the scope is changed to partial
-                    // we need to reset to not be an observable expression, as observable is not supported
-                    // for partial scope
-                    delete newData.Rule.ObservableExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
-                    !api.columnScopeApi.scopeIsAll(Scope)) {
-                    // if it had aggregation expression and the scope is changed to partial
-                    // we need to reset to not be an aggregation expression, as aggregation is not supported
-                    // for partial scope
-                    delete newData.Rule.AggregatedBooleanExpression;
-                    newData.Rule.BooleanExpression = '';
-                }
-                props.onChange(newData);
-            } }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which columns should trigger the Alert" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
+                        rowScope: 'Changes in any Column in the row will trigger an Alert',
+                        columnScope: 'Changes in selected Columns will trigger an Alert',
+                        dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
+                    }, scope: data.Scope, updateScope: (Scope) => {
+                        const newData = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        if (newData.Rule.ObservableExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.ObservableExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.AggregatedBooleanExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };
 exports.AlertScopeWizardSection = AlertScopeWizardSection;

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

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Tabs_1 = require("../../../components/Tabs");
 const getAlertType_1 = require("../Utilities/getAlertType");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const Card_1 = require("../../../components/Card");
 const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -38,6 +37,6 @@ const AlertTypeWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "alert-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Alert Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Scheduled), description: "A reminder fires at a date and time you choose", checked: props.alertType === getAlertType_1.AlertType.Scheduled, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Scheduled) })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Alert" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "alert-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Alert Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Alert should fire" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Scheduled), description: "A reminder fires at a date and time you choose", checked: props.alertType === getAlertType_1.AlertType.Scheduled, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Scheduled) })] }) })] })] }));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

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

@@ -5,13 +5,11 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const renderCalculatedColumnDefinitionSummary = (data) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Identifier:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId }) }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Name:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
 };
@@ -27,7 +25,7 @@ const isValidCalculatedColumnDefinition = (data, api) => {
 };
 exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
 const CalculatedColumnDefinitionWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const handleColumnIdChange = (event) => {
         let e = event.target;
         props.onChange({
@@ -43,8 +41,6 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
         });
     };
     const inEdit = props.isEdit;
-    const validCheck = (0, exports.isValidCalculatedColumnDefinition)(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
     const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
     const ColumnName = data.FriendlyName;
     const ColumnId = data.ColumnId;
@@ -58,12 +54,12 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": 'calculated-column-definition', children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Details" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                                setColumnNameFocused(true);
-                                            }, onBlur: () => {
-                                                setColumnNameFocused(false);
-                                            }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header Tooltip", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
-                                                HeaderToolTip: e.target.value,
-                                            }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] }) }) })] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: ErrorMessage }) : null] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": 'calculated-column-definition', children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Unique identifier for the Calculated Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', className: "twa:max-w-[500px] twa:w-full", autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Header" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Display name shown in the Column Header (Name used if not provided)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+                                    setColumnNameFocused(true);
+                                }, onBlur: () => {
+                                    setColumnNameFocused(false);
+                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', className: "twa:max-w-[500px] twa:w-full", type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Header Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional text shown when hovering over the Column Header" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", className: "twa:max-w-[500px] twa:w-full", value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                    HeaderToolTip: e.target.value,
+                                }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Tooltip" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Show the Expression as a tooltip when hovering over each cell" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] })] }) }));
 };
 exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;

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

@@ -5,10 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const Tabs_1 = require("../../../components/Tabs");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../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 '';
+    }
+};
 const renderCalculatedColumnExpressionSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
@@ -39,8 +53,6 @@ const CalculatedColumnExpressionWizardSection = (props) => {
             CalculatedColumnSettings: {
                 ...data.CalculatedColumnSettings,
                 DataType: dataType,
-                //  Pivotable,
-                //  Aggregatable,
             },
         });
     };
@@ -55,17 +67,18 @@ const CalculatedColumnExpressionWizardSection = (props) => {
         }
     };
     const columns = api.columnApi.internalApi.getQueryableColumnsForUIEditor();
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, height: "100%", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: (0, StringExtensions_1.Humanize)(props.expressionType) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (() => {
-                    switch (props.expressionType) {
-                        case 'ScalarExpression':
-                            return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.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 ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                })() })] }));
+    const expressionEditor = (() => {
+        switch (props.expressionType) {
+            case 'ScalarExpression':
+                return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.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 ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: (0, StringExtensions_1.Humanize)(props.expressionType) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: getExpressionTypeDescription(props.expressionType) })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: expressionEditor })] }) }));
 };
 exports.CalculatedColumnExpressionWizardSection = CalculatedColumnExpressionWizardSection;

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

@@ -6,15 +6,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Tabs_1 = require("../../../components/Tabs");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const getCalculatedColumnSettingsTags_1 = require("../Utilities/getCalculatedColumnSettingsTags");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
 const renderCalculatedColumnSettingsSummary = (data) => {
     const options = (0, getCalculatedColumnSettingsTags_1.getCalculatedColumnSettingsTags)(data.CalculatedColumnSettings);
     return (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: options });
@@ -22,7 +20,7 @@ const renderCalculatedColumnSettingsSummary = (data) => {
 exports.renderCalculatedColumnSettingsSummary = renderCalculatedColumnSettingsSummary;
 const isValidCalculatedColumnSettings = (data) => {
     if (!data.CalculatedColumnSettings?.DataType) {
-        return 'A data type is required. It could not be inferred from the expression.';
+        return 'Please select a data type (could not be inferred from the expression)';
     }
     return true;
 };
@@ -70,10 +68,10 @@ const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Data Type", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Width", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                                Width: Number(e.target.value),
-                                            }) }) })] }) }) })] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: ErrorMessage }) : null, (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
-                // @ts-ignore CalculatedColumn has a broader DataType
-                settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Data Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-error", children: ErrorMessage })) : null] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Width" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                    Width: Number(e.target.value),
+                                }) }) })] }), (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
+                    // @ts-ignore CalculatedColumn has a broader DataType
+                    settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
 };
 exports.CalculatedColumnSettingsWizardSection = CalculatedColumnSettingsWizardSection;

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnTypeWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Tabs_1 = require("../../../components/Tabs");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const CalculatedColumnTypeWizardSection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Calculated Column Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Calculated Column Type" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }) }));
 };
 exports.CalculatedColumnTypeWizardSection = CalculatedColumnTypeWizardSection;

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -59,7 +59,7 @@ class CellSummaryViewPanelComponent extends React.Component {
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
             }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:items-center twa:gap-1", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
                                     'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
-                                    'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
+                                    'twa:flex-1 twa:text-primary-foreground twa:justify-center': isToolbar,
                                 }), children: operationValue }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })] }) })] }));
     }
     checkSelectedCells() {

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const PreviewChartSection_1 = require("./PreviewChartSection");
 const SettingsSection_1 = require("./SettingsSection");
 const ObjectTagsWizardSection_1 = require("../../../Wizard/ObjectTagsWizardSection");
 const Flex_1 = require("../../../../components/Flex");
@@ -21,10 +20,10 @@ const AgChargingWizard = (props) => {
     }, [chartDefinition]);
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Settings',
-                details: 'Chart Settings',
+                title: 'Chart',
+                details: 'Configure chart properties and preview the result',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition })),
             },
             {
                 details: 'Select Chart Tags',
@@ -33,12 +32,6 @@ const AgChargingWizard = (props) => {
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setChartDefinition }) })),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
-            '-',
-            {
-                title: 'Preview Chart',
-                details: 'Chart Preview',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
-            },
         ] }));
 };
 exports.AgChargingWizard = AgChargingWizard;

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

@@ -33,6 +33,6 @@ const PreviewChartSection = (props) => {
             });
         }
     }, [currentChartModels]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: divRef });
+    return (0, jsx_runtime_1.jsx)("div", { ref: divRef, className: "twa:min-h-[280px] twa:h-full twa:w-full" });
 };
 exports.PreviewChartSection = PreviewChartSection;

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

@@ -3,65 +3,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 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 FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const NewSelect_1 = require("../../../../components/NewSelect");
 const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
+const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const PreviewChartSection_1 = require("./PreviewChartSection");
 const isSettingsValid = (chartDefinition, api) => {
     return (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
+const AGG_FUNCS = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
 const SettingsSection = (props) => {
-    const handleNameChange = React.useCallback((event) => {
-        props.onChange({
-            ...props.chartDefinition,
-            Name: event.target.value,
-            Model: props.chartDefinition.Model,
-        });
-    }, [props.chartDefinition]);
-    const handleUnLinkChange = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                unlinkChart: !props.chartDefinition.Model.unlinkChart,
-            },
-        });
-    }, [props.chartDefinition]);
-    const handleSuppressChartRanges = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                suppressChartRanges: !props.chartDefinition.Model.suppressChartRanges,
-            },
-        });
-    }, [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 { chartDefinition, onChange } = props;
+    const aggFunc = chartDefinition.Model.aggFunc;
+    const showAggFunc = chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function';
+    const aggFuncsOptions = AGG_FUNCS.map((option) => ({
+        label: option,
+        value: option,
     }));
-    const aggFunc = props.chartDefinition.Model.aggFunc;
-    const handleAggFuncClear = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                aggFunc: '',
-            },
-        });
-    }, [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 ' }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the chart" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", onChange: (event) => onChange({
+                                ...chartDefinition,
+                                Name: event.target.value,
+                                Model: chartDefinition.Model,
+                            }), value: chartDefinition.Name ?? '', placeholder: "Enter chart name" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Unlink Chart" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "When enabled, the chart is not linked to the grid data range" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "unlink-chart", checked: chartDefinition.Model.unlinkChart, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    unlinkChart: checked,
+                                },
+                            }), children: "Unlink from data" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Suppress Chart Ranges" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Hide chart range highlights on the grid while the chart is open" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppress-chart-ranges", checked: chartDefinition.Model.suppressChartRanges, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    suppressChartRanges: checked,
+                                },
+                            }), children: "Suppress chart ranges" }) })] }), showAggFunc ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Aggregation" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Aggregation function used for range charts" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "chart-agg-func", placeholder: "Select", className: "twa:max-w-[300px]", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: (value) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    aggFunc: value,
+                                },
+                            }) }) })] })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the chart \u2014 changes here are reflected in the chart model" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: (0, jsx_runtime_1.jsx)(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: onChange }) })] })] }));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.js

@@ -7,25 +7,6 @@ const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const SettingsSection_1 = require("./SettingsSection");
-const Flex_1 = require("../../../../components/Flex");
-const PreviewChartSection = ({ chartDefinition }) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const divRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!divRef.current) {
-            return;
-        }
-        const container = {
-            name: 'Preview Chart',
-            element: divRef.current,
-        };
-        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(chartDefinition, container);
-        return () => {
-            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
-        };
-    }, [divRef]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: divRef });
-};
 const ExternalChartingWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const onPreviewChart = adaptable.api.optionsApi.getChartingOptions().externalChartingOptions?.onPreviewChart;
@@ -38,19 +19,11 @@ const ExternalChartingWizard = (props) => {
     };
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Settings',
-                details: 'Chart Settings',
+                title: 'Chart',
+                details: 'Configure chart properties and preview the result',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition, showPreview: Boolean(onPreviewChart) })),
             },
-            onPreviewChart
-                ? {
-                    title: 'Preview Chart',
-                    render: () => {
-                        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(PreviewChartSection, { chartDefinition: chartDefinition }) }));
-                    },
-                }
-                : null,
-        ].filter(Boolean) }));
+        ] }));
 };
 exports.ExternalChartingWizard = ExternalChartingWizard;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/PreviewChartSection.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
+export declare const PreviewChartSection: React.FunctionComponent<{
+    chartDefinition: ExternalChartDefinition;
+}>;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/PreviewChartSection.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewChartSection = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PreviewChartSection = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!divRef.current) {
+            return;
+        }
+        const container = {
+            name: 'Preview Chart',
+            element: divRef.current,
+        };
+        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(props.chartDefinition, container);
+        return () => {
+            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
+        };
+    }, [divRef]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: divRef, className: "twa:min-h-[280px] twa:h-full twa:w-full" });
+};
+exports.PreviewChartSection = PreviewChartSection;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.d.ts

@@ -5,5 +5,6 @@ export declare const isSettingsValid: (chartDefinition: ExternalChartDefinition,
 export interface SettingsSectionProps {
     chartDefinition: ExternalChartDefinition;
     onChange: (chartDefinition: ExternalChartDefinition) => void;
+    showPreview?: boolean;
 }
 export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;