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.test.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts index 77ca89fb..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,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 index df24fc67..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,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 new file mode 100644 index 00000000..4eec6ff0 --- /dev/null +++ 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 index 680754cc..8543ee43 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 { 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, } })