From 0bbfa01286d80a271c82cb204fb51dccf3feb1d8 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Tue, 18 Jun 2024 10:47:37 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=A8=A1=E5=9E=8B=E6=BC=94=E5=8C=96?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ResourceIntro/index.tsx | 2 +- .../Model/components/ModelEvolution/index.tsx | 45 +------ .../Model/components/ModelEvolution/utils.tsx | 4 +- .../Model/components/NodeTooltips/index.tsx | 123 ++++++++++++++---- 4 files changed, 110 insertions(+), 64 deletions(-) diff --git a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx index 91a63582..4e1b8c4d 100644 --- a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx @@ -33,7 +33,7 @@ const ResourceIntro = ({ resourceType }: ResourceIntroProps) => { useEffect(() => { getModelByDetail(); getVersionList(); - }, []); + }, [resourceId]); // 获取详情 const getModelByDetail = async () => { diff --git a/react-ui/src/pages/Model/components/ModelEvolution/index.tsx b/react-ui/src/pages/Model/components/ModelEvolution/index.tsx index 6a6e74e8..f277b634 100644 --- a/react-ui/src/pages/Model/components/ModelEvolution/index.tsx +++ b/react-ui/src/pages/Model/components/ModelEvolution/index.tsx @@ -5,21 +5,13 @@ import themes from '@/styles/theme.less'; import { to } from '@/utils/promise'; import G6, { G6GraphEvent, Graph } from '@antv/g6'; // @ts-ignore -import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceIntro'; import { Flex, Select } from 'antd'; import { useEffect, useRef, useState } from 'react'; import GraphLegend from '../GraphLegend'; import NodeTooltips from '../NodeTooltips'; import styles from './index.less'; import type { ModelDepsData, ProjectDependency, TrainDataset } from './utils'; -import { - NodeType, - getGraphData, - nodeFontSize, - nodeHeight, - nodeWidth, - normalizeTreeData, -} from './utils'; +import { getGraphData, nodeFontSize, nodeHeight, nodeWidth, normalizeTreeData } from './utils'; type modeModelEvolutionProps = { resourceId: number; @@ -80,7 +72,7 @@ function ModelEvolution({ width: graphRef.current!.clientWidth, height: graphRef.current!.clientHeight, fitView: true, - fitViewPadding: [100, 100, 100, 100], + fitViewPadding: 200, minZoom: 0.5, maxZoom: 5, defaultNode: { @@ -172,36 +164,7 @@ function ModelEvolution({ const nodeItem = e.item; const model = nodeItem.getModel() as ModelDepsData | ProjectDependency | TrainDataset; const { model_type } = model; - const { origin } = location; - let url: string = ''; switch (model_type) { - case NodeType.children: - case NodeType.parent: { - const { current_model_id, version } = model; - url = `${origin}/dataset/model/${current_model_id}?tab=${ResourceInfoTabKeys.Evolution}&version=${version}`; - break; - } - case NodeType.project: { - const { url: projectUrl } = model; - url = projectUrl; - break; - } - case NodeType.trainDataset: - case NodeType.testDataset: { - const { dataset_id, dataset_version } = model; - url = `${origin}/dataset/dataset/${dataset_id}?tab=${ResourceInfoTabKeys.Version}&version=${dataset_version}`; - break; - } - case NodeType.current: { - // TODO: 隐藏数据集和项目 - break; - } - default: - break; - } - - if (url) { - window.open(url, '_blank'); } }); @@ -234,6 +197,8 @@ function ModelEvolution({ graph.data(graphData); graph.render(); graph.fitView(); + setShowNodeTooltip(false); + setEnterTooltip(false); } else { clearGraphData(); } @@ -266,9 +231,11 @@ function ModelEvolution({
{(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 dfac7831..a878321a 100644 --- a/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx +++ b/react-ui/src/pages/Model/components/ModelEvolution/utils.tsx @@ -3,8 +3,8 @@ import { EdgeConfig, GraphData, LayoutConfig, NodeConfig, TreeGraphData, Util } // @ts-ignore import Hierarchy from '@antv/hierarchy'; -export const nodeWidth = 110; -export const nodeHeight = 50; +export const nodeWidth = 90; +export const nodeHeight = 40; export const vGap = nodeHeight + 20; export const hGap = nodeWidth; export const ellipseWidth = nodeWidth; diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx index a4b3f13b..217222da 100644 --- a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx +++ b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx @@ -1,20 +1,35 @@ +import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceIntro'; import { formatDate } from '@/utils/date'; +import { useNavigate } from '@umijs/max'; import { ModelDepsData, NodeType, ProjectDependency, TrainDataset } from '../ModelEvolution/utils'; import styles from './index.less'; -type NodeTooltipsProps = { - data?: ModelDepsData | ProjectDependency | TrainDataset; - x: number; - y: number; - onMouseEnter?: () => void; - onMouseLeave?: () => void; +type ModelInfoProps = { + resourceId: number; + data: ModelDepsData; + onVersionChange: (version: string) => void; }; -function ModelInfo({ data }: { data: ModelDepsData }) { +function ModelInfo({ resourceId, data, onVersionChange }: ModelInfoProps) { + const navigate = useNavigate(); + const gotoExperimentPage = () => { if (data.train_task?.ins_id) { const { origin } = location; - window.open(`${origin}/pipeline/experiment/144/${data.train_task.ins_id}`, '_blank'); + const url = `${origin}/pipeline/experiment/${data.workflow_id}/${data.train_task.ins_id}`; + window.open(url, '_blank'); + } + }; + + const gotoModelPage = () => { + if (data.model_type === NodeType.current) { + return; + } + if (data.current_model_id === resourceId) { + onVersionChange?.(data.version); + } else { + const path = `/dataset/model/${data.current_model_id}?tab=${ResourceInfoTabKeys.Evolution}&version=${data.version}`; + navigate(path); } }; @@ -24,9 +39,18 @@ function ModelInfo({ data }: { data: ModelDepsData }) {
模型名称： - - {data.model_version_dependcy_vo.name || '--'} - + {data.model_type === NodeType.current ? ( + + {data.model_version_dependcy_vo?.name || '--'} + + ) : ( + + )}
模型版本： @@ -61,13 +85,12 @@ function ModelInfo({ data }: { data: ModelDepsData }) {
训练任务： - {data.train_task?.name ? ( - - {data.train_task?.name} - - ) : ( - '--' - )} +
@@ -75,13 +98,24 @@ function ModelInfo({ data }: { data: ModelDepsData }) { } function DatasetInfo({ data }: { data: TrainDataset }) { + const gotoDatasetPage = () => { + const { origin } = location; + const url = `${origin}/dataset/dataset/${data.dataset_id}?tab=${ResourceInfoTabKeys.Version}&version=${data.dataset_version}`; + window.open(url, '_blank'); + }; + return ( <>
数据集信息
数据集名称： - {data.dataset_name || '--'} +
数据集版本： @@ -95,13 +129,23 @@ function DatasetInfo({ data }: { data: TrainDataset }) { } function ProjectInfo({ data }: { data: ProjectDependency }) { + const gotoProjectPage = () => { + const { url } = data; + window.open(url, '_blank'); + }; + return ( <>
项目信息
项目名称： - {data.name || '--'} +
项目分支： @@ -116,7 +160,42 @@ function ProjectInfo({ data }: { data: ProjectDependency }) { ); } -function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsProps) { +type ValueLinkProps = { + value: string | undefined; + onClick?: () => void; + className?: string; + nullClassName?: string; +}; + +const ValueLink = ({ value, onClick, className, nullClassName }: ValueLinkProps) => { + return value ? ( + + {value} + + ) : ( + -- + ); +}; + +type NodeTooltipsProps = { + resourceId: number; + data: ModelDepsData | ProjectDependency | TrainDataset; + x: number; + y: number; + onMouseEnter?: () => void; + onMouseLeave?: () => void; + onVersionChange: (version: string) => void; +}; + +function NodeTooltips({ + resourceId, + data, + x, + y, + onMouseEnter, + onMouseLeave, + onVersionChange, +}: NodeTooltipsProps) { if (!data) return null; let Component = null; const { model_type } = data; @@ -129,7 +208,7 @@ function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsPr model_type === NodeType.parent || model_type === NodeType.current ) { - Component = ; + Component = ; } return (