Enrich raw data with metadata

Summary:
As metadata got split from attributes, raw data became harder to read.

This change annotates raw data with attribute names to ease readability and thus usability.

Reviewed By: antonk52

Differential Revision: D41400622

fbshipit-source-id: 8bebb2bd368490b9d7a2b4435749cdf0570b7571

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -33,6 +33,7 @@ import {
   TextAttributeValueStyle,
 } from './Styles';
 import {Glyph} from 'flipper';
+import {transform} from '../../../dataTransform';
 
 const NumberValue = styled.span(NumberAttributeValueStyle);
 const TextValue = styled.span(TextAttributeValueStyle);
@@ -240,7 +241,7 @@ export const AttributesInspector: React.FC<Props> = ({
       {...sections}
       {rawDisplayEnabled && (
         <Panel key="Raw" title="Raw Data" collapsed>
-          <DataInspector data={node.attributes} />
+          <DataInspector data={transform(node.attributes, metadata)} />
         </Panel>
       )}
     </>

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

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Inspectable, InspectableObject, Metadata, MetadataId} from './types';
+
+function transformAny(
+  metadata: Map<MetadataId, Metadata>,
+  inspectable: Inspectable,
+): any {
+  switch (inspectable.type) {
+    case 'boolean':
+    case 'text':
+    case 'number':
+    case 'color':
+    case 'size':
+    case 'bounds':
+    case 'coordinate':
+    case 'coordinate3d':
+    case 'space':
+      return inspectable.value;
+    case 'enum':
+      return inspectable.value.value;
+    case 'object':
+      return transformObject(metadata, inspectable);
+    default:
+      return JSON.parse(JSON.stringify(inspectable));
+  }
+}
+
+function transformObject(
+  metadata: Map<MetadataId, Metadata>,
+  inspectableObject: InspectableObject,
+): any {
+  const object: any = {};
+  Object.keys(inspectableObject.fields).forEach((key, _index) => {
+    const metadataId: number = Number(key);
+    const meta = metadata.get(metadataId);
+    if (!meta) {
+      return;
+    }
+
+    const inspectable = inspectableObject.fields[metadataId];
+    object[meta.name] = transformAny(metadata, inspectable);
+  });
+
+  return object;
+}
+
+export function transform(
+  attributes: Record<MetadataId, Inspectable>,
+  metadata: Map<MetadataId, Metadata>,
+): any {
+  const object: any = {};
+  Object.keys(attributes).forEach((key) => {
+    const metadataId: number = Number(key);
+    const meta = metadata.get(metadataId);
+    if (!meta) {
+      return;
+    }
+
+    const inspectable = attributes[metadataId] as InspectableObject;
+    object[meta.name] = transformObject(metadata, inspectable);
+  });
+  return object;
+}