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
-              <Button
+              shape="circle"
-                shape="circle"
+              icon={<TableOutlined />}
-                icon={<TableOutlined />}
+              onClick={() =>
-                onClick={() =>
+                onSetViewMode({
-                  onSetViewMode({
+                  mode: 'frameworkEventsTable',
-                    mode: 'frameworkEventsTable',
+                  nodeId: node.id,
-                    treeRootId: node.id,
+                })
-                  })
+              }
-                }
+            />
-              />
+          </Tooltip>
-            </Tooltip>
-          )}
           <Dropdown
             overlayStyle={{minWidth: 200}}
             overlay={

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

@@ -159,19 +159,18 @@ 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
-      <UIDebuggerMenuItem
+      text="Explore events"
-        text="Explore events"
+      onClick={() => {
-        onClick={() => {
+        onSetViewMode({
-          onSetViewMode({
+          mode: 'frameworkEventsTable',
-            mode: 'frameworkEventsTable',
+          nodeId: hoveredNode?.id ?? '',
-            treeRootId: hoveredNode?.id ?? '',
+        });
-          });
+      }}
-        }}
+      icon={<TableOutlined />}
-        icon={<TableOutlined />}
+    />
-      />
+  );
-    );
 
   return (
     <Dropdown