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} />

desktop/plugins/public/ui-debugger/index.tsx

@@ -43,6 +43,7 @@ type UIState = {
   highlightedNodes: Atom<Set<Id>>;
   focusedNode: Atom<Id | undefined>;
   expandedNodes: Atom<Set<Id>>;
+  visualiserWidth: Atom<number>;
   frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>;
 };
 
@@ -91,6 +92,8 @@ export function plugin(client: PluginClient<Events>) {
     //used to disabled hover effects which cause rerenders and mess up the existing context menu
     isContextMenuOpen: createState<boolean>(false),
 
+    visualiserWidth: createState(Math.min(window.innerWidth / 4.5, 500)),
+
     highlightedNodes,
 
     selectedNode: createState<Id | undefined>(undefined),
@@ -260,6 +263,7 @@ type UIActions = {
   onSelectNode: (node?: Id) => void;
   onExpandNode: (node: Id) => void;
   onCollapseNode: (node: Id) => void;
+  setVisualiserWidth: (width: Id) => void;
 };
 
 function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
@@ -298,6 +302,11 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
     uiState.focusedNode.set(focused);
   };
 
+  const setVisualiserWidth = (width: number) => {
+    console.log('w', width);
+    uiState.visualiserWidth.set(width);
+  };
+
   return {
     onExpandNode,
     onCollapseNode,
@@ -305,6 +314,7 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
     onSelectNode,
     onContextMenuOpen,
     onFocusNode,
+    setVisualiserWidth,
   };
 }