feat(nc-gui): Added hide all columns to ERD

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

@@ -12,6 +12,7 @@ interface Props {
   config: {
     showPkAndFk: boolean
     showViews: boolean
+    hideAllColumns: boolean
   }
 }
 
@@ -30,11 +31,15 @@ const populateInitialNodes = () => {
   tables.forEach((table) => {
     if (!table.id) return
 
-    dagreGraph.setNode(table.id, { width: 250, height: 50 * metasWithIdAsKey.value[table.id].columns.length })
+    const columns = metasWithIdAsKey.value[table.id].columns?.filter(
+      (col) => !config.hideAllColumns || (config.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    )
+
+    dagreGraph.setNode(table.id, { width: 250, height: 50 * columns.length })
 
     initialNodes.value.push({
       id: table.id,
-      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk },
+      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, hideAllColumns: config.hideAllColumns },
       type: 'custom',
     })
   })

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@braks/vue-flow'
 import { Handle, Position } from '@braks/vue-flow'
-import type { TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 
 interface Props extends NodeProps {
-  data: TableType & { showPkAndFk: boolean }
+  data: TableType & { showPkAndFk: boolean; hideAllColumns: boolean }
 }
 
 const props = defineProps<Props>()
@@ -21,11 +21,17 @@ const columns = computed(() => {
 })
 
 const pkAndFkColumns = computed(() => {
-  return columns.value?.filter(() => data.value.showPkAndFk).filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
+  return columns.value
+    ?.filter(() => data.value.showPkAndFk && !data.value.hideAllColumns)
+    .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
 })
 
 const nonPkColumns = computed(() => {
-  return columns.value?.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey)
+  return columns.value
+    ?.filter(
+      (col: ColumnType) => !data.value.hideAllColumns || (data.value.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    )
+    .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
 
 const relatedColumnId = (col: Record<string, any>) =>
@@ -34,7 +40,7 @@ const relatedColumnId = (col: Record<string, any>) =>
 
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
-    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full pl-3 bg-gray-100 font-semibold">
+    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full px-3 bg-gray-100 font-semibold">
       {{ data.title }}
     </div>
     <div>

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

@@ -13,6 +13,7 @@ let isLoading = $ref(true)
 const config = ref({
   showPkAndFk: true,
   showViews: false,
+  hideAllColumns: false,
 })
 
 const tables = computed(() => {
@@ -49,6 +50,15 @@ onMounted(async () => {
 const tablesFilteredWithConfig = computed(() =>
   tables.value.filter((table) => (!config.value.showViews && table.type !== 'view') || config.value.showViews),
 )
+
+watch(
+  () => config.value.hideAllColumns,
+  () => {
+    if (config.value.hideAllColumns) {
+      config.value.showPkAndFk = false
+    }
+  },
+)
 </script>
 
 <template>
@@ -70,6 +80,10 @@ const tablesFilteredWithConfig = computed(() =>
           <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 class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.hideAllColumns" v-e="['c:erd:hideAllColumns']" />
+          <span class="ml-2" style="font-size: 0.65rem">Hide all columns</span>
+        </div>
       </div>
     </div>
   </div>