From 4ece1c4f1720b84ec1c1d66420d469bc0a5a6701 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 17 Oct 2022 14:06:49 +0200
Subject: [PATCH] refactor(nc-gui): lower skeleton threshold

---
 packages/nc-gui/components/erd/Flow.vue       | 12 ++++++--
 .../nc-gui/components/erd/RelationEdge.vue    | 10 ++-----
 packages/nc-gui/components/erd/TableNode.vue  | 16 +++-------
 packages/nc-gui/components/erd/utils.ts       | 30 +++++++++++++++----
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
index bca1db9966..8a75272030 100644
--- a/packages/nc-gui/components/erd/Flow.vue
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -19,7 +19,7 @@ const { $destroy, fitView, onPaneReady, viewport, onNodeDoubleClick } = useVueFl
 
 const { layout, elements } = useErdElements(tables, config)
 
-const showSkeleton = computed(() => viewport.value.zoom < 0.25)
+const showSkeleton = computed(() => viewport.value.zoom < 0.2)
 
 function init() {
   layout(showSkeleton.value)
@@ -29,10 +29,16 @@ function init() {
 }
 
 function zoomIn(nodeId?: string) {
-  fitView({ nodes: nodeId ? [nodeId] : undefined, duration: 300, minZoom: 0.4 })
+  fitView({ nodes: nodeId ? [nodeId] : undefined, duration: 300, minZoom: 0.3 })
 }
 
-onPaneReady(init)
+onPaneReady(() => {
+  layout(showSkeleton.value)
+
+  setTimeout(() => {
+    fitView({ duration: 250, padding: 0.5 })
+  }, 100)
+})
 
 onNodeDoubleClick(({ node }) => {
   if (showSkeleton.value) zoomIn()
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index bc847c0a98..e81009d0bb 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -2,9 +2,10 @@
 import type { EdgeProps, Position } from '@vue-flow/core'
 import { EdgeText, getBezierPath } from '@vue-flow/core'
 import type { CSSProperties } from '@vue/runtime-dom'
+import type { EdgeData } from './utils'
 import { computed, toRef } from '#imports'
 
-interface RelationEdgeProps extends EdgeProps {
+interface RelationEdgeProps extends EdgeProps<EdgeData> {
   id: string
   sourceX: number
   sourceY: number
@@ -12,12 +13,7 @@ interface RelationEdgeProps extends EdgeProps {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  data: {
-    isManyToMany: boolean
-    isSelfRelation: boolean
-    label: string
-    color: string
-  }
+  data: EdgeData
   style: CSSProperties
   selected?: boolean
   showSkeleton: boolean
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 99b08acbcd..f0ec6a09a9 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -1,19 +1,11 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { NodeData } from './utils'
 import { MetaInj, computed, provide, toRef, useNuxtApp } from '#imports'
 
-interface NodeData {
-  table: TableType
-  pkAndFkColumns: ColumnType[]
-  nonPkColumns: ColumnType[]
-  showPkAndFk: boolean
-  showAllColumns: boolean
-  color: string
-}
-
 interface Props extends NodeProps<NodeData> {
   data: NodeData
   showSkeleton: boolean
@@ -35,10 +27,10 @@ const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumn
 
 <template>
   <div
-    class="relative h-full flex flex-col justify-center items-center bg-slate-50 min-w-16 rounded-lg nc-erd-table-node"
+    class="relative h-full flex flex-col justify-center bg-slate-50 min-w-16 min-h-8 rounded-lg nc-erd-table-node"
     :class="[
       `nc-erd-table-node-${table.table_name}`,
-      showSkeleton ? 'cursor-pointer bg-slate-200 min-h-200px min-w-300px px-4' : '',
+      showSkeleton ? 'cursor-pointer items-center bg-slate-200 min-h-200px min-w-300px px-4' : '',
     ]"
     @click="$e('c:erd:node-click')"
   >
diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts
index 65aecd7471..ad4c0d13d1 100644
--- a/packages/nc-gui/components/erd/utils.ts
+++ b/packages/nc-gui/components/erd/utils.ts
@@ -1,7 +1,7 @@
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
-import type { Edge, EdgeMarker, Elements } from '@vue-flow/core'
+import type { Edge, EdgeMarker, Elements, Node } from '@vue-flow/core'
 import type { MaybeRef } from '@vueuse/core'
 import { MarkerType, Position, isEdge, isNode } from '@vue-flow/core'
 import { scaleLinear as d3ScaleLinear } from 'd3-scale'
@@ -17,6 +17,24 @@ export interface ErdFlowConfig {
   showMMTables: boolean
 }
 
+export interface NodeData {
+  table: TableType
+  pkAndFkColumns: ColumnType[]
+  nonPkColumns: ColumnType[]
+  showPkAndFk: boolean
+  showAllColumns: boolean
+  color: string
+  columnLength: number
+}
+
+export interface EdgeData {
+  isManyToMany: boolean
+  isSelfRelation: boolean
+  label?: string
+  simpleLabel?: string
+  color: string
+}
+
 interface Relation {
   source: string
   target: string
@@ -144,7 +162,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
   }
 
   function createNodes() {
-    return erdTables.value.flatMap((table) => {
+    return erdTables.value.flatMap<Node<NodeData>[]>((table) => {
       if (!table.id) return []
 
       const columns =
@@ -173,13 +191,13 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
           },
           type: 'custom',
           position: { x: 0, y: 0 },
-        },
+        } as Node<NodeData>,
       ]
     })
   }
 
   function createEdges() {
-    return relations.value.reduce<Edge[]>((acc, { source, target, childColId, parentColId, type, modelId }) => {
+    return relations.value.reduce<Edge<EdgeData>[]>((acc, { source, target, childColId, parentColId, type, modelId }) => {
       let sourceColumnId, targetColumnId
 
       if (type === 'hm') {
@@ -218,7 +236,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
           label: edgeLabel({ type, source, target, childColId, parentColId, modelId }),
           simpleLabel: edgeLabel({ type, source, target, childColId, parentColId, modelId }, true),
         },
-      } as Edge)
+      })
 
       return acc
     }, [])
@@ -263,7 +281,7 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
   }
 
   const layout = (skeleton = false) => {
-    elements.value = [...createNodes(), ...createEdges()]
+    elements.value = [...createNodes(), ...createEdges()] as Elements<NodeData | EdgeData>
 
     elements.value.forEach((el) => {
       if (isNode(el)) {