@adaptabletools/adaptable 21.0.11 → 21.1.0-canary.0

package/src/devTools/PerfMarker.js

@@ -0,0 +1 @@
+export {};

package/src/devTools/index.d.ts

@@ -0,0 +1,102 @@
+import { PerfMarker, PerfMarkerDetails } from './PerfMarker';
+declare const AVAILABLE_COLORS: readonly ["primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark", "tertiary", "tertiary-light", "tertiary-dark"];
+type DevToolsColor = (typeof AVAILABLE_COLORS)[number];
+export type DevToolsMarkerDetails = {
+    label: string;
+    track: string;
+    trackGroup?: string;
+    color?: DevToolsColor;
+    details?: PerfMarkerDetails;
+    tooltip?: string;
+    startTs?: DOMHighResTimeStamp;
+    endTs?: DOMHighResTimeStamp;
+};
+type HasRequiredProps<T> = T extends Record<string, never> ? false : {
+    [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
+}[keyof T] extends never ? false : true;
+type EndMethod<T extends Omit<DevToolsMarkerDetails, 'track' | 'label'>> = HasRequiredProps<T> extends true ? (markerDetails: T) => DevToolsMarker : (markerDetails?: T) => DevToolsMarker;
+export declare class DevToolsMarker implements PerfMarker {
+    readonly adaptableId: string;
+    static create(adaptableId: string): DevToolsMarker;
+    private markerDetails;
+    private stopped;
+    private constructor();
+    start: (startDetails?: {
+        details?: DevToolsMarkerDetails['details'];
+    }) => this;
+    get startTimestamp(): number;
+    get track(): {
+        readonly Init: {
+            start: DevToolsMarker['start'];
+            end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
+                label: "Init" | "InitStore" | "LoadStore" | "InitAGGrid";
+            }) => DevToolsMarker;
+            label: {
+                readonly Init: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+                readonly InitStore: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+                readonly LoadStore: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+                readonly InitAGGrid: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+            };
+        };
+        readonly LayoutManager: {
+            start: DevToolsMarker['start'];
+            end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
+                label: "SetLayout" | "ApplyPivotLayout" | "ApplyTableLayout";
+            }) => DevToolsMarker;
+            label: {
+                readonly SetLayout: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+                readonly ApplyPivotLayout: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+                readonly ApplyTableLayout: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+            };
+        };
+        readonly Runtime: {
+            start: DevToolsMarker['start'];
+            end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
+                label: "SetLayout";
+            }) => DevToolsMarker;
+            label: {
+                readonly SetLayout: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+            };
+        };
+        readonly Redux: {
+            start: DevToolsMarker['start'];
+            end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
+                label: "Action";
+            }) => DevToolsMarker;
+            label: {
+                readonly Action: {
+                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
+                    start: DevToolsMarker['start'];
+                };
+            };
+        };
+    };
+    end: (markerDetails?: Partial<DevToolsMarkerDetails>) => this;
+}
+export declare function areAdaptableProfileTracksEnabled(adaptableId: string | undefined): boolean;
+export declare function getMarker(adaptableId: string): DevToolsMarker;
+export type { PerfMarker };

package/src/devTools/index.js

@@ -0,0 +1,159 @@
+import { debug } from '@infinite-table/infinite-react';
+import { DevToolsTracks } from './DevToolsTracks';
+const AVAILABLE_COLORS = [
+    'primary',
+    'primary-light',
+    'primary-dark',
+    'secondary',
+    'secondary-light',
+    'secondary-dark',
+    'tertiary',
+    'tertiary-light',
+    'tertiary-dark',
+    // 'error',
+];
+const colorMap = new Map();
+function getColor(identifier) {
+    if (colorMap.has(identifier)) {
+        return colorMap.get(identifier);
+    }
+    const color = AVAILABLE_COLORS[colorMap.size % AVAILABLE_COLORS.length];
+    colorMap.set(identifier, color);
+    return color;
+}
+export class DevToolsMarker {
+    static create(adaptableId) {
+        return new DevToolsMarker(adaptableId);
+    }
+    constructor(adaptableId) {
+        this.adaptableId = adaptableId;
+        this.markerDetails = {
+            label: '',
+            track: '',
+            trackGroup: undefined,
+            color: undefined,
+            details: [],
+            tooltip: undefined,
+        };
+        this.stopped = false;
+        this.start = (startDetails) => {
+            if (this.markerDetails.startTs) {
+                return this;
+            }
+            const start = performance.now();
+            this.markerDetails.details = startDetails?.details ?? [];
+            this.markerDetails.startTs = start;
+            return this;
+        };
+        this.end = (markerDetails = {}) => {
+            if (this.stopped) {
+                return this;
+            }
+            this.stopped = true;
+            const start = markerDetails.startTs ?? this.markerDetails.startTs;
+            const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
+            let color = markerDetails.color || this.markerDetails.color || '';
+            const trackGroup = markerDetails.trackGroup ||
+                this.markerDetails.trackGroup ||
+                `AdapTable (${this.adaptableId})`;
+            const details = [...(this.markerDetails.details || []), ...(markerDetails.details || [])];
+            const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
+            const label = markerDetails.label || this.markerDetails.label || 'Unknown';
+            const track = markerDetails.track || this.markerDetails.track || 'Unknown';
+            if (!color) {
+                const identifier = `${trackGroup}:${track}:${label}`;
+                color = getColor(identifier);
+            }
+            performance.measure(label, {
+                start,
+                end,
+                detail: {
+                    devtools: {
+                        dataType: 'track-entry',
+                        trackGroup,
+                        track,
+                        color: color || 'primary',
+                        properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : undefined,
+                        tooltipText: tooltip,
+                    },
+                },
+            });
+            return this;
+        };
+        this.adaptableId = adaptableId;
+    }
+    get startTimestamp() {
+        return this.markerDetails.startTs;
+    }
+    get track() {
+        const self = this;
+        return Object.keys(DevToolsTracks).reduce((acc, track) => {
+            const trackObj = {
+                start: self.start,
+                end: (markerDetails) => {
+                    return self.end({
+                        ...markerDetails,
+                        track: DevToolsTracks[track].track,
+                        label: markerDetails.label,
+                    });
+                },
+                get label() {
+                    const currentTrack = DevToolsTracks[track];
+                    return Object.keys(currentTrack.labels).reduce((labelAcc, label) => {
+                        const labelObj = {
+                            start: self.start,
+                            end: (markerDetails) => {
+                                return self.end({
+                                    ...markerDetails,
+                                    track: currentTrack.track,
+                                    label: currentTrack.labels[label],
+                                });
+                            },
+                        };
+                        Object.defineProperty(labelAcc, label, {
+                            get: () => {
+                                self.markerDetails.label =
+                                    currentTrack.labels[label];
+                                return labelObj;
+                            },
+                        });
+                        return labelAcc;
+                    }, {});
+                },
+            };
+            Object.defineProperty(acc, track, {
+                get: () => {
+                    const currentTrack = DevToolsTracks[track];
+                    self.markerDetails.track = currentTrack.track;
+                    return trackObj;
+                },
+            });
+            return acc;
+        }, {});
+    }
+}
+export function areAdaptableProfileTracksEnabled(adaptableId) {
+    const trakcsSupported = typeof performance !== 'undefined' &&
+        typeof performance.now === 'function' &&
+        typeof performance.measure === 'function';
+    if (!trakcsSupported) {
+        return false;
+    }
+    if (typeof localStorage !== 'undefined' &&
+        debug.isChannelEnabled(adaptableId ? `Adaptable:${adaptableId}:perf` : 'Adaptable:*:perf', typeof localStorage !== 'undefined' ? localStorage.debug || '' : '')) {
+        return true;
+    }
+    if (typeof localStorage !== 'undefined' && localStorage.adaptableProfileTracks == 'true') {
+        return true;
+    }
+    return false;
+}
+export function getMarker(adaptableId) {
+    const enabled = areAdaptableProfileTracksEnabled(adaptableId);
+    const marker = DevToolsMarker.create(adaptableId);
+    if (!enabled) {
+        marker.start = () => marker;
+        marker.end = () => marker;
+    }
+    return marker;
+}

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: 1761929176914 || Date.now(),
-    VERSION: "21.0.11" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1762955173680 || Date.now(),
+    VERSION: "21.1.0-canary.0" || '--current-version--',
 };

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

@@ -25,6 +25,7 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private setGridOption_default;
     private suppressGlobalAgGridEventListener;
     private supressGlobalAgGridEventTimeoutId;
+    private layoutManagerDebugId;
     constructor(options: LayoutManagerOptions);
     destroy(): void;
     private setupEvents;
@@ -65,6 +66,7 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private suspendAgGridListener;
     private resumeAgGridListener;
     private applyLayout;
+    private getLayoutDetailsAsString;
     applyColumnDefsChanges(layout: TableLayoutModel | PivotLayoutModel): boolean;
     private applyColumnSizingColumnDefsChanges;
     private applyTableLayout;

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

@@ -9,6 +9,7 @@ import { destructurePivotColumnId } from './destructurePivotColumnId';
 import { isPivotAggTotalColumn } from './isPivotAggTotalColumn';
 import { isPivotGrandTotal } from './isPivotGrandTotal';
 import { isPivotColumnTotal } from './isPivotColumnTotal';
+import { getMarker } from '../../devTools';
 export const PIVOT_ANY_TOTAL_COL_TYPE = 'pivotAnyTotal';
 export const PIVOT_GRAND_TOTAL_COL_TYPE = 'pivotGrandTotal';
 export const PIVOT_COLUMN_TOTAL_COL_TYPE = 'pivotColumnTotal';
@@ -324,6 +325,7 @@ export class LayoutManager extends LMEmitter {
     }
     setOptions(options) {
         this.gridApi = options.gridApi;
+        this.layoutManagerDebugId = options.debugId;
     }
     getLayoutModelFromGrid() {
         return this.isInPivotMode()
@@ -722,6 +724,7 @@ export class LayoutManager extends LMEmitter {
             ColumnGroupValues,
             GrandTotalRow: this.gridApi.getGridOption('grandTotalRow'),
             SuppressAggFuncInHeader: this.gridApi.getGridOption('suppressAggFuncInHeader'),
+            RowGroupDisplayType: this.gridApi.getGridOption('groupDisplayType') === 'multipleColumns' ? 'multi' : 'single',
         });
         return layout;
     }
@@ -1081,10 +1084,14 @@ export class LayoutManager extends LMEmitter {
         this.applyColumnDefsChanges(layout);
         if (isPivotLayoutModel(layout)) {
             try {
+                const marker = getMarker(this.layoutManagerDebugId).track.LayoutManager.label.ApplyPivotLayout.start();
                 const perfApplyPivot = this.beginPerf('applyLayout:pivot');
                 this.gridApi.setGridOption('pivotMode', true);
                 this.applyPivotLayout(layout, options);
                 perfApplyPivot.end();
+                marker.end({
+                    details: this.getLayoutDetailsAsString(layout),
+                });
             }
             finally {
                 resume();
@@ -1092,17 +1099,34 @@ export class LayoutManager extends LMEmitter {
             return;
         }
         try {
+            const marker = getMarker(this.layoutManagerDebugId).track.LayoutManager.label.ApplyTableLayout.start();
             const perfApplyTable = this.beginPerf('applyLayout:table');
             if (pivotMode) {
                 this.gridApi.setGridOption('pivotMode', false);
             }
             this.applyTableLayout(layout, options);
             perfApplyTable.end();
+            marker.end({
+                details: this.getLayoutDetailsAsString(layout),
+            });
         }
         finally {
             resume();
         }
     }
+    getLayoutDetailsAsString(layout) {
+        return Object.keys(layout)
+            .map((key) => {
+            if (key.startsWith('Ignore_')) {
+                return null;
+            }
+            return {
+                name: key,
+                value: JSON.stringify(layout[key], null, 2),
+            };
+        })
+            .filter(Boolean);
+    }
     applyColumnDefsChanges(layout) {
         return this.applyColumnSizingColumnDefsChanges(layout);
     }