feat(nc-gui): Now show PKFK button is disabled when showColumns option is unchecked and title of mm junction table is shown on the edges if its option is set

packages/nc-gui/components/erd/SimpleView.vue

@@ -83,6 +83,14 @@ const populateEdges = () => {
     return acc
   }, [] as ColumnType[])
 
+  const edgeMMTableLabel = (modelId: string) => {
+    const mmModel = metasWithIdAsKey.value[modelId]
+    if (mmModel.title !== mmModel.table_name) {
+      return `${mmModel.title} (${mmModel.table_name})`
+    }
+    return mmModel.title
+  }
+
   edges.value = ltarColumns.map((column) => {
     const source = column.fk_model_id!
     const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
@@ -98,8 +106,7 @@ const populateEdges = () => {
       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
+        config.showJunctionTableNames && edgeMMTableLabel((column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!)
     }
 
     if (source !== target) dagreGraph.setEdge(source, target)
@@ -109,7 +116,7 @@ const populateEdges = () => {
       // rerender after 200ms
       setTimeout(() => {
         vueFlowKey.value = 1
-      }, 200)
+      }, 350)
     }
 
     return {

packages/nc-gui/components/erd/View.vue

@@ -104,7 +104,7 @@ watch(
           }}</span>
         </div>
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" :disabled="!config.showAllColumns" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
@@ -115,7 +115,7 @@ watch(
           <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">
+        <div v-if="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>