feat/Added enable view option in ERD

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 Erd from './erd/Erd.vue'
-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()
 
 const { tables } = useProject()
 
-const { metas, getMeta, metasWithId } = useMetas()
+const { metas, getMeta } = useMetas()
-
-const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([])
-
-const nodes = ref<Node[]>([])
-
-const edges = ref<Edge[]>([])
 
 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 = () => {
+onMounted(async () => {
-  tables.value
+  await loadMetaOfTablesNotInMetas()
-    .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()
-
   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">
+    <Erd :key="JSON.stringify(config)" :tables="localTables" :config="config" />
-      <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">

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>