From e53949a727559cd060626d5bcf832d08e63d0b1f Mon Sep 17 00:00:00 2001 From: MH4GF Date: Thu, 19 Dec 2024 12:19:16 +0900 Subject: [PATCH 1/3] feat: enhance highlightNodesAndEdges tests for nodes and edges highlighting logic --- .../ERDContent/highlightNodesAndEdges.test.ts | 142 ++++++++++++------ .../ERDContent/highlightNodesAndEdges.ts | 29 +++- 2 files changed, 126 insertions(+), 45 deletions(-) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts index b61a476b..518c8173 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts +++ b/frontend/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 index cc56e2ac..cef0ea4b 100644 --- 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 } } From 1f775390556406f22d7f2104e23cf773fb9bde02 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Thu, 19 Dec 2024 12:19:44 +0900 Subject: [PATCH 2/3] refactor: simplify edge highlighting logic in ERDContent component --- .../ERDRenderer/ERDContent/ERDContent.tsx | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx index f14f073e..929952a8 100644 --- 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 = ({ 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 = ({ setActiveNodeId(null) updateActiveTableName(undefined) - const updatedEdges = edges.map(unhighlightEdge) - - const { nodes: updatedNodes } = highlightNodesAndEdges( + const { nodes: updatedNodes, edges: updatedEdges } = highlightNodesAndEdges( nodes, edges, undefined, From b372a0fdb97019023b8b4bb2526eb095372ce44c Mon Sep 17 00:00:00 2001 From: MH4GF Date: Thu, 19 Dec 2024 12:27:24 +0900 Subject: [PATCH 3/3] maintenance: add changeset --- frontend/.changeset/mighty-shoes-confess.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 frontend/.changeset/mighty-shoes-confess.md diff --git a/frontend/.changeset/mighty-shoes-confess.md b/frontend/.changeset/mighty-shoes-confess.md new file mode 100644 index 00000000..c313078a --- /dev/null +++ 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