From 298c7cc53c9775496a9ed9a15165d9a4cc4312b4 Mon Sep 17 00:00:00 2001
From: FunamaYukina <yukina.funama@route06.co.jp>
Date: Wed, 18 Dec 2024 18:07:38 +0900
Subject: [PATCH] =?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 000000000..4cd5a6bbc
--- /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 e155efb47..3c7c6b687 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<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>
+  )
+}
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 d270a9b38..28ce8079a 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<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>
   )
 }