Merge pull request #321 from liam-hq/fix-highlight-handling

fix: Fixed failure to highlight parent table
liam-hq · Dec 19, 2024 · adfe11a · adfe11a
2 parents 5bdbfca + aecbcc5
commit adfe11a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/frontend/.changeset/young-moles-exercise.md b/frontend/.changeset/young-moles-exercise.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+fix: Fixed failure to highlight parent tables
diff --git a/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts b/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
@@ -61,7 +61,7 @@ describe(highlightNodesAndEdges, () => {
   ]
 
   describe('nodes', () => {
-    it('When the users is active, the users and related tables are highlighted', () => {
+    it('When the users is active, the users and related foreign tables are highlighted', () => {
       const { nodes: updatedNodes } = highlightNodesAndEdges(nodes, edges, {
         activeTableName: 'users',
       })
@@ -85,7 +85,25 @@ describe(highlightNodesAndEdges, () => {
         }),
       ])
     })
+    it('When the posts is active, the posts and related primary table are highlighted', () => {
+      const { nodes: updatedNodes } = highlightNodesAndEdges(nodes, edges, {
+        activeTableName: 'posts',
+      })
 
+      expect(updatedNodes).toEqual([
+        aTableNode('users', {
+          data: aTableData('users', {
+            isHighlighted: true,
+            highlightedHandles: ['users-id'],
+          }),
+        }),
+        aTableNode('posts', {
+          data: aTableData('posts', { isActiveHighlighted: true }),
+        }),
+        aTableNode('comments'),
+        aTableNode('comment_users'),
+      ])
+    })
     it('When no active table, no tables are highlighted', () => {
       const { nodes: updatedNodes } = highlightNodesAndEdges(nodes, edges, {
         activeTableName: undefined,

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
@@ -1,9 +1,9 @@
 import type { Edge, Node } from '@xyflow/react'
 import { type TableNodeType, isTableNode } from './TableNode'
 
-type SourceTableName = string
 type TargetTableName = string
-type EdgeMap = Map<SourceTableName, TargetTableName[]>
+type RelatedTableName = string
+type EdgeMap = Map<TargetTableName, Set<RelatedTableName>>
 
 const isActiveNode = (
   activeTableName: string | undefined,
@@ -21,7 +21,7 @@ const isRelatedNodeToTarget = (
     return false
   }
 
-  return edgeMap.get(targetTableName)?.includes(node.data.table.name) ?? false
+  return edgeMap.get(targetTableName)?.has(node.data.table.name) ?? false
 }
 
 const isHoveredNode = (
@@ -127,9 +127,13 @@ export const highlightNodesAndEdges = (
     const sourceTableName = edge.source
     const targetTableName = edge.target
     if (!edgeMap.has(sourceTableName)) {
-      edgeMap.set(sourceTableName, [])
+      edgeMap.set(sourceTableName, new Set())
     }
-    edgeMap.get(sourceTableName)?.push(targetTableName)
+    if (!edgeMap.has(targetTableName)) {
+      edgeMap.set(targetTableName, new Set())
+    }
+    edgeMap.get(sourceTableName)?.add(targetTableName)
+    edgeMap.get(targetTableName)?.add(sourceTableName)
   }
 
   const updatedNodes = nodes.map((node) => {