From ab664607ecfd10e62423905a0b47b19d13cf14c9 Mon Sep 17 00:00:00 2001
From: FunamaYukina <yukina.funama@route06.co.jp>
Date: Thu, 19 Dec 2024 15:10:26 +0900
Subject: [PATCH] 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<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,
-    ),
-  )
-
-  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<TableColumnListProps> = ({ data, filter }) => {
   return (
     <ul>
-      {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<Props> = ({ data }) => {
       data-erd="table-node"
     >
       <TableHeader data={data} />
-      {showMode === 'ALL_FIELDS' && (
-        <TableColumnList data={data} relationships={relationships} />
-      )}
+      {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}
       {showMode === 'KEY_ONLY' && (
-        <TableColumnList
-          data={data}
-          filter="KEY_ONLY"
-          relationships={relationships}
-        />
+        <TableColumnList data={data} filter="KEY_ONLY" />
       )}
     </div>
   )