Merge pull request #344 from liam-hq/fix-first-load-highlighting

fix: Fixed problem with TableNode not being highlighted when opened from 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

@@ -8,7 +8,7 @@ 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 { cliVersion } = useCliVersion()
@@ -19,8 +19,15 @@ export const TidyUpButton: FC = () => {
       cliVer: cliVersion.version,
       appEnv: cliVersion.envName,
     })
-    handleLayout(getNodes())
-  }, [handleLayout, showMode, getNodes, cliVersion.version, cliVersion.envName])
+    handleLayout(getNodes(), getEdges())
+  }, [
+    handleLayout,
+    showMode,
+    getNodes,
+    getEdges,
+    cliVersion.version,
+    cliVersion.envName,
+  ])
 
   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

@@ -1,9 +1,10 @@
 import type { QueryParam } from '@/schemas/queryParam'
 import { addHiddenNodeIds, updateActiveTableName } from '@/stores'
 import { decompressFromEncodedURIComponent } from '@/utils'
-import type { Node } from '@xyflow/react'
+import { type Node, useReactFlow } from '@xyflow/react'
 import { useEffect, useMemo } from 'react'
 import { useERDContentContext } from './ERDContentContext'
+import { highlightNodesAndEdges } from './highlightNodesAndEdges'
 import { useAutoLayout } from './useAutoLayout'
 
 const getActiveTableNameFromUrl = (): string | undefined => {
@@ -33,6 +34,7 @@ export const useInitialAutoLayout = (nodes: Node[]) => {
         .some((node) => node.measured),
     [nodes],
   )
+  const { getEdges } = useReactFlow()
 
   const {
     state: { initializeComplete },
@@ -45,24 +47,27 @@ export const useInitialAutoLayout = (nodes: Node[]) => {
         return
       }
 
-      const tableNameFromUrl = getActiveTableNameFromUrl()
-      updateActiveTableName(tableNameFromUrl)
+      const activeTableName = getActiveTableNameFromUrl()
+      updateActiveTableName(activeTableName)
       const hiddenNodeIds = await getHiddenNodeIdsFromUrl()
       addHiddenNodeIds(hiddenNodeIds)
-      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 (tableNodesInitialized) {
-        handleLayout(appliedNodes, fitViewOptions)
+        handleLayout(updatedNodes, updatedEdges, fitViewOptions)
       }
     }
 
     initialize()
-  }, [tableNodesInitialized, initializeComplete, handleLayout, nodes])
+  }, [tableNodesInitialized, initializeComplete, handleLayout, nodes, getEdges])
 }