feat: 模型演化添加数据集legend

react-ui/src/pages/Model/components/GraphLegand/index.tsx → react-ui/src/pages/Model/components/GraphLegend/index.tsx

@@ -1,19 +1,19 @@
 import { Flex } from 'antd';
 import styles from './index.less';
 
-type GraphLegandData = {
+type GraphLegendData = {
   name: string;
   color: string;
-  radius: number;
+  radius: number | string;
   fill: boolean;
 };
 
-type GraphLegandProps = {
+type GraphLegendProps = {
   style?: React.CSSProperties;
 };
 
-function GraphLegand({ style }: GraphLegandProps) {
-  const legends: GraphLegandData[] = [
+function GraphLegend({ style }: GraphLegendProps) {
+  const legends: GraphLegendData[] = [
     {
       name: '父模型',
       color: 'linear-gradient(305deg,#43c9b1 0%,#93dfd1 100%)',
@@ -32,6 +32,24 @@ function GraphLegand({ style }: GraphLegandProps) {
       radius: 2,
       fill: true,
     },
+    {
+      name: '训练数据集',
+      color: '#a5d878',
+      radius: '50%',
+      fill: true,
+    },
+    {
+      name: '测试数据集',
+      color: '#d8b578',
+      radius: '50%',
+      fill: true,
+    },
+    {
+      name: '项目',
+      color: 'linear-gradient(305deg,#8981ff 0%,#b3a9ff 100%)',
+      radius: 6,
+      fill: true,
+    },
   ];
   return (
     <Flex align="center" className={styles['graph-legend']} style={style}>
@@ -52,4 +70,4 @@ function GraphLegand({ style }: GraphLegandProps) {
   );
 }
 
-export default GraphLegand;
+export default GraphLegend;

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

@@ -8,7 +8,7 @@ import G6, { G6GraphEvent, Graph, Item } from '@antv/g6';
 import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceIntro';
 import { Flex, Select } from 'antd';
 import { useEffect, useRef, useState } from 'react';
-import GraphLegand from '../GraphLegand';
+import GraphLegend from '../GraphLegend';
 import NodeTooltips from '../NodeTooltips';
 import styles from './index.less';
 import type { ModelDepsData, ProjectDependency, TrainDataset } from './utils';
@@ -41,16 +41,16 @@ function ModelEvolution({
 
   useEffect(() => {
     initGraph();
-    const changSize = () => {
+    const changeSize = () => {
       if (!graph || graph.get('destroyed')) return;
       if (!graphRef.current) return;
       graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight);
       graph.fitView();
     };
 
-    window.addEventListener('resize', changSize);
+    window.addEventListener('resize', changeSize);
     return () => {
-      window.removeEventListener('resize', changSize);
+      window.removeEventListener('resize', changeSize);
     };
   }, []);
 
@@ -158,7 +158,7 @@ function ModelEvolution({
 
       setHoverNodeData(model);
       setNodeToolTipX(point.x + offsetX);
-      // 92: 版本选择器的高度，296: tooltip的高度
+      // 92: 版本选择器的高度，296: tooltip 的高度
       setNodeToolTipY(point.y + 92 - 296 - offsetY);
       setShowNodeTooltip(true);
     });
@@ -258,7 +258,7 @@ function ModelEvolution({
           onChange={onVersionChange}
           options={versionList}
         />
-        <GraphLegand style={{ marginRight: 0, marginLeft: 'auto' }}></GraphLegand>
+        <GraphLegend style={{ marginRight: 0, marginLeft: 'auto' }}></GraphLegend>
       </Flex>
       <div className={styles['model-evolution__graph']} id="canvas" ref={graphRef}></div>
       {(showNodeTooltip || enterTooltip) && (

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

@@ -92,9 +92,9 @@ export function normalizeChildren(data: ModelDepsData[]) {
 }
 
 // 获取 label
-export function getLabel(node: { current_model_name: string; version: string }) {
+export function getLabel(node: ModelDepsData | ModelDepsAPIData) {
   return (
-    fittingString(`${node.current_model_name}`, nodeWidth - 12, 8) +
+    fittingString(`${node.model_version_dependcy_vo.name ?? ''}`, nodeWidth - 12, 8) +
     '\n' +
     fittingString(`${node.version}`, nodeWidth - 12, 8)
   );
@@ -144,10 +144,7 @@ export function normalizeTreeData(
   normalizedData.model_type = NodeType.current;
   normalizedData.current_model_name = currentNodeName;
   normalizedData.id = `$M_${normalizedData.current_model_id}_${normalizedData.version}`;
-  normalizedData.label = getLabel({
-    current_model_name: currentNodeName,
-    version: normalizedData.version,
-  });
+  normalizedData.label = getLabel(normalizedData);
   normalizedData.style = getStyle(NodeType.current);
   // let first1 = { ...normalizedData.children[0] };
   // let first2 = { ...normalizedData.children[0] };

react-ui/src/pages/Model/components/NodeTooltips/index.less

@@ -18,7 +18,7 @@
 
   &__row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     margin: 4px 0;
     color: @text-color;
     font-size: 14px;
@@ -43,14 +43,12 @@
       min-width: 0;
       color: @text-color;
       font-weight: 500;
-      .singleLine();
     }
 
     &__link {
       flex: 1;
       min-width: 0;
       font-weight: 500;
-      .singleLine();
     }
   }
 }

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

@@ -68,7 +68,9 @@ function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsPr
             <a className={styles['node-tooltips__row__link']} onClick={gotoExperimentPage}>
               {data.train_task?.name}
             </a>
-          ) : null}
+          ) : (
+            '--'
+          )}
         </div>
       </div>
     </div>