From e2d2c0649b0971cf6681fe20d8e77c23ac89d5fd Mon Sep 17 00:00:00 2001 From: "ryota.sasazawa" Date: Fri, 20 Dec 2024 12:32:57 +0900 Subject: [PATCH 1/4] bug-fix: Highlight source cardinality with multi-foreign keys --- frontend/.changeset/brave-guests-explode.md | 6 ++++++ .../ERDRenderer/ERDContent/highlightNodesAndEdges.ts | 2 ++ .../src/components/ERDRenderer/convertDBStructureToNodes.ts | 2 +- 3 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 frontend/.changeset/brave-guests-explode.md diff --git a/frontend/.changeset/brave-guests-explode.md b/frontend/.changeset/brave-guests-explode.md new file mode 100644 index 00000000..f73663f7 --- /dev/null +++ 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/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts index df24fc67..4f2d180e 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts @@ -66,12 +66,14 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({ const highlightEdge = (edge: Edge): Edge => ({ ...edge, animated: true, + zIndex: 1, data: { ...edge.data, isHighlighted: true }, }) const unhighlightEdge = (edge: Edge): Edge => ({ ...edge, animated: false, + zIndex: 0, data: { ...edge.data, isHighlighted: false }, }) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts b/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts index 680754cc..b4ea5646 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts @@ -43,7 +43,7 @@ export const convertDBStructureToNodes = ({ targetColumnCardinalities: tableColumnCardinalities.get(table.name), }, position: { x: 0, y: 0 }, - zIndex: 1, + zIndex: 2, } }) From 5a9e6d31463e54c38ca4b5163b4b245697f92b63 Mon Sep 17 00:00:00 2001 From: "ryota.sasazawa" Date: Fri, 20 Dec 2024 12:45:54 +0900 Subject: [PATCH 2/4] test: add zIndex for Edge --- .../ERDContent/highlightNodesAndEdges.test.ts | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 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 77ca89fb..07bdeff6 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 @@ -36,6 +36,7 @@ const anEdge = ( target, targetHandle, animated: false, + zIndex: 0, data: { isHighlighted: false, ...override?.data }, ...override, }) @@ -180,10 +181,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }), anEdge( @@ -201,14 +204,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 +228,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }), anEdge( @@ -248,10 +253,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }), anEdge( @@ -261,6 +268,7 @@ describe(highlightNodesAndEdges, () => { 'comment_users-comment_id', { animated: true, + zIndex: 1, data: { isHighlighted: true }, }, ), From 1f10080cb927c839851717f0600f75d6b8e94ac7 Mon Sep 17 00:00:00 2001 From: "ryota.sasazawa" Date: Fri, 20 Dec 2024 15:39:13 +0900 Subject: [PATCH 3/4] fix: Use constants to define z-index --- .../ERDContent/highlightNodesAndEdges.test.ts | 17 +++++++++-------- .../ERDContent/highlightNodesAndEdges.ts | 5 +++-- .../src/components/ERDRenderer/constants.ts | 5 +++++ .../ERDRenderer/convertDBStructureToNodes.ts | 3 ++- 4 files changed, 19 insertions(+), 11 deletions(-) create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/constants.ts 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 07bdeff6..2f61568a 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 @@ -1,6 +1,7 @@ import { aTable } from '@liam-hq/db-structure' import type { Edge } from '@xyflow/react' import { describe, expect, it } from 'vitest' +import { Z_INDEX } from '../constants' import type { Data, TableNodeType } from './TableNode' import { highlightNodesAndEdges } from './highlightNodesAndEdges' @@ -36,7 +37,7 @@ const anEdge = ( target, targetHandle, animated: false, - zIndex: 0, + zIndex: Z_INDEX.EDGE_DEFAULT, data: { isHighlighted: false, ...override?.data }, ...override, }) @@ -181,12 +182,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { isHighlighted: true }, }), anEdge( @@ -228,12 +229,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { isHighlighted: true }, }), anEdge( @@ -253,12 +254,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { isHighlighted: true }, }), anEdge( @@ -268,7 +269,7 @@ describe(highlightNodesAndEdges, () => { 'comment_users-comment_id', { animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, 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 index 4f2d180e..e691a4a5 100644 --- 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 { Z_INDEX } from '../constants' import { type TableNodeType, isTableNode } from './TableNode' type TargetTableName = string @@ -66,14 +67,14 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({ const highlightEdge = (edge: Edge): Edge => ({ ...edge, animated: true, - zIndex: 1, + zIndex: Z_INDEX.EDGE_HIGHLIGHTED, data: { ...edge.data, isHighlighted: true }, }) const unhighlightEdge = (edge: Edge): Edge => ({ ...edge, animated: false, - zIndex: 0, + zIndex: Z_INDEX.EDGE_DEFAULT, 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 new file mode 100644 index 00000000..73251129 --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/constants.ts @@ -0,0 +1,5 @@ +export const Z_INDEX = { + NODE_DEFAULT: 2, + EDGE_HIGHLIGHTED: 1, + EDGE_DEFAULT: 0, +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts b/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts index b4ea5646..8bc71b70 100644 --- 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 { Z_INDEX } from './constants' type Params = { dbStructure: DBStructure @@ -43,7 +44,7 @@ export const convertDBStructureToNodes = ({ targetColumnCardinalities: tableColumnCardinalities.get(table.name), }, position: { x: 0, y: 0 }, - zIndex: 2, + zIndex: Z_INDEX.NODE_DEFAULT, } }) From c2ffe8dd87d6be3e67e3cdf33bd7fd5ab5ccc096 Mon Sep 17 00:00:00 2001 From: "ryota.sasazawa" Date: Fri, 20 Dec 2024 16:21:37 +0900 Subject: [PATCH 4/4] refactor: Replace constants with zIndex module --- .../ERDContent/highlightNodesAndEdges.test.ts | 18 +++++++++--------- .../ERDContent/highlightNodesAndEdges.ts | 6 +++--- .../src/components/ERDRenderer/constants.ts | 8 ++++---- .../ERDRenderer/convertDBStructureToNodes.ts | 4 ++-- 4 files changed, 18 insertions(+), 18 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 2f61568a..56f2283d 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 @@ -1,7 +1,7 @@ import { aTable } from '@liam-hq/db-structure' import type { Edge } from '@xyflow/react' import { describe, expect, it } from 'vitest' -import { Z_INDEX } from '../constants' +import { zIndex } from '../constants' import type { Data, TableNodeType } from './TableNode' import { highlightNodesAndEdges } from './highlightNodesAndEdges' @@ -37,7 +37,7 @@ const anEdge = ( target, targetHandle, animated: false, - zIndex: Z_INDEX.EDGE_DEFAULT, + zIndex: zIndex.edgeDefault, data: { isHighlighted: false, ...override?.data }, ...override, }) @@ -182,12 +182,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { isHighlighted: true }, }), anEdge( @@ -229,12 +229,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { isHighlighted: true }, }), anEdge( @@ -254,12 +254,12 @@ describe(highlightNodesAndEdges, () => { expect(updatedEdges).toEqual([ anEdge('users', 'posts', 'users-id', 'posts-user_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { isHighlighted: true }, }), anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { isHighlighted: true }, }), anEdge( @@ -269,7 +269,7 @@ describe(highlightNodesAndEdges, () => { 'comment_users-comment_id', { animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + 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 index e691a4a5..4ef36d53 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts @@ -1,5 +1,5 @@ import type { Edge, Node } from '@xyflow/react' -import { Z_INDEX } from '../constants' +import { zIndex } from '../constants' import { type TableNodeType, isTableNode } from './TableNode' type TargetTableName = string @@ -67,14 +67,14 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({ const highlightEdge = (edge: Edge): Edge => ({ ...edge, animated: true, - zIndex: Z_INDEX.EDGE_HIGHLIGHTED, + zIndex: zIndex.edgeHighlighted, data: { ...edge.data, isHighlighted: true }, }) const unhighlightEdge = (edge: Edge): Edge => ({ ...edge, animated: false, - zIndex: Z_INDEX.EDGE_DEFAULT, + 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 index 73251129..4eec6ff0 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/constants.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/constants.ts @@ -1,5 +1,5 @@ -export const Z_INDEX = { - NODE_DEFAULT: 2, - EDGE_HIGHLIGHTED: 1, - EDGE_DEFAULT: 0, +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 index 8bc71b70..8543ee43 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts @@ -2,7 +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 { Z_INDEX } from './constants' +import { zIndex } from './constants' type Params = { dbStructure: DBStructure @@ -44,7 +44,7 @@ export const convertDBStructureToNodes = ({ targetColumnCardinalities: tableColumnCardinalities.get(table.name), }, position: { x: 0, y: 0 }, - zIndex: Z_INDEX.NODE_DEFAULT, + zIndex: zIndex.nodeDefault, } })