From 22d1bc25523b3e64cebc35bb61812bb418d75b9c 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] 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
---
 .../public/ui-debugger/DesktopTypes.tsx       |  2 +-
 .../components/FrameworkEventsTable.tsx       |  8 +++---
 .../public/ui-debugger/components/main.tsx    |  2 +-
 .../inspector/FrameworkEventsInspector.tsx    | 26 +++++++++----------
 .../components/tree/ContextMenu.tsx           | 25 +++++++++---------
 5 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
index d29d3344a..c9f708267 100644
--- a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
+++ b/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;
diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
index fd3a6e795..db90e6b72 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({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>
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 22c778342..90ed95d4b 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/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 (
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
index 1626dabd8..d9ed903c2 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
+++ b/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 all tree events in table">
-              <Button
-                shape="circle"
-                icon={<TableOutlined />}
-                onClick={() =>
-                  onSetViewMode({
-                    mode: 'frameworkEventsTable',
-                    treeRootId: node.id,
-                  })
-                }
-              />
-            </Tooltip>
-          )}
+          <Tooltip title="Explore events in table">
+            <Button
+              shape="circle"
+              icon={<TableOutlined />}
+              onClick={() =>
+                onSetViewMode({
+                  mode: 'frameworkEventsTable',
+                  nodeId: node.id,
+                })
+              }
+            />
+          </Tooltip>
           <Dropdown
             overlayStyle={{minWidth: 200}}
             overlay={
diff --git a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
index e6f8fe81b..154ddf026 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
+++ b/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') &&
-    matchingFrameworkEvents.length > 0 && (
-      <UIDebuggerMenuItem
-        text="Explore events"
-        onClick={() => {
-          onSetViewMode({
-            mode: 'frameworkEventsTable',
-            treeRootId: hoveredNode?.id ?? '',
-          });
-        }}
-        icon={<TableOutlined />}
-      />
-    );
+  const frameworkEventsTable = matchingFrameworkEvents.length > 0 && (
+    <UIDebuggerMenuItem
+      text="Explore events"
+      onClick={() => {
+        onSetViewMode({
+          mode: 'frameworkEventsTable',
+          nodeId: hoveredNode?.id ?? '',
+        });
+      }}
+      icon={<TableOutlined />}
+    />
+  );
 
   return (
     <Dropdown