feat: 实验对比分页实现

react-ui/src/pages/Experiment/Comparison/index.less

@@ -14,7 +14,7 @@
 
   &__table {
     height: calc(100% - 60px);
-    padding: 20px 30px;
+    padding: 20px 30px 0;
     background-color: white;
     border-radius: 10px;
 

react-ui/src/pages/Experiment/Comparison/index.tsx

@@ -4,7 +4,6 @@
  * @Description: 实验对比
  */
 
-import { useDomSize } from '@/hooks';
 import {
   getExpEvaluateInfosReq,
   getExpMetricsReq,
@@ -14,7 +13,8 @@ import { tableSorter } from '@/utils';
 import { to } from '@/utils/promise';
 import tableCellRender, { TableCellValueType } from '@/utils/table';
 import { useSearchParams } from '@umijs/max';
-import { App, Button, Table, /* TablePaginationConfig,*/ TableProps, Tooltip } 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';
@@ -26,63 +26,45 @@ type TableData = {
   dataset: string[];
   start_time: string;
   status: string;
-  metrics_names: string[];
-  metrics: Record<string, number>;
-  params_names: string[];
-  params: Record<string, number>;
+  metrics_names?: string[];
+  metrics?: Record<string, number>;
+  params_names?: string[];
+  params?: Record<string, number>;
 };
 
-const pageSize = 30;
-
-// function Footer() {
-//   return (
-//     <div className={styles['experiment-comparison__table__footer']}>
-//       <div></div>
-//       <p>我是有底线的</p>
-//       <div></div>
-//     </div>
-//   );
-// }
-
 function ExperimentComparison() {
   const [searchParams] = useSearchParams();
   const comparisonType = searchParams.get('type') as ComparisonType;
   const experimentId = searchParams.get('id');
   const [tableData, setTableData] = useState<TableData[]>([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [total, setTotal] = useState(0);
+  const [pagination, setPagination] = useState<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+  });
+
   const { message } = App.useApp();
   const config = useMemo(() => comparisonConfig[comparisonType], [comparisonType]);
-  const [tableRef, { width: tableWidth, height: tableHeight }] = useDomSize<HTMLDivElement>(
-    0,
-    0,
-    [],
-  );
-  const [loadCompleted, setLoadCompleted] = useState(false);
-  const [loading, setLoading] = useState(false); // 避免误触发加载更多
 
   useEffect(() => {
     getComparisonData();
   }, [experimentId]);
 
   // 获取对比数据列表
-  const getComparisonData = async (offset: string = '') => {
+  const getComparisonData = async () => {
     const request =
       comparisonType === ComparisonType.Train ? getExpTrainInfosReq : getExpEvaluateInfosReq;
-    const [res] = await to(request(experimentId, { offset: offset, limit: pageSize }));
+    const params = {
+      page: pagination.current! - 1,
+      size: pagination.pageSize,
+    };
+    const [res] = await to(request(experimentId, params));
     if (res && res.data) {
-      setTableData((prev) => [...prev, ...res.data]);
-      if (res.data.length === 0) {
-        setLoadCompleted(true);
-        const ele = document.getElementsByClassName('ant-table-body')[0];
-        if (ele) {
-          const div = document.createElement('div');
-          div.className = styles['experiment-comparison__table__footer'];
-          div.innerHTML = '<div></div><p>我是有底线的</p><div></div>';
-          ele.appendChild(div);
-        }
-      }
+      const { content = [], totalElements = 0 } = res.data;
+      setTableData(content);
+      setTotal(totalElements);
     }
-    setLoading(false);
   };
 
   // 获取对比 url
@@ -114,21 +96,22 @@ function ExperimentComparison() {
     },
   };
 
-  const handleTableScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-    const target = e.target as HTMLDivElement;
-
-    const { scrollTop, scrollHeight, clientHeight } = target;
-
-    // 实现自动加载更多
-    if (!loadCompleted && !loading && scrollHeight - scrollTop - clientHeight <= 0) {
-      const last = tableData[tableData.length - 1];
-      setLoading(true);
-      getComparisonData(last?.run_id);
+  // 分页切换
+  const handleTableChange: TableProps<TableData>['onChange'] = (
+    pagination,
+    _filters,
+    _sorter,
+    { action },
+  ) => {
+    if (action === 'paginate') {
+      setPagination(pagination);
     }
   };
 
   const columns: TableProps<TableData>['columns'] = useMemo(() => {
-    const first: TableData | undefined = tableData[0];
+    const first: TableData | undefined = tableData.find(
+      (item) => item.metrics_names && item.metrics_names.length > 0,
+    );
     const metricsNames = first?.metrics_names ?? [];
     const paramsNames = first?.params_names ?? [];
     return [
@@ -190,7 +173,7 @@ function ExperimentComparison() {
           align: 'center',
           render: tableCellRender(true),
           ellipsis: { showTitle: false },
-          sorter: (a, b) => tableSorter(a.params[name], b.params[name]),
+          sorter: (a, b) => tableSorter(a.params?.[name], b.params?.[name]),
           showSorterTooltip: false,
         })),
       },
@@ -209,7 +192,7 @@ function ExperimentComparison() {
           align: 'center',
           render: tableCellRender(true),
           ellipsis: { showTitle: false },
-          sorter: (a, b) => tableSorter(a.metrics[name], b.metrics[name]),
+          sorter: (a, b) => tableSorter(a.metrics?.[name], b.metrics?.[name]),
           showSorterTooltip: false,
         })),
       },
@@ -223,16 +206,21 @@ function ExperimentComparison() {
           可视化对比
         </Button>
       </div>
-      <div className={styles['experiment-comparison__table']} ref={tableRef}>
+      <div className={classNames('vertical-scroll-table', styles['experiment-comparison__table'])}>
         <Table
           dataSource={tableData}
           columns={columns}
           rowSelection={rowSelection}
-          scroll={{ y: tableHeight - 150, x: tableWidth - 60 }}
-          pagination={false}
+          scroll={{ y: 'calc(100% - 110px)', x: '100%' }}
+          pagination={{
+            ...pagination,
+            total: total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+          }}
+          onChange={handleTableChange}
           bordered={true}
-          onScroll={handleTableScroll}
-          rowKey="run_id"
+          rowKey={(record) => record.run_id || record.experiment_ins_id}
         />
       </div>
     </div>