fix: benchmark enviroment table

src/hooks/use-table-fetch.ts

@@ -283,7 +283,7 @@ export default function useTableFetch<T>(
     }
   ) => {
     loadendRef.current = false;
-    const newQueryParams = { ...queryParams, ...params, page: 1 };
+    const newQueryParams = { ...queryParams, ...params };
     setQueryParams(newQueryParams);
     await fetchData({ query: newQueryParams });
     if (watch && !options?.paginate) {

src/pages/benchmark/components/environment/gpu-data.tsx

@@ -1,84 +0,0 @@
-import AutoTooltip from '@/components/auto-tooltip';
-import { convertFileSize } from '@/utils';
-import { Descriptions, DescriptionsProps } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
-import { GPUData } from '../../config/detail-types';
-import Section from '../summary/section';
-
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: flex-start;
-  .name {
-    font-weight: 500;
-  }
-`;
-
-const Environment: React.FC<GPUData> = (props) => {
-  const items: DescriptionsProps['items'] = [
-    // {
-    //   key: '4',
-    //   label: 'Name',
-    //   children: <AutoTooltip ghost>{props.name}</AutoTooltip>
-    // },
-    {
-      key: '1',
-      label: 'VRAM',
-      children: convertFileSize(props.memory_total)
-    },
-    {
-      key: '3',
-      label: 'Driver',
-      children: props.driver_version
-    },
-    {
-      key: '2',
-      label: 'Runtime',
-      children: props.runtime_version
-    },
-    {
-      key: '6',
-      label: 'Core',
-      children: props.core_total
-    },
-    {
-      key: '5',
-      label: 'Vendor',
-      children: props.vendor
-    },
-    {
-      key: '7',
-      label: 'GPU Type',
-      children: props.type
-    }
-  ];
-  return (
-    <Section
-      title={
-        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-          GPU {props.index}
-        </span>
-      }
-    >
-      <Content>
-        <div className="name">
-          <AutoTooltip ghost>{props.name}</AutoTooltip>
-        </div>
-        <Descriptions
-          items={items}
-          colon={true}
-          column={3}
-          styles={{
-            content: {
-              justifyContent: 'flex-start'
-            }
-          }}
-        ></Descriptions>
-      </Content>
-    </Section>
-  );
-};
-
-export default Environment;

src/pages/benchmark/components/environment/gpu-header.tsx

@@ -0,0 +1,39 @@
+import { Col, Row } from 'antd';
+import React from 'react';
+
+const GPUHeader: React.FC<{
+  columns: {
+    title: string;
+    key: string;
+    span: number;
+    colStyle?: React.CSSProperties;
+  }[];
+}> = ({ columns }) => {
+  return (
+    <Row style={{ width: '100%' }} align="middle">
+      {columns.map((col) => (
+        <Col key={col.key} span={col.span} style={{ ...col.colStyle }}>
+          <span
+            style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              gap: 4,
+              flexDirection: 'column'
+            }}
+          >
+            <span
+              style={{
+                color: 'var(--ant-color-text-tertiary)',
+                fontSize: 12
+              }}
+            >
+              {col.title}
+            </span>
+          </span>
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+export default GPUHeader;

src/pages/benchmark/components/environment/index.tsx

@@ -1,15 +1,16 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import RowChildren from '@/components/seal-table/components/row-children';
 import SealTable from '@/components/seal-table/index';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
-import { convertFileSize } from '@/utils';
-import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import { Col, Row, Tag } from 'antd';
+import { Col, Row } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { useDetailContext } from '../../config/detail-context';
+import { GPUData, WorkerData } from '../../config/detail-types';
+import GPUHeader from './gpu-header';
+import useGPUColumns from './use-gpu-columns';
+import useWorkerColumns from './use-worker-columns';
 
 const Container = styled.div`
   display: flex;
@@ -17,164 +18,90 @@ const Container = styled.div`
   gap: 16px;
 `;
 
+/**
+ *
+ * @returns display worker info and gpu info.
+ */
+
 const Environment: React.FC = () => {
-  const intl = useIntl();
+  const GPUColumns = useGPUColumns();
+  const workerColumns = useWorkerColumns();
   const { detailData } = useDetailContext();
   const { snapshot } = detailData;
 
+  // instance info
+  const instanceEntry = Object.entries(snapshot.instances ?? {})[0];
+  const instanceData = instanceEntry?.[1];
+
   const { handleExpandChange, handleExpandAll, expandedRowKeys } =
     useExpandedRowKeys();
 
-  const mainWorker = useMemo(() => {
-    // get workers data
-
-    const [[workerName, workerInfo]] = Object.entries(snapshot.workers);
-    const gpuData = Object.values(snapshot.gpus).filter(
-      (gpu) => gpu.worker_name === workerName
+  const workerMap = useMemo(() => {
+    return new Map(
+      Object.entries(snapshot.workers ?? {}).map(([workerName, workerInfo]) => [
+        workerInfo.id,
+        workerInfo
+      ])
     );
+  }, [snapshot.workers]);
+
+  const gpuList = useMemo(() => {
+    return Object.values(snapshot.gpus ?? {}) || [];
+  }, [snapshot.gpus]);
+
+  const findWorkerById = (workerID: number): WorkerData | undefined => {
+    return workerMap.get(workerID) || undefined;
+  };
+
+  const findGPUByWorkerName = (name: string): GPUData[] => {
+    return gpuList.filter((gpu) => gpu.worker_name === name);
+  };
+
+  // main worker
+
+  const mainWorker = useMemo(() => {
+    const mainworker = findWorkerById(instanceData.worker_id);
+
+    if (!mainworker) {
+      return null;
+    }
+
+    const gpuData = findGPUByWorkerName(mainworker.name);
 
     return {
-      ...workerInfo,
+      ...mainworker,
       ..._.pick(gpuData?.[0], ['driver_version', 'runtime_version']),
       isMain: true,
       children: gpuData
     };
-  }, [snapshot]);
+  }, [snapshot.gpus, snapshot.workers, instanceData]);
 
-  const subWorkers = useMemo(() => {
-    const [[instanceName, instanceData]] = Object.entries(snapshot.instances);
+  // subordinate workers
 
+  const subWorkerList = useMemo(() => {
     const subOrdinaryWorkers = instanceData?.subordinate_workers || [];
 
     return subOrdinaryWorkers.map((worker) => {
-      const gpuData = Object.values(snapshot.gpus).filter(
-        (gpu) => gpu.worker_name === worker.worker_name
-      );
+      // Find the worker info from the snapshot workers
+      const subWorker = findWorkerById(worker.worker_id);
+
+      if (!subWorker) {
+        return null;
+      }
+      const gpuData = findGPUByWorkerName(subWorker.name);
 
       return {
-        ...worker,
+        ...subWorker,
+        ..._.pick(gpuData?.[0], ['driver_version', 'runtime_version']),
         isMain: false,
         children: gpuData
       };
     });
-  }, [snapshot, mainWorker]);
-
-  const GPUColumns: {
-    title: string;
-    dataIndex: string;
-    key: string;
-    span: number;
-    colStyle?: React.CSSProperties;
-    render?: (value: any, record: any) => React.ReactNode;
-  }[] = [
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.gpuName' }),
-      dataIndex: 'name',
-      key: 'name',
-      span: 6,
-      colStyle: { paddingLeft: 16 },
-      render: (value: string, record: any) => (
-        <AutoTooltip ghost>{value}</AutoTooltip>
-      )
-    },
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.index' }),
-      dataIndex: 'index',
-      key: 'index',
-      span: 4,
-      colStyle: { paddingLeft: 48 }
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.table.vendor' }),
-      dataIndex: 'vendor',
-      key: 'vendor',
-      span: 6,
-      colStyle: { paddingLeft: 110 }
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.table.vram' }),
-      dataIndex: 'memory_total',
-      key: 'memory_total',
-      span: 4,
-      render: (value: number, record: any) => convertFileSize(value)
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.table.core' }),
-      dataIndex: 'core_total',
-      key: 'core_total',
-      span: 4,
-      colStyle: { paddingLeft: 36 }
-    }
-  ];
-
-  const columns = [
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.workerName' }),
-      dataIndex: 'name',
-      key: 'name',
-      span: 6,
-      render: (value: string, record: any) => {
-        return (
-          <>
-            <AutoTooltip ghost>{value}</AutoTooltip>
-            {record.isMain && (
-              <Tag color="geekblue" style={{ marginLeft: 8 }}>
-                Main
-              </Tag>
-            )}
-          </>
-        );
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.system' }),
-      dataIndex: 'os',
-      key: 'system',
-      span: 5,
-      render: (os: { name: string; version: string }, record: any) => {
-        return (
-          <AutoTooltip
-            ghost
-          >{`${record.os?.name || ''} (${record.os?.version || ''})`}</AutoTooltip>
-        );
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.runtimeVersion' }),
-      dataIndex: 'runtime_version',
-      key: 'runtime_version',
-      span: 3,
-      render: (val: any, record: any) => {
-        return <AutoTooltip ghost>{record.runtime_version || ''}</AutoTooltip>;
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.driverVersion' }),
-      dataIndex: 'driver_version',
-      key: 'driver_version',
-      span: 3,
-      render: (val: any, record: any) => {
-        return <AutoTooltip ghost>{record.driver_version || ''}</AutoTooltip>;
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'benchmark.env.cpuCounts' }),
-      dataIndex: 'cpu_total',
-      key: 'cpu_total',
-      span: 3
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.table.memory' }),
-      dataIndex: 'memory_total',
-      key: 'memory_total',
-      span: 4,
-      render: (value: number) => convertFileSize(value)
-    }
-  ];
+  }, [snapshot]);
 
   const dataList = useMemo(() => {
-    return [mainWorker, ...subWorkers];
-  }, [mainWorker, subWorkers]);
+    return [mainWorker, ...subWorkerList].filter(Boolean) as WorkerData[];
+  }, [mainWorker, subWorkerList]);
 
   const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
     const keys = dataList?.map((item) => item.id);
@@ -188,29 +115,7 @@ const Environment: React.FC = () => {
   const renderChildren = useMemoizedFn((list: any[]) => {
     return (
       <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
-        <Row style={{ width: '100%' }} align="middle">
-          {GPUColumns.map((col) => (
-            <Col key={col.key} span={col.span} style={{ ...col.colStyle }}>
-              <span
-                style={{
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  gap: 4,
-                  flexDirection: 'column'
-                }}
-              >
-                <span
-                  style={{
-                    color: 'var(--ant-color-text-tertiary)',
-                    fontSize: 12
-                  }}
-                >
-                  {col.title}
-                </span>
-              </span>
-            </Col>
-          ))}
-        </Row>
+        <GPUHeader columns={GPUColumns}></GPUHeader>
         <RowChildren>
           {list.map((gpu) => (
             <Row key={gpu.id} style={{ width: '100%' }} align="middle">
@@ -250,8 +155,7 @@ const Environment: React.FC = () => {
         dataSource={dataList}
         loading={false}
         loadend={true}
-        columns={columns}
-        childParentKey="id"
+        columns={workerColumns}
         expandable={true}
       ></SealTable>
     </Container>

src/pages/benchmark/components/environment/metadata.tsx

@@ -1,43 +0,0 @@
-import { convertFileSize } from '@/utils';
-import { Descriptions, DescriptionsProps } from 'antd';
-import React from 'react';
-import { WorkerData } from '../../config/detail-types';
-
-const Environment: React.FC<WorkerData> = (props) => {
-  const { os, cpu_total, memory_total } = props;
-
-  const items: DescriptionsProps['items'] = [
-    {
-      key: '4',
-      label: 'System',
-      children: os.name
-    },
-    {
-      key: '1',
-      label: 'CPU Count',
-      children: cpu_total
-    },
-    {
-      key: '5',
-      label: 'Memory Total',
-      children: convertFileSize(memory_total)
-    }
-  ];
-  return (
-    <div>
-      <Descriptions
-        items={items}
-        colon={false}
-        column={3}
-        layout="vertical"
-        styles={{
-          content: {
-            justifyContent: 'flex-start'
-          }
-        }}
-      ></Descriptions>
-    </div>
-  );
-};
-
-export default Environment;

src/pages/benchmark/components/environment/use-gpu-columns.tsx

@@ -0,0 +1,56 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import { convertFileSize } from '@/utils';
+import { useIntl } from '@umijs/max';
+
+export default function useGPUColumns(): {
+  title: string;
+  dataIndex: string;
+  key: string;
+  span: number;
+  colStyle?: React.CSSProperties;
+  render?: (value: any, record: any) => React.ReactNode;
+}[] {
+  const intl = useIntl();
+
+  return [
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.gpuName' }),
+      dataIndex: 'name',
+      key: 'name',
+      span: 6,
+      colStyle: { paddingLeft: 16 },
+      render: (value: string, record: any) => (
+        <AutoTooltip ghost>{value}</AutoTooltip>
+      )
+    },
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.index' }),
+      dataIndex: 'index',
+      key: 'index',
+      span: 4,
+      colStyle: { paddingLeft: 48 }
+    },
+    {
+      title: intl.formatMessage({ id: 'resources.table.vendor' }),
+      dataIndex: 'vendor',
+      key: 'vendor',
+      span: 4,
+      colStyle: { paddingLeft: 110 }
+    },
+    {
+      title: intl.formatMessage({ id: 'resources.table.vram' }),
+      dataIndex: 'memory_total',
+      key: 'memory_total',
+      colStyle: { paddingLeft: 40 },
+      span: 6,
+      render: (value: number, record: any) => convertFileSize(value)
+    },
+    {
+      title: intl.formatMessage({ id: 'resources.table.core' }),
+      dataIndex: 'core_total',
+      key: 'core_total',
+      span: 4,
+      colStyle: { paddingLeft: 36 }
+    }
+  ];
+}

src/pages/benchmark/components/environment/use-worker-columns.tsx

@@ -0,0 +1,80 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import { convertFileSize } from '@/utils';
+import { useIntl } from '@umijs/max';
+import { Tag } from 'antd';
+
+export default function useWorkerColumns(): {
+  title: string;
+  dataIndex: string;
+  key: string;
+  span: number;
+  colStyle?: React.CSSProperties;
+  render?: (value: any, record: any) => React.ReactNode;
+}[] {
+  const intl = useIntl();
+
+  return [
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.workerName' }),
+      dataIndex: 'name',
+      key: 'name',
+      span: 6,
+      render: (value: string, record: any) => {
+        return (
+          <>
+            <AutoTooltip ghost>{value}</AutoTooltip>
+            {record.isMain && (
+              <Tag color="geekblue" style={{ marginLeft: 8 }}>
+                Main
+              </Tag>
+            )}
+          </>
+        );
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.system' }),
+      dataIndex: 'os',
+      key: 'system',
+      span: 5,
+      render: (os: { name: string; version: string }, record: any) => {
+        return (
+          <AutoTooltip
+            ghost
+          >{`${record.os?.name || ''} (${record.os?.version || ''})`}</AutoTooltip>
+        );
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.runtimeVersion' }),
+      dataIndex: 'runtime_version',
+      key: 'runtime_version',
+      span: 3,
+      render: (val: any, record: any) => {
+        return <AutoTooltip ghost>{record.runtime_version || ''}</AutoTooltip>;
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.driverVersion' }),
+      dataIndex: 'driver_version',
+      key: 'driver_version',
+      span: 3,
+      render: (val: any, record: any) => {
+        return <AutoTooltip ghost>{record.driver_version || ''}</AutoTooltip>;
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'benchmark.env.cpuCounts' }),
+      dataIndex: 'cpu_total',
+      key: 'cpu_total',
+      span: 3
+    },
+    {
+      title: intl.formatMessage({ id: 'resources.table.memory' }),
+      dataIndex: 'memory_total',
+      key: 'memory_total',
+      span: 4,
+      render: (value: number) => convertFileSize(value)
+    }
+  ];
+}

src/pages/benchmark/components/environment/worker-data.tsx

@@ -1,61 +0,0 @@
-import { Col, Row } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
-import { GPUData as GPUDataType, WorkerData } from '../../config/detail-types';
-import Section from '../summary/section';
-import GPUData from './gpu-data';
-import Metadata from './metadata';
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--ant-border-radius);
-  border: 1px solid var(--ant-color-border);
-`;
-
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px 16px;
-`;
-
-const Environment: React.FC<{
-  workerData: WorkerData;
-  gpuData: GPUDataType[];
-  title?: React.ReactNode;
-}> = (props) => {
-  const { title } = props;
-  return (
-    <Container>
-      <Section
-        title={title}
-        styles={{
-          wraper: {
-            border: 'none',
-            overflow: 'unset'
-          },
-          container: {
-            border: 'none',
-            paddingInline: 16,
-            borderRadius: 0,
-            borderBottom: '1px solid var(--ant-color-split)'
-          }
-        }}
-      >
-        <Metadata {...props.workerData} />
-      </Section>
-      <Content>
-        <Row gutter={16}>
-          {props.gpuData.map((gpu, index) => (
-            <Col span={12} key={index}>
-              <GPUData {...gpu} />
-            </Col>
-          ))}
-        </Row>
-      </Content>
-    </Container>
-  );
-};
-
-export default Environment;

src/pages/benchmark/components/summary/benchmark.tsx

@@ -1,13 +1,16 @@
 import { useIntl } from '@umijs/max';
-import { Descriptions, DescriptionsProps } from 'antd';
+import { Descriptions } from 'antd';
+import { DescriptionsItemType } from 'antd/es/descriptions';
 import React from 'react';
+import { DatasetValueMap } from '../../config';
 import { useDetailContext } from '../../config/detail-context';
 
 const Benchmark: React.FC = () => {
   const intl = useIntl();
   const { detailData, profilesOptions } = useDetailContext();
 
-  const items: DescriptionsProps['items'] = [
+  type ItemTyp = DescriptionsItemType & { hidden?: boolean };
+  const items: ItemTyp[] = [
     {
       key: '1',
       label: intl.formatMessage({ id: 'benchmark.form.profile' }),
@@ -27,6 +30,7 @@ const Benchmark: React.FC = () => {
       label: intl.formatMessage({
         id: 'benchmark.detail.inputOutputTokenLength'
       }),
+      hidden: detailData?.dataset_name === DatasetValueMap.ShareGPT,
       children: (
         <span>
           {detailData?.dataset_input_tokens || '-'} /{' '}
@@ -47,6 +51,7 @@ const Benchmark: React.FC = () => {
     {
       key: '5',
       label: intl.formatMessage({ id: 'playground.image.params.seed' }),
+      hidden: detailData?.dataset_name === DatasetValueMap.ShareGPT,
       children: detailData?.dataset_seed || '-'
     }
   ];
@@ -54,9 +59,9 @@ const Benchmark: React.FC = () => {
   return (
     <div>
       <Descriptions
-        items={items}
+        items={items.filter((item) => !item.hidden)}
         colon={false}
-        column={3}
+        column={detailData?.dataset_name === DatasetValueMap.ShareGPT ? 2 : 3}
         styles={{
           content: {
             justifyContent: 'flex-start'

src/pages/benchmark/config/detail-types.ts

@@ -64,6 +64,11 @@ export interface GPUData {
   core_total: number;
 }
 
+export interface Snapshot {
+  instances: Record<string, InstancesData>;
+  workers: Record<string, WorkerData>;
+  gpus: Record<string, GPUData>;
+}
 export interface BenchmarkDetail {
   profile: string;
   dataset_seed: number;
@@ -100,11 +105,7 @@ export interface BenchmarkDetail {
   progress: any;
   worker_id: number;
   pid: number;
-  snapshot: {
-    instances: Record<string, InstancesData>;
-    workers: Record<string, WorkerData>;
-    gpus: Record<string, GPUData>;
-  };
+  snapshot: Snapshot;
   gpu_summary: string;
   gpu_vendor_summary: string;
   id: number;

src/pages/benchmark/hooks/use-column-settings.tsx

@@ -214,7 +214,7 @@ const useColumnSettings = (options: {
         <AutoTooltip
           ghost
           minWidth={20}
-          showTitle
+          showTitle={text > 0}
           title={<InfoColumn fieldList={fieldList} data={record}></InfoColumn>}
         >
           {_.round(text, 2) || '-'}

src/pages/llmodels/catalog.tsx

@@ -95,7 +95,8 @@ const Catalog: React.FC = () => {
 
   const handleCategoryChange = (value: any) => {
     handleQueryChange({
-      categories: value
+      categories: value,
+      page: 1
     });
   };