✨Implementing a key-only view

frontend/.changeset/clever-crabs-check.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+✨Implementing a key-only view

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.

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);
 }

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<TableColumnProps> = ({
           className={styles.primaryKeyIcon}
           role="img"
           aria-label="Primary Key"
+          strokeWidth={1.5}
         />
       )}
-      {!column.primary &&
-        (column.notNull ? (
-          <DiamondFillIcon
-            width={16}
-            height={16}
-            className={styles.diamondIcon}
-            role="img"
-            aria-label="Not Null"
-          />
-        ) : (
-          <DiamondIcon
-            width={16}
-            height={16}
-            className={styles.diamondIcon}
-            role="img"
-            aria-label="Nullable"
-          />
-        ))}
+      {!column.primary && (isSource || targetCardinality) ? (
+        <LinkIcon
+          width={16}
+          height={16}
+          className={styles.linkIcon}
+          role="img"
+          aria-label="Foreign Key"
+        />
+      ) : !column.primary && column.notNull ? (
+        <DiamondFillIcon
+          width={16}
+          height={16}
+          className={styles.diamondIcon}
+          role="img"
+          aria-label="Not Null"
+        />
+      ) : !column.primary ? (
+        <DiamondIcon
+          width={16}
+          height={16}
+          className={styles.diamondIcon}
+          role="img"
+          aria-label="Nullable"
+        />
+      ) : null}
 
       <span className={styles.columnNameWrapper}>
         <span className={styles.columnName}>{column.name}</span>

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx

@@ -1,30 +1,52 @@
+import type { Column } from '@liam-hq/db-structure'
 import type { FC } from 'react'
 import { columnHandleId } from '../../../columnHandleId'
 import type { Data } from '../type'
 import { TableColumn } from './TableColumn'
 
 type TableColumnListProps = {
   data: Data
+  filter?: 'KEY_ONLY'
 }
 
-export const TableColumnList: FC<TableColumnListProps> = ({ data }) => (
-  <ul>
-    {Object.values(data.table.columns).map((column) => {
-      const handleId = columnHandleId(data.table.name, column.name)
-      const isHighlighted =
-        data.isHighlighted || data.highlightedHandles?.includes(handleId)
-      const isSource = data.sourceColumnName === column.name
+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<TableColumnListProps> = ({ data, filter }) => {
+  return (
+    <ul>
+      {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)
+        const isSource = data.sourceColumnName === column.name
 
-      return (
-        <TableColumn
-          key={column.name}
-          column={column}
-          handleId={handleId}
-          isHighlighted={isHighlighted}
-          isSource={isSource}
-          targetCardinality={data.targetColumnCardinalities?.[column.name]}
-        />
-      )
-    })}
-  </ul>
-)
+        return (
+          <TableColumn
+            key={column.name}
+            column={column}
+            handleId={handleId}
+            isHighlighted={isHighlighted}
+            isSource={isSource}
+            targetCardinality={data.targetColumnCardinalities?.[column.name]}
+          />
+        )
+      })}
+    </ul>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx

@@ -37,6 +37,9 @@ export const TableNode: FC<Props> = ({ data }) => {
     >
       <TableHeader data={data} />
       {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}
+      {showMode === 'KEY_ONLY' && (
+        <TableColumnList data={data} filter="KEY_ONLY" />
+      )}
     </div>
   )
 }

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> = (props) => {
+  return (
+    <svg
+      role="img"
+      aria-label="Link"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M16.9936 1.31662C15.4859 1.30352 14.0335 1.88309 12.949 2.9305L11.2213 4.64809C10.9275 4.94013 10.9261 5.415 11.2182 5.70875C11.5102 6.00249 11.9851 6.00388 12.2788 5.71184L13.9948 4.00581C14.796 3.23393 15.8679 2.8069 16.9805 2.81657C18.0949 2.82625 19.1608 3.27322 19.9488 4.0612C20.7368 4.84919 21.1838 5.91514 21.1934 7.02948C21.2031 8.14173 20.7764 9.21336 20.0049 10.0144L17.0096 13.0097C16.5788 13.4407 16.0603 13.774 15.4893 13.987C14.9183 14.2 14.3081 14.2877 13.7003 14.2442C13.0924 14.2007 12.501 14.0269 11.9662 13.7347C11.4314 13.4425 10.9657 13.0387 10.6006 12.5507C10.3525 12.219 9.8825 12.1513 9.55081 12.3994C9.21912 12.6475 9.15137 13.1175 9.39947 13.4492C9.89334 14.1094 10.5234 14.6558 11.247 15.0511C11.9706 15.4464 12.7707 15.6815 13.5931 15.7404C14.4155 15.7993 15.241 15.6806 16.0135 15.3924C16.786 15.1043 17.4876 14.6533 18.0705 14.0702L21.0705 11.0704L21.0795 11.061C22.1269 9.97654 22.7065 8.52407 22.6934 7.01644C22.6803 5.50881 22.0756 4.06664 21.0095 3.00054C19.9434 1.93445 18.5012 1.32972 16.9936 1.31662Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.4069 8.25956C9.58447 8.20066 8.759 8.31932 7.98648 8.6075C7.214 8.89566 6.51243 9.34666 5.92953 9.92975L2.92955 12.9296L2.92049 12.9389C1.87308 14.0234 1.29351 15.4759 1.30661 16.9835C1.31971 18.4911 1.92444 19.9333 2.99053 20.9994C4.05663 22.0655 5.4988 22.6702 7.00643 22.6833C8.51406 22.6964 9.9666 22.1169 11.0511 21.0695L12.7703 19.3503C13.0632 19.0574 13.0632 18.5825 12.7703 18.2896C12.4774 17.9968 12.0025 17.9968 11.7096 18.2896L10.0044 19.9949C9.20334 20.7663 8.13172 21.193 7.01947 21.1834C5.90513 21.1737 4.83918 20.7267 4.05119 19.9387C3.26321 19.1508 2.81624 18.0848 2.80656 16.9705C2.79689 15.8582 3.22365 14.7866 3.99508 13.9855L6.99038 10.9902C7.42123 10.5592 7.93974 10.2259 8.51074 10.0129C9.08173 9.7999 9.69186 9.7122 10.2997 9.75573C10.9076 9.79927 11.499 9.97302 12.0338 10.2652C12.5686 10.5574 13.0343 10.9612 13.3994 11.4492C13.6475 11.7809 14.1175 11.8487 14.4492 11.6006C14.7809 11.3524 14.8486 10.8824 14.6005 10.5507C14.1067 9.8905 13.4766 9.34419 12.753 8.94887C12.0294 8.55355 11.2293 8.31846 10.4069 8.25956Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

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'