mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
2 years ago
4 changed files with 201 additions and 228 deletions
@ -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> |
<template> |
||||||
<div class="w-full" style="height: 70vh"> |
<div class="w-full h-full !py-0 !px-2" style="height: 70vh"> |
||||||
<div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center"> |
<ErdView /> |
||||||
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
@ -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> |
@ -1,140 +1,76 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import type { Edge, Node } from '@braks/vue-flow' |
import type { TableType } from 'nocodb-sdk' |
||||||
import { Background, Controls, VueFlow } from '@braks/vue-flow' |
|
||||||
import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk' |
|
||||||
import { UITypes } from 'nocodb-sdk' |
import { UITypes } from 'nocodb-sdk' |
||||||
import dagre from 'dagre' |
|
||||||
import TableNode from './TableNode.vue' |
|
||||||
import RelationEdge from './RelationEdge.vue' |
|
||||||
|
|
||||||
interface Props { |
const { table } = defineProps<{ table?: TableType }>() |
||||||
tables: any[] |
|
||||||
config: { |
|
||||||
showPkAndFk: boolean |
|
||||||
showViews: boolean |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const { tables, config } = defineProps<Props>() |
|
||||||
|
|
||||||
const { metasWithIdAsKey } = useMetas() |
|
||||||
|
|
||||||
const initialNodes = ref<Pick<Node, 'id' | 'data' | 'type'>[]>([]) |
const { tables: projectTables } = useProject() |
||||||
const nodes = ref<Node[]>([]) |
|
||||||
const edges = ref<Edge[]>([]) |
|
||||||
|
|
||||||
const dagreGraph = new dagre.graphlib.Graph() |
const { metas, getMeta } = useMetas() |
||||||
dagreGraph.setDefaultEdgeLabel(() => ({})) |
|
||||||
|
|
||||||
const populateInitialNodes = () => { |
let isLoading = $ref(true) |
||||||
tables.forEach((table) => { |
|
||||||
if (!table.id) return |
|
||||||
|
|
||||||
dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithIdAsKey.value[table.id].columns.length }) |
const config = ref({ |
||||||
|
showPkAndFk: true, |
||||||
initialNodes.value.push({ |
showViews: false, |
||||||
id: table.id, |
|
||||||
data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk }, |
|
||||||
type: 'custom', |
|
||||||
}) |
|
||||||
}) |
}) |
||||||
|
|
||||||
dagreGraph.setGraph({ rankdir: 'LR' }) |
const tables = computed(() => { |
||||||
} |
if (table) { |
||||||
|
// if table is provided only get the table and its related tables |
||||||
const populateEdges = () => { |
return projectTables.value.filter( |
||||||
const ltarColumns = tables.reduce<ColumnType[]>((acc, table) => { |
(t) => |
||||||
const meta = metasWithIdAsKey.value[table.id!] |
t.id === table.id || |
||||||
const columns = meta.columns?.filter( |
table.columns?.find( |
||||||
(column: ColumnType) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1, |
(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') { |
return projectTables.value |
||||||
// 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 |
const loadMetaOfTablesNotInMetas = async () => { |
||||||
}, [] as ColumnType[]) |
await Promise.all( |
||||||
|
tables.value |
||||||
edges.value = ltarColumns.map((column) => { |
.filter((table) => !metas.value[table.id!]) |
||||||
const source = column.fk_model_id! |
.map(async (table) => { |
||||||
const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id! |
await getMeta(table.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 = () => { |
onMounted(async () => { |
||||||
dagre.layout(dagreGraph) |
await loadMetaOfTablesNotInMetas() |
||||||
|
|
||||||
nodes.value = initialNodes.value.flatMap((node) => { |
|
||||||
const nodeWithPosition = dagreGraph.node(node.id) |
|
||||||
|
|
||||||
if (!nodeWithPosition) return [] |
isLoading = false |
||||||
|
|
||||||
return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node] |
|
||||||
}) |
}) |
||||||
} |
|
||||||
|
|
||||||
onBeforeMount(async () => { |
const tablesFilteredWithConfig = computed(() => |
||||||
populateInitialNodes() |
tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews), |
||||||
populateEdges() |
) |
||||||
layoutNodes() |
|
||||||
}) |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :elevate-edges-on-select="true"> |
<div class="w-full" style="height: inherit"> |
||||||
<Controls class="!left-auto right-2 !top-2 !bottom-auto" :show-fit-view="false" :show-interactive="false" /> |
<div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center"> |
||||||
|
<div class="flex flex-row justify-center"> |
||||||
<template #node-custom="props"> |
<a-spin size="large" /> |
||||||
<TableNode :data="props.data" /> |
</div> |
||||||
</template> |
</div> |
||||||
|
<div v-else class="relative h-full"> |
||||||
<template #edge-custom="props"> |
<ErdSimpleView :key="JSON.stringify(config)" :tables="tablesFilteredWithConfig" :config="config" /> |
||||||
<RelationEdge v-bind="props" /> |
|
||||||
</template> |
<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"> |
||||||
<Background /> |
<div class="flex flex-row items-center"> |
||||||
</VueFlow> |
<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> |
</template> |
||||||
|
@ -1,62 +1,9 @@ |
|||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import { UITypes } from 'nocodb-sdk' |
|
||||||
|
|
||||||
const { tables } = useProject() |
|
||||||
|
|
||||||
const { metas, getMeta } = useMetas() |
|
||||||
const meta = inject(MetaInj) |
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> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div class="w-full" style="height: 70vh"> |
<div class="w-full h-full !py-0 !px-2" style="height: 70vh"> |
||||||
<div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center"> |
<ErdView :table="meta" /> |
||||||
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
Loading…
Reference in new issue