@adaptabletools/adaptable 24.0.0-canary.5 → 24.0.0-canary.6

package/src/View/GridInfo/GridInfoPopup.js

@@ -8,12 +8,14 @@ import { Tabs } from '../../components/Tabs';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { getDefaultAdaptableOptions } from '../../AdaptableOptions/DefaultAdaptableOptions';
+import { isPivotLayout } from '../../Utilities/Helpers/Layouts/LayoutHelper';
 import { cn } from '../../lib/utils';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
     const api = props.api;
-    const keyValuePairs = [];
+    const summaryKeyValuePairs = [];
+    const layoutKeyValuePairs = [];
     const calcColumns = api.calculatedColumnApi
         .getCalculatedColumns()
         .map((c) => c.ColumnId);
@@ -32,40 +34,74 @@ export const GridInfoPopup = (props) => {
         : null;
     const selectedRowInfo = api.gridApi.getSelectedRowInfo();
     if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+        summaryKeyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
     }
     if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
-        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+        summaryKeyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
     }
-    keyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
-    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
-    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
-    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
-    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
-    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
-    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
-    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
-    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
-    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
-    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
+    summaryKeyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
+    summaryKeyValuePairs.push({ Key: 'Adaptable Id', Value: api.optionsApi.getAdaptableId() });
+    summaryKeyValuePairs.push({ Key: 'State Key', Value: api.optionsApi.getAdaptableStateKey() });
+    summaryKeyValuePairs.push({ Key: 'User Name', Value: api.optionsApi.getUserName() });
+    const primaryKey = api.optionsApi.getPrimaryKey();
+    const primaryKeyFriendly = primaryKey
+        ? api.columnApi.getFriendlyNameForColumnId(primaryKey)
+        : undefined;
+    const primaryKeyLabel = primaryKeyFriendly && primaryKeyFriendly !== primaryKey
+        ? `${primaryKeyFriendly} (${primaryKey})`
+        : primaryKey;
+    summaryKeyValuePairs.push({
+        Key: 'Primary Key',
+        Value: api.optionsApi.isAutogeneratePrimaryKey()
+            ? `${primaryKeyLabel} (auto-generated)`
+            : primaryKeyLabel,
+    });
+    const currentLayout = api.layoutApi.getCurrentLayout();
+    const isPivot = isPivotLayout(currentLayout);
+    const columnLabels = (columnIds) => ArrayExtensions.IsNotNullOrEmpty(columnIds)
+        ? columnIds
+            .map((columnId) => api.columnApi.getFriendlyNameForColumnId(columnId) || columnId)
+            .join(', ')
+        : 'None';
+    layoutKeyValuePairs.push({
+        Key: 'Current Layout',
+        Value: api.layoutApi.getCurrentLayoutName() || 'None',
+    });
+    layoutKeyValuePairs.push({
+        Key: 'Layout Type',
+        Value: isPivot ? 'Pivot' : 'Table',
+    });
+    layoutKeyValuePairs.push({
+        Key: 'Row Groups',
+        Value: columnLabels(api.layoutApi.getCurrentRowGroupsColumnIds()),
+    });
+    if (isPivot) {
+        layoutKeyValuePairs.push({
+            Key: 'Pivot Columns',
+            Value: columnLabels(currentLayout.PivotColumns),
+        });
+    }
+    layoutKeyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    layoutKeyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    layoutKeyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    layoutKeyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    layoutKeyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    layoutKeyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    layoutKeyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    layoutKeyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    layoutKeyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    layoutKeyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions.createCommaSeparatedString(calcColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+    layoutKeyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+    layoutKeyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.createCommaSeparatedString(actionColumns)
             : 'None' });
     const domProps = {
         className: 'twa:flex-1 twa:min-h-0 twa:w-full',
     };
-    keyValuePairs.map((keyValuePair) => {
-        return {
-            Key: keyValuePair.Key,
-            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
-        };
-    })
-        .filter((x) => x.Value);
     const columnsMap = {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
@@ -199,12 +235,13 @@ export const GridInfoPopup = (props) => {
         return Math.min(total + 40, 400);
     };
     const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
-        ['Grid Options', 'Grid Summary', 'Grid State'];
+        ['Grid Summary', 'Layout', 'Grid State', 'Grid Options'];
     const showSummary = enabledTabs.includes('Grid Summary');
+    const showLayout = enabledTabs.includes('Layout');
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Summary" }) : null, showLayout ? _jsx(Tabs.Tab, { children: "Layout" }) : null, showState ? _jsx(Tabs.Tab, { children: "State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: summaryKeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showLayout ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: layoutKeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
                                                     style: { height: sectionHeight(section.rows), width: '100%' },
                                                 }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/StyledColumn/RangesComponent.js

@@ -7,7 +7,7 @@ import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { getGraySwatchColor } from '../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../Utilities/Helpers/UIHelper';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
@@ -159,7 +159,7 @@ export class RangesComponent extends React.Component {
         }
         if (value === 'ColumnComparison') {
             const columnComparison = {
-                Color: getGraySwatchColor(),
+                Color: getDefaultRangeColor(),
                 MinValue: undefined,
                 MaxValue: undefined,
             };
@@ -252,7 +252,7 @@ export class RangesComponent extends React.Component {
                     {
                         Min: isPercentage ? 0 : 'Col-Min',
                         Max: isPercentage ? 100 : 'Col-Max',
-                        Color: getGraySwatchColor(),
+                        Color: getDefaultRangeColor(),
                     },
                 ]
                 : (() => {
@@ -298,7 +298,7 @@ export class RangesComponent extends React.Component {
         const newRange = {
             Min,
             Max: lastRange.Max,
-            Color: getGraySwatchColor(),
+            Color: getDefaultRangeColor(),
         };
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
@@ -311,7 +311,7 @@ export class RangesComponent extends React.Component {
             }
             return [
                 { ...onlyRange, Max: 50 },
-                { Min: 50, Max: 100, Color: getGraySwatchColor() },
+                { Min: 50, Max: 100, Color: getDefaultRangeColor() },
             ];
         }
         if (onlyRange.Min !== 'Col-Min' || onlyRange.Max !== 'Col-Max') {
@@ -322,7 +322,7 @@ export class RangesComponent extends React.Component {
         const mid = Math.round((min + max) / 2);
         return [
             { ...onlyRange, Max: mid },
-            { Min: mid, Max: 'Col-Max', Color: getGraySwatchColor() },
+            { Min: mid, Max: 'Col-Max', Color: getDefaultRangeColor() },
         ];
     }
     setColumnComparisonMin(value) {

package/src/View/StyledColumn/Wizard/StyledColumnWizardBulletSection.js

@@ -7,7 +7,7 @@ import { Tag } from '../../../components/Tag';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -230,7 +230,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: getGraySwatchColor(),
+                    Color: getDefaultRangeColor(),
                 },
             ];
         props.onChange({

package/src/View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection.js

@@ -8,7 +8,7 @@ import { InputGroup } from '../../../components/InputGroup';
 import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -276,7 +276,7 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
         const ranges = rangeValueType === 'Number'
             ? api.columnScopeApi.createCellColorRangesForScope(scope)
-            : [{ Min: 0, Max: 100, Color: getGraySwatchColor() }];
+            : [{ Min: 0, Max: 100, Color: getDefaultRangeColor() }];
         props.onChange({
             ...data,
             RangeBarStyle: {
@@ -424,9 +424,9 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                             : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getGraySwatchColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
+                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getDefaultRangeColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
                                                         Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
                                                         Mode: v,
                                                     }), items: [
                                                         { value: 'Clamp', label: 'Clamp to edge' },

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import ErrorBox from '../../../../components/ErrorBox';
 import { Tag } from '../../../../components/Tag';
 import { RangesComponent } from '../../RangesComponent';
-import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../../components/Flex';
 import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
@@ -108,7 +108,7 @@ export const StyledColumnWizardRangesSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: getGraySwatchColor(),
+                    Color: getDefaultRangeColor(),
                 },
             ];
         let newStyledColumn = data;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js

@@ -6,7 +6,7 @@ import { Tag } from '../../../../components/Tag';
 import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
 import { OptionalColorPicker } from '../../../../components/ColorPicker';
-import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
 import Radio, { RadioGroup } from '../../../../components/Radio';
@@ -145,5 +145,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: onBackColorChange }) })] }) })] })] }));
 };

package/src/View/Wizard/CollapsibleWizardCard.d.ts

@@ -19,7 +19,9 @@ export interface CollapsibleWizardCardProps {
     headerVisual?: React.ReactNode;
     /** Trailing header controls (all states) — e.g. delete. Clicks do not toggle expand. */
     headerActions?: React.ReactNode;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    /** When false, the card is a static header + summary (no expand chevron). Default: true. */
+    collapsible?: boolean;
     defaultExpanded?: boolean;
     expanded?: boolean;
     /** When true, only the header row is shown (another card in the accordion is expanded). */

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -21,28 +21,36 @@ export function renderCompactAccentTags(ids, getLabel, options) {
     return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((id) => (_jsx(AccentTag, { className: "twa:shrink-0", children: getLabel(id) }, id))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
 }
 export const CollapsibleWizardCard = (props) => {
-    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, collapsible = true, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
     const [expanded, setExpanded] = useProperty(props, 'expanded', defaultExpanded, {
         onChange: props.onExpandedChange,
     });
-    const showSummary = !expanded && !compact;
+    const canToggle = collapsible;
+    const isExpanded = canToggle && expanded;
+    const isCompact = canToggle && compact;
+    const showSummary = !isExpanded && !isCompact;
     const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
-    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
-    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
-    const toggleExpanded = () => setExpanded(!expanded);
+    const headerInline = isExpanded ? help : isCompact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = isCompact && compactSummaryInteractive;
+    const toggleExpanded = () => {
+        if (!canToggle) {
+            return;
+        }
+        setExpanded(!expanded);
+    };
     const handleTitleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             toggleExpanded();
         }
     };
-    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', isExpanded
             ? getCollapsibleWizardCardExpandedClasses(surface)
-            : getCollapsibleWizardCardCollapsedClasses(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            : getCollapsibleWizardCardCollapsedClasses(surface), isCompact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
             ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
-            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !isCompact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:rounded-standard', canToggle && 'twa:cursor-pointer twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !isCompact && !isExpanded }, canToggle && targetOwn.focusOutline, canToggle && 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: canToggle ? toggleExpanded : undefined, onKeyDown: canToggle ? handleTitleKeyDown : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isExpanded : undefined, role: canToggle ? 'button' : undefined, children: [_jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:select-none', canToggle && 'twa:cursor-pointer'), children: [canToggle ? (_jsx(IconComponent, { icon: { name: isExpanded ? 'collapse' : 'expand' } })) : null, _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
                                 ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
-                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', isCompact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), isExpanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
 };
 export function useWizardCardAccordion(initialExpandedId, options) {
     const fillExpandedCard = options?.fillExpandedCard ?? false;

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -7,7 +7,7 @@ import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter, RowNodeEvent } from './AgGridAdapter';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
-import { AdaptableState } from '../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../AdaptableState/AdaptableState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IModuleService } from '../Utilities/Services/Interface/IModuleService';
@@ -157,9 +157,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     static _initInternal(config: AdaptableInitInternalConfig): Promise<AdaptableApi>;
     private _initAdaptableAgGrid;
     midwayDestroy(): void;
-    migrateLoadedAdaptableState(state: AdaptableState): AdaptableState;
-    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: AdaptableState) => AdaptableState;
-    normalizeAdaptableState(state: AdaptableState, agGridOptions: NormalizeAdaptableStateOptions): AdaptableState;
+    migrateLoadedAdaptableState<T extends Partial<AdaptablePersistentState>>(state: T): T;
+    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: Partial<AdaptablePersistentState>) => Partial<AdaptablePersistentState>;
+    normalizeAdaptableState(state: Partial<AdaptablePersistentState>, agGridOptions: NormalizeAdaptableStateOptions): Partial<AdaptablePersistentState>;
     private normaliseLayoutState;
     private normaliseToolPanelState;
     private getCurrentLayoutModel;

package/src/agGrid/AdaptableAgGrid.js

@@ -15,6 +15,7 @@ import { AG_GRID_GRAND_TOTAL_ROW_ID, AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_C
 import { generateSelectionColumn } from '../Api/Implementation/ColumnApiImpl';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
+import { validateStateOptions } from '../Redux/Store/StateOptionsGuards';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
 import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { CommentsService } from '../Utilities/Services/CommentsService';
@@ -739,6 +740,7 @@ export class AdaptableAgGrid {
         }
     }
     normalizeAdaptableOptions(adaptableOptions) {
+        validateStateOptions(adaptableOptions.stateOptions, this.logger);
         if (this.hasAutogeneratedPrimaryKey) {
             this.logger.warn(`Autogenerated primary key is enabled (adaptableOptions.autogeneratedPrimaryKey = true). This should be a last resort as it limits some Adaptable features. See: ${PrimaryKeyDocsLink}`);
             this.adaptableOptions.primaryKey = AUTOGENERATED_PK_COLUMN;

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -88,7 +88,7 @@ export declare class AgGridColumnAdapter {
     private setupColumnHeaderStyle;
     private setupColumnCellEditor;
     private setupColumnCellRenderer;
-    private setupColumnTooltipValueGetter;
+    private setupColumnTooltip;
     /**
      * Resolves a Range Bar bound (number / column id / Col-Min / Col-Max /
      * Col-Avg / Col-Median) into a concrete numeric value for the supplied row.

package/src/agGrid/AgGridColumnAdapter.js

@@ -67,7 +67,7 @@ const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
     'pivotComparator',
     'getFindText',
     'getQuickFilterText',
-    'tooltipValueGetter',
+    'tooltip',
     'cellEditorParams',
     'suppressNoteActions',
 ]);
@@ -333,7 +333,7 @@ export class AgGridColumnAdapter {
         this.setupColumnHeaderStyle(colSetupInfo);
         this.setupColumnHeaderClass(colSetupInfo);
         this.setupColumnValueGetter(colSetupInfo);
-        this.setupColumnTooltipValueGetter(colSetupInfo);
+        this.setupColumnTooltip(colSetupInfo);
         if (!isAutoRowGroupColumn) {
             this.setupColumnFilter(colSetupInfo);
             this.setupColumnFloatingFilter(colSetupInfo);
@@ -676,9 +676,9 @@ export class AgGridColumnAdapter {
             }
         });
     }
-    setupColumnTooltipValueGetter({ col, colId, abColumn }) {
+    setupColumnTooltip({ col, colId, abColumn }) {
         let hasTooptip = false;
-        this.setColDefProperty(col, 'tooltipValueGetter', () => {
+        this.setColDefProperty(col, 'tooltip', () => {
             const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(colId);
             if (!styledColumn || styledColumn.IsSuspended) {
                 return undefined;

package/src/components/aql/QueryBuilder/QueryBuilderInputs.js

@@ -97,7 +97,7 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
         input = (_jsx(Box, { "data-id": "query-input-row-display", "data-name": "qb2-whole-row", "data-slot": "select-trigger", className: subjectPillClassName, children: "Whole Row" }));
     }
     else {
-        input = (_jsx(Box, { "data-id": "query-input-scope-display", "data-slot": "select-trigger", className: subjectPillClassName, children: scopeMeta?.description ?? '$SCOPE' }));
+        input = (_jsx(Box, { "data-id": "query-input-scope-display", "data-slot": "select-trigger", className: subjectPillClassName, children: "Scoped Columns" }));
     }
     const typeOptions = [
         {

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1791809119255 || Date.now(),
-    VERSION: "24.0.0-canary.5" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1792067993639 || Date.now(),
+    VERSION: "24.0.0-canary.6" || '--current-version--',
 };

package/src/layout-manager/src/normalizeLayoutModel.d.ts

@@ -7,4 +7,4 @@ export declare function normalizeTableLayoutModel(layout: TableLayoutModel, opti
 export declare function normalizePivotLayoutModel(layout: PivotLayoutModel): PivotLayoutModel;
 export declare function normalizeLayoutModel(layout: TableLayoutModel | PivotLayoutModel, options?: {
     isTree: boolean;
-}): PivotLayoutModel | TableLayoutModel;
+}): TableLayoutModel | PivotLayoutModel;

package/src/layout-manager/src/simplifyLayoutModel.d.ts

@@ -1,4 +1,4 @@
 import { PivotLayoutModel, TableLayoutModel } from './LayoutManagerModel';
 export declare function simplifyTableLayoutModel(layout: TableLayoutModel): TableLayoutModel;
 export declare function simplifyPivotLayoutModel(layout: PivotLayoutModel): PivotLayoutModel;
-export declare function simplifyLayoutModel(layout: TableLayoutModel | PivotLayoutModel): PivotLayoutModel | TableLayoutModel;
+export declare function simplifyLayoutModel(layout: TableLayoutModel | PivotLayoutModel): TableLayoutModel | PivotLayoutModel;

package/src/migration/AdaptableUpgradeHelper.d.ts

@@ -1,5 +1,5 @@
 import { VersionUpgrade } from './VersionUpgrade';
-import { AdaptableState } from '../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../AdaptableState/AdaptableState';
 import { LayoutTagOptions } from '../AdaptableOptions/LayoutOptions';
 /**
  * Config object used by State Auto-migration Wizard
@@ -38,7 +38,12 @@ export declare class AdaptableUpgradeHelper {
     protected versionUpgrades: Map<number, VersionUpgrade>;
     protected logger: MigrationLogger;
     private constructor();
-    static migrateAdaptableState(state: AdaptableState, config: UpgradeConfig): AdaptableState;
+    /**
+     * Migrates the given Adaptable State from `config.fromVersion` to `config.toVersion`.
+     *
+     * Accepts both a full `AdaptableState` and a (partial) `AdaptablePersistentState` - e.g. as received in `StateOptions.applyState()` - and returns the same shape.
+     */
+    static migrateAdaptableState<T extends Partial<AdaptablePersistentState>>(state: T, config: UpgradeConfig): T;
     /**
      * Published major version. When `VERSION` is not a parseable semver (local
      * builds and tests) this is 24, matching the previous helper fallback.

package/src/migration/VersionUpgrade17.js

@@ -91,7 +91,7 @@ export class VersionUpgrade17 extends VersionUpgrade {
         if (dashboardState?.VisibleButtons) {
             this.logger.warn(`Migrating deprecated DashboardState.VisibleButtons: [${dashboardState.VisibleButtons}].`);
             state.Dashboard.ModuleButtons = [
-                ...state.Dashboard.ModuleButtons,
+                ...(state.Dashboard.ModuleButtons ?? []),
                 ...dashboardState.VisibleButtons,
             ];
             delete state.Dashboard.VisibleButtons;
@@ -175,22 +175,24 @@ export class VersionUpgrade17 extends VersionUpgrade {
             return state;
         }
         const expression = oldQueryState.CurrentQuery;
-        const currentLayout = state.Layout.Layouts?.find((l) => l.Name === state.Layout.CurrentLayout);
+        const currentLayout = state.Layout?.Layouts?.find((l) => l.Name === state.Layout?.CurrentLayout);
         const currentGridFilter = currentLayout?.GridFilter;
         const currentGridFilterExpression = currentGridFilter && !currentGridFilter.IsSuspended ? currentGridFilter.Expression || '' : '';
-        if (expression && StringExtensions.IsNullOrEmpty(currentGridFilterExpression)) {
+        if (expression &&
+            currentLayout &&
+            StringExtensions.IsNullOrEmpty(currentGridFilterExpression)) {
             currentLayout.GridFilter = {
                 ...currentGridFilter,
                 Expression: expression,
             };
         }
-        state.Dashboard.Tabs?.forEach((tab) => {
+        state.Dashboard?.Tabs?.forEach((tab) => {
             if (tab.Toolbars.includes('Query')) {
                 tab.Toolbars = tab.Toolbars.map((t) => (t == 'Query' ? 'GridFilter' : t));
             }
         });
         let updatePinnedToolbars = false;
-        if (state.Dashboard.PinnedToolbars) {
+        if (state.Dashboard?.PinnedToolbars) {
             state.Dashboard.PinnedToolbars = state.Dashboard.PinnedToolbars.map((pinnedToolbar) => {
                 if (pinnedToolbar == 'Query') {
                     return 'GridFilter';
@@ -204,11 +206,12 @@ export class VersionUpgrade17 extends VersionUpgrade {
         const oldQueryState = state.Query;
         const oldNamedQueries = oldQueryState?.NamedQueries;
         if (ArrayExtensions.IsNotNullOrEmpty(oldNamedQueries)) {
-            const currentNamedQueries = state.NamedQuery.NamedQueries;
+            state.NamedQuery ??= {};
+            const currentNamedQueries = (state.NamedQuery.NamedQueries ??= []);
             oldNamedQueries.forEach((oldNamedQuery) => {
                 const currentQuery = currentNamedQueries.find((q) => q.Name === oldNamedQuery.Name);
                 if (!currentQuery) {
-                    state.NamedQuery?.NamedQueries?.push(oldNamedQuery);
+                    currentNamedQueries.push(oldNamedQuery);
                 }
             });
         }
@@ -236,6 +239,7 @@ export class VersionUpgrade17 extends VersionUpgrade {
             };
         })
             .filter(Boolean);
+        state.StyledColumn ??= {};
         state.StyledColumn.StyledColumns ??= [];
         styledColumns.forEach((styledColumn) => {
             state.StyledColumn.StyledColumns.push(styledColumn);
@@ -263,8 +267,9 @@ export class VersionUpgrade17 extends VersionUpgrade {
             }
         });
         const alertState = state.Alert;
-        if (ArrayExtensions.IsEmpty(state.FlashingCell?.FlashingCellDefinitions) &&
+        if (ArrayExtensions.IsNullOrEmpty(state.FlashingCell?.FlashingCellDefinitions) &&
             ArrayExtensions.IsNotNullOrEmpty(alertState?.FlashingAlertDefinitions)) {
+            state.FlashingCell ??= {};
             state.FlashingCell.FlashingCellDefinitions = alertState.FlashingAlertDefinitions;
             delete state.Alert.FlashingAlertDefinitions;
         }