@adaptabletools/adaptable 20.0.4-canary.3 → 20.0.5-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "20.0.4-canary.3",
+  "version": "20.0.5-canary.0",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/Api/Implementation/ColumnApiImpl.d.ts

@@ -11,6 +11,7 @@ export declare function generateAutoTreeSingleColumn(): AdaptableColumn;
 export declare function generateAutoRowGroupColumnForColumn(column: AdaptableColumn): AdaptableColumn;
 export declare function getFriendlyNameForPivotResultColumn(columnId: string): string;
 export declare function isPivotResultColumn(columnId: string): boolean;
+export declare function isPivotGrandTotalColumn(columnId: string): boolean;
 export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     internalApi: ColumnInternalApi;
     constructor(_adaptable: IAdaptable);

package/src/Api/Implementation/ColumnApiImpl.js

@@ -63,6 +63,13 @@ export function generateAutoRowGroupColumnForColumn(column) {
     };
 }
 export function getFriendlyNameForPivotResultColumn(columnId) {
+    if (isPivotGrandTotalColumn(columnId)) {
+        return `[Grand Total] ${columnId
+            .split('_')
+            .slice(2)
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ')}`;
+    }
     return `[Pivot] ${columnId
         .split('_')
         .slice(1)
@@ -73,6 +80,9 @@ export function isPivotResultColumn(columnId) {
     // put this here as there might be other indicators we are not aware of?
     return columnId?.startsWith(GeneralConstants.AG_GRID_PIVOT_COLUMN);
 }
+export function isPivotGrandTotalColumn(columnId) {
+    return columnId?.startsWith(GeneralConstants.AG_GRID_PIVOT_GRAND_TOTAL_COLUMN);
+}
 export class ColumnApiImpl extends ApiBase {
     constructor(_adaptable) {
         super(_adaptable);
@@ -136,7 +146,7 @@ export class ColumnApiImpl extends ApiBase {
         return isAutoRowGroupColumn(columnId);
     }
     isPivotResultColumn(columnId) {
-        return isPivotResultColumn(columnId);
+        return isPivotResultColumn(columnId) || isPivotGrandTotalColumn(columnId);
     }
     isAutoRowGroupColumnForSingle(columnId) {
         return columnId === GROUP_COLUMN_ID__SINGLE;

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

@@ -43,5 +43,5 @@ export declare class ColumnFilterInternalApi extends ApiBase {
     areColumnFiltersDifferent(oldFilters: ColumnFilter[], newFilters: ColumnFilter[]): boolean;
     getPredicateDefShortcuts(predicateDef: AdaptablePredicateDef): string[];
     showQuickFilterDropdown(columnId: string): boolean;
-    openColumnFilterPopup(columnId: string): void;
+    openColumnFilterPopup(columnId: string, popupProps?: any): void;
 }

package/src/Api/Internal/ColumnFilterInternalApi.js

@@ -187,7 +187,7 @@ export class ColumnFilterInternalApi extends ApiBase {
         }
         return true;
     }
-    openColumnFilterPopup(columnId) {
+    openColumnFilterPopup(columnId, popupProps) {
         this.getAdaptableInternalApi().showPopupWindow({
             id: COLUMN_FILTER_WINDOW,
             title: ModuleConstants.ColumnFilterFriendlyName,
@@ -199,6 +199,7 @@ export class ColumnFilterInternalApi extends ApiBase {
                     width: 380,
                     height: 450,
                 },
+                ...popupProps,
             },
         });
     }

package/src/Strategy/CalculatedColumnModule.js

@@ -60,6 +60,12 @@ export class CalculatedColumnModule extends AdaptableModuleBase {
         return (this.api.namedQueryApi.internalApi.getReferencedNamedQueryNames(this.api.expressionApi.getAdaptableQueryExpression(calculatedColumn.Query)) ?? []);
     }
     createColumnMenuItems(column) {
+        if (!column) {
+            return;
+        }
+        if (!this.isModuleAvailable()) {
+            return;
+        }
         if (this.isModuleEditable() && column.isCalculatedColumn) {
             const popupParam = {
                 column: column,
@@ -72,6 +78,9 @@ export class CalculatedColumnModule extends AdaptableModuleBase {
         }
     }
     createContextMenuItems(menuContext) {
+        if (!menuContext.adaptableColumn) {
+            return;
+        }
         if (!this.isModuleAvailable()) {
             return;
         }

package/src/Utilities/Constants/GeneralConstants.d.ts

@@ -24,6 +24,7 @@ export declare const GROUP_PATH_SEPARATOR: string;
 export declare const AG_GRID_GROUPED_COLUMN: string;
 export declare const AG_GRID_SELECTION_COLUMN: string;
 export declare const AG_GRID_PIVOT_COLUMN: string;
+export declare const AG_GRID_PIVOT_GRAND_TOTAL_COLUMN: string;
 export declare const AG_GRID_CHART_WINDOW = "AG Grid Window";
 export declare const ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = "(FDC3ActionColumn)";
 export declare const DEFAULT_DATE_FORMAT_PATTERN = "dd-MM-yyyy";

package/src/Utilities/Constants/GeneralConstants.js

@@ -23,6 +23,7 @@ export const GROUP_PATH_SEPARATOR = '/';
 export const AG_GRID_GROUPED_COLUMN = 'ag-Grid-AutoColumn';
 export const AG_GRID_SELECTION_COLUMN = 'ag-Grid-SelectionColumn';
 export const AG_GRID_PIVOT_COLUMN = 'pivot_';
+export const AG_GRID_PIVOT_GRAND_TOTAL_COLUMN = 'PivotRowTotal_pivot_';
 export const AG_GRID_CHART_WINDOW = 'AG Grid Window';
 export const ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = '(FDC3ActionColumn)';
 // FIXME AFL - load this from DateInputOptions

package/src/View/Components/ColumnFilter/AdaptableFloatingFilter.js

@@ -34,5 +34,5 @@ export const AdaptableFloatingFilter = (props) => {
                 ]);
                 props.onChange?.();
             }
-        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange }));
+        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange, onChange: props.onChange }));
 };

package/src/View/Components/ColumnFilter/ColumnFilterWindow.js

@@ -12,6 +12,7 @@ export const ColumnFilterWindow = (props) => {
     React.useEffect(() => {
         setColumnId(initialColumnId);
     }, [props.popupProps.value]);
+    const onChange = props.popupProps.onChange;
     return (React.createElement(Flex, { flex: 1, minHeight: 0, height: "100%", flexDirection: "column", p: 2, className: "ab-ColumnFilterWindow" },
         React.createElement(Box, { mb: 2 },
             React.createElement(FormLayout, null,
@@ -28,5 +29,5 @@ export const ColumnFilterWindow = (props) => {
                             }
                             return label;
                         }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
-        React.createElement(AdaptableColumnFilter, { columnId: columnId })));
+        React.createElement(AdaptableColumnFilter, { columnId: columnId, onChange: onChange })));
 };

package/src/View/Components/ColumnFilter/FloatingFilter.d.ts

@@ -8,5 +8,6 @@ export interface FloatingFilterProps {
     onPredicateChange: (predicate: QlPredicate) => void;
     onKeydown?: (event: React.KeyboardEventHandler<HTMLDivElement>) => void;
     onClear?: () => void;
+    onChange?: () => void;
 }
 export declare const FloatingFilter: React.FunctionComponent<FloatingFilterProps>;

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -77,7 +77,9 @@ export const FloatingFilter = (props) => {
                     });
                 } }))),
         isInlineEditable && (React.createElement(SimpleButton, { px: 0, onClick: () => {
-                adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+                adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId, {
+                    onChange: props.onChange,
+                });
             }, "data-name": "expand-filter", icon: "expand", variant: "text" })),
         (isMultiple ||
             !isPredicateEmpty(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton, { "data-name": "clear-filter", p: 0, variant: "text", onClick: handleClear, icon: "close" }))));

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -24,7 +24,7 @@ export const ColumnValuesSelect = (props) => {
         }
         return true;
     });
-    const component = (React.createElement(Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, size: "small", menuStyle: {
+    const component = (React.createElement(Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, menuStyle: {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 260px))`,
         }, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
     return (React.createElement("div", { className: join(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {

package/src/env.js

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

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

@@ -1,4 +1,4 @@
-import { ColumnState, GridApi, GridOptions, GridState } from 'ag-grid-enterprise';
+import { ColDef, ColumnState, GridApi, GridOptions, GridState } from 'ag-grid-enterprise';
 import { PivotLayoutModel, TableLayoutModel } from './LayoutManagerModel';
 import { LMEmitter } from './LMEmitter';
 export type LayoutManagerOptions = {
@@ -78,7 +78,15 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private isPivotGroupTotalColumn;
     private patchPivotGroupTotalColumn;
     private patchPivotTotalColumn;
-    private destructurePivotColumnId;
+    destructurePivotColumnId(colDef: ColDef, currentModel: {
+        pivotColIds: string[];
+        aggColIds: string[];
+    }): '!unknown!' | {
+        pivotColumnIds: string[];
+        pivotKeys: string[];
+        pivotColumnId: string;
+        aggregationColumnId?: string;
+    };
     private getPivotTotalColumnConfig;
 }
 export {};

package/src/layout-manager/src/index.js

@@ -1113,6 +1113,7 @@ export class LayoutManager extends LMEmitter {
             if (!isPivotLayoutModel(this.currentLayout)) {
                 return;
             }
+            // column that contain the aggregated total for each value column per row
             this.patchGrandTotalColumn(resulColDef);
             this.patchPivotGroupTotalColumn(resulColDef);
         });
@@ -1147,7 +1148,10 @@ export class LayoutManager extends LMEmitter {
         }
         if (this.isPivotGroupTotalColumn(resultColDef)) {
             // resultColDef
-            const colInfo = this.destructurePivotColumnId(resultColDef.colId);
+            const colInfo = this.destructurePivotColumnId(resultColDef, {
+                pivotColIds: this.currentLayout.PivotColumns,
+                aggColIds: this.currentLayout.PivotAggregationColumns.map((col) => col.ColumnId),
+            });
             if (colInfo !== '!unknown!') {
                 const currentPivotKey = colInfo.pivotKeys[colInfo.pivotKeys.length - 1];
                 resultColDef.headerName = `${currentPivotKey} Total`;
@@ -1212,26 +1216,83 @@ export class LayoutManager extends LMEmitter {
             ...pivotRowTotalColDefsAfter,
         ];
     }
-    destructurePivotColumnId(colId = '') {
-        // Split by underscore to get 4 parts
-        const parts = colId.split('_');
-        if (parts.length !== 4) {
-            this.warn(`Unsupported format of pivot total column id: ${colId}`);
+    // supports only pivotTotalColumns (aggregation total) and pivotGroupTotal
+    // AG Grid builds the ID as: `pivot_${pivotCols.join('-')}_${pivotKeys.join('-')}_${measureColumnId}`
+    // see https://github.com/ag-grid/ag-grid/blob/e0cfe533b55b75cdc148cdfb1a4e977731dc0712/packages/ag-grid-enterprise/src/pivot/pivotColDefService.ts#L454C16-L454C88
+    destructurePivotColumnId(colDef, currentModel) {
+        const { colId } = colDef;
+        // Basic validation
+        if (!colId?.startsWith('pivot_')) {
+            this.warn(`Column id must start with 'pivot_': ${colId}`);
+            return '!unknown!';
+        }
+        const hasSpecialChars = (arr) => arr.some((str) => str.includes('-') || str.includes('_'));
+        // AG Grid uses _ and - as delimiters
+        // if we have these special characters in the column IDs, we need to parse them differently
+        const colIdsOrKeysContainSpecialChars = hasSpecialChars(currentModel.pivotColIds) ||
+            hasSpecialChars(currentModel.aggColIds) ||
+            hasSpecialChars(colDef.pivotKeys || []);
+        // Fast path - no special characters
+        if (!colIdsOrKeysContainSpecialChars) {
+            // Split by underscore to get 4 parts
+            const parts = colId.split('_');
+            if (parts.length !== 4) {
+                this.warn(`Unsupported format of pivot total column id: ${colId}`);
+                return '!unknown!';
+            }
+            const [_pivotPrefix, pivotColsTxt, pivotKeysTxt, aggregationColumnId] = parts;
+            const pivotColumnIds = pivotColsTxt.split('-');
+            const pivotKeys = pivotKeysTxt.split('-');
+            const pivotColumnId = pivotColumnIds[pivotKeys.length - 1];
+            return {
+                pivotColumnIds,
+                pivotKeys,
+                pivotColumnId,
+                aggregationColumnId: aggregationColumnId !== '' ? aggregationColumnId : undefined,
+            };
+        }
+        // the complex path, where we have to handle the special characters
+        // Remove 'pivot_' prefix
+        const withoutPrefix = colId.slice(6);
+        // Check if it's a pivot group total
+        const isPivotGroupTotal = withoutPrefix.endsWith('_');
+        // Get pivot keys from colDef (more reliable than string parsing)
+        const pivotKeys = colDef.pivotKeys || [];
+        if (isPivotGroupTotal) {
+            // Remove trailing underscore for pivot group totals
+            const content = withoutPrefix.slice(0, -1);
+            // The remaining content should be the pivot columns
+            const pivotColumnIds = currentModel.pivotColIds.filter((id) => content.includes(id));
+            if (!pivotColumnIds.length) {
+                this.warn(`Could not identify pivot columns in: ${content}`);
+                return '!unknown!';
+            }
+            return {
+                pivotColumnIds,
+                pivotKeys,
+                pivotColumnId: pivotColumnIds[pivotKeys.length],
+            };
+        }
+        // For regular pivot columns, work backwards to find aggregation column
+        const parts = withoutPrefix.split('_');
+        const lastPart = parts[parts.length - 1];
+        // Find the longest matching aggregation column id from the end
+        const aggregationColumnId = currentModel.aggColIds.find((aggId) => lastPart.endsWith(aggId));
+        if (!aggregationColumnId) {
+            this.warn(`Could not identify aggregation column in: ${lastPart}`);
+            return '!unknown!';
+        }
+        // Remove aggregation part and get pivot columns
+        const withoutAgg = withoutPrefix.slice(0, -(aggregationColumnId.length + 1));
+        const pivotColumnIds = currentModel.pivotColIds.filter((id) => withoutAgg.includes(id));
+        if (!pivotColumnIds.length) {
+            this.warn(`Could not identify pivot columns in: ${withoutAgg}`);
             return '!unknown!';
         }
-        // e.g.
-        // pivot_country-sport-year_United States-Basketball_gold
-        // pivotColumnIds: ['country', 'sport', 'year']
-        // pivotKeys: ['United States', 'Basketball']
-        // aggregationColumnId: 'gold'
-        const [_pivotPrefix, pivotColsTxt, pivotKeysTxt, aggregationColumnId] = parts;
-        const pivotColumnIds = pivotColsTxt.split('-');
-        const pivotKeys = pivotKeysTxt.split('-');
-        const pivotColumnId = pivotColumnIds[pivotKeys.length - 1];
         return {
             pivotColumnIds,
             pivotKeys,
-            pivotColumnId,
+            pivotColumnId: pivotColumnIds[pivotKeys.length - 1],
             aggregationColumnId,
         };
     }
@@ -1239,7 +1300,10 @@ export class LayoutManager extends LMEmitter {
         const defaultHiddenConfig = {
             visible: false,
         };
-        const colIdInfo = this.destructurePivotColumnId(colDef.colId);
+        const colIdInfo = this.destructurePivotColumnId(colDef, {
+            pivotColIds: this.currentLayout.PivotColumns,
+            aggColIds: this.currentLayout.PivotAggregationColumns.map((col) => col.ColumnId),
+        });
         if (colIdInfo === '!unknown!') {
             return defaultHiddenConfig;
         }

package/src/layout-manager/src/simplifyLayoutModel.js

@@ -15,7 +15,7 @@ export function simplifyTableLayoutModel(layout) {
         delete layout.RowGroupedColumns;
     }
     if (!layout.RowGroupedColumns && layout.RowGroupValues) {
-        delete layout.RowGroupValues;
+        // delete layout.RowGroupValues;
     }
     if (layout.SuppressAggFuncInHeader === undefined) {
         delete layout.SuppressAggFuncInHeader;