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

package/src/Strategy/StyledColumnModule.js

@@ -1,7 +1,8 @@
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import * as StyledColumnRedux from '../Redux/ActionsReducers/StyledColumnRedux';
-import { StyledColumnWizard } from '../View/StyledColumn/Wizard/StyledColumnWizard';
+import { StyledColumnWizard, getStyledColumnEditDefaultSectionName } from '../View/StyledColumn/Wizard/StyledColumnWizard';
+import { summaryStringsToTagContents } from '../View/Wizard/SummaryColorTag';
 import { renderStyledColumnRangesSummary, getStyledColumnPercentBarStyleViewValues, } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection';
 import { getStyledColumnGradientStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnWizardGradientSection';
 import { getStyledColumnBulletStyleViewValues, StyledColumnBulletRangesView, } from '../View/StyledColumn/Wizard/StyledColumnWizardBulletSection';
@@ -80,26 +81,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
                 // Edit is common
                 if (styledColumn) {
                     if (!styledColumn.IsReadOnly) {
-                        let defaultCurrentSectionName = undefined;
-                        if (styledColumn.BadgeStyle) {
-                            defaultCurrentSectionName = 'Badges';
-                        }
-                        else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
-                            // Gradient + Percent Bar wizards now lead with the Ranges step.
-                            defaultCurrentSectionName = 'Ranges';
-                        }
-                        else if (styledColumn.BulletChartStyle) {
-                            defaultCurrentSectionName = 'Ranges';
-                        }
-                        else if (styledColumn.RangeBarStyle) {
-                            defaultCurrentSectionName = 'Style';
-                        }
-                        else if (styledColumn.IconStyle) {
-                            defaultCurrentSectionName = 'Mappings';
-                        }
-                        else {
-                            defaultCurrentSectionName = 'Style';
-                        }
+                        const defaultCurrentSectionName = getStyledColumnEditDefaultSectionName(styledColumn);
                         const popupParam = {
                             action: 'Edit',
                             source: 'ColumnMenu',
@@ -291,7 +273,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
             if (styledColumn.PercentBarStyle) {
                 specificTypeItems.push({
                     name: 'Style',
-                    values: getStyledColumnPercentBarStyleViewValues(styledColumn),
+                    values: summaryStringsToTagContents(getStyledColumnPercentBarStyleViewValues(styledColumn)),
                 });
                 specificTypeItems.push({
                     name: 'Preview',
@@ -301,7 +283,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
             if (styledColumn.GradientStyle) {
                 specificTypeItems.push({
                     name: 'Style',
-                    values: getStyledColumnGradientStyleViewValues(styledColumn),
+                    values: summaryStringsToTagContents(getStyledColumnGradientStyleViewValues(styledColumn)),
                 });
                 specificTypeItems.push({
                     name: 'Preview',
@@ -316,7 +298,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Style',
-                values: getStyledColumnBulletStyleViewValues(styledColumn),
+                values: summaryStringsToTagContents(getStyledColumnBulletStyleViewValues(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -326,7 +308,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
         if (styledColumn.RatingStyle) {
             specificTypeItems.push({
                 name: 'Style',
-                values: getStyledColumnRatingStyleViewValues(styledColumn),
+                values: summaryStringsToTagContents(getStyledColumnRatingStyleViewValues(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -340,7 +322,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Display',
-                values: getStyledColumnRangeBarDisplayViewValues(styledColumn),
+                values: summaryStringsToTagContents(getStyledColumnRangeBarDisplayViewValues(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -354,7 +336,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Style',
-                values: getStyledColumnIconStyleViewValues(styledColumn),
+                values: summaryStringsToTagContents(getStyledColumnIconStyleViewValues(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -368,7 +350,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
             });
             specificTypeItems.push({
                 name: 'Style',
-                values: getStyledColumnBadgeStyleViewValues(styledColumn, this.api),
+                values: summaryStringsToTagContents(getStyledColumnBadgeStyleViewValues(styledColumn, this.api)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -378,7 +360,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
         if (styledColumn.SparklineStyle) {
             specificTypeItems.push({
                 name: 'Style',
-                values: getStyledColumnSparklineStyleViewValues(styledColumn),
+                values: summaryStringsToTagContents(getStyledColumnSparklineStyleViewValues(styledColumn)),
             });
             specificTypeItems.push({
                 name: 'Preview',
@@ -400,6 +382,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
                 {
                     name: 'Column',
                     values: [this.api.columnApi.getFriendlyNameForColumnId(styledColumn.ColumnId)],
+                    tagVariant: 'column',
                 },
                 {
                     name: 'Rows',

package/src/Strategy/Utilities/CustomSort/getCustomSortColumnViewItems.d.ts

@@ -2,4 +2,5 @@ import { AdaptableApi, CustomSort } from '../../../../types';
 export declare const getCustomSortColumnViewItems: (customSort: CustomSort, api: AdaptableApi) => {
     name: string;
     values: string[];
+    tagVariant: "column";
 };

package/src/Strategy/Utilities/CustomSort/getCustomSortColumnViewItems.js

@@ -2,5 +2,6 @@ export const getCustomSortColumnViewItems = (customSort, api) => {
     return {
         name: 'Column',
         values: [api.columnApi.getFriendlyNameForColumnId(customSort.ColumnId)],
+        tagVariant: 'column',
     };
 };

package/src/Strategy/Utilities/Export/getExportColumnsViewItems.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
 import { AdaptableObjectItemView } from '../../Interface/IModule';
 import { AdaptableApi, Report } from '../../../../types';
 export declare const getExportColumnsViewItems: (report: Report, api: AdaptableApi) => AdaptableObjectItemView;
+export declare const renderExportColumnsView: (report: Report, api: AdaptableApi) => React.ReactNode;

package/src/Strategy/Utilities/Export/getExportColumnsViewItems.js

@@ -1,6 +1,20 @@
+import * as React from 'react';
+import { TagList } from '../../../components/Tag/Tag';
+import { reportColumnTagsUseColumnVariant } from '../../../components/Tag/columnScopeTagHelpers';
 export const getExportColumnsViewItems = (report, api) => {
     return {
         name: 'Columns',
         values: [...api.exportApi.internalApi.getReportColumnScopeShortDescription(report)],
+        tagVariant: reportColumnTagsUseColumnVariant(report) ? 'column' : undefined,
     };
 };
+export const renderExportColumnsView = (report, api) => {
+    const { values } = getExportColumnsViewItems(report, api);
+    if (!values?.length) {
+        return null;
+    }
+    return React.createElement(TagList, {
+        tags: values,
+        variant: reportColumnTagsUseColumnVariant(report) ? 'column' : undefined,
+    });
+};

package/src/Strategy/Utilities/Export/getExportRowsViewItems.d.ts

@@ -4,3 +4,4 @@ export declare const getExportRowsViewItems: (report: Report, api: AdaptableApi)
     name: string;
     view: React.JSX.Element;
 };
+export declare const renderExportRowsView: (report: Report, api: AdaptableApi) => React.ReactNode;

package/src/Strategy/Utilities/Export/getExportRowsViewItems.js

@@ -14,3 +14,6 @@ export const getExportRowsViewItems = (report, api) => {
         view: _jsx(Tag, { children: element }),
     };
 };
+export const renderExportRowsView = (report, api) => {
+    return getExportRowsViewItems(report, api).view;
+};

package/src/Strategy/Utilities/Layout/aggregationSummaryHelpers.d.ts

@@ -0,0 +1,11 @@
+import { AdaptableApi, PivotLayout, TableLayout } from '../../../types';
+export declare function getTableAggregationSummaryValues(layout: TableLayout, api: AdaptableApi): string[];
+export declare function getPivotAggregationSummaryValues(layout: PivotLayout, api: AdaptableApi): string[];
+export declare function getLayoutTableAggregationViewItems(layout: TableLayout, api: AdaptableApi): {
+    name: string;
+    values: string[];
+}[];
+export declare function getLayoutPivotAggregationViewItems(layout: PivotLayout, api: AdaptableApi): {
+    name: string;
+    values: string[];
+}[];

package/src/Strategy/Utilities/Layout/aggregationSummaryHelpers.js

@@ -0,0 +1,105 @@
+import { WEIGHTED_AVERAGE_AGG_FN_NAME } from '../../../AdaptableState/Common/AggregationColumns';
+const IGNORED_AGG_COLUMN_IDS = new Set(['Source', 'Uuid', 'AdaptableVersion']);
+const GRAND_TOTAL_ROW_LABELS = {
+    off: 'None',
+    top: 'Top',
+    bottom: 'Bottom',
+    pinnedTop: 'Pinned Top',
+    pinnedBottom: 'Pinned Bottom',
+};
+const PIVOT_LAYOUT_TOTAL_LABELS = {
+    off: 'None',
+    before: 'Before',
+    after: 'After',
+};
+function getGrandTotalRowKey(layout) {
+    const value = layout.GrandTotalRow;
+    if (value == null || value === false) {
+        return 'off';
+    }
+    return value;
+}
+function getGrandTotalRowLabel(layout) {
+    return GRAND_TOTAL_ROW_LABELS[getGrandTotalRowKey(layout)];
+}
+function getPivotLayoutTotalKey(value) {
+    if (value == null || value === false) {
+        return 'off';
+    }
+    if (value === 'before') {
+        return 'before';
+    }
+    if (value === 'after') {
+        return 'after';
+    }
+    return 'off';
+}
+function getPivotLayoutTotalLabel(value) {
+    return PIVOT_LAYOUT_TOTAL_LABELS[getPivotLayoutTotalKey(value)];
+}
+function formatAggregationTag(columnId, aggFn, columnIdToFriendlyName) {
+    if (IGNORED_AGG_COLUMN_IDS.has(columnId)) {
+        return null;
+    }
+    let aggFnName = '';
+    if (typeof aggFn === 'string') {
+        aggFnName = aggFn;
+    }
+    else if (typeof aggFn === 'object' && aggFn?.type === 'weightedAverage') {
+        aggFnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
+    }
+    if (!aggFnName) {
+        return null;
+    }
+    return `${aggFnName}(${columnIdToFriendlyName(columnId)})`;
+}
+export function getTableAggregationSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = (layout.TableAggregationColumns || [])
+        .map(({ ColumnId, AggFunc }) => formatAggregationTag(ColumnId, AggFunc, columnIdToFriendlyName))
+        .filter((value) => Boolean(value));
+    if (getGrandTotalRowKey(layout) !== 'off') {
+        values.push(`Grand Total Row: ${getGrandTotalRowLabel(layout)}`);
+    }
+    return values;
+}
+export function getPivotAggregationSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = (layout.PivotAggregationColumns || [])
+        .map(({ ColumnId, AggFunc }) => formatAggregationTag(ColumnId, AggFunc, columnIdToFriendlyName))
+        .filter((value) => Boolean(value));
+    if (getGrandTotalRowKey(layout) !== 'off') {
+        values.push(`Grand Total Row: ${getGrandTotalRowLabel(layout)}`);
+    }
+    if (getPivotLayoutTotalKey(layout.PivotGrandTotal) !== 'off') {
+        values.push(`Pivot Grand Total: ${getPivotLayoutTotalLabel(layout.PivotGrandTotal)}`);
+    }
+    if (getPivotLayoutTotalKey(layout.PivotColumnTotal) !== 'off') {
+        values.push(`Pivot Column Total: ${getPivotLayoutTotalLabel(layout.PivotColumnTotal)}`);
+    }
+    return values;
+}
+export function getLayoutTableAggregationViewItems(layout, api) {
+    const values = getTableAggregationSummaryValues(layout, api);
+    if (!values.length) {
+        return [];
+    }
+    return [
+        {
+            name: 'Aggregations',
+            values,
+        },
+    ];
+}
+export function getLayoutPivotAggregationViewItems(layout, api) {
+    const values = getPivotAggregationSummaryValues(layout, api);
+    if (!values.length) {
+        return [];
+    }
+    return [
+        {
+            name: 'Aggregations',
+            values,
+        },
+    ];
+}

package/src/Strategy/Utilities/Layout/columnsSummaryHelpers.d.ts

@@ -0,0 +1,48 @@
+import { AdaptableApi, Layout, TableLayout } from '../../../types';
+export declare const TABLE_COLUMNS_SETTINGS_PANEL_LABELS: {
+    visibility: string;
+    pinning: string;
+    sizing: string;
+    sorting: string;
+};
+export declare const TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS: {
+    visibility: string;
+    pinning: string;
+    sizing: string;
+    sorting: string;
+};
+export type TableColumnsSummaryLabels = {
+    readonly visibility: string;
+    readonly pinning: string;
+    readonly sizing: string;
+    readonly sorting: string;
+};
+export type TableColumnsSummaryGroup = {
+    label: string;
+    values: string[];
+    emptyLabel: string;
+};
+export declare function getTableColumnsVisibilitySummaryValues(layout: TableLayout, api: AdaptableApi): string[];
+export declare function getTableColumnsPinningSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getTableColumnsSizingSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getTableColumnsSortingSummaryValues(layout: Layout, api: AdaptableApi): string[];
+/** Matches legacy Layout settings panel behaviour (`layoutViewOptions.maxColumnsToDisplay`). */
+export declare const DEFAULT_LAYOUT_VIEW_MAX_COLUMNS = 10;
+/**
+ * Collapse a long column list for compact views (e.g. Layout settings panel).
+ * Keeps all items when the overflow is only 1 column; otherwise shows `+N more`.
+ */
+export declare function truncateColumnSummaryValues(values: string[], maxToDisplay?: number): string[];
+export declare function getTableColumnsSummaryGroups(layout: TableLayout, api: AdaptableApi, labels?: TableColumnsSummaryLabels): TableColumnsSummaryGroup[];
+export declare function getLayoutTableColumnsViewItems(layout: Layout, api: AdaptableApi, options?: {
+    maxColumnsToDisplay?: number;
+}): {
+    name: string;
+    values: string[];
+    tagVariant: "column";
+}[];
+export declare function getLayoutPivotSortingViewItem(layout: Layout, api: AdaptableApi): {
+    name: string;
+    values: string[];
+    tagVariant: "column";
+};

package/src/Strategy/Utilities/Layout/columnsSummaryHelpers.js

@@ -0,0 +1,166 @@
+export const TABLE_COLUMNS_SETTINGS_PANEL_LABELS = {
+    visibility: 'Columns',
+    pinning: 'Pinning',
+    sizing: 'Sizing',
+    sorting: 'Sorting',
+};
+export const TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS = {
+    visibility: 'Visibility and Order',
+    pinning: 'Pinning',
+    sizing: 'Sizing',
+    sorting: 'Sorting',
+};
+function resolveDefaultColumnWidth(api) {
+    return (columnId) => api.internalApi.getAdaptableInstance().getDefaultColumnWidthForCol(columnId);
+}
+function hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return false;
+    }
+    if (sizing.Flex != null) {
+        return true;
+    }
+    if (sizing.MinWidth != null || sizing.MaxWidth != null) {
+        return true;
+    }
+    if (sizing.Width != null) {
+        return sizing.Width !== resolveDefaultWidth(columnId);
+    }
+    return false;
+}
+function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+function formatExplicitColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return '';
+    }
+    const parts = [];
+    if (sizing?.Flex != null) {
+        parts.push(`flex ${sizing.Flex}`);
+    }
+    else if (sizing?.Width != null && sizing.Width !== resolveDefaultWidth(columnId)) {
+        parts.push(String(sizing.Width));
+    }
+    if (sizing?.MinWidth != null) {
+        parts.push(`min ${sizing.MinWidth}`);
+    }
+    if (sizing?.MaxWidth != null) {
+        parts.push(`max ${sizing.MaxWidth}`);
+    }
+    return parts.join(', ');
+}
+function getLayoutTableColumnIds(layout, api) {
+    return (layout.TableColumns ?? [])
+        .filter((columnId) => !api.columnApi.isAutoRowGroupColumn(columnId))
+        .filter((columnId) => !api.columnApi.isPivotResultColumn(columnId))
+        .filter((columnId) => !api.columnApi.isSelectionColumn(columnId));
+}
+function getLayoutPinnedColumnIds(layout, side) {
+    const pinning = layout.ColumnPinning ?? {};
+    return Object.entries(pinning)
+        .filter(([, pin]) => pin === side)
+        .map(([columnId]) => columnId);
+}
+export function getTableColumnsVisibilitySummaryValues(layout, api) {
+    return getLayoutTableColumnIds(layout, api).map((columnId) => {
+        const name = api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+        const customHeader = layout.ColumnHeaders?.[columnId]?.trim();
+        if (customHeader) {
+            return `${name} (header: ${customHeader})`;
+        }
+        return name;
+    });
+}
+export function getTableColumnsPinningSummaryValues(layout, api) {
+    const leftPinned = getLayoutPinnedColumnIds(layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(layout, 'right');
+    return [
+        ...leftPinned.map((columnId) => `${api.columnApi.getFriendlyNameForColumnId(columnId, layout)} (left)`),
+        ...rightPinned.map((columnId) => `${api.columnApi.getFriendlyNameForColumnId(columnId, layout)} (right)`),
+    ];
+}
+export function getTableColumnsSizingSummaryValues(layout, api) {
+    const resolveDefaultWidth = resolveDefaultColumnWidth(api);
+    return getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth).map((columnId) => {
+        const name = api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+        const sizingBrief = formatExplicitColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth);
+        return `${name} (${sizingBrief})`;
+    });
+}
+export function getTableColumnsSortingSummaryValues(layout, api) {
+    return (layout.ColumnSorts ?? []).map((sort) => `[${api.columnApi.getFriendlyNameForColumnId(sort.ColumnId, layout)}: ${sort.SortOrder}]`);
+}
+/** Matches legacy Layout settings panel behaviour (`layoutViewOptions.maxColumnsToDisplay`). */
+export const DEFAULT_LAYOUT_VIEW_MAX_COLUMNS = 10;
+/**
+ * Collapse a long column list for compact views (e.g. Layout settings panel).
+ * Keeps all items when the overflow is only 1 column; otherwise shows `+N more`.
+ */
+export function truncateColumnSummaryValues(values, maxToDisplay = DEFAULT_LAYOUT_VIEW_MAX_COLUMNS) {
+    if (maxToDisplay <= 0 || values.length <= maxToDisplay + 1) {
+        return values;
+    }
+    const extra = values.length - maxToDisplay;
+    return [...values.slice(0, maxToDisplay), `+${extra} more`];
+}
+export function getTableColumnsSummaryGroups(layout, api, labels = TABLE_COLUMNS_SETTINGS_PANEL_LABELS) {
+    return [
+        {
+            label: labels.visibility,
+            values: getTableColumnsVisibilitySummaryValues(layout, api),
+            emptyLabel: 'No columns in this Layout',
+        },
+        {
+            label: labels.pinning,
+            values: getTableColumnsPinningSummaryValues(layout, api),
+            emptyLabel: 'No columns pinned in this Layout',
+        },
+        {
+            label: labels.sizing,
+            values: getTableColumnsSizingSummaryValues(layout, api),
+            emptyLabel: 'All columns use default sizing in this Layout',
+        },
+        {
+            label: labels.sorting,
+            values: getTableColumnsSortingSummaryValues(layout, api),
+            emptyLabel: 'No column sorts in this Layout',
+        },
+    ];
+}
+export function getLayoutTableColumnsViewItems(layout, api, options) {
+    const maxColumnsToDisplay = options?.maxColumnsToDisplay ?? DEFAULT_LAYOUT_VIEW_MAX_COLUMNS;
+    const optionalRowLabels = new Set([
+        TABLE_COLUMNS_SETTINGS_PANEL_LABELS.pinning,
+        TABLE_COLUMNS_SETTINGS_PANEL_LABELS.sizing,
+        TABLE_COLUMNS_SETTINGS_PANEL_LABELS.sorting,
+    ]);
+    return getTableColumnsSummaryGroups(layout, api).flatMap(({ label, values, emptyLabel }) => {
+        if (optionalRowLabels.has(label) && !values.length) {
+            return [];
+        }
+        const resolvedValues = values.length ? values : [emptyLabel];
+        const displayValues = label === TABLE_COLUMNS_SETTINGS_PANEL_LABELS.visibility
+            ? truncateColumnSummaryValues(resolvedValues, maxColumnsToDisplay)
+            : resolvedValues;
+        return [
+            {
+                name: label,
+                values: displayValues,
+                tagVariant: 'column',
+            },
+        ];
+    });
+}
+export function getLayoutPivotSortingViewItem(layout, api) {
+    const values = getTableColumnsSortingSummaryValues(layout, api);
+    if (!values.length) {
+        return null;
+    }
+    return {
+        name: 'Sorting',
+        values,
+        tagVariant: 'column',
+    };
+}

package/src/Strategy/Utilities/Layout/getLayoutSortViewItems.d.ts

@@ -2,4 +2,5 @@ import { AdaptableApi, Layout } from '../../../types';
 export declare const getLayoutSortViewItems: (layout: Layout, api: AdaptableApi) => {
     name: string;
     values: string[];
+    tagVariant: "column";
 };

package/src/Strategy/Utilities/Layout/getLayoutSortViewItems.js

@@ -5,5 +5,6 @@ export const getLayoutSortViewItems = (layout, api) => {
     return {
         name: 'Sort',
         values: (layout.ColumnSorts ?? []).map((customSort) => `[${columnIdToFriendlyName(customSort.ColumnId)}: ${customSort.SortOrder}]`),
+        tagVariant: 'column',
     };
 };

package/src/Strategy/Utilities/Layout/rowGroupSummaryHelpers.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AdaptableApi, Layout, TableLayout } from '../../../types';
+export declare const ROW_GROUP_DISPLAY_TYPE_LABELS: Record<NonNullable<TableLayout['RowGroupDisplayType']>, string>;
+export declare const ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS: Record<NonNullable<TableLayout['RowGroupDisplayType']>, string>;
+export declare const ROW_GROUP_BEHAVIOR_LABELS: Record<TableLayout['RowGroupValues']['RowGroupDefaultBehavior'], string>;
+export declare const ROW_GROUP_BEHAVIOR_DESCRIPTIONS: Record<TableLayout['RowGroupValues']['RowGroupDefaultBehavior'], string>;
+export declare function getRowGroupDisplayTypeLabel(layout: Layout): string;
+export declare function getRowGroupDisplayTypeDescription(layout: Layout): string;
+export declare function getRowGroupBehaviorLabel(layout: Layout): string;
+export declare function getRowGroupBehaviorDescription(layout: Layout): string;
+export declare function getTableRowGroupSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getLayoutTableRowGroupViewItems(layout: Layout, api: AdaptableApi): {
+    name: string;
+    view: () => React.FunctionComponentElement<{
+        layout: Layout;
+        api: AdaptableApi;
+    }>;
+}[];
+export declare function getPivotRowGroupSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getLayoutPivotRowGroupViewItems(layout: Layout, api: AdaptableApi): {
+    name: string;
+    view: () => React.FunctionComponentElement<{
+        layout: Layout;
+        api: AdaptableApi;
+    }>;
+}[];

package/src/Strategy/Utilities/Layout/rowGroupSummaryHelpers.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { PivotRowGroupSummaryView, TableRowGroupSummaryView, } from '../../../View/Wizard/rowGroupSummaryTags';
+export const ROW_GROUP_DISPLAY_TYPE_LABELS = {
+    single: 'Single Column',
+    multi: 'Multiple Columns',
+    groupRows: 'Full Width Group Rows',
+};
+export const ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS = {
+    single: 'All Row Grouped Columns display in one hierarchical Column',
+    multi: 'Each Row Grouped Column displays in its own, separate, Column',
+    groupRows: 'Row groups display as full-width rows (no group column and no aggregations)',
+};
+export const ROW_GROUP_BEHAVIOR_LABELS = {
+    'always-collapsed': 'All Collapsed',
+    'always-expanded': 'All Expanded',
+    expanded: 'Mostly Expanded',
+    collapsed: 'Mostly Collapsed',
+};
+export const ROW_GROUP_BEHAVIOR_DESCRIPTIONS = {
+    'always-collapsed': 'All Grouped Rows are always collapsed',
+    'always-expanded': 'All Grouped Rows are always expanded',
+    expanded: 'All Grouped Rows expanded, other than those collapsed when Layout last displayed',
+    collapsed: 'All Grouped Rows collapsed, other than those expanded when Layout last displayed',
+};
+export function getRowGroupDisplayTypeLabel(layout) {
+    const displayType = layout.RowGroupDisplayType ?? 'single';
+    return ROW_GROUP_DISPLAY_TYPE_LABELS[displayType];
+}
+export function getRowGroupDisplayTypeDescription(layout) {
+    const displayType = layout.RowGroupDisplayType ?? 'single';
+    return ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS[displayType];
+}
+export function getRowGroupBehaviorLabel(layout) {
+    const behavior = layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed';
+    return ROW_GROUP_BEHAVIOR_LABELS[behavior];
+}
+export function getRowGroupBehaviorDescription(layout) {
+    const behavior = layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed';
+    return ROW_GROUP_BEHAVIOR_DESCRIPTIONS[behavior];
+}
+export function getTableRowGroupSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = [];
+    if (!layout.RowGroupedColumns?.length) {
+        values.push('No Row Grouped Columns');
+    }
+    else {
+        layout.RowGroupedColumns.forEach((colId) => {
+            values.push(columnIdToFriendlyName(colId));
+        });
+    }
+    values.push(`Display Type: ${getRowGroupDisplayTypeLabel(layout)}`);
+    values.push(`Behaviour: ${getRowGroupBehaviorLabel(layout)}`);
+    return values;
+}
+export function getLayoutTableRowGroupViewItems(layout, api) {
+    return [
+        {
+            name: 'Row Groups',
+            view: () => React.createElement(TableRowGroupSummaryView, { layout, api }),
+        },
+    ];
+}
+export function getPivotRowGroupSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = [];
+    if (!layout.PivotGroupedColumns?.length) {
+        values.push('No Row Grouped Columns');
+    }
+    else {
+        layout.PivotGroupedColumns.forEach((colId) => {
+            values.push(columnIdToFriendlyName(colId));
+        });
+    }
+    values.push(`Behaviour: ${getRowGroupBehaviorLabel(layout)}`);
+    return values;
+}
+export function getLayoutPivotRowGroupViewItems(layout, api) {
+    return [
+        {
+            name: 'Row Groups',
+            view: () => React.createElement(PivotRowGroupSummaryView, { layout, api }),
+        },
+    ];
+}

package/src/Utilities/Defaults/DefaultSettingsPanel.d.ts

@@ -1,5 +1,3 @@
-import { AdaptableSettingsPanel } from '../../AdaptableState/Common/Types';
-/**
- * This constant determines the items, and order, which appear in Settings Panel
- */
-export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS: (AdaptableSettingsPanel | '-')[];
+import { SettingsPanelNavigation, SettingsPanelNavigationGroup } from '../../AdaptableOptions/SettingsPanelOptions';
+export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS: SettingsPanelNavigationGroup[];
+export declare const buildDefaultSettingsPanelNavigation: (customPanelNames?: string[]) => SettingsPanelNavigation;