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

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) => {