wip

Author: radubrehar

source/src/utils/devTools/PerfMarker.ts

@@ -0,0 +1,9 @@
+export type PerfMarkerDetails = {
+  name: string;
+  value: string | number | boolean;
+}[];
+
+export interface PerfMarker {
+  start(options?: { details?: PerfMarkerDetails }): PerfMarker;
+  end(options?: { details?: PerfMarkerDetails }): PerfMarker;
+}

source/src/utils/devTools/devToolsTracks.ts

@@ -0,0 +1,32 @@
+export const DevToolsTracks = {
+  DataSource: {
+    track: 'DataSource',
+    labels: {
+      RemoteDataLoad: 'Remote data load',
+      TreeUnfilteredTreePaths: 'Computing unfiltered tree paths',
+      Filter: 'Filter',
+      Sort: 'Sort',
+      Group: 'Group',
+      LazyGroup: 'Lazy group',
+      Tree: 'Tree',
+      FlattenTree: 'Flatten tree',
+      Flatten: 'Flatten groups',
+      PrepareData: 'Preparing data',
+      ComputeSelectionCount: 'Computing selection count',
+      ComputeSelectionCountLazy: 'Computing selection count (lazy)',
+      PrepareRowInfo: 'Preparing row info array',
+    },
+  },
+  InfiniteTable: {
+    track: 'InfiniteTable',
+    labels: {
+      Render: 'Rendering',
+    },
+  },
+  MatrixBrain: {
+    track: 'Layout Computations',
+    labels: {
+      ComputeRenderRange: 'Computing render range',
+    },
+  },
+} as const;

source/src/utils/devTools.ts source/src/utils/devTools/index.tssource/src/utils/devTools.ts renamed to source/src/utils/devTools/index.ts

@@ -1,3 +1,5 @@
+import { PerfMarker, PerfMarkerDetails } from './PerfMarker';
+
 type DevToolsColor =
   | 'primary'
   | 'primary-light'
@@ -15,7 +17,7 @@ export type DevToolsMarkerDetails = {
   track: string;
   trackGroup?: string;
   color?: DevToolsColor;
-  details?: { name: string; value: string | number | boolean }[];
+  details?: PerfMarkerDetails;
   tooltip?: string;
 
   startTs?: DOMHighResTimeStamp;
@@ -37,11 +39,6 @@ type EndMethod<T extends Omit<DevToolsMarkerDetails, 'track' | 'label'>> =
     ? (markerDetails: T) => DevToolsMarker
     : (markerDetails?: T) => DevToolsMarker;
 
-export interface PerfMarker {
-  start(options?: { details?: DevToolsMarkerDetails['details'] }): PerfMarker;
-  end(options?: { details?: DevToolsMarkerDetails['details'] }): PerfMarker;
-}
-
 export class DevToolsMarker implements PerfMarker {
   static create(debugId: string) {
     return new DevToolsMarker(debugId);
@@ -253,3 +250,5 @@ export const DevToolsTracks = {
 export function getMarker(debugId: string) {
   return DevToolsMarker.create(debugId);
 }
+
+export type { PerfMarker };

source/src/utils/groupAndPivot/index.ts

@@ -24,7 +24,7 @@ import { KeyOfNoSymbol } from '../../components/InfiniteTable/types/Utility';
 import { DataSourceCache } from '../../components/DataSource/DataSourceCache';
 import { sharedValueGetterParamsFlyweightObject } from './sharedValueGetterParamsFlyweightObject';
 import { TreeSelectionState } from '../../components/DataSource/TreeSelectionState';
-import type { PerfMarker } from '../devTools';
+import type { PerfMarker } from '../devTools/PerfMarker';
 
 export const LAZY_ROOT_KEY_FOR_GROUPS = '____root____';
 

source/src/utils/multisort/index.ts

@@ -1,4 +1,4 @@
-import type { PerfMarker } from '../devTools';
+import type { PerfMarker } from '../devTools/PerfMarker';
 import { treeTraverse } from '../groupAndPivot/treeUtils';
 import TYPES from './sortTypes';
 

www/content/docs/releases/index.page.md

@@ -3,6 +3,10 @@ title: Releases
 description: All releases | Infinite Table DataGrid for React
 ---
 
+## 7.4.0
+
+Add custom tracks in Chrome DevTools when `debugId` is being used.
+
 ## 7.3.6
 
 Add `InfiniteTable.Body.rowHoverClassName` to allow customizing the CSS `className` applied to cells on hover.