From 566aa26cd9d61b5d02b83352687875e534c2be43 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Mon, 1 Jul 2024 11:47:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E9=AA=8C=E5=AF=B9=E6=AF=94?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A8=AA=E5=90=91=E6=BB=91=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/mock/model.ts | 236 ++++++++++++++---- react-ui/src/components/PageTitle/index.less | 2 +- .../pages/Experiment/Comparison/config.tsx | 17 ++ .../pages/Experiment/Comparison/index.less | 6 + .../src/pages/Experiment/Comparison/index.tsx | 54 ++-- react-ui/src/pages/Experiment/index.jsx | 2 +- 6 files changed, 255 insertions(+), 62 deletions(-) create mode 100644 react-ui/src/pages/Experiment/Comparison/config.tsx diff --git a/react-ui/mock/model.ts b/react-ui/mock/model.ts index 02054802..af637db0 100644 --- a/react-ui/mock/model.ts +++ b/react-ui/mock/model.ts @@ -48,12 +48,33 @@ export default defineMock({ exp_ins_id: null, version: 'v0.1.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: null, @@ -80,12 +101,38 @@ export default defineMock({ exp_ins_id: null, version: 'v0.3.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 120, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: [], @@ -110,12 +157,33 @@ export default defineMock({ exp_ins_id: null, version: 'v0.31.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: [], @@ -140,12 +208,33 @@ export default defineMock({ exp_ins_id: null, version: 'v0.4.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: [ @@ -154,12 +243,33 @@ export default defineMock({ exp_ins_id: null, version: 'v0.6.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: [], @@ -231,12 +341,33 @@ export default defineMock({ exp_ins_id: null, version: 'v0.5.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: [ @@ -275,12 +406,33 @@ export default defineMock({ exp_ins_id: null, version: 'v0.11.0', ref_item: null, - train_task: {}, - train_dataset: [], - train_params: [], - train_image: null, - test_dataset: [], - project_dependency: {}, + train_task: { + name: '模型训练测试导出0529', + ins_id: 229, + task_id: 'model-train-5d76f002', + }, + train_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + train_params: ['256', '2'], + train_image: + '172.20.32.187/machine-learning/pytorch:pytorch_1.9.1_cuda11.1_detection_aim', + test_dataset: [ + { + dataset_id: 20, + dataset_version: 'v0.1.0', + dataset_name: '手写体识别模型依赖测试训练数据集', + }, + ], + project_dependency: { + url: 'https://openi.pcl.ac.cn/somunslotus/somun202304241505581.git', + name: 'somun202304241505581', + branch: 'train_ci_test', + }, parent_models_map: [], parent_models: [], children_models: [], diff --git a/react-ui/src/components/PageTitle/index.less b/react-ui/src/components/PageTitle/index.less index d120009b..47907246 100644 --- a/react-ui/src/components/PageTitle/index.less +++ b/react-ui/src/components/PageTitle/index.less @@ -6,5 +6,5 @@ background-image: url(@/assets/img/page-title-bg.png); background-repeat: no-repeat; background-position: top center; - background-size: 100%; + background-size: 100% 100%; } diff --git a/react-ui/src/pages/Experiment/Comparison/config.tsx b/react-ui/src/pages/Experiment/Comparison/config.tsx new file mode 100644 index 00000000..c6c53971 --- /dev/null +++ b/react-ui/src/pages/Experiment/Comparison/config.tsx @@ -0,0 +1,17 @@ +export enum ComparisonType { + Train = 'Train', // 训练 + Evaluate = 'Evaluate', // 评估 +} + +type ComparisonTypeInfo = { + title: string; +}; + +export const comparisonConfig: Record = { + [ComparisonType.Train]: { + title: '训练', + }, + [ComparisonType.Evaluate]: { + title: '评估', + }, +}; diff --git a/react-ui/src/pages/Experiment/Comparison/index.less b/react-ui/src/pages/Experiment/Comparison/index.less index a491c621..7a97a588 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.less +++ b/react-ui/src/pages/Experiment/Comparison/index.less @@ -22,6 +22,12 @@ .ant-table-container { border: none !important; } + .ant-table-thead { + .ant-table-cell { + background-color: rgb(247, 247, 247); + border-color: #e8e8e8 !important; + } + } .ant-table-tbody { .ant-table-cell { border-right: none !important; diff --git a/react-ui/src/pages/Experiment/Comparison/index.tsx b/react-ui/src/pages/Experiment/Comparison/index.tsx index 12b60416..3aca2028 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.tsx +++ b/react-ui/src/pages/Experiment/Comparison/index.tsx @@ -7,17 +7,13 @@ import { import { to } from '@/utils/promise'; import tableCellRender, { arrayFormatter, dateFormatter } from '@/utils/table'; import { useSearchParams } from '@umijs/max'; -import { App, Button, Table, /* TablePaginationConfig,*/ TableProps } from 'antd'; +import { App, Button, Table, /* TablePaginationConfig,*/ TableProps, Tooltip } from 'antd'; import classNames from 'classnames'; import { useEffect, useMemo, useState } from 'react'; import ExperimentStatusCell from '../components/ExperimentStatusCell'; +import { ComparisonType, comparisonConfig } from './config'; import styles from './index.less'; -export enum ComparisonType { - Train = 'Train', // 训练 - Evaluate = 'Evaluate', // 评估 -} - type TableData = { experiment_ins_id: number; run_id: string; @@ -32,7 +28,7 @@ type TableData = { function ExperimentComparison() { const [searchParams] = useSearchParams(); - const comparisonType = searchParams.get('type'); + const comparisonType = searchParams.get('type') as ComparisonType; const experimentId = searchParams.get('id'); const [tableData, setTableData] = useState([]); // const [cacheState, setCacheState] = useCacheState(); @@ -40,6 +36,7 @@ function ExperimentComparison() { const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [loading, setLoading] = useState(false); const { message } = App.useApp(); + const config = useMemo(() => comparisonConfig[comparisonType], [comparisonType]); // const [pagination, setPagination] = useState( // cacheState?.pagination ?? { // current: 1, @@ -94,6 +91,7 @@ function ExperimentComparison() { // 选择行 const rowSelection: TableProps['rowSelection'] = { type: 'checkbox', + fixed: 'left', selectedRowKeys, onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); @@ -111,7 +109,9 @@ function ExperimentComparison() { title: '实例 ID', dataIndex: 'experiment_ins_id', key: 'experiment_ins_id', - width: '20%', + width: 100, + fixed: 'left', + align: 'center', render: tableCellRender(), }, { @@ -119,43 +119,61 @@ function ExperimentComparison() { dataIndex: 'start_time', key: 'start_time', width: 180, + fixed: 'left', + align: 'center', render: tableCellRender(false, dateFormatter), }, { title: '运行状态', dataIndex: 'status', key: 'status', - width: '20%', + width: 100, + fixed: 'left', + align: 'center', render: ExperimentStatusCell, }, { - title: '训练数据集', + title: `${config.title}数据集`, dataIndex: 'dataset', key: 'dataset', - width: '20%', + width: 180, + fixed: 'left', + align: 'center', render: tableCellRender(true, arrayFormatter()), ellipsis: { showTitle: false }, }, ], }, { - title: '训练参数', + title: `${config.title}参数`, + align: 'center', children: first?.params_names.map((name) => ({ - title: name, + title: ( + + {name} + + ), dataIndex: ['params', name], key: name, - width: '20%', + width: 120, + align: 'center', render: tableCellRender(true), ellipsis: { showTitle: false }, })), }, { - title: '训练指标', + title: `${config.title}指标`, + align: 'center', children: first?.metrics_names.map((name) => ({ - title: name, + title: ( + + {name} + + ), dataIndex: ['metrics', name], key: name, - width: '20%', + width: 120, + align: 'center', render: tableCellRender(true), ellipsis: { showTitle: false }, })), @@ -180,7 +198,7 @@ function ExperimentComparison() { dataSource={tableData} columns={columns} rowSelection={rowSelection} - scroll={{ y: 'calc(100% - 55px)' }} + scroll={{ y: 'calc(100% - 55px)', x: '100%' }} pagination={false} bordered={true} loading={loading} diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index 68f4fd96..3bbecbb8 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -23,7 +23,7 @@ import { App, Button, ConfigProvider, Dropdown, Space, Table, Tooltip } from 'an import classNames from 'classnames'; import { useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { ComparisonType } from './Comparison'; +import { ComparisonType } from './Comparison/config'; import AddExperimentModal from './components/AddExperimentModal'; import TensorBoardStatusCell from './components/TensorBoardStatus'; import Styles from './index.less';