✨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/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumnList.tsx

@@ -1,30 +1,56 @@
+import type { Relationships } 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'
+  relationships: Relationships
 }
 
-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
+export const TableColumnList: FC<TableColumnListProps> = ({
+  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,
+    ),
+  )
 
-      return (
-        <TableColumn
-          key={column.name}
-          column={column}
-          handleId={handleId}
-          isHighlighted={isHighlighted}
-          isSource={isSource}
-          targetCardinality={data.targetColumnCardinalities?.[column.name]}
-        />
-      )
-    })}
-  </ul>
-)
+  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 (
+    <ul>
+      {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
+
+        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

@@ -36,7 +36,16 @@ export const TableNode: FC<Props> = ({ data }) => {
       data-erd="table-node"
     >
       <TableHeader data={data} />
-      {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}
+      {showMode === 'ALL_FIELDS' && (
+        <TableColumnList data={data} relationships={relationships} />
+      )}
+      {showMode === 'KEY_ONLY' && (
+        <TableColumnList
+          data={data}
+          filter="KEY_ONLY"
+          relationships={relationships}
+        />
+      )}
     </div>
   )
 }