From f12d8221d627540d9e10527854011bcc6c34b0cf Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Fri, 17 Feb 2023 02:45:05 -0800
Subject: [PATCH] Fixed issue where visualiser would crop bottom few pixels of
 screen

Summary:
Fixes https://fb.workplace.com/groups/443457641253219/permalink/522118536720462/

On android for some reason our display metrics for the application, activity and winow were smaller than the decor view. We were using the root view as the base static view for the visualiser with overflow hidden. Since it will slightly smaller than the decor view we were losing some of the lower pixels of the snapshot

The decor view is the one that is actually snapshot so any bounds for nodes above are meaningless . The fix is to simply have the visualiser start at the snapshot view. We know this bounds is correct.

Tested on ios and android and all looks ok

Reviewed By: lblasa

Differential Revision: D43356523

fbshipit-source-id: 4d6177c8242365f33b1d64fc149a10baff7c85d6
---
 .../public/ui-debugger/components/Visualization2D.tsx     | 8 ++++----
 desktop/plugins/public/ui-debugger/components/main.tsx    | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index eff660659..07f788e8e 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -19,13 +19,12 @@ import {useFilteredValue} from '../hooks/usefilteredValue';
 
 export const Visualization2D: React.FC<
   {
-    rootId: Id;
     width: number;
     nodes: Map<Id, UINode>;
     onSelectNode: (id?: Id) => void;
     modifierPressed: boolean;
   } & React.HTMLAttributes<HTMLDivElement>
-> = ({rootId, width, nodes, onSelectNode, modifierPressed}) => {
+> = ({width, nodes, onSelectNode, modifierPressed}) => {
   const rootNodeRef = useRef<HTMLDivElement>();
   const instance = usePlugin(plugin);
 
@@ -34,9 +33,10 @@ export const Visualization2D: React.FC<
   const focusedNodeId = useValue(instance.uiState.focusedNode);
 
   const focusState = useMemo(() => {
-    const rootNode = toNestedNode(rootId, nodes);
+    //use the snapshot node as root since we cant realistically visualise any node above this
+    const rootNode = snapshot && toNestedNode(snapshot.nodeId, nodes);
     return rootNode && caclulateFocusState(rootNode, focusedNodeId);
-  }, [focusedNodeId, rootId, nodes]);
+  }, [snapshot, nodes, focusedNodeId]);
 
   useEffect(() => {
     const mouseListener = throttle((ev: MouseEvent) => {
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 3457d902e..f5c407683 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -63,7 +63,6 @@ export function Component() {
               gutter>
               <Layout.ScrollContainer vertical>
                 <Visualization2D
-                  rootId={rootId}
                   width={visualiserWidth}
                   nodes={nodes}
                   onSelectNode={instance.uiActions.onSelectNode}