From 94114eb821bc567fd904bebe1fe89767542e8688 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 21 Aug 2023 04:24:16 -0700
Subject: [PATCH] Add tree id

Summary:
Added new tree id to the framework event. Its currently optional.

The tree id is the parent component tree / tree manager this tree belongs to, this is so we can view all tree events at once in the table.

We ony show the context menu item when we have the tree root tag which is set for component tree only at this point. We can add for blok and ios later

Reviewed By: lblasa

Differential Revision: D48268120

fbshipit-source-id: 3dee06309b146a0392ca32fbb5e8231883b8439a
---
 .../public/ui-debugger/ClientTypes.tsx        |  4 +-
 .../components/FrameworkEventsTable.tsx       | 11 ++--
 .../public/ui-debugger/components/main.tsx    |  2 +-
 .../components/tree/ContextMenu.tsx           | 55 ++++++++++---------
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/ClientTypes.tsx b/desktop/plugins/public/ui-debugger/ClientTypes.tsx
index 9090c6d23..39348de8f 100644
--- a/desktop/plugins/public/ui-debugger/ClientTypes.tsx
+++ b/desktop/plugins/public/ui-debugger/ClientTypes.tsx
@@ -55,6 +55,7 @@ type FrameworkEventAttribution = Stacktrace | Reason | UpstreamEvent;
 
 export type FrameworkEvent = {
   id: number;
+  treeId?: Id;
   nodeId: Id;
   type: FrameworkEventType;
   timestamp: number;
@@ -183,7 +184,8 @@ export type Tag =
   | 'CK'
   | 'iOS'
   | 'BloksBoundTree'
-  | 'BloksDerived';
+  | 'BloksDerived'
+  | 'TreeRoot';
 
 export type Inspectable =
   | InspectableObject
diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
index 746cbd606..fd3a6e795 100644
--- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
+++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
@@ -20,17 +20,17 @@ import {FrameworkEvent, Id} from '../ClientTypes';
 import {plugin} from '../index';
 import {Button, Tooltip} from 'antd';
 
-export function FrameworkEventsTable({rootTreeId}: {rootTreeId?: Id}) {
+export function FrameworkEventsTable({treeId}: {treeId?: Id}) {
   const instance = usePlugin(plugin);
 
   const managerRef = useRef<DataTableManager<FrameworkEvent> | null>(null);
 
   useEffect(() => {
-    if (rootTreeId != null) {
+    if (treeId != null) {
       managerRef.current?.resetFilters();
-      managerRef.current?.addColumnFilter('nodeId', rootTreeId as string);
+      managerRef.current?.addColumnFilter('treeId', treeId as string);
     }
-  }, [rootTreeId]);
+  }, [treeId]);
 
   return (
     <Layout.Container grow>
@@ -59,6 +59,9 @@ const columns: DataTableColumn<FrameworkEvent>[] = [
       return new Date(row.timestamp).toLocaleTimeString();
     },
   },
+  {
+    key: 'treeId',
+  },
   {
     key: 'nodeId',
   },
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 82728bc84..eb35b3560 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -101,7 +101,7 @@ export function Component() {
   }
 
   if (viewMode.mode === 'frameworkEventsTable') {
-    return <FrameworkEventsTable rootTreeId={viewMode.treeRootId} />;
+    return <FrameworkEventsTable treeId={viewMode.treeRootId} />;
   }
 
   return (
diff --git a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
index ffd7bcfcf..e6f8fe81b 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
@@ -159,38 +159,43 @@ export const ContextMenu: React.FC<{
       frameworkEvents.getAllRecordsByIndex({nodeId: hoveredNode.id})) ??
     [];
 
-  const frameworkEventsTable = matchingFrameworkEvents.length > 0 && (
-    <UIDebuggerMenuItem
-      text="Explore events"
-      onClick={() => {
-        onSetViewMode({
-          mode: 'frameworkEventsTable',
-          treeRootId: hoveredNode?.id ?? '',
-        });
-      }}
-      icon={<TableOutlined />}
-    />
-  );
+  const frameworkEventsTable = hoveredNode?.tags.includes('TreeRoot') &&
+    matchingFrameworkEvents.length > 0 && (
+      <UIDebuggerMenuItem
+        text="Explore events"
+        onClick={() => {
+          onSetViewMode({
+            mode: 'frameworkEventsTable',
+            treeRootId: hoveredNode?.id ?? '',
+          });
+        }}
+        icon={<TableOutlined />}
+      />
+    );
 
   return (
     <Dropdown
       onVisibleChange={(visible) => {
         onContextMenuOpen(visible);
       }}
-      overlay={() => (
-        <Menu>
-          {treeCollapseItems}
-          {focus}
-          {removeFocus}
-          {frameworkEventsTable}
-          {(focus || removeFocus || frameworkEventsTable) && (
-            <Menu.Divider key="divider-focus" />
-          )}
-          {copyItems}
+      overlay={() => {
+        return (
+          <Menu>
+            {treeCollapseItems}
+            {focus}
+            {removeFocus}
+            {frameworkEventsTable}
+            {(focus || removeFocus || frameworkEventsTable) && (
+              <Menu.Divider key="divider-focus" />
+            )}
+            {copyItems}
 
-          {hoveredNode && <IDEContextMenuItems key="ide" node={hoveredNode} />}
-        </Menu>
-      )}
+            {hoveredNode && (
+              <IDEContextMenuItems key="ide" node={hoveredNode} />
+            )}
+          </Menu>
+        );
+      }}
       trigger={['contextMenu']}>
       {children}
     </Dropdown>