From 3df2d23bf50459d95c231c922c91a439d92aa01e Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 30 Jan 2026 18:33:52 +0800 Subject: [PATCH] fix: benchmark detail styles --- src/components/overlay-scroller/index.tsx | 16 +- src/locales/en-US/benchmark.ts | 2 +- src/locales/ja-JP/benchmark.ts | 2 +- src/locales/ru-RU/benchmark.ts | 2 +- src/locales/zh-CN/benchmark.ts | 2 +- src/pages/_components/column-settings.tsx | 172 +++++++++++++++ .../benchmark/components/right-actions.tsx | 2 +- .../benchmark/components/summary/basic.tsx | 6 +- .../components/summary/benchmark.tsx | 4 +- .../benchmark/components/summary/index.tsx | 2 +- .../components/summary/metrics-result.tsx | 6 +- .../components/summary/percentile-result.tsx | 10 +- src/pages/benchmark/config/detail-types.ts | 6 +- src/pages/benchmark/config/index.ts | 24 ++- src/pages/benchmark/config/types.ts | 4 +- src/pages/benchmark/forms/dataset.tsx | 15 -- src/pages/benchmark/forms/index.tsx | 15 +- src/pages/benchmark/forms/model-instance.tsx | 4 + src/pages/benchmark/forms/random-settings.tsx | 8 +- .../benchmark/hooks/use-benchmark-columns.tsx | 6 +- .../benchmark/hooks/use-column-settings.tsx | 201 ++++++------------ src/pages/benchmark/index.tsx | 4 +- .../benchmark/services/use-query-dataset.ts | 13 +- .../benchmark/services/use-query-profiles.ts | 2 +- 24 files changed, 310 insertions(+), 218 deletions(-) create mode 100644 src/pages/_components/column-settings.tsx diff --git a/src/components/overlay-scroller/index.tsx b/src/components/overlay-scroller/index.tsx index 7c302634..78e6b1cb 100644 --- a/src/components/overlay-scroller/index.tsx +++ b/src/components/overlay-scroller/index.tsx @@ -19,10 +19,21 @@ export const OverlayScroller: React.FC< OverlayScrollerOptions & { maxHeight?: number; style?: React.CSSProperties; + styles?: { + wrapper?: React.CSSProperties; + }; children: React.ReactNode; onScroll?: (e: React.UIEvent) => void; } -> = ({ children, maxHeight, scrollbars, oppositeTheme, style, onScroll }) => { +> = ({ + children, + maxHeight, + scrollbars, + oppositeTheme, + style, + styles, + onScroll +}) => { const scroller = React.useRef(null); const { initialize } = useOverlayScroller({ options: { @@ -48,7 +59,8 @@ export const OverlayScroller: React.FC< style={{ paddingInlineStart: 8, paddingInlineEnd: 8, - ...style + ...style, + ...styles?.wrapper }} > {children} diff --git a/src/locales/en-US/benchmark.ts b/src/locales/en-US/benchmark.ts index ff47730d..f515d968 100644 --- a/src/locales/en-US/benchmark.ts +++ b/src/locales/en-US/benchmark.ts @@ -21,7 +21,7 @@ export default { 'benchmark.form.profile.longContext': 'Long Context', 'benchmark.form.profile.heavy': 'Generation Heavy', 'benchmark.form.profile.custom': 'Custom', - 'benchmark.table.inputTokenLength': 'Prompt Token Length', + 'benchmark.table.inputTokenLength': 'Input Token Length', 'benchmark.table.outputTokenLength': 'Output Token Length', 'benchmark.detail.summary.title': 'Summary', 'benchmark.detail.configure.title': 'Configure', diff --git a/src/locales/ja-JP/benchmark.ts b/src/locales/ja-JP/benchmark.ts index ff47730d..f515d968 100644 --- a/src/locales/ja-JP/benchmark.ts +++ b/src/locales/ja-JP/benchmark.ts @@ -21,7 +21,7 @@ export default { 'benchmark.form.profile.longContext': 'Long Context', 'benchmark.form.profile.heavy': 'Generation Heavy', 'benchmark.form.profile.custom': 'Custom', - 'benchmark.table.inputTokenLength': 'Prompt Token Length', + 'benchmark.table.inputTokenLength': 'Input Token Length', 'benchmark.table.outputTokenLength': 'Output Token Length', 'benchmark.detail.summary.title': 'Summary', 'benchmark.detail.configure.title': 'Configure', diff --git a/src/locales/ru-RU/benchmark.ts b/src/locales/ru-RU/benchmark.ts index ff47730d..f515d968 100644 --- a/src/locales/ru-RU/benchmark.ts +++ b/src/locales/ru-RU/benchmark.ts @@ -21,7 +21,7 @@ export default { 'benchmark.form.profile.longContext': 'Long Context', 'benchmark.form.profile.heavy': 'Generation Heavy', 'benchmark.form.profile.custom': 'Custom', - 'benchmark.table.inputTokenLength': 'Prompt Token Length', + 'benchmark.table.inputTokenLength': 'Input Token Length', 'benchmark.table.outputTokenLength': 'Output Token Length', 'benchmark.detail.summary.title': 'Summary', 'benchmark.detail.configure.title': 'Configure', diff --git a/src/locales/zh-CN/benchmark.ts b/src/locales/zh-CN/benchmark.ts index da26b9ec..5860e71d 100644 --- a/src/locales/zh-CN/benchmark.ts +++ b/src/locales/zh-CN/benchmark.ts @@ -21,7 +21,7 @@ export default { 'benchmark.form.profile.longContext': '长上下文', 'benchmark.form.profile.heavy': '高生成量', 'benchmark.form.profile.custom': '自定义', - 'benchmark.table.inputTokenLength': '提示词 Token 长度', + 'benchmark.table.inputTokenLength': '输入 Token 长度', 'benchmark.table.outputTokenLength': '输出 Token 长度', 'benchmark.detail.summary.title': '摘要', 'benchmark.detail.configure.title': '配置', diff --git a/src/pages/_components/column-settings.tsx b/src/pages/_components/column-settings.tsx new file mode 100644 index 00000000..ea84a478 --- /dev/null +++ b/src/pages/_components/column-settings.tsx @@ -0,0 +1,172 @@ +import OverlayScroller from '@/components/overlay-scroller'; +import { SettingOutlined } from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; +import { Button, Checkbox, Col, Popover, Row, Tooltip } from 'antd'; +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + padding: 8px 12px; + padding-right: 4px; + .title { + font-weight: 500; + margin-bottom: 12px; + } + .btn-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 12px; + } + .buttons { + display: flex; + gap: 8px; + justify-content: flex-end; + } +`; + +const Title = styled.div` + font-weight: 500; + margin-bottom: 8px; + margin-top: 4px; +`; + +const ColumnSettings: React.FC<{ + contentHeight: number; + columns: { + title: string; + dataIndex?: string; + children?: { title: string; dataIndex?: string }[]; + }[]; + selectedColumns?: string[]; + grouped?: boolean; + onChange?: (selectedColumns: string[]) => void; +}> = (props) => { + const intl = useIntl(); + const { contentHeight, columns, selectedColumns, grouped, onChange } = props; + const [open, setOpen] = React.useState(false); + + const handleToggle = () => { + setOpen(!open); + }; + + const handleSelectAll = () => { + if (grouped) { + const allCols: string[] = []; + columns.forEach((group) => { + group.children?.forEach((col) => { + if (col.dataIndex) { + allCols.push(col.dataIndex); + } + }); + }); + onChange?.(allCols); + } else { + const allCols = columns + .map((col) => col.dataIndex) + .filter((dataIndex): dataIndex is string => Boolean(dataIndex)); + onChange?.(allCols); + } + }; + + const handleConfirm = () => { + setOpen(false); + }; + + const contentRender = () => { + return ( + + {!grouped &&
Column Settings
} + + { + onChange?.(checkedValues as string[]); + }} + > + <> + {grouped ? ( + columns.map((row, index) => ( +
+ {row.title} + + {row.children?.map((col) => ( + + + {col.title} + + + ))} + +
+ )) + ) : ( + + {columns.map((col) => ( + + + {col.title} + + + ))} + + )} + + + + +
+ +
+ + +
+
+ + ); + }; + + return ( + + + + + + ); +}; + +export default ColumnSettings; diff --git a/src/pages/benchmark/components/right-actions.tsx b/src/pages/benchmark/components/right-actions.tsx index 1713c5a0..d73a0574 100644 --- a/src/pages/benchmark/components/right-actions.tsx +++ b/src/pages/benchmark/components/right-actions.tsx @@ -62,7 +62,7 @@ const RightActions: React.FC = ({ icon={} > */} - {settingButton} + {/* {settingButton} */} -
- - -
- - - ); - }; - const SettingsButton = ( - - - - - + ]} + > ); return { diff --git a/src/pages/benchmark/index.tsx b/src/pages/benchmark/index.tsx index 61041713..899c6259 100644 --- a/src/pages/benchmark/index.tsx +++ b/src/pages/benchmark/index.tsx @@ -63,7 +63,9 @@ const Benchmark: React.FC = () => { }); const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } = useViewLogs(); - const { SettingsButton, selectedColumns } = useColumnSettings(); + const { SettingsButton, selectedColumns } = useColumnSettings({ + contentHeight: 320 + }); const { handleStopBenchmark } = useStopBenchmark(); const { datasetList, fetchDatasetData } = useQueryDataset(); diff --git a/src/pages/benchmark/services/use-query-dataset.ts b/src/pages/benchmark/services/use-query-dataset.ts index 4fbd313e..3216f275 100644 --- a/src/pages/benchmark/services/use-query-dataset.ts +++ b/src/pages/benchmark/services/use-query-dataset.ts @@ -1,6 +1,7 @@ import { useQueryDataList } from '@/hooks/use-query-data-list'; import { useState } from 'react'; import { queryDatasetList } from '../apis'; +import { datasetList as datasetOptions } from '../config'; import { DatasetListItem } from '../config/types'; const useQueryDataset = () => { @@ -17,17 +18,9 @@ const useQueryDataset = () => { >([]); const fetchDatasetData = async () => { - const items = await fetchData({ - page: -1 - }); - const list = - items?.map((item) => ({ - ...item, - label: item.name, - value: item.id - })) || []; + // TODO: may be fetch data from server in the future. - setDatasetList([...list]); + setDatasetList([...datasetOptions]); }; return { diff --git a/src/pages/benchmark/services/use-query-profiles.ts b/src/pages/benchmark/services/use-query-profiles.ts index d01519c2..dc81e869 100644 --- a/src/pages/benchmark/services/use-query-profiles.ts +++ b/src/pages/benchmark/services/use-query-profiles.ts @@ -41,7 +41,7 @@ export default function useQueryProfiles() { value: 'Custom', config: { dataset_name: '', - dataset_prompt_tokens: null, + dataset_input_tokens: null, dataset_output_tokens: null, request_rate: null, total_requests: null