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

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;

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>

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 (

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

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 && (
+  const frameworkEventsTable = matchingFrameworkEvents.length > 0 &&
-    <UIDebuggerMenuItem
+    hoveredNode && (
-      text="Explore events"
+      <UIDebuggerMenuItem
-      onClick={() => {
+        text="Explore events"
-        onSetViewMode({
+        onClick={() => {
-          mode: 'frameworkEventsTable',
+          onSetViewMode({
-          nodeId: hoveredNode?.id ?? '',
+            mode: 'frameworkEventsTable',
-        });
+            nodeId: hoveredNode.id,
-      }}
+            isTree: hoveredNode.tags.includes('TreeRoot'),
-      icon={<TableOutlined />}
+          });
-    />
+        }}
-  );
+        icon={<TableOutlined />}
+      />
+    );
 
   return (
     <Dropdown