fix: Fixed problem with TableNode not being highlighted when opened f…

…rom URL with query parameter

frontend/.changeset/slimy-toys-yell.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+🐛 Fixed problem with TableNode not being highlighted when opened from URL with query parameter

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

@@ -7,16 +7,16 @@ import { type FC, useCallback } from 'react'
 import { useAutoLayout } from '../../useAutoLayout'
 
 export const TidyUpButton: FC = () => {
-  const { getNodes } = useReactFlow()
+  const { getNodes, getEdges } = useReactFlow()
   const { handleLayout } = useAutoLayout()
   const { showMode } = useUserEditingStore()
   const handleClick = useCallback(() => {
     toolbarActionLogEvent({
       element: 'tidyUp',
       showMode,
     })
-    handleLayout(getNodes())
-  }, [handleLayout, showMode, getNodes])
+    handleLayout(getNodes(), getEdges())
+  }, [handleLayout, showMode, getNodes, getEdges])
 
   return (
     <ToolbarButton asChild>

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

@@ -1,20 +1,22 @@
 import { useReactFlow } from '@xyflow/react'
-import type { FitViewOptions, Node } from '@xyflow/react'
+import type { Edge, FitViewOptions, Node } from '@xyflow/react'
 import { useCallback } from 'react'
 import { useERDContentContext } from '../ERDContentContext'
 import { getElkLayout } from './getElkLayout'
 
 export const useAutoLayout = () => {
-  const { setNodes, getEdges, fitView } = useReactFlow()
+  const { setNodes, fitView } = useReactFlow()
   const {
     actions: { setLoading, setInitializeComplete },
   } = useERDContentContext()
 
   const handleLayout = useCallback(
-    async (nodes: Node[], fitViewOptions: FitViewOptions = {}) => {
+    async (
+      nodes: Node[],
+      edges: Edge[],
+      fitViewOptions: FitViewOptions = {},
+    ) => {
       setLoading(true)
-      const edges = getEdges()
-
       const hiddenNodes: Node[] = []
       const visibleNodes: Node[] = []
       for (const node of nodes) {
@@ -43,7 +45,7 @@ export const useAutoLayout = () => {
         setInitializeComplete(true)
       }, 0)
     },
-    [setNodes, getEdges, fitView, setLoading, setInitializeComplete],
+    [setNodes, fitView, setLoading, setInitializeComplete],
   )
 
   return { handleLayout }

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

@@ -4,6 +4,7 @@ import { decompressFromEncodedURIComponent } from '@/utils'
 import { useNodesInitialized, useReactFlow } from '@xyflow/react'
 import { useEffect } from 'react'
 import { useERDContentContext } from './ERDContentContext'
+import { highlightNodesAndEdges } from './highlightNodesAndEdges'
 import { useAutoLayout } from './useAutoLayout'
 
 const getActiveTableNameFromUrl = (): string | undefined => {
@@ -27,7 +28,7 @@ const getHiddenNodeIdsFromUrl = async (): Promise<string[]> => {
 
 export const useInitialAutoLayout = () => {
   const nodesInitialized = useNodesInitialized()
-  const { getNodes } = useReactFlow()
+  const { getNodes, getEdges } = useReactFlow()
   const {
     state: { initializeComplete },
   } = useERDContentContext()
@@ -39,25 +40,28 @@ export const useInitialAutoLayout = () => {
         return
       }
 
-      const tableNameFromUrl = getActiveTableNameFromUrl()
-      updateActiveTableName(tableNameFromUrl)
+      const activeTableName = getActiveTableNameFromUrl()
+      updateActiveTableName(activeTableName)
       const hiddenNodeIds = await getHiddenNodeIdsFromUrl()
       addHiddenNodeIds(hiddenNodeIds)
       const nodes = getNodes()
-      const appliedNodes = nodes.map((node) => ({
+      const edges = getEdges()
+      const hiddenNodes = nodes.map((node) => ({
         ...node,
         hidden: hiddenNodeIds.includes(node.id),
       }))
+      const { nodes: updatedNodes, edges: updatedEdges } =
+        highlightNodesAndEdges(hiddenNodes, edges, { activeTableName })
 
-      const fitViewOptions = tableNameFromUrl
-        ? { maxZoom: 1, duration: 300, nodes: [{ id: tableNameFromUrl }] }
+      const fitViewOptions = activeTableName
+        ? { maxZoom: 1, duration: 300, nodes: [{ id: activeTableName }] }
         : undefined
 
       if (nodesInitialized) {
-        handleLayout(appliedNodes, fitViewOptions)
+        handleLayout(updatedNodes, updatedEdges, fitViewOptions)
       }
     }
 
     initialize()
-  }, [nodesInitialized, initializeComplete, getNodes, handleLayout])
+  }, [nodesInitialized, initializeComplete, getNodes, getEdges, handleLayout])
 }