Add custom tracks for chrome devtools

Author: radubrehar

examples/src/pages/tests/table/props/data/with-debug-id.page.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTablePropColumns,
+} from '@infinite-table/infinite-react';
+import { useState } from 'react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+  streetName: string;
+  streetNo: number;
+  streetPrefix: string;
+};
+
+const dataSource: () => Promise<Developer[]> = () => {
+  return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/developers10k-sql`)
+    .then((r) => r.json())
+    .then((data: Developer[]) => {
+      // random delay between 100 and 1000ms
+      const delay = Math.floor(Math.random() * 900) + 100;
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(data);
+        }, delay);
+      });
+    });
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: { field: 'id' },
+  firstName: { field: 'firstName' },
+  age: {
+    field: 'age',
+    type: ['number'],
+  },
+  salary: {
+    field: 'salary',
+    type: ['number', 'currency'],
+    style: {
+      color: 'red',
+    },
+  },
+
+  currency: { field: 'currency' },
+};
+
+export default function DataTestPage() {
+  const [data, setData] = useState<typeof dataSource>(() => dataSource);
+  return (
+    <>
+      <button
+        onClick={() => {
+          setData(() => dataSource.bind(null));
+        }}
+      >
+        reload
+      </button>
+      <React.StrictMode>
+        <DataSource<Developer>
+          data={data}
+          primaryKey="id"
+          defaultGroupBy={[{ field: 'age' }]}
+        >
+          <InfiniteTable<Developer>
+            debugId="test"
+            domProps={{
+              style: {
+                margin: '5px',
+                height: '80vh',
+                border: '1px solid gray',
+                position: 'relative',
+              },
+            }}
+            columns={columns}
+          >
+            <InfiniteTable.GroupingToolbar />
+            <InfiniteTable.Header />
+            <InfiniteTable.Body />
+          </InfiniteTable>
+        </DataSource>
+      </React.StrictMode>
+    </>
+  );
+}

examples/src/pages/tests/table/props/group-by/server-side-group-and-agg-with-child-dataset.spec.ts

@@ -28,7 +28,7 @@ export default test.describe
     // wait for Canada to be loaded as well, from the remote location
     await page.waitForRequest(condition);
     // also wait for node to be expanded
-    await page.waitForTimeout(80);
+    await page.waitForTimeout(150);
 
     const queryStrings = urls.map((url) => url.slice(url.indexOf('?')));
 

source/src/components/DataSource/privateHooks/useLoadData.ts

@@ -33,6 +33,7 @@ import {
 
 import { getChangeDetect } from './getChangeDetect';
 import { logDevToolsWarning } from '../../../utils/debugModeUtils';
+import { DevToolsMarker, getMarker } from '../../../utils/devTools';
 
 const CACHE_DEFAULT = true;
 
@@ -694,6 +695,13 @@ export function useLoadData<T>(options: LoadDataOptions<T>) {
 
       const componentState = getComponentState();
       if (typeof componentState.data === 'function') {
+        let marker: DevToolsMarker | undefined;
+
+        if (componentState.debugId) {
+          marker = getMarker(
+            componentState.debugId,
+          ).track.DataSource.label.RemoteDataLoad.start();
+        }
         loadData(
           componentState.data,
           componentState,
@@ -702,7 +710,9 @@ export function useLoadData<T>(options: LoadDataOptions<T>) {
             append: appendWhenLivePagination,
           },
           masterContext,
-        );
+        ).then(() => {
+          marker?.end();
+        });
       }
     },
     { ...depsObject, data },