@adaptabletools/adaptable 22.1.0 → 22.1.1-canary.0

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

@@ -4,6 +4,7 @@ import clamp from '../../../Utilities/utils/clamp';
 import HelpBlock from '../../../components/HelpBlock';
 import Input from '../../../components/Input';
 import SimpleButton from '../../../components/SimpleButton';
+import { isAdaptableNumericFormatPreset, resolveDisplayFormat, } from '../../../AdaptableState/Common/AdaptableFormatPresets';
 import { CheckBox } from '../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
@@ -22,56 +23,6 @@ import { FormatColumnPlaceholderDocsLink } from '../../../Utilities/Constants/Do
 import { PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../../../AdaptableState/Common/AdaptableColumn';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../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',
@@ -83,33 +34,37 @@ const DateFormatPresets = [
 ];
 export const getFormatColumnFormatSummaryValue = (data) => {
     let content = 'N/A';
-    if (!data.DisplayFormat) {
+    const resolved = resolveDisplayFormat(data.DisplayFormat);
+    if (!resolved) {
         content = 'N/A';
     }
     else {
-        if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options);
+        if (resolved.Formatter === 'NumberFormatter') {
+            content = FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options);
         }
-        if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper.DateFormatter(new Date(), data.DisplayFormat.Options);
+        if (resolved.Formatter === 'DateFormatter') {
+            content = FormatHelper.DateFormatter(new Date(), resolved.Options);
         }
-        if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, data.DisplayFormat.Options);
+        if (resolved.Formatter === 'StringFormatter') {
+            content = FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options);
         }
     }
     return content;
 };
-const renderCustomFormatter = (data, customFormatter, setFormatOption) => (React.createElement(FormRow, { key: customFormatter.id, label: customFormatter.label ?? customFormatter.id },
-    React.createElement(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 = resolveDisplayFormat(data.DisplayFormat);
+    return (React.createElement(FormRow, { key: customFormatter.id, label: customFormatter.label ?? customFormatter.id },
+        React.createElement(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);
+            } })));
+};
 export const renderFormatColumnFormatSummary = (data) => {
     return React.createElement(Tag, null, getFormatColumnFormatSummaryValue(data));
 };
@@ -209,7 +164,8 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     return undefined;
 };
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
-    if (data.DisplayFormat.Formatter !== 'DateFormatter') {
+    const resolved = resolveDisplayFormat(data.DisplayFormat);
+    if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
     return (React.createElement(Box, { className: "twa:p-2" },
@@ -223,9 +179,9 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ")."),
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Pattern" },
-                        React.createElement(Input, { "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.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
+                        React.createElement(Input, { "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.DateFormatter(new Date(), resolved.Options, true)))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs.Content, null,
@@ -251,128 +207,113 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
-    if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
+    const resolved = 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 = 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(Box, { "data-name": 'format-column-display-format', className: "twa:p-2" },
-        React.createElement(Tabs, null,
+        React.createElement(Tabs, { autoFocus: false, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Presets"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row", className: "twa:m-2" },
+                    React.createElement(Flex, { flexDirection: "column", className: "twa:mr-6" },
+                        React.createElement(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar') }, "Dollar"),
+                        React.createElement(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling') }, "Sterling"),
+                        React.createElement(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro') }, "Euro"),
+                        React.createElement(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen') }, "Yen")),
+                    React.createElement(Flex, { flexDirection: "column", className: "twa:mr-6" },
+                        React.createElement(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand') }, "K (Thousand)"),
+                        React.createElement(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million') }, "M (Million)"),
+                        React.createElement(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion') }, "B (Billion)"),
+                        React.createElement(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints') }, "bps (Basis Pts)")),
+                    React.createElement(Flex, { flexDirection: "column", className: "twa:mr-6" },
+                        React.createElement(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer') }, "Integer"),
+                        React.createElement(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal') }, "Decimal"),
+                        React.createElement(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage') }, "Percentage"),
+                        React.createElement(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific') }, "Scientific")),
+                    React.createElement(Flex, { flexDirection: "column" },
+                        React.createElement(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting') }, "Accounting"),
+                        React.createElement(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate') }, "FX Rate"),
+                        React.createElement(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin') }, "Bitcoin"))))),
+        React.createElement(Tabs, { className: "twa:mt-2" },
             React.createElement(Tabs.Tab, null, "Format"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, { className: "twa:mr-3" },
-                        React.createElement(FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }),
-                            ' '),
-                        React.createElement(FormRow, { label: "Integer Separator" },
-                            React.createElement(Input, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Prefix" },
-                            React.createElement(Input, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Suffix" },
-                            React.createElement(Input, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        React.createElement(FormRow, { label: "Ceiling" },
-                            React.createElement(CheckBox, { "data-name": "ceiling-checkbox", checked: data.DisplayFormat.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
-                        ' ',
-                        React.createElement(FormRow, { label: "Absolute" },
-                            React.createElement(CheckBox, { "data-name": "abs-checkbox", checked: data.DisplayFormat.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }))),
-                    React.createElement(FormLayout, null,
                         React.createElement(FormRow, { label: "Fraction Digits" },
-                            React.createElement(Input, { "data-name": "fraction-digits", type: "number", min: "0", 
-                                // max="20"
-                                value: typeof data.DisplayFormat.Options.FractionDigits === 'number'
-                                    ? data.DisplayFormat.Options.FractionDigits
+                            React.createElement(Input, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
+                                    ? resolved.Options.FractionDigits
                                     : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                     ? clamp(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
                         React.createElement(FormRow, { label: "Integer Digits" },
-                            React.createElement(Input, { "data-name": "integer-digits", type: "number", min: "0", value: data.DisplayFormat.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                            React.createElement(Input, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                     ? clamp(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
+                        React.createElement(FormRow, { label: "Fraction Separator" },
+                            React.createElement(Input, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Integer Separator" },
+                            React.createElement(Input, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Multiplier" },
-                            React.createElement(Input, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
-                        ' ',
+                            React.createElement(Input, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }))),
+                    React.createElement(FormLayout, { className: "twa:mr-3" },
+                        React.createElement(FormRow, { label: "Prefix" },
+                            React.createElement(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Suffix" },
+                            React.createElement(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Parentheses" },
-                            React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
-                        React.createElement(FormRow, { label: "Floor" },
-                            React.createElement(CheckBox, { "data-name": "floor-checkbox", checked: data.DisplayFormat.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
-                        React.createElement(FormRow, { label: "Round" },
-                            React.createElement(CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
+                            React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormRow, { label: "Empty" },
-                            React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
+                            React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }))),
+                    React.createElement(FormLayout, null,
+                        React.createElement(FormRow, { label: "Truncate" },
+                            React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
+                        React.createElement(FormRow, { label: "Round" },
+                            React.createElement(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
+                        React.createElement(FormRow, { label: "Ceiling" },
+                            React.createElement(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
+                        React.createElement(FormRow, { label: "Floor" },
+                            React.createElement(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
+                        React.createElement(FormRow, { label: "Absolute" },
+                            React.createElement(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) })),
+                        React.createElement(FormRow, { label: "Scientific" },
+                            React.createElement(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Select a preset for common use cases"),
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { className: "twa:m-2" },
-                        React.createElement(FormRow, { label: "Show As:" },
-                            React.createElement(Radio, { "data-name": "preset-percentage", className: "twa:ml-2", checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
-                            React.createElement(Radio, { "data-name": "preset-thousand", className: "twa:ml-3", checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
-                            React.createElement(Radio, { "data-name": "preset-million", className: "twa:ml-3", checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
-                            React.createElement(Radio, { "data-name": "preset-dollar", className: "twa:ml-3", checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
-                            React.createElement(Radio, { "data-name": "preset-sterling", className: "twa:ml-3", checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
         React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Dynamic Content"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Provide dynamic content through the use of Placeholders"),
                 React.createElement(FormLayout, { className: "twa:m-2" },
                     React.createElement(FormRow, { label: "" },
-                        React.createElement(Textarea, { 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, { 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, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
                             React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
                             "Learn more about using placeholders"))),
@@ -387,27 +328,28 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                         {
-                            Content: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: '-' + DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                         {
-                            Content: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: '0.123', Size: 1 },
                         {
-                            Content: FormatHelper.NumberFormatter(0.123, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(0.123, resolved.Options),
                             Size: 1,
                         },
                     ] })))));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
-    if (data.DisplayFormat.Formatter !== 'StringFormatter') {
+    const resolved = resolveDisplayFormat(data.DisplayFormat);
+    if (resolved?.Formatter !== 'StringFormatter') {
         return null;
     }
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
@@ -418,23 +360,23 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                 React.createElement(Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center" },
                     React.createElement("label", null, "Case:"),
                     React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                        React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                        React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                    React.createElement(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
+                        React.createElement(Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
+                        React.createElement(Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
+                        React.createElement(Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
+                    React.createElement(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
                 React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2" },
                     React.createElement("label", null, "Prefix"),
-                    React.createElement(Input, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                    React.createElement(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                 React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2" },
                     React.createElement("label", null, "Suffix"),
-                    React.createElement(Input, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                    React.createElement(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                 React.createElement(Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2" },
                     React.createElement("label", null, "Content"),
-                    React.createElement(Textarea, { 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, { 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, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
                         React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
                         "See how to create dynamic Display Format using placeholders"))),
-                React.createElement(CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
+                React.createElement(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, { shadow: false },
             React.createElement(Card.Title, null, "Custom Formats"),
             React.createElement(Card.Body, null,
@@ -451,7 +393,7 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                         { Content: '"' + DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
                         {
                             Content: '"' +
-                                FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, data.DisplayFormat.Options) +
+                                FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
                                 '"',
                             Size: 1,
                         },
@@ -466,12 +408,26 @@ export 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 = 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 = 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

@@ -18,6 +18,7 @@ import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utiliti
 import { FormatColumnRuleWizardSection } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
+import { isAdaptableNumericFormatPreset, } from '../../../AdaptableState/Common/AdaptableFormatPresets';
 import { Box, Flex } from '../../../components/Flex';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
@@ -41,22 +42,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 = 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: {},
@@ -90,8 +95,15 @@ export function FormatColumnWizard(props) {
     }, []);
     const dispatch = useDispatch();
     const handleFinish = () => {
-        if (formatColumn?.DisplayFormat?.Options &&
-            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 &&
+            !isAdaptableNumericFormatPreset(df) &&
+            df.Options &&
+            isObjectEmpty(df.Options)) {
             delete formatColumn.DisplayFormat;
         }
         if (formatColumn.Style && 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

@@ -14,9 +14,10 @@ import { ButtonUnsuspend } from '../../Components/Buttons/ButtonUnsuspend';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { NamedQuerySelector } from './../NamedQuerySelector';
 import { Box, Flex } from '../../../components/Flex';
+import { ACCESS_LEVEL_READ_ONLY } from '../../../Utilities/Constants/GeneralConstants';
 export 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 === ACCESS_LEVEL_READ_ONLY;
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
             onRunQuery();

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -12,13 +12,14 @@ import { NamedQuerySelector } from './NamedQuerySelector';
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 import { Box, Flex } from '../../components/Flex';
 import Tooltip from '../../components/Tooltip';
+import { ACCESS_LEVEL_READ_ONLY } from '../../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, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
         return null;
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
+    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
     const buttonExpand = (React.createElement(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';
@@ -37,7 +38,7 @@ const QueryViewPanelComponent = (props) => {
     const hasActiveGridFilter = gridFilter != null && hasExpression;
     const hasNamedQueries = namedQueries && namedQueries.length > 0;
     const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
-    const saveButton = hasExpression ? (React.createElement(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, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
     const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
     const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
     const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;