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} + ) : ( + '--' + )}