@adaptabletools/adaptable 22.0.0-canary.1 → 22.0.0-canary.11

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

@@ -139,59 +139,20 @@ function getDefaultColumnSizeStateForColDef(colId, colDef, options) {
     return undefined;
 }
 export class LayoutManager extends LMEmitter {
+    gridApi;
+    fieldsToIds = {};
+    idsToFields = {};
+    idsToColDefs = {};
+    initialColumnWidths = {};
+    currentLayout = null;
+    layoutChangeDebounce;
+    _prevFiredLayout;
+    setGridOption_default;
+    suppressGlobalAgGridEventListener = false;
+    supressGlobalAgGridEventTimeoutId = null;
+    layoutManagerDebugId;
     constructor(options) {
         super({ debugId: options.debugId });
-        this.fieldsToIds = {};
-        this.idsToFields = {};
-        this.idsToColDefs = {};
-        this.initialColumnWidths = {};
-        this.currentLayout = null;
-        this.suppressGlobalAgGridEventListener = false;
-        this.supressGlobalAgGridEventTimeoutId = null;
-        this.globalAgGridEventListener = (type, event) => {
-            if (this.destroyed || this.suppressGlobalAgGridEventListener) {
-                return;
-            }
-            if (type in COLUMN_EVENTS_THAT_TRIGGERS_AUTO_LAYOUT_SAVE) {
-                if (type === 'columnResized' && !event.finished) {
-                    return;
-                }
-                // called while dragging a column from the sidebar, to the row groups panel
-                if (type === 'displayedColumnsChanged' && event.source === 'uiColumnDragged') {
-                    return;
-                }
-                this.warn(`globalAgGridEventListener-${type}`, event);
-                if (!this.currentLayout) {
-                    const gridLayout = this.getLayoutModelFromGrid();
-                    // if there's no layout set currently in AG Grid
-                    // then emit the gridLayoutChanged event directly
-                    // as we don't have a current layout to compare to
-                    this.onGridLayoutChanged(gridLayout);
-                    return;
-                }
-                const gridLayout = this.getLayoutModelFromGrid();
-                // but if we do have a current layout set
-                // then only emit the event if the layout has changed
-                if (!isGridLayoutSame({
-                    layoutFromGrid: gridLayout,
-                    layoutFromModel: this.currentLayout,
-                })) {
-                    this.onGridLayoutChanged(gridLayout);
-                    return;
-                }
-            }
-        };
-        this.columnDefsChanged = (colDefs) => {
-            if (this.suppressGlobalAgGridEventListener) {
-                return;
-            }
-            this.warn('onColumnDefsChanged');
-            this.indexColumns();
-            if (this.currentLayout) {
-                this.applyLayout(this.currentLayout);
-            }
-            this.emitSync('columnDefsChanged', colDefs);
-        };
         this.layoutChangeDebounce = options.layoutChangeDebounce ?? 0;
         if (this.layoutChangeDebounce) {
             this.onGridLayoutChanged = debounce(this.onGridLayoutChanged, {
@@ -205,7 +166,7 @@ export class LayoutManager extends LMEmitter {
         this.setupEvents();
         this.indexColumns();
         this.setupPivotTotals();
-        globalThis.layoutManager = this;
+        // (globalThis as any).layoutManager = this;
     }
     destroy() {
         if (this.destroyed) {
@@ -246,6 +207,50 @@ export class LayoutManager extends LMEmitter {
         };
         this.gridApi.setGridOption = setGridOption;
     }
+    globalAgGridEventListener = (type, event) => {
+        if (this.destroyed || this.suppressGlobalAgGridEventListener) {
+            return;
+        }
+        if (type in COLUMN_EVENTS_THAT_TRIGGERS_AUTO_LAYOUT_SAVE) {
+            if (type === 'columnResized' && !event.finished) {
+                return;
+            }
+            // called while dragging a column from the sidebar, to the row groups panel
+            if (type === 'displayedColumnsChanged' && event.source === 'uiColumnDragged') {
+                return;
+            }
+            this.warn(`globalAgGridEventListener-${type}`, event);
+            if (!this.currentLayout) {
+                const gridLayout = this.getLayoutModelFromGrid();
+                // if there's no layout set currently in AG Grid
+                // then emit the gridLayoutChanged event directly
+                // as we don't have a current layout to compare to
+                this.onGridLayoutChanged(gridLayout);
+                return;
+            }
+            const gridLayout = this.getLayoutModelFromGrid();
+            // but if we do have a current layout set
+            // then only emit the event if the layout has changed
+            if (!isGridLayoutSame({
+                layoutFromGrid: gridLayout,
+                layoutFromModel: this.currentLayout,
+            })) {
+                this.onGridLayoutChanged(gridLayout);
+                return;
+            }
+        }
+    };
+    columnDefsChanged = (colDefs) => {
+        if (this.suppressGlobalAgGridEventListener) {
+            return;
+        }
+        this.warn('onColumnDefsChanged');
+        this.indexColumns();
+        if (this.currentLayout) {
+            this.applyLayout(this.currentLayout);
+        }
+        this.emitSync('columnDefsChanged', colDefs);
+    };
     indexColumns() {
         const colDefs = this.gridApi.getColumnDefs();
         this.fieldsToIds = {};
@@ -339,10 +344,11 @@ export class LayoutManager extends LMEmitter {
         const columnState = this.gridApi
             .getColumnState()
             .filter((col) => !pivotResultColumnsSet.has(col.colId));
-        let PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
+        const PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
         const layout = this.getUndecidedLayoutModelFromGrid(columnState);
         let ColumnSizing = layout.ColumnSizing || {};
         let ColumnVisibility = { ...layout.ColumnVisibility };
+        const storePivotResultColumns = !!prevLayout?.PivotResultColumnsOrder;
         //let's also include the column widths of the pivotResult columns
         pivotResultColumns.forEach((col) => {
             const colId = col.getColId();
@@ -396,6 +402,13 @@ export class LayoutManager extends LMEmitter {
             GrandTotalRow: layout.GrandTotalRow,
             PivotExpandLevel: prevLayout?.PivotExpandLevel ?? -1,
         };
+        if (storePivotResultColumns) {
+            // Get pivot result columns in display order (not creation order)
+            const displayedPivotResultColumns = this.gridApi
+                .getAllDisplayedColumns()
+                .filter((col) => pivotResultColumnsSet.has(col.getColId()));
+            pivotLayout.PivotResultColumnsOrder = displayedPivotResultColumns.map((col) => col.getColId());
+        }
         if (layout.SuppressAggFuncInHeader) {
             pivotLayout.SuppressAggFuncInHeader = layout.SuppressAggFuncInHeader;
         }
@@ -419,20 +432,20 @@ export class LayoutManager extends LMEmitter {
         let TableColumns = columnState.map((c) => c.colId);
         // .filter((colId) => colId !== 'ag-Grid-SelectionColumn');
         let ColumnSorts = [];
-        let RowGroupedColumns = [];
+        const RowGroupedColumns = [];
         let RowGroupValues = undefined;
         let ColumnGroupValues = undefined;
         let TableAggregationColumns = [];
-        let ColumnPinning = {};
+        const ColumnPinning = {};
         const gridState = this.gridApi.getState();
         const prevLayout = this.currentLayout;
         const prevAggColumns = prevLayout?.TableAggregationColumns ?? prevLayout?.PivotAggregationColumns;
-        let ColumnSizing = { ...prevLayout?.ColumnSizing };
+        const ColumnSizing = { ...prevLayout?.ColumnSizing };
         const prevAggColumnsMap = prevAggColumns?.reduce((acc, agg) => {
             acc[agg.ColumnId] = agg;
             return acc;
         }, {});
-        let ColumnVisibility = columnState.reduce((acc, colState) => {
+        const ColumnVisibility = columnState.reduce((acc, colState) => {
             const colId = colState.colId;
             // normally we take the initial width from this object
             let initialWidth = this.initialColumnWidths[colId];
@@ -1234,7 +1247,7 @@ export class LayoutManager extends LMEmitter {
         }
     }
     computeColumnStateForPivotLayout(layout) {
-        let columnState = {};
+        const columnState = {};
         const pivotColumnsToIndexes = (layout.PivotColumns || []).reduce((acc, colId, index) => {
             acc[colId] = index;
             return acc;
@@ -1265,6 +1278,12 @@ export class LayoutManager extends LMEmitter {
         this.computeColumnSorts(layout, columnState);
         this.computePinnedColumns(layout, columnState);
         this.computePivotAggregations(layout, columnState);
+        // Add pivot result columns to the state for ordering (will be applied with applyOrder: true later)
+        if (Array.isArray(layout.PivotResultColumnsOrder)) {
+            layout.PivotResultColumnsOrder.forEach((colId) => {
+                columnState.state.push({ colId });
+            });
+        }
         return columnState;
     }
     computePivotAggregations(layout, columnState) {
@@ -1505,6 +1524,10 @@ export class LayoutManager extends LMEmitter {
             });
             // now recompute and apply the last one
             this.computePivotAggregations(layout, columnState);
+            // Apply order only on the final call when PivotResultColumns is specified
+            if (Array.isArray(layout.PivotResultColumnsOrder)) {
+                columnState.applyOrder = true;
+            }
             this.gridApi.applyColumnState(columnState);
             // let's also include the column widths of the pivotResult columns
             // we can't simply include those in the columnState because the columnState will also apply order

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

@@ -132,6 +132,9 @@ export function normalizePivotLayoutModel(layout) {
     if (!layout.ColumnPinning) {
         layout.ColumnPinning = {};
     }
+    if (!layout.PivotResultColumnsOrder) {
+        layout.PivotResultColumnsOrder = false;
+    }
     if (!layout.ColumnSizing) {
         layout.ColumnSizing = {};
     }

package/src/metamodel/adaptable.metamodel.d.ts

@@ -314,7 +314,22 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
-    AdaptableColumnType: {
+    AdaptableColumnsContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
+    AdaptableColumnSummary: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
+    AdaptableColumnTypeName: {
         name: string;
         kind: string;
         desc: string;
@@ -359,6 +374,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         }[];
     };
+    AdaptableContainerValue: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableContextMenuItem: {
         name: string;
         kind: string;
@@ -379,6 +399,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableCSSSelector: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableCustomIcon: {
         name: string;
         kind: string;
@@ -443,6 +473,11 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    AdaptableFilterComponentLocation: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableFilterState: {
         name: string;
         kind: string;
@@ -547,6 +582,11 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    AdaptableLogger: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableMenuItem: {
         name: string;
         kind: string;
@@ -874,6 +914,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableRowContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableSaveStateFunction: {
         name: string;
         kind: string;
@@ -985,12 +1035,19 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         desc: string;
-        props: {
+        props: ({
             name: string;
             kind: string;
             desc: string;
             isOpt: boolean;
-        }[];
+            ref: string;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref?: undefined;
+        })[];
     };
     AdaptableSystemColumnMenuItem: {
         name: string;
@@ -1072,6 +1129,11 @@ export declare const ADAPTABLE_METAMODEL: {
             defVal: string;
         })[];
     };
+    AdaptableTransientState: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableVersion: {
         name: string;
         kind: string;
@@ -1268,6 +1330,12 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             ref: string;
             isOpt?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            ref?: undefined;
         })[];
     };
     AlertDefinitionPredicate: {
@@ -1697,11 +1765,6 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
-    CellAlignment: {
-        name: string;
-        kind: string;
-        desc: string;
-    };
     CellColorRange: {
         name: string;
         kind: string;
@@ -2216,6 +2279,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    ContainerContext: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     ContainerOptions: {
         name: string;
         kind: string;
@@ -2934,6 +3002,17 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    DataRowConfig: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        }[];
+    };
     DataSet: {
         name: string;
         kind: string;
@@ -3644,6 +3723,13 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
             defVal: string;
             ref?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            defVal?: undefined;
+            ref?: undefined;
         } | {
             name: string;
             kind: string;
@@ -3700,6 +3786,13 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
             ref: string;
             defVal?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            ref?: undefined;
+            defVal?: undefined;
         } | {
             name: string;
             kind: string;
@@ -3896,6 +3989,22 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         })[];
     };
+    GridCellWithCount: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        })[];
+    };
     GridDataContextMapping: {
         name: string;
         kind: string;
@@ -4035,6 +4144,18 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    Identifiable: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref: string;
+        }[];
+    };
     InFilterValue: {
         name: string;
         kind: string;
@@ -4078,6 +4199,16 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    InitContainerContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     InitialState: {
         name: string;
         kind: string;
@@ -5168,6 +5299,22 @@ export declare const ADAPTABLE_METAMODEL: {
             ref?: undefined;
         })[];
     };
+    RowDataChangedInfo: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            ref?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            ref: string;
+        })[];
+    };
     RowDataChangeTrigger: {
         name: string;
         kind: string;
@@ -6070,6 +6217,16 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         }[];
     };
+    UniqueGridCell: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     UpgradeConfig: {
         name: string;
         kind: string;
@@ -6214,6 +6371,18 @@ export declare const ADAPTABLE_METAMODEL: {
             noCode?: undefined;
         })[];
     };
+    UserInterfaceState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+        }[];
+    };
     UserMenuItem: {
         name: string;
         kind: string;