From e3ef8a8ff00fd505051e4dc9498d9dd89234cf88 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 13 Sep 2022 23:55:41 +0530
Subject: [PATCH 01/62] feat/Added basic erd support

---
 packages/nc-gui/assets/style.scss             |   7 +
 .../components/dashboard/settings/Erd.vue     | 140 +++++++
 .../components/dashboard/settings/Modal.vue   |   5 +
 .../dashboard/settings/erd/RelationEdge.vue   | 120 ++++++
 .../dashboard/settings/erd/TableNode.vue      |  54 +++
 packages/nc-gui/composables/useMetas.ts       |   6 +-
 packages/nc-gui/package-lock.json             | 359 ++++++++++++++++++
 packages/nc-gui/package.json                  |   3 +
 8 files changed, 693 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/dashboard/settings/Erd.vue
 create mode 100644 packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
 create mode 100644 packages/nc-gui/components/dashboard/settings/erd/TableNode.vue

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 2d937de015..e2aaead0f2 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -1,4 +1,6 @@
 @import 'ant-design-vue/dist/antd.variable.min.css';
+@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@0.4.39/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@0.4.39/dist/theme-default.css';
 
 :root {
   --header-height: 42px;
@@ -242,3 +244,8 @@ a {
 .ant-dropdown-menu-submenu-title{
   @apply !pr-2;
 }
+
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
new file mode 100644
index 0000000000..4b7b88156e
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, MarkerType, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { ref } from 'vue'
+import { ColumnType, UITypes } from 'nocodb-sdk'
+import dagre from 'dagre'
+import TableNode from './erd/TableNode.vue'
+import RelationEdge from './erd/RelationEdge.vue'
+import { useNuxtApp, useProject } from '#imports'
+
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+const { updateNodeInternals } = useVueFlow()
+
+const { $api } = useNuxtApp()
+const { project, tables } = useProject()
+const { t } = useI18n()
+
+const { metas, getMeta, metasWithId } = useMetas()
+
+const nodes = ref<Node[]>([])
+const edges = ref<Edge[]>([])
+
+let isLoading = $ref(true)
+
+const loadMetasOfTablesNotInMetas = async () => {
+  await Promise.all(
+    tables.value
+      .filter((table) => !metas.value[table.id!])
+      .map(async (table) => {
+        await getMeta(table.id!)
+      }),
+  )
+}
+
+const populateTables = () => {
+  Object.keys(metasWithId.value).forEach((tableId) => {
+    nodes.value.push({
+      id: tableId,
+      data: metasWithId.value[tableId],
+      type: 'custom',
+    })
+    dagreGraph.setNode(tableId, { width: 250, height: 30 * metasWithId.value[tableId].columns.length })
+  })
+
+  dagreGraph.setGraph({ rankdir: 'LR' })
+}
+
+const populateRelations = () => {
+  const ltarColumns = Object.keys(metasWithId.value).reduce((acc, tableId) => {
+    const table = metasWithId.value[tableId]
+    const ltarColumns = table.columns.filter((column) => column.uidt === UITypes.LinkToAnotherRecord)
+
+    ltarColumns.forEach((column) => {
+      if (column.colOptions.type === 'hm') {
+        acc.push(column)
+      }
+
+      if (column.colOptions.type === 'mm') {
+        // Remove duplicate relations
+        const relatedColumnId = column.colOptions.fk_child_column_id
+        if (!acc.find((col) => col.id === relatedColumnId)) {
+          acc.push(column)
+        }
+      }
+    })
+
+    return acc
+  }, [])
+
+  edges.value = ltarColumns.map((column: any) => {
+    const source = column.fk_model_id
+    const target = column.colOptions.fk_related_model_id
+
+    dagreGraph.setEdge(source, target)
+
+    return {
+      id: `e${source}-${target}`,
+      source: `${source}`,
+      target: `${target}`,
+      sourceHandle: `s-${column.id}-${source}`,
+      targetHandle: `d-${column.id}-${target}`,
+      type: 'custom',
+      data: { column, table: metasWithId.value[source], relatedTable: metasWithId.value[target] },
+      markerEnd: MarkerType.ArrowClosed,
+    }
+  })
+
+  // console.log('json:elements', JSON.parse(JSON.stringify(elements)))
+  // console.log('elements', elements)
+}
+
+const layoutNodes = () => {
+  dagre.layout(dagreGraph)
+
+  nodes.value = nodes.value.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id)
+    if (!nodeWithPosition) return node
+
+    return { ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } }
+  })
+}
+
+const populateElements = () => {
+  populateTables()
+}
+
+onMounted(async () => {
+  if (isLoading) {
+    await loadMetasOfTablesNotInMetas()
+
+    populateElements()
+    populateRelations()
+    layoutNodes()
+
+    console.log('nodes', nodes.value)
+    console.log('edges', edges.value)
+
+    updateNodeInternals(nodes.value as any)
+    isLoading = false
+  }
+})
+</script>
+
+<template>
+  <div style="height: 650px">
+    <div v-if="isLoading"></div>
+    <VueFlow v-else :nodes="nodes" :edges="edges" :fit-view-on-init="true" :default-edge-options="{ type: 'step' }">
+      <template #node-custom="props">
+        <TableNode :data="props.data" />
+      </template>
+      <template #edge-custom="props">
+        <RelationEdge v-bind="props" />
+      </template>
+      <Background />
+    </VueFlow>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index e9f7546f3f..11ce0d153b 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -5,6 +5,7 @@ import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import Misc from './Misc.vue'
+import Erd from './Erd.vue'
 import { useNuxtApp } from '#app'
 import { useI18n, useUIPermission, useVModel, watch } from '#imports'
 import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
@@ -112,6 +113,10 @@ const tabsInfo: TabGroup = {
         title: t('general.misc'),
         body: Misc,
       },
+      erd: {
+        title: t('title.erd'),
+        body: Erd,
+      },
     },
     onClick: () => {
       $e('c:settings:proj-metadata')
diff --git a/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue b/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
new file mode 100644
index 0000000000..d4ae481581
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
@@ -0,0 +1,120 @@
+<script setup>
+import { EdgeText, getBezierCenter, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
+import { computed } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: false,
+  },
+  markerEnd: {
+    type: String,
+    required: false,
+  },
+  style: {
+    type: Object,
+    required: false,
+  },
+  sourceHandleId: {
+    type: String,
+    required: false,
+  },
+  targetHandleId: {
+    type: String,
+    required: false,
+  },
+})
+
+const isHovered = ref(false)
+const { column, relatedTable, table } = props.data
+
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+
+watch(
+  () => isHovered.value,
+  (val) => {
+    console.log(val)
+  },
+)
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <circle :cx="sourceX" :cy="sourceY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+  <path
+    :id="id"
+    :style="style"
+    class="stroke-gray-500 p-4 hover:stroke-green-500 hover:cursor-pointer"
+    :class="{ 'stroke-green-500': isHovered }"
+    :stroke-width="2.5"
+    fill="none"
+    :d="edgePath"
+    :marker-end="markerEnd"
+    onmouseover="isHovered = true"
+    onmouseout="isHovered = false"
+  />
+  <EdgeText
+    :x="center[0]"
+    :y="center[1]"
+    label="Text"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: '#10b981' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+  />
+  <circle :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+</template>
diff --git a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
new file mode 100644
index 0000000000..a75e68861f
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { Handle, Position } from '@braks/vue-flow'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { data: table } = props
+const columns = table.columns
+// console.log(table)
+
+const pkColumn = computed(() => {
+  return columns.find((col) => col.pk)
+})
+
+const nonPkColumns = computed(() => {
+  return columns.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
+    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full pl-3 bg-gray-100 font-semibold">
+      {{ table.title }}
+    </div>
+    <div class="mx-1">
+      <div class="w-full border-b-1 py-2 border-gray-100">
+        <SmartsheetHeaderCell v-if="pkColumn" :column="pkColumn" :hide-menu="true" />
+      </div>
+      <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">
+          <div v-if="col.uidt === UITypes.LinkToAnotherRecord" class="flex relative w-full">
+            <Handle :id="`s-${col.id}-${table.id}`" class="-right-4" type="source" :position="Position.Right" :hidden="false" />
+            <Handle
+              :id="`d-${col.id}-${table.id}`"
+              class="-left-1"
+              type="destination"
+              :position="Position.Left"
+              :hidden="false"
+            />
+            <SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
+          </div>
+          <SmartsheetHeaderVirtualCell v-else-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+
+          <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index 8a780f1793..67c5c719fc 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -10,6 +10,10 @@ export function useMetas() {
   const { tables } = useProject()
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
+  const metasWithId = computed(() => {
+    const idEntries = Object.entries(metas.value).filter(([k, v]) => k === v.id)
+    return Object.fromEntries(idEntries)
+  })
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
   const setMeta = async (model: any) => {
@@ -91,5 +95,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, removeMeta, setMeta }
+  return { getMeta, clearAllMeta, metas, metasWithId, removeMeta, setMeta }
 }
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 9d8beb4b4c..87f69a1bba 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -6,12 +6,14 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
+        "@braks/vue-flow": "^0.4.39",
         "@ckpack/vue-color": "^1.2.0",
         "@vuelidate/core": "^2.0.0-alpha.44",
         "@vuelidate/validators": "^2.0.0-alpha.31",
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
         "ant-design-vue": "^3.2.11",
+        "dagre": "^0.8.5",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "httpsnippet": "^2.0.0",
@@ -28,6 +30,7 @@
         "tinycolor2": "^1.4.2",
         "unique-names-generator": "^4.7.1",
         "vue-dompurify-html": "^3.0.0",
+        "vue-flow": "^0.3.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.2.2",
         "vuedraggable": "^4.1.0",
@@ -878,6 +881,103 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@braks/vue-flow": {
+      "version": "0.4.39",
+      "resolved": "https://registry.npmjs.org/@braks/vue-flow/-/vue-flow-0.4.39.tgz",
+      "integrity": "sha512-ZWKEwvEDKZe0Yw2sS8RxmxLs1k3O9DGFF0rk5xj+zWlExm15uBBhHAf8rWIRVULEbkjOmDwJEJ4bQrqwHn4pdA==",
+      "dependencies": {
+        "@vueuse/core": "^9.1.0",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/core": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.2.0.tgz",
+      "integrity": "sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.2.0",
+        "@vueuse/shared": "9.2.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/metadata": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.2.0.tgz",
+      "integrity": "sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/shared": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
+      "integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@ckpack/vue-color": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
@@ -5144,6 +5244,111 @@
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
       "dev": true
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -7882,6 +8087,14 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -14630,6 +14843,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-flow": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-flow/-/vue-flow-0.3.0.tgz",
+      "integrity": "sha512-J/I6z8ErkWiPCEicdZXTUEBt5MfW1GoFNs2/spGSLuzBKAOUF/MlghKAZZ4feDDjmpg/B00EviSG1fJ0PIGwVg=="
+    },
     "node_modules/vue-github-button": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
@@ -15831,6 +16049,59 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@braks/vue-flow": {
+      "version": "0.4.39",
+      "resolved": "https://registry.npmjs.org/@braks/vue-flow/-/vue-flow-0.4.39.tgz",
+      "integrity": "sha512-ZWKEwvEDKZe0Yw2sS8RxmxLs1k3O9DGFF0rk5xj+zWlExm15uBBhHAf8rWIRVULEbkjOmDwJEJ4bQrqwHn4pdA==",
+      "requires": {
+        "@vueuse/core": "^9.1.0",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "dependencies": {
+        "@vueuse/core": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.2.0.tgz",
+          "integrity": "sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.15",
+            "@vueuse/metadata": "9.2.0",
+            "@vueuse/shared": "9.2.0",
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+              "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.2.0.tgz",
+          "integrity": "sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw=="
+        },
+        "@vueuse/shared": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
+          "integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
+          "requires": {
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+              "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+              "requires": {}
+            }
+          }
+        }
+      }
+    },
     "@ckpack/vue-color": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
@@ -19096,6 +19367,81 @@
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
       "dev": true
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
+    "dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "requires": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -21041,6 +21387,14 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -26085,6 +26439,11 @@
         }
       }
     },
+    "vue-flow": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-flow/-/vue-flow-0.3.0.tgz",
+      "integrity": "sha512-J/I6z8ErkWiPCEicdZXTUEBt5MfW1GoFNs2/spGSLuzBKAOUF/MlghKAZZ4feDDjmpg/B00EviSG1fJ0PIGwVg=="
+    },
     "vue-github-button": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index c7156b9491..74c5853cf1 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -15,12 +15,14 @@
     "postinstall": "node scripts/updateNuxtRouting.js"
   },
   "dependencies": {
+    "@braks/vue-flow": "^0.4.39",
     "@ckpack/vue-color": "^1.2.0",
     "@vuelidate/core": "^2.0.0-alpha.44",
     "@vuelidate/validators": "^2.0.0-alpha.31",
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
     "ant-design-vue": "^3.2.11",
+    "dagre": "^0.8.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
@@ -37,6 +39,7 @@
     "tinycolor2": "^1.4.2",
     "unique-names-generator": "^4.7.1",
     "vue-dompurify-html": "^3.0.0",
+    "vue-flow": "^0.3.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
     "vuedraggable": "^4.1.0",

From 63aceb7e9c9d3c68f7903d7728cb4bbd47169bc9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 15:16:09 +0530
Subject: [PATCH 02/62] feat/Added basic erd support

---
 .../components/dashboard/settings/Erd.vue     | 107 ++++++++++++------
 .../dashboard/settings/erd/RelationEdge.vue   |  84 ++++++++------
 .../dashboard/settings/erd/TableNode.vue      |  40 ++++---
 3 files changed, 142 insertions(+), 89 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 4b7b88156e..ac720f498b 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { Edge, Node } from '@braks/vue-flow'
-import { Background, MarkerType, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import type { Edge } from '@braks/vue-flow'
+import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { ref } from 'vue'
-import { ColumnType, UITypes } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import TableNode from './erd/TableNode.vue'
 import RelationEdge from './erd/RelationEdge.vue'
-import { useNuxtApp, useProject } from '#imports'
+import { useProject } from '#imports'
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
 
-const { updateNodeInternals } = useVueFlow()
-
-const { $api } = useNuxtApp()
-const { project, tables } = useProject()
-const { t } = useI18n()
+const { updateNodeInternals, removeNodes, removeEdges, $reset } = useVueFlow()
 
+const { tables } = useProject()
 const { metas, getMeta, metasWithId } = useMetas()
 
-const nodes = ref<Node[]>([])
+const nodes = ref<any[]>([])
 const edges = ref<Edge[]>([])
-
 let isLoading = $ref(true)
+const isLayouting = ref(false)
+const config = ref({
+  showPkAndFk: true,
+  showViews: false,
+})
 
 const loadMetasOfTablesNotInMetas = async () => {
   await Promise.all(
@@ -36,24 +36,26 @@ const loadMetasOfTablesNotInMetas = async () => {
 }
 
 const populateTables = () => {
-  Object.keys(metasWithId.value).forEach((tableId) => {
+  tables.value.forEach((table) => {
+    if (!table?.id) return
+
     nodes.value.push({
-      id: tableId,
-      data: metasWithId.value[tableId],
+      id: table.id,
+      data: { ...metasWithId.value[table.id], showPkAndFk: config.value.showPkAndFk },
       type: 'custom',
     })
-    dagreGraph.setNode(tableId, { width: 250, height: 30 * metasWithId.value[tableId].columns.length })
+    dagreGraph.setNode(table.id, { width: 250, height: 30 * metasWithId.value[table.id].columns.length })
   })
 
   dagreGraph.setGraph({ rankdir: 'LR' })
 }
 
 const populateRelations = () => {
-  const ltarColumns = Object.keys(metasWithId.value).reduce((acc, tableId) => {
+  const ltarColumns = Object.keys(metasWithId.value).reduce((acc: any[], tableId) => {
     const table = metasWithId.value[tableId]
-    const ltarColumns = table.columns.filter((column) => column.uidt === UITypes.LinkToAnotherRecord)
+    const ltarColumns = table.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord)
 
-    ltarColumns.forEach((column) => {
+    ltarColumns.forEach((column: any) => {
       if (column.colOptions.type === 'hm') {
         acc.push(column)
       }
@@ -73,6 +75,7 @@ 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
 
     dagreGraph.setEdge(source, target)
 
@@ -81,10 +84,9 @@ const populateRelations = () => {
       source: `${source}`,
       target: `${target}`,
       sourceHandle: `s-${column.id}-${source}`,
-      targetHandle: `d-${column.id}-${target}`,
+      targetHandle: `d-${targetColumnId}-${target}`,
       type: 'custom',
       data: { column, table: metasWithId.value[source], relatedTable: metasWithId.value[target] },
-      markerEnd: MarkerType.ArrowClosed,
     }
   })
 
@@ -107,27 +109,54 @@ const populateElements = () => {
   populateTables()
 }
 
+const populateErd = () => {
+  isLayouting.value = true
+  populateElements()
+  populateRelations()
+  layoutNodes()
+
+  updateNodeInternals(nodes.value as any)
+  isLayouting.value = false
+}
+
+const resetElements = () => {
+  $reset()
+  updateNodeInternals(nodes.value as any)
+  removeNodes(nodes.value)
+  removeEdges(edges.value)
+  nodes.value = []
+  edges.value = []
+  dagreGraph.nodes().forEach((node: any) => dagreGraph.removeNode(node))
+  dagreGraph.edges().forEach((edge: any) => dagreGraph.removeEdge(edge))
+}
+
 onMounted(async () => {
-  if (isLoading) {
-    await loadMetasOfTablesNotInMetas()
+  isLoading = true
+  resetElements()
 
-    populateElements()
-    populateRelations()
-    layoutNodes()
+  await loadMetasOfTablesNotInMetas()
 
-    console.log('nodes', nodes.value)
-    console.log('edges', edges.value)
+  isLoading = false
+  populateErd()
+})
 
-    updateNodeInternals(nodes.value as any)
-    isLoading = false
-  }
+watch(config.value, () => {
+  populateErd()
 })
 </script>
 
 <template>
-  <div style="height: 650px">
-    <div v-if="isLoading"></div>
-    <VueFlow v-else :nodes="nodes" :edges="edges" :fit-view-on-init="true" :default-edge-options="{ type: 'step' }">
+  <div v-if="isLoading" style="height: 650px"></div>
+  <div v-else class="relative" style="height: 650px">
+    <VueFlow
+      :key="config.toString()"
+      :nodes="nodes"
+      :edges="edges"
+      :fit-view-on-init="true"
+      :default-edge-options="{ type: 'step' }"
+      :elevate-edges-on-select="true"
+    >
+      <Controls :show-fit-view="false" :show-interactive="false" />
       <template #node-custom="props">
         <TableNode :data="props.data" />
       </template>
@@ -136,5 +165,15 @@ onMounted(async () => {
       </template>
       <Background />
     </VueFlow>
+    <div class="absolute top-4 right-4 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+      <div class="flex flex-row items-center">
+        <a-checkbox v-model:checked="config.showPkAndFk" />
+        <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+      </div>
+      <div class="flex flex-row items-center">
+        <a-checkbox v-model:checked="config.showViews" />
+        <span class="ml-2" style="font-size: 0.65rem">Show views</span>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue b/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
index d4ae481581..b8baa47910 100644
--- a/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { EdgeText, getBezierCenter, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -53,8 +53,9 @@ const props = defineProps({
   },
 })
 
-const isHovered = ref(false)
-const { column, relatedTable, table } = props.data
+const { column } = toRefs(props.data)
+
+const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm')
 
 const edgePath = computed(() =>
   getBezierPath({
@@ -66,24 +67,6 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
-
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-
-watch(
-  () => isHovered.value,
-  (val) => {
-    console.log(val)
-  },
-)
 </script>
 
 <script>
@@ -93,28 +76,55 @@ export default {
 </script>
 
 <template>
-  <circle :cx="sourceX" :cy="sourceY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
   <path
     :id="id"
     :style="style"
-    class="stroke-gray-500 p-4 hover:stroke-green-500 hover:cursor-pointer"
-    :class="{ 'stroke-green-500': isHovered }"
-    :stroke-width="2.5"
+    class="path-wrapper p-4 hover:cursor-pointer"
+    :stroke-width="8"
     fill="none"
     :d="edgePath"
     :marker-end="markerEnd"
-    onmouseover="isHovered = true"
-    onmouseout="isHovered = false"
   />
-  <EdgeText
-    :x="center[0]"
-    :y="center[1]"
-    label="Text"
-    :label-style="{ fill: 'white' }"
-    :label-show-bg="true"
-    :label-bg-style="{ fill: '#10b981' }"
-    :label-bg-padding="[2, 4]"
-    :label-bg-border-radius="2"
+  <path
+    :id="id"
+    :style="style"
+    class="path stroke-gray-500 hover:stroke-green-500 hover:cursor-pointer"
+    :stroke-width="1.5"
+    fill="none"
+    :d="edgePath"
+    :marker-end="markerEnd"
   />
-  <circle :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+
+  <rect
+    :x="sourceX"
+    :y="sourceY - 4"
+    width="8"
+    height="8"
+    fill="#fff"
+    stroke="#6F3381"
+    :stroke-width="1.5"
+    :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
+  />
+  <rect
+    v-if="isManyToMany"
+    :x="targetX"
+    :y="targetY - 4"
+    width="8"
+    height="8"
+    fill="#fff"
+    stroke="#6F3381"
+    :stroke-width="1.5"
+    :transform="`rotate(45,${targetX + 2},${targetY - 4})`"
+  />
+  <circle v-else :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
 </template>
+
+<style scoped lang="scss">
+.path-wrapper:hover + .path {
+  @apply stroke-green-500;
+  stroke-width: 2;
+}
+.path:hover {
+  stroke-width: 2;
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
index a75e68861f..e888123307 100644
--- a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
@@ -9,12 +9,14 @@ const props = defineProps({
   },
 })
 
-const { data: table } = props
-const columns = table.columns
-// console.log(table)
+const { data } = toRefs(props)
 
-const pkColumn = computed(() => {
-  return columns.find((col) => col.pk)
+provide(MetaInj, data)
+
+const columns = data.value.columns
+
+const pkAndFkColumns = computed(() => {
+  return columns.filter(() => data.value.showPkAndFk).filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
 })
 
 const nonPkColumns = computed(() => {
@@ -25,23 +27,19 @@ const nonPkColumns = computed(() => {
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
     <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full pl-3 bg-gray-100 font-semibold">
-      {{ table.title }}
+      {{ data.title }}
     </div>
-    <div class="mx-1">
-      <div class="w-full border-b-1 py-2 border-gray-100">
-        <SmartsheetHeaderCell v-if="pkColumn" :column="pkColumn" :hide-menu="true" />
+    <div>
+      <div class="keys mb-1">
+        <div v-for="col in pkAndFkColumns" :key="col.title" class="w-full border-b-1 py-2 border-gray-100">
+          <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
+        </div>
       </div>
       <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">
+        <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}-${table.id}`" class="-right-4" type="source" :position="Position.Right" :hidden="false" />
-            <Handle
-              :id="`d-${col.id}-${table.id}`"
-              class="-left-1"
-              type="destination"
-              :position="Position.Left"
-              :hidden="false"
-            />
+            <Handle :id="`s-${col.id}-${data.id}`" class="-right-4 opacity-0" type="source" :position="Position.Right" />
+            <Handle :id="`d-${col.id}-${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" />
@@ -52,3 +50,9 @@ const nonPkColumns = computed(() => {
     </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.keys {
+  background-color: #f6f6f6;
+}
+</style>

From dcee27d28dba38e0cb226efd0ccbe590cdf92217 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Sep 2022 12:15:55 +0200
Subject: [PATCH 03/62] chore(deps-dev): add dagre types

---
 packages/nc-gui/package-lock.json | 13 +++++++++++++
 packages/nc-gui/package.json      |  1 +
 2 files changed, 14 insertions(+)

diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 87f69a1bba..2b29a07721 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -56,6 +56,7 @@
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
+        "@types/dagre": "^0.7.48",
         "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
@@ -2447,6 +2448,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dagre": {
+      "version": "0.7.48",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz",
+      "integrity": "sha512-rF3yXSwHIrDxEkN6edCE4TXknb5YSEpiXfLaspw1I08grC49ZFuAVGOQCmZGIuLUGoFgcqGlUFBL/XrpgYpQgw==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.3",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.3.tgz",
@@ -17270,6 +17277,12 @@
         "@types/node": "*"
       }
     },
+    "@types/dagre": {
+      "version": "0.7.48",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz",
+      "integrity": "sha512-rF3yXSwHIrDxEkN6edCE4TXknb5YSEpiXfLaspw1I08grC49ZFuAVGOQCmZGIuLUGoFgcqGlUFBL/XrpgYpQgw==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.3",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.3.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 74c5853cf1..5c43208d33 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -65,6 +65,7 @@
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
+    "@types/dagre": "^0.7.48",
     "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",

From 32ffe72d813b940f15205ceb0114d29c73e9fcc4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Sep 2022 12:16:12 +0200
Subject: [PATCH 04/62] refactor(nc-gui): reset ERD elements on option change
 and unmount

---
 .../components/dashboard/settings/Erd.vue     | 83 ++++++++++---------
 1 file changed, 46 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index ac720f498b..ba4708affd 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,25 +1,30 @@
 <script setup lang="ts">
-import type { Edge } from '@braks/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
 import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
 import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import TableNode from './erd/TableNode.vue'
 import RelationEdge from './erd/RelationEdge.vue'
-import { useProject } from '#imports'
 
-const dagreGraph = new dagre.graphlib.Graph()
+let dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
 
-const { updateNodeInternals, removeNodes, removeEdges, $reset } = useVueFlow()
+const { setNodes, setEdges } = useVueFlow()
 
 const { tables } = useProject()
+
 const { metas, getMeta, metasWithId } = useMetas()
 
-const nodes = ref<any[]>([])
+const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
+
+const nodes = ref<Node[]>([])
+
 const edges = ref<Edge[]>([])
+
 let isLoading = $ref(true)
+
 const isLayouting = ref(false)
+
 const config = ref({
   showPkAndFk: true,
   showViews: false,
@@ -37,14 +42,15 @@ const loadMetasOfTablesNotInMetas = async () => {
 
 const populateTables = () => {
   tables.value.forEach((table) => {
-    if (!table?.id) return
+    if (!table.id) return
+
+    dagreGraph.setNode(table.id, { width: 250, height: 30 * metasWithId.value[table.id].columns.length })
 
-    nodes.value.push({
+    initialNodes.value.push({
       id: table.id,
       data: { ...metasWithId.value[table.id], showPkAndFk: config.value.showPkAndFk },
       type: 'custom',
     })
-    dagreGraph.setNode(table.id, { width: 250, height: 30 * metasWithId.value[table.id].columns.length })
   })
 
   dagreGraph.setGraph({ rankdir: 'LR' })
@@ -97,11 +103,12 @@ const populateRelations = () => {
 const layoutNodes = () => {
   dagre.layout(dagreGraph)
 
-  nodes.value = nodes.value.map((node) => {
+  nodes.value = initialNodes.value.flatMap((node) => {
     const nodeWithPosition = dagreGraph.node(node.id)
-    if (!nodeWithPosition) return node
 
-    return { ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } }
+    if (!nodeWithPosition) return []
+
+    return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node]
   })
 }
 
@@ -109,62 +116,64 @@ const populateElements = () => {
   populateTables()
 }
 
-const populateErd = () => {
+const resetElements = () => {
+  setNodes([])
+  setEdges([])
+  initialNodes.value = []
+  nodes.value = []
+  edges.value = []
+}
+
+const populateErd = (shouldReset = false) => {
   isLayouting.value = true
+
+  if (shouldReset) {
+    dagreGraph = new dagre.graphlib.Graph()
+    dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+    resetElements()
+  }
+
   populateElements()
   populateRelations()
   layoutNodes()
 
-  updateNodeInternals(nodes.value as any)
   isLayouting.value = false
 }
 
-const resetElements = () => {
-  $reset()
-  updateNodeInternals(nodes.value as any)
-  removeNodes(nodes.value)
-  removeEdges(edges.value)
-  nodes.value = []
-  edges.value = []
-  dagreGraph.nodes().forEach((node: any) => dagreGraph.removeNode(node))
-  dagreGraph.edges().forEach((edge: any) => dagreGraph.removeEdge(edge))
-}
-
-onMounted(async () => {
+onBeforeMount(async () => {
   isLoading = true
-  resetElements()
 
   await loadMetasOfTablesNotInMetas()
 
   isLoading = false
+
   populateErd()
 })
 
-watch(config.value, () => {
-  populateErd()
+onBeforeUnmount(() => {
+  resetElements()
 })
+
+watch(config.value, () => populateErd(true))
 </script>
 
 <template>
   <div v-if="isLoading" style="height: 650px"></div>
   <div v-else class="relative" style="height: 650px">
-    <VueFlow
-      :key="config.toString()"
-      :nodes="nodes"
-      :edges="edges"
-      :fit-view-on-init="true"
-      :default-edge-options="{ type: 'step' }"
-      :elevate-edges-on-select="true"
-    >
+    <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
       <Controls :show-fit-view="false" :show-interactive="false" />
+
       <template #node-custom="props">
         <TableNode :data="props.data" />
       </template>
+
       <template #edge-custom="props">
         <RelationEdge v-bind="props" />
       </template>
       <Background />
     </VueFlow>
+
     <div class="absolute top-4 right-4 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
       <div class="flex flex-row items-center">
         <a-checkbox v-model:checked="config.showPkAndFk" />

From 304fd89f5cb2d6795c0ba30520ef3eaa590b89c4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 16:41:33 +0530
Subject: [PATCH 05/62] feat/Added basic erd for hiding views in ERD

---
 .../components/dashboard/settings/Erd.vue     | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index ba4708affd..c99fa6bfa6 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -23,8 +23,6 @@ const edges = ref<Edge[]>([])
 
 let isLoading = $ref(true)
 
-const isLayouting = ref(false)
-
 const config = ref({
   showPkAndFk: true,
   showViews: false,
@@ -41,17 +39,19 @@ const loadMetasOfTablesNotInMetas = async () => {
 }
 
 const populateTables = () => {
-  tables.value.forEach((table) => {
-    if (!table.id) return
-
-    dagreGraph.setNode(table.id, { width: 250, height: 30 * metasWithId.value[table.id].columns.length })
-
-    initialNodes.value.push({
-      id: table.id,
-      data: { ...metasWithId.value[table.id], showPkAndFk: config.value.showPkAndFk },
-      type: 'custom',
+  tables.value
+    .filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews)
+    .forEach((table) => {
+      if (!table.id) return
+
+      dagreGraph.setNode(table.id, { width: 250, height: 30 * metasWithId.value[table.id].columns.length })
+
+      initialNodes.value.push({
+        id: table.id,
+        data: { ...metasWithId.value[table.id], showPkAndFk: config.value.showPkAndFk },
+        type: 'custom',
+      })
     })
-  })
 
   dagreGraph.setGraph({ rankdir: 'LR' })
 }
@@ -125,8 +125,6 @@ const resetElements = () => {
 }
 
 const populateErd = (shouldReset = false) => {
-  isLayouting.value = true
-
   if (shouldReset) {
     dagreGraph = new dagre.graphlib.Graph()
     dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -137,8 +135,8 @@ const populateErd = (shouldReset = false) => {
   populateElements()
   populateRelations()
   layoutNodes()
-
-  isLayouting.value = false
+  console.log('nodes', nodes.value)
+  console.log('edges', edges.value)
 }
 
 onBeforeMount(async () => {

From 26cf579d197d67ec60d5a08ebcca5a5b529c5643 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 20:42:19 +0530
Subject: [PATCH 06/62] fix/Fixed edge calculation bug

---
 .../components/dashboard/settings/Erd.vue     | 39 ++++++++++++-------
 .../dashboard/settings/erd/TableNode.vue      | 26 ++++++++++---
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index c99fa6bfa6..5a27d0295c 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/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 table = metasWithId.value[tableId]
-    const ltarColumns = table.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord)
+  const ltarColumns = tables.value.reduce((acc: any[], table) => {
+    const meta = metasWithId.value[table.id!]
+    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
-        if (!acc.find((col) => col.id === relatedColumnId)) {
+        const isCorrespondingRelationAlreadyAdded = acc.find(
+          (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 () => {
diff --git a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
index e888123307..75ac809349 100644
--- a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
+++ b/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 :id="`d-${col.id}-${data.id}`" class="-left-1 opacity-0" type="target" :position="Position.Left" />
+            <Handle
+              :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" />

From b90d13147b89cca01325da16165d252aef246129 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 20:56:42 +0530
Subject: [PATCH 07/62] fix/Fixed edge calculation bug

---
 packages/nc-gui/components/dashboard/settings/Erd.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 5a27d0295c..2a3a042337 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -44,7 +44,7 @@ const populateTables = () => {
     .forEach((table) => {
       if (!table.id) return
 
-      dagreGraph.setNode(table.id, { width: 250, height: 30 * metasWithId.value[table.id].columns.length })
+      dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithId.value[table.id].columns.length })
 
       initialNodes.value.push({
         id: table.id,
@@ -90,7 +90,7 @@ const populateRelations = () => {
 
     if (column.colOptions.type === 'hm') {
       sourceColumnId = column.colOptions.fk_child_column_id
-      targetColumnId = column.colOptions.fk_parent_column_id
+      targetColumnId = column.colOptions.fk_child_column_id
     }
     if (column.colOptions.type === 'mm') {
       sourceColumnId = column.colOptions.fk_parent_column_id

From 757166ce74a8dbf53b2609deab0ec74274f7da49 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 21:30:24 +0530
Subject: [PATCH 08/62] feat/Added enable view option in ERD

---
 .../components/dashboard/settings/Erd.vue     | 164 +-----------------
 .../components/dashboard/settings/erd/Erd.vue | 133 ++++++++++++++
 2 files changed, 142 insertions(+), 155 deletions(-)
 create mode 100644 packages/nc-gui/components/dashboard/settings/erd/Erd.vue

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 2a3a042337..9b3da29494 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,25 +1,9 @@
 <script setup lang="ts">
-import type { Edge, Node } from '@braks/vue-flow'
-import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { UITypes } from 'nocodb-sdk'
-import dagre from 'dagre'
-import TableNode from './erd/TableNode.vue'
-import RelationEdge from './erd/RelationEdge.vue'
-
-let dagreGraph = new dagre.graphlib.Graph()
-dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-const { setNodes, setEdges } = useVueFlow()
+import Erd from './erd/Erd.vue'
 
 const { tables } = useProject()
 
-const { metas, getMeta, metasWithId } = useMetas()
-
-const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
-
-const nodes = ref<Node[]>([])
-
-const edges = ref<Edge[]>([])
+const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
 
@@ -28,7 +12,7 @@ const config = ref({
   showViews: false,
 })
 
-const loadMetasOfTablesNotInMetas = async () => {
+const loadMetaOfTablesNotInMetas = async () => {
   await Promise.all(
     tables.value
       .filter((table) => !metas.value[table.id!])
@@ -38,150 +22,20 @@ const loadMetasOfTablesNotInMetas = async () => {
   )
 }
 
-const populateTables = () => {
-  tables.value
-    .filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews)
-    .forEach((table) => {
-      if (!table.id) return
-
-      dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithId.value[table.id].columns.length })
-
-      initialNodes.value.push({
-        id: table.id,
-        data: { ...metasWithId.value[table.id], showPkAndFk: config.value.showPkAndFk },
-        type: 'custom',
-      })
-    })
-
-  dagreGraph.setGraph({ rankdir: 'LR' })
-}
-
-const populateRelations = () => {
-  const ltarColumns = tables.value.reduce((acc: any[], table) => {
-    const meta = metasWithId.value[table.id!]
-    const ltarColumns = meta.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1)
-
-    ltarColumns.forEach((column: any) => {
-      if (column.colOptions.type === 'hm') {
-        acc.push(column)
-      }
-
-      if (column.colOptions.type === 'mm') {
-        // Remove duplicate relations
-        const isCorrespondingRelationAlreadyAdded = acc.find(
-          (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)
-        }
-      }
-    })
-
-    return acc
-  }, [])
-
-  edges.value = ltarColumns.map((column: any) => {
-    const source = column.fk_model_id
-    const target = column.colOptions.fk_related_model_id
-    let sourceColumnId, targetColumnId
-
-    if (column.colOptions.type === 'hm') {
-      sourceColumnId = column.colOptions.fk_child_column_id
-      targetColumnId = column.colOptions.fk_child_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-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
-      source: `${source}`,
-      target: `${target}`,
-      sourceHandle: `s-${sourceColumnId}-${source}`,
-      targetHandle: `d-${targetColumnId}-${target}`,
-      type: 'custom',
-      data: {
-        column,
-      },
-    }
-  })
-}
-
-const layoutNodes = () => {
-  dagre.layout(dagreGraph)
-
-  nodes.value = initialNodes.value.flatMap((node) => {
-    const nodeWithPosition = dagreGraph.node(node.id)
-
-    if (!nodeWithPosition) return []
-
-    return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node]
-  })
-}
-
-const populateElements = () => {
-  populateTables()
-}
-
-const resetElements = () => {
-  setNodes([])
-  setEdges([])
-  initialNodes.value = []
-  nodes.value = []
-  edges.value = []
-}
-
-const populateErd = (shouldReset = false) => {
-  if (shouldReset) {
-    dagreGraph = new dagre.graphlib.Graph()
-    dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-    resetElements()
-  }
-
-  populateElements()
-  populateRelations()
-  layoutNodes()
-}
-
-onBeforeMount(async () => {
-  isLoading = true
-
-  await loadMetasOfTablesNotInMetas()
-
+onMounted(async () => {
+  await loadMetaOfTablesNotInMetas()
   isLoading = false
-
-  populateErd()
 })
 
-onBeforeUnmount(() => {
-  resetElements()
-})
-
-watch(config.value, () => populateErd(true))
+const localTables = computed(() =>
+  tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
+)
 </script>
 
 <template>
   <div v-if="isLoading" style="height: 650px"></div>
   <div v-else class="relative" style="height: 650px">
-    <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
-      <Controls :show-fit-view="false" :show-interactive="false" />
-
-      <template #node-custom="props">
-        <TableNode :data="props.data" />
-      </template>
-
-      <template #edge-custom="props">
-        <RelationEdge v-bind="props" />
-      </template>
-      <Background />
-    </VueFlow>
+    <Erd :key="JSON.stringify(config)" :tables="localTables" :config="config" />
 
     <div class="absolute top-4 right-4 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
       <div class="flex flex-row items-center">
diff --git a/packages/nc-gui/components/dashboard/settings/erd/Erd.vue b/packages/nc-gui/components/dashboard/settings/erd/Erd.vue
new file mode 100644
index 0000000000..b25e2a8623
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/erd/Erd.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, Controls, VueFlow } from '@braks/vue-flow'
+import { UITypes } from 'nocodb-sdk'
+import dagre from 'dagre'
+import TableNode from './TableNode.vue'
+import RelationEdge from './RelationEdge.vue'
+
+interface Props {
+  tables: any[]
+  config: {
+    showPkAndFk: boolean
+    showViews: boolean
+  }
+}
+
+const { tables, config } = defineProps<Props>()
+
+const { metasWithId } = useMetas()
+
+const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
+const nodes = ref<Node[]>([])
+const edges = ref<Edge[]>([])
+
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+const populateInitalNodes = () => {
+  tables.forEach((table) => {
+    if (!table.id) return
+
+    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithId.value[table.id].columns.length })
+
+    initialNodes.value.push({
+      id: table.id,
+      data: { ...metasWithId.value[table.id], showPkAndFk: config.showPkAndFk },
+      type: 'custom',
+    })
+  })
+
+  dagreGraph.setGraph({ rankdir: 'LR' })
+}
+
+const populateEdges = () => {
+  const ltarColumns = tables.reduce((acc: any[], table) => {
+    const meta = metasWithId.value[table.id!]
+    const ltarColumns = meta.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1)
+
+    ltarColumns.forEach((column: any) => {
+      if (column.colOptions.type === 'hm') {
+        acc.push(column)
+      }
+
+      if (column.colOptions.type === 'mm') {
+        // Avoid duplicate mm connections
+        const correspondingColumn = acc.find(
+          (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 (!correspondingColumn) {
+          acc.push(column)
+        }
+      }
+    })
+
+    return acc
+  }, [])
+
+  edges.value = ltarColumns.map((column: any) => {
+    const source = column.fk_model_id
+    const target = column.colOptions.fk_related_model_id
+    let sourceColumnId, targetColumnId
+
+    if (column.colOptions.type === 'hm') {
+      sourceColumnId = column.colOptions.fk_child_column_id
+      targetColumnId = column.colOptions.fk_child_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-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
+      source: `${source}`,
+      target: `${target}`,
+      sourceHandle: `s-${sourceColumnId}-${source}`,
+      targetHandle: `d-${targetColumnId}-${target}`,
+      type: 'custom',
+      data: {
+        column,
+      },
+    }
+  })
+}
+
+const layoutNodes = () => {
+  dagre.layout(dagreGraph)
+
+  nodes.value = initialNodes.value.flatMap((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id)
+
+    if (!nodeWithPosition) return []
+
+    return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node]
+  })
+}
+
+onBeforeMount(async () => {
+  populateInitalNodes()
+  populateEdges()
+  layoutNodes()
+})
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
+    <Controls :show-fit-view="false" :show-interactive="false" />
+
+    <template #node-custom="props">
+      <TableNode :data="props.data" />
+    </template>
+
+    <template #edge-custom="props">
+      <RelationEdge v-bind="props" />
+    </template>
+    <Background />
+  </VueFlow>
+</template>

From 70e4f1333e9baf4325370bf4a72692c0048acd94 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 21:49:15 +0530
Subject: [PATCH 09/62] feat/Added ERD sub header in settings modal

---
 packages/nc-gui/components/dashboard/settings/Modal.vue | 8 ++++----
 packages/nc-gui/lang/en.json                            | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 11ce0d153b..1a8c68bf75 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -109,14 +109,14 @@ const tabsInfo: TabGroup = {
           $e('c:table:ui-acl')
         },
       },
-      misc: {
-        title: t('general.misc'),
-        body: Misc,
-      },
       erd: {
         title: t('title.erd'),
         body: Erd,
       },
+      misc: {
+        title: t('general.misc'),
+        body: Misc,
+      },
     },
     onClick: () => {
       $e('c:settings:proj-metadata')
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 8def53b7e9..97c42660e5 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -157,6 +157,7 @@
     "isNotNull": "is not null"
   },
   "title": {
+    "erd": "ERD",
     "newProj": "New Project",
     "myProject": "My Projects",
     "formTitle": "Form Title",

From dbaedefa2a058b2f95d68ef3901a34fc222ac6fc Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 14 Sep 2022 21:51:53 +0530
Subject: [PATCH 10/62] feat/Moved erd to components folder

---
 packages/nc-gui/components/dashboard/settings/Erd.vue           | 2 +-
 packages/nc-gui/components/{dashboard/settings => }/erd/Erd.vue | 0
 .../components/{dashboard/settings => }/erd/RelationEdge.vue    | 0
 .../components/{dashboard/settings => }/erd/TableNode.vue       | 0
 4 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/nc-gui/components/{dashboard/settings => }/erd/Erd.vue (100%)
 rename packages/nc-gui/components/{dashboard/settings => }/erd/RelationEdge.vue (100%)
 rename packages/nc-gui/components/{dashboard/settings => }/erd/TableNode.vue (100%)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 9b3da29494..3959294c8e 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Erd from './erd/Erd.vue'
+import Erd from '~/components/erd/Erd.vue'
 
 const { tables } = useProject()
 
diff --git a/packages/nc-gui/components/dashboard/settings/erd/Erd.vue b/packages/nc-gui/components/erd/Erd.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/settings/erd/Erd.vue
rename to packages/nc-gui/components/erd/Erd.vue
diff --git a/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue
rename to packages/nc-gui/components/erd/RelationEdge.vue
diff --git a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
similarity index 100%
rename from packages/nc-gui/components/dashboard/settings/erd/TableNode.vue
rename to packages/nc-gui/components/erd/TableNode.vue

From 03609b5166a28ee81fcc78f66e89897838af398e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 10:27:54 +0530
Subject: [PATCH 11/62] feat/Added ERD view to grid toolbar and cleanups

---
 packages/nc-gui/components.d.ts               |  1 +
 .../components/dashboard/settings/Erd.vue     | 30 +++++----
 .../components/erd/{Erd.vue => View.vue}      |  2 +-
 .../components/smartsheet-toolbar/Erd.vue     | 62 +++++++++++++++++++
 .../smartsheet-toolbar/ViewActions.vue        | 13 ++++
 packages/nc-gui/lang/en.json                  |  1 +
 6 files changed, 95 insertions(+), 14 deletions(-)
 rename packages/nc-gui/components/erd/{Erd.vue => View.vue} (96%)
 create mode 100644 packages/nc-gui/components/smartsheet-toolbar/Erd.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 377cd11c6a..286b2ef7c3 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -173,6 +173,7 @@ declare module '@vue/runtime-core' {
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiOpenInNewIcon: typeof import('~icons/mdi/open-in-new-icon')['default']
     MdiPencil: typeof import('~icons/mdi/pencil')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 3959294c8e..fe58654017 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Erd from '~/components/erd/Erd.vue'
-
 const { tables } = useProject()
 
 const { metas, getMeta } = useMetas()
@@ -33,18 +31,24 @@ const localTables = computed(() =>
 </script>
 
 <template>
-  <div v-if="isLoading" style="height: 650px"></div>
-  <div v-else class="relative" style="height: 650px">
-    <Erd :key="JSON.stringify(config)" :tables="localTables" :config="config" />
-
-    <div class="absolute top-4 right-4 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
-      <div class="flex flex-row items-center">
-        <a-checkbox v-model:checked="config.showPkAndFk" />
-        <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+  <div class="w-full" style="height: 70vh">
+    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+      <div class="flex flex-row justify-center">
+        <a-spin size="large" />
       </div>
-      <div class="flex flex-row items-center">
-        <a-checkbox v-model:checked="config.showViews" />
-        <span class="ml-2" style="font-size: 0.65rem">Show views</span>
+    </div>
+    <div v-else class="relative h-full">
+      <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
+
+      <div class="absolute top-4 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showPkAndFk" />
+          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+        </div>
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showViews" />
+          <span class="ml-2" style="font-size: 0.65rem">Show views</span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/erd/Erd.vue b/packages/nc-gui/components/erd/View.vue
similarity index 96%
rename from packages/nc-gui/components/erd/Erd.vue
rename to packages/nc-gui/components/erd/View.vue
index b25e2a8623..b1ac75f7a4 100644
--- a/packages/nc-gui/components/erd/Erd.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -119,7 +119,7 @@ onBeforeMount(async () => {
 
 <template>
   <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
-    <Controls :show-fit-view="false" :show-interactive="false" />
+    <Controls class="!left-auto right-2 !top-2 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="props">
       <TableNode :data="props.data" />
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
new file mode 100644
index 0000000000..02f08b1afa
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { UITypes } from 'nocodb-sdk'
+
+const { tables } = useProject()
+
+const { metas, getMeta } = useMetas()
+const meta = inject(MetaInj)
+
+let isLoading = $ref(true)
+
+const config = ref({
+  showPkAndFk: true,
+  showViews: false,
+})
+
+const relatedTables = computed(() =>
+  tables.value.filter(
+    (table) =>
+      meta?.value.columns &&
+      meta.value.columns.find(
+        (column) => column.uidt === UITypes.LinkToAnotherRecord && column?.colOptions?.fk_related_model_id === table.id,
+      ),
+  ),
+)
+
+const loadMetaOfTablesNotInMetas = async () => {
+  await Promise.all(
+    relatedTables.value
+      .filter((table) => !metas.value[table.id!])
+      .map(async (table) => {
+        await getMeta(table.id!)
+      }),
+  )
+}
+
+onMounted(async () => {
+  await loadMetaOfTablesNotInMetas()
+  isLoading = false
+})
+
+const localTables = computed(() => (meta ? [meta.value, ...relatedTables.value] : []))
+</script>
+
+<template>
+  <div class="w-full" style="height: 70vh">
+    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+      <div class="flex flex-row justify-center">
+        <a-spin size="large" />
+      </div>
+    </div>
+    <div v-else class="relative h-full">
+      <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
+
+      <div class="absolute top-3 right-11 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showPkAndFk" />
+          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index f095ffa5d5..b97d7e0068 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -18,6 +18,7 @@ import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
+import AcountTreeRoundedIcon from '~icons/material-symbols/account-tree-rounded'
 
 const { t } = useI18n()
 
@@ -37,6 +38,8 @@ const showWebhookDrawer = ref(false)
 
 const showApiSnippetDrawer = ref(false)
 
+const showErd = ref(false)
+
 const quickImportDialog = ref(false)
 
 const { isUIAllowed } = useUIPermission()
@@ -212,6 +215,12 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 {{ $t('activity.getApiSnippet') }}
               </div>
             </a-menu-item>
+            <a-menu-item>
+              <div v-t="['c:erd:open']" class="py-2 flex gap-2 items-center" @click="showErd = true">
+                <AcountTreeRoundedIcon class="text-gray-500" />
+                {{ $t('title.erdView') }}
+              </div>
+            </a-menu-item>
           </a-menu-item-group>
         </a-menu>
       </template>
@@ -221,6 +230,10 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
+    <a-modal v-model:visible="showErd" size="small" :title="$t('title.erdView')" :footer="null" width="max(900px,60vw)">
+      <SmartsheetToolbarErd />
+    </a-modal>
+
     <a-modal
       v-model:visible="sharedViewListDlg"
       :title="$t('activity.listSharedView')"
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 97c42660e5..08170ead93 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -158,6 +158,7 @@
   },
   "title": {
     "erd": "ERD",
+    "erdView": "ERD View",
     "newProj": "New Project",
     "myProject": "My Projects",
     "formTitle": "Form Title",

From 937f92ca55772947bdf48843ea15095be924c166 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 10:32:03 +0530
Subject: [PATCH 12/62] feat/Minor UI fix

---
 packages/nc-gui/components/dashboard/settings/Erd.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index fe58654017..57a6856fa0 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -40,7 +40,7 @@ const localTables = computed(() =>
     <div v-else class="relative h-full">
       <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
 
-      <div class="absolute top-4 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+      <div class="absolute top-1 right-8 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showPkAndFk" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>

From 7b788ca6ae31ce694198a42cba7ebfe3b803890b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 10:33:25 +0530
Subject: [PATCH 13/62] feat/Minor UI fix

---
 packages/nc-gui/components/dashboard/settings/Modal.vue | 2 +-
 packages/nc-gui/lang/en.json                            | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 1a8c68bf75..94c0478b2e 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -110,7 +110,7 @@ const tabsInfo: TabGroup = {
         },
       },
       erd: {
-        title: t('title.erd'),
+        title: t('title.erdView'),
         body: Erd,
       },
       misc: {
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 08170ead93..2bb9a9d306 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -157,7 +157,6 @@
     "isNotNull": "is not null"
   },
   "title": {
-    "erd": "ERD",
     "erdView": "ERD View",
     "newProj": "New Project",
     "myProject": "My Projects",

From 1f29380b7a88399ee760bcc803f8ef41abc48e3a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 10:44:18 +0530
Subject: [PATCH 14/62] feat/Minor cleanup

---
 packages/nc-gui/components/erd/TableNode.vue |  2 +-
 packages/nc-gui/components/erd/View.vue      | 12 ++++++------
 packages/nc-gui/composables/useMetas.ts      |  6 ++++--
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 75ac809349..236549125c 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -14,7 +14,7 @@ const { data } = toRefs(props)
 provide(MetaInj, data)
 
 const columns = computed(() => {
-  // Hide hm related created for `mm` relations
+  // Hide hm ltar created for `mm` relations
   return data.value.columns.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
 })
 
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index b1ac75f7a4..e377dd1fbb 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -16,7 +16,7 @@ interface Props {
 
 const { tables, config } = defineProps<Props>()
 
-const { metasWithId } = useMetas()
+const { metasWithIdAsKey } = useMetas()
 
 const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
 const nodes = ref<Node[]>([])
@@ -29,11 +29,11 @@ const populateInitalNodes = () => {
   tables.forEach((table) => {
     if (!table.id) return
 
-    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithId.value[table.id].columns.length })
+    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithIdAsKey.value[table.id].columns.length })
 
     initialNodes.value.push({
       id: table.id,
-      data: { ...metasWithId.value[table.id], showPkAndFk: config.showPkAndFk },
+      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk },
       type: 'custom',
     })
   })
@@ -43,10 +43,10 @@ const populateInitalNodes = () => {
 
 const populateEdges = () => {
   const ltarColumns = tables.reduce((acc: any[], table) => {
-    const meta = metasWithId.value[table.id!]
-    const ltarColumns = meta.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1)
+    const meta = metasWithIdAsKey.value[table.id!]
+    const columns = meta.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1)
 
-    ltarColumns.forEach((column: any) => {
+    columns.forEach((column: any) => {
       if (column.colOptions.type === 'hm') {
         acc.push(column)
       }
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index 67c5c719fc..aa9708c77b 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -10,10 +10,12 @@ export function useMetas() {
   const { tables } = useProject()
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
-  const metasWithId = computed(() => {
+
+  const metasWithIdAsKey = computed(() => {
     const idEntries = Object.entries(metas.value).filter(([k, v]) => k === v.id)
     return Object.fromEntries(idEntries)
   })
+
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
   const setMeta = async (model: any) => {
@@ -95,5 +97,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, metasWithId, removeMeta, setMeta }
+  return { getMeta, clearAllMeta, metas, metasWithIdAsKey, removeMeta, setMeta }
 }

From 9d7c704791caf634edb61959c2da79252b5ef5c5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 10:57:07 +0530
Subject: [PATCH 15/62] feat/Minor cleanup

---
 packages/nc-gui/components/dashboard/settings/Erd.vue         | 4 ++--
 packages/nc-gui/components/dashboard/settings/Modal.vue       | 3 +++
 packages/nc-gui/components/smartsheet-toolbar/Erd.vue         | 2 +-
 packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 57a6856fa0..6e865d5e39 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -42,11 +42,11 @@ const localTables = computed(() =>
 
       <div class="absolute top-1 right-8 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" />
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
         </div>
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showViews" />
+          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
           <span class="ml-2" style="font-size: 0.65rem">Show views</span>
         </div>
       </div>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 94c0478b2e..1fc4e16412 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -112,6 +112,9 @@ const tabsInfo: TabGroup = {
       erd: {
         title: t('title.erdView'),
         body: Erd,
+        onClick: () => {
+          $e('c:settings:erd')
+        },
       },
       misc: {
         title: t('general.misc'),
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
index 02f08b1afa..8ce8ae649f 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -53,7 +53,7 @@ const localTables = computed(() => (meta ? [meta.value, ...relatedTables.value]
 
       <div class="absolute top-3 right-11 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" />
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:open']" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
         </div>
       </div>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index b97d7e0068..7ca02e4186 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -216,7 +216,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               </div>
             </a-menu-item>
             <a-menu-item>
-              <div v-t="['c:erd:open']" class="py-2 flex gap-2 items-center" @click="showErd = true">
+              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center" @click="showErd = true">
                 <AcountTreeRoundedIcon class="text-gray-500" />
                 {{ $t('title.erdView') }}
               </div>

From 5fb820f878058303fb876f62e1b0f8515036aa04 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 10:59:17 +0530
Subject: [PATCH 16/62] feat/Minor cleanup

---
 packages/nc-gui/components/smartsheet-toolbar/Erd.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
index 8ce8ae649f..7abebd288b 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -53,7 +53,7 @@ const localTables = computed(() => (meta ? [meta.value, ...relatedTables.value]
 
       <div class="absolute top-3 right-11 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:open']" />
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
         </div>
       </div>

From 6346bb76e2db45c67809574ef77b10c4c8ec62e2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 14:12:51 +0530
Subject: [PATCH 17/62] feat(nc-gui): removed cdn links from stylesheet

---
 packages/nc-gui/assets/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index e2aaead0f2..f1d7e48405 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -1,6 +1,6 @@
 @import 'ant-design-vue/dist/antd.variable.min.css';
-@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@0.4.39/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@0.4.39/dist/theme-default.css';
+@import '@braks/vue-flow/dist/style.css';
+@import '@braks/vue-flow/dist/theme-default.css';
 
 :root {
   --header-height: 42px;

From 7d16074b2267b20fc05b84f63647a86cbded90cb Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 14:13:05 +0530
Subject: [PATCH 18/62] feat(nc-gui): Fixed typo

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

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index e377dd1fbb..50135a5405 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -25,7 +25,7 @@ const edges = ref<Edge[]>([])
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
 
-const populateInitalNodes = () => {
+const populateInitialNodes = () => {
   tables.forEach((table) => {
     if (!table.id) return
 
@@ -111,7 +111,7 @@ const layoutNodes = () => {
 }
 
 onBeforeMount(async () => {
-  populateInitalNodes()
+  populateInitialNodes()
   populateEdges()
   layoutNodes()
 })

From 94b57f2bb7f62ec5e291320ba69e87b6b82482ec Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 14:31:09 +0530
Subject: [PATCH 19/62] feat(nc-gui): Improved types in table node and removed
 unnecassry type addition to column type in Virtual cell

---
 packages/nc-gui/components/erd/TableNode.vue  | 26 ++++++++++---------
 .../smartsheet-header/VirtualCell.vue         |  2 +-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 236549125c..a439cb06e6 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -1,32 +1,34 @@
-<script setup>
+<script lang="ts" setup>
+import type { NodeProps } from '@braks/vue-flow'
 import { Handle, Position } from '@braks/vue-flow'
+import type { TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 
-const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-})
+interface Props extends NodeProps {
+  data: TableType & { showPkAndFk: boolean }
+}
+
+const props = defineProps<Props>()
 
 const { data } = toRefs(props)
 
-provide(MetaInj, data)
+provide(MetaInj, data as Ref<TableType>)
 
 const columns = computed(() => {
   // Hide hm ltar created for `mm` relations
-  return data.value.columns.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
+  return data.value.columns?.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
 })
 
 const pkAndFkColumns = computed(() => {
-  return columns.value.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.value.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
+  return columns.value?.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
 
-const relatedColumnId = (col) =>
+const relatedColumnId = (col: Record<string, any>) =>
   col.colOptions.type === 'mm' ? col.colOptions.fk_parent_column_id : col.colOptions.fk_child_column_id
 </script>
 
diff --git a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
index 8d4d458831..eeb5eea8eb 100644
--- a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
@@ -16,7 +16,7 @@ import {
   useVirtualCell,
 } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean | number }>()
+const props = defineProps<{ column: ColumnType; hideMenu?: boolean; required?: boolean | number }>()
 
 const { t } = useI18n()
 

From 5dc712df88f8762e58797a68d0a8813f9896c976 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 14:34:50 +0530
Subject: [PATCH 20/62] feat(nc-gui): Improved types in ErdView

---
 packages/nc-gui/components/erd/View.vue | 43 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 50135a5405..15ef98c6d0 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Edge, Node } from '@braks/vue-flow'
 import { Background, Controls, VueFlow } from '@braks/vue-flow'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import TableNode from './TableNode.vue'
@@ -42,22 +43,26 @@ const populateInitialNodes = () => {
 }
 
 const populateEdges = () => {
-  const ltarColumns = tables.reduce((acc: any[], table) => {
+  const ltarColumns = tables.reduce<ColumnType[]>((acc, table) => {
     const meta = metasWithIdAsKey.value[table.id!]
-    const columns = meta.columns.filter((column: any) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1)
+    const columns = meta.columns?.filter(
+      (column: ColumnType) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1,
+    )
 
-    columns.forEach((column: any) => {
-      if (column.colOptions.type === 'hm') {
+    columns?.forEach((column: ColumnType) => {
+      if ((column.colOptions as LinkToAnotherRecordType)?.type === 'hm') {
         acc.push(column)
       }
 
-      if (column.colOptions.type === 'mm') {
+      if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
         // Avoid duplicate mm connections
         const correspondingColumn = acc.find(
           (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,
+            (c.colOptions as LinkToAnotherRecordType | FormulaType | RollupType | LookupType).type === 'mm' &&
+            (c.colOptions as LinkToAnotherRecordType).fk_parent_column_id ===
+              (column.colOptions as LinkToAnotherRecordType).fk_child_column_id &&
+            (c.colOptions as LinkToAnotherRecordType).fk_child_column_id ===
+              (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id,
         )
         if (!correspondingColumn) {
           acc.push(column)
@@ -66,20 +71,22 @@ const populateEdges = () => {
     })
 
     return acc
-  }, [])
+  }, [] as ColumnType[])
+
+  edges.value = ltarColumns.map((column) => {
+    const source = column.fk_model_id!
+    const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
 
-  edges.value = ltarColumns.map((column: any) => {
-    const source = column.fk_model_id
-    const target = column.colOptions.fk_related_model_id
     let sourceColumnId, targetColumnId
 
-    if (column.colOptions.type === 'hm') {
-      sourceColumnId = column.colOptions.fk_child_column_id
-      targetColumnId = column.colOptions.fk_child_column_id
+    if ((column.colOptions as LinkToAnotherRecordType).type === 'hm') {
+      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
     }
-    if (column.colOptions.type === 'mm') {
-      sourceColumnId = column.colOptions.fk_parent_column_id
-      targetColumnId = column.colOptions.fk_child_column_id
+
+    if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
+      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
+      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
     }
 
     dagreGraph.setEdge(source, target)

From 3679100c4d424a57803514ac6db685bfe4c151c5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 14:37:25 +0530
Subject: [PATCH 21/62] feat(nc-gui): Added types for metasWithIdAsKey in
 useMetas

---
 packages/nc-gui/composables/useMetas.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index aa9708c77b..8f3aa68203 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -11,7 +11,7 @@ export function useMetas() {
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
 
-  const metasWithIdAsKey = computed(() => {
+  const metasWithIdAsKey = computed<Record<string, TableType>>(() => {
     const idEntries = Object.entries(metas.value).filter(([k, v]) => k === v.id)
     return Object.fromEntries(idEntries)
   })

From b24e9a4bbe40550cd458e274462a6591cbc381d6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 14:38:32 +0530
Subject: [PATCH 22/62] feat(nc-gui): Removed non required vue flow entry in
 package json

---
 packages/nc-gui/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 5c43208d33..9e260ae597 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -39,7 +39,6 @@
     "tinycolor2": "^1.4.2",
     "unique-names-generator": "^4.7.1",
     "vue-dompurify-html": "^3.0.0",
-    "vue-flow": "^0.3.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
     "vuedraggable": "^4.1.0",

From aae5c7254a0d72d18cf300adf10dd8fd141f0068 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 15:22:50 +0530
Subject: [PATCH 23/62] feat(nc-gui): Moved repeated logic of erd to ErdView
 component and renaned old ErdView as ErdSimpleView

---
 .../components/dashboard/settings/Erd.vue     |  54 +-----
 packages/nc-gui/components/erd/SimpleView.vue | 140 ++++++++++++++
 packages/nc-gui/components/erd/View.vue       | 178 ++++++------------
 .../components/smartsheet-toolbar/Erd.vue     |  57 +-----
 4 files changed, 201 insertions(+), 228 deletions(-)
 create mode 100644 packages/nc-gui/components/erd/SimpleView.vue

diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 6e865d5e39..4ccfe17aeb 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,55 +1,5 @@
-<script setup lang="ts">
-const { tables } = useProject()
-
-const { metas, getMeta } = useMetas()
-
-let isLoading = $ref(true)
-
-const config = ref({
-  showPkAndFk: true,
-  showViews: false,
-})
-
-const loadMetaOfTablesNotInMetas = async () => {
-  await Promise.all(
-    tables.value
-      .filter((table) => !metas.value[table.id!])
-      .map(async (table) => {
-        await getMeta(table.id!)
-      }),
-  )
-}
-
-onMounted(async () => {
-  await loadMetaOfTablesNotInMetas()
-  isLoading = false
-})
-
-const localTables = computed(() =>
-  tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
-)
-</script>
-
 <template>
-  <div class="w-full" style="height: 70vh">
-    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
-      <div class="flex flex-row justify-center">
-        <a-spin size="large" />
-      </div>
-    </div>
-    <div v-else class="relative h-full">
-      <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
-
-      <div class="absolute top-1 right-8 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
-        <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
-        </div>
-        <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show views</span>
-        </div>
-      </div>
-    </div>
+  <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
+    <ErdView />
   </div>
 </template>
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
new file mode 100644
index 0000000000..3d326454dd
--- /dev/null
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, Controls, VueFlow } from '@braks/vue-flow'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import dagre from 'dagre'
+import TableNode from './TableNode.vue'
+import RelationEdge from './RelationEdge.vue'
+
+interface Props {
+  tables: any[]
+  config: {
+    showPkAndFk: boolean
+    showViews: boolean
+  }
+}
+
+const { tables, config } = defineProps<Props>()
+
+const { metasWithIdAsKey } = useMetas()
+
+const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
+const nodes = ref<Node[]>([])
+const edges = ref<Edge[]>([])
+
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+const populateInitialNodes = () => {
+  tables.forEach((table) => {
+    if (!table.id) return
+
+    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithIdAsKey.value[table.id].columns.length })
+
+    initialNodes.value.push({
+      id: table.id,
+      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk },
+      type: 'custom',
+    })
+  })
+
+  dagreGraph.setGraph({ rankdir: 'LR' })
+}
+
+const populateEdges = () => {
+  const ltarColumns = tables.reduce<ColumnType[]>((acc, table) => {
+    const meta = metasWithIdAsKey.value[table.id!]
+    const columns = meta.columns?.filter(
+      (column: ColumnType) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1,
+    )
+
+    columns?.forEach((column: ColumnType) => {
+      if ((column.colOptions as LinkToAnotherRecordType)?.type === 'hm') {
+        acc.push(column)
+      }
+
+      if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
+        // Avoid duplicate mm connections
+        const correspondingColumn = acc.find(
+          (c) =>
+            (c.colOptions as LinkToAnotherRecordType | FormulaType | RollupType | LookupType).type === 'mm' &&
+            (c.colOptions as LinkToAnotherRecordType).fk_parent_column_id ===
+              (column.colOptions as LinkToAnotherRecordType).fk_child_column_id &&
+            (c.colOptions as LinkToAnotherRecordType).fk_child_column_id ===
+              (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id,
+        )
+        if (!correspondingColumn) {
+          acc.push(column)
+        }
+      }
+    })
+
+    return acc
+  }, [] as ColumnType[])
+
+  edges.value = ltarColumns.map((column) => {
+    const source = column.fk_model_id!
+    const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
+
+    let sourceColumnId, targetColumnId
+
+    if ((column.colOptions as LinkToAnotherRecordType).type === 'hm') {
+      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+    }
+
+    if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
+      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
+      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+    }
+
+    dagreGraph.setEdge(source, target)
+
+    return {
+      id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
+      source: `${source}`,
+      target: `${target}`,
+      sourceHandle: `s-${sourceColumnId}-${source}`,
+      targetHandle: `d-${targetColumnId}-${target}`,
+      type: 'custom',
+      data: {
+        column,
+      },
+    }
+  })
+}
+
+const layoutNodes = () => {
+  dagre.layout(dagreGraph)
+
+  nodes.value = initialNodes.value.flatMap((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id)
+
+    if (!nodeWithPosition) return []
+
+    return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node]
+  })
+}
+
+onBeforeMount(async () => {
+  populateInitialNodes()
+  populateEdges()
+  layoutNodes()
+})
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
+    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
+    <template #node-custom="props">
+      <TableNode :data="props.data" />
+    </template>
+
+    <template #edge-custom="props">
+      <RelationEdge v-bind="props" />
+    </template>
+    <Background />
+  </VueFlow>
+</template>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 15ef98c6d0..9b2fb590cb 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -1,140 +1,76 @@
 <script setup lang="ts">
-import type { Edge, Node } from '@braks/vue-flow'
-import { Background, Controls, VueFlow } from '@braks/vue-flow'
-import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
+import type { TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import dagre from 'dagre'
-import TableNode from './TableNode.vue'
-import RelationEdge from './RelationEdge.vue'
 
-interface Props {
-  tables: any[]
-  config: {
-    showPkAndFk: boolean
-    showViews: boolean
-  }
-}
-
-const { tables, config } = defineProps<Props>()
-
-const { metasWithIdAsKey } = useMetas()
-
-const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
-const nodes = ref<Node[]>([])
-const edges = ref<Edge[]>([])
-
-const dagreGraph = new dagre.graphlib.Graph()
-dagreGraph.setDefaultEdgeLabel(() => ({}))
+const { table } = defineProps<{ table?: TableType }>()
 
-const populateInitialNodes = () => {
-  tables.forEach((table) => {
-    if (!table.id) return
+const { tables: projectTables } = useProject()
 
-    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithIdAsKey.value[table.id].columns.length })
+const { metas, getMeta } = useMetas()
 
-    initialNodes.value.push({
-      id: table.id,
-      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk },
-      type: 'custom',
-    })
-  })
+let isLoading = $ref(true)
 
-  dagreGraph.setGraph({ rankdir: 'LR' })
-}
+const config = ref({
+  showPkAndFk: true,
+  showViews: false,
+})
 
-const populateEdges = () => {
-  const ltarColumns = tables.reduce<ColumnType[]>((acc, table) => {
-    const meta = metasWithIdAsKey.value[table.id!]
-    const columns = meta.columns?.filter(
-      (column: ColumnType) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1,
+const tables = computed(() => {
+  if (table) {
+    // if table is provided only get the table and its related tables
+    return projectTables.value.filter(
+      (t) =>
+        t.id === table.id ||
+        table.columns?.find(
+          (column) => column.uidt === UITypes.LinkToAnotherRecord && column?.colOptions?.fk_related_model_id === t.id,
+        ),
     )
+  }
 
-    columns?.forEach((column: ColumnType) => {
-      if ((column.colOptions as LinkToAnotherRecordType)?.type === 'hm') {
-        acc.push(column)
-      }
-
-      if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
-        // Avoid duplicate mm connections
-        const correspondingColumn = acc.find(
-          (c) =>
-            (c.colOptions as LinkToAnotherRecordType | FormulaType | RollupType | LookupType).type === 'mm' &&
-            (c.colOptions as LinkToAnotherRecordType).fk_parent_column_id ===
-              (column.colOptions as LinkToAnotherRecordType).fk_child_column_id &&
-            (c.colOptions as LinkToAnotherRecordType).fk_child_column_id ===
-              (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id,
-        )
-        if (!correspondingColumn) {
-          acc.push(column)
-        }
-      }
-    })
-
-    return acc
-  }, [] as ColumnType[])
-
-  edges.value = ltarColumns.map((column) => {
-    const source = column.fk_model_id!
-    const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
-
-    let sourceColumnId, targetColumnId
-
-    if ((column.colOptions as LinkToAnotherRecordType).type === 'hm') {
-      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
-      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
-    }
-
-    if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
-      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
-      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
-    }
-
-    dagreGraph.setEdge(source, target)
+  return projectTables.value
+})
 
-    return {
-      id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
-      source: `${source}`,
-      target: `${target}`,
-      sourceHandle: `s-${sourceColumnId}-${source}`,
-      targetHandle: `d-${targetColumnId}-${target}`,
-      type: 'custom',
-      data: {
-        column,
-      },
-    }
-  })
+const loadMetaOfTablesNotInMetas = async () => {
+  await Promise.all(
+    tables.value
+      .filter((table) => !metas.value[table.id!])
+      .map(async (table) => {
+        await getMeta(table.id!)
+      }),
+  )
 }
 
-const layoutNodes = () => {
-  dagre.layout(dagreGraph)
-
-  nodes.value = initialNodes.value.flatMap((node) => {
-    const nodeWithPosition = dagreGraph.node(node.id)
+onMounted(async () => {
+  await loadMetaOfTablesNotInMetas()
 
-    if (!nodeWithPosition) return []
-
-    return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node]
-  })
-}
-
-onBeforeMount(async () => {
-  populateInitialNodes()
-  populateEdges()
-  layoutNodes()
+  isLoading = false
 })
+
+const tablesFilteredWithConfig = computed(() =>
+  tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
+)
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
-    <Controls class="!left-auto right-2 !top-2 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
-
-    <template #node-custom="props">
-      <TableNode :data="props.data" />
-    </template>
-
-    <template #edge-custom="props">
-      <RelationEdge v-bind="props" />
-    </template>
-    <Background />
-  </VueFlow>
+  <div class="w-full" style="height: inherit">
+    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+      <div class="flex flex-row justify-center">
+        <a-spin size="large" />
+      </div>
+    </div>
+    <div v-else class="relative h-full">
+      <ErdSimpleView :key="JSON.stringify(config)" :tables="tablesFilteredWithConfig" :config="config" />
+
+      <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
+          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+        </div>
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
+          <span class="ml-2" style="font-size: 0.65rem">Show views</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
index 7abebd288b..775dea64c5 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -1,62 +1,9 @@
 <script lang="ts" setup>
-import { UITypes } from 'nocodb-sdk'
-
-const { tables } = useProject()
-
-const { metas, getMeta } = useMetas()
 const meta = inject(MetaInj)
-
-let isLoading = $ref(true)
-
-const config = ref({
-  showPkAndFk: true,
-  showViews: false,
-})
-
-const relatedTables = computed(() =>
-  tables.value.filter(
-    (table) =>
-      meta?.value.columns &&
-      meta.value.columns.find(
-        (column) => column.uidt === UITypes.LinkToAnotherRecord && column?.colOptions?.fk_related_model_id === table.id,
-      ),
-  ),
-)
-
-const loadMetaOfTablesNotInMetas = async () => {
-  await Promise.all(
-    relatedTables.value
-      .filter((table) => !metas.value[table.id!])
-      .map(async (table) => {
-        await getMeta(table.id!)
-      }),
-  )
-}
-
-onMounted(async () => {
-  await loadMetaOfTablesNotInMetas()
-  isLoading = false
-})
-
-const localTables = computed(() => (meta ? [meta.value, ...relatedTables.value] : []))
 </script>
 
 <template>
-  <div class="w-full" style="height: 70vh">
-    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
-      <div class="flex flex-row justify-center">
-        <a-spin size="large" />
-      </div>
-    </div>
-    <div v-else class="relative h-full">
-      <ErdView :key="JSON.stringify(config)" :tables="localTables" :config="config" />
-
-      <div class="absolute top-3 right-11 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
-        <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
-        </div>
-      </div>
-    </div>
+  <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
+    <ErdView :table="meta" />
   </div>
 </template>

From 55a78a74a5c28dbb73dd38aeb58153394a8d92cb Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 15:48:48 +0530
Subject: [PATCH 24/62] feat(nc-gui): Added hide all columns to ERD

---
 packages/nc-gui/components/erd/SimpleView.vue |  9 +++++++--
 packages/nc-gui/components/erd/TableNode.vue  | 16 +++++++++++-----
 packages/nc-gui/components/erd/View.vue       | 14 ++++++++++++++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 3d326454dd..6ee8767c68 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -12,6 +12,7 @@ interface Props {
   config: {
     showPkAndFk: boolean
     showViews: boolean
+    hideAllColumns: boolean
   }
 }
 
@@ -30,11 +31,15 @@ const populateInitialNodes = () => {
   tables.forEach((table) => {
     if (!table.id) return
 
-    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithIdAsKey.value[table.id].columns.length })
+    const columns = metasWithIdAsKey.value[table.id].columns?.filter(
+      (col) => !config.hideAllColumns || (config.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    )
+
+    dagreGraph.setNode(table.id, { width: 250, height: 50 * columns.length })
 
     initialNodes.value.push({
       id: table.id,
-      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk },
+      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, hideAllColumns: config.hideAllColumns },
       type: 'custom',
     })
   })
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index a439cb06e6..8900fc670a 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@braks/vue-flow'
 import { Handle, Position } from '@braks/vue-flow'
-import type { TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 
 interface Props extends NodeProps {
-  data: TableType & { showPkAndFk: boolean }
+  data: TableType & { showPkAndFk: boolean; hideAllColumns: boolean }
 }
 
 const props = defineProps<Props>()
@@ -21,11 +21,17 @@ const columns = computed(() => {
 })
 
 const pkAndFkColumns = computed(() => {
-  return columns.value?.filter(() => data.value.showPkAndFk).filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
+  return columns.value
+    ?.filter(() => data.value.showPkAndFk && !data.value.hideAllColumns)
+    .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
 })
 
 const nonPkColumns = computed(() => {
-  return columns.value?.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
+  return columns.value
+    ?.filter(
+      (col: ColumnType) => !data.value.hideAllColumns || (data.value.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    )
+    .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
 
 const relatedColumnId = (col: Record<string, any>) =>
@@ -34,7 +40,7 @@ const relatedColumnId = (col: Record<string, any>) =>
 
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
-    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full pl-3 bg-gray-100 font-semibold">
+    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full px-3 bg-gray-100 font-semibold">
       {{ data.title }}
     </div>
     <div>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 9b2fb590cb..c822801701 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -13,6 +13,7 @@ let isLoading = $ref(true)
 const config = ref({
   showPkAndFk: true,
   showViews: false,
+  hideAllColumns: false,
 })
 
 const tables = computed(() => {
@@ -49,6 +50,15 @@ onMounted(async () => {
 const tablesFilteredWithConfig = computed(() =>
   tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
 )
+
+watch(
+  () => config.value.hideAllColumns,
+  () => {
+    if (config.value.hideAllColumns) {
+      config.value.showPkAndFk = false
+    }
+  },
+)
 </script>
 
 <template>
@@ -70,6 +80,10 @@ const tablesFilteredWithConfig = computed(() =>
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
           <span class="ml-2" style="font-size: 0.65rem">Show views</span>
         </div>
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.hideAllColumns" v-e="['c:erd:hideAllColumns']" />
+          <span class="ml-2" style="font-size: 0.65rem">Hide all columns</span>
+        </div>
       </div>
     </div>
   </div>

From ffcc61e7eb595fa5beb3101f3ad7a2fa6a60fdaa Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 17:49:05 +0530
Subject: [PATCH 25/62] feat(nc-gui): Added view title to ERD view of a grid

---
 .../nc-gui/components/smartsheet-toolbar/ViewActions.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index 7ca02e4186..a498a961d8 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -230,7 +230,13 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal v-model:visible="showErd" size="small" :title="$t('title.erdView')" :footer="null" width="max(900px,60vw)">
+    <a-modal
+      v-model:visible="showErd"
+      size="small"
+      :title="`${$t('title.erdView')}: ${selectedView?.title}`"
+      :footer="null"
+      width="max(900px,60vw)"
+    >
       <SmartsheetToolbarErd />
     </a-modal>
 

From 3cc285ff76b0b9f604741aef7da3103fe30e5d3e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 18:13:39 +0530
Subject: [PATCH 26/62] feat(nc-gui): Removed junction table showing when show
 m2m table option is selected

---
 packages/nc-gui/components/erd/View.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index c822801701..58b28323c3 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -48,7 +48,9 @@ onMounted(async () => {
 })
 
 const tablesFilteredWithConfig = computed(() =>
-  tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
+  tables.value
+    .filter((table) => !table.mm)
+    .filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
 )
 
 watch(

From 83451b863aec49b92e702a72f4c21bac8eb22365 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 18:13:55 +0530
Subject: [PATCH 27/62] feat(nc-gui): Removed vue flow from package json lock

---
 packages/nc-gui/package-lock.json | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 2b29a07721..c9b5e47c12 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -30,7 +30,6 @@
         "tinycolor2": "^1.4.2",
         "unique-names-generator": "^4.7.1",
         "vue-dompurify-html": "^3.0.0",
-        "vue-flow": "^0.3.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.2.2",
         "vuedraggable": "^4.1.0",
@@ -14850,11 +14849,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/vue-flow": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/vue-flow/-/vue-flow-0.3.0.tgz",
-      "integrity": "sha512-J/I6z8ErkWiPCEicdZXTUEBt5MfW1GoFNs2/spGSLuzBKAOUF/MlghKAZZ4feDDjmpg/B00EviSG1fJ0PIGwVg=="
-    },
     "node_modules/vue-github-button": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
@@ -26452,11 +26446,6 @@
         }
       }
     },
-    "vue-flow": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/vue-flow/-/vue-flow-0.3.0.tgz",
-      "integrity": "sha512-J/I6z8ErkWiPCEicdZXTUEBt5MfW1GoFNs2/spGSLuzBKAOUF/MlghKAZZ4feDDjmpg/B00EviSG1fJ0PIGwVg=="
-    },
     "vue-github-button": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",

From 56916a8490f45e6f8232c73f1a1886dbfc39649e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 21:42:56 +0530
Subject: [PATCH 28/62] feat(nc-gui): UI fixes to ERD, added prefix icons to
 ERD and added mm prop to TableType to sdk

---
 packages/nc-gui/components/erd/SimpleView.vue | 23 +++++++++++++++----
 packages/nc-gui/components/erd/TableNode.vue  | 18 +++++++++++----
 packages/nc-gui/components/erd/View.vue       | 18 +++++++--------
 packages/nocodb-sdk/src/lib/Api.ts            |  1 +
 scripts/sdk/swagger.json                      |  6 +++++
 5 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 6ee8767c68..fc3dd33d28 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -6,13 +6,15 @@ import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import TableNode from './TableNode.vue'
 import RelationEdge from './RelationEdge.vue'
+import MdiView from '~icons/mdi/eye-circle-outline'
+import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props {
   tables: any[]
   config: {
     showPkAndFk: boolean
     showViews: boolean
-    hideAllColumns: boolean
+    showAllColumns: boolean
   }
 }
 
@@ -31,15 +33,15 @@ const populateInitialNodes = () => {
   tables.forEach((table) => {
     if (!table.id) return
 
-    const columns = metasWithIdAsKey.value[table.id].columns?.filter(
-      (col) => !config.hideAllColumns || (config.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    const columns = metasWithIdAsKey.value[table.id].columns!.filter(
+      (col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
     )
 
     dagreGraph.setNode(table.id, { width: 250, height: 50 * columns.length })
 
     initialNodes.value.push({
       id: table.id,
-      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, hideAllColumns: config.hideAllColumns },
+      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, showAllColumns: config.showAllColumns },
       type: 'custom',
     })
   })
@@ -141,5 +143,18 @@ onBeforeMount(async () => {
       <RelationEdge v-bind="props" />
     </template>
     <Background />
+    <div
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
+      style="font-size: 0.6rem"
+    >
+      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+        <MdiTableLarge class="text-primary" />
+        <div>Table</div>
+      </div>
+      <div class="flex flex-row items-center space-x-1 pt-1">
+        <MdiView class="text-primary" />
+        <div>SQL View</div>
+      </div>
+    </div>
   </VueFlow>
 </template>
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 8900fc670a..074819fbd1 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -4,9 +4,11 @@ import { Handle, Position } from '@braks/vue-flow'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import MdiView from '~icons/mdi/eye-circle-outline'
+import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props extends NodeProps {
-  data: TableType & { showPkAndFk: boolean; hideAllColumns: boolean }
+  data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
 }
 
 const props = defineProps<Props>()
@@ -22,14 +24,14 @@ const columns = computed(() => {
 
 const pkAndFkColumns = computed(() => {
   return columns.value
-    ?.filter(() => data.value.showPkAndFk && !data.value.hideAllColumns)
+    ?.filter(() => data.value.showPkAndFk && data.value.showAllColumns)
     .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
 })
 
 const nonPkColumns = computed(() => {
   return columns.value
     ?.filter(
-      (col: ColumnType) => !data.value.hideAllColumns || (data.value.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+      (col: ColumnType) => data.value.showAllColumns || (!data.value.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
     )
     .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
@@ -40,8 +42,14 @@ const relatedColumnId = (col: Record<string, any>) =>
 
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
-    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full px-3 bg-gray-100 font-semibold">
-      {{ data.title }}
+    <div
+      class="text-gray-600 text-md py-2 border-b-1 border-gray-200 w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
+    >
+      <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
+      <MdiView v-else class="text-primary" />
+      <div class="flex pl-1.5">
+        {{ data.title }}
+      </div>
     </div>
     <div>
       <div class="keys mb-1">
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 58b28323c3..2d510f1ffa 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -13,7 +13,7 @@ let isLoading = $ref(true)
 const config = ref({
   showPkAndFk: true,
   showViews: false,
-  hideAllColumns: false,
+  showAllColumns: true,
 })
 
 const tables = computed(() => {
@@ -54,11 +54,9 @@ const tablesFilteredWithConfig = computed(() =>
 )
 
 watch(
-  () => config.value.hideAllColumns,
+  () => config.value.showAllColumns,
   () => {
-    if (config.value.hideAllColumns) {
-      config.value.showPkAndFk = false
-    }
+    config.value.showPkAndFk = config.value.showAllColumns
   },
 )
 </script>
@@ -74,17 +72,17 @@ watch(
       <ErdSimpleView :key="JSON.stringify(config)" :tables="tablesFilteredWithConfig" :config="config" />
 
       <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
+          <span class="ml-2" style="font-size: 0.65rem">Show columns</span>
+        </div>
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
         </div>
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show views</span>
-        </div>
-        <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.hideAllColumns" v-e="['c:erd:hideAllColumns']" />
-          <span class="ml-2" style="font-size: 0.65rem">Hide all columns</span>
+          <span class="ml-2" style="font-size: 0.65rem">Show SQL views</span>
         </div>
       </div>
     </div>
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 6fdf188825..6665a3b9eb 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -122,6 +122,7 @@ export interface TableType {
   columnsById?: object;
   slug?: string;
   project_id?: string;
+  mm?: boolean | number;
 }
 
 export interface ViewType {
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 5d11767ceb..c0f2df3452 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6069,6 +6069,12 @@
           },
           "project_id": {
             "type": "string"
+          },
+          "mm": {
+            "type": [
+              "boolean",
+              "number"
+            ]
           }
         },
         "required": [

From 83a8e87fafdaa72761845cfbd93175de1d3ede77 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 23:47:11 +0530
Subject: [PATCH 29/62] feat(nc-gui): ERD now resets on metas changes

---
 packages/nc-gui/components/erd/View.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 2d510f1ffa..614b5820a8 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -9,6 +9,7 @@ const { tables: projectTables } = useProject()
 const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
+const erdKey = ref(0)
 
 const config = ref({
   showPkAndFk: true,
@@ -59,6 +60,14 @@ watch(
     config.value.showPkAndFk = config.value.showAllColumns
   },
 )
+
+watch(metas, () => {
+  erdKey.value++
+})
+
+watch(config, () => {
+  erdKey.value++
+})
 </script>
 
 <template>
@@ -69,7 +78,7 @@ watch(
       </div>
     </div>
     <div v-else class="relative h-full">
-      <ErdSimpleView :key="JSON.stringify(config)" :tables="tablesFilteredWithConfig" :config="config" />
+      <ErdSimpleView :key="erdKey" :tables="tablesFilteredWithConfig" :config="config" />
 
       <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
@@ -80,7 +89,7 @@ watch(
           <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
         </div>
-        <div class="flex flex-row items-center">
+        <div v-if="!table" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
           <span class="ml-2" style="font-size: 0.65rem">Show SQL views</span>
         </div>

From 5ac96525f921ff0ace25cbe373838a2d6634ddef Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 10:30:41 +0530
Subject: [PATCH 30/62] feat(nc-gui): Improved layouting and fixed issue with
 config not working in ERD

---
 packages/nc-gui/components/erd/SimpleView.vue | 32 +++++++++++++++++++
 packages/nc-gui/components/erd/View.vue       | 12 ++++---
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index fc3dd33d28..412f4f7b71 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -112,7 +112,39 @@ const populateEdges = () => {
   })
 }
 
+const connectNonConnectedNodes = () => {
+  const connectedNodes = new Set<string>()
+  edges.value.forEach((edge) => {
+    connectedNodes.add(edge.source)
+    connectedNodes.add(edge.target)
+  })
+
+  const nonConnectedNodes = tables.filter((table) => !connectedNodes.has(table.id!))
+
+  if (nonConnectedNodes.length === 0) return
+
+  if (nonConnectedNodes.length === 1) {
+    const firstTable = tables.find((table) => table.type === 'table' && table.id !== nonConnectedNodes[0].id)
+    if (!firstTable) return
+
+    dagreGraph.setEdge(nonConnectedNodes[0].id, firstTable.id)
+    return
+  }
+
+  const firstNode = nonConnectedNodes[0]
+  nonConnectedNodes.forEach((node, index) => {
+    if (index === 0) return
+
+    const source = firstNode.id
+    const target = node.id
+
+    dagreGraph.setEdge(source, target)
+  })
+}
+
 const layoutNodes = () => {
+  connectNonConnectedNodes()
+
   dagre.layout(dagreGraph)
 
   nodes.value = initialNodes.value.flatMap((node) => {
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 614b5820a8..a89bba6361 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -62,12 +62,16 @@ watch(
 )
 
 watch(metas, () => {
-  erdKey.value++
+  erdKey.value = erdKey.value + 1
 })
 
-watch(config, () => {
-  erdKey.value++
-})
+watch(
+  config,
+  () => {
+    erdKey.value = erdKey.value + 1
+  },
+  { deep: true },
+)
 </script>
 
 <template>

From f9224f755857692ff137cdebb190c2f4c6819c50 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 11:50:18 +0530
Subject: [PATCH 31/62] feat(nc-gui): Self relation is now handled and UI
 improved

---
 .../nc-gui/components/erd/RelationEdge.vue    | 17 +++++++++++-----
 packages/nc-gui/components/erd/SimpleView.vue | 20 +++++++++++++++----
 packages/nc-gui/components/erd/TableNode.vue  |  9 ++++++---
 packages/nc-gui/components/erd/View.vue       |  1 +
 4 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index b8baa47910..decd77457f 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -53,20 +53,27 @@ const props = defineProps({
   },
 })
 
-const { column } = toRefs(props.data)
+const { column, isSelfRelation } = toRefs(props.data)
 
 const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm')
 
-const edgePath = computed(() =>
-  getBezierPath({
+const edgePath = computed(() => {
+  if (isSelfRelation.value) {
+    const { sourceX, sourceY, targetX, targetY } = props
+    const radiusX = (sourceX - targetX) * 0.6
+    const radiusY = 50
+    return `M ${sourceX} ${sourceY} A ${radiusX} ${radiusY} 0 1 0 ${targetX} ${targetY}`
+  }
+
+  return getBezierPath({
     sourceX: props.sourceX,
     sourceY: props.sourceY,
     sourcePosition: props.sourcePosition,
     targetX: props.targetX,
     targetY: props.targetY,
     targetPosition: props.targetPosition,
-  }),
-)
+  })
+})
 </script>
 
 <script>
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 412f4f7b71..b5a0f32ed5 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -15,6 +15,7 @@ interface Props {
     showPkAndFk: boolean
     showViews: boolean
     showAllColumns: boolean
+    singleTableMode: boolean
   }
 }
 
@@ -25,6 +26,7 @@ const { metasWithIdAsKey } = useMetas()
 const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
+const vueFlowKey = ref(0)
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -96,7 +98,15 @@ const populateEdges = () => {
       targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
     }
 
-    dagreGraph.setEdge(source, target)
+    if (source !== target) dagreGraph.setEdge(source, target)
+
+    // todo: In the case of one self relation and one has many between 2 tables in only single table view, edges are getting messed up
+    if (source === target) {
+      // rerender after 200ms
+      setTimeout(() => {
+        vueFlowKey.value = 1
+      }, 200)
+    }
 
     return {
       id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
@@ -107,6 +117,7 @@ const populateEdges = () => {
       type: 'custom',
       data: {
         column,
+        isSelfRelation: source === target && sourceColumnId === targetColumnId,
       },
     }
   })
@@ -143,7 +154,7 @@ const connectNonConnectedNodes = () => {
 }
 
 const layoutNodes = () => {
-  connectNonConnectedNodes()
+  if (!config.singleTableMode) connectNonConnectedNodes()
 
   dagre.layout(dagreGraph)
 
@@ -156,7 +167,7 @@ const layoutNodes = () => {
   })
 }
 
-onBeforeMount(async () => {
+onBeforeMount(() => {
   populateInitialNodes()
   populateEdges()
   layoutNodes()
@@ -164,7 +175,7 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
+  <VueFlow :key="vueFlowKey" :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
     <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="props">
@@ -176,6 +187,7 @@ onBeforeMount(async () => {
     </template>
     <Background />
     <div
+      v-if="!config.singleTableMode"
       class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
       style="font-size: 0.6rem"
     >
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 074819fbd1..78f9dfb0b3 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -43,7 +43,7 @@ const relatedColumnId = (col: Record<string, any>) =>
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
     <div
-      class="text-gray-600 text-md py-2 border-b-1 border-gray-200 w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
+      class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
     >
       <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
       <MdiView v-else class="text-primary" />
@@ -57,8 +57,11 @@ const relatedColumnId = (col: Record<string, any>) =>
           <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
         </div>
       </div>
-      <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-for="(col, index) in nonPkColumns" :key="col.title">
+        <div
+          class="w-full h-full flex items-center min-w-32 border-gray-100 py-2 px-1"
+          :class="index + 1 === nonPkColumns!.length ? 'rounded-b-lg' : 'border-b-1'"
+        >
           <div v-if="col.uidt === UITypes.LinkToAnotherRecord" class="flex relative w-full">
             <Handle
               :id="`s-${relatedColumnId(col)}-${data.id}`"
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index a89bba6361..9510e98f4e 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -15,6 +15,7 @@ const config = ref({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
+  singleTableMode: !!table,
 })
 
 const tables = computed(() => {

From 023cb537ec538b64f9ebfde9e11bacae3dfb0544 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 11:53:19 +0530
Subject: [PATCH 32/62] feat(nc-gui): Package json lock of sdk reverted

---
 packages/nocodb-sdk/package-lock.json | 664 ++++++++++++++++++++++++++
 1 file changed, 664 insertions(+)

diff --git a/packages/nocodb-sdk/package-lock.json b/packages/nocodb-sdk/package-lock.json
index 6d5f785843..6fbe1b661d 100644
--- a/packages/nocodb-sdk/package-lock.json
+++ b/packages/nocodb-sdk/package-lock.json
@@ -234,6 +234,15 @@
         "vscode-textmate": "5.2.0"
       }
     },
+    "node_modules/pkg-conf/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/swagger-typescript-api": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/swagger-typescript-api/-/swagger-typescript-api-10.0.1.tgz",
@@ -411,6 +420,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oas-resolver/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
       "version": "5.3.1",
       "dev": true,
@@ -434,6 +452,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
       "dev": true,
@@ -783,6 +810,12 @@
         "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
       }
     },
+    "node_modules/commitizen/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
     "node_modules/decamelize": {
       "version": "1.2.0",
       "dev": true,
@@ -1195,6 +1228,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/git-semver-tags/node_modules/normalize-package-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "2.2.1",
       "dev": true,
@@ -1406,6 +1454,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/pkg-conf/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@babel/core/node_modules/json5": {
       "version": "2.2.1",
       "dev": true,
@@ -1436,6 +1497,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/git-semver-tags/node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prettier": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -1565,6 +1638,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/escape-goat": {
       "version": "2.1.1",
       "dev": true,
@@ -1666,6 +1751,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standard-version/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cosmiconfig-typescript-loader": {
       "version": "1.0.6",
       "dev": true,
@@ -2156,6 +2253,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/nyc/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
     "node_modules/@babel/template": {
       "version": "7.16.7",
       "dev": true,
@@ -2539,6 +2642,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typedoc/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/trim-repeated": {
       "version": "1.0.0",
       "dev": true,
@@ -2661,6 +2773,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "dev": true,
@@ -2874,6 +2998,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/git-semver-tags/node_modules/normalize-package-data/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cspell-io": {
       "version": "4.1.7",
       "dev": true,
@@ -3092,6 +3231,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/commitizen/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/git-raw-commits/node_modules/meow": {
       "version": "8.1.2",
       "dev": true,
@@ -3558,6 +3709,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standard-version/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
     "node_modules/@cspell/dict-cpp": {
       "version": "1.1.40",
       "dev": true,
@@ -3767,6 +3927,18 @@
         "node": "*"
       }
     },
+    "node_modules/inquirer/node_modules/onetime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+      "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/expand-tilde": {
       "version": "2.0.2",
       "dev": true,
@@ -4224,6 +4396,15 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/commitizen/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "dev": true,
@@ -4266,6 +4447,20 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/commitizen/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.0",
       "dev": true,
@@ -4673,6 +4868,15 @@
         }
       }
     },
+    "node_modules/commitizen/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/serialize-error/node_modules/type-fest": {
       "version": "0.13.1",
       "dev": true,
@@ -5144,6 +5348,15 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "dev": true,
@@ -5160,6 +5373,21 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/standard-version/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-module-utils/node_modules/p-limit": {
       "version": "1.3.0",
       "dev": true,
@@ -5762,6 +5990,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/oas-resolver/node_modules/yargs": {
       "version": "17.5.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
@@ -5902,6 +6142,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prettier-linter-helpers": {
       "version": "1.0.0",
       "dev": true,
@@ -6127,6 +6376,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/ignore-walk": {
       "version": "3.0.4",
       "dev": true,
@@ -6178,6 +6436,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/inquirer/node_modules/mimic-fn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.0.1",
       "dev": true,
@@ -6461,6 +6728,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "dev": true,
@@ -7101,6 +7381,18 @@
         "node": ">=4.8"
       }
     },
+    "node_modules/standard-version/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/spawn-wrap": {
       "version": "2.0.0",
       "dev": true,
@@ -7133,6 +7425,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "2.0.1",
       "dev": true,
@@ -7210,6 +7514,21 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/standard-version/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@nodelib/fs.walk": {
       "version": "1.2.8",
       "dev": true,
@@ -7230,6 +7549,18 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/conventional-changelog-writer/node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-plugin-import/node_modules/debug": {
       "version": "2.6.9",
       "dev": true,
@@ -7411,6 +7742,15 @@
         "node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14"
       }
     },
+    "node_modules/commitizen/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
     "node_modules/oas-kit-common": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/oas-kit-common/-/oas-kit-common-1.0.8.tgz",
@@ -7463,6 +7803,21 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/standard-version/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "dev": true,
@@ -8451,6 +8806,15 @@
         "ini": "^1.3.2"
       }
     },
+    "node_modules/standard-version/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/semver-diff": {
       "version": "3.1.1",
       "dev": true,
@@ -8823,6 +9187,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/standard-version/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
     "node_modules/eslint/node_modules/@babel/code-frame": {
       "version": "7.12.11",
       "dev": true,
@@ -9475,6 +9845,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pkg-conf/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/normalize-package-data/node_modules/semver": {
       "version": "5.7.1",
       "dev": true,
@@ -9598,6 +9980,18 @@
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/commitizen/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
     }
   },
   "dependencies": {
@@ -10468,6 +10862,12 @@
       "version": "2.1.0",
       "dev": true
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
     "array.prototype.flat": {
       "version": "1.2.5",
       "dev": true,
@@ -10928,6 +11328,41 @@
         "strip-json-comments": "3.0.1"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
         "cz-conventional-changelog": {
           "version": "3.2.0",
           "dev": true,
@@ -10941,6 +11376,12 @@
             "word-wrap": "^1.0.3"
           }
         },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
         "fs-extra": {
           "version": "8.1.0",
           "dev": true,
@@ -10962,6 +11403,12 @@
             "path-is-absolute": "^1.0.0"
           }
         },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
         "jsonfile": {
           "version": "4.0.0",
           "dev": true,
@@ -10981,6 +11428,15 @@
           "version": "3.0.1",
           "dev": true
         },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
         "universalify": {
           "version": "0.1.2",
           "dev": true
@@ -11139,6 +11595,16 @@
             "strip-bom": "^3.0.0"
           }
         },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
         "normalize-package-data": {
           "version": "3.0.3",
           "dev": true,
@@ -11149,6 +11615,36 @@
             "validate-npm-package-license": "^3.0.1"
           }
         },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
+        },
         "path-type": {
           "version": "3.0.0",
           "dev": true,
@@ -11254,6 +11750,15 @@
         "through2": "^4.0.0"
       },
       "dependencies": {
+        "hosted-git-info": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+          "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
         "meow": {
           "version": "8.1.2",
           "dev": true,
@@ -11648,6 +12153,12 @@
             "color-name": "1.1.3"
           }
         },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
         "escape-string-regexp": {
           "version": "1.0.5",
           "dev": true
@@ -12614,6 +13125,15 @@
         "globby": "^6.1.0"
       },
       "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
         "commander": {
           "version": "2.20.3",
           "dev": true
@@ -12638,6 +13158,15 @@
             "pinkie-promise": "^2.0.0"
           }
         },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
         "pify": {
           "version": "2.3.0",
           "dev": true
@@ -12717,6 +13246,15 @@
         "semver": "^6.0.0"
       },
       "dependencies": {
+        "hosted-git-info": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+          "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
         "meow": {
           "version": "8.1.2",
           "dev": true,
@@ -12734,6 +13272,29 @@
             "yargs-parser": "^20.2.3"
           }
         },
+        "normalize-package-data": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+          "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+          "dev": true,
+          "requires": {
+            "hosted-git-info": "^4.0.1",
+            "is-core-module": "^2.5.0",
+            "semver": "^7.3.4",
+            "validate-npm-package-license": "^3.0.1"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "7.3.7",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+              "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+              "dev": true,
+              "requires": {
+                "lru-cache": "^6.0.0"
+              }
+            }
+          }
+        },
         "semver": {
           "version": "6.3.0",
           "dev": true
@@ -14089,6 +14650,12 @@
             "strip-ansi": "^6.0.0"
           }
         },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+          "dev": true
+        },
         "yargs": {
           "version": "15.4.1",
           "dev": true,
@@ -14155,6 +14722,12 @@
             "y18n": "^5.0.5",
             "yargs-parser": "^21.0.0"
           }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+          "dev": true
         }
       }
     },
@@ -14455,6 +15028,31 @@
           "requires": {
             "locate-path": "^3.0.0"
           }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
         }
       }
     },
@@ -15033,6 +15631,15 @@
         "yargs": "^16.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
         "chalk": {
           "version": "2.4.2",
           "dev": true,
@@ -15049,6 +15656,48 @@
             "locate-path": "^6.0.0",
             "path-exists": "^4.0.0"
           }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -15528,6 +16177,15 @@
         "shiki": "^0.10.1"
       },
       "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
         "glob": {
           "version": "8.0.3",
           "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
@@ -15804,6 +16462,12 @@
     "yn": {
       "version": "3.1.1",
       "dev": true
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
     }
   }
 }

From e755edd98b9619243d638f2caf9eccd5f8e851ea Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 12:07:13 +0530
Subject: [PATCH 33/62] feat(nc-gui): Added i18n to ERD and added option to
 show MM tables

---
 packages/nc-gui/components/erd/SimpleView.vue |  4 ++--
 packages/nc-gui/components/erd/View.vue       | 16 ++++++++++++----
 packages/nc-gui/lang/en.json                  | 11 +++++++++--
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index b5a0f32ed5..6723b15d7d 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -193,11 +193,11 @@ onBeforeMount(() => {
     >
       <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
         <MdiTableLarge class="text-primary" />
-        <div>Table</div>
+        <div>{{ $t('objects.table') }}</div>
       </div>
       <div class="flex flex-row items-center space-x-1 pt-1">
         <MdiView class="text-primary" />
-        <div>SQL View</div>
+        <div>{{ $t('objects.sqlVIew') }}</div>
       </div>
     </div>
   </VueFlow>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 9510e98f4e..f366d8c053 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -10,12 +10,14 @@ const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
 const erdKey = ref(0)
+const showMMOption = ref(false)
 
 const config = ref({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
   singleTableMode: !!table,
+  showMMTables: false,
 })
 
 const tables = computed(() => {
@@ -51,7 +53,7 @@ onMounted(async () => {
 
 const tablesFilteredWithConfig = computed(() =>
   tables.value
-    .filter((table) => !table.mm)
+    .filter((table) => config.value.showMMTables || (!config.value.showMMTables && !table.mm))
     .filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
 )
 
@@ -88,15 +90,21 @@ watch(
       <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show columns</span>
+          <span class="ml-2 select-none" style="font-size: 0.65rem" @dblclick="showMMOption = true">{{
+            $t('activity.erd.showColumns')
+          }}</span>
         </div>
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
+          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show SQL views</span>
+          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showSqlViews') }}</span>
+        </div>
+        <div v-if="!table && showMMOption" class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" />
+          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
       </div>
     </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 2bb9a9d306..e453d5d676 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -103,7 +103,8 @@
       "editor": "Editor",
       "commenter": "Commenter",
       "viewer": "Viewer"
-    }
+    },
+    "sqlVIew": "SQL View"
   },
   "datatype": {
     "ID": "ID",
@@ -407,7 +408,13 @@
     "linkRecord": "Link record",
     "addNewRecord": "Add new record",
     "useConnectionUrl": "Use Connection URL",
-    "toggleCommentsDraw": "Toggle comments draw"
+    "toggleCommentsDraw": "Toggle comments draw",
+    "erd": {
+      "showColumns": "Show Columns",
+      "showPkAndFk": "Show Primary and Foreign Keys",
+      "showSqlViews": "Show SQL Views",
+      "showMMTables": "Show MM tables"
+    }
   },
   "tooltip": {
     "saveChanges": "Save changes",

From 4d5496d1f8aa19bb1254669b37f68692fecb3c5f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 16:52:05 +0530
Subject: [PATCH 34/62] feat(nc-gui): ERD individual table view fixed for a mm
 table

---
 packages/nc-gui/components/erd/View.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index f366d8c053..40fb83614a 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -53,8 +53,14 @@ onMounted(async () => {
 
 const tablesFilteredWithConfig = computed(() =>
   tables.value
-    .filter((table) => config.value.showMMTables || (!config.value.showMMTables && !table.mm))
-    .filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
+    .filter(
+      (t) =>
+        config.value.showMMTables ||
+        (!config.value.showMMTables && !t.mm) ||
+        // Show mm table if its the selected table
+        t.id === table?.id,
+    )
+    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews),
 )
 
 watch(

From f89ffb6c1ed9631abeac9f3ac00c2c9e62da3ba5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 17:18:14 +0530
Subject: [PATCH 35/62] feat(nc-gui): Added alt+hover to show table name in ERD

---
 packages/nc-gui/components/erd/TableNode.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 78f9dfb0b3..c9aa469b69 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -42,15 +42,18 @@ const relatedColumnId = (col: Record<string, any>) =>
 
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
-    <div
-      class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
-    >
-      <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
-      <MdiView v-else class="text-primary" />
-      <div class="flex pl-1.5">
-        {{ data.title }}
+    <GeneralTooltip modifier-key="Alt">
+      <template #title> {{ data.table_name }} </template>
+      <div
+        class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
+      >
+        <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
+        <MdiView v-else class="text-primary" />
+        <div class="flex pl-1.5">
+          {{ data.title }}
+        </div>
       </div>
-    </div>
+    </GeneralTooltip>
     <div>
       <div class="keys mb-1">
         <div v-for="col in pkAndFkColumns" :key="col.title" class="w-full border-b-1 py-2 border-gray-100">

From 815a9ea10255e576e5aa268d4208af16818cf300 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 18:56:40 +0530
Subject: [PATCH 36/62] feat(nc-gui): Added option to show junction table name
 in ERD

---
 packages/nc-gui/components.d.ts               |  1 +
 .../nc-gui/components/erd/RelationEdge.vue    | 25 +++++++++++++++++--
 packages/nc-gui/components/erd/SimpleView.vue |  7 +++++-
 packages/nc-gui/components/erd/View.vue       | 11 +++++---
 packages/nc-gui/lang/en.json                  |  3 ++-
 5 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 286b2ef7c3..64752f681a 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -141,6 +141,7 @@ declare module '@vue/runtime-core' {
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
     MdiExport: typeof import('~icons/mdi/export')['default']
+    MdiEyeCircleOutline: typeof import('~icons/mdi/eye-circle-outline')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index decd77457f..38e6568fa5 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { getBezierPath } from '@braks/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -53,7 +53,7 @@ const props = defineProps({
   },
 })
 
-const { column, isSelfRelation } = toRefs(props.data)
+const { column, isSelfRelation, label } = toRefs(props.data)
 
 const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm')
 
@@ -74,6 +74,15 @@ const edgePath = computed(() => {
     targetPosition: props.targetPosition,
   })
 })
+
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
 </script>
 
 <script>
@@ -102,6 +111,18 @@ export default {
     :marker-end="markerEnd"
   />
 
+  <EdgeText
+    v-if="label"
+    :x="center[0]"
+    :y="center[1]"
+    :label="label"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: '#10b981' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+  />
+
   <rect
     :x="sourceX"
     :y="sourceY - 4"
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 6723b15d7d..3a5a01365f 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -16,6 +16,7 @@ interface Props {
     showViews: boolean
     showAllColumns: boolean
     singleTableMode: boolean
+    showJunctionTableNames: boolean
   }
 }
 
@@ -86,7 +87,7 @@ const populateEdges = () => {
     const source = column.fk_model_id!
     const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
 
-    let sourceColumnId, targetColumnId
+    let sourceColumnId, targetColumnId, edgeLabel
 
     if ((column.colOptions as LinkToAnotherRecordType).type === 'hm') {
       sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
@@ -96,6 +97,9 @@ const populateEdges = () => {
     if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
       sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
       targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+      edgeLabel =
+        config.showJunctionTableNames &&
+        metasWithIdAsKey.value[(column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!].table_name
     }
 
     if (source !== target) dagreGraph.setEdge(source, target)
@@ -118,6 +122,7 @@ const populateEdges = () => {
       data: {
         column,
         isSelfRelation: source === target && sourceColumnId === targetColumnId,
+        label: edgeLabel,
       },
     }
   })
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 40fb83614a..b47204e935 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -10,7 +10,7 @@ const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
 const erdKey = ref(0)
-const showMMOption = ref(false)
+const showAdvancedOptions = ref(false)
 
 const config = ref({
   showPkAndFk: true,
@@ -18,6 +18,7 @@ const config = ref({
   showAllColumns: true,
   singleTableMode: !!table,
   showMMTables: false,
+  showJunctionTableNames: false,
 })
 
 const tables = computed(() => {
@@ -96,7 +97,7 @@ watch(
       <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
-          <span class="ml-2 select-none" style="font-size: 0.65rem" @dblclick="showMMOption = true">{{
+          <span class="ml-2 select-none" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">{{
             $t('activity.erd.showColumns')
           }}</span>
         </div>
@@ -108,10 +109,14 @@ watch(
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showSqlViews') }}</span>
         </div>
-        <div v-if="!table && showMMOption" class="flex flex-row items-center">
+        <div v-if="!table && showAdvancedOptions" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
+        <div v-if="!table && showAdvancedOptions" class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showJunctionTableNames" v-e="['c:erd:showJunctionTableNames']" />
+          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showJunctionTableNames') }}</span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index e453d5d676..06cf9cd623 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -413,7 +413,8 @@
       "showColumns": "Show Columns",
       "showPkAndFk": "Show Primary and Foreign Keys",
       "showSqlViews": "Show SQL Views",
-      "showMMTables": "Show MM tables"
+      "showMMTables": "Show MM tables",
+      "showJunctionTableNames": "Show Junction Table Names"
     }
   },
   "tooltip": {

From 99726a55b96a8a53ec47bdd9683d3b085c0b54b6 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 16 Sep 2022 20:19:51 +0530
Subject: [PATCH 37/62] test: ERD base

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/erd/View.vue       |  4 +-
 scripts/cypress/cypress.json                  | 16 +----
 scripts/cypress/integration/common/9b_ERD.js  | 72 +++++++++++++++++++
 scripts/cypress/integration/test/restMisc.js  | 37 +++++-----
 .../cypress/support/page_objects/mainPage.js  | 33 ++++++++-
 5 files changed, 129 insertions(+), 33 deletions(-)
 create mode 100644 scripts/cypress/integration/common/9b_ERD.js

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index b47204e935..c3e6ed75cb 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -94,7 +94,9 @@ watch(
     <div v-else class="relative h-full">
       <ErdSimpleView :key="erdKey" :tables="tablesFilteredWithConfig" :config="config" />
 
-      <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+      <div
+        class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu"
+      >
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">{{
diff --git a/scripts/cypress/cypress.json b/scripts/cypress/cypress.json
index 2d162a3676..97f7179022 100644
--- a/scripts/cypress/cypress.json
+++ b/scripts/cypress/cypress.json
@@ -1,19 +1,7 @@
 {
     "baseUrl": "http://localhost:3000/",
     "testFiles": [
-        "test/restTableOps.js",
-        "test/restViews.js",
-        "test/restRoles.js",
-        "test/restMisc.js",
-        "test/xcdb-restTableOps.js",
-        "test/xcdb-restViews.js",
-        "test/xcdb-restRoles.js",
-        "test/xcdb-restMisc.js",
-        "test/pg-restTableOps.js",
-        "test/pg-restViews.js",
-        "test/pg-restRoles.js",
-        "test/pg-restMisc.js",
-        "test/quickTest.js"
+        "test/restMisc.js"
     ],
     "defaultCommandTimeout": 13000,
     "pageLoadTimeout": 600000,
@@ -22,7 +10,7 @@
     "video": false,
     "retries": 0,
     "screenshotOnRunFailure": true,
-    "numTestsKeptInMemory": 0,
+    "numTestsKeptInMemory": 5,
     "experimentalInteractiveRunEvents": true,
     "env": {
         "testMode": [
diff --git a/scripts/cypress/integration/common/9b_ERD.js b/scripts/cypress/integration/common/9b_ERD.js
new file mode 100644
index 0000000000..90a5e1c98c
--- /dev/null
+++ b/scripts/cypress/integration/common/9b_ERD.js
@@ -0,0 +1,72 @@
+import { mainPage, settingsPage } from "../../support/page_objects/mainPage";
+import {loginPage, projectsPage} from "../../support/page_objects/navigation";
+import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
+
+export const genTest = (apiType, dbType) => {
+  if (!isTestSuiteActive(apiType, dbType)) return;
+
+  describe(`${apiType.toUpperCase()} ERD`, () => {
+    before(() => {
+      loginPage.loginAndOpenProject(apiType, dbType);
+      cy.openTableTab("Country", 25);
+      cy.saveLocalStorage();
+    });
+
+    beforeEach(() => {
+      cy.restoreLocalStorage();
+    })
+
+    afterEach(() => {
+      cy.saveLocalStorage();
+    })
+
+    after(() => {
+      cy.restoreLocalStorage();
+      cy.closeTableTab("Country");
+      cy.saveLocalStorage();
+    });
+
+    // Test cases
+
+    it(`Open Table ERD`, () => {
+      mainPage.openErdTab();
+    });
+
+    it(`Verify ERD Context menu`, () => {
+      cy.get('.nc-erd-context-menu').should('be.visible');
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).should('have.class', 'ant-checkbox-checked');
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(1).should('have.class', 'ant-checkbox-checked');
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(2).should('not.have.class', 'ant-checkbox-checked');
+
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).click();
+    });
+
+    it(`test-1`, () => {
+      cy.log("test-1");
+    });
+
+  });
+};
+
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Raju Udava <sivadstala@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
diff --git a/scripts/cypress/integration/test/restMisc.js b/scripts/cypress/integration/test/restMisc.js
index d348792c20..8f40fb6be2 100644
--- a/scripts/cypress/integration/test/restMisc.js
+++ b/scripts/cypress/integration/test/restMisc.js
@@ -7,30 +7,33 @@ let t6e = require("../common/6e_project_operations");
 let t6f = require("../common/6f_attachments");
 let t6g = require("../common/6g_base_share");
 let t7a = require("../common/7a_create_project_from_excel");
-let t8a = require("../common/8a_webhook")
+let t8a = require("../common/8a_webhook");
+let t9b = require("../common/9b_ERD");
 const {
     setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
 
 const nocoTestSuite = (apiType, dbType) => {
     setCurrentMode(apiType, dbType);
-    t01.genTest(apiType, dbType);
+    // t01.genTest(apiType, dbType);
+    //
+    // t6b.genTest(apiType, dbType);
+    // t6d.genTest(apiType, dbType);
+    // // exclude@ncv2 t6c.genTest(apiType, dbType);
+    // t6f.genTest(apiType, dbType);
+    // t6g.genTest(apiType, dbType);
+    //
+    // // webhook tests
+    // t8a.genTest(apiType, dbType)
+    //
+    // // **deletes created project, hence place it @ end
+    // t6e.genTest(apiType, dbType);
+    //
+    // // intended to keep this after earlier project deletion
+    // // creates project using excel & deletes it
+    // t7a.genTest(apiType, dbType);
 
-    t6b.genTest(apiType, dbType);
-    t6d.genTest(apiType, dbType);
-    // exclude@ncv2 t6c.genTest(apiType, dbType);
-    t6f.genTest(apiType, dbType);
-    t6g.genTest(apiType, dbType);
-
-    // webhook tests
-    t8a.genTest(apiType, dbType)
-
-    // **deletes created project, hence place it @ end
-    t6e.genTest(apiType, dbType);
-
-    // intended to keep this after earlier project deletion
-    // creates project using excel & deletes it
-    t7a.genTest(apiType, dbType);
+    t9b.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "mysql");
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index 63b431512a..ab55fda4bf 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -16,7 +16,7 @@ export class _settingsPage {
     // menu
     this.TEAM_N_AUTH = "teamAndAuth";
     this.APPSTORE = "appStore";
-    this.PROJ_METADATA = "metaData";
+    this.PROJ_METADATA = "projMetaData";
     this.AUDIT = "audit";
 
     // submenu
@@ -26,6 +26,8 @@ export class _settingsPage {
     this.METADATA = "metaData";
     this.UI_ACCESS_CONTROL = "acl";
     this.AUDIT_LOG = "audit";
+    this.ERD = "erd";
+    this.MISC = "misc";
   }
 
   openMenu(menuId) {
@@ -40,6 +42,35 @@ export class _settingsPage {
     cy.get(`[data-menu-id=${menuId}]`).should("exist").click();
   }
 
+  openMiscTab() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.MISC);
+  }
+
+  toggleShowMMSetting() {
+    // toggle show MM setting
+    //
+    this.openMiscTab();
+    cy.get(".nc-settings-meta-misc").click();
+
+    settingsPage.openTab(settingsPage.TEAM_N_AUTH);
+    this.closeMetaTab();
+  }
+
+  openErdTab() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.ERD);
+  }
+
+  openTableErdView() {
+    cy.get(".nc-actions-menu-btn").should("exist").click();
+    cy.get(".nc-view-action-erd").should("exist").click();
+  }
+
   openTab(tabId) {
     cy.get(`[data-menu-id=${tabId}]`).should("exist").last().click();
   }

From 53e54d0018bc18e0e87635144611e83c0b055fad Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 17 Sep 2022 10:41:46 +0530
Subject: [PATCH 38/62] feat(nc-gui): Now show PKFK button is disabled when
 showColumns option is unchecked and title of mm junction table is shown on
 the edges if its option is set

---
 packages/nc-gui/components/erd/SimpleView.vue | 13 ++++++++++---
 packages/nc-gui/components/erd/View.vue       |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 3a5a01365f..2e291810f9 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -83,6 +83,14 @@ const populateEdges = () => {
     return acc
   }, [] as ColumnType[])
 
+  const edgeMMTableLabel = (modelId: string) => {
+    const mmModel = metasWithIdAsKey.value[modelId]
+    if (mmModel.title !== mmModel.table_name) {
+      return `${mmModel.title} (${mmModel.table_name})`
+    }
+    return mmModel.title
+  }
+
   edges.value = ltarColumns.map((column) => {
     const source = column.fk_model_id!
     const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
@@ -98,8 +106,7 @@ const populateEdges = () => {
       sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
       targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
       edgeLabel =
-        config.showJunctionTableNames &&
-        metasWithIdAsKey.value[(column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!].table_name
+        config.showJunctionTableNames && edgeMMTableLabel((column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!)
     }
 
     if (source !== target) dagreGraph.setEdge(source, target)
@@ -109,7 +116,7 @@ const populateEdges = () => {
       // rerender after 200ms
       setTimeout(() => {
         vueFlowKey.value = 1
-      }, 200)
+      }, 350)
     }
 
     return {
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index c3e6ed75cb..94d27053f9 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -104,7 +104,7 @@ watch(
           }}</span>
         </div>
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" :disabled="!config.showAllColumns" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
@@ -115,7 +115,7 @@ watch(
           <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
-        <div v-if="!table && showAdvancedOptions" class="flex flex-row items-center">
+        <div v-if="showAdvancedOptions" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showJunctionTableNames" v-e="['c:erd:showJunctionTableNames']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showJunctionTableNames') }}</span>
         </div>

From 7e6252ee724557170e2e7b28a9e618e2d5e87f44 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 17 Sep 2022 21:02:16 +0530
Subject: [PATCH 39/62] feat(nc-gui): Added cypress test for ERD

---
 .../components/dashboard/settings/Misc.vue    |   2 +-
 .../nc-gui/components/erd/RelationEdge.vue    |   5 +-
 packages/nc-gui/components/erd/SimpleView.vue |   4 +-
 packages/nc-gui/components/erd/TableNode.vue  |  39 ++-
 packages/nc-gui/components/erd/View.vue       |  55 ++-
 .../smartsheet-toolbar/ViewActions.vue        |  21 +-
 packages/nc-gui/lang/en.json                  |   2 +-
 scripts/cypress/integration/common/9b_ERD.js  | 312 +++++++++++++++++-
 .../support/page_objects/projectConstants.js  |  10 +
 9 files changed, 412 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Misc.vue b/packages/nc-gui/components/dashboard/settings/Misc.vue
index a9ce1f6d2e..fc98644a58 100644
--- a/packages/nc-gui/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui/components/dashboard/settings/Misc.vue
@@ -10,7 +10,7 @@ watch(includeM2M, async () => await loadTables())
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <!--        Show M2M Tables -->
-        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']">{{
+        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc">{{
           $t('msg.info.showM2mTables')
         }}</a-checkbox>
       </div>
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index 38e6568fa5..8c8bf44529 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -113,6 +113,7 @@ export default {
 
   <EdgeText
     v-if="label"
+    :class="`nc-erd-table-label-${label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
     :x="center[0]"
     :y="center[1]"
     :label="label"
@@ -124,6 +125,7 @@ export default {
   />
 
   <rect
+    class="nc-erd-edge-rect"
     :x="sourceX"
     :y="sourceY - 4"
     width="8"
@@ -135,6 +137,7 @@ export default {
   />
   <rect
     v-if="isManyToMany"
+    class="nc-erd-edge-rect"
     :x="targetX"
     :y="targetY - 4"
     width="8"
@@ -144,7 +147,7 @@ export default {
     :stroke-width="1.5"
     :transform="`rotate(45,${targetX + 2},${targetY - 4})`"
   />
-  <circle v-else :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+  <circle v-else class="nc-erd-edge-circle" :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 2e291810f9..749d1de1c4 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -22,6 +22,8 @@ interface Props {
 
 const { tables, config } = defineProps<Props>()
 
+console.log(tables.map((t) => t.table_name))
+
 const { metasWithIdAsKey } = useMetas()
 
 const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
@@ -200,7 +202,7 @@ onBeforeMount(() => {
     <Background />
     <div
       v-if="!config.singleTableMode"
-      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
       style="font-size: 0.6rem"
     >
       <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index c9aa469b69..7186596f67 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -41,7 +41,10 @@ const relatedColumnId = (col: Record<string, any>) =>
 </script>
 
 <template>
-  <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
+  <div
+    class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1 nc-erd-table-node"
+    :class="`nc-erd-table-node-${data.table_name}`"
+  >
     <GeneralTooltip modifier-key="Alt">
       <template #title> {{ data.table_name }} </template>
       <div
@@ -55,17 +58,27 @@ const relatedColumnId = (col: Record<string, any>) =>
       </div>
     </GeneralTooltip>
     <div>
-      <div class="keys mb-1">
-        <div v-for="col in pkAndFkColumns" :key="col.title" class="w-full border-b-1 py-2 border-gray-100">
-          <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
-        </div>
+      <div
+        v-for="col in pkAndFkColumns"
+        :key="col.title"
+        class="w-full border-b-1 py-2 border-gray-100 keys"
+        :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+      >
+        <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
       </div>
+
+      <div class="w-full mb-1"></div>
+
       <div v-for="(col, index) in nonPkColumns" :key="col.title">
         <div
           class="w-full h-full flex items-center min-w-32 border-gray-100 py-2 px-1"
           :class="index + 1 === nonPkColumns!.length ? 'rounded-b-lg' : 'border-b-1'"
         >
-          <div v-if="col.uidt === UITypes.LinkToAnotherRecord" class="flex relative w-full">
+          <div
+            v-if="col.uidt === UITypes.LinkToAnotherRecord"
+            class="flex relative w-full"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
+          >
             <Handle
               :id="`s-${relatedColumnId(col)}-${data.id}`"
               class="-right-4 opacity-0"
@@ -80,9 +93,19 @@ const relatedColumnId = (col: Record<string, any>) =>
             />
             <SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
           </div>
-          <SmartsheetHeaderVirtualCell v-else-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+          <SmartsheetHeaderVirtualCell
+            v-else-if="isVirtualCol(col)"
+            :column="col"
+            :hide-menu="true"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+          />
 
-          <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+          <SmartsheetHeaderCell
+            v-else
+            :column="col"
+            :hide-menu="true"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+          />
         </div>
       </div>
     </div>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 94d27053f9..b4f52e1ee4 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -4,6 +4,8 @@ import { UITypes } from 'nocodb-sdk'
 
 const { table } = defineProps<{ table?: TableType }>()
 
+const { includeM2M } = useGlobal()
+
 const { tables: projectTables } = useProject()
 
 const { metas, getMeta } = useMetas()
@@ -85,7 +87,14 @@ watch(
 </script>
 
 <template>
-  <div class="w-full" style="height: inherit">
+  <div
+    class="w-full"
+    style="height: inherit"
+    :class="{
+      'nc-erd-vue-flow': !config.singleTableMode,
+      'nc-erd-vue-flow-single-table': config.singleTableMode,
+    }"
+  >
     <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
       <div class="flex flex-row justify-center">
         <a-spin size="large" />
@@ -95,28 +104,50 @@ watch(
       <ErdSimpleView :key="erdKey" :tables="tablesFilteredWithConfig" :config="config" />
 
       <div
-        class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu"
+        class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"
       >
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
-          <span class="ml-2 select-none" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">{{
-            $t('activity.erd.showColumns')
-          }}</span>
+          <a-checkbox
+            v-model:checked="config.showAllColumns"
+            v-e="['c:erd:showAllColumns']"
+            class="nc-erd-showColumns-checkbox"
+          />
+          <span
+            class="ml-2 select-none nc-erd-showColumns-label"
+            style="font-size: 0.65rem"
+            @dblclick="showAdvancedOptions = true"
+            >{{ $t('activity.erd.showColumns') }}</span
+          >
         </div>
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" :disabled="!config.showAllColumns" />
+          <a-checkbox
+            v-model:checked="config.showPkAndFk"
+            v-e="['c:erd:showPkAndFk']"
+            class="nc-erd-showPkAndFk-checkbox"
+            :class="{
+              'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
+              'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
+              'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
+              'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
+            }"
+            :disabled="!config.showAllColumns"
+          />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
+          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showSqlViews') }}</span>
         </div>
-        <div v-if="!table && showAdvancedOptions" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" />
+        <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
-        <div v-if="showAdvancedOptions" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showJunctionTableNames" v-e="['c:erd:showJunctionTableNames']" />
+        <div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+          <a-checkbox
+            v-model:checked="config.showJunctionTableNames"
+            v-e="['c:erd:showJunctionTableNames']"
+            class="nc-erd-showJunctionTableNames-checkbox"
+          />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showJunctionTableNames') }}</span>
         </div>
       </div>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index a498a961d8..f00bc6e715 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -216,7 +216,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               </div>
             </a-menu-item>
             <a-menu-item>
-              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center" @click="showErd = true">
+              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center nc-view-action-erd" @click="showErd = true">
                 <AcountTreeRoundedIcon class="text-gray-500" />
                 {{ $t('title.erdView') }}
               </div>
@@ -230,13 +230,18 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal
-      v-model:visible="showErd"
-      size="small"
-      :title="`${$t('title.erdView')}: ${selectedView?.title}`"
-      :footer="null"
-      width="max(900px,60vw)"
-    >
+    <a-modal v-model:visible="showErd" size="small" :footer="null" width="max(900px,60vw)" :closable="false">
+      <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">
+          {{ `${$t('title.erdView')}: ${selectedView?.title}` }}
+        </a-typography-title>
+
+        <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="showErd = false">
+          <template #icon>
+            <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
+          </template>
+        </a-button>
+      </div>
       <SmartsheetToolbarErd />
     </a-modal>
 
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 06cf9cd623..518421bfe2 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -413,7 +413,7 @@
       "showColumns": "Show Columns",
       "showPkAndFk": "Show Primary and Foreign Keys",
       "showSqlViews": "Show SQL Views",
-      "showMMTables": "Show MM tables",
+      "showMMTables": "Show Many to Many tables",
       "showJunctionTableNames": "Show Junction Table Names"
     }
   },
diff --git a/scripts/cypress/integration/common/9b_ERD.js b/scripts/cypress/integration/common/9b_ERD.js
index 90a5e1c98c..49839de703 100644
--- a/scripts/cypress/integration/common/9b_ERD.js
+++ b/scripts/cypress/integration/common/9b_ERD.js
@@ -1,6 +1,6 @@
 import { mainPage, settingsPage } from "../../support/page_objects/mainPage";
 import {loginPage, projectsPage} from "../../support/page_objects/navigation";
-import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
+import { isTestSuiteActive, sakilaSqlViews, sakilaTables } from "../../support/page_objects/projectConstants";
 
 export const genTest = (apiType, dbType) => {
   if (!isTestSuiteActive(apiType, dbType)) return;
@@ -28,24 +28,324 @@ export const genTest = (apiType, dbType) => {
 
     // Test cases
 
-    it(`Open Table ERD`, () => {
+    it(`Enable MM setting Open Table ERD`, () => {
+      mainPage.toggleShowMMSetting();
+      
       mainPage.openErdTab();
+      mainPage.closeMetaTab();
     });
 
-    it(`Verify ERD Context menu`, () => {
+    it(`Verify ERD Context menu in all table view`, () => {
+      mainPage.openErdTab();
       cy.get('.nc-erd-context-menu').should('be.visible');
+      cy.get('.nc-erd-context-menu').get('.nc-erd-histogram').should('be.visible');
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).should('have.class', 'ant-checkbox-checked');
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(1).should('have.class', 'ant-checkbox-checked');
       cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(2).should('not.have.class', 'ant-checkbox-checked');
 
-      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).click();
+      cy.get('.nc-erd-context-menu').find('.nc-erd-showColumns-label').dblclick();
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 5);
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config", () => {
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 12)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 11)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 17)
+
+      for(const tableName of sakilaTables) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+
+      // Actor table
+      [
+        'actor_id',
+        'first_name',
+        'last_name',
+        'last_update',
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'payment_id',
+        'customer_id',
+        'staff_id',
+        'rental_id',
+        'amount',
+        'payment_date',
+        'last_update',
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
     });
 
-    it(`test-1`, () => {
-      cy.log("test-1");
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config with showAllColumn disabled", () => {
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      cy.get('.nc-erd-showPkAndFk-checkbox-disabled').should('exist');
+      cy.get('.nc-erd-showPkAndFk-checkbox-unchecked').should('exist');
+
+      // Actor table
+      [
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config with showPkAndFk disabled", () => {
+      // enable showAllColumn
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+      // Actor table
+      [
+        'last_name',
+        'last_update',
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'amount',
+        'payment_date',
+        'last_update',
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view with sql grid on and verify columns of ActorInfo", () => {
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showViews-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 19)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 11)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 17)
+
+      for(const tableName of sakilaTables) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+      
+      for(const tableName of sakilaSqlViews) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+
+      // ActorInfo SQL View
+      [
+        'actor_id',
+        'first_name',
+        'last_name',
+        'film_info'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor_info`).find(`.nc-erd-table-node-actor_info-column-${colTitle}`).should('exist');
+      })
+
     });
 
+    it("Verify show MM tables", () => {
+      cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('not.exist');
+      // disable showViews
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showViews-checkbox').click();
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showMMTables-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 16)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 18)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 22)
+
+      // Check if store table is present
+      cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('exist');
+    })
+
+    it("Verify show junction table names", () => {
+      // disable showViews
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showJunctionTableNames-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').get('.nc-erd-table-label-filmactor-film_actor').should('exist');
+      mainPage.closeMetaTab();
+    })
+
+    it('Verify table ERD view of country', () => {
+      mainPage.openTableErdView();
+
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-table-node').should('have.length', 2)
+      cy.get('.nc-erd-vue-flow-single-table').find('.vue-flow__edge').should('have.length', 1)
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-edge-circle').should('have.length', 1)
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-edge-rect').should('have.length', 1)
+
+      const countryColumns = [
+        'country_id',
+        'country',
+        'last_update',
+        'city_list'
+      ]
+
+      // Country table
+      countryColumns.forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow-single-table').find(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+      });
+
+      const cityColumns = [
+        'city_id',
+        'city',
+        'last_update',
+        'country',
+        'address_list'
+      ]
+
+      // City table
+      cityColumns.forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow-single-table').find(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+      });
+    })
+
+    it('Verify table ERD view of country showAllColumn disabled', () => {
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+        cy.get('.nc-erd-showPkAndFk-checkbox-disabled').should('exist');
+        cy.get('.nc-erd-showPkAndFk-checkbox-unchecked').should('exist');
+
+        const countryColumns = [
+          'city_list'
+        ]
+  
+        // Country table
+        countryColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+        });
+  
+        const cityColumns = [
+          'country',
+          'address_list'
+        ]
+  
+        // City table
+        cityColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+        });
+
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      })
+    })
+
+    it('Verify table ERD view of country show PK AND FK disabled', () => {
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+        const countryColumns = [
+          'country',
+          'last_update',
+          'city_list'
+        ]
+  
+        // Country table
+        countryColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+        });
+  
+        const cityColumns = [
+          'city',
+          'last_update',
+          'country',
+          'address_list'
+        ]
+  
+        // City table
+        cityColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+        });
+
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+    })
+
+    it('create column and check if the change is in the schema', () => {
+      mainPage.addColumn('test_column', 'country')
+
+      // table view
+      mainPage.openTableErdView();
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('exist');
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+
+      // All table view
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('exist');
+      })
+      mainPage.closeMetaTab();
+
+
+      mainPage.deleteColumn('test_column')
+      
+      // table view
+      mainPage.openTableErdView();
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('not.exist');
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+
+      // All table view
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('not.exist');
+      })
+      mainPage.closeMetaTab();
+    })
+
+    it('Create table should reflected in ERD', () => {
+      cy.createTable('new')
+
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-new').should('exist');
+      })
+      mainPage.closeMetaTab();
+
+      cy.deleteTable('new')
+      
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-new').should('not.exist');
+      })
+      mainPage.closeMetaTab();
+    })
+
+    it(`Disable MM setting Open Table ERD and check easter egg should not work`, () => {
+      mainPage.toggleShowMMSetting();
+      
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-context-menu').find('.nc-erd-showColumns-label').dblclick();
+        cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
+      })
+
+      mainPage.closeMetaTab();
+    });
   });
 };
 
diff --git a/scripts/cypress/support/page_objects/projectConstants.js b/scripts/cypress/support/page_objects/projectConstants.js
index 3973378f12..103cad3c7f 100644
--- a/scripts/cypress/support/page_objects/projectConstants.js
+++ b/scripts/cypress/support/page_objects/projectConstants.js
@@ -156,3 +156,13 @@ export function setProjectString(projStr) {
 export function getProjectString() {
     return xcdbProjectString;
 }
+
+const sakilaTables = [
+    'actor', 'address', 'category', 'city', 'country', 'customer', 'film', 'film_text', 'language', 'payment', 'rental', 'staff'
+]
+
+const sakilaSqlViews = [
+    'actor_info', 'customer_list', 'film_list', 'nicer_but_slower_film_list', 'sales_by_film_category', 'sales_by_store', 'staff_list'
+]
+
+export { sakilaTables, sakilaSqlViews }
\ No newline at end of file

From 028b011d06e41abfc1b15d29256c70f415579e1d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 17 Sep 2022 21:06:03 +0530
Subject: [PATCH 40/62] feat(nc-gui): Reverted some cypress settings

---
 scripts/cypress/cypress.json                 | 15 ++++++++-
 scripts/cypress/integration/test/restMisc.js | 34 ++++++++++----------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/scripts/cypress/cypress.json b/scripts/cypress/cypress.json
index 97f7179022..e7bcb774f7 100644
--- a/scripts/cypress/cypress.json
+++ b/scripts/cypress/cypress.json
@@ -1,6 +1,19 @@
 {
     "baseUrl": "http://localhost:3000/",
     "testFiles": [
+        "test/restTableOps.js",
+        "test/restViews.js",
+        "test/restRoles.js",
+        "test/restMisc.js",
+        "test/xcdb-restTableOps.js",
+        "test/xcdb-restViews.js",
+        "test/xcdb-restRoles.js",
+        "test/xcdb-restMisc.js",
+        "test/pg-restTableOps.js",
+        "test/pg-restViews.js",
+        "test/pg-restRoles.js",
+        "test/pg-restMisc.js",
+        "test/quickTest.js",
         "test/restMisc.js"
     ],
     "defaultCommandTimeout": 13000,
@@ -10,7 +23,7 @@
     "video": false,
     "retries": 0,
     "screenshotOnRunFailure": true,
-    "numTestsKeptInMemory": 5,
+    "numTestsKeptInMemory": 0,
     "experimentalInteractiveRunEvents": true,
     "env": {
         "testMode": [
diff --git a/scripts/cypress/integration/test/restMisc.js b/scripts/cypress/integration/test/restMisc.js
index 8f40fb6be2..771b577a04 100644
--- a/scripts/cypress/integration/test/restMisc.js
+++ b/scripts/cypress/integration/test/restMisc.js
@@ -15,23 +15,23 @@ const {
 
 const nocoTestSuite = (apiType, dbType) => {
     setCurrentMode(apiType, dbType);
-    // t01.genTest(apiType, dbType);
-    //
-    // t6b.genTest(apiType, dbType);
-    // t6d.genTest(apiType, dbType);
-    // // exclude@ncv2 t6c.genTest(apiType, dbType);
-    // t6f.genTest(apiType, dbType);
-    // t6g.genTest(apiType, dbType);
-    //
-    // // webhook tests
-    // t8a.genTest(apiType, dbType)
-    //
-    // // **deletes created project, hence place it @ end
-    // t6e.genTest(apiType, dbType);
-    //
-    // // intended to keep this after earlier project deletion
-    // // creates project using excel & deletes it
-    // t7a.genTest(apiType, dbType);
+    t01.genTest(apiType, dbType);
+    
+    t6b.genTest(apiType, dbType);
+    t6d.genTest(apiType, dbType);
+    // exclude@ncv2 t6c.genTest(apiType, dbType);
+    t6f.genTest(apiType, dbType);
+    t6g.genTest(apiType, dbType);
+    
+    // webhook tests
+    t8a.genTest(apiType, dbType)
+    
+    // **deletes created project, hence place it @ end
+    t6e.genTest(apiType, dbType);
+    
+    // intended to keep this after earlier project deletion
+    // creates project using excel & deletes it
+    t7a.genTest(apiType, dbType);
 
     t9b.genTest(apiType, dbType);
 };

From 83fb0717e6c04ee60734beea0c52dddfcd112d5e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 18 Sep 2022 00:52:47 +0530
Subject: [PATCH 41/62] feat(nc-gui): Fixed the rendering hack and some cleanup

---
 packages/nc-gui/components/erd/SimpleView.vue | 128 ++++++++++--------
 packages/nc-gui/components/erd/View.vue       |  81 +++++------
 .../components/smartsheet-toolbar/Erd.vue     |  46 ++++++-
 .../smartsheet-toolbar/ViewActions.vue        |  15 +-
 4 files changed, 160 insertions(+), 110 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 749d1de1c4..8d600328ea 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Edge, Node } from '@braks/vue-flow'
-import { Background, Controls, VueFlow } from '@braks/vue-flow'
+import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
@@ -22,36 +22,42 @@ interface Props {
 
 const { tables, config } = defineProps<Props>()
 
-console.log(tables.map((t) => t.table_name))
-
 const { metasWithIdAsKey } = useMetas()
 
-const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
+const { $destroy, fitView } = useVueFlow()
+
+const isTransitioning = ref(true)
+
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
-const vueFlowKey = ref(0)
 
-const dagreGraph = new dagre.graphlib.Graph()
-dagreGraph.setDefaultEdgeLabel(() => ({}))
+let dagreGraph: dagre.graphlib.Graph
+const initDagre = () => {
+  dagreGraph = new dagre.graphlib.Graph()
+  dagreGraph.setDefaultEdgeLabel(() => ({}))
+  dagreGraph.setGraph({ rankdir: 'LR' })
+}
 
 const populateInitialNodes = () => {
-  tables.forEach((table) => {
-    if (!table.id) return
+  nodes.value = tables.flatMap((table) => {
+    if (!table.id) return []
 
-    const columns = metasWithIdAsKey.value[table.id].columns!.filter(
-      (col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
-    )
+    const columns =
+      metasWithIdAsKey.value[table.id].columns?.filter(
+        (col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+      ) || []
 
     dagreGraph.setNode(table.id, { width: 250, height: 50 * columns.length })
 
-    initialNodes.value.push({
-      id: table.id,
-      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, showAllColumns: config.showAllColumns },
-      type: 'custom',
-    })
+    return [
+      {
+        id: table.id,
+        data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, showAllColumns: config.showAllColumns },
+        type: 'custom',
+        position: { x: 0, y: 0 },
+      },
+    ]
   })
-
-  dagreGraph.setGraph({ rankdir: 'LR' })
 }
 
 const populateEdges = () => {
@@ -113,14 +119,6 @@ const populateEdges = () => {
 
     if (source !== target) dagreGraph.setEdge(source, target)
 
-    // todo: In the case of one self relation and one has many between 2 tables in only single table view, edges are getting messed up
-    if (source === target) {
-      // rerender after 200ms
-      setTimeout(() => {
-        vueFlowKey.value = 1
-      }, 350)
-    }
-
     return {
       id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
       source: `${source}`,
@@ -172,7 +170,7 @@ const layoutNodes = () => {
 
   dagre.layout(dagreGraph)
 
-  nodes.value = initialNodes.value.flatMap((node) => {
+  nodes.value = nodes.value.flatMap((node) => {
     const nodeWithPosition = dagreGraph.node(node.id)
 
     if (!nodeWithPosition) return []
@@ -181,38 +179,60 @@ const layoutNodes = () => {
   })
 }
 
-onBeforeMount(() => {
+const init = (reset = false) => {
+  if (reset) {
+    initDagre()
+  }
   populateInitialNodes()
   populateEdges()
   layoutNodes()
+  if (reset) {
+    setTimeout(() => fitView({ duration: 300 }))
+  }
+}
+
+initDagre()
+
+onBeforeMount(init)
+
+onScopeDispose($destroy)
+
+watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
+
+useEventListener('transitionend', () => {
+  isTransitioning.value = false
 })
 </script>
 
 <template>
-  <VueFlow :key="vueFlowKey" :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true">
-    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
-
-    <template #node-custom="props">
-      <TableNode :data="props.data" />
-    </template>
-
-    <template #edge-custom="props">
-      <RelationEdge v-bind="props" />
-    </template>
-    <Background />
-    <div
-      v-if="!config.singleTableMode"
-      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
-      style="font-size: 0.6rem"
-    >
-      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
-        <MdiTableLarge class="text-primary" />
-        <div>{{ $t('objects.table') }}</div>
-      </div>
-      <div class="flex flex-row items-center space-x-1 pt-1">
-        <MdiView class="text-primary" />
-        <div>{{ $t('objects.sqlVIew') }}</div>
+  <Transition name="layout" mode="in-out">
+    <VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
+      <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
+      <template #node-custom="props">
+        <TableNode :data="props.data" />
+      </template>
+
+      <template #edge-custom="props">
+        <RelationEdge v-bind="props" />
+      </template>
+
+      <Background />
+
+      <div
+        v-if="!config.singleTableMode"
+        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
+        style="font-size: 0.6rem"
+      >
+        <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+          <MdiTableLarge class="text-primary" />
+          <div>{{ $t('objects.table') }}</div>
+        </div>
+        <div class="flex flex-row items-center space-x-1 pt-1">
+          <MdiView class="text-primary" />
+          <div>{{ $t('objects.sqlVIew') }}</div>
+        </div>
       </div>
-    </div>
-  </VueFlow>
+    </VueFlow>
+  </Transition>
 </template>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index b4f52e1ee4..a522b08b95 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -7,7 +7,7 @@ const { table } = defineProps<{ table?: TableType }>()
 const { includeM2M } = useGlobal()
 
 const { tables: projectTables } = useProject()
-
+const tables = ref<TableType>([])
 const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
@@ -23,39 +23,34 @@ const config = ref({
   showJunctionTableNames: false,
 })
 
-const tables = computed(() => {
+const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
+  await Promise.all(
+    localTables
+      .filter((table) => !metas.value[table.id!])
+      .map(async (table) => {
+        await getMeta(table.id!)
+      }),
+  )
+}
+
+const populateTables = async () => {
+  let localTables: TableType[] = []
   if (table) {
     // if table is provided only get the table and its related tables
-    return projectTables.value.filter(
+    localTables = projectTables.value.filter(
       (t) =>
         t.id === table.id ||
         table.columns?.find(
           (column) => column.uidt === UITypes.LinkToAnotherRecord && column?.colOptions?.fk_related_model_id === t.id,
         ),
     )
+  } else {
+    localTables = projectTables.value
   }
 
-  return projectTables.value
-})
-
-const loadMetaOfTablesNotInMetas = async () => {
-  await Promise.all(
-    tables.value
-      .filter((table) => !metas.value[table.id!])
-      .map(async (table) => {
-        await getMeta(table.id!)
-      }),
-  )
-}
-
-onMounted(async () => {
-  await loadMetaOfTablesNotInMetas()
+  await loadMetaOfTablesNotInMetas(localTables)
 
-  isLoading = false
-})
-
-const tablesFilteredWithConfig = computed(() =>
-  tables.value
+  tables.value = localTables
     .filter(
       (t) =>
         config.value.showMMTables ||
@@ -63,26 +58,34 @@ const tablesFilteredWithConfig = computed(() =>
         // Show mm table if its the selected table
         t.id === table?.id,
     )
-    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews),
-)
+    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews)
+
+  isLoading = false
+}
 
 watch(
-  () => config.value.showAllColumns,
-  () => {
-    config.value.showPkAndFk = config.value.showAllColumns
+  [config, metas],
+  async () => {
+    await populateTables()
+  },
+  {
+    deep: true,
   },
 )
 
-watch(metas, () => {
-  erdKey.value = erdKey.value + 1
-})
+watch(
+  [projectTables],
+  async () => {
+    await populateTables()
+  },
+  { immediate: true },
+)
 
 watch(
-  config,
+  () => config.value.showAllColumns,
   () => {
-    erdKey.value = erdKey.value + 1
+    config.value.showPkAndFk = config.value.showAllColumns
   },
-  { deep: true },
 )
 </script>
 
@@ -101,7 +104,7 @@ watch(
       </div>
     </div>
     <div v-else class="relative h-full">
-      <ErdSimpleView :key="erdKey" :tables="tablesFilteredWithConfig" :config="config" />
+      <ErdSimpleView :key="erdKey" :tables="tables" :config="config" />
 
       <div
         class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"
@@ -132,15 +135,15 @@ watch(
             }"
             :disabled="!config.showAllColumns"
           />
-          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
-          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showSqlViews') }}</span>
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
         </div>
         <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
-          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
         <div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center">
           <a-checkbox
@@ -148,7 +151,7 @@ watch(
             v-e="['c:erd:showJunctionTableNames']"
             class="nc-erd-showJunctionTableNames-checkbox"
           />
-          <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showJunctionTableNames') }}</span>
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
         </div>
       </div>
     </div>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
index 775dea64c5..fb26a67407 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -1,9 +1,49 @@
 <script lang="ts" setup>
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
 const meta = inject(MetaInj)
+
+interface Props {
+  modelValue: boolean
+}
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const selectedView = inject(ActiveViewInj)
 </script>
 
 <template>
-  <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
-    <ErdView :table="meta" />
-  </div>
+  <a-modal
+    v-model:visible="vModel"
+    size="small"
+    :footer="null"
+    width="max(900px,60vw)"
+    :closable="false"
+    wrap-class-name="erd-single-table-modal"
+  >
+    <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">
+        {{ `${$t('title.erdView')}: ${selectedView?.title}` }}
+      </a-typography-title>
+
+      <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
+        <template #icon>
+          <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
+        </template>
+      </a-button>
+    </div>
+    <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
+      <ErdView :table="meta" />
+    </div>
+  </a-modal>
 </template>
+
+<style lang="scss">
+.erd-single-table-modal {
+  .ant-modal {
+    transform: none !important;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index f00bc6e715..5a8d0e2472 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -230,20 +230,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal v-model:visible="showErd" size="small" :footer="null" width="max(900px,60vw)" :closable="false">
-      <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">
-          {{ `${$t('title.erdView')}: ${selectedView?.title}` }}
-        </a-typography-title>
-
-        <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="showErd = false">
-          <template #icon>
-            <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
-          </template>
-        </a-button>
-      </div>
-      <SmartsheetToolbarErd />
-    </a-modal>
+    <SmartsheetToolbarErd v-model:modelValue="showErd" />
 
     <a-modal
       v-model:visible="sharedViewListDlg"

From 9c784e4b5167b9ccb93190a562e5e627f700f380 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 19 Sep 2022 11:54:57 +0530
Subject: [PATCH 42/62] feat(nc-gui): Removed projection creation logic from
 ERD tests

---
 packages/nc-gui/components/erd/TableNode.vue |  3 +++
 scripts/cypress/integration/common/9b_ERD.js | 10 +++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 7186596f67..3994139e58 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -17,6 +17,8 @@ const { data } = toRefs(props)
 
 provide(MetaInj, data as Ref<TableType>)
 
+const { $e } = useNuxtApp()
+
 const columns = computed(() => {
   // Hide hm ltar created for `mm` relations
   return data.value.columns?.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
@@ -44,6 +46,7 @@ const relatedColumnId = (col: Record<string, any>) =>
   <div
     class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1 nc-erd-table-node"
     :class="`nc-erd-table-node-${data.table_name}`"
+    @click="$e('c:erd:node-click')"
   >
     <GeneralTooltip modifier-key="Alt">
       <template #title> {{ data.table_name }} </template>
diff --git a/scripts/cypress/integration/common/9b_ERD.js b/scripts/cypress/integration/common/9b_ERD.js
index 49839de703..2b6ef4aa27 100644
--- a/scripts/cypress/integration/common/9b_ERD.js
+++ b/scripts/cypress/integration/common/9b_ERD.js
@@ -6,11 +6,11 @@ export const genTest = (apiType, dbType) => {
   if (!isTestSuiteActive(apiType, dbType)) return;
 
   describe(`${apiType.toUpperCase()} ERD`, () => {
-    before(() => {
-      loginPage.loginAndOpenProject(apiType, dbType);
-      cy.openTableTab("Country", 25);
-      cy.saveLocalStorage();
-    });
+    // before(() => {
+    //   loginPage.loginAndOpenProject(apiType, dbType);
+    //   cy.openTableTab("Country", 25);
+    //   cy.saveLocalStorage();
+    // });
 
     beforeEach(() => {
       cy.restoreLocalStorage();

From 48e30435325b5e125893e3b0a6a5a012cbd91fb2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 16 Sep 2022 14:03:23 +0200
Subject: [PATCH 43/62] refactor(nc-gui): remove keys from erd views

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

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 8d600328ea..4ba3a17bb0 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -6,8 +6,6 @@ import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import TableNode from './TableNode.vue'
 import RelationEdge from './RelationEdge.vue'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props {
   tables: any[]
@@ -26,12 +24,14 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
-const isTransitioning = ref(true)
+const { $destroy, fitView } = useVueFlow()
 
+const isTransitioning = ref(true)
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
 let dagreGraph: dagre.graphlib.Graph
+
 const initDagre = () => {
   dagreGraph = new dagre.graphlib.Graph()
   dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -137,6 +137,7 @@ const populateEdges = () => {
 
 const connectNonConnectedNodes = () => {
   const connectedNodes = new Set<string>()
+
   edges.value.forEach((edge) => {
     connectedNodes.add(edge.source)
     connectedNodes.add(edge.target)
@@ -229,7 +230,7 @@ useEventListener('transitionend', () => {
           <div>{{ $t('objects.table') }}</div>
         </div>
         <div class="flex flex-row items-center space-x-1 pt-1">
-          <MdiView class="text-primary" />
+          <MdiEyeCircleOutline class="text-primary" />
           <div>{{ $t('objects.sqlVIew') }}</div>
         </div>
       </div>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index a522b08b95..a834716888 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -11,7 +11,6 @@ const tables = ref<TableType>([])
 const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
-const erdKey = ref(0)
 const showAdvancedOptions = ref(false)
 
 const config = ref({
@@ -104,7 +103,7 @@ watch(
       </div>
     </div>
     <div v-else class="relative h-full">
-      <ErdSimpleView :key="erdKey" :tables="tables" :config="config" />
+      <ErdSimpleView :tables="tables" :config="config" />
 
       <div
         class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"

From 3de0b2e68f7383684636a22a47ab5b22d7208f15 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 16 Sep 2022 15:50:54 +0200
Subject: [PATCH 44/62] fix(nc-gui): defer loading flow component until modal
 transition has ended

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

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 4ba3a17bb0..3de85edb93 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -24,9 +24,8 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
-const { $destroy, fitView } = useVueFlow()
-
 const isTransitioning = ref(true)
+
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
@@ -187,6 +186,7 @@ const init = (reset = false) => {
   populateInitialNodes()
   populateEdges()
   layoutNodes()
+
   if (reset) {
     setTimeout(() => fitView({ duration: 300 }))
   }
@@ -222,7 +222,7 @@ useEventListener('transitionend', () => {
 
       <div
         v-if="!config.singleTableMode"
-        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
+        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
         style="font-size: 0.6rem"
       >
         <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index a834716888..479b1cc968 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -118,8 +118,9 @@ watch(
             class="ml-2 select-none nc-erd-showColumns-label"
             style="font-size: 0.65rem"
             @dblclick="showAdvancedOptions = true"
-            >{{ $t('activity.erd.showColumns') }}</span
-          >
+            >
+            {{ $t('activity.erd.showColumns') }}
+          </span>
         </div>
         <div class="flex flex-row items-center">
           <a-checkbox

From dd5a8ef63e6788847ab9b3b8494f67f58d3663cf Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 21:16:10 +0200
Subject: [PATCH 45/62] refactor(nc-gui): cleanup simple view for erd

---
 packages/nc-gui/assets/style.scss             |  6 ++
 packages/nc-gui/components/erd/SimpleView.vue | 70 ++++++++-----------
 packages/nc-gui/components/erd/TableNode.vue  |  3 +-
 .../smartsheet-toolbar/ViewActions.vue        |  2 +-
 4 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index f1d7e48405..3c4b69f3a6 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -249,3 +249,9 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
+
+.nc-modal-erd {
+  .ant-modal {
+    transform: none !important;
+  }
+}
\ No newline at end of file
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 3de85edb93..c269716578 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -24,8 +24,6 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
-const isTransitioning = ref(true)
-
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
@@ -180,9 +178,7 @@ const layoutNodes = () => {
 }
 
 const init = (reset = false) => {
-  if (reset) {
-    initDagre()
-  }
+  initDagre()
   populateInitialNodes()
   populateEdges()
   layoutNodes()
@@ -192,48 +188,40 @@ const init = (reset = false) => {
   }
 }
 
-initDagre()
-
-onBeforeMount(init)
+init()
 
 onScopeDispose($destroy)
 
 watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
-
-useEventListener('transitionend', () => {
-  isTransitioning.value = false
-})
 </script>
 
 <template>
-  <Transition name="layout" mode="in-out">
-    <VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
-      <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
-
-      <template #node-custom="props">
-        <TableNode :data="props.data" />
-      </template>
-
-      <template #edge-custom="props">
-        <RelationEdge v-bind="props" />
-      </template>
-
-      <Background />
-
-      <div
-        v-if="!config.singleTableMode"
-        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
-        style="font-size: 0.6rem"
-      >
-        <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
-          <MdiTableLarge class="text-primary" />
-          <div>{{ $t('objects.table') }}</div>
-        </div>
-        <div class="flex flex-row items-center space-x-1 pt-1">
-          <MdiEyeCircleOutline class="text-primary" />
-          <div>{{ $t('objects.sqlVIew') }}</div>
-        </div>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
+    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
+    <template #node-custom="props">
+      <TableNode :data="props.data" />
+    </template>
+
+    <template #edge-custom="props">
+      <RelationEdge v-bind="props" />
+    </template>
+
+    <Background />
+
+    <div
+      v-if="!config.singleTableMode"
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
+      style="font-size: 0.6rem"
+    >
+      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+        <MdiTableLarge class="text-primary" />
+        <div>{{ $t('objects.table') }}</div>
+      </div>
+      <div class="flex flex-row items-center space-x-1 pt-1">
+        <MdiEyeCircleOutline class="text-primary" />
+        <div>{{ $t('objects.sqlVIew') }}</div>
       </div>
-    </VueFlow>
-  </Transition>
+    </div>
+  </VueFlow>
 </template>
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 3994139e58..6b901ef041 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -75,7 +75,7 @@ const relatedColumnId = (col: Record<string, any>) =>
       <div v-for="(col, index) in nonPkColumns" :key="col.title">
         <div
           class="w-full h-full flex items-center min-w-32 border-gray-100 py-2 px-1"
-          :class="index + 1 === nonPkColumns!.length ? 'rounded-b-lg' : 'border-b-1'"
+          :class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
         >
           <div
             v-if="col.uidt === UITypes.LinkToAnotherRecord"
@@ -88,6 +88,7 @@ const relatedColumnId = (col: Record<string, any>) =>
               type="source"
               :position="Position.Right"
             />
+
             <Handle
               :id="`d-${relatedColumnId(col)}-${data.id}`"
               class="-left-1 opacity-0"
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index 5a8d0e2472..29e34dee9a 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -245,7 +245,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 :deep(.ant-dropdown-menu-submenu-title) {
   @apply py-0;
 }

From 1d19e4822e96894fceccfc9b4e3511783979dbf5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 21:20:17 +0200
Subject: [PATCH 46/62] chore(nc-gui): lint

---
 packages/nc-gui/assets/style.scss             |  6 --
 packages/nc-gui/components/erd/SimpleView.vue | 62 +++++++++++--------
 .../smartsheet-toolbar/ViewActions.vue        |  2 +-
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 3c4b69f3a6..f1d7e48405 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -249,9 +249,3 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
-
-.nc-modal-erd {
-  .ant-modal {
-    transform: none !important;
-  }
-}
\ No newline at end of file
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index c269716578..336ba6d63f 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -24,6 +24,8 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
+const isTransitioning = ref(true)
+
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
@@ -193,35 +195,41 @@ init()
 onScopeDispose($destroy)
 
 watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
+
+useEventListener('transitionend', () => {
+  isTransitioning.value = false
+})
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
-    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
-
-    <template #node-custom="props">
-      <TableNode :data="props.data" />
-    </template>
-
-    <template #edge-custom="props">
-      <RelationEdge v-bind="props" />
-    </template>
-
-    <Background />
-
-    <div
-      v-if="!config.singleTableMode"
-      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
-      style="font-size: 0.6rem"
-    >
-      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
-        <MdiTableLarge class="text-primary" />
-        <div>{{ $t('objects.table') }}</div>
-      </div>
-      <div class="flex flex-row items-center space-x-1 pt-1">
-        <MdiEyeCircleOutline class="text-primary" />
-        <div>{{ $t('objects.sqlVIew') }}</div>
+  <Transition name="layout" mode="out-in">
+    <VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
+      <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
+      <template #node-custom="props">
+        <TableNode :data="props.data" />
+      </template>
+
+      <template #edge-custom="props">
+        <RelationEdge v-bind="props" />
+      </template>
+
+      <Background />
+
+      <div
+        v-if="!config.singleTableMode"
+        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
+        style="font-size: 0.6rem"
+      >
+        <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+          <MdiTableLarge class="text-primary" />
+          <div>{{ $t('objects.table') }}</div>
+        </div>
+        <div class="flex flex-row items-center space-x-1 pt-1">
+          <MdiEyeCircleOutline class="text-primary" />
+          <div>{{ $t('objects.sqlVIew') }}</div>
+        </div>
       </div>
-    </div>
-  </VueFlow>
+    </VueFlow>
+  </Transition>
 </template>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index 29e34dee9a..5a8d0e2472 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -245,7 +245,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.ant-dropdown-menu-submenu-title) {
   @apply py-0;
 }

From a4ba06f7c456d0cbb371adff5b7b8bb183f0282c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 23:34:10 +0200
Subject: [PATCH 47/62] refactor(nc-gui): use fade transition for erd modal

---
 packages/nc-gui/components/smartsheet-toolbar/Erd.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
index fb26a67407..c1a131fdea 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -22,6 +22,7 @@ const selectedView = inject(ActiveViewInj)
     width="max(900px,60vw)"
     :closable="false"
     wrap-class-name="erd-single-table-modal"
+    transition-name="fade"
   >
     <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">
@@ -39,11 +40,3 @@ const selectedView = inject(ActiveViewInj)
     </div>
   </a-modal>
 </template>
-
-<style lang="scss">
-.erd-single-table-modal {
-  .ant-modal {
-    transform: none !important;
-  }
-}
-</style>

From 4e69717a5c847a444bbb8accfee7072cc93838f4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 00:30:18 +0200
Subject: [PATCH 48/62] chore(nc-gui): correct typing

---
 packages/nc-gui/components/erd/View.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 479b1cc968..91e537fa11 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TableType } from 'nocodb-sdk'
+import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 
 const { table } = defineProps<{ table?: TableType }>()
@@ -7,7 +7,7 @@ const { table } = defineProps<{ table?: TableType }>()
 const { includeM2M } = useGlobal()
 
 const { tables: projectTables } = useProject()
-const tables = ref<TableType>([])
+const tables = ref<TableType[]>([])
 const { metas, getMeta } = useMetas()
 
 let isLoading = $ref(true)
@@ -40,7 +40,9 @@ const populateTables = async () => {
       (t) =>
         t.id === table.id ||
         table.columns?.find(
-          (column) => column.uidt === UITypes.LinkToAnotherRecord && column?.colOptions?.fk_related_model_id === t.id,
+          (column) =>
+            column.uidt === UITypes.LinkToAnotherRecord &&
+            (column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id,
         ),
     )
   } else {
@@ -52,9 +54,10 @@ 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 its the selected table
+        // Show mm table if it's the selected table
         t.id === table?.id,
     )
     .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews)
@@ -118,7 +121,7 @@ watch(
             class="ml-2 select-none nc-erd-showColumns-label"
             style="font-size: 0.65rem"
             @dblclick="showAdvancedOptions = true"
-            >
+          >
             {{ $t('activity.erd.showColumns') }}
           </span>
         </div>

From 46c1e83f195e2f76945ba4e39f3d0a89b5f2bdf9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 00:35:00 +0200
Subject: [PATCH 49/62] refactor(nc-gui): replace initial transition and with
 fit view

---
 packages/nc-gui/components/erd/SimpleView.vue | 70 ++++++++-----------
 1 file changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 336ba6d63f..1248fbb0c6 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -24,8 +24,6 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
-const isTransitioning = ref(true)
-
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
@@ -179,57 +177,49 @@ const layoutNodes = () => {
   })
 }
 
-const init = (reset = false) => {
+const init = () => {
   initDagre()
   populateInitialNodes()
   populateEdges()
   layoutNodes()
 
-  if (reset) {
-    setTimeout(() => fitView({ duration: 300 }))
-  }
+  setTimeout(() => fitView({ duration: 300 }))
 }
 
 init()
 
 onScopeDispose($destroy)
 
-watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
-
-useEventListener('transitionend', () => {
-  isTransitioning.value = false
-})
+watch([() => tables, () => config], init, { deep: true, flush: 'pre' })
 </script>
 
 <template>
-  <Transition name="layout" mode="out-in">
-    <VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
-      <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
-
-      <template #node-custom="props">
-        <TableNode :data="props.data" />
-      </template>
-
-      <template #edge-custom="props">
-        <RelationEdge v-bind="props" />
-      </template>
-
-      <Background />
-
-      <div
-        v-if="!config.singleTableMode"
-        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
-        style="font-size: 0.6rem"
-      >
-        <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
-          <MdiTableLarge class="text-primary" />
-          <div>{{ $t('objects.table') }}</div>
-        </div>
-        <div class="flex flex-row items-center space-x-1 pt-1">
-          <MdiEyeCircleOutline class="text-primary" />
-          <div>{{ $t('objects.sqlVIew') }}</div>
-        </div>
+  <VueFlow :nodes="nodes" :edges="edges" elevate-edges-on-select>
+    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
+    <template #node-custom="props">
+      <TableNode :data="props.data" />
+    </template>
+
+    <template #edge-custom="props">
+      <RelationEdge v-bind="props" />
+    </template>
+
+    <Background />
+
+    <div
+      v-if="!config.singleTableMode"
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
+      style="font-size: 0.6rem"
+    >
+      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+        <MdiTableLarge class="text-primary" />
+        <div>{{ $t('objects.table') }}</div>
+      </div>
+      <div class="flex flex-row items-center space-x-1 pt-1">
+        <MdiEyeCircleOutline class="text-primary" />
+        <div>{{ $t('objects.sqlVIew') }}</div>
       </div>
-    </VueFlow>
-  </Transition>
+    </div>
+  </VueFlow>
 </template>

From 1b07f0f7d5bb2d11b98154962f48e069cbe34fcc Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 19 Sep 2022 12:57:10 +0530
Subject: [PATCH 50/62] feat(nc-gui): Fixed mm table edge name bug

---
 packages/nc-gui/components/erd/RelationEdge.vue |  2 +-
 packages/nc-gui/components/erd/SimpleView.vue   | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index 8c8bf44529..5cda21a107 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -112,7 +112,7 @@ export default {
   />
 
   <EdgeText
-    v-if="label"
+    v-if="label?.length > 0"
     :class="`nc-erd-table-label-${label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
     :x="center[0]"
     :y="center[1]"
diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 1248fbb0c6..3568a486ae 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -100,7 +100,8 @@ const populateEdges = () => {
     const source = column.fk_model_id!
     const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
 
-    let sourceColumnId, targetColumnId, edgeLabel
+    let sourceColumnId, targetColumnId
+    let edgeLabel = ''
 
     if ((column.colOptions as LinkToAnotherRecordType).type === 'hm') {
       sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
@@ -110,14 +111,15 @@ const populateEdges = () => {
     if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
       sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
       targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
-      edgeLabel =
-        config.showJunctionTableNames && edgeMMTableLabel((column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!)
+      edgeLabel = config.showJunctionTableNames
+        ? edgeMMTableLabel((column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!)
+        : ''
     }
 
     if (source !== target) dagreGraph.setEdge(source, target)
 
     return {
-      id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}`,
+      id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}-#${edgeLabel}`,
       source: `${source}`,
       target: `${target}`,
       sourceHandle: `s-${sourceColumnId}-${source}`,

From e520416b5faf1a6bfad94cb0116c39e4d918c8f4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 19 Sep 2022 13:04:54 +0530
Subject: [PATCH 51/62] feat(nc-gui): Fixed erd cypress issues

---
 scripts/cypress/integration/common/9b_ERD.js | 7 ++++---
 scripts/cypress/integration/test/restMisc.js | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/scripts/cypress/integration/common/9b_ERD.js b/scripts/cypress/integration/common/9b_ERD.js
index 2b6ef4aa27..6d1f4a9828 100644
--- a/scripts/cypress/integration/common/9b_ERD.js
+++ b/scripts/cypress/integration/common/9b_ERD.js
@@ -29,6 +29,7 @@ export const genTest = (apiType, dbType) => {
     // Test cases
 
     it(`Enable MM setting Open Table ERD`, () => {
+      cy.openTableTab("Country", 25);
       mainPage.toggleShowMMSetting();
       
       mainPage.openErdTab();
@@ -170,9 +171,9 @@ export const genTest = (apiType, dbType) => {
       cy.get('.nc-erd-context-menu').get('.nc-erd-showMMTables-checkbox').click();
 
       cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 16)
-      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 18)
-      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 14)
-      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 22)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 26)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 22)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 30)
 
       // Check if store table is present
       cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('exist');
diff --git a/scripts/cypress/integration/test/restMisc.js b/scripts/cypress/integration/test/restMisc.js
index 771b577a04..fc35c2003a 100644
--- a/scripts/cypress/integration/test/restMisc.js
+++ b/scripts/cypress/integration/test/restMisc.js
@@ -21,6 +21,9 @@ const nocoTestSuite = (apiType, dbType) => {
     t6d.genTest(apiType, dbType);
     // exclude@ncv2 t6c.genTest(apiType, dbType);
     t6f.genTest(apiType, dbType);
+
+    t9b.genTest(apiType, dbType);
+
     t6g.genTest(apiType, dbType);
     
     // webhook tests
@@ -32,8 +35,6 @@ const nocoTestSuite = (apiType, dbType) => {
     // intended to keep this after earlier project deletion
     // creates project using excel & deletes it
     t7a.genTest(apiType, dbType);
-
-    t9b.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "mysql");

From f7a3ef277948039dffb58cb197efb38715098578 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 20 Sep 2022 12:53:34 +0530
Subject: [PATCH 52/62] fix: duplicate class names

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/dashboard/settings/Modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 1fc4e16412..52dba591fc 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -91,7 +91,7 @@ const tabsInfo: TabGroup = {
       $e('c:settings:appstore')
     },
   },
-  metaData: {
+  projMetaData: {
     // Project Metadata
     title: t('title.projMeta'),
     icon: MultipleTableIcon,

From 50f0c3fbc5775412087a6336148b9f50fb7879a4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 17:36:49 +0530
Subject: [PATCH 53/62] feat(nc-gui): Renamed ERD SimpleView to Flow

---
 packages/nc-gui/components/erd/{SimpleView.vue => Flow.vue} | 0
 packages/nc-gui/components/erd/View.vue                     | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/nc-gui/components/erd/{SimpleView.vue => Flow.vue} (100%)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/Flow.vue
similarity index 100%
rename from packages/nc-gui/components/erd/SimpleView.vue
rename to packages/nc-gui/components/erd/Flow.vue
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 91e537fa11..d480963e83 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -106,7 +106,7 @@ watch(
       </div>
     </div>
     <div v-else class="relative h-full">
-      <ErdSimpleView :tables="tables" :config="config" />
+      <ErdFlow :tables="tables" :config="config" />
 
       <div
         class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"

From 212c79276d3c32430b3edab00d35567179c2c50c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 17:38:01 +0530
Subject: [PATCH 54/62] feat(nc-gui): Removed unnecassry icon import and fixed
 reactivity issue in RelationEdge

---
 packages/nc-gui/components.d.ts                 |  1 +
 packages/nc-gui/components/erd/RelationEdge.vue | 12 ++++++------
 packages/nc-gui/components/erd/TableNode.vue    |  4 +---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 64752f681a..0775cfde06 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -190,6 +190,7 @@ declare module '@vue/runtime-core' {
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index 5cda21a107..fec3122b9d 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -53,12 +53,12 @@ const props = defineProps({
   },
 })
 
-const { column, isSelfRelation, label } = toRefs(props.data)
+const data = toRef(props, 'data')
 
-const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm')
+const isManyToMany = computed(() => data.value.column?.colOptions?.type === 'mm')
 
 const edgePath = computed(() => {
-  if (isSelfRelation.value) {
+  if (data.value.isSelfRelation) {
     const { sourceX, sourceY, targetX, targetY } = props
     const radiusX = (sourceX - targetX) * 0.6
     const radiusY = 50
@@ -112,11 +112,11 @@ export default {
   />
 
   <EdgeText
-    v-if="label?.length > 0"
-    :class="`nc-erd-table-label-${label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
+    v-if="data.label?.length > 0"
+    :class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
     :x="center[0]"
     :y="center[1]"
-    :label="label"
+    :label="data.label"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
     :label-bg-style="{ fill: '#10b981' }"
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 6b901ef041..0c753e9856 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -4,8 +4,6 @@ import { Handle, Position } from '@braks/vue-flow'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props extends NodeProps {
   data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
@@ -54,7 +52,7 @@ const relatedColumnId = (col: Record<string, any>) =>
         class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
       >
         <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
-        <MdiView v-else class="text-primary" />
+        <MdiEyeCircleOutline v-else class="text-primary" />
         <div class="flex pl-1.5">
           {{ data.title }}
         </div>

From e5fdd8173453cb0f8083f9d7a5ca213382f25853 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 18:05:07 +0530
Subject: [PATCH 55/62] feat(noco-docs): Updated docs for ERD

---
 .../content/en/setup-and-usages/meta-management.md  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/noco-docs/content/en/setup-and-usages/meta-management.md b/packages/noco-docs/content/en/setup-and-usages/meta-management.md
index 474e32dbd0..d4a0483165 100644
--- a/packages/noco-docs/content/en/setup-and-usages/meta-management.md
+++ b/packages/noco-docs/content/en/setup-and-usages/meta-management.md
@@ -55,16 +55,23 @@ From the destination project, go to `Project Metadata`. Under ``Export / Import
 
 Go to `Project Metadata`, under ``Metadata``, you can see your metadata sync status. If it is out of sync, you can sync the schema. See <a href="./sync-schema">Sync Schema</a> for more.
 
-<img width="1480" alt="image" src="https://user-images.githubusercontent.com/35857179/189116339-22b202ef-7674-4682-bab7-2b8625e13ea2.png">
+<img width="1418" alt="image" src="https://user-images.githubusercontent.com/35809690/191258001-a4385df0-e796-4fa1-8ea4-a25361cd2d91.png">
 
 ## UI Access Control
 
 Go to `Project Metadata`, under ``UI Access Control``, you can control the access to each table by roles. 
 
-<img width="1480" alt="image" src="https://user-images.githubusercontent.com/35857179/189116502-78a0dc75-70cb-4bbe-a676-93af53ecca22.png">
+<img width="1417" alt="image" src="https://user-images.githubusercontent.com/35809690/191258150-3abe8de9-bab9-46fe-9095-01b8815b57f2.png">
+
+## ERD
+
+Go to `Project Metadata`, under ``ERD View``, you can see the ERD of your database.
+
+<img width="1419" alt="image" src="https://user-images.githubusercontent.com/35809690/191258324-18bd4ed0-521b-4480-a3f6-fe4660b8ddd5.png">
+
 
 ## Miscellaneous
 
 Currently only `Show M2M Tables` can be configurated under Miscellaneous.
 
-<img width="1495" alt="image" src="https://user-images.githubusercontent.com/35857179/189116547-3c5ce944-82c0-4068-b91c-60f45b862d32.png">
\ No newline at end of file
+<img width="1409" alt="image" src="https://user-images.githubusercontent.com/35809690/191258441-72a12941-2d2b-4a0d-84b8-f7f8783aa4e8.png">
\ No newline at end of file

From 949a768967a9e19a8b2e7b121b67bec44fec8bab Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 21 Sep 2022 12:30:34 +0530
Subject: [PATCH 56/62] fix: Integrated ERD and new tab name in settings modal
 in roleValidation test of restRole tests

---
 .../integration/spec/roleValidation.spec.js   | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/scripts/cypress/integration/spec/roleValidation.spec.js b/scripts/cypress/integration/spec/roleValidation.spec.js
index 56b71fa398..4d8f92f125 100644
--- a/scripts/cypress/integration/spec/roleValidation.spec.js
+++ b/scripts/cypress/integration/spec/roleValidation.spec.js
@@ -41,7 +41,7 @@ export function _advSettings(roleType, mode) {
 
     cy.get(`[data-menu-id="teamAndAuth"]`).should("exist");
     cy.get(`[data-menu-id="appStore"]`).should("exist");
-    cy.get(`[data-menu-id="metaData"]`).should("exist");
+    cy.get(`[data-menu-id="projMetaData"]`).should("exist");
     cy.get(`[data-menu-id="audit"]`).should("exist");
 
     settingsPage.closeMenu();
@@ -254,25 +254,26 @@ export function _viewMenu(roleType, mode) {
   // Lock, Download, Upload
   let menuWithSubmenuCount = 3;
 
-  // share view list, webhook
-  let menuWithoutSubmenuCount = 3;
+    // share view list, webhook, api snippet, erd
+    let menuWithoutSubmenuCount = 4;
 
   cy.openTableTab(columnName, 25);
 
   let validationString =
     true === roles[roleType].validations.shareView ? "exist" : "not.exist";
 
-  if (roleType === "editor") {
-    // Download / Upload CSV
-    menuWithSubmenuCount = 2;
-    // Get API Snippet
-    menuWithoutSubmenuCount = 1;
-    if (mode === "baseShare") menuWithoutSubmenuCount = 0;
-  } else if (roleType === "commenter" || roleType === "viewer") {
-    // Download CSV & Download excel
-    menuWithSubmenuCount = 0;
-    menuWithoutSubmenuCount = 2;
-  }
+    if (roleType === "editor") {
+        // Download / Upload CSV
+        menuWithSubmenuCount = 2;
+        // Get API Snippet and ERD
+        menuWithoutSubmenuCount = 2
+        if(mode === 'baseShare') menuWithoutSubmenuCount = 0
+    } else if (roleType === "commenter" || roleType === "viewer") {
+        // Download CSV & Download excel
+        menuWithSubmenuCount = 0;
+        // Get API Snippet and ERD
+        menuWithoutSubmenuCount = 2
+    }
 
   // view list field (default GRID view)
   cy.get(`.nc-view-item`).should("exist");

From b9423a8a549de2f0486594a54d2b462a582302a3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 21 Sep 2022 12:36:25 +0530
Subject: [PATCH 57/62] feat(nc-gui): Fixed rebase regression

---
 .../cypress/support/page_objects/mainPage.js  | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index ab55fda4bf..987999a850 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -42,35 +42,6 @@ export class _settingsPage {
     cy.get(`[data-menu-id=${menuId}]`).should("exist").click();
   }
 
-  openMiscTab() {
-    // open Project metadata tab
-    //
-    settingsPage.openMenu(settingsPage.PROJ_METADATA);
-    settingsPage.openTab(settingsPage.MISC);
-  }
-
-  toggleShowMMSetting() {
-    // toggle show MM setting
-    //
-    this.openMiscTab();
-    cy.get(".nc-settings-meta-misc").click();
-
-    settingsPage.openTab(settingsPage.TEAM_N_AUTH);
-    this.closeMetaTab();
-  }
-
-  openErdTab() {
-    // open Project metadata tab
-    //
-    settingsPage.openMenu(settingsPage.PROJ_METADATA);
-    settingsPage.openTab(settingsPage.ERD);
-  }
-
-  openTableErdView() {
-    cy.get(".nc-actions-menu-btn").should("exist").click();
-    cy.get(".nc-view-action-erd").should("exist").click();
-  }
-
   openTab(tabId) {
     cy.get(`[data-menu-id=${tabId}]`).should("exist").last().click();
   }
@@ -645,6 +616,35 @@ export class _mainPage {
   toggleRightSidebar() {
     cy.get(".nc-toggle-right-navbar").should("exist").click();
   }
+
+  openMiscTab() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.MISC);
+  }
+
+  toggleShowMMSetting() {
+    // toggle show MM setting
+    //
+    this.openMiscTab();
+    cy.get(".nc-settings-meta-misc").click();
+
+    settingsPage.openTab(settingsPage.TEAM_N_AUTH);
+    this.closeMetaTab();
+  }
+
+  openErdTab() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.ERD);
+  }
+
+  openTableErdView() {
+    cy.get(".nc-actions-menu-btn").should("exist").click();
+    cy.get(".nc-view-action-erd").should("exist").click();
+  }
 }
 
 export const mainPage = new _mainPage();

From 71c856649063d5811967e2a4f8f876924acef46f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 21 Sep 2022 13:13:37 +0530
Subject: [PATCH 58/62] feat(nc-gui): Now menu items will be hidden completly
 instead of the parent dom element persisting

---
 .../smartsheet-toolbar/ViewActions.vue        | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index 5a8d0e2472..d777644670 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -163,9 +163,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 </template>
 
                 <template #expandIcon></template>
-                <a-menu-item>
+                <a-menu-item v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
                   <div
-                    v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
                     v-e="['a:actions:upload-csv']"
                     class="nc-project-menu-item"
                     :class="{ disabled: isLocked }"
@@ -180,13 +179,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               </a-sub-menu>
             </template>
             <a-menu-divider />
-            <a-menu-item>
-              <div
-                v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
-                v-e="['a:actions:shared-view-list']"
-                class="py-2 flex gap-2 items-center"
-                @click="sharedViewListDlg = true"
-              >
+            <a-menu-item v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView">
+              <div v-e="['a:actions:shared-view-list']" class="py-2 flex gap-2 items-center" @click="sharedViewListDlg = true">
                 <MdiViewListOutline class="text-gray-500" />
                 <!-- Shared View List -->
                 {{ $t('activity.listSharedView') }}
@@ -203,13 +197,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 {{ $t('objects.webhooks') }}
               </div>
             </a-menu-item>
-            <a-menu-item>
-              <div
-                v-if="!isSharedBase && !isPublicView"
-                v-e="['c:snippet:open']"
-                class="py-2 flex gap-2 items-center"
-                @click="showApiSnippetDrawer = true"
-              >
+            <a-menu-item v-if="!isSharedBase && !isPublicView">
+              <div v-e="['c:snippet:open']" class="py-2 flex gap-2 items-center" @click="showApiSnippetDrawer = true">
                 <MdiXml class="text-gray-500" />
                 <!-- Get API Snippet -->
                 {{ $t('activity.getApiSnippet') }}

From 8aab03565df40d3b6c810a006fd621b0a755d9ef Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 21 Sep 2022 13:28:25 +0530
Subject: [PATCH 59/62] feat(nc-gui): Integrated menuWithoutSubmenuCount in the
 case of Shared base in roleValidation test

---
 scripts/cypress/integration/spec/roleValidation.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/cypress/integration/spec/roleValidation.spec.js b/scripts/cypress/integration/spec/roleValidation.spec.js
index 4d8f92f125..4edf81f94b 100644
--- a/scripts/cypress/integration/spec/roleValidation.spec.js
+++ b/scripts/cypress/integration/spec/roleValidation.spec.js
@@ -267,7 +267,8 @@ export function _viewMenu(roleType, mode) {
         menuWithSubmenuCount = 2;
         // Get API Snippet and ERD
         menuWithoutSubmenuCount = 2
-        if(mode === 'baseShare') menuWithoutSubmenuCount = 0
+        // ERD
+        if(mode === 'baseShare') menuWithoutSubmenuCount = 1
     } else if (roleType === "commenter" || roleType === "viewer") {
         // Download CSV & Download excel
         menuWithSubmenuCount = 0;

From 560a59b0891d9519a7f7e94fcda9e25514e69761 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 21 Sep 2022 14:44:10 +0530
Subject: [PATCH 60/62] feat(cypress): Integrated ERD with
 menuWithoutSubmenuCount roleValidation test

---
 .../integration/spec/roleValidation.spec.js   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/scripts/cypress/integration/spec/roleValidation.spec.js b/scripts/cypress/integration/spec/roleValidation.spec.js
index 4edf81f94b..e245a63649 100644
--- a/scripts/cypress/integration/spec/roleValidation.spec.js
+++ b/scripts/cypress/integration/spec/roleValidation.spec.js
@@ -254,27 +254,27 @@ export function _viewMenu(roleType, mode) {
   // Lock, Download, Upload
   let menuWithSubmenuCount = 3;
 
-    // share view list, webhook, api snippet, erd
-    let menuWithoutSubmenuCount = 4;
+  // share view list, webhook, api snippet, erd
+  let menuWithoutSubmenuCount = 4;
 
   cy.openTableTab(columnName, 25);
 
   let validationString =
     true === roles[roleType].validations.shareView ? "exist" : "not.exist";
 
-    if (roleType === "editor") {
-        // Download / Upload CSV
-        menuWithSubmenuCount = 2;
-        // Get API Snippet and ERD
-        menuWithoutSubmenuCount = 2
-        // ERD
-        if(mode === 'baseShare') menuWithoutSubmenuCount = 1
-    } else if (roleType === "commenter" || roleType === "viewer") {
-        // Download CSV & Download excel
-        menuWithSubmenuCount = 0;
-        // Get API Snippet and ERD
-        menuWithoutSubmenuCount = 2
-    }
+  if (roleType === "editor") {
+    // Download / Upload CSV
+    menuWithSubmenuCount = 2;
+    // Get API Snippet and ERD
+    menuWithoutSubmenuCount = 2;
+    // ERD
+    if (mode === "baseShare") menuWithoutSubmenuCount = 1;
+  } else if (roleType === "commenter" || roleType === "viewer") {
+    // Download CSV & Download excel
+    menuWithSubmenuCount = 0;
+    // Get API Snippet and ERD
+    menuWithoutSubmenuCount = 2;
+  }
 
   // view list field (default GRID view)
   cy.get(`.nc-view-item`).should("exist");

From febe25b74bbf366dbb2abf1b32253f5d45a93f35 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 21 Sep 2022 14:46:07 +0530
Subject: [PATCH 61/62] feat(nc-gui): Removed unnecasary prop for
 SmartsheetToolbarErd in ViewActions

---
 packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index d777644670..f789ffae0f 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -219,7 +219,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <SmartsheetToolbarErd v-model:modelValue="showErd" />
+    <SmartsheetToolbarErd v-model="showErd" />
 
     <a-modal
       v-model:visible="sharedViewListDlg"

From 454d36a5598d1aa36cb6da82765dac497d980708 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 21 Sep 2022 15:54:17 +0530
Subject: [PATCH 62/62] test: remove additional entry for restMisc suite

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 scripts/cypress/cypress.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/scripts/cypress/cypress.json b/scripts/cypress/cypress.json
index e7bcb774f7..2d162a3676 100644
--- a/scripts/cypress/cypress.json
+++ b/scripts/cypress/cypress.json
@@ -13,8 +13,7 @@
         "test/pg-restViews.js",
         "test/pg-restRoles.js",
         "test/pg-restMisc.js",
-        "test/quickTest.js",
-        "test/restMisc.js"
+        "test/quickTest.js"
     ],
     "defaultCommandTimeout": 13000,
     "pageLoadTimeout": 600000,