From 7d9744b8fff2719ae67a716f0aa0e728815119e0 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 23 Aug 2023 01:51:31 -0700
Subject: [PATCH] Improve framework event filtering

Summary: Now when entering framework event table from a tree root we filter that so you can see all tree events. Also we use exact matches to avoid and nasty substring bugs

Reviewed By: lblasa

Differential Revision: D48560169

fbshipit-source-id: 1df375a2b8c5035003d82c210b55adebda8bd4ec
---
 .../public/ui-debugger/DesktopTypes.tsx       |  2 +-
 .../components/FrameworkEventsTable.tsx       | 21 ++++++++++++---
 .../public/ui-debugger/components/main.tsx    |  8 +++++-
 .../inspector/FrameworkEventsInspector.tsx    |  1 +
 .../components/tree/ContextMenu.tsx           | 26 ++++++++++---------
 5 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
index b8326b745..b23c0afcc 100644
--- a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
+++ b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx
@@ -67,7 +67,7 @@ export type NestedNode = {
 
 export type ViewMode =
   | {mode: 'default'}
-  | {mode: 'frameworkEventsTable'; nodeId: Id};
+  | {mode: 'frameworkEventsTable'; nodeId: Id; isTree: boolean};
 
 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 da283004e..6d8572c9b 100644
--- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
+++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
@@ -24,7 +24,14 @@ import {formatDuration, formatTimestampMillis} from '../utils/timeUtils';
 import {eventTypeToName} from './sidebar/inspector/FrameworkEventsInspector';
 import {startCase} from 'lodash';
 
-export function FrameworkEventsTable({nodeId}: {nodeId: Id; nodes: NodeMap}) {
+export function FrameworkEventsTable({
+  nodeId,
+  isTree,
+}: {
+  nodeId: Id;
+  nodes: NodeMap;
+  isTree: boolean;
+}) {
   const instance = usePlugin(plugin);
 
   const managerRef = useRef<DataTableManager<AugmentedFrameworkEvent> | null>(
@@ -34,9 +41,17 @@ export function FrameworkEventsTable({nodeId}: {nodeId: Id; nodes: NodeMap}) {
   useEffect(() => {
     if (nodeId != null) {
       managerRef.current?.resetFilters();
-      managerRef.current?.addColumnFilter('nodeId', nodeId as string);
+      if (isTree) {
+        managerRef.current?.addColumnFilter('treeId', nodeId as string, {
+          exact: true,
+        });
+      } else {
+        managerRef.current?.addColumnFilter('nodeId', nodeId as string, {
+          exact: true,
+        });
+      }
     }
-  }, [nodeId]);
+  }, [isTree, 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 2b52a1720..3f281ead7 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -103,7 +103,13 @@ export function Component() {
   }
 
   if (viewMode.mode === 'frameworkEventsTable') {
-    return <FrameworkEventsTable nodeId={viewMode.nodeId} nodes={nodes} />;
+    return (
+      <FrameworkEventsTable
+        nodeId={viewMode.nodeId}
+        isTree={viewMode.isTree}
+        nodes={nodes}
+      />
+    );
   }
 
   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 a19704dde..bf0456967 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
@@ -89,6 +89,7 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
                 onSetViewMode({
                   mode: 'frameworkEventsTable',
                   nodeId: node.id,
+                  isTree: node.tags.includes('TreeRoot'),
                 })
               }
             />
diff --git a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
index 154ddf026..56044a33b 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx
@@ -159,18 +159,20 @@ export const ContextMenu: React.FC<{
       frameworkEvents.getAllRecordsByIndex({nodeId: hoveredNode.id})) ??
     [];
 
-  const frameworkEventsTable = matchingFrameworkEvents.length > 0 && (
-    <UIDebuggerMenuItem
-      text="Explore events"
-      onClick={() => {
-        onSetViewMode({
-          mode: 'frameworkEventsTable',
-          nodeId: hoveredNode?.id ?? '',
-        });
-      }}
-      icon={<TableOutlined />}
-    />
-  );
+  const frameworkEventsTable = matchingFrameworkEvents.length > 0 &&
+    hoveredNode && (
+      <UIDebuggerMenuItem
+        text="Explore events"
+        onClick={() => {
+          onSetViewMode({
+            mode: 'frameworkEventsTable',
+            nodeId: hoveredNode.id,
+            isTree: hoveredNode.tags.includes('TreeRoot'),
+          });
+        }}
+        icon={<TableOutlined />}
+      />
+    );
 
   return (
     <Dropdown