fix: Fixed an issue where the correct table was not focused when shar…

…ing URLs in TableDetail

frontend/.changeset/flat-bikes-develop.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+fix: Fixed an issue where the correct table was not focused when sharing URLs in TableDetail

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

@@ -1,5 +1,5 @@
 import { useReactFlow } from '@xyflow/react'
-import type { Node } from '@xyflow/react'
+import type { FitViewOptions, Node } from '@xyflow/react'
 import { useCallback } from 'react'
 import { useERDContentContext } from '../ERDContentContext'
 import { getElkLayout } from './getElkLayout'
@@ -10,29 +10,32 @@ export const useAutoLayout = () => {
     actions: { setLoading, setInitializeComplete },
   } = useERDContentContext()
 
-  const handleLayout = useCallback(async () => {
-    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 handleLayout = useCallback(
+    async (fitViewOptions?: FitViewOptions) => {
+      setLoading(true)
+      const nodes = getNodes()
+      const edges = getEdges()
+      const visibleNodes: Node[] = nodes.filter((node) => !node.hidden)
+      const hiddenNodes: Node[] = nodes.filter((node) => node.hidden)
 
-    // NOTE: Only include edges where both the source and target are in the nodes
-    const nodeMap = new Map(visibleNodes.map((node) => [node.id, node]))
-    const visibleEdges = edges.filter((edge) => {
-      return nodeMap.get(edge.source) && nodeMap.get(edge.target)
-    })
+      // NOTE: Only include edges where both the source and target are in the nodes
+      const nodeMap = new Map(visibleNodes.map((node) => [node.id, node]))
+      const visibleEdges = edges.filter((edge) => {
+        return nodeMap.get(edge.source) && nodeMap.get(edge.target)
+      })
 
-    const newNodes = await getElkLayout({
-      nodes: visibleNodes,
-      edges: visibleEdges,
-    })
+      const newNodes = await getElkLayout({
+        nodes: visibleNodes,
+        edges: visibleEdges,
+      })
 
-    setNodes([...hiddenNodes, ...newNodes])
-    setLoading(false)
-    setInitializeComplete(true)
-    setTimeout(() => fitView(), 0)
-  }, [getNodes, setNodes, getEdges, fitView, setLoading, setInitializeComplete])
+      setNodes([...hiddenNodes, ...newNodes])
+      setLoading(false)
+      setInitializeComplete(true)
+      setTimeout(() => fitView(fitViewOptions), 0)
+    },
+    [getNodes, setNodes, getEdges, fitView, setLoading, setInitializeComplete],
+  )
 
   return { handleLayout }
 }

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

@@ -1,8 +1,18 @@
+import type { QueryParam } from '@/schemas/queryParam'
+import { updateActiveTableName } from '@/stores'
 import { useNodesInitialized } from '@xyflow/react'
 import { useEffect } from 'react'
 import { useERDContentContext } from './ERDContentContext'
 import { useAutoLayout } from './useAutoLayout'
 
+const getActiveTableNameFromUrl = (): string | undefined => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const activeQueryParam: QueryParam = 'active'
+  const tableName = urlParams.get(activeQueryParam)
+
+  return tableName || undefined
+}
+
 export const useInitialAutoLayout = () => {
   const nodesInitialized = useNodesInitialized()
   const {
@@ -15,8 +25,14 @@ export const useInitialAutoLayout = () => {
       return
     }
 
+    const tableNameFromUrl = getActiveTableNameFromUrl()
+    updateActiveTableName(tableNameFromUrl)
+    const fitViewOptions = tableNameFromUrl
+      ? { maxZoom: 1, duration: 300, nodes: [{ id: tableNameFromUrl }] }
+      : undefined
+
     if (nodesInitialized) {
-      handleLayout()
+      handleLayout(fitViewOptions)
     }
   }, [nodesInitialized, initializeComplete, handleLayout])
 }