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

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

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',
   },

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 (

desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx

@@ -159,7 +159,8 @@ export const ContextMenu: React.FC<{
       frameworkEvents.getAllRecordsByIndex({nodeId: hoveredNode.id})) ??
     [];
 
-  const frameworkEventsTable = matchingFrameworkEvents.length > 0 && (
+  const frameworkEventsTable = hoveredNode?.tags.includes('TreeRoot') &&
+    matchingFrameworkEvents.length > 0 && (
       <UIDebuggerMenuItem
         text="Explore events"
         onClick={() => {
@@ -177,7 +178,8 @@ export const ContextMenu: React.FC<{
       onVisibleChange={(visible) => {
         onContextMenuOpen(visible);
       }}
-      overlay={() => (
+      overlay={() => {
+        return (
           <Menu>
             {treeCollapseItems}
             {focus}
@@ -188,9 +190,12 @@ export const ContextMenu: React.FC<{
             )}
             {copyItems}
 
-          {hoveredNode && <IDEContextMenuItems key="ide" node={hoveredNode} />}
-        </Menu>
+            {hoveredNode && (
+              <IDEContextMenuItems key="ide" node={hoveredNode} />
             )}
+          </Menu>
+        );
+      }}
       trigger={['contextMenu']}>
       {children}
     </Dropdown>