refactor: Reduce targetCardinality calculations

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

@@ -1,8 +1,11 @@
-import type { Column, Relationships, Table } from '@liam-hq/db-structure'
+import type {
+  Cardinality as CardinalityType,
+  Column,
+  Table,
+} from '@liam-hq/db-structure'
 import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui'
 import { Handle, Position } from '@xyflow/react'
 import clsx from 'clsx'
-import { useMemo } from 'react'
 import type { FC } from 'react'
 import { match } from 'ts-pattern'
 import { Cardinality } from './Cardinality'
@@ -12,35 +15,22 @@ import styles from './TableColumn.module.css'
 type TableColumnProps = {
   table: Table
   column: Column
-  relationships: Relationships
   isHighlighted: boolean
   highlightedHandles: string[]
   isSource: boolean
+  targetCardinality?: CardinalityType | undefined
 }
 
 export const TableColumn: FC<TableColumnProps> = ({
   table,
   column,
-  relationships,
   isHighlighted,
   highlightedHandles,
   isSource,
+  targetCardinality,
 }) => {
   const handleId = `${table.name}-${column.name}`
 
-  const { targetCardinalities } = useMemo(() => {
-    const targetCardinalities: Record<string, string | undefined> = {}
-
-    for (const relationship of Object.values(relationships)) {
-      const targetKey = `${relationship.foreignTableName}-${relationship.foreignColumnName}`
-      targetCardinalities[targetKey] = relationship.cardinality
-    }
-
-    return { targetCardinalities }
-  }, [relationships])
-
-  const targetCardinality = targetCardinalities[handleId]
-
   return (
     <li key={column.name} className={styles.columnWrapper}>
       {column.primary && (

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

@@ -1,27 +1,22 @@
-import type { Relationships } from '@liam-hq/db-structure'
 import type { FC } from 'react'
 import type { Data } from '../type'
 import { TableColumn } from './TableColumn'
 
 type TableColumnListProps = {
   data: Data
-  relationships: Relationships
 }
 
-export const TableColumnList: FC<TableColumnListProps> = ({
-  data,
-  relationships,
-}) => (
+export const TableColumnList: FC<TableColumnListProps> = ({ data }) => (
   <ul>
     {Object.values(data.table.columns).map((column) => (
       <TableColumn
         key={column.name}
         table={data.table}
         column={column}
-        relationships={relationships}
         isHighlighted={data.isHighlighted}
         highlightedHandles={data.highlightedHandles ?? []}
         isSource={data.sourceColumnName === column.name}
+        targetCardinality={data.targetColumnCardinalities?.[column.name]}
       />
     ))}
   </ul>

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

@@ -46,9 +46,7 @@ export const TableNode: FC<Props> = ({ data }) => {
       onClick={handleClick}
     >
       <TableHeader name={data.table.name} />
-      {showMode === 'ALL_FIELDS' && (
-        <TableColumnList data={data} relationships={relationships} />
-      )}
+      {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}
     </button>
   )
 }

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

@@ -1,4 +1,4 @@
-import type { Table } from '@liam-hq/db-structure'
+import type { Cardinality, Table } from '@liam-hq/db-structure'
 import type { Node } from '@xyflow/react'
 
 export type Data = {
@@ -7,6 +7,7 @@ export type Data = {
   isRelated: boolean
   highlightedHandles: string[]
   sourceColumnName: string | undefined
+  targetColumnCardinalities?: Record<string, Cardinality> | undefined
 }
 
 export type TableNodeType = Node<Data, 'table'>

frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts

@@ -1,5 +1,5 @@
 import type { ShowMode } from '@/schemas/showMode'
-import type { DBStructure } from '@liam-hq/db-structure'
+import type { Cardinality, DBStructure } from '@liam-hq/db-structure'
 import type { Edge, Node } from '@xyflow/react'
 
 type Params = {
@@ -17,11 +17,19 @@ export const convertDBStructureToNodes = ({
   const tables = Object.values(dbStructure.tables)
   const relationships = Object.values(dbStructure.relationships)
   const sourceColumns = new Map<string, string>()
+  const tableColumnCardinalities = new Map<
+    string,
+    Record<string, Cardinality>
+  >()
   for (const relationship of relationships) {
     sourceColumns.set(
       relationship.primaryTableName,
       relationship.primaryColumnName,
     )
+    tableColumnCardinalities.set(relationship.foreignTableName, {
+      ...tableColumnCardinalities.get(relationship.foreignTableName),
+      [relationship.foreignColumnName]: relationship.cardinality,
+    })
   }
 
   const nodes: Node[] = tables.map((table) => {
@@ -31,6 +39,7 @@ export const convertDBStructureToNodes = ({
       data: {
         table,
         sourceColumnName: sourceColumns.get(table.name),
+        targetColumnCardinalities: tableColumnCardinalities.get(table.name),
       },
       position: { x: 0, y: 0 },
       zIndex: 1,