diff --git a/react-ui/src/pages/Model/components/GraphLegand/index.less b/react-ui/src/pages/Model/components/GraphLegend/index.less
similarity index 100%
rename from react-ui/src/pages/Model/components/GraphLegand/index.less
rename to react-ui/src/pages/Model/components/GraphLegend/index.less
diff --git a/react-ui/src/pages/Model/components/GraphLegand/index.tsx b/react-ui/src/pages/Model/components/GraphLegend/index.tsx
similarity index 67%
rename from react-ui/src/pages/Model/components/GraphLegand/index.tsx
rename to react-ui/src/pages/Model/components/GraphLegend/index.tsx
index 9cba12bc..5bf5076b 100644
--- a/react-ui/src/pages/Model/components/GraphLegand/index.tsx
+++ b/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 (
@@ -52,4 +70,4 @@ function GraphLegand({ style }: GraphLegandProps) {
);
}
-export default GraphLegand;
+export default GraphLegend;
diff --git a/react-ui/src/pages/Model/components/ModelEvolution/index.tsx b/react-ui/src/pages/Model/components/ModelEvolution/index.tsx
index 9fb1a3ce..cec1cd94 100644
--- a/react-ui/src/pages/Model/components/ModelEvolution/index.tsx
+++ b/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}
/>
-
+
{(showNodeTooltip || enterTooltip) && (
diff --git a/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx b/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx
index bb5502e0..95055e46 100644
--- a/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx
+++ b/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] };
diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.less b/react-ui/src/pages/Model/components/NodeTooltips/index.less
index b8fbbd91..26ac7567 100644
--- a/react-ui/src/pages/Model/components/NodeTooltips/index.less
+++ b/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();
}
}
}
diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx
index 5131765b..127afe44 100644
--- a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx
+++ b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx
@@ -68,7 +68,9 @@ function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsPr
{data.train_task?.name}
- ) : null}
+ ) : (
+ '--'
+ )}