feat(nc-gui): Added option to show junction table name in ERD

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']

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"

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,
       },
     }
   })

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>

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": {