style: update component styles for improved layout and readability across LineageGraph, TableEdge, and TableNode

Author: feynmx

packages/ldp/src/components/LineageGraph.vue

@@ -426,7 +426,7 @@ provide('taskReplicateLagMap', taskReplicateLagMap)
       v-model:nodes="nodes"
       v-model:edges="edges"
       v-loading="loading"
-      class="border rounded-xl bg-white dark:bg-overlay"
+      class="border rounded-xl bg-white dark:bg-overlay text-xs"
       @nodes-initialized="handleLayoutGraph"
       @node-double-click="onNodeDoubleClick"
     >

packages/ldp/src/components/TableEdge.vue

@@ -67,7 +67,7 @@ const openTaskPopover = (ev: MouseEvent) => {
       class="nodrag nopan"
     >
       <div
-        class="table-lineage-connection-label flex overflow-hidden rounded-lg bg-white dark:bg-overlay border"
+        class="table-lineage-connection-label flex overflow-hidden rounded-lg bg-light dark:bg-overlay zoom-xs"
       >
         <div
           class="min-w-0 p-1 label-content clickable"
@@ -78,7 +78,7 @@ const openTaskPopover = (ev: MouseEvent) => {
             <OverflowTooltip
               :text="tasks[0].name"
               append-to="#table-lineage-graph"
-              class="min-w-0"
+              class="min-w-0 text-xs font-color-light"
             />
             <!-- <span
               class="overflow-hidden clickable ellipsis px-1 rounded-4"
@@ -97,7 +97,7 @@ const openTaskPopover = (ev: MouseEvent) => {
             append-to="#table-lineage-graph"
           >
             <div
-              class="inline-flex align-center gap-1 rounded-4 px-1 py-0.5"
+              class="inline-flex align-center gap-1 rounded-4 px-1 py-0.5 zoom-xs"
               style="background-color: var(--bg-code)"
             >
               <el-icon class="font-color-sslight" size="12"

packages/ldp/src/components/TableNode.vue

@@ -81,13 +81,13 @@ function handleTargetClick() {
     class="border rounded-2xl bg-white dark:bg-overlay shadow-sm table-node"
     :class="{ active }"
   >
-    <div class="p-2">
+    <div class="p-1.5">
       <template v-if="data.type === 'apiserverLineage'">
         <div class="flex align-center gap-2">
           <div
-            class="p-1 bg-gray-100 dark:bg-white/15 rounded-lg flex align-center justify-center table-item-icon mt-0.5"
+            class="p-1 bg-gray-100 dark:bg-white/15 rounded-lg flex align-center justify-center table-item-icon"
           >
-            <el-icon size="18" class="font-color-sslight"
+            <el-icon size="16" class="font-color-sslight"
               ><i-lucide-link-2
             /></el-icon>
           </div>
@@ -107,11 +107,11 @@ function handleTargetClick() {
         </div>
       </template>
       <template v-else>
-        <div class="flex align-items-start gap-2">
+        <div class="flex align-items-center gap-1.5">
           <div
-            class="p-1 bg-gray-100 dark:bg-white/15 rounded-lg flex align-center justify-center table-item-icon mt-0.5"
+            class="p-1 bg-gray-100 dark:bg-white/15 rounded-lg flex align-center justify-center table-item-icon"
           >
-            <el-icon size="18" class="font-color-light"
+            <el-icon size="16" class="font-color-light"
               ><i-lucide-table
             /></el-icon>
           </div>

packages/ldp/src/composables/useLayout.ts

@@ -22,7 +22,7 @@ export function useLayout() {
     dagreGraph.setDefaultEdgeLabel(() => ({}))
 
     const isHorizontal = direction === 'LR'
-    dagreGraph.setGraph({ nodesep: 220, ranksep: 220, rankdir: direction })
+    dagreGraph.setGraph({ nodesep: 60, ranksep: 160, rankdir: direction })
 
     previousDirection.value = direction