fix/Fixed edge calculation bug

packages/nc-gui/components/dashboard/settings/Erd.vue

@@ -57,9 +57,9 @@ const populateTables = () => {
 }
 
 const populateRelations = () => {
-  const ltarColumns = Object.keys(metasWithId.value).reduce((acc: any[], tableId) => {
+  const ltarColumns = tables.value.reduce((acc: any[], table) => {
-    const table = metasWithId.value[tableId]
+    const meta = metasWithId.value[table.id!]
-    const ltarColumns = table.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord)
+    const ltarColumns = meta.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1)
 
     ltarColumns.forEach((column: any) => {
       if (column.colOptions.type === 'hm') {
@@ -68,8 +68,13 @@ const populateRelations = () => {
 
       if (column.colOptions.type === 'mm') {
         // Remove duplicate relations
-        const relatedColumnId = column.colOptions.fk_child_column_id
+        const isCorrespondingRelationAlreadyAdded = acc.find(
-        if (!acc.find((col) => col.id === relatedColumnId)) {
+          (c) =>
+            c.colOptions.type === 'mm' &&
+            c.colOptions.fk_parent_column_id === column.colOptions.fk_child_column_id &&
+            c.colOptions.fk_child_column_id === column.colOptions.fk_parent_column_id,
+        )
+        if (!isCorrespondingRelationAlreadyAdded) {
           acc.push(column)
         }
       }
@@ -81,23 +86,31 @@ const populateRelations = () => {
   edges.value = ltarColumns.map((column: any) => {
     const source = column.fk_model_id
     const target = column.colOptions.fk_related_model_id
-    const targetColumnId = column.colOptions.fk_related_column_id
+    let sourceColumnId, targetColumnId
+
+    if (column.colOptions.type === 'hm') {
+      sourceColumnId = column.colOptions.fk_child_column_id
+      targetColumnId = column.colOptions.fk_parent_column_id
+    }
+    if (column.colOptions.type === 'mm') {
+      sourceColumnId = column.colOptions.fk_parent_column_id
+      targetColumnId = column.colOptions.fk_child_column_id
+    }
 
     dagreGraph.setEdge(source, target)
 
     return {
-      id: `e${source}-${target}`,
+      id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
       source: `${source}`,
       target: `${target}`,
-      sourceHandle: `s-${column.id}-${source}`,
+      sourceHandle: `s-${sourceColumnId}-${source}`,
       targetHandle: `d-${targetColumnId}-${target}`,
       type: 'custom',
-      data: { column, table: metasWithId.value[source], relatedTable: metasWithId.value[target] },
+      data: {
+        column,
+      },
     }
   })
-
-  // console.log('json:elements', JSON.parse(JSON.stringify(elements)))
-  // console.log('elements', elements)
 }
 
 const layoutNodes = () => {
@@ -135,8 +148,6 @@ const populateErd = (shouldReset = false) => {
   populateElements()
   populateRelations()
   layoutNodes()
-  console.log('nodes', nodes.value)
-  console.log('edges', edges.value)
 }
 
 onBeforeMount(async () => {

packages/nc-gui/components/dashboard/settings/erd/TableNode.vue

@@ -13,15 +13,21 @@ const { data } = toRefs(props)
 
 provide(MetaInj, data)
 
-const columns = data.value.columns
+const columns = computed(() => {
+  // Hide hm related created for `mm` relations
+  return data.value.columns.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
+})
 
 const pkAndFkColumns = computed(() => {
-  return columns.filter(() => data.value.showPkAndFk).filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
+  return columns.value.filter(() => data.value.showPkAndFk).filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
 })
 
 const nonPkColumns = computed(() => {
-  return columns.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
+  return columns.value.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
+
+const relatedColumnId = (col) =>
+  col.colOptions.type === 'mm' ? col.colOptions.fk_parent_column_id : col.colOptions.fk_child_column_id
 </script>
 
 <template>
@@ -38,8 +44,18 @@ const nonPkColumns = computed(() => {
       <div v-for="col in nonPkColumns" :key="col.title">
         <div class="w-full h-full flex items-center min-w-32 border-b-1 border-gray-100 py-2 px-1">
           <div v-if="col.uidt === UITypes.LinkToAnotherRecord" class="flex relative w-full">
-            <Handle :id="`s-${col.id}-${data.id}`" class="-right-4 opacity-0" type="source" :position="Position.Right" />
+            <Handle
-            <Handle :id="`d-${col.id}-${data.id}`" class="-left-1 opacity-0" type="target" :position="Position.Left" />
+              :id="`s-${relatedColumnId(col)}-${data.id}`"
+              class="-right-4 opacity-0"
+              type="source"
+              :position="Position.Right"
+            />
+            <Handle
+              :id="`d-${relatedColumnId(col)}-${data.id}`"
+              class="-left-1 opacity-0"
+              type="target"
+              :position="Position.Left"
+            />
             <SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
           </div>
           <SmartsheetHeaderVirtualCell v-else-if="isVirtualCol(col)" :column="col" :hide-menu="true" />