feat(nc-gui): Removed unnecassry icon import and fixed reactivity issue in RelationEdge

packages/nc-gui/components.d.ts

@@ -190,6 +190,7 @@ declare module '@vue/runtime-core' {
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']

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

@@ -53,12 +53,12 @@ const props = defineProps({
   },
 })
 
-const { column, isSelfRelation, label } = toRefs(props.data)
+const data = toRef(props, 'data')
 
-const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm')
+const isManyToMany = computed(() => data.value.column?.colOptions?.type === 'mm')
 
 const edgePath = computed(() => {
-  if (isSelfRelation.value) {
+  if (data.value.isSelfRelation) {
     const { sourceX, sourceY, targetX, targetY } = props
     const radiusX = (sourceX - targetX) * 0.6
     const radiusY = 50
@@ -112,11 +112,11 @@ export default {
   />
 
   <EdgeText
-    v-if="label?.length > 0"
-    :class="`nc-erd-table-label-${label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
+    v-if="data.label?.length > 0"
+    :class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
     :x="center[0]"
     :y="center[1]"
-    :label="label"
+    :label="data.label"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
     :label-bg-style="{ fill: '#10b981' }"

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

@@ -4,8 +4,6 @@ import { Handle, Position } from '@braks/vue-flow'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props extends NodeProps {
   data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
@@ -54,7 +52,7 @@ const relatedColumnId = (col: Record<string, any>) =>
         class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
       >
         <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
-        <MdiView v-else class="text-primary" />
+        <MdiEyeCircleOutline v-else class="text-primary" />
         <div class="flex pl-1.5">
           {{ data.title }}
         </div>