From c6dddccd87cdb4b51d0e5b8308b0a5051718a54a 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] focus visualiser node when selecting in table view

Summary: Use the visualiser as a reference for the event table

Reviewed By: antonk52

Differential Revision: D48562105

fbshipit-source-id: 8707efdcb0631e9716dd0a06e01518480ca2edc1
---
 .../components/FrameworkEventsTable.tsx       | 34 +++++++++++++++++--
 .../components/visualizer/Visualization2D.tsx | 24 ++++++++-----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
index 6d8572c9b..410de38b0 100644
--- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
+++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
@@ -12,21 +12,26 @@ import {
   DataTable,
   DataTableColumn,
   DataTableManager,
+  DetailSidebar,
   Layout,
   usePlugin,
+  useValue,
 } from 'flipper-plugin';
-import React, {useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {FrameworkEvent, Id, NodeMap} from '../ClientTypes';
 import {plugin} from '../index';
-import {Button, Tooltip} from 'antd';
+import {Button, Result, Tooltip} from 'antd';
 import {AugmentedFrameworkEvent} from '../DesktopTypes';
 import {formatDuration, formatTimestampMillis} from '../utils/timeUtils';
 import {eventTypeToName} from './sidebar/inspector/FrameworkEventsInspector';
 import {startCase} from 'lodash';
+import {Visualization2D} from './visualizer/Visualization2D';
+import {getNode} from '../utils/map';
 
 export function FrameworkEventsTable({
   nodeId,
   isTree,
+  nodes,
 }: {
   nodeId: Id;
   nodes: NodeMap;
@@ -34,11 +39,13 @@ export function FrameworkEventsTable({
 }) {
   const instance = usePlugin(plugin);
 
+  const focusedNode = useValue(instance.uiState.focusedNode);
   const managerRef = useRef<DataTableManager<AugmentedFrameworkEvent> | null>(
     null,
   );
 
   useEffect(() => {
+    instance.uiActions.onSelectNode(undefined, 'tree');
     if (nodeId != null) {
       managerRef.current?.resetFilters();
       if (isTree) {
@@ -51,24 +58,45 @@ export function FrameworkEventsTable({
         });
       }
     }
-  }, [isTree, nodeId]);
+  }, [instance.uiActions, isTree, nodeId]);
 
+  const onSelectRow = useCallback(
+    (event: FrameworkEvent | undefined): void => {
+      instance.uiActions.onFocusNode(event?.nodeId);
+    },
+    [instance.uiActions],
+  );
   return (
     <Layout.Container grow>
       <DataTable<FrameworkEvent>
         dataSource={instance.frameworkEvents}
         tableManagerRef={managerRef}
+        onSelect={onSelectRow}
         columns={columns}
         extraActions={
           <Tooltip title="Back to tree">
             <Button
               onClick={() => {
+                instance.uiActions.onFocusNode(undefined);
                 instance.uiActions.onSetViewMode({mode: 'default'});
               }}
               icon={<PartitionOutlined />}></Button>
           </Tooltip>
         }
       />
+      <DetailSidebar width={450}>
+        {getNode(focusedNode, nodes) != null ? (
+          <Visualization2D
+            disableInteractivity
+            hideControls
+            width={400}
+            nodes={nodes}
+            onSelectNode={instance.uiActions.onSelectNode}
+          />
+        ) : (
+          <Result title="Node is no longer on screen" />
+        )}
+      </DetailSidebar>
     </Layout.Container>
   );
 }
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
index 7bd6b274f..a8afa87e4 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
@@ -31,8 +31,10 @@ export const Visualization2D: React.FC<
     width: number;
     nodes: Map<Id, ClientNode>;
     onSelectNode: OnSelectNode;
+    hideControls?: boolean;
+    disableInteractivity?: boolean;
   } & React.HTMLAttributes<HTMLDivElement>
-> = ({width, nodes, onSelectNode}) => {
+> = ({width, nodes, onSelectNode, hideControls, disableInteractivity}) => {
   const rootNodeRef = useRef<HTMLDivElement>();
   const instance = usePlugin(plugin);
 
@@ -62,6 +64,7 @@ export const Visualization2D: React.FC<
       const domRect = rootNodeRef.current?.getBoundingClientRect();
 
       if (
+        disableInteractivity ||
         !focusState ||
         !domRect ||
         instance.uiState.isContextMenuOpen.get() ||
@@ -110,6 +113,7 @@ export const Visualization2D: React.FC<
     width,
     snapshotNode,
     instance.uiActions,
+    disableInteractivity,
   ]);
 
   useEffect(() => {
@@ -146,14 +150,16 @@ export const Visualization2D: React.FC<
 
   return (
     <Layout.Container>
-      <VisualiserControls
-        onSetWireFrameMode={instance.uiActions.onSetWireFrameMode}
-        wireFrameMode={wireFrameMode}
-        focusedNode={focusedNodeId}
-        selectedNode={getNode(selectedNodeId?.id, nodes)}
-        setTargetMode={setTargetMode}
-        targetMode={targetMode}
-      />
+      {!hideControls && (
+        <VisualiserControls
+          onSetWireFrameMode={instance.uiActions.onSetWireFrameMode}
+          wireFrameMode={wireFrameMode}
+          focusedNode={focusedNodeId}
+          selectedNode={getNode(selectedNodeId?.id, nodes)}
+          setTargetMode={setTargetMode}
+          targetMode={targetMode}
+        />
+      )}
 
       <div
         onMouseLeave={(e) => {