UID refactor 4/ Expose readonly UIState

Summary:
Currently state writes can either go through a named handler that is easy to find and debug or they can directly modify the state.

By exposing readonly atoms only we ensure that all state writes go through a UIACtions. This adds consistency and ease of future debugging.

E.g We could add a utility to wrap all ui actions with logging statements

Reviewed By: antonk52

Differential Revision: D47547531

fbshipit-source-id: f88651169d8e7c5f7e31068d64f9aa5b6b573647

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

@@ -80,7 +80,7 @@ export const Visualization2D: React.FC<
         hitNodes.length > 0 &&
         !isEqual(hitNodes, instance.uiState.hoveredNodes.get())
       ) {
-        instance.uiState.hoveredNodes.set(hitNodes);
+        instance.uiActions.onHoverNode(...hitNodes);
       }
     }, MouseThrottle);
     window.addEventListener('mousemove', mouseListener);
@@ -95,6 +95,7 @@ export const Visualization2D: React.FC<
     instance.uiState.isContextMenuOpen,
     width,
     snapshotNode,
+    instance.uiActions,
   ]);
 
   if (!focusState || !snapshotNode) {
@@ -110,7 +111,7 @@ export const Visualization2D: React.FC<
           e.stopPropagation();
           //the context menu triggers this callback but we dont want to remove hover effect
           if (!instance.uiState.isContextMenuOpen.get()) {
-            instance.uiState.hoveredNodes.set([]);
+            instance.uiActions.onHoverNode();
           }
 
           mouseInVisualiserRef.current = false;
@@ -338,7 +339,7 @@ const ContextMenu: React.FC<{nodes: Map<Id, ClientNode>}> = ({children}) => {
   return (
     <Dropdown
       onVisibleChange={(open) => {
-        instance.uiState.isContextMenuOpen.set(open);
+        instance.uiActions.onContextMenuOpen(open);
       }}
       trigger={['contextMenu']}
       overlay={() => {
@@ -358,7 +359,7 @@ const ContextMenu: React.FC<{nodes: Map<Id, ClientNode>}> = ({children}) => {
                 key="remove-focus"
                 text="Remove focus"
                 onClick={() => {
-                  instance.uiState.focusedNode.set(undefined);
+                  instance.uiActions.onFocusNode(undefined);
                 }}
               />
             )}