Merge pull request #312 from liam-hq/refactor-is-related-edges

refactor: Refactoring of highlight edges on active table
liam-hq · Dec 19, 2024 · 92f8f9b · 92f8f9b
2 parents 9dfa9ec + b372a0f
commit 92f8f9b
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 61 deletions.
diff --git a/frontend/.changeset/mighty-shoes-confess.md b/frontend/.changeset/mighty-shoes-confess.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+refactor: Refactoring of highlight edges on active table
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
@@ -108,19 +108,8 @@ export const ERDContentInner: FC<Props> = ({
       setActiveNodeId(nodeId)
       updateActiveTableName(nodeId)
 
-      const relatedEdges = edges.filter(
-        (e) => e.source === nodeId || e.target === nodeId,
-      )
-
-      const updatedEdges = edges.map((e) =>
-        relatedEdges.includes(e) ? highlightEdge(e) : unhighlightEdge(e),
-      )
-
-      const { nodes: updatedNodes } = highlightNodesAndEdges(
-        nodes,
-        edges,
-        nodeId,
-      )
+      const { nodes: updatedNodes, edges: updatedEdges } =
+        highlightNodesAndEdges(nodes, edges, nodeId)
 
       setEdges(updatedEdges)
       setNodes(updatedNodes)
@@ -132,9 +121,7 @@ export const ERDContentInner: FC<Props> = ({
     setActiveNodeId(null)
     updateActiveTableName(undefined)
 
-    const updatedEdges = edges.map(unhighlightEdge)
-
-    const { nodes: updatedNodes } = highlightNodesAndEdges(
+    const { nodes: updatedNodes, edges: updatedEdges } = highlightNodesAndEdges(
       nodes,
       edges,
       undefined,

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
@@ -60,57 +60,111 @@ describe(highlightNodesAndEdges, () => {
     ),
   ]
 
-  it('When the users is active, the users and related tables are highlighted', () => {
-    const { nodes: updatedNodes } = highlightNodesAndEdges(
-      nodes,
-      edges,
-      'users',
-    )
+  describe('nodes', () => {
+    it('When the users is active, the users and related tables are highlighted', () => {
+      const { nodes: updatedNodes } = highlightNodesAndEdges(
+        nodes,
+        edges,
+        'users',
+      )
 
-    expect(updatedNodes).toEqual([
-      aTableNode('users', {
-        data: aTableData('users', { isActiveHighlighted: true }),
-      }),
-      aTableNode('posts', {
-        data: aTableData('posts', {
-          isHighlighted: true,
-          highlightedHandles: ['posts-user_id'],
+      expect(updatedNodes).toEqual([
+        aTableNode('users', {
+          data: aTableData('users', { isActiveHighlighted: true }),
         }),
-      }),
-      aTableNode('comments'),
-      aTableNode('comment_users', {
-        data: aTableData('comment_users', {
-          isHighlighted: true,
-          highlightedHandles: ['comment_users-user_id'],
+        aTableNode('posts', {
+          data: aTableData('posts', {
+            isHighlighted: true,
+            highlightedHandles: ['posts-user_id'],
+          }),
         }),
-      }),
-    ])
+        aTableNode('comments'),
+        aTableNode('comment_users', {
+          data: aTableData('comment_users', {
+            isHighlighted: true,
+            highlightedHandles: ['comment_users-user_id'],
+          }),
+        }),
+      ])
+    })
+
+    it('When no active table, no tables are highlighted', () => {
+      const { nodes: updatedNodes } = highlightNodesAndEdges(
+        nodes,
+        edges,
+        undefined,
+      )
+
+      expect(updatedNodes).toEqual([
+        aTableNode('users', {
+          data: aTableData('users', { isActiveHighlighted: false }),
+        }),
+        aTableNode('posts', {
+          data: aTableData('posts', {
+            isHighlighted: false,
+            highlightedHandles: [],
+          }),
+        }),
+        aTableNode('comments'),
+        aTableNode('comment_users', {
+          data: aTableData('comment_users', {
+            isHighlighted: false,
+            highlightedHandles: [],
+          }),
+        }),
+      ])
+    })
   })
 
-  it('When no active table, no tables are highlighted', () => {
-    const { nodes: updatedNodes } = highlightNodesAndEdges(
-      nodes,
-      edges,
-      undefined,
-    )
+  describe('edges', () => {
+    it('When the users is active, the users and related edges are highlighted', () => {
+      const { edges: updatedEdges } = highlightNodesAndEdges(
+        nodes,
+        edges,
+        'users',
+      )
+
+      expect(updatedEdges).toEqual([
+        anEdge('users', 'posts', 'users-id', 'posts-user_id', {
+          animated: true,
+          data: { isHighlighted: true },
+        }),
+        anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
+          animated: true,
+          data: { isHighlighted: true },
+        }),
+        anEdge(
+          'comments',
+          'comment_users',
+          'comments-id',
+          'comment_users-comment_id',
+        ),
+      ])
+    })
+
+    it('When no active table, no edges are highlighted', () => {
+      const { edges: updatedEdges } = highlightNodesAndEdges(
+        nodes,
+        edges,
+        undefined,
+      )
 
-    expect(updatedNodes).toEqual([
-      aTableNode('users', {
-        data: aTableData('users', { isActiveHighlighted: false }),
-      }),
-      aTableNode('posts', {
-        data: aTableData('posts', {
-          isHighlighted: false,
-          highlightedHandles: [],
+      expect(updatedEdges).toEqual([
+        anEdge('users', 'posts', 'users-id', 'posts-user_id', {
+          animated: false,
+          data: { isHighlighted: false },
         }),
-      }),
-      aTableNode('comments'),
-      aTableNode('comment_users', {
-        data: aTableData('comment_users', {
-          isHighlighted: false,
-          highlightedHandles: [],
+        anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
+          animated: false,
+          data: { isHighlighted: false },
         }),
-      }),
-    ])
+        anEdge(
+          'comments',
+          'comment_users',
+          'comments-id',
+          'comment_users-comment_id',
+        ),
+      ])
+    })
   })
 })
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
@@ -24,6 +24,13 @@ const isActivelyRelatedNode = (
   return edgeMap.get(activeTableName)?.includes(node.data.table.name) ?? false
 }
 
+const isActivelyRelatedEdge = (
+  activeTableName: string | undefined,
+  edge: Edge,
+): boolean => {
+  return edge.source === activeTableName || edge.target === activeTableName
+}
+
 const getHighlightedHandlesForRelatedNode = (
   activeTableName: string | undefined,
   edges: Edge[],
@@ -87,6 +94,18 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({
   },
 })
 
+const highlightEdge = (edge: Edge): Edge => ({
+  ...edge,
+  animated: true,
+  data: { ...edge.data, isHighlighted: true },
+})
+
+const unhighlightEdge = (edge: Edge): Edge => ({
+  ...edge,
+  animated: false,
+  data: { ...edge.data, isHighlighted: false },
+})
+
 export const highlightNodesAndEdges = (
   nodes: Node[],
   edges: Edge[],
@@ -123,5 +142,13 @@ export const highlightNodesAndEdges = (
     return unhighlightNode(node)
   })
 
-  return { nodes: updatedNodes, edges: [] }
+  const updatedEdges = edges.map((edge) => {
+    if (isActivelyRelatedEdge(activeTableName, edge)) {
+      return highlightEdge(edge)
+    }
+
+    return unhighlightEdge(edge)
+  })
+
+  return { nodes: updatedNodes, edges: updatedEdges }
 }