Browse Source

feat/Added enable view option in ERD

pull/3612/head
Muhammed Mustafa 2 years ago
parent
commit
757166ce74
  1. 164
      packages/nc-gui/components/dashboard/settings/Erd.vue
  2. 133
      packages/nc-gui/components/dashboard/settings/erd/Erd.vue

164
packages/nc-gui/components/dashboard/settings/Erd.vue

@ -1,25 +1,9 @@
<script setup lang="ts"> <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 { 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) let isLoading = $ref(true)
@ -28,7 +12,7 @@ const config = ref({
showViews: false, showViews: false,
}) })
const loadMetasOfTablesNotInMetas = async () => { const loadMetaOfTablesNotInMetas = async () => {
await Promise.all( await Promise.all(
tables.value tables.value
.filter((table) => !metas.value[table.id!]) .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 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> </script>
<template> <template>
<div v-if="isLoading" style="height: 650px"></div> <div v-if="isLoading" style="height: 650px"></div>
<div v-else class="relative" style="height: 650px"> <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="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"> <div class="flex flex-row items-center">

133
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>
Loading…
Cancel
Save