feat(nc-gui): show tooltip on zoom-out

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@vue-flow/core'
-import { Handle, Position } from '@vue-flow/core'
+import { Handle, Position, useVueFlow } from '@vue-flow/core'
 import type { LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { NodeData } from './utils'
@@ -13,6 +13,8 @@ interface Props extends NodeProps<NodeData> {
 
 const { data, showSkeleton } = defineProps<Props>()
 
+const { viewport } = useVueFlow()
+
 const table = toRef(data, 'table')
 
 provide(MetaInj, table)
@@ -26,17 +28,22 @@ const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumn
 </script>
 
 <template>
-  <div
-    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 items-center bg-slate-200 min-h-200px min-w-300px px-4' : '',
-    ]"
-    @click="$e('c:erd:node-click')"
+  <GeneralTooltip
+    class="h-full flex flex-1 justify-center items-center"
+    :modifier-key="showSkeleton || viewport.zoom > 0.35 ? 'Alt' : undefined"
   >
-    <GeneralTooltip class="h-full flex flex-1 justify-center items-center" modifier-key="Alt">
-      <template #title> {{ table.table_name }} </template>
-
+    <template #title>
+      <div class="capitalize">{{ table.table_name }}</div>
+    </template>
+
+    <div
+      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 items-center bg-slate-200 min-h-200px min-w-300px px-4' : '',
+      ]"
+      @click="$e('c:erd:node-click')"
+    >
       <div
         :class="[showSkeleton ? '' : 'bg-primary bg-opacity-10', hasColumns ? 'border-b-1' : '']"
         class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
@@ -48,69 +55,67 @@ const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumn
           {{ table.title }}
         </div>
       </div>
-    </GeneralTooltip>
-
-    <div v-if="showSkeleton">
-      <Handle style="left: -20px" class="opacity-0" :position="Position.Left" type="target" :connectable="false" />
-      <Handle style="right: -15px" class="opacity-0" :position="Position.Right" type="source" :connectable="false" />
-    </div>
 
-    <div v-else-if="hasColumns">
-      <div
-        v-for="col in data.pkAndFkColumns"
-        :key="col.title"
-        class="w-full border-b-1 py-2 border-slate-200 bg-slate-100"
-        :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
-      >
-        <LazySmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
+      <div v-if="showSkeleton">
+        <Handle style="left: -20px" class="opacity-0" :position="Position.Left" type="target" :connectable="false" />
+        <Handle style="right: -15px" class="opacity-0" :position="Position.Right" type="source" :connectable="false" />
       </div>
 
-      <div v-if="data.nonPkColumns.length" class="w-full mb-1"></div>
-
-      <div v-for="(col, index) in data.nonPkColumns" :key="col.title">
+      <div v-else-if="hasColumns">
         <div
-          class="relative w-full h-full flex items-center min-w-32 border-slate-200 py-2 px-1"
-          :class="index + 1 === data.nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
+          v-for="col in data.pkAndFkColumns"
+          :key="col.title"
+          class="w-full h-full min-w-32 border-b-1 py-2 px-1 border-slate-200 bg-slate-100"
+          :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
         >
+          <LazySmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
+        </div>
+
+        <div v-for="(col, index) in data.nonPkColumns" :key="col.title">
           <div
-            v-if="col.uidt === UITypes.LinkToAnotherRecord"
-            class="flex w-full"
-            :class="`nc-erd-table-node-${table.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
+            class="relative w-full h-full flex items-center min-w-32 border-slate-200 py-2 px-1"
+            :class="index + 1 === data.nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
           >
-            <Handle
-              :id="`s-${relatedColumnId(col.colOptions)}-${table.id}`"
-              class="opacity-0 !right-[-1px]"
-              type="source"
-              :position="Position.Right"
-              :connectable="false"
+            <div
+              v-if="col.uidt === UITypes.LinkToAnotherRecord"
+              class="flex w-full"
+              :class="`nc-erd-table-node-${table.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
+            >
+              <Handle
+                :id="`s-${relatedColumnId(col.colOptions)}-${table.id}`"
+                class="opacity-0 !right-[-1px]"
+                type="source"
+                :position="Position.Right"
+                :connectable="false"
+              />
+
+              <Handle
+                :id="`d-${relatedColumnId(col.colOptions)}-${table.id}`"
+                class="opacity-0 !left-[-1px]"
+                type="target"
+                :position="Position.Left"
+                :connectable="false"
+              />
+
+              <LazySmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
+            </div>
+
+            <LazySmartsheetHeaderVirtualCell
+              v-else-if="isVirtualCol(col)"
+              :column="col"
+              :hide-menu="true"
+              :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
             />
 
-            <Handle
-              :id="`d-${relatedColumnId(col.colOptions)}-${table.id}`"
-              class="opacity-0 !left-[-1px]"
-              type="target"
-              :position="Position.Left"
-              :connectable="false"
+            <LazySmartsheetHeaderCell
+              v-else
+              :column="col"
+              :hide-menu="true"
+              :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
             />
-
-            <LazySmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
           </div>
-
-          <LazySmartsheetHeaderVirtualCell
-            v-else-if="isVirtualCol(col)"
-            :column="col"
-            :hide-menu="true"
-            :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
-          />
-
-          <LazySmartsheetHeaderCell
-            v-else
-            :column="col"
-            :hide-menu="true"
-            :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
-          />
         </div>
       </div>
     </div>
-  </div>
+  </GeneralTooltip>
 </template>