feat: store hidden nodes separetly

l2beat · Feb 9, 2024 · 58993c2 · 58993c2
1 parent 45f774f
commit 58993c2
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 41 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -22,8 +22,10 @@ import { Viewport } from './view/Viewport'
 export function App() {
   // load the initial nodes from the store that gets rehydrated from local storage at startup
   const initialNodes = useStore((state) => state.nodes)
+  const hiddenNodesIds = useStore((state) => state.hiddenNodesIds)
   const projectId = useStore((state) => state.projectId)
   const updateNodeLocations = useStore((state) => state.updateNodeLocations)
+  const setHiddenNodes = useStore((state) => state.setHiddenNodes)
   const setProjectId = useStore((state) => state.setProjectId)
   const [nodes, setNodes] = useState<SimpleNode[]>(
     initialNodes.map(nodeToSimpleNode),
@@ -48,6 +50,7 @@ export function App() {
 
   function clear() {
     setNodes([])
+    setHiddenNodes(() => [])
   }
 
   function save() {
@@ -74,26 +77,8 @@ export function App() {
     setNodes((nodes) => merge(nodes, result))
   }
 
-  function hideNode(id: string) {
-    setNodes((nodes) =>
-      nodes.map((node) =>
-        node.id === id
-          ? {
-              ...node,
-              hidden: true,
-            }
-          : node,
-      ),
-    )
-  }
-
   function revealAllNodes() {
-    setNodes((nodes) =>
-      nodes.map((node) => ({
-        ...node,
-        hidden: false,
-      })),
-    )
+    setHiddenNodes(() => [])
   }
 
   async function loadFromFile(file: File) {
@@ -165,7 +150,6 @@ export function App() {
             loading={loading}
             // eslint-disable-next-line @typescript-eslint/no-misused-promises
             onDiscover={discoverContract}
-            onHideNode={hideNode}
           />
 
           <div className="absolute top-0 w-full p-2">
@@ -193,7 +177,7 @@ export function App() {
                   onClick={revealAllNodes}
                   className="rounded bg-blue-400 px-4 py-2 font-bold text-white hover:bg-blue-700"
                 >
-                  Reveal all ({nodes.filter((n) => n.hidden).length})
+                  Reveal all ({hiddenNodesIds.length})
                 </button>
                 <button
                   className="px-1 text-2xl hover:bg-gray-300"

diff --git a/packages/frontend/src/api/SimpleNode.ts b/packages/frontend/src/api/SimpleNode.ts
@@ -4,7 +4,6 @@ interface SimpleNodeShared {
   id: string
   name: string
   discovered: boolean
-  hidden: boolean
   fields: {
     name: string
     connection?: string // id

diff --git a/packages/frontend/src/store/State.ts b/packages/frontend/src/store/State.ts
@@ -2,6 +2,7 @@ import { SimpleNode } from '../api/SimpleNode'
 
 export interface State {
   readonly selectedNodeIds: readonly string[]
+  readonly hiddenNodesIds: readonly string[]
   readonly nodes: readonly Node[]
   readonly selection?: Box
   readonly transform: {

diff --git a/packages/frontend/src/store/actions/Actions.ts b/packages/frontend/src/store/actions/Actions.ts
@@ -12,4 +12,6 @@ export interface Actions {
   updateNodes: (nodes: SimpleNode[]) => void
   updateNodeLocations: (locations: NodeLocations) => void
   setProjectId: (projectId: string) => void
+
+  setHiddenNodes: (update: (currentlyHiddenIds: string[]) => string[]) => void
 }
diff --git a/packages/frontend/src/store/store.ts b/packages/frontend/src/store/store.ts
@@ -15,6 +15,7 @@ export const useStore = create<State & Actions>()(
   persist(
     (set) => ({
       selectedNodeIds: [],
+      hiddenNodesIds: [],
       nodes: [],
       selection: undefined,
       transform: { offsetX: 0, offsetY: 0, scale: 1 },
@@ -43,12 +44,22 @@ export const useStore = create<State & Actions>()(
         set((state) => updateNodeLocations(state, ...args)),
       setProjectId: (projectId: string) =>
         set((state) => ({ ...state, projectId: projectId })),
+
+      setHiddenNodes: (updateFn) => {
+        set((state) => {
+          // stale-state
+          const hiddenNodesIds = updateFn([...state.hiddenNodesIds])
+
+          return { ...state, hiddenNodesIds }
+        })
+      },
     }),
     {
       name: 'store',
       partialize: (state) => {
         return {
           nodes: state.nodes,
+          hiddenNodesIds: state.hiddenNodesIds,
           projectId: state.projectId,
         }
       },

diff --git a/packages/frontend/src/view/NodeView.tsx b/packages/frontend/src/view/NodeView.tsx
@@ -7,7 +7,6 @@ export interface NodeViewProps {
   node: Node
   selected: boolean
   discovered: boolean
-  hidden: boolean
   onDiscover: (nodeId: string) => void
   onHideNode: (nodeId: string) => void
   loading: boolean
@@ -35,16 +34,12 @@ export function NodeView(props: NodeViewProps) {
     return () => {
       hideRef.current?.removeEventListener('mousedown', onHide, true)
     }
-  }, [props.hidden])
+  }, [])
 
   const onDiscover = useCallback(() => {
     props.onDiscover(props.node.simpleNode.id)
   }, [props.onDiscover, props.node.simpleNode.id])
 
-  if (props.hidden) {
-    return null
-  }
-
   return (
     <div
       style={{

diff --git a/packages/frontend/src/view/Viewport.tsx b/packages/frontend/src/view/Viewport.tsx
@@ -10,7 +10,6 @@ import { useViewport } from './useViewport'
 export interface ViewportProps {
   nodes: SimpleNode[]
   onDiscover: (nodeId: string) => void
-  onHideNode: (nodeId: string) => void
   loading: Record<string, boolean | undefined>
 }
 
@@ -22,28 +21,36 @@ export function Viewport(props: ViewportProps) {
     updateNodes(props.nodes)
   }, [updateNodes, props.nodes])
 
+  const setHiddenNodes = useStore((state) => state.setHiddenNodes)
+
   const nodes = useStore((state) => state.nodes)
   const selectedNodeIds = useStore((state) => state.selectedNodeIds)
+  const hiddenNodesIds = useStore((state) => state.hiddenNodesIds)
+
   const transform = useStore((state) => state.transform)
   const mouseSelection = useStore((state) => state.mouseSelection)
 
+  const visibleNodes = nodes.filter(
+    (node) => !hiddenNodesIds.includes(node.simpleNode.id),
+  )
+
+  function hideNode(nodeId: string) {
+    setHiddenNodes((nodes) => [...nodes, nodeId])
+  }
+
   return (
     <div
       ref={containerRef}
       className="relative h-full w-full overflow-hidden rounded-lg bg-white"
     >
       <ScalableView ref={viewRef} transform={transform}>
-        {nodes.map((node) =>
+        {visibleNodes.map((node) =>
           node.fields.map((field, i) => {
-            const shouldShow =
-              field.connection &&
-              !node.simpleNode.hidden &&
-              // check if connection is pointing to a node that is hidden
-              !nodes
-                .filter((n) => n.simpleNode.id === field.connection?.nodeId)
-                .every((n) => n.simpleNode.hidden)
+            const shouldHide =
+              !field.connection ||
+              hiddenNodesIds.find((id) => id === field.connection?.nodeId)
 
-            if (!shouldShow) {
+            if (shouldHide) {
               return null
             }
 
@@ -56,15 +63,14 @@ export function Viewport(props: ViewportProps) {
             )
           }),
         )}
-        {nodes.map((node) => (
+        {visibleNodes.map((node) => (
           <NodeView
             key={node.simpleNode.id}
             node={node}
             selected={selectedNodeIds.includes(node.simpleNode.id)}
             discovered={node.simpleNode.discovered}
-            hidden={node.simpleNode.hidden}
             onDiscover={props.onDiscover}
-            onHideNode={props.onHideNode}
+            onHideNode={hideNode}
             loading={!!props.loading[node.simpleNode.id]}
           />
         ))}