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/components/main.tsx

@@ -11,7 +11,7 @@ import React, {useState} from 'react';
 import {plugin} from '../index';
 import {DetailSidebar, Layout, usePlugin, useValue} from 'flipper-plugin';
 import {useHotkeys} from 'react-hotkeys-hook';
-import {Id, Snapshot, UINode} from '../types';
+import {Id, Metadata, MetadataId, Snapshot, UINode} from '../types';
 import {PerfStats} from './PerfStats';
 import {Tree} from './Tree';
 import {Visualization2D} from './Visualization2D';
@@ -22,6 +22,7 @@ export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
   const nodes: Map<Id, UINode> = useValue(instance.nodes);
+  const metadata: Map<MetadataId, Metadata> = useValue(instance.metadata);
   const snapshots: Map<Id, Snapshot> = useValue(instance.snapshots);
 
   const [showPerfStats, setShowPerfStats] = useState(false);
@@ -32,13 +33,16 @@ export function Component() {
 
   const {ctrlPressed} = useKeyboardModifiers();
 
-  function renderSidebar(node: UINode | undefined) {
+  function renderSidebar(
+    node: UINode | undefined,
+    metadata: Map<MetadataId, Metadata>,
+  ) {
     if (!node) {
       return;
     }
     return (
       <DetailSidebar width={350}>
-        <Inspector node={node} />
+        <Inspector metadata={metadata} node={node} />
       </DetailSidebar>
     );
   }
@@ -68,7 +72,7 @@ export function Component() {
           onSelectNode={setSelectedNode}
           modifierPressed={ctrlPressed}
         />
-        {selectedNode && renderSidebar(nodes.get(selectedNode))}
+        {selectedNode && renderSidebar(nodes.get(selectedNode), metadata)}
       </Layout.Horizontal>
     );
   }