refactor(nc-gui): move panels into separate components

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { Panel } from '@vue-flow/additional-components'
+import type { ERDConfig } from './utils'
+import { ref, useGlobal, useVModel } from '#imports'
+
+const props = defineProps<{
+  config: ERDConfig
+}>()
+
+const { includeM2M } = useGlobal()
+
+const config = useVModel(props, 'config')
+
+const showAdvancedOptions = ref(false)
+</script>
+
+<template>
+  <Panel class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu" position="top-right">
+    <div class="flex items-center gap-2">
+      <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" class="nc-erd-showColumns-checkbox" />
+      <span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
+        {{ $t('activity.erd.showColumns') }}
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <a-checkbox
+        v-model:checked="config.showPkAndFk"
+        v-e="['c:erd:showPkAndFk']"
+        class="nc-erd-showPkAndFk-checkbox"
+        :class="{
+          'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
+          'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
+          'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
+          'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
+        }"
+        :disabled="!config.showAllColumns"
+      />
+      <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
+    </div>
+
+    <div v-if="!config.singleTableMode" class="flex items-center gap-2">
+      <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
+      <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
+    </div>
+
+    <div v-if="!config.singleTableMode && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+      <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
+      <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
+    </div>
+
+    <div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
+      <a-checkbox
+        v-model:checked="config.showJunctionTableNames"
+        v-e="['c:erd:showJunctionTableNames']"
+        class="nc-erd-showJunctionTableNames-checkbox"
+      />
+      <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
+    </div>
+  </Panel>
+</template>

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Background, Controls, Panel } from '@vue-flow/additional-components'
+import { Background, Controls } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import type { TableType } from 'nocodb-sdk'
-import type { ErdFlowConfig } from './utils'
+import type { ERDConfig } from './utils'
 import { useErdElements } from './utils'
 import { computed, onScopeDispose, toRefs, watch } from '#imports'
 
 interface Props {
   tables: TableType[]
-  config: ErdFlowConfig
+  config: ERDConfig
 }
 
 const props = defineProps<Props>()
@@ -77,24 +77,6 @@ onScopeDispose($destroy)
 
     <Background :size="showSkeleton ? 2 : undefined" :gap="showSkeleton ? 50 : undefined" />
 
-    <Panel
-      v-if="!config.singleTableMode"
-      class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram"
-      position="bottom-right"
-    >
-      <div class="flex flex-col divide-y-1">
-        <div class="flex items-center gap-1 p-2">
-          <MdiTableLarge class="text-primary" />
-          <div>{{ $t('objects.table') }}</div>
-        </div>
-
-        <div class="flex items-center gap-1 p-2">
-          <MdiEyeCircleOutline class="text-primary" />
-          <div>{{ $t('objects.sqlVIew') }}</div>
-        </div>
-      </div>
-    </Panel>
-
     <Transition name="layout">
       <div
         v-if="showSkeleton && config.showAllColumns"

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

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Panel } from '@vue-flow/additional-components'
+</script>
+
+<template>
+  <Panel class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram" position="bottom-right">
+    <div class="flex flex-col divide-y-1">
+      <div class="flex items-center gap-1 p-2">
+        <MdiTableLarge class="text-primary" />
+        <div>{{ $t('objects.table') }}</div>
+      </div>
+
+      <div class="flex items-center gap-1 p-2">
+        <MdiEyeCircleOutline class="text-primary" />
+        <div>{{ $t('objects.sqlVIew') }}</div>
+      </div>
+    </div>
+  </Panel>
+</template>

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

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { Panel } from '@vue-flow/additional-components'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import type { ErdFlowConfig } from './utils'
-import { reactive, ref, useGlobal, useMetas, useProject, watch } from '#imports'
+import type { ERDConfig } from './utils'
+import { reactive, ref, useMetas, useProject, watch } from '#imports'
 
 const { table } = defineProps<{ table?: TableType }>()
 
-const { includeM2M } = useGlobal()
-
 const { tables: projectTables } = useProject()
 
 const { metas, getMeta } = useMetas()
@@ -17,9 +14,7 @@ const tables = ref<TableType[]>([])
 
 let isLoading = $ref(true)
 
-const showAdvancedOptions = ref(false)
-
-const config = reactive<ErdFlowConfig>({
+const config = reactive<ERDConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
@@ -106,56 +101,8 @@ watch(
           </div>
         </GeneralOverlay>
 
-        <Panel
-          class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu"
-          position="top-right"
-        >
-          <div class="flex items-center gap-2">
-            <a-checkbox
-              v-model:checked="config.showAllColumns"
-              v-e="['c:erd:showAllColumns']"
-              class="nc-erd-showColumns-checkbox"
-            />
-            <span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
-              {{ $t('activity.erd.showColumns') }}
-            </span>
-          </div>
-
-          <div class="flex items-center gap-2">
-            <a-checkbox
-              v-model:checked="config.showPkAndFk"
-              v-e="['c:erd:showPkAndFk']"
-              class="nc-erd-showPkAndFk-checkbox"
-              :class="{
-                'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
-                'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
-                'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
-                'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
-              }"
-              :disabled="!config.showAllColumns"
-            />
-            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
-          </div>
-
-          <div v-if="!table" class="flex items-center gap-2">
-            <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
-            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
-          </div>
-
-          <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
-            <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
-            <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
-          </div>
-
-          <div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
-            <a-checkbox
-              v-model:checked="config.showJunctionTableNames"
-              v-e="['c:erd:showJunctionTableNames']"
-              class="nc-erd-showJunctionTableNames-checkbox"
-            />
-            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
-          </div>
-        </Panel>
+        <ErdConfigPanel :config="config" />
+        <ErdHistogramPanel v-if="!config.singleTableMode" />
       </LazyErdFlow>
     </div>
   </div>

packages/nc-gui/components/erd/utils.ts

@@ -8,7 +8,7 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale'
 import tinycolor from 'tinycolor2'
 import { computed, ref, unref, useMetas, useTheme } from '#imports'
 
-export interface ErdFlowConfig {
+export interface ERDConfig {
   showPkAndFk: boolean
   showViews: boolean
   showAllColumns: boolean
@@ -47,7 +47,7 @@ interface Relation {
 const nodeWidth = 300
 const nodeHeight = 50
 
-export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ErdFlowConfig>) {
+export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ERDConfig>) {
   const elements = ref<Elements<NodeData | EdgeData>>([])
 
   const { theme } = useTheme()