Allow exploring all events in table view

Summary: This lets you debug when events go off screen

Reviewed By: lblasa

Differential Revision: D48395787

fbshipit-source-id: 51a6eb74fa0f61c34f25e86a6ee40bf5969379ee

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

@@ -66,7 +66,7 @@ export type NestedNode = {
 
 export type ViewMode =
   | {mode: 'default'}
-  | {mode: 'frameworkEventsTable'; treeRootId: Id};
+  | {mode: 'frameworkEventsTable'; nodeId: Id};
 
 export type NodeSelection = {
   id: Id;

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({treeId}: {treeId?: Id}) {
+export function FrameworkEventsTable({nodeId}: {nodeId: Id}) {
   const instance = usePlugin(plugin);
 
   const managerRef = useRef<DataTableManager<FrameworkEvent> | null>(null);
 
   useEffect(() => {
-    if (treeId != null) {
+    if (nodeId != null) {
       managerRef.current?.resetFilters();
-      managerRef.current?.addColumnFilter('treeId', treeId as string);
+      managerRef.current?.addColumnFilter('nodeId', nodeId as string);
     }
-  }, [treeId]);
+  }, [nodeId]);
 
   return (
     <Layout.Container grow>

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -103,7 +103,7 @@ export function Component() {
   }
 
   if (viewMode.mode === 'frameworkEventsTable') {
-    return <FrameworkEventsTable treeId={viewMode.treeRootId} />;
+    return <FrameworkEventsTable nodeId={viewMode.nodeId} />;
   }
 
   return (

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

@@ -78,20 +78,18 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
         <Typography.Title level={3}>Event timeline</Typography.Title>
 
         <Layout.Horizontal center gap padh="medium">
-          {node.tags.includes('TreeRoot') && (
+          <Tooltip title="Explore events in table">
-            <Tooltip title="Explore all tree events in table">
             <Button
               shape="circle"
               icon={<TableOutlined />}
               onClick={() =>
                 onSetViewMode({
                   mode: 'frameworkEventsTable',
-                    treeRootId: node.id,
+                  nodeId: node.id,
                 })
               }
             />
           </Tooltip>
-          )}
           <Dropdown
             overlayStyle={{minWidth: 200}}
             overlay={

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

@@ -159,14 +159,13 @@ export const ContextMenu: React.FC<{
       frameworkEvents.getAllRecordsByIndex({nodeId: hoveredNode.id})) ??
     [];
 
-  const frameworkEventsTable = hoveredNode?.tags.includes('TreeRoot') &&
+  const frameworkEventsTable = matchingFrameworkEvents.length > 0 && (
-    matchingFrameworkEvents.length > 0 && (
     <UIDebuggerMenuItem
       text="Explore events"
       onClick={() => {
         onSetViewMode({
           mode: 'frameworkEventsTable',
-            treeRootId: hoveredNode?.id ?? '',
+          nodeId: hoveredNode?.id ?? '',
         });
       }}
       icon={<TableOutlined />}