From 941225e3d6533b74e506a57471749f31aee349b4 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 10 Oct 2022 04:13:06 -0700
Subject: [PATCH] Only show node name when hovered

Summary: This makes the vizualiser a lot less cluttered

Reviewed By: lblasa

Differential Revision: D40021837

fbshipit-source-id: 8901c9bff6f05ee3fa4517e103c770be1fcfa403
---
 .../ui-debugger/components/Visualization2D.tsx  | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 84107517e..0d6890759 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -144,13 +144,6 @@ function Visualization2DNode({
     />
   ));
 
-  const hasOverlappingChild = childrenIds
-    .map((id) => nodes.get(id))
-    .find((child) => child?.bounds?.x === 0 || child?.bounds?.y === 0);
-
-  const isZeroWidthOrHeight =
-    node.bounds?.height === 0 || node.bounds?.width === 0;
-
   const bounds = node.bounds ?? {x: 0, y: 0, width: 0, height: 0};
 
   return (
@@ -184,19 +177,13 @@ function Visualization2DNode({
         onSelectNode(nodeId);
       }}>
       <NodeBorder tags={node.tags}></NodeBorder>
-      {snapshot ? (
+      {snapshot && (
         <img
           src={'data:image/jpeg;base64,' + snapshot}
           style={{maxWidth: '100%'}}
         />
-      ) : (
-        <>
-          {/* Dirty hack to avoid showing highly overlapping text */}
-          {!hasOverlappingChild && !isZeroWidthOrHeight && node.bounds
-            ? node.name
-            : null}
-        </>
       )}
+      {isHovered && <p style={{float: 'right'}}>{node.name}</p>}
       {children}
     </div>
   );