From 61359aef2ad57bba3c2e0255a08b82e421b31edd Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Wed, 12 Jun 2024 11:31:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E6=BC=94=E5=8C=96?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E9=9B=86=E5=92=8C=E9=A1=B9?= =?UTF-8?q?=E7=9B=AEtooltip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ResourceIntro/index.tsx | 1 - .../Model/components/ModelEvolution/index.tsx | 40 ++++----- .../Model/components/ModelEvolution/utils.tsx | 6 +- .../Model/components/NodeTooltips/index.less | 3 +- .../Model/components/NodeTooltips/index.tsx | 84 ++++++++++++++++--- 5 files changed, 92 insertions(+), 42 deletions(-) diff --git a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx index caa5a539..91a63582 100644 --- a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx @@ -113,7 +113,6 @@ const ResourceIntro = ({ resourceType }: ResourceIntroProps) => { children: ( (undefined); + const [hoverNodeData, setHoverNodeData] = useState< + ModelDepsData | ProjectDependency | TrainDataset | undefined + >(undefined); useEffect(() => { initGraph(); @@ -97,6 +97,7 @@ function ModelEvolution({ fill: '#ffffff', fontSize: 8, textAlign: 'center', + cursor: 'pointer', }, }, }, @@ -114,15 +115,14 @@ function ModelEvolution({ default: [ 'drag-canvas', 'zoom-canvas', - 'drag-node', - { - type: 'collapse-expand', - onChange(item?: Item, collapsed?: boolean) { - const data = item!.getModel(); - data.collapsed = collapsed; - return true; - }, - }, + // { + // type: 'collapse-expand', + // onChange(item?: Item, collapsed?: boolean) { + // const data = item!.getModel(); + // data.collapsed = collapsed; + // return true; + // }, + // }, ], }, }); @@ -137,14 +137,7 @@ function ModelEvolution({ graph.setItemState(nodeItem, 'hover', true); const model = nodeItem.getModel() as ModelDepsData; - const { x, y, model_type } = model; - if ( - model_type === NodeType.project || - model_type === NodeType.trainDataset || - model_type === NodeType.testDataset - ) { - return; - } + const { x, y } = model; const point = graph.getCanvasByPoint(x!, y!); const zoom = graph.getZoom(); // 更加缩放，调整 tooltip 位置 @@ -158,8 +151,7 @@ function ModelEvolution({ setHoverNodeData(model); setNodeToolTipX(point.x + offsetX); - // 92: 版本选择器的高度，296: tooltip 的高度 - setNodeToolTipY(point.y + 92 - 296 - offsetY); + setNodeToolTipY(graphRef.current!.clientHeight - point.y + offsetY); setShowNodeTooltip(true); }); @@ -225,7 +217,7 @@ function ModelEvolution({ }; const [res] = await to(getModelAtlasReq(params)); if (res && res.data) { - const data = normalizeTreeData(res.data, resourceName); + const data = normalizeTreeData(res.data); const graphData = getGraphData(data); graph.data(graphData); diff --git a/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx b/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx index 95055e46..4570b5de 100644 --- a/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx +++ b/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx @@ -131,10 +131,7 @@ export function getStyle(model_type: NodeType) { } // 将后台返回的数据转换成树形数据 -export function normalizeTreeData( - apiData: ModelDepsAPIData, - currentNodeName: string, -): ModelDepsData { +export function normalizeTreeData(apiData: ModelDepsAPIData): ModelDepsData { // 将 children_models 转换成 children let normalizedData = changePropertyName(apiData, { children_models: 'children', @@ -142,7 +139,6 @@ 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(normalizedData); normalizedData.style = getStyle(NodeType.current); diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.less b/react-ui/src/pages/Model/components/NodeTooltips/index.less index 26ac7567..ff5dd5cd 100644 --- a/react-ui/src/pages/Model/components/NodeTooltips/index.less +++ b/react-ui/src/pages/Model/components/NodeTooltips/index.less @@ -1,6 +1,6 @@ .node-tooltips { position: absolute; - top: -100px; + bottom: -100px; left: -300px; width: 300px; padding: 10px; @@ -43,6 +43,7 @@ min-width: 0; color: @text-color; font-weight: 500; + word-break: break-all; } &__link { diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx index 127afe44..dc926114 100644 --- a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx +++ b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx @@ -1,16 +1,16 @@ import { formatDate } from '@/utils/date'; -import { ModelDepsData } from '../ModelEvolution/utils'; +import { ModelDepsData, NodeType, ProjectDependency, TrainDataset } from '../ModelEvolution/utils'; import styles from './index.less'; type NodeTooltipsProps = { - data: ModelDepsData; + data?: ModelDepsData | ProjectDependency | TrainDataset; x: number; y: number; onMouseEnter?: () => void; onMouseLeave?: () => void; }; -function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsProps) { +function ModelInfo({ data }: { data: ModelDepsData }) { const gotoExperimentPage = () => { if (data.train_task?.ins_id) { const { origin } = location; @@ -19,21 +19,18 @@ function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsPr }; return ( -
+ <>
模型信息
模型名称： - {data.current_model_name} + + {data.model_version_dependcy_vo.name || '--'} +
模型版本： - {data.version} + {data.version || '--'}
模型框架： @@ -73,6 +70,71 @@ function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsPr )}
+ + ); +} + +function DatasetInfo({ data }: { data: TrainDataset }) { + return ( + <> +
数据集信息
+
+
+ 数据集名称： + {data.dataset_name || '--'} +
+
+ 数据集版本： + + {data.dataset_version || '--'} + +
+
+ + ); +} + +function ProjectInfo({ data }: { data: ProjectDependency }) { + return ( + <> +
项目信息
+
+
+ 项目名称： + {data.name || '--'} +
+
+ 项目分支： + {data.branch || '--'} +
+
+ 项目地址： + {data.url || '--'} +
+
+ + ); +} + +function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsProps) { + if (!data) return null; + let Component; + const { model_type } = data; + if (model_type === NodeType.testDataset || model_type === NodeType.trainDataset) { + Component = ; + } else if (model_type === NodeType.project) { + Component = ; + } else { + Component = ; + } + return ( +
+ {Component}
); }