From af7c1c7e749b4f5d06f5d8d0df0a4ec2a6bf8a3a Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 1 Aug 2023 10:32:29 -0700
Subject: [PATCH] Dont allow focusing leaf node

Summary: This mode is useless for leaves

Reviewed By: aigoncharov

Differential Revision: D47949539

fbshipit-source-id: 7f3ae6652ad696e9f550fe5b8f2298a1a3eff329
---
 .../components/visualizer/Visualization2D.tsx     |  3 ++-
 .../components/visualizer/VisualizerControls.tsx  | 12 +++++++-----
 desktop/plugins/public/ui-debugger/utils/map.tsx  | 15 +++++++++++++++
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 desktop/plugins/public/ui-debugger/utils/map.tsx

diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
index 8968c92d6..7bd6b274f 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
@@ -24,6 +24,7 @@ import {head, isEqual, throttle} from 'lodash';
 import {useDelay} from '../../hooks/useDelay';
 import {Tooltip} from 'antd';
 import {TargetModeState, VisualiserControls} from './VisualizerControls';
+import {getNode} from '../../utils/map';
 
 export const Visualization2D: React.FC<
   {
@@ -149,7 +150,7 @@ export const Visualization2D: React.FC<
         onSetWireFrameMode={instance.uiActions.onSetWireFrameMode}
         wireFrameMode={wireFrameMode}
         focusedNode={focusedNodeId}
-        selectedNode={selectedNodeId?.id}
+        selectedNode={getNode(selectedNodeId?.id, nodes)}
         setTargetMode={setTargetMode}
         targetMode={targetMode}
       />
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
index ea91f16f2..ad9dcd9b4 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
@@ -9,7 +9,7 @@
 
 import {Button, Dropdown, Menu, Slider, Tooltip, Typography} from 'antd';
 import {Layout, produce, theme, usePlugin} from 'flipper-plugin';
-import {Id} from '../../ClientTypes';
+import {ClientNode, Id} from '../../ClientTypes';
 import {plugin} from '../../index';
 import React from 'react';
 import {
@@ -44,16 +44,18 @@ export function VisualiserControls({
 }: {
   wireFrameMode: WireFrameMode;
   onSetWireFrameMode: (mode: WireFrameMode) => void;
-  selectedNode?: Id;
+  selectedNode?: ClientNode;
   focusedNode?: Id;
   setTargetMode: (targetMode: TargetModeState) => void;
   targetMode: TargetModeState;
 }) {
   const instance = usePlugin(plugin);
 
-  const focusDisabled = focusedNode == null && selectedNode == null;
+  const focusDisabled =
+    focusedNode == null &&
+    (selectedNode == null || selectedNode.children.length === 0);
   const focusToolTip = focusDisabled
-    ? 'Select a node to focus it'
+    ? 'Select a non leaf node to focus it'
     : focusedNode == null
     ? 'Focus current node'
     : 'Remove focus';
@@ -153,7 +155,7 @@ export function VisualiserControls({
             disabled={focusDisabled}
             onClick={() => {
               if (focusedNode == null) {
-                instance.uiActions.onFocusNode(selectedNode);
+                instance.uiActions.onFocusNode(selectedNode?.id);
               } else {
                 instance.uiActions.onFocusNode();
               }
diff --git a/desktop/plugins/public/ui-debugger/utils/map.tsx b/desktop/plugins/public/ui-debugger/utils/map.tsx
new file mode 100644
index 000000000..5c839f96b
--- /dev/null
+++ b/desktop/plugins/public/ui-debugger/utils/map.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {ClientNode, Id} from '../ClientTypes';
+
+export function getNode(id: Id | undefined, nodes: Map<Id, ClientNode>) {
+  //map just returns undefined when you pass null or undefined as a key
+  return nodes.get(id!);
+}