refactor(nc-gui): dispose erd modal on close

packages/nc-gui/components/erd/Flow.vue

@@ -28,7 +28,7 @@ function init() {
 
 onPaneReady(init)
 
-watch([() => tables, () => config], init, { deep: true, flush: 'post' })
+watch([() => tables, () => config], init, { flush: 'post' })
 
 onScopeDispose($destroy)
 </script>

packages/nc-gui/components/erd/RelationEdge.vue

@@ -17,9 +17,7 @@ interface RelationEdgeProps extends EdgeProps {
     isSelfRelation: boolean
     label: string
   }
-  markerEnd: string
   style: CSSProperties
-  targetHandleId: string
 }
 
 const props = defineProps<RelationEdgeProps>()
@@ -52,15 +50,7 @@ export default {
 </script>
 
 <template>
-  <path
+  <path :id="id" :style="style" class="hover:!stroke-green-500" :stroke-width="8" fill="none" :d="edgePath[0]" />
-    :id="id"
-    :style="style"
-    class="path-wrapper hover:!stroke-green-500 p-4 hover:cursor-pointer"
-    :stroke-width="8"
-    fill="none"
-    :d="edgePath[0]"
-    :marker-end="markerEnd"
-  />
 
   <EdgeText
     v-if="data.label?.length > 0"

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { MetaInj, computed, provide, toRefs, useNuxtApp } from '#imports'
@@ -37,8 +37,8 @@ const nonPkColumns = computed(() => {
     .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
 
-const relatedColumnId = (col: Record<string, any>) =>
+const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
-  col.colOptions.type === 'mm' ? col.colOptions.fk_parent_column_id : col.colOptions.fk_child_column_id
+  colOptions.type === 'mm' ? colOptions.fk_parent_column_id : colOptions.fk_child_column_id
 </script>
 
 <template>
@@ -83,14 +83,14 @@ const relatedColumnId = (col: Record<string, any>) =>
             :class="`nc-erd-table-node-${data.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
           >
             <Handle
-              :id="`s-${relatedColumnId(col)}-${data.id}`"
+              :id="`s-${relatedColumnId(col.colOptions)}-${data.id}`"
               class="-right-4 opacity-0"
               type="source"
               :position="Position.Right"
             />
 
             <Handle
-              :id="`d-${relatedColumnId(col)}-${data.id}`"
+              :id="`d-${relatedColumnId(col.colOptions)}-${data.id}`"
               class="-left-1 opacity-0"
               type="target"
               :position="Position.Left"

packages/nc-gui/components/erd/View.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
+import type { ErdFlowConfig } from './utils'
 import { ref, useGlobal, useMetas, useProject, watch } from '#imports'
 
 const { table } = defineProps<{ table?: TableType }>()
@@ -14,9 +15,10 @@ const { metas, getMeta } = useMetas()
 const tables = ref<TableType[]>([])
 
 let isLoading = $ref(true)
+
 const showAdvancedOptions = ref(false)
 
-const config = ref({
+const config = ref<ErdFlowConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
@@ -36,7 +38,8 @@ const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
 }
 
 const populateTables = async () => {
-  let localTables: TableType[] = []
+  let localTables: TableType[]
+
   if (table) {
     // if table is provided only get the table and its related tables
     localTables = projectTables.value.filter(
@@ -57,7 +60,6 @@ const populateTables = async () => {
   tables.value = localTables
     .filter(
       (t) =>
-        // todo: table type is missing mm property in type definition
         config.value.showMMTables ||
         (!config.value.showMMTables && !t.mm) ||
         // Show mm table if it's the selected table
@@ -68,23 +70,10 @@ const populateTables = async () => {
   isLoading = false
 }
 
-watch(
+watch([config, metas, projectTables], populateTables, {
-  [config, metas],
+  flush: 'post',
-  async () => {
+  immediate: true,
-    await populateTables()
+})
-  },
-  {
-    deep: true,
-  },
-)
-
-watch(
-  [projectTables],
-  async () => {
-    await populateTables()
-  },
-  { immediate: true },
-)
 
 watch(
   () => config.value.showAllColumns,
@@ -103,13 +92,13 @@ watch(
       'nc-erd-vue-flow-single-table': config.singleTableMode,
     }"
   >
-    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+    <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
-      <div class="flex flex-row justify-center">
+      <div class="h-full w-full flex flex-col justify-center items-center">
         <a-spin size="large" />
       </div>
-    </div>
+    </GeneralOverlay>
 
-    <div v-else class="relative h-full">
+    <div class="relative h-full">
       <LazyErdFlow :tables="tables" :config="config" />
 
       <div

packages/nc-gui/components/erd/utils.ts

@@ -13,6 +13,7 @@ export interface ErdFlowConfig {
   showAllColumns: boolean
   singleTableMode: boolean
   showJunctionTableNames: boolean
+  showMMTables: boolean
 }
 
 interface Relation {
@@ -29,7 +30,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
 
   const { theme } = useTheme()
 
-  const colorScale = d3ScaleLinear<string>().domain([0, 3]).range([theme.value.primaryColor, theme.value.accentColor])
+  const colorScale = d3ScaleLinear<string>().domain([0, 2]).range([theme.value.primaryColor, theme.value.accentColor])
 
   const dagreGraph = new dagre.graphlib.Graph()
   dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -97,6 +98,8 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
 
     const mmModel = metasWithIdAsKey.value[modelId]
 
+    if (!mmModel) return ''
+
     if (mmModel.title !== mmModel.table_name) {
       return `${mmModel.title} (${mmModel.table_name})`
     }

packages/nc-gui/components/smartsheet/toolbar/Erd.vue

@@ -23,6 +23,7 @@ const selectedView = inject(ActiveViewInj)
     :closable="false"
     wrap-class-name="erd-single-table-modal"
     transition-name="fade"
+    :destroy-on-close="true"
   >
     <div class="flex flex-row justify-between w-full items-center mb-1">
       <a-typography-title class="ml-4 select-none" type="secondary" :level="5">