From 298c7cc53c9775496a9ed9a15165d9a4cc4312b4 Mon Sep 17 00:00:00 2001 From: FunamaYukina Date: Wed, 18 Dec 2024 18:07:38 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8Implementing=20a=20key-only=20view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.changeset/clever-crabs-check.md | 6 ++ .../TableColumnList/TableColumnList.tsx | 66 +++++++++++++------ .../ERDContent/TableNode/TableNode.tsx | 11 +++- 3 files changed, 62 insertions(+), 21 deletions(-) create mode 100644 frontend/.changeset/clever-crabs-check.md diff --git a/frontend/.changeset/clever-crabs-check.md b/frontend/.changeset/clever-crabs-check.md new file mode 100644 index 00000000..4cd5a6bb --- /dev/null +++ b/frontend/.changeset/clever-crabs-check.md @@ -0,0 +1,6 @@ +--- +"@liam-hq/erd-core": patch +"@liam-hq/cli": patch +--- + +✨Implementing a key-only view diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx index e155efb4..3c7c6b68 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx @@ -1,3 +1,4 @@ +import type { Relationships } from '@liam-hq/db-structure' import type { FC } from 'react' import { columnHandleId } from '../../../columnHandleId' import type { Data } from '../type' @@ -5,26 +6,51 @@ import { TableColumn } from './TableColumn' type TableColumnListProps = { data: Data + filter?: 'KEY_ONLY' + relationships: Relationships } -export const TableColumnList: FC = ({ data }) => ( - -) + const primaryColumns = Object.values(data.table.columns).filter((column) => { + return column.primary + }) + + const columns = + filter === 'KEY_ONLY' + ? primaryColumns.concat(foreignKeyColumns) + : Object.values(data.table.columns) + + return ( + + ) +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx index d270a9b3..28ce8079 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -36,7 +36,16 @@ export const TableNode: FC = ({ data }) => { data-erd="table-node" > - {showMode === 'ALL_FIELDS' && } + {showMode === 'ALL_FIELDS' && ( + + )} + {showMode === 'KEY_ONLY' && ( + + )} ) } From c0934d3007ea0771dbb2ed06bd43858d582b979d Mon Sep 17 00:00:00 2001 From: FunamaYukina Date: Thu, 19 Dec 2024 12:28:28 +0900 Subject: [PATCH 2/3] Add LinkIcon and apply it as an icon for foreign keys. --- frontend/.changeset/fifty-mice-argue.md | 7 +++ .../TableColumn/TableColumn.module.css | 4 ++ .../TableColumn/TableColumn.tsx | 46 +++++++++++-------- frontend/packages/ui/src/icons/LinkIcon.tsx | 26 +++++++++++ frontend/packages/ui/src/icons/index.ts | 1 + 5 files changed, 65 insertions(+), 19 deletions(-) create mode 100644 frontend/.changeset/fifty-mice-argue.md create mode 100644 frontend/packages/ui/src/icons/LinkIcon.tsx diff --git a/frontend/.changeset/fifty-mice-argue.md b/frontend/.changeset/fifty-mice-argue.md new file mode 100644 index 00000000..02daf7af --- /dev/null +++ b/frontend/.changeset/fifty-mice-argue.md @@ -0,0 +1,7 @@ +--- +"@liam-hq/erd-core": patch +"@liam-hq/ui": patch +"@liam-hq/cli": patch +--- + +✨ Add LinkIcon🔗 and apply it as an icon for foreign keys. diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.module.css index 7fb2309e..76c6b28b 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.module.css @@ -21,6 +21,10 @@ color: var(--primary-accent); } +.linkIcon { + color: var(--primary-accent); +} + .diamondIcon { color: var(--overlay-70); } diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx index 9a3f0432..b2a2074d 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx @@ -2,7 +2,7 @@ import type { Cardinality as CardinalityType, Column, } from '@liam-hq/db-structure' -import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui' +import { DiamondFillIcon, DiamondIcon, KeyRound, LinkIcon } from '@liam-hq/ui' import { Handle, Position } from '@xyflow/react' import clsx from 'clsx' import type { FC } from 'react' @@ -35,26 +35,34 @@ export const TableColumn: FC = ({ className={styles.primaryKeyIcon} role="img" aria-label="Primary Key" + strokeWidth={1.5} /> )} - {!column.primary && - (column.notNull ? ( - - ) : ( - - ))} + {!column.primary && (isSource || targetCardinality) ? ( + + ) : !column.primary && column.notNull ? ( + + ) : !column.primary ? ( + + ) : null} {column.name} diff --git a/frontend/packages/ui/src/icons/LinkIcon.tsx b/frontend/packages/ui/src/icons/LinkIcon.tsx new file mode 100644 index 00000000..db457a5d --- /dev/null +++ b/frontend/packages/ui/src/icons/LinkIcon.tsx @@ -0,0 +1,26 @@ +import type { ComponentPropsWithoutRef, FC } from 'react' + +type Props = ComponentPropsWithoutRef<'svg'> + +export const LinkIcon: FC = (props) => { + return ( + + + + + ) +} diff --git a/frontend/packages/ui/src/icons/index.ts b/frontend/packages/ui/src/icons/index.ts index 977b556c..e8431cda 100644 --- a/frontend/packages/ui/src/icons/index.ts +++ b/frontend/packages/ui/src/icons/index.ts @@ -9,6 +9,7 @@ export * from './DiamondFillIcon' export * from './Download' export * from './Fingerprint' export * from './GotoIcon' +export * from './LinkIcon' export * from './Megaphone' export * from './MessagesSquare' export * from './Minus' From ab664607ecfd10e62423905a0b47b19d13cf14c9 Mon Sep 17 00:00:00 2001 From: FunamaYukina Date: Thu, 19 Dec 2024 15:10:26 +0900 Subject: [PATCH 3/3] Refactor TableColumnList to simplify column filtering and remove relationships prop --- .../TableColumnList/TableColumnList.tsx | 44 +++++++++---------- .../ERDContent/TableNode/TableNode.tsx | 10 +---- 2 files changed, 22 insertions(+), 32 deletions(-) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx index 3c7c6b68..a2fa9640 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx @@ -1,4 +1,4 @@ -import type { Relationships } from '@liam-hq/db-structure' +import type { Column } from '@liam-hq/db-structure' import type { FC } from 'react' import { columnHandleId } from '../../../columnHandleId' import type { Data } from '../type' @@ -7,34 +7,30 @@ import { TableColumn } from './TableColumn' type TableColumnListProps = { data: Data filter?: 'KEY_ONLY' - relationships: Relationships } -export const TableColumnList: FC = ({ - data, - filter, - relationships, -}) => { - const foreignKeyColumns = Object.values(data.table.columns).filter((column) => - Object.values(relationships).some( - (rel) => - rel.foreignTableName === data.table.name && - rel.foreignColumnName === column.name, - ), - ) - - const primaryColumns = Object.values(data.table.columns).filter((column) => { - return column.primary - }) - - const columns = - filter === 'KEY_ONLY' - ? primaryColumns.concat(foreignKeyColumns) - : Object.values(data.table.columns) +const shouldDisplayColumn = ( + column: Column, + filter: 'KEY_ONLY' | undefined, + targetColumnCardinalities: Data['targetColumnCardinalities'], +): boolean => { + if (filter === 'KEY_ONLY') { + return ( + column.primary || targetColumnCardinalities?.[column.name] !== undefined + ) + } + return true +} +export const TableColumnList: FC = ({ data, filter }) => { return (
    - {columns.map((column) => { + {Object.values(data.table.columns).map((column) => { + if ( + !shouldDisplayColumn(column, filter, data.targetColumnCardinalities) + ) { + return null + } const handleId = columnHandleId(data.table.name, column.name) const isHighlighted = data.isHighlighted || data.highlightedHandles?.includes(handleId) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx index e952b145..ebc23306 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -36,15 +36,9 @@ export const TableNode: FC = ({ data }) => { data-erd="table-node" > - {showMode === 'ALL_FIELDS' && ( - - )} + {showMode === 'ALL_FIELDS' && } {showMode === 'KEY_ONLY' && ( - + )} )