fix: 模型演化调整线的颜色、文本边框

react-ui/src/pages/Model/components/ModelEvolution/index.tsx

@@ -12,7 +12,14 @@ import GraphLegend from '../GraphLegend';
 import NodeTooltips from '../NodeTooltips';
 import styles from './index.less';
 import type { ModelDepsData, ProjectDependency, TrainDataset } from './utils';
-import { NodeType, getGraphData, nodeHeight, nodeWidth, normalizeTreeData } from './utils';
+import {
+  NodeType,
+  getGraphData,
+  nodeFontSize,
+  nodeHeight,
+  nodeWidth,
+  normalizeTreeData,
+} from './utils';
 
 type modeModelEvolutionProps = {
   resourceId: number;
@@ -73,7 +80,7 @@ function ModelEvolution({
       width: graphRef.current!.clientWidth,
       height: graphRef.current!.clientHeight,
       fitView: true,
-      fitViewPadding: [50, 100, 50, 100],
+      fitViewPadding: [100, 100, 100, 100],
       minZoom: 0.5,
       maxZoom: 5,
       defaultNode: {
@@ -95,7 +102,7 @@ function ModelEvolution({
           position: 'center',
           style: {
             fill: '#ffffff',
-            fontSize: 8,
+            fontSize: nodeFontSize,
             textAlign: 'center',
             cursor: 'pointer',
           },
@@ -107,7 +114,7 @@ function ModelEvolution({
           autoRotate: true,
         },
         style: {
-          stroke: '#a2c1ff',
+          stroke: '#DEE0E5',
           lineWidth: 1,
         },
       },

react-ui/src/pages/Model/components/ModelEvolution/utils.tsx

@@ -6,8 +6,10 @@ import Hierarchy from '@antv/hierarchy';
 export const nodeWidth = 110;
 export const nodeHeight = 50;
 export const vGap = nodeHeight + 20;
-export const hGap = nodeHeight + 20;
+export const hGap = nodeWidth;
 export const ellipseWidth = nodeWidth;
+export const labelPadding = 30;
+export const nodeFontSize = 8;
 
 // 数据集节点
 const datasetNodes: NodeConfig[] = [];
@@ -94,9 +96,13 @@ export function normalizeChildren(data: ModelDepsData[]) {
 // 获取 label
 export function getLabel(node: ModelDepsData | ModelDepsAPIData) {
   return (
-    fittingString(`${node.model_version_dependcy_vo.name ?? ''}`, nodeWidth - 12, 8) +
+    fittingString(
+      `${node.model_version_dependcy_vo.name ?? ''}`,
+      nodeWidth - labelPadding,
+      nodeFontSize,
+    ) +
     '\n' +
-    fittingString(`${node.version}`, nodeWidth - 12, 8)
+    fittingString(`${node.version}`, nodeWidth - labelPadding, nodeFontSize)
   );
 }
 
@@ -231,9 +237,9 @@ const addDatasetDependency = (
     node.type = 'ellipse';
     node.size = [ellipseWidth, nodeHeight];
     node.label =
-      fittingString(node.dataset_name, ellipseWidth - 12, 8) +
+      fittingString(node.dataset_name, ellipseWidth - labelPadding, nodeFontSize) +
       '\n' +
-      fittingString(node.dataset_version, ellipseWidth - 12, 8);
+      fittingString(node.dataset_version, ellipseWidth - labelPadding, nodeFontSize);
 
     const half = len / 2 - 0.5;
     node.x = currentNode.x! - (half - index) * (ellipseWidth + hGap / 2);
@@ -263,7 +269,7 @@ const addProjectDependency = (
     node.id = `$P_${node.url}_${node.branch}`;
     node.model_type = NodeType.project;
     node.type = 'rect';
-    node.label = fittingString(node.name, nodeWidth - 12, 8);
+    node.label = fittingString(node.name, nodeWidth - labelPadding, nodeFontSize);
     node.style = getStyle(NodeType.project);
     node.style.radius = nodeHeight / 2;
     node.x = currentNode.x;