feat(nc-gui): Moved repeated logic of erd to ErdView component and renaned old ErdView as ErdSimpleView

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>

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>

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>

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>