@adaptabletools/adaptable 22.0.0-canary.9 → 22.0.1-canary.0

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

@@ -1,30 +1,22 @@
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { CheckBox } from '../../../components/CheckBox';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { Box, Flex } from '../../../components/Flex';
 import { Tabs } from '../../../components/Tabs';
 import Input from '../../../components/Input';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(Box, { className: "twa:mt-3" },
             "Name ",
             React.createElement(Tag, null, data.Name)),
         React.createElement(Box, { className: "twa:mt-3" },
-            "Data Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
+            "Target",
+            ' ',
+            React.createElement(Tag, null, !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header')),
         ' ',
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Group Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Summary Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Total Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
         React.createElement(Box, { className: "twa:mt-3" },
             "Apply on Column Groups:",
             ' ',
@@ -33,49 +25,22 @@ export const renderFormatColumnSettingsSummary = (data) => {
                 : data.ColumnGroupScope))));
 };
 export const FormatColumnSettingsWizardSection = (props) => {
-    const { data } = useOnePageAdaptableWizardContext();
-    const onNameChange = (event) => {
-        props.onChange({
-            ...data,
-            Name: event.target.value,
-        });
-    };
-    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
-        props.onChange({
-            ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeDataRows,
-            },
-        });
-    };
-    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const currentTarget = data.Target ? data.Target : 'cell';
+    const handleTargetChange = (target) => {
+        // Update the formatColumn object
         props.onChange({
             ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeGroupRows: ExcludeGroupedRows,
-            },
+            Target: target,
         });
     };
-    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
-        props.onChange({
-            ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeSummaryRows,
-            },
-        });
-    };
-    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+    const onNameChange = (event) => {
         props.onChange({
             ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeTotalRows,
-            },
+            Name: event.target.value,
         });
     };
+    const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
     return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
         React.createElement(Tabs, { className: "twa:mb-3" },
             React.createElement(Tabs.Tab, null, "Settings"),
@@ -84,24 +49,20 @@ export const FormatColumnSettingsWizardSection = (props) => {
                     React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
                         React.createElement(FormRow, { label: "Name" },
                             React.createElement(Input, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs.Tab, null, "Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
+                    React.createElement(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })))),
         React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Configuration"),
+            React.createElement(Tabs.Tab, null,
+                "Column Group ",
+                behaviourSpellingVariant,
+                " "),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, null,
-                        data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                            React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
-                            React.createElement(FormRow, { label: "Exclude Group Rows:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
-                            React.createElement(FormRow, { label: "Exclude Row Summaries:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
-                            React.createElement(FormRow, { label: "Exclude Total Rows:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
                         React.createElement(FormRow, { label: "Apply on Column Group:" },
                             React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                     props.onChange({

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

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
+import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnColumnScopeWizardSection';
+import { FormatColumnRowScopeWizardSection, renderFormatColumnRowScopeSummary,
+// renderFormatColumnRowScopeSummary,
+ } from './FormatColumnRowScopeWizardSection';
 import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleWizardSummary, } from './FormatColumnStyleWizardSection';
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
@@ -17,11 +20,22 @@ 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 { FormatColumnTargetWizardSection, renderFormatColumnTargetSummary, } from './FormatColumnTargetWizardSection';
 import { Box, Flex } from '../../../components/Flex';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+    // Add RowScope and Target defaults for Format Columns that have been created in Initial State
+    if (!formatColumn.RowScope) {
+        formatColumn.RowScope = {
+            ExcludeDataRows: false,
+            ExcludeGroupRows: false,
+            ExcludeSummaryRows: false,
+            ExcludeTotalRows: false,
+        };
+    }
+    if (!formatColumn.Target) {
+        formatColumn.Target = 'cell';
+    }
     if (formatColumn.Target === 'columnHeader') {
         // Column Headers are always text
         formatDataType = 'text';
@@ -96,7 +110,7 @@ export function FormatColumnWizard(props) {
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
-                details: 'Enter Name and set Additional Properties',
+                details: 'Enter Name and other Properties',
                 isValid: (formatColumnData) => {
                     if (!formatColumnData.Name) {
                         return 'Format Column Name cannot be blank';
@@ -113,7 +127,7 @@ export function FormatColumnWizard(props) {
                 },
             },
             {
-                title: 'Scope',
+                title: 'Columns',
                 details: 'Select which Columns will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
@@ -123,12 +137,12 @@ export function FormatColumnWizard(props) {
                 },
             },
             {
-                title: 'Target',
-                details: 'Select which Columns Elements will be formatted',
-                renderSummary: renderFormatColumnTargetSummary,
+                title: 'Rows',
+                details: 'Select which Rows will be formatted',
+                renderSummary: renderFormatColumnRowScopeSummary,
                 render: () => {
                     return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-                        React.createElement(FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
+                        React.createElement(FormatColumnRowScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
             {

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -21,14 +21,14 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
     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-xs twa:py-1.5 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-white twa:rounded twa:cursor-pointer twa:h-7 twa:leading-4';
+        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';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
         const labelClassName = clsx(baseClasses, {
             [placeholderClasses]: !expression,
         });
         const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
-            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter')));
-        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:overflow-visible" },
+            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter...')));
+        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
             buttonExpand,
             expressionLabel,
             gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));

package/src/View/Layout/LayoutViewPanel.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
-import isEqual from 'lodash/isEqual';
+import isEqual from '../../Utilities/utils/isEqual';
 import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';

package/src/View/Layout/TransposedPopup.js

@@ -80,7 +80,6 @@ export const TransposedPopup = (props) => {
     const transposeConfig = {
         transposedColumnId: rawConfig.transposedColumnId ?? primaryKey,
         hideTransposedColumn: rawConfig.hideTransposedColumn ?? true,
-        autosize: rawConfig.autosize ?? true,
         columnsToTranspose: rawConfig.columnsToTranspose,
         rowsToTranspose: rawConfig.rowsToTranspose,
     };

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -365,7 +365,7 @@ export const ColumnsSection = (props) => {
     const visibleIds = layout.TableColumns.filter((colId) => {
         return (layout.ColumnVisibility?.[colId] !== false &&
             adaptable.api.columnApi.isSelectionColumn(colId) === false &&
-            !adaptable.api.columnApi.internalApi.isAlwaysHiddenColumn(colId));
+            !adaptable.api.columnApi.internalApi.isColumnUIHidden(colId));
     });
     const currentlyDisplayedColumnIds = searchInputValue
         ? currentOrder

package/src/View/Note/NoteEditor.js

@@ -1,4 +1,4 @@
-import throttle from 'lodash/throttle';
+import throttle from '../../Utilities/utils/throttle';
 import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useMemo } from 'react';
-import debounce from 'lodash/debounce';
+import debounce from '../../Utilities/utils/debounce';
 import { QUICK_SEARCH_DEBOUNCE_TIME } from '../../Utilities/Constants/GeneralConstants';
 export const useQuickSearchDebounced = (props) => {
     const [searchText, setSearchText] = useState(props.QuickSearchText ?? '');

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,4 +1,4 @@
-import chunk from 'lodash/chunk';
+import chunk from '../Utilities/utils/chunk';
 import * as React from 'react';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';

package/src/View/StyledColumn/Wizard/StyledColumnBadgeRowsSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../types';
+type StyledColumnBadgeRowsSectionProps = {
+    onChange: (data: StyledColumn) => void;
+};
+export declare const renderStyledColumnBadgeRowsSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnBadgeRowsSection: (props: StyledColumnBadgeRowsSectionProps) => React.JSX.Element;
+export {};

package/src/View/StyledColumn/Wizard/{StyledColumnWizardSettingsSection.js → StyledColumnBadgeRowsSection.js}

@@ -5,7 +5,7 @@ import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Flex, Box } from '../../../components/Flex';
-export const renderStyledColumnWizardSettingsSummary = (data) => {
+export const renderStyledColumnBadgeRowsSummary = (data) => {
     const badgeStyle = data;
     return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(Box, { className: "twa:mt-3" },
@@ -22,80 +22,80 @@ export const renderStyledColumnWizardSettingsSummary = (data) => {
             "Total Rows ",
             React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
 };
-export const StyledColumnWizardSettingsSection = (props) => {
+export const StyledColumnBadgeRowsSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
-    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
+    const onExcludeDataRowsChanged = (includeDataRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeDataRows,
+                    ExcludeDataRows: !includeDataRows,
                 },
             },
         });
     };
-    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
+    const onExcludeGroupedRowsChanged = (includeGroupedRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeGroupRows: ExcludeGroupedRows,
+                    ExcludeGroupRows: !includeGroupedRows,
                 },
             },
         });
     };
-    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
+    const onExcludeSummaryRowsChanged = (includeSummaryRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeSummaryRows,
+                    ExcludeSummaryRows: !includeSummaryRows,
                 },
             },
         });
     };
-    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+    const onExcludeTotalRowsChanged = (includeTotalRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeTotalRows,
+                    ExcludeTotalRows: !includeTotalRows,
                 },
             },
         });
     };
     return (React.createElement(Tabs, null,
-        React.createElement(Tabs.Tab, null, "Settings"),
+        React.createElement(Tabs.Tab, null, "Row Types"),
         React.createElement(Tabs.Content, null,
             React.createElement(Flex, { flexDirection: "row" },
                 React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Exclude Data Rows:" },
+                    React.createElement(FormRow, { label: "Data (leaf) Rows:" },
                         React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged }))),
-                    React.createElement(FormRow, { label: "Exclude Group Rows:" },
+                                !data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged }))),
+                    React.createElement(FormRow, { label: "Group Rows:" },
                         React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox, { className: "twa:mr-2", "data-name": "exclude-grouped-rows-checkbox", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged }))),
-                    React.createElement(FormRow, { label: "Exclude Row Summaries:" },
+                                !data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged }))),
+                    React.createElement(FormRow, { label: "Summary Rows:" },
                         React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged }))),
+                                !data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged }))),
                     ' ',
-                    React.createElement(FormRow, { label: "Exclude Total Rows:" },
+                    React.createElement(FormRow, { label: "Total Rows:" },
                         React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged }))))))));
+                                !data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged }))))))));
 };

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

@@ -8,7 +8,7 @@ import { renderStyledColumnTypeSummary, StyledColumnWizardTypeSection, } from '.
 import { isValidStyledColumnColumn, renderStyledColumnColumnSummary, StyledColumnWizardColumnSection, } from './StyledColumnWizardColumnSection';
 import { renderStyledColumnStyleSummary, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { renderStyledColumnWizardSettingsSummary, StyledColumnWizardSettingsSection, } from './StyledColumnWizardSettingsSection';
+import { renderStyledColumnBadgeRowsSummary, StyledColumnBadgeRowsSection, } from './StyledColumnBadgeRowsSection';
 import { StyledColumnSparklineSettingsSection } from './StyledColumnSparklineSettingsSection';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { renderBadgeSummary, StyledColumnBadgeSection } from './StyledColumnBadgeSection';
@@ -48,15 +48,6 @@ export const StyledColumnWizard = (props) => {
         }
         props.onFinishWizard(styledColumn);
     };
-    const AdditionalSettingSection = {
-        details: 'Apply Additional Settings',
-        renderSummary: renderStyledColumnWizardSettingsSummary,
-        render: () => {
-            return (React.createElement(Box, { className: "twa:p-2" },
-                React.createElement(StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
-        },
-        title: 'Settings',
-    };
     const specificSteps = [];
     if (styledColumn.SparklineStyle) {
         specificSteps.push({
@@ -93,6 +84,15 @@ export const StyledColumnWizard = (props) => {
         );
     }
     else if (styledColumn.BadgeStyle) {
+        specificSteps.push({
+            details: 'Select the Rows where the Badge will be applied',
+            renderSummary: renderStyledColumnBadgeRowsSummary,
+            render: () => {
+                return (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(StyledColumnBadgeRowsSection, { onChange: setStyledColumn })));
+            },
+            title: 'Rows',
+        });
         specificSteps.push({
             title: 'Badges',
             details: 'Create Badge Styles',
@@ -110,7 +110,6 @@ export const StyledColumnWizard = (props) => {
             render: () => (React.createElement(Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnBadgeSection, { onChange: setStyledColumn }))),
         });
-        specificSteps.push(AdditionalSettingSection);
     }
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {

package/src/View/SystemStatus/SystemStatusViewPanel.d.ts

@@ -9,8 +9,8 @@ declare class SystemStatusViewPanelComponent extends React.Component<SystemStatu
     render(): React.JSX.Element;
 }
 export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, {
-    ref?: React.Ref<SystemStatusViewPanelComponent>;
     key?: React.Key | null | undefined;
+    ref?: React.Ref<SystemStatusViewPanelComponent>;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;

package/src/View/Theme/ThemeEditor.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
-import throttle from 'lodash/throttle';
+import throttle from '../../Utilities/utils/throttle';
 import SimpleButton from '../../components/SimpleButton';
 import Panel from '../../components/Panel';
 import { Field } from './ThemeField';

package/src/View/Theme/ThemeField.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import throttle from 'lodash/throttle';
+import throttle from '../../Utilities/utils/throttle';
 import { useAdaptable } from '../AdaptableContext';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
 import { FormRow } from '../../components/FormLayout';

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -7,7 +7,7 @@ import { useAdaptable } from '../AdaptableContext';
 import { Tabs } from '../../components/Tabs';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { OnePageWizard, useOnePageWizardContext } from './OnePageWizards';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../Utilities/utils/kebabCase';
 import { Box } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 export const SummaryTag = (props) => (React.createElement(Box, { ...props }));

package/src/View/Wizard/OnePageWizards.js

@@ -156,7 +156,7 @@ export const OnePageWizard = (props) => {
                                     } },
                                     React.createElement(KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-color-accent-foreground" }, navIndex),
                                     React.createElement("div", { className: "twa:flex-1" }, section.title),
-                                    React.createElement(Icon, { name: "error", className: clsx('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:hidden') })));
+                                    React.createElement(Icon, { name: "error", className: clsx('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })));
                             }),
                             selectedFeedback,
                             React.createElement(Box, { className: "twa:flex-1" }),

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -223,6 +223,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     redrawBody(): void;
     refreshHeader(): void;
     redrawRows(rowNodes?: IRowNode[]): void;
+    refreshGridHeader(): void;
     redrawRow(rowNode: IRowNode): void;
     refreshCell(rowNode: IRowNode, column: string | any, forceUpdate: boolean, suppressFlash?: boolean): void;
     refreshCells(rowNode: IRowNode, columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;

package/src/agGrid/AdaptableAgGrid.js

@@ -1,5 +1,5 @@
-import throttle from 'lodash/throttle';
-import debounce from 'lodash/debounce';
+import throttle from '../Utilities/utils/throttle';
+import debounce from '../Utilities/utils/debounce';
 import { createGrid, LocalEventService, } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
 import { PrimaryKeyDocsLink } from '../Utilities/Constants/DocumentationLinkConstants';
@@ -78,7 +78,7 @@ import { AgGridOptionsService } from './AgGridOptionsService';
 import { parseDateValue } from '../Utilities/Helpers/DateHelper';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import getScrollbarSize from '../Utilities/getScrollbarSize';
-import { WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+import { ONLY_AGG_FN_NAME, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
 import { RowFormService } from '../Utilities/Services/RowFormService';
 import { FilterOnDataChangeOptions } from '../AdaptableState/Common/Enums';
 import { ADAPTABLE_PUBLISH_TIMESTAMP } from '../EnvVars';
@@ -87,6 +87,7 @@ import { ensureLoadingScreenPortalElement } from '../components/Modal';
 import { AdaptableLoadingScreen } from '../View/Components/Popups/AdaptableLoadingScreen';
 import { createElement } from 'react';
 import { createAgStatusPanelComponent } from '../Utilities/createAgStatusPanelComponent';
+import { only } from '../Utilities/only';
 import { weightedAverage } from '../Utilities/weightedAverage';
 import { ROW_SUMMARY_ROW_ID } from '../AdaptableState/Common/RowSummary';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
@@ -1080,6 +1081,9 @@ export class AdaptableAgGrid {
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'aggFuncs', (original_aggFuncs) => {
             const aggregationFunctions = original_aggFuncs || {};
+            aggregationFunctions[ONLY_AGG_FN_NAME] = (params) => {
+                return only(params);
+            };
             aggregationFunctions[WEIGHTED_AVERAGE_AGG_FN_NAME] = (params) => {
                 const columnId = params.column.getColId();
                 const adaptableAggFunc = this.getActiveAdaptableAggFuncForCol(columnId);
@@ -1462,6 +1466,18 @@ export class AdaptableAgGrid {
                 caseSensitive: !!this.adaptableOptions.quickSearchOptions.isQuickSearchCaseSensitive,
             };
         });
+        /**
+         * suppressOverlays
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'suppressOverlays', (original_suppressOverlays) => {
+            // we want to suppress the exporting overlay because having it enabled will turn api.exportDataAsExcel() and api.exportDataAsCsv() into async operations,
+            // see #export_data_synchronously
+            let suppressOverlays = original_suppressOverlays || [];
+            if (!suppressOverlays.includes('exporting')) {
+                suppressOverlays.push('exporting');
+            }
+            return suppressOverlays;
+        });
     }
     /**
      * Either initializes the AG Grid instance or delegates it to the framework wrappers (React/Anglar)
@@ -2244,6 +2260,9 @@ export class AdaptableAgGrid {
             this.logger.consoleError('AG Grid redrawRows failed to locate some row nodes.', rowNodes, ex);
         }
     }
+    refreshGridHeader() {
+        this.agGridAdapter.getAgGridApi().refreshHeader();
+    }
     redrawRow(rowNode) {
         this.redrawRows([rowNode]);
     }
@@ -2541,12 +2560,15 @@ export class AdaptableAgGrid {
             updatedRows: [],
             removedRows: [],
         };
-        if (!dataRowConfig || !dataRowConfig.dataRows) {
+        if (!dataRowConfig) {
+            return result;
+        }
+        if (!dataRowConfig.addRows || !dataRowConfig.updateRows || !dataRowConfig.deleteRows) {
             return result;
         }
-        const addDataRows = dataRowConfig.dataRows.add;
-        const updateDataRows = dataRowConfig.dataRows.update;
-        const removeDataRows = dataRowConfig.dataRows.delete;
+        const addDataRows = dataRowConfig.addRows;
+        const updateDataRows = dataRowConfig.updateRows;
+        const removeDataRows = dataRowConfig.deleteRows;
         if (this.hasAutogeneratedPrimaryKey) {
             this.addSyntheticPrimaryKeyIfMissing(addDataRows);
         }

package/src/agGrid/AgGridAdapter.js

@@ -471,8 +471,8 @@ export class AgGridAdapter {
             ? 'number'
             : this.deriveAdaptableColumnDataType(agGridColumn, false);
         const isTreeColumn = this.isTreeColumn(isGeneratedRowGroupColumn);
-        const alwaysHidden = this.adaptableApi.columnApi.internalApi.isAlwaysHiddenColumn(colDef);
-        const visible = !alwaysHidden || agGridColumn.isVisible();
+        const isUIHiddenColumn = this.adaptableApi.columnApi.internalApi.isColumnUIHidden(colDef);
+        const visible = !isUIHiddenColumn || agGridColumn.isVisible();
         const isGenerated = isGeneratedRowGroupColumn || isGeneratedPivotResultColumn || isGeneratedSelectionColumn;
         const abColumn = {
             Uuid: createUuid(),
@@ -482,9 +482,9 @@ export class AgGridAdapter {
             resizable: colDef.resizable !== false,
             friendlyName: friendlyName,
             isPrimaryKey: ColumnId === pkColumn,
-            dataType: dataType,
+            dataType,
             visible,
-            alwaysHidden,
+            isUIHiddenColumn,
             readOnly: this.isColumnReadonly(colDef),
             columnGroup: ColumnGroup,
             fieldOnly: isGenerated ? false : this.isColumnFieldonly(colDef),

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,5 +1,5 @@
-import kebabCase from 'lodash/kebabCase';
-import merge from 'lodash/merge';
+import kebabCase from '../Utilities/utils/kebabCase';
+import merge from '../Utilities/utils/merge';
 import { convertAdaptableStyleToCSS, getVariableColor, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
@@ -533,8 +533,15 @@ export class AgGridColumnAdapter {
                             returnValue = params.value;
                         }
                         if (textOptions.includes('PercentageValue')) {
-                            const clampedValue = Helper.clamp(params.value, min, max);
-                            const percentageValue = ((clampedValue - min) / (max - min)) * 100;
+                            let percentageValue;
+                            if (styledColumn.PercentBarStyle.ColumnComparison) {
+                                const absMax = Math.abs(max);
+                                percentageValue = absMax === 0 ? 0 : (Number(params.value) / absMax) * 100;
+                            }
+                            else {
+                                const clampedValue = Helper.clamp(params.value, min, max);
+                                percentageValue = ((clampedValue - min) / (max - min)) * 100;
+                            }
                             returnValue += ' ' + `(${percentageValue.toFixed(0)}%)`;
                         }
                         return returnValue ? returnValue : params.value;