feat(trace-updates): add grouped trace updates with names for React Native

- Introduced the `drawGroupedTraceUpdatesWithNames` event in `Agent` for emitting grouped trace updates.
- This maintains backward compatibility while improving trace update organization for React Native.

Note: This change only covers the JavaScript implementation; the native side still needs to be implemented.

Author: piotrski

packages/react-devtools-shared/src/backend/agent.js

@@ -28,6 +28,7 @@ import type {
   DevToolsHookSettings,
 } from './types';
 import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types';
+import type {GroupItem} from './views/TraceUpdates/canvas';
 import {isReactNativeEnvironment} from './utils';
 import {
   sessionStorageGetItem,
@@ -142,6 +143,7 @@ export default class Agent extends EventEmitter<{
   shutdown: [],
   traceUpdates: [Set<HostInstance>],
   drawTraceUpdates: [Array<HostInstance>],
+  drawGroupedTraceUpdatesWithNames: [Array<Array<GroupItem>>],
   disableTraceUpdates: [],
   getIfHasUnsupportedRendererVersion: [],
   updateHookSettings: [$ReadOnly<DevToolsHookSettings>],

packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js

@@ -37,6 +37,9 @@ function drawNative(nodeToData: Map<HostInstance, Data>, agent: Agent) {
   });
 
   agent.emit('drawTraceUpdates', nodesToDraw);
+
+  const mergedNodes = groupAndSortNodes(nodeToData);
+  agent.emit('drawGroupedTraceUpdatesWithNames', mergedNodes);
 }
 
 function drawWeb(nodeToData: Map<HostInstance, Data>) {
@@ -71,6 +74,8 @@ type GroupItem = {
   count: number,
 };
 
+export type {GroupItem};
+
 export function groupAndSortNodes(
   nodeToData: Map<HostInstance, Data>,
 ): Array<Array<GroupItem>> {