feat: 实验对比添加横向滑动

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: [],

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%;
 }

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, ComparisonTypeInfo> = {
+  [ComparisonType.Train]: {
+    title: '训练',
+  },
+  [ComparisonType.Evaluate]: {
+    title: '评估',
+  },
+};

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;

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<TableData[]>([]);
   // const [cacheState, setCacheState] = useCacheState();
@@ -40,6 +36,7 @@ function ExperimentComparison() {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [loading, setLoading] = useState(false);
   const { message } = App.useApp();
+  const config = useMemo(() => comparisonConfig[comparisonType], [comparisonType]);
   // const [pagination, setPagination] = useState<TablePaginationConfig>(
   //   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: (
+            <Tooltip title={name}>
+              <span>{name}</span>
+            </Tooltip>
+          ),
           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: (
+            <Tooltip title={name}>
+              <span>{name}</span>
+            </Tooltip>
+          ),
           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}

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';