Merge pull request #338 from liam-hq/fix_cardinality_highlight_bug

🐛: Highlight source cardinality with multi-foreign keys
liam-hq · Dec 20, 2024 · ff3b794 · ff3b794
2 parents a12cf99 + c2ffe8d
commit ff3b794
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/frontend/.changeset/brave-guests-explode.md b/frontend/.changeset/brave-guests-explode.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+🐛 bug-fix: Highlight source cardinality with multi-foreign keys
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
@@ -1,6 +1,7 @@
 import { aTable } from '@liam-hq/db-structure'
 import type { Edge } from '@xyflow/react'
 import { describe, expect, it } from 'vitest'
+import { zIndex } from '../constants'
 import type { Data, TableNodeType } from './TableNode'
 import { highlightNodesAndEdges } from './highlightNodesAndEdges'
 
@@ -36,6 +37,7 @@ const anEdge = (
   target,
   targetHandle,
   animated: false,
+  zIndex: zIndex.edgeDefault,
   data: { isHighlighted: false, ...override?.data },
   ...override,
 })
@@ -180,10 +182,12 @@ describe(highlightNodesAndEdges, () => {
       expect(updatedEdges).toEqual([
         anEdge('users', 'posts', 'users-id', 'posts-user_id', {
           animated: true,
+          zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
           animated: true,
+          zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge(
@@ -201,14 +205,14 @@ describe(highlightNodesAndEdges, () => {
       })
 
       expect(updatedEdges).toEqual([
-        anEdge('users', 'posts', 'users-id', 'posts-user_id', {
-          animated: false,
-          data: { isHighlighted: false },
-        }),
-        anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
-          animated: false,
-          data: { isHighlighted: false },
-        }),
+        anEdge('users', 'posts', 'users-id', 'posts-user_id', {}),
+        anEdge(
+          'users',
+          'comment_users',
+          'users-id',
+          'comment_users-user_id',
+          {},
+        ),
         anEdge(
           'comments',
           'comment_users',
@@ -225,10 +229,12 @@ describe(highlightNodesAndEdges, () => {
       expect(updatedEdges).toEqual([
         anEdge('users', 'posts', 'users-id', 'posts-user_id', {
           animated: true,
+          zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
           animated: true,
+          zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge(
@@ -248,10 +254,12 @@ describe(highlightNodesAndEdges, () => {
       expect(updatedEdges).toEqual([
         anEdge('users', 'posts', 'users-id', 'posts-user_id', {
           animated: true,
+          zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
           animated: true,
+          zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge(
@@ -261,6 +269,7 @@ describe(highlightNodesAndEdges, () => {
           'comment_users-comment_id',
           {
             animated: true,
+            zIndex: zIndex.edgeHighlighted,
             data: { isHighlighted: true },
           },
         ),

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,4 +1,5 @@
 import type { Edge, Node } from '@xyflow/react'
+import { zIndex } from '../constants'
 import { type TableNodeType, isTableNode } from './TableNode'
 
 type TargetTableName = string
@@ -66,12 +67,14 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({
 const highlightEdge = (edge: Edge): Edge => ({
   ...edge,
   animated: true,
+  zIndex: zIndex.edgeHighlighted,
   data: { ...edge.data, isHighlighted: true },
 })
 
 const unhighlightEdge = (edge: Edge): Edge => ({
   ...edge,
   animated: false,
+  zIndex: zIndex.edgeDefault,
   data: { ...edge.data, isHighlighted: false },
 })
 

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/constants.ts b/frontend/packages/erd-core/src/components/ERDRenderer/constants.ts
@@ -0,0 +1,5 @@
+export const zIndex = {
+  nodeDefault: 2,
+  edgeHighlighted: 1,
+  edgeDefault: 0,
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts b/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts
@@ -2,6 +2,7 @@ import type { ShowMode } from '@/schemas/showMode'
 import type { Cardinality, DBStructure } from '@liam-hq/db-structure'
 import type { Edge, Node } from '@xyflow/react'
 import { columnHandleId } from './columnHandleId'
+import { zIndex } from './constants'
 
 type Params = {
   dbStructure: DBStructure
@@ -43,7 +44,7 @@ export const convertDBStructureToNodes = ({
         targetColumnCardinalities: tableColumnCardinalities.get(table.name),
       },
       position: { x: 0, y: 0 },
-      zIndex: 1,
+      zIndex: zIndex.nodeDefault,
     }
   })