From 154aec8922754a2e2973de232091931eaaa5959c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 4 Oct 2023 06:16:19 +0000
Subject: [PATCH 1/4] fix(nc-gui): Added relation modal for base/source node in
 sidebar

---
 .../dashboard/TreeView/ProjectNode.vue        | 25 +++++++++----------
 packages/nc-gui/components/dlg/ProjectErd.vue | 20 +++++++++++++++
 2 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 packages/nc-gui/components/dlg/ProjectErd.vue

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index b135802c3f..bfbe544c0a 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -289,22 +289,21 @@ const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggl
 }
 
 function openErdView(source: SourceType) {
-  activeBaseId.value = source.id
-  isErdModalOpen.value = !isErdModalOpen.value
-}
+  $e('c:project:relation')
 
-async function openProjectErdView(_project: BaseType) {
-  if (!_project.id) return
+  const isOpen = ref(true)
 
-  if (!basesStore.isProjectPopulated(_project.id)) {
-    await loadProject(_project.id)
-  }
+  const { close } = useDialog(resolveComponent('DlgProjectErd'), {
+    'modelValue': isOpen,
+    'sourceId': source!.id,
+    'onUpdate:modelValue': () => closeDialog(),
+  })
 
-  const base = bases.value.get(_project.id)
+  function closeDialog() {
+    isOpen.value = false
 
-  const source = base?.sources?.[0]
-  if (!source) return
-  openErdView(source)
+    close(1000)
+  }
 }
 
 const reloadTables = async () => {
@@ -545,7 +544,7 @@ const projectDelete = () => {
                     key="erd"
                     v-e="['c:base:erd']"
                     data-testid="nc-sidebar-base-relations"
-                    @click="openProjectErdView(base)"
+                    @click="openErdView(base?.sources?.[0]!)"
                   >
                     <GeneralIcon icon="erd" />
                     {{ $t('title.relations') }}
diff --git a/packages/nc-gui/components/dlg/ProjectErd.vue b/packages/nc-gui/components/dlg/ProjectErd.vue
new file mode 100644
index 0000000000..03dde3144e
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ProjectErd.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  sourceId: string
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = useVModel(props, 'modelValue', emit)
+
+const activeSourceId = computed(() => props.sourceId)
+</script>
+
+<template>
+  <GeneralModal v-model:visible="isOpen" size="large">
+    <div class="h-[80vh]">
+      <LazyDashboardSettingsErd :source-id="activeSourceId" />
+    </div>
+  </GeneralModal>
+</template>

From 18ed49ab4f6d49eb2df1c3faa0ebbb85fbb32ad1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 4 Oct 2023 06:16:19 +0000
Subject: [PATCH 2/4] fix(nc-gui): Hide MM system column in ERD view

---
 packages/nc-gui/components/erd/TableNode.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 8859a0b40c..6df4f85978 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -29,12 +29,28 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
 
 const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumns.length)
 
+const nonPkColumns = computed(() =>
+  data.nonPkColumns
+    // Removed MM system column from the table node
+    .filter((col) => !(col.system && isLinksOrLTAR(col))),
+)
+
 watch(
   () => viewport.value.zoom,
   () => {
     isZooming.value = true
   },
 )
+
+watch(
+  () => data,
+  () => {
+    console.log('data changed', data)
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
@@ -80,10 +96,10 @@ watch(
           <LazySmartsheetHeaderCell v-if="col" class="nc-erd-table-node-column" :column="col" :hide-menu="true" />
         </div>
 
-        <div v-for="(col, index) in data.nonPkColumns" :key="col.title">
+        <div v-for="(col, index) in nonPkColumns" :key="col.title">
           <div
             class="relative w-full h-full flex items-center min-w-32 py-2 px-1"
-            :class="index + 1 === data.nonPkColumns.length ? 'rounded-b-lg' : ''"
+            :class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : ''"
           >
             <div
               v-if="isLinksOrLTAR(col)"

From 39f9c03ed3e5b393b860a8838ddc0834f0d38125 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 4 Oct 2023 06:16:19 +0000
Subject: [PATCH 3/4] fix(nc-gui): Fixed ERD view for non opened projects

---
 .../dashboard/TreeView/ProjectNode.vue        |  1 +
 packages/nc-gui/components/dlg/ProjectErd.vue | 34 ++++++++++++++++++-
 packages/nc-gui/components/erd/TableNode.vue  | 10 ------
 packages/nc-gui/components/erd/View.vue       | 11 +++++-
 packages/nc-gui/composables/useMetas.ts       | 16 ++++++---
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index bfbe544c0a..8fd9243f0e 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -297,6 +297,7 @@ function openErdView(source: SourceType) {
     'modelValue': isOpen,
     'sourceId': source!.id,
     'onUpdate:modelValue': () => closeDialog(),
+    'baseId': base.value.id,
   })
 
   function closeDialog() {
diff --git a/packages/nc-gui/components/dlg/ProjectErd.vue b/packages/nc-gui/components/dlg/ProjectErd.vue
index 03dde3144e..5c18099f25 100644
--- a/packages/nc-gui/components/dlg/ProjectErd.vue
+++ b/packages/nc-gui/components/dlg/ProjectErd.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 const props = defineProps<{
+  baseId: string
   sourceId: string
   modelValue: boolean
 }>()
@@ -9,12 +10,43 @@ const emit = defineEmits(['update:modelValue'])
 const isOpen = useVModel(props, 'modelValue', emit)
 
 const activeSourceId = computed(() => props.sourceId)
+
+const { openedProject: base } = storeToRefs(useBases())
+
+const { baseTables } = storeToRefs(useTablesStore())
+const { loadProjectTables } = useTablesStore()
+
+const isLoading = ref(true)
+
+const { getMeta } = useMetas()
+
+const baseId = computed(() => props.baseId || base.value?.id)
+
+onMounted(async () => {
+  if (baseId.value && baseTables.value.get(baseId.value)) {
+    return (isLoading.value = false)
+  }
+
+  try {
+    await loadProjectTables(baseId.value!)
+
+    await Promise.all(
+      baseTables.value.get(baseId.value!)!.map(async (table) => {
+        await getMeta(table.id!, false, false, baseId.value!)
+      }),
+    )
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading.value = false
+  }
+})
 </script>
 
 <template>
   <GeneralModal v-model:visible="isOpen" size="large">
     <div class="h-[80vh]">
-      <LazyDashboardSettingsErd :source-id="activeSourceId" />
+      <ErdView v-if="!isLoading" :source-id="activeSourceId" :base-id="baseId" />
     </div>
   </GeneralModal>
 </template>
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 6df4f85978..8c39a7322a 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -41,16 +41,6 @@ watch(
     isZooming.value = true
   },
 )
-
-watch(
-  () => data,
-  () => {
-    console.log('data changed', data)
-  },
-  {
-    immediate: true,
-  },
-)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index e70e4be8d4..ac5c35d9b3 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -17,9 +17,18 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  baseId: {
+    type: String,
+    default: '',
+  },
 })
 
-const { sources, tables: baseTables } = storeToRefs(useBase())
+const { baseTables: _baseTables } = storeToRefs(useTablesStore())
+const { sources, base } = storeToRefs(useBase())
+
+const baseId = computed(() => props.baseId ?? base.value!.id)
+
+const baseTables = computed(() => _baseTables.value.get(baseId.value) ?? [])
 
 const { metas, getMeta } = useMetas()
 
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index 9c0d4e2510..5992994ee5 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -6,7 +6,8 @@ import { extractSdkResponseErrorMsg, storeToRefs, useBase, useNuxtApp, useState,
 export function useMetas() {
   const { $api } = useNuxtApp()
 
-  const { tables } = storeToRefs(useBase())
+  const { tables: _tables } = storeToRefs(useBase())
+  const { baseTables } = storeToRefs(useTablesStore())
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
 
@@ -26,8 +27,16 @@ export function useMetas() {
   }
 
   // todo: this needs a proper refactor, arbitrary waiting times are usually not a good idea
-  const getMeta = async (tableIdOrTitle: string, force = false, skipIfCacheMiss = false): Promise<TableType | null> => {
+  const getMeta = async (
+    tableIdOrTitle: string,
+    force = false,
+    skipIfCacheMiss = false,
+    baseId?: string,
+  ): Promise<TableType | null> => {
     if (!tableIdOrTitle) return null
+
+    const tables = (baseId ? baseTables.value.get(baseId) : _tables.value) ?? []
+
     /** wait until loading is finished if requesting same meta
      * use while to recheck loading state since it can be changed by other requests
      * */
@@ -72,8 +81,7 @@ export function useMetas() {
         return metas.value[tableIdOrTitle]
       }
 
-      const modelId = (tables.value.find((t) => t.id === tableIdOrTitle) || tables.value.find((t) => t.title === tableIdOrTitle))
-        ?.id
+      const modelId = (tables.find((t) => t.id === tableIdOrTitle) || tables.find((t) => t.title === tableIdOrTitle))?.id
 
       if (!modelId) {
         console.warn(`Table '${tableIdOrTitle}' is not found in the table list`)

From a48bdc6dabb15680e6a8fe21be231393a8b4f106 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 4 Oct 2023 06:16:19 +0000
Subject: [PATCH 4/4] fix(nc-gui): Only hide nc generate m2m column names

---
 packages/nc-gui/components/erd/TableNode.vue | 2 +-
 packages/nc-gui/components/erd/View.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 8c39a7322a..036dd52315 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -32,7 +32,7 @@ const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumn
 const nonPkColumns = computed(() =>
   data.nonPkColumns
     // Removed MM system column from the table node
-    .filter((col) => !(col.system && isLinksOrLTAR(col))),
+    .filter((col) => !(col.system && isLinksOrLTAR(col) && /nc_.*___nc_m2m_.*/.test(col.title!))),
 )
 
 watch(
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index ac5c35d9b3..bb99dfcc4a 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -19,7 +19,7 @@ const props = defineProps({
   },
   baseId: {
     type: String,
-    default: '',
+    default: undefined,
   },
 })