feat: hidden nodes can now be reflected from query parameters

frontend/.changeset/empty-parents-knock.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+feat: hidden nodes can now be reflected from query parameters

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -20,6 +20,7 @@ import { TableNode } from './TableNode'
 import { highlightNodesAndEdges } from './highlightNodesAndEdges'
 import { useFitViewWhenActiveTableChange } from './useFitViewWhenActiveTableChange'
 import { useInitialAutoLayout } from './useInitialAutoLayout'
+import { useSyncHiddenNodesChange } from './useSyncHiddenNodesChange'
 import { useSyncHighlightsActiveTableChange } from './useSyncHighlightsActiveTableChange'
 
 const nodeTypes = {
@@ -74,6 +75,7 @@ export const ERDContentInner: FC<Props> = ({
     enabledFeatures?.fitViewWhenActiveTableChange ?? true,
   )
   useSyncHighlightsActiveTableChange()
+  useSyncHiddenNodesChange()
 
   const handleNodeClick = useCallback((nodeId: string) => {
     updateActiveTableName(nodeId)

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx

@@ -1,5 +1,9 @@
 import { convertDBStructureToNodes } from '@/components/ERDRenderer/convertDBStructureToNodes'
-import { updateActiveTableName, useDBStructureStore } from '@/stores'
+import {
+  replaceHiddenNodeIds,
+  updateActiveTableName,
+  useDBStructureStore,
+} from '@/stores'
 import type { Table } from '@liam-hq/db-structure'
 import { GotoIcon, IconButton } from '@liam-hq/ui'
 import { ReactFlowProvider, useReactFlow } from '@xyflow/react'
@@ -19,17 +23,17 @@ export const RelatedTables: FC<Props> = ({ table }) => {
     dbStructure: extractedDBStructure,
     showMode: 'TABLE_NAME',
   })
-  const { setNodes } = useReactFlow()
+  const { getNodes } = useReactFlow()
   const handleClick = useCallback(() => {
     const visibleNodeIds: string[] = nodes.map((node) => node.id)
-    setNodes((mainPaneNodes) => {
-      return mainPaneNodes.map((node) => ({
-        ...node,
-        hidden: !visibleNodeIds.includes(node.id),
-      }))
-    })
+    const mainPaneNodes = getNodes()
+    const hiddenNodeIds = mainPaneNodes
+      .filter((node) => !visibleNodeIds.includes(node.id))
+      .map((node) => node.id)
+
+    replaceHiddenNodeIds(hiddenNodeIds)
     updateActiveTableName(undefined)
-  }, [nodes, setNodes])
+  }, [nodes, getNodes])
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts

@@ -11,12 +11,23 @@ export const useAutoLayout = () => {
   } = useERDContentContext()
 
   const handleLayout = useCallback(
-    async (fitViewOptions?: FitViewOptions) => {
+    async (
+      fitViewOptions: FitViewOptions = {},
+      initialHiddenNodeIds: string[] = [],
+    ) => {
       setLoading(true)
       const nodes = getNodes()
       const edges = getEdges()
-      const visibleNodes: Node[] = nodes.filter((node) => !node.hidden)
-      const hiddenNodes: Node[] = nodes.filter((node) => node.hidden)
+
+      const hiddenNodes: Node[] = []
+      const visibleNodes: Node[] = []
+      for (const node of nodes) {
+        if (initialHiddenNodeIds.includes(node.id) || node.hidden) {
+          hiddenNodes.push({ ...node, hidden: true })
+        } else {
+          visibleNodes.push(node)
+        }
+      }
 
       // NOTE: Only include edges where both the source and target are in the nodes
       const nodeMap = new Map(visibleNodes.map((node) => [node.id, node]))

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts

@@ -1,5 +1,5 @@
 import type { QueryParam } from '@/schemas/queryParam'
-import { updateActiveTableName } from '@/stores'
+import { addHiddenNodeIds, updateActiveTableName } from '@/stores'
 import { useNodesInitialized } from '@xyflow/react'
 import { useEffect } from 'react'
 import { useERDContentContext } from './ERDContentContext'
@@ -13,6 +13,14 @@ const getActiveTableNameFromUrl = (): string | undefined => {
   return tableName || undefined
 }
 
+const getHiddenNodeIdsFromUrl = (): string[] => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const hiddenQueryParam: QueryParam = 'hidden'
+  const hiddenNodeIds = urlParams.get(hiddenQueryParam)
+
+  return hiddenNodeIds ? hiddenNodeIds.split(',') : []
+}
+
 export const useInitialAutoLayout = () => {
   const nodesInitialized = useNodesInitialized()
   const {
@@ -27,12 +35,15 @@ export const useInitialAutoLayout = () => {
 
     const tableNameFromUrl = getActiveTableNameFromUrl()
     updateActiveTableName(tableNameFromUrl)
+    const hiddenNodeIds = getHiddenNodeIdsFromUrl()
+    addHiddenNodeIds(hiddenNodeIds)
+
     const fitViewOptions = tableNameFromUrl
       ? { maxZoom: 1, duration: 300, nodes: [{ id: tableNameFromUrl }] }
       : undefined
 
     if (nodesInitialized) {
-      handleLayout(fitViewOptions)
+      handleLayout(fitViewOptions, hiddenNodeIds)
     }
   }, [nodesInitialized, initializeComplete, handleLayout])
 }

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useSyncHiddenNodesChange.ts

@@ -0,0 +1,25 @@
+import { useUserEditingStore } from '@/stores'
+import { useReactFlow } from '@xyflow/react'
+import { useEffect } from 'react'
+import { useERDContentContext } from './ERDContentContext'
+
+export const useSyncHiddenNodesChange = () => {
+  const {
+    state: { initializeComplete },
+  } = useERDContentContext()
+  const { getNodes, setNodes } = useReactFlow()
+  const { hiddenNodeIds } = useUserEditingStore()
+
+  useEffect(() => {
+    if (!initializeComplete) {
+      return
+    }
+    const nodes = getNodes()
+    const updatedNodes = nodes.map((node) => {
+      const hidden = hiddenNodeIds.has(node.id)
+      return { ...node, hidden }
+    })
+
+    setNodes(updatedNodes)
+  }, [initializeComplete, getNodes, setNodes, hiddenNodeIds])
+}

frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx

@@ -1,5 +1,5 @@
+import { toggleHiddenNodeId } from '@/stores'
 import { Eye, EyeClosed, SidebarMenuAction } from '@liam-hq/ui'
-import { useReactFlow } from '@xyflow/react'
 import { type FC, type MouseEvent, useCallback } from 'react'
 import styles from './VisibilityButton.module.css'
 
@@ -9,14 +9,12 @@ type Props = {
 }
 
 export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
-  const { updateNode } = useReactFlow()
-
   const handleClick = useCallback(
     (event: MouseEvent) => {
       event.stopPropagation()
-      updateNode(tableName, (node) => ({ ...node, hidden: !node.hidden }))
+      toggleHiddenNodeId(tableName)
     },
-    [updateNode, tableName],
+    [tableName],
   )
 
   return (

frontend/packages/erd-core/src/schemas/queryParam/schemas.ts

@@ -1,3 +1,3 @@
 import { picklist } from 'valibot'
 
-export const queryParamSchema = picklist(['active'])
+export const queryParamSchema = picklist(['active', 'hidden'])

frontend/packages/erd-core/src/stores/userEditing/actions.ts

@@ -8,3 +8,22 @@ export const updateActiveTableName = (tableName: string | undefined) => {
 export const updateShowMode = (showMode: ShowMode) => {
   userEditingStore.showMode = showMode
 }
+
+export const toggleHiddenNodeId = (nodeId: string) => {
+  if (userEditingStore.hiddenNodeIds.has(nodeId)) {
+    userEditingStore.hiddenNodeIds.delete(nodeId)
+  } else {
+    userEditingStore.hiddenNodeIds.add(nodeId)
+  }
+}
+
+export const addHiddenNodeIds = (nodeIds: string[]) => {
+  for (const id of nodeIds) {
+    userEditingStore.hiddenNodeIds.add(id)
+  }
+}
+
+export const replaceHiddenNodeIds = (nodeIds: string[]) => {
+  userEditingStore.hiddenNodeIds.clear()
+  addHiddenNodeIds(nodeIds)
+}

frontend/packages/erd-core/src/stores/userEditing/store.ts

@@ -1,19 +1,22 @@
 import type { QueryParam } from '@/schemas/queryParam'
 import type { ShowMode } from '@/schemas/showMode'
 import { proxy, subscribe } from 'valtio'
+import { proxySet } from 'valtio/utils'
 
 type UserEditingStore = {
   active: {
     tableName: string | undefined
   }
   showMode: ShowMode
+  hiddenNodeIds: Set<string>
 }
 
 export const userEditingStore = proxy<UserEditingStore>({
   active: {
     tableName: undefined,
   },
   showMode: 'TABLE_NAME',
+  hiddenNodeIds: proxySet<string>(),
 })
 
 subscribe(userEditingStore.active, () => {
@@ -29,3 +32,16 @@ subscribe(userEditingStore.active, () => {
 
   window.history.pushState({}, '', url)
 })
+
+subscribe(userEditingStore.hiddenNodeIds, () => {
+  const url = new URL(window.location.href)
+  const activeQueryParam: QueryParam = 'hidden'
+  const hiddenNodeIds = Array.from(userEditingStore.hiddenNodeIds).join(',')
+
+  url.searchParams.delete(activeQueryParam)
+  if (hiddenNodeIds) {
+    url.searchParams.set(activeQueryParam, hiddenNodeIds)
+  }
+
+  window.history.pushState({}, '', url)
+})