Attributes Metadata

Summary:
Before this change, attributes and attribute metadata were intermingled and sent as one unit via subtree update event.

This represented a few issues:
- Repetitiveness. For each declared and dynamic attribute, metadata was included on each value unit.
- Metadata can vary in size and thus can have a negative impact on payload size.
- The attribute name which is part of metadata is a string which always overhead on processing.
- Metadata instantiation is not cheap thus this also incurs in processing overhead i.e. even instantiating a single string can have an impact.

The proposal is to separate metadata of attributes from the actual node reported attributes. This solves the problems mentioned above.

Reviewed By: LukeDefeo

Differential Revision: D40674156

fbshipit-source-id: 0788551849fbce53065f819ba503e7e4afc03cc0

desktop/plugins/public/ui-debugger/index.tsx

@@ -8,12 +8,36 @@
  */
 
 import {PluginClient, createState, createDataSource} from 'flipper-plugin';
-import {Events, Id, PerfStatsEvent, Snapshot, TreeState, UINode} from './types';
+import {
+  Events,
+  Id,
+  Metadata,
+  MetadataId,
+  PerfStatsEvent,
+  Snapshot,
+  TreeState,
+  UINode,
+} from './types';
 import './node_modules/react-complex-tree/lib/style.css';
 
 export function plugin(client: PluginClient<Events>) {
   const rootId = createState<Id | undefined>(undefined);
-  client.onMessage('init', (root) => rootId.set(root.rootId));
+  const metadata = createState<Map<MetadataId, Metadata>>(new Map());
+
+  client.onMessage('init', (event) => {
+    rootId.set(event.rootId);
+  });
+
+  client.onMessage('metadataUpdate', (event) => {
+    if (!event.attributeMetadata) {
+      return;
+    }
+    metadata.update((draft) => {
+      for (const [_key, value] of Object.entries(event.attributeMetadata)) {
+        draft.set(value.id, value);
+      }
+    });
+  });
 
   const perfEvents = createDataSource<PerfStatsEvent, 'txId'>([], {
     key: 'txId',
@@ -23,13 +47,13 @@ export function plugin(client: PluginClient<Events>) {
     perfEvents.append(event);
   });
 
-  const nodesAtom = createState<Map<Id, UINode>>(new Map());
-  const snapshotsAtom = createState<Map<Id, Snapshot>>(new Map());
+  const nodes = createState<Map<Id, UINode>>(new Map());
+  const snapshots = createState<Map<Id, Snapshot>>(new Map());
 
   const treeState = createState<TreeState>({expandedNodes: []});
 
   client.onMessage('coordinateUpdate', (event) => {
-    nodesAtom.update((draft) => {
+    nodes.update((draft) => {
       const node = draft.get(event.nodeId);
       if (!node) {
         console.warn(`Coordinate update for non existing node `, event);
@@ -42,13 +66,13 @@ export function plugin(client: PluginClient<Events>) {
 
   const seenNodes = new Set<Id>();
   client.onMessage('subtreeUpdate', (event) => {
-    snapshotsAtom.update((draft) => {
+    snapshots.update((draft) => {
       draft.set(event.rootId, event.snapshot);
     });
-    nodesAtom.update((draft) => {
-      for (const node of event.nodes) {
+    nodes.update((draft) => {
+      event.nodes.forEach((node) => {
         draft.set(node.id, node);
-      }
+      });
     });
 
     treeState.update((draft) => {
@@ -74,8 +98,9 @@ export function plugin(client: PluginClient<Events>) {
 
   return {
     rootId,
-    snapshots: snapshotsAtom,
-    nodes: nodesAtom,
+    nodes,
+    metadata,
+    snapshots,
     perfEvents,
     treeState,
   };