Make the visualiser scrollable and remember width

Summary:
Previously If you set the visualiser too wide, the height adjusts with the aspect ratio and  the bottom was cut off and there was no way to scroll. Have added a scrollbar if it exceeds the available height

Also the width state was promoted to an atom so the users resize amount is preserved when moving between plugins

A better solution might be to prevent the visualiser from getting too wide for the available hieght but it get complex when the window resizes.

Reviewed By: lblasa

Differential Revision: D43351294

fbshipit-source-id: f618a69ed025214593a74b952ce75c5fd98447cd

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -31,13 +31,12 @@ import {Tree2} from './Tree';
 export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
+  const visualiserWidth = useValue(instance.uiState.visualiserWidth);
   const nodes: Map<Id, UINode> = useValue(instance.nodes);
   const metadata: Map<MetadataId, Metadata> = useValue(instance.metadata);
 
   const [showPerfStats, setShowPerfStats] = useState(false);
 
-  const [visualiserWidth, setVisualiserWidth] = useState(500);
-
   useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
 
   const {ctrlPressed} = useKeyboardModifiers();
@@ -59,16 +58,18 @@ export function Component() {
               width={visualiserWidth}
               maxWidth={800}
               onResize={(width) => {
-                setVisualiserWidth(width);
+                instance.uiActions.setVisualiserWidth(width);
               }}
               gutter>
-              <Visualization2D
-                rootId={rootId}
-                width={visualiserWidth}
-                nodes={nodes}
-                onSelectNode={instance.uiActions.onSelectNode}
-                modifierPressed={ctrlPressed}
-              />
+              <Layout.ScrollContainer vertical>
+                <Visualization2D
+                  rootId={rootId}
+                  width={visualiserWidth}
+                  nodes={nodes}
+                  onSelectNode={instance.uiActions.onSelectNode}
+                  modifierPressed={ctrlPressed}
+                />
+              </Layout.ScrollContainer>
             </ResizablePanel>
             <DetailSidebar width={350}>
               <Inspector metadata={metadata} nodes={nodes} />