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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "23.0.0-canary.5",
+  "version": "23.0.0-canary.7",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableOptions/DataSetOptions.d.ts

@@ -1,5 +1,6 @@
 import { AdaptableForm, AdaptableObject } from '../../types';
 import { FormContext } from '../AdaptableState/Common/FormContext';
+import { DataSetSelectedInfo } from '../Api/Events/DataSetSelected';
 /**
  * Options to provide Data Sets
  */
@@ -9,12 +10,12 @@ export interface DataSetOptions<TData = any> {
      *
      * @defaultValue []
      */
-    dataSets?: DataSet[];
+    dataSets?: DataSet<TData>[];
 }
 /**
  * Defines a Data Set object that can provide data to AdapTable
  */
-export interface DataSet extends AdaptableObject {
+export interface DataSet<TData = any> extends AdaptableObject {
     /**
      * Name of Data Set
      */
@@ -31,6 +32,29 @@ export interface DataSet extends AdaptableObject {
      * Additional info for Data Set
      */
     info?: Record<string, string | number | boolean | Date>;
+    /**
+     * Invoked when this Data Set is selected and it does not define a `form`.
+     *
+     * Use for custom loading logic (e.g. server requests). The `DataSetSelected`
+     * event is still fired for backward compatibility.
+     *
+     * @defaultValue undefined
+     */
+    onSelect?: (info: DataSetSelectedInfo) => void | Promise<void>;
+    /**
+     * Optional shortcut that loads row data into the Grid when this Data Set is
+     * selected (only when no `form` is defined). Runs before `onSelect`.
+     *
+     * @defaultValue undefined
+     */
+    loadData?: (info: DataSetSelectedInfo) => TData[] | Promise<TData[]>;
+    /**
+     * Invoked when the user submits the Data Set form (Enter key or form button).
+     * When no form `buttons` are defined, an OK button is added automatically.
+     *
+     * @defaultValue undefined
+     */
+    onFormSubmit?: (context: DataSetFormContext) => void | Promise<void>;
 }
 /**
  * Used when a DataSet displays a Form

package/src/AdaptableOptions/DefaultAdaptableOptions.js

@@ -273,7 +273,6 @@ const DefaultAdaptableOptions = {
         popupType: 'modal',
         title: ModuleConstants.SettingsPanelFriendlyName,
         icon: 'ConfigurationIcon',
-        navigation: {},
         alwaysShowInDashboard: false,
         alwaysShowInToolPanel: false,
         showModuleIcons: true,

package/src/AdaptableOptions/SettingsPanelOptions.d.ts

@@ -1,5 +1,6 @@
 import { AdaptableFrameworkComponent, AdaptableIcon } from '../../types';
 import { AdaptableSettingsPanel } from '../AdaptableState/Common/Types';
+import { BaseContext } from '../AdaptableState/Common/BaseContext';
 import { CustomRenderContext } from '../agGrid/AdaptableFrameworkComponent';
 /**
  * Options for managing the AdapTable Settings Panel
@@ -34,13 +35,15 @@ export interface SettingsPanelOptions {
      */
     alwaysShowInToolPanel?: boolean;
     /**
-     * Ordered items to display at side of Settings Panel
+     * Configure grouped navigation for the Settings Panel.
      *
-     * @defaultValue all available AdapTable modules
+     * Receives the default grouped navigation and AdapTable context; return an amended copy.
+     * Groups with no visible modules (e.g. due to entitlements) are omitted automatically.
+     * Group headings are omitted when every module in the group is hidden.
+     *
+     * @defaultValue all available AdapTable modules in the default grouped order
      */
-    navigation?: {
-        items?: (AdaptableSettingsPanel | string | '-')[];
-    };
+    navigation?: SettingsPanelNavigationConfigurer;
     /**
      * Initial position of Settings Panel window
      *
@@ -70,18 +73,47 @@ export interface SettingsPanelOptions {
      */
     customSettingsPanels?: CustomSettingsPanel[];
     /**
-   * Which Tabs can be used to display Grid Info: 'Grid Options', 'Grid Summary' or 'Grid State'
-   *
-   * @defaultValue ['Grid Options', 'Grid Summary', 'Grid State']
-   */
+     * Which Tabs can be used to display Grid Info: 'Grid Options', 'Grid Summary' or 'Grid State'
+     *
+     * @defaultValue ['Grid Options', 'Grid Summary', 'Grid State']
+     */
     gridInfoTabs?: GridInfoTabs;
 }
+/**
+ * A labelled group of Settings Panel navigation entries.
+ */
+export interface SettingsPanelNavigationGroup {
+    /**
+     * Section heading shown above the group. Use an empty string to show items without a heading.
+     */
+    label: string;
+    /**
+     * Module names or custom panel names in display order.
+     */
+    items: (AdaptableSettingsPanel | string)[];
+}
+/**
+ * Grouped Settings Panel navigation structure.
+ */
+export interface SettingsPanelNavigation {
+    groups: SettingsPanelNavigationGroup[];
+}
+/**
+ * Context passed to `SettingsPanelOptions.navigation`.
+ */
+export interface SettingsPanelNavigationContext extends BaseContext {
+}
+/**
+ * Function used to customise Settings Panel navigation.
+ */
+export type SettingsPanelNavigationConfigurer = (context: SettingsPanelNavigationContext, defaultNavigation: SettingsPanelNavigation) => SettingsPanelNavigation;
 /**
  * Definition of a Custom Panel to add to the Adaptable Settings Panel
  */
 export interface CustomSettingsPanel {
     /**
-     * Appears in Settings Panel Navigation and must be included in settingsPanelOptions.navigation for it to be displayed (by default added to the end)
+     * Appears in Settings Panel Navigation. Include in `navigation` to choose placement
+     * (by default added to a `Custom Panels` group at the end).
      */
     name: string;
     /**

package/src/AdaptableState/Common/AdaptableFormat.d.ts

@@ -50,6 +50,13 @@ export interface NumberFormatterOptions extends BaseFormatterOptions {
      * Multiplier to use on cell value
      */
     Multiplier?: number;
+    /**
+     * When the numeric value is zero (after multiplier and rounding):
+     * - omitted / undefined, or `'0'` — use normal formatting (e.g. `0`, `0.00`)
+     * - `''` — show a blank cell (user cleared the default `0` in the wizard)
+     * - any other string — show that text (e.g. `-`, `—`)
+     */
+    ZeroDisplay?: string;
     /**
      * Shows negative numbers in parentheses
      */

package/src/AdaptableState/Common/AdaptableMessageType.d.ts

@@ -15,6 +15,6 @@ export type AdaptableMessageType =
  */
  | 'Warning'
 /**
- * Error Message - displays '-ab-color-error' variable (defaults to red)
+ * Error Message - displays '-ab-color-destructive' variable (defaults to red)
  */
  | 'Error';

package/src/AdaptableState/Common/Enums.d.ts

@@ -31,7 +31,7 @@ export declare enum FontSize {
     XLarge = "XLarge"
 }
 export declare enum StatusColour {
-    Error = "var(--ab-color-error)",
+    Error = "var(--ab-color-destructive)",
     Warn = "var(--ab-color-warn)",
     Success = "var(--ab-color-success)",
     Info = "var(--ab-color-info)"

package/src/AdaptableState/Common/Enums.js

@@ -45,7 +45,7 @@ var FontSize;
 })(FontSize || (exports.FontSize = FontSize = {}));
 var StatusColour;
 (function (StatusColour) {
-    StatusColour["Error"] = "var(--ab-color-error)";
+    StatusColour["Error"] = "var(--ab-color-destructive)";
     StatusColour["Warn"] = "var(--ab-color-warn)";
     StatusColour["Success"] = "var(--ab-color-success)";
     StatusColour["Info"] = "var(--ab-color-info)";

package/src/AdaptableState/StyledColumnState.d.ts

@@ -200,11 +200,11 @@ export interface CellColorRange {
  */
 export interface ColumnComparison {
     /**
-     * Start value - either numeric value or Column name
+     * Start value - either numeric value or Column ID
      */
     MinValue: number | string;
     /**
-     * End value - either numeric value or Column name
+     * End value - either numeric value or Column ID
      */
     MaxValue: number | string;
     /**

package/src/Api/Internal/AlertInternalApi.js

@@ -126,7 +126,7 @@ class AlertInternalApi extends ApiBase_1.ApiBase {
             let backgroundColor = '';
             switch (highlightType) {
                 case 'Error':
-                    backgroundColor = 'var(--ab-color-error)';
+                    backgroundColor = 'var(--ab-color-destructive)';
                     break;
                 case 'Info':
                     backgroundColor = 'var(--ab-color-info)';

package/src/Api/Internal/DataSetInternalApi.d.ts

@@ -1,5 +1,8 @@
 import { ApiBase } from '../Implementation/ApiBase';
 import { DataSet } from '../../AdaptableOptions/DataSetOptions';
 export declare class DataSetInternalApi extends ApiBase {
+    handleDataSetSelected(dataSet: DataSet): void;
     showDataSetForm(dataSet: DataSet): void;
+    private buildDataSetForm;
+    private runDataSetHandler;
 }

package/src/Api/Internal/DataSetInternalApi.js

@@ -3,21 +3,81 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataSetInternalApi = void 0;
 const ApiBase_1 = require("../Implementation/ApiBase");
 class DataSetInternalApi extends ApiBase_1.ApiBase {
+    handleDataSetSelected(dataSet) {
+        if (!dataSet.form) {
+            this.getEventApi().internalApi.fireDataSetSelectedEvent(dataSet);
+            const dataSetSelectedInfo = {
+                ...this.getAdaptableInternalApi().buildBaseContext(),
+                dataSet,
+            };
+            this.runDataSetHandler(async () => {
+                if (dataSet.loadData) {
+                    const rowData = await dataSet.loadData(dataSetSelectedInfo);
+                    if (rowData != null) {
+                        this.getGridApi().loadGridData(rowData);
+                    }
+                }
+                if (dataSet.onSelect) {
+                    await dataSet.onSelect(dataSetSelectedInfo);
+                }
+            }, 'selection', dataSet.name);
+        }
+    }
     showDataSetForm(dataSet) {
-        if (dataSet.form) {
-            this.getAdaptableInternalApi().showPopupForm({
-                Id: 'data-set-form',
-                Form: dataSet.form,
-                prepareContext: (context) => {
-                    return new Promise((resolve) => {
-                        const preparedContext = {
-                            ...context,
-                            dataSet,
-                        };
-                        resolve(preparedContext);
-                    });
+        if (!dataSet.form) {
+            return;
+        }
+        this.getAdaptableInternalApi().showPopupForm({
+            Id: 'data-set-form',
+            Form: this.buildDataSetForm(dataSet),
+            prepareContext: (context) => {
+                return new Promise((resolve) => {
+                    const preparedContext = {
+                        ...context,
+                        dataSet,
+                    };
+                    resolve(preparedContext);
+                });
+            },
+        });
+    }
+    buildDataSetForm(dataSet) {
+        const sourceForm = dataSet.form;
+        if (!dataSet.onFormSubmit) {
+            return sourceForm;
+        }
+        const invokeOnFormSubmit = (context) => {
+            this.runDataSetHandler(() => dataSet.onFormSubmit(context), 'onFormSubmit', dataSet.name);
+        };
+        const onSubmit = (formData, context) => {
+            sourceForm.onSubmit?.(formData, context);
+            invokeOnFormSubmit({ ...context, formData, dataSet });
+        };
+        const buttons = sourceForm.buttons?.length > 0
+            ? sourceForm.buttons
+            : [
+                {
+                    label: 'OK',
+                    onClick: (_, context) => invokeOnFormSubmit({ ...context, dataSet }),
                 },
-            });
+            ];
+        return {
+            ...sourceForm,
+            onSubmit,
+            buttons,
+        };
+    }
+    runDataSetHandler(handler, handlerName, dataSetName) {
+        try {
+            const result = handler();
+            if (result != null && typeof result.then === 'function') {
+                result.catch((error) => {
+                    this.logError(`DataSet '${dataSetName}' ${handlerName} handler failed`, error);
+                });
+            }
+        }
+        catch (error) {
+            this.logError(`DataSet '${dataSetName}' ${handlerName} handler failed`, error);
         }
     }
 }

package/src/Redux/Store/AdaptableStore.js

@@ -913,10 +913,12 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case InternalRedux.DATA_SET_SELECT: {
                     let returnAction = next(action);
                     const dataSet = adaptable.api.dataSetApi.getCurrentDataSet();
-                    adaptable.api.eventApi.internalApi.fireDataSetSelectedEvent(dataSet);
-                    requestAnimationFrame(() => {
-                        adaptable.api.dataSetApi.internalApi.showDataSetForm(dataSet);
-                    });
+                    if (dataSet) {
+                        adaptable.api.dataSetApi.internalApi.handleDataSetSelected(dataSet);
+                        requestAnimationFrame(() => {
+                            adaptable.api.dataSetApi.internalApi.showDataSetForm(dataSet);
+                        });
+                    }
                     return returnAction;
                 }
                 /*******************

package/src/Strategy/CalculatedColumnModule.js

@@ -119,6 +119,7 @@ class CalculatedColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 name: 'Settings',
                 label: 'Column Id',
                 values: [calculateColumn.ColumnId],
+                tagVariant: 'column',
             },
             calculateColumn.FriendlyName && {
                 name: 'Settings',

package/src/Strategy/ColumnFilterModule.js

@@ -157,6 +157,7 @@ class ColumnFilterModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 {
                     name: 'Column',
                     values: [this.api.columnApi.getFriendlyNameForColumnId(filter.ColumnId)],
+                    tagVariant: 'column',
                 },
                 {
                     name: 'Filter',

package/src/Strategy/FlashingCellModule.js

@@ -11,8 +11,8 @@ const getFlashingTargetViewItems_1 = require("./Utilities/FlashingCell/getFlashi
 const getFlashingCellStyleViewItems_1 = require("./Utilities/FlashingCell/getFlashingCellStyleViewItems");
 const getObjectTagsViewItems_1 = require("../Utilities/getObjectTagsViewItems");
 const getRuleViewItems_1 = require("../Utilities/getRuleViewItems");
-const getScopeViewItems_1 = require("../Utilities/getScopeViewItems");
 const FlashingCellWizard_1 = require("../View/FlashingCell/Wizard/FlashingCellWizard");
+const FlashingCellScopeWizardSection_1 = require("../View/FlashingCell/Wizard/FlashingCellScopeWizardSection");
 const getFlashingCellDurationViewItems_1 = require("./Utilities/FlashingCell/getFlashingCellDurationViewItems");
 const AdaptableLogger_1 = require("../agGrid/AdaptableLogger");
 class FlashingCellModule extends AdaptableModuleBase_1.AdaptableModuleBase {
@@ -257,7 +257,11 @@ class FlashingCellModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     name: 'Name',
                     values: [flashingCell.Name],
                 },
-                { ...(0, getScopeViewItems_1.getScopeViewItems)(flashingCell.Scope, this.api), label: 'Trigger' },
+                {
+                    label: 'Columns',
+                    name: 'Columns',
+                    view: FlashingCellScopeWizardSection_1.FlashingCellScopeSummaryView,
+                },
                 {
                     ...(0, getRuleViewItems_1.getRuleViewItems)(flashingCell.Rule, this.api),
                     label: 'Rule',

package/src/Strategy/FormatColumnModule.js

@@ -103,7 +103,7 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 },
                 (0, FormatColumnFormatWizardSection_1.hasFormatColumnDisplayFormat)(formatColumn) && {
                     name: 'Display Format',
-                    values: [(0, FormatColumnFormatWizardSection_1.getFormatColumnFormatSummaryValue)(formatColumn)],
+                    values: (0, FormatColumnFormatWizardSection_1.getFormatColumnFormatSummaryTagValues)(formatColumn),
                 },
                 (0, getObjectTagsViewItems_1.getObjectTagsViewItems)(formatColumn, this.api),
                 {

package/src/Strategy/FreeTextColumnModule.js

@@ -6,6 +6,7 @@ const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
 const FreeTextColumnRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/FreeTextColumnRedux"));
 const FreeTextColumnWizard_1 = require("../View/FreeTextColumn/Wizard/FreeTextColumnWizard");
+const getFreeTextColumnSettingsTags_1 = require("../View/FreeTextColumn/Utilities/getFreeTextColumnSettingsTags");
 const getObjectTagsViewItems_1 = require("../Utilities/getObjectTagsViewItems");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
@@ -69,36 +70,45 @@ class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         };
     }
     toView(freeTextColumn) {
+        const settingsTags = (0, getFreeTextColumnSettingsTags_1.getFreeTextColumnSettingsTags)(freeTextColumn.FreeTextColumnSettings);
+        const items = [
+            {
+                name: 'Settings',
+                label: 'Column Id',
+                values: [freeTextColumn.ColumnId],
+                tagVariant: 'column',
+            },
+            freeTextColumn.FriendlyName && {
+                name: 'Settings',
+                label: 'Column Name',
+                values: [freeTextColumn.FriendlyName],
+            },
+            {
+                name: 'Settings',
+                label: 'Data Type',
+                values: [freeTextColumn.FreeTextColumnSettings.DataType ?? 'Not specified'],
+            },
+            Boolean(freeTextColumn.DefaultValue) && {
+                name: 'Settings',
+                label: 'Default Value',
+                values: [freeTextColumn.DefaultValue],
+            },
+            freeTextColumn.TextEditor && {
+                name: 'Settings',
+                label: 'Editor Type',
+                values: [freeTextColumn.TextEditor],
+            },
+        ].filter(Boolean);
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(settingsTags)) {
+            items.push({
+                name: 'Settings',
+                values: settingsTags,
+            });
+        }
+        items.push((0, getObjectTagsViewItems_1.getObjectTagsViewItems)(freeTextColumn, this.api));
         return {
             abObject: freeTextColumn,
-            items: [
-                {
-                    name: 'Settings',
-                    label: 'Column Id',
-                    values: [freeTextColumn.ColumnId],
-                },
-                freeTextColumn.FriendlyName && {
-                    name: 'Settings',
-                    label: 'Column Name',
-                    values: [freeTextColumn.FriendlyName],
-                },
-                {
-                    name: 'Settings',
-                    label: 'Data Type',
-                    values: [freeTextColumn.FreeTextColumnSettings.DataType ?? 'Not specified'],
-                },
-                Boolean(freeTextColumn.DefaultValue) && {
-                    name: 'Settings',
-                    label: 'Default Value',
-                    values: [freeTextColumn.DefaultValue],
-                },
-                freeTextColumn.TextEditor && {
-                    name: 'Editor Type',
-                    label: 'Editor',
-                    values: [freeTextColumn.TextEditor],
-                },
-                (0, getObjectTagsViewItems_1.getObjectTagsViewItems)(freeTextColumn, this.api),
-            ].filter(Boolean),
+            items: items.filter(Boolean),
         };
     }
     toViewAll() {

package/src/Strategy/Interface/IModule.d.ts

@@ -58,7 +58,9 @@ export interface AdaptableObjectItemView {
      * Values used for the component.
      * Could be later extended to include an 'onChange' prop.
      */
-    values?: (string | number)[];
+    values?: (string | number | React.ReactNode)[];
+    /** When `'column'`, tag values render with column styling. */
+    tagVariant?: 'default' | 'column';
 }
 export interface AdaptableObjectView {
     /**

package/src/Strategy/LayoutModule.js

@@ -12,8 +12,9 @@ const EditCurrentLayoutButton_1 = require("../View/Layout/EditCurrentLayoutButto
 const LayoutCloneButton_1 = require("../View/Layout/LayoutCloneButton");
 const LayoutWizard_1 = require("../View/Layout/Wizard/LayoutWizard");
 const getLayoutFilterViewItems_1 = require("./Utilities/Layout/getLayoutFilterViewItems");
-const getLayoutSortViewItems_1 = require("./Utilities/Layout/getLayoutSortViewItems");
-const AggregationColumns_1 = require("../AdaptableState/Common/AggregationColumns");
+const columnsSummaryHelpers_1 = require("./Utilities/Layout/columnsSummaryHelpers");
+const rowGroupSummaryHelpers_1 = require("./Utilities/Layout/rowGroupSummaryHelpers");
+const aggregationSummaryHelpers_1 = require("./Utilities/Layout/aggregationSummaryHelpers");
 const windowFactory_1 = require("../View/Components/Popups/WindowPopups/windowFactory");
 const flattenDeep_1 = tslib_1.__importDefault(require("../Utilities/utils/flattenDeep"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
@@ -281,25 +282,9 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return this.getModuleAdaptableObjects().map((layout) => this.toView(layout));
     }
     toView(layout) {
-        const maxColumnsToDisplay = this.api.optionsApi.getLayoutOptions().layoutViewOptions?.maxColumnsToDisplay ?? 10;
         const columnIdToFriendlyName = (columnId) => {
             return this.api.columnApi.getFriendlyNameForColumnId(columnId);
         };
-        let columns = (layout.TableColumns || [])
-            .filter((c) => !this.api.columnApi.isAutoRowGroupColumn(c))
-            .filter((c) => !this.api.columnApi.isPivotResultColumn(c))
-            .filter((c) => !this.api.columnApi.isSelectionColumn(c));
-        if (columns.length >
-            maxColumnsToDisplay + 1 /* +1 is to show tag only beginning with 2, 'other 2' */) {
-            const extraColumns = columns.length - maxColumnsToDisplay;
-            const firstNColumns = columns
-                .slice(0, maxColumnsToDisplay)
-                .map((column) => columnIdToFriendlyName(column));
-            columns = [...firstNColumns, `and ${extraColumns} more`];
-        }
-        else {
-            columns = columns.map((column) => columnIdToFriendlyName(column));
-        }
         return {
             items: [
                 {
@@ -316,59 +301,23 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                  * The generated pivot columns cannot be prevented from beeing on the layout object.
                  * When they are removed/not added, they no longer appear in the grid.
                  */
-                !(0, LayoutHelpers_1.isPivotLayout)(layout) && {
-                    name: 'Columns',
-                    values: columns,
-                },
-                layout.ColumnSorts?.length && (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, this.api),
+                ...(!(0, LayoutHelpers_1.isPivotLayout)(layout)
+                    ? (0, columnsSummaryHelpers_1.getLayoutTableColumnsViewItems)(layout, this.api, {
+                        maxColumnsToDisplay: this.api.optionsApi.getAdaptableOptions()?.layoutOptions?.layoutViewOptions
+                            ?.maxColumnsToDisplay,
+                    })
+                    : []),
                 layout?.ColumnFilters?.length && (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, this.api),
-                layout?.RowGroupedColumns?.length && {
-                    name: 'Row Groups',
-                    values: layout.RowGroupedColumns.map((colId) => columnIdToFriendlyName(colId)),
-                },
+                ...(!(0, LayoutHelpers_1.isPivotLayout)(layout) ? (0, rowGroupSummaryHelpers_1.getLayoutTableRowGroupViewItems)(layout, this.api) : []),
                 layout?.PivotColumns?.length && {
                     name: 'Pivot Columns',
                     values: layout.PivotColumns.map((colId) => columnIdToFriendlyName(colId)),
+                    tagVariant: 'column',
                 },
-                layout?.PivotGroupedColumns?.length && {
-                    name: 'Pivot Row Groups',
-                    values: layout.PivotGroupedColumns.map((colId) => columnIdToFriendlyName(colId)),
-                },
-                layout?.TableAggregationColumns &&
-                    layout.TableAggregationColumns.length && {
-                    name: 'Aggregations',
-                    values: layout.TableAggregationColumns.map(({ ColumnId, AggFunc: aggFn }) => {
-                        if (ColumnId === 'Source' || ColumnId === 'Uuid' || ColumnId === 'AdaptableVersion') {
-                            return '';
-                        }
-                        let aggFnName = '';
-                        if (typeof aggFn === 'string') {
-                            aggFnName = aggFn;
-                        }
-                        else if (typeof aggFn === 'object' && aggFn.type === 'weightedAverage') {
-                            aggFnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
-                        }
-                        return `${aggFnName}(${columnIdToFriendlyName(ColumnId)})`;
-                    }).filter(Boolean),
-                },
-                (0, LayoutHelpers_1.isPivotLayout)(layout) &&
-                    layout?.PivotAggregationColumns &&
-                    layout.PivotAggregationColumns.length && {
-                    name: 'Pivot Aggregations',
-                    values: layout.PivotAggregationColumns.map(({ ColumnId, AggFunc: aggFn }) => {
-                        if (ColumnId === 'Source' || ColumnId === 'Uuid' || ColumnId === 'AdaptableVersion') {
-                            return '';
-                        }
-                        let aggFnName = '';
-                        if (typeof aggFn === 'string') {
-                            aggFnName = aggFn;
-                        }
-                        else if (typeof aggFn === 'object' && aggFn.type === 'weightedAverage') {
-                            aggFnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
-                        }
-                        return `${aggFnName}(${columnIdToFriendlyName(ColumnId)})`;
-                    }).filter(Boolean),
-                },
+                (0, LayoutHelpers_1.isPivotLayout)(layout) && (0, columnsSummaryHelpers_1.getLayoutPivotSortingViewItem)(layout, this.api),
+                ...((0, LayoutHelpers_1.isPivotLayout)(layout) ? (0, rowGroupSummaryHelpers_1.getLayoutPivotRowGroupViewItems)(layout, this.api) : []),
+                ...(!(0, LayoutHelpers_1.isPivotLayout)(layout) ? (0, aggregationSummaryHelpers_1.getLayoutTableAggregationViewItems)(layout, this.api) : []),
+                ...((0, LayoutHelpers_1.isPivotLayout)(layout) ? (0, aggregationSummaryHelpers_1.getLayoutPivotAggregationViewItems)(layout, this.api) : []),
                 layout?.GridFilter &&
                     StringExtensions_1.default.IsNotNullOrEmpty(layout.GridFilter.Expression) &&
                     (0, getGridFilterPreview_1.getGridFilterViewItems)(layout),