@adaptabletools/adaptable-cjs 22.1.0 → 22.1.1-canary.0

package/src/View/Filter/FilterViewPanel.js

@@ -11,6 +11,7 @@ const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
 const CheckBox_1 = require("../../components/CheckBox");
 const react_redux_1 = require("react-redux");
 const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const Flex_1 = require("../../components/Flex");
@@ -35,7 +36,7 @@ class FilterViewPanelComponent extends React.Component {
                 ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
                 React.createElement(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
                 React.createElement(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
-            React.createElement(Flex_1.Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === 'ReadOnly' ||
+            React.createElement(Flex_1.Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
                     this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                 } }, "Filter Bar")))));

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -8,6 +8,7 @@ const clamp_1 = tslib_1.__importDefault(require("../../../Utilities/utils/clamp"
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableFormatPresets_1 = require("../../../AdaptableState/Common/AdaptableFormatPresets");
 const CheckBox_1 = require("../../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
@@ -26,56 +27,6 @@ const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/Docum
 const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
-const DOLLAR_OPTIONS = {
-    FractionDigits: 2,
-    FractionSeparator: '.',
-    IntegerDigits: undefined,
-    IntegerSeparator: ',',
-    Prefix: '$',
-    Suffix: '',
-    Multiplier: 1,
-    Parentheses: false,
-};
-const STERLING_OPTIONS = {
-    FractionDigits: 2,
-    FractionSeparator: '.',
-    IntegerDigits: undefined,
-    IntegerSeparator: ',',
-    Prefix: '£',
-    Suffix: '',
-    Multiplier: 1,
-    Parentheses: false,
-};
-const MILLION_OPTIONS = {
-    FractionDigits: undefined,
-    FractionSeparator: '.',
-    IntegerDigits: undefined,
-    IntegerSeparator: ',',
-    Prefix: '',
-    Suffix: 'M',
-    Multiplier: 0.000001,
-    Parentheses: false,
-};
-const THOUSAND_OPTIONS = {
-    FractionDigits: undefined,
-    FractionSeparator: '.',
-    IntegerDigits: undefined,
-    IntegerSeparator: ',',
-    Prefix: '',
-    Suffix: 'K',
-    Multiplier: 0.001,
-    Parentheses: false,
-};
-const PERCENT_OPTIONS = {
-    FractionDigits: 2,
-    FractionSeparator: '.',
-    IntegerDigits: undefined,
-    IntegerSeparator: ',',
-    Prefix: '',
-    Suffix: '%',
-    Multiplier: 100,
-    Parentheses: false,
-};
 const DateFormatPresets = [
     'MM/dd/yyyy',
     'dd-MM-yyyy',
@@ -87,34 +38,38 @@ const DateFormatPresets = [
 ];
 const getFormatColumnFormatSummaryValue = (data) => {
     let content = 'N/A';
-    if (!data.DisplayFormat) {
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
+    if (!resolved) {
         content = 'N/A';
     }
     else {
-        if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options);
+        if (resolved.Formatter === 'NumberFormatter') {
+            content = FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options);
         }
-        if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
+        if (resolved.Formatter === 'DateFormatter') {
+            content = FormatHelper_1.default.DateFormatter(new Date(), resolved.Options);
         }
-        if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, data.DisplayFormat.Options);
+        if (resolved.Formatter === 'StringFormatter') {
+            content = FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options);
         }
     }
     return content;
 };
 exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
-const renderCustomFormatter = (data, customFormatter, setFormatOption) => (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: customFormatter.label ?? customFormatter.id },
-    React.createElement(CheckBox_1.CheckBox, { "data-name": customFormatter.id, checked: data.DisplayFormat.Options.CustomDisplayFormats?.some?.((item) => item === customFormatter.id), onChange: (checked) => {
-            let newCustomFormats = data?.DisplayFormat?.Options?.CustomDisplayFormats ?? [];
-            if (checked) {
-                newCustomFormats = [...newCustomFormats, customFormatter.id];
-            }
-            else {
-                newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
-            }
-            setFormatOption('CustomDisplayFormats', newCustomFormats);
-        } })));
+const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
+    return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: customFormatter.label ?? customFormatter.id },
+        React.createElement(CheckBox_1.CheckBox, { "data-name": customFormatter.id, checked: resolved?.Options.CustomDisplayFormats?.some?.((item) => item === customFormatter.id), onChange: (checked) => {
+                let newCustomFormats = resolved?.Options?.CustomDisplayFormats ?? [];
+                if (checked) {
+                    newCustomFormats = [...newCustomFormats, customFormatter.id];
+                }
+                else {
+                    newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
+                }
+                setFormatOption('CustomDisplayFormats', newCustomFormats);
+            } })));
+};
 const renderFormatColumnFormatSummary = (data) => {
     return React.createElement(Tag_1.Tag, null, (0, exports.getFormatColumnFormatSummaryValue)(data));
 };
@@ -216,7 +171,8 @@ const getFormatDisplayTypeForScope = (scope, api) => {
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
-    if (data.DisplayFormat.Formatter !== 'DateFormatter') {
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
+    if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
     return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
@@ -230,9 +186,9 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ")."),
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
-                        React.createElement(Input_1.default, { "data-name": "pattern", value: data.DisplayFormat.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }),
-                        React.createElement("span", null, data.DisplayFormat.Options.Pattern &&
-                            FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
+                        React.createElement(Input_1.default, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }),
+                        React.createElement("span", null, resolved.Options.Pattern &&
+                            FormatHelper_1.default.DateFormatter(new Date(), resolved.Options, true)))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -258,128 +214,113 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
-    if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
+    if (resolved?.Formatter !== 'NumberFormatter') {
         return null;
     }
-    const setPercentPreset = () => {
-        onChange({
-            DisplayFormat: {
-                Formatter: 'NumberFormatter',
-                Options: PERCENT_OPTIONS,
-            },
-        });
-    };
-    const setDivideThousandPreset = () => {
-        onChange({
-            DisplayFormat: {
-                Formatter: 'NumberFormatter',
-                Options: THOUSAND_OPTIONS,
-            },
-        });
-    };
-    const setDivideMillionPreset = () => {
-        onChange({
-            DisplayFormat: {
-                Formatter: 'NumberFormatter',
-                Options: MILLION_OPTIONS,
-            },
-        });
-    };
-    const setDollarPreset = () => {
-        onChange({
-            DisplayFormat: {
-                Formatter: 'NumberFormatter',
-                Options: DOLLAR_OPTIONS,
-            },
-        });
-    };
-    const setSterlingPreset = () => {
-        onChange({
-            DisplayFormat: {
-                Formatter: 'NumberFormatter',
-                Options: STERLING_OPTIONS,
-            },
-        });
+    // A preset is now stored as a bare string ('Percentage', 'Dollar', ...)
+    // — selecting a preset just writes the name. The active preset is
+    // therefore a simple string comparison instead of the old fragile
+    // suffix/multiplier heuristic.
+    const setPreset = (preset) => {
+        onChange({ DisplayFormat: preset });
     };
-    const IS_PERCENT = data.DisplayFormat.Options.Suffix === '%' &&
-        data.DisplayFormat.Options.Multiplier === PERCENT_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, PERCENT_OPTIONS);
-    const IS_THOUSAND = data.DisplayFormat.Options.Suffix === 'K' &&
-        data.DisplayFormat.Options.Multiplier === THOUSAND_OPTIONS.Multiplier; // isEqual(data.DisplayFormat.Options, THOUSAND_OPTIONS);
-    const IS_MILLION = data.DisplayFormat.Options.Suffix === 'M' &&
-        data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
-    const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
-    const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
+    const activePreset = (0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat) ? data.DisplayFormat : undefined;
+    const IS_PERCENT = activePreset === 'Percentage';
+    const IS_THOUSAND = activePreset === 'Thousand';
+    const IS_MILLION = activePreset === 'Million';
+    const IS_BILLION = activePreset === 'Billion';
+    const IS_BASIS_POINTS = activePreset === 'BasisPoints';
+    const IS_DOLLAR = activePreset === 'Dollar';
+    const IS_STERLING = activePreset === 'Sterling';
+    const IS_EURO = activePreset === 'Euro';
+    const IS_YEN = activePreset === 'Yen';
+    const IS_BITCOIN = activePreset === 'Bitcoin';
+    const IS_INTEGER = activePreset === 'Integer';
+    const IS_DECIMAL = activePreset === 'Decimal';
+    const IS_ACCOUNTING = activePreset === 'Accounting';
+    const IS_FX_RATE = activePreset === 'FXRate';
+    const IS_SCIENTIFIC = activePreset === 'Scientific';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(Flex_1.Box, { "data-name": 'format-column-display-format', className: "twa:p-2" },
-        React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:m-2" },
+                    React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6" },
+                        React.createElement(Radio_1.default, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar') }, "Dollar"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling') }, "Sterling"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro') }, "Euro"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen') }, "Yen")),
+                    React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6" },
+                        React.createElement(Radio_1.default, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand') }, "K (Thousand)"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million') }, "M (Million)"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion') }, "B (Billion)"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints') }, "bps (Basis Pts)")),
+                    React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6" },
+                        React.createElement(Radio_1.default, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer') }, "Integer"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal') }, "Decimal"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage') }, "Percentage"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific') }, "Scientific")),
+                    React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                        React.createElement(Radio_1.default, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting') }, "Accounting"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate') }, "FX Rate"),
+                        React.createElement(Radio_1.default, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin') }, "Bitcoin"))))),
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Flex_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { className: "twa:mr-3" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }),
-                            ' '),
-                        React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "ceiling-checkbox", checked: data.DisplayFormat.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
-                        ' ',
-                        React.createElement(FormLayout_1.FormRow, { label: "Absolute" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "abs-checkbox", checked: data.DisplayFormat.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }))),
-                    React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-digits", type: "number", min: "0", 
-                                // max="20"
-                                value: typeof data.DisplayFormat.Options.FractionDigits === 'number'
-                                    ? data.DisplayFormat.Options.FractionDigits
+                            React.createElement(Input_1.default, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
+                                    ? resolved.Options.FractionDigits
                                     : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
                                     ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Digits" },
-                            React.createElement(Input_1.default, { "data-name": "integer-digits", type: "number", min: "0", value: data.DisplayFormat.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
+                            React.createElement(Input_1.default, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
                                     ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
+                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
+                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Multiplier" },
-                            React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
-                        ' ',
+                            React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }))),
+                    React.createElement(FormLayout_1.default, { className: "twa:mr-3" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
+                            React.createElement(Input_1.default, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
+                            React.createElement(Input_1.default, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Floor" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: data.DisplayFormat.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Round" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Empty" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }))),
+                    React.createElement(FormLayout_1.default, null,
+                        React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Round" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Floor" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Absolute" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Scientific" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Flex_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "Select a preset for common use cases"),
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { className: "twa:m-2" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Show As:" },
-                            React.createElement(Radio_1.default, { "data-name": "preset-percentage", className: "twa:ml-2", checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-thousand", className: "twa:ml-3", checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-million", className: "twa:ml-3", checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-dollar", className: "twa:ml-3", checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-sterling", className: "twa:ml-3", checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
         React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Dynamic Content"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "Provide dynamic content through the use of Placeholders"),
                 React.createElement(FormLayout_1.default, { className: "twa:m-2" },
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
                         showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
                             React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
                             "Learn more about using placeholders"))),
@@ -394,27 +335,28 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options),
+                            Content: FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '-' + GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(-GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options),
+                            Content: FormatHelper_1.default.NumberFormatter(-GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '0.123', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(0.123, data.DisplayFormat.Options),
+                            Content: FormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
                             Size: 1,
                         },
                     ] })))));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
-    if (data.DisplayFormat.Formatter !== 'StringFormatter') {
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
+    if (resolved?.Formatter !== 'StringFormatter') {
         return null;
     }
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
@@ -425,23 +367,23 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                 React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center" },
                     React.createElement("label", null, "Case:"),
                     React.createElement(Toggle_1.ToggleGroup, null,
-                        React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                        React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                        React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                    React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
+                        React.createElement(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
+                        React.createElement(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
+                        React.createElement(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
+                    React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
                 React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2" },
                     React.createElement("label", null, "Prefix"),
-                    React.createElement(Input_1.default, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                    React.createElement(Input_1.default, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                 React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2" },
                     React.createElement("label", null, "Suffix"),
-                    React.createElement(Input_1.default, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                    React.createElement(Input_1.default, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                 React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2" },
                     React.createElement("label", null, "Content"),
-                    React.createElement(Textarea_1.default, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                    React.createElement(Textarea_1.default, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
                     showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
                         React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
                         "See how to create dynamic Display Format using placeholders"))),
-                React.createElement(CheckBox_1.CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
+                React.createElement(CheckBox_1.CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
         scopedCustomFormatters.length > 0 && (React.createElement(Card_1.Card, { shadow: false },
             React.createElement(Card_1.Card.Title, null, "Custom Formats"),
             React.createElement(Card_1.Card.Body, null,
@@ -458,7 +400,7 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                         { Content: '"' + GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
                         {
                             Content: '"' +
-                                FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, data.DisplayFormat.Options) +
+                                FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
                                 '"',
                             Size: 1,
                         },
@@ -473,12 +415,26 @@ const FormatColumnFormatWizardSection = (props) => {
         props.onChange({ ...data, ...updated });
     };
     const setFormatOption = (key, value) => {
-        const DisplayFormat = { ...data.DisplayFormat };
-        // @ts-ignore
-        DisplayFormat.Options = { ...DisplayFormat.Options, [key]: value };
+        // If the user is currently on a preset (e.g. 'Dollar'), materialise
+        // it into a concrete AdaptableFormat *before* applying the edit so
+        // that tweaking any field "forks" the preset into a bespoke format.
+        const current = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
+        if (!current)
+            return;
+        // The cast is safe: we copy `current.Formatter` and merge into
+        // `current.Options`, so the discriminant and the Options shape
+        // are always kept in sync — TypeScript just can't correlate the
+        // two ends of the discriminated union across a generic merge.
+        const DisplayFormat = {
+            Formatter: current.Formatter,
+            Options: { ...current.Options, [key]: value },
+        };
         update({ DisplayFormat });
     };
-    const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
+    // A preset string is logically a NumberFormatter for this routing.
+    const Type = (0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat)
+        ? 'NumberFormatter'
+        : data.DisplayFormat && data.DisplayFormat.Formatter;
     const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.columnScopeApi.isScopeInScope(data.Scope, displayFormatter.scope));
     if (Type === 'NumberFormatter') {
         return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -22,6 +22,7 @@ const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
 const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
 const constants_1 = require("./constants");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
+const AdaptableFormatPresets_1 = require("../../../AdaptableState/Common/AdaptableFormatPresets");
 const Flex_1 = require("../../../components/Flex");
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
@@ -45,22 +46,26 @@ const adjustDisplayFormat = (fc, api) => {
     if (!formatDataType && formatColumn.DisplayFormat) {
         formatColumn.DisplayFormat = undefined;
     }
-    if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'NumberFormatter') &&
-        formatDataType === 'number') {
+    // For shape-detection purposes a numeric preset name is equivalent to a
+    // NumberFormatter. We only need to materialise an object literal when
+    // there is no DisplayFormat at all (or the existing one targets a
+    // different Formatter type to the new scope).
+    const resolvedFormatter = (0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(formatColumn.DisplayFormat)
+        ? 'NumberFormatter'
+        : formatColumn.DisplayFormat?.Formatter;
+    if (resolvedFormatter !== 'NumberFormatter' && formatDataType === 'number') {
         formatColumn.DisplayFormat = {
             Formatter: 'NumberFormatter',
             Options: {},
         };
     }
-    if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'DateFormatter') &&
-        formatDataType === 'date') {
+    if (resolvedFormatter !== 'DateFormatter' && formatDataType === 'date') {
         formatColumn.DisplayFormat = {
             Formatter: 'DateFormatter',
             Options: {},
         };
     }
-    if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'StringFormatter') &&
-        formatDataType === 'text') {
+    if (resolvedFormatter !== 'StringFormatter' && formatDataType === 'text') {
         formatColumn.DisplayFormat = {
             Formatter: 'StringFormatter',
             Options: {},
@@ -94,8 +99,15 @@ function FormatColumnWizard(props) {
     }, []);
     const dispatch = (0, react_redux_2.useDispatch)();
     const handleFinish = () => {
-        if (formatColumn?.DisplayFormat?.Options &&
-            (0, ObjectExtensions_1.isObjectEmpty)(formatColumn?.DisplayFormat?.Options)) {
+        // If the user opened the wizard, picked a Formatter type, but never
+        // touched any options (and didn't pick a preset), drop the empty
+        // DisplayFormat object so we don't persist an empty shell. Preset
+        // strings are always meaningful and should never be removed here.
+        const df = formatColumn?.DisplayFormat;
+        if (df &&
+            !(0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(df) &&
+            df.Options &&
+            (0, ObjectExtensions_1.isObjectEmpty)(df.Options)) {
             delete formatColumn.DisplayFormat;
         }
         if (formatColumn.Style && (0, ObjectExtensions_1.isObjectEmpty)(formatColumn.Style)) {

package/src/View/GridFilter/GridFilterPopupUI/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { NamedQuery, CachedQuery } from '../../../AdaptableState/NamedQueryState';
+import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 /**
  * Column item for the dropdown menu
  */
@@ -61,8 +62,8 @@ export interface GridFilterPopupUIProps {
     /** Called when setting the grid filter expression directly */
     onSetGridFilterExpression: (query: string) => void;
     /** Access level for grid filter operations */
-    gridFilterAccessLevel: 'ReadOnly' | 'Hidden' | 'Full';
+    gridFilterAccessLevel: AccessLevel;
     /** Access level for named query operations */
-    namedQueryAccessLevel: 'ReadOnly' | 'Hidden' | 'Full';
+    namedQueryAccessLevel: AccessLevel;
 }
 export declare const GridFilterPopupUI: (props: GridFilterPopupUIProps) => React.JSX.Element;

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -18,9 +18,10 @@ const ButtonUnsuspend_1 = require("../../Components/Buttons/ButtonUnsuspend");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const NamedQuerySelector_1 = require("./../NamedQuerySelector");
 const Flex_1 = require("../../../components/Flex");
+const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const GridFilterPopupUI = (props) => {
     const { expression, isExpressionValid, isExpressionNamedQuery, isSuspended, isReadOnly, availableColumns, namedQueries, cachedQueries, currentGridFilterExpression, headerText, glyphicon, infoLink, infoLinkDisabled, onExpressionChange, onRunQuery, onClearQuery, onSaveQuery, onSuspend, onUnsuspend, onExpand, onSelectNamedQuery, onSetGridFilterExpression, gridFilterAccessLevel, namedQueryAccessLevel, } = props;
-    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
+    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
             onRunQuery();

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -16,13 +16,14 @@ const NamedQuerySelector_1 = require("./NamedQuerySelector");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
 const Flex_1 = require("../../components/Flex");
 const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
         return null;
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
+    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
         const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
@@ -41,7 +42,7 @@ const QueryViewPanelComponent = (props) => {
     const hasActiveGridFilter = gridFilter != null && hasExpression;
     const hasNamedQueries = namedQueries && namedQueries.length > 0;
     const clearButton = hasExpression ? (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
-    const saveButton = hasExpression ? (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === 'ReadOnly' || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
     const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
     const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
     const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;