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