From 5a0a76a59fa9a17d512857b43f5329f37a177cd6 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 30 May 2024 04:49:29 -0700
Subject: [PATCH] Add UI for additional data collection

Summary:
A new feature was added on a node level, additional data collection. here is how it works

First the client indicates that a particular node has additional expensive data it can send

If flipper sees the flag then it displays a ui for the user to opt in or out

flipper sends message to client to add current node id to be opted into additional data collection, this is kept in a set on the client,

on the next traversal and subsequent traversals while the node id of the coposable is in the set the additional data collection is performed

Reviewed By: antonk52

Differential Revision: D57868531

fbshipit-source-id: 4d901bca3f74a6b01a0e541dc858efa38adc1902
---
 .../plugins/public/ui-debugger/ClientTypes.tsx  |  5 +++++
 .../attributes/AttributesInspector.tsx          | 17 +++++++++++++++++
 desktop/plugins/public/ui-debugger/index.tsx    |  9 +++++++++
 3 files changed, 31 insertions(+)

diff --git a/desktop/plugins/public/ui-debugger/ClientTypes.tsx b/desktop/plugins/public/ui-debugger/ClientTypes.tsx
index 1d3c40d11dc..e9b5ccb73a3 100644
--- a/desktop/plugins/public/ui-debugger/ClientTypes.tsx
+++ b/desktop/plugins/public/ui-debugger/ClientTypes.tsx
@@ -32,6 +32,10 @@ export type Methods = {
     customActionIndex: number;
     value: T;
   }): Promise<{result: T}>;
+  additionalNodeInspectionChange(params: {
+    changeType: 'Add' | 'Remove';
+    nodeId: Id;
+  }): Promise<void>;
 };
 
 export type CompoundTypeHint =
@@ -188,6 +192,7 @@ export type ClientNode = {
   bounds: Bounds;
   tags: Tag[];
   activeChild?: Id;
+  additionalDataCollection?: boolean;
 };
 
 /**
diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx
index e48c4ab58b2..1456e84c024 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx
@@ -53,6 +53,7 @@ import {
 import {StyledTextArea} from './TextInput';
 import {ColorInspector} from './ColorInput';
 import {SelectInput} from './SelectInput';
+import {MultiSelectableDropDownItem} from '../../shared/MultiSelectableDropDownItem';
 
 type ModalData = {
   data: unknown;
@@ -77,6 +78,7 @@ export function AttributesInspector({
   node: ClientNode;
   metadata: MetadataMap;
 }) {
+  const instance = usePlugin(plugin);
   const [modalData, setModalData] = useState<ModalData | null>(null);
 
   const [attributeFilter, setAttributeFilter] = useLocalStorageState(
@@ -143,6 +145,21 @@ export function AttributesInspector({
           placeholder="Filter attributes"
           prefix={<SearchOutlined />}
         />
+        {node.additionalDataCollection != null && (
+          <MultiSelectableDropDownItem
+            text="Collect additional data"
+            value={node.id}
+            selectedValues={
+              new Set(node.additionalDataCollection ? [node.id] : [])
+            }
+            onSelect={(_, selected) =>
+              instance.onAdditionalDataCollectionChanged(
+                node.id,
+                selected ? 'Add' : 'Remove',
+              )
+            }
+          />
+        )}
 
         {sections.length === 0 ? (
           <NoData message="No attributes match filter " />
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index a2850c2e366..24418a07495 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -308,9 +308,18 @@ export function plugin(client: PluginClient<Events, Methods>) {
       console.warn('onCustomAction failed', e);
     }
   }
+
+  async function onAdditionalDataCollectionChanged(
+    nodeId: Id,
+    changeType: 'Add' | 'Remove',
+  ) {
+    client.send('additionalNodeInspectionChange', {nodeId, changeType});
+  }
+
   return {
     rootId,
     customActionGroups,
+    onAdditionalDataCollectionChanged,
     onCustomAction,
     currentFrameTime: lastProcessedFrameTime as _ReadOnlyAtom<number>,
     uiState: uiState as ReadOnlyUIState,