From d52da06d9eca59e8019358c1d016e02bcb7c142b Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Fri, 7 Mar 2025 17:06:05 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Tabs=20=E5=8D=A1?= =?UTF-8?q?=E9=A1=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/components/FormInfo/index.less | 1 - react-ui/src/components/KFSpin/index.tsx | 2 +- react-ui/src/pages/AutoML/Instance/index.tsx | 16 ++-- .../components/ExperimentList/index.tsx | 5 +- react-ui/src/pages/Experiment/index.jsx | 5 +- .../pages/HyperParameter/Instance/index.tsx | 10 +-- .../components/CreateForm/ExecuteConfig.tsx | 16 ++-- .../components/ExperimentHistory/index.tsx | 79 +++++++------------ .../components/HyperParameterBasic/index.tsx | 4 +- .../components/ParameterInfo/index.tsx | 4 +- react-ui/src/pages/HyperParameter/types.ts | 4 +- .../ModelDeployment/VersionInfo/index.tsx | 12 +-- 12 files changed, 57 insertions(+), 101 deletions(-) diff --git a/react-ui/src/components/FormInfo/index.less b/react-ui/src/components/FormInfo/index.less index 868404c7..322fb082 100644 --- a/react-ui/src/components/FormInfo/index.less +++ b/react-ui/src/components/FormInfo/index.less @@ -6,7 +6,6 @@ background-color: rgba(0, 0, 0, 0.04); border: 1px solid #d9d9d9; border-radius: 6px; - cursor: not-allowed; .ant-typography { margin: 0 !important; diff --git a/react-ui/src/components/KFSpin/index.tsx b/react-ui/src/components/KFSpin/index.tsx index a3a6c3e5..ee054aea 100644 --- a/react-ui/src/components/KFSpin/index.tsx +++ b/react-ui/src/components/KFSpin/index.tsx @@ -9,7 +9,7 @@ import './index.less'; interface KFSpinProps extends SpinProps { /** 加载文本 */ - label: string; + label?: string; } /** 自定义 Spin */ diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index 2ccde91f..8b525bdd 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -25,7 +25,6 @@ enum TabKeys { const NodePrefix = 'auto-ml'; function AutoMLInstance() { - const [activeTab, setActiveTab] = useState(TabKeys.Params); const [autoMLInfo, setAutoMLInfo] = useState(undefined); const [instanceInfo, setInstanceInfo] = useState(undefined); const params = useParams(); @@ -83,10 +82,10 @@ function AutoMLInstance() { }; const setupSSE = (name: string, namespace: string) => { - let { origin } = location; - if (process.env.NODE_ENV === 'development') { - origin = 'http://172.20.32.197:31213'; - } + const { origin } = location; + // if (process.env.NODE_ENV === 'development') { + // origin = 'http://172.20.32.197:31213'; + // } const params = encodeURIComponent(`metadata.namespace=${namespace},metadata.name=${name}`); const evtSource = new EventSource( `${origin}/api/v1/realtimeStatus?listOptions.fieldSelector=${params}`, @@ -204,12 +203,7 @@ function AutoMLInstance() { return (
- +
); } diff --git a/react-ui/src/pages/AutoML/components/ExperimentList/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentList/index.tsx index 0da5ca9c..01f6b899 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentList/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentList/index.tsx @@ -412,11 +412,8 @@ function ExperimentList({ type }: ExperimentListProps) { onLoadMore={() => loadMoreExperimentIns()} > ), - onExpand: (e, a) => { - handleExpandChange(e, a); - }, + onExpand: handleExpandChange, expandedRowKeys: expandedRowKeys, - rowExpandable: () => true, }} rowKey="id" /> diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index 70345689..efd18344 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -549,11 +549,8 @@ function Experiment() { onLoadMore={() => loadMoreExperimentIns()} > ), - onExpand: (e, a) => { - expandChange(e, a); - }, + onExpand: expandChange, expandedRowKeys: [expandedRowKeys], - rowExpandable: (record) => true, }} /> diff --git a/react-ui/src/pages/HyperParameter/Instance/index.tsx b/react-ui/src/pages/HyperParameter/Instance/index.tsx index 21f5dfe3..df25cc18 100644 --- a/react-ui/src/pages/HyperParameter/Instance/index.tsx +++ b/react-ui/src/pages/HyperParameter/Instance/index.tsx @@ -23,7 +23,6 @@ enum TabKeys { } function HyperParameterInstance() { - const [activeTab, setActiveTab] = useState(TabKeys.Params); const [experimentInfo, setExperimentInfo] = useState(undefined); const [instanceInfo, setInstanceInfo] = useState( undefined, @@ -101,7 +100,7 @@ function HyperParameterInstance() { }; const setupSSE = (name: string, namespace: string) => { - let { origin } = location; + const { origin } = location; // if (process.env.NODE_ENV === 'development') { // origin = 'http://172.20.32.197:31213'; // } @@ -204,12 +203,7 @@ function HyperParameterInstance() { return (
- +
); } diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx index 672f9094..307bc5dd 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx @@ -202,16 +202,16 @@ function ExecuteConfig() { - + @@ -297,7 +297,7 @@ function ExecuteConfig() { @@ -460,7 +460,7 @@ function ExecuteConfig() { ); if (arr.length > 0 && arr.length < runParameters.length) { return Promise.reject( - new Error(`手动运行参数 ${name} 必须全部填写或者都不填写`), + new Error(`手动运行超参数 ${name} 必须全部填写或者都不填写`), ); } } @@ -475,7 +475,7 @@ function ExecuteConfig() { @@ -567,9 +567,9 @@ function ExecuteConfig() { diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx b/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx index 3b3822d9..0e79687b 100644 --- a/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx @@ -18,9 +18,19 @@ type ExperimentHistoryProps = { }; function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { + const [expandedRowKeys, setExpandedRowKeys] = useState([]); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const { message } = App.useApp(); + const [tableData, setTableData] = useState([]); + const [loading, setLoading] = useState(true); + // 防止 Tabs 卡顿 + setTimeout(() => { + setTableData(trialList); + setLoading(false); + }, 100); + + // 计算 column const first: HyperParameterTrial | undefined = trialList[0]; const config: Record = first?.config ?? {}; const metricAnalysis: Record = first?.metric_analysis ?? {}; @@ -32,7 +42,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { title: '序号', dataIndex: 'index', key: 'index', - width: 110, + width: 100, render: (_text, record, index: number) => { return (
@@ -114,52 +124,8 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { }); } - const fileColumns: TableProps['columns'] = [ - { - title: '文件名称', - dataIndex: 'name', - key: 'name', - render: tableCellRender(false), - }, - { - title: '文件大小', - dataIndex: 'size', - key: 'size', - width: 200, - render: tableCellRender(false), - }, - { - title: '操作', - dataIndex: 'option', - width: 160, - key: 'option', - render: (_: any, record: HyperParameterFile) => { - return ( - - ); - }, - }, - ]; - - const expandedRowRender = (record: HyperParameterTrial) => ( - - ); - - const expandedRowRender2 = (record: HyperParameterTrial) => { + // 自定义展开视图 + const expandedRowRender = (record: HyperParameterTrial) => { const filesToTreeData = ( files: HyperParameterFile[], parent?: HyperParameterFile, @@ -207,6 +173,15 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { ); }; + // 展开实例 + const handleExpandChange = (expanded: boolean, record: HyperParameterTrial) => { + if (expanded) { + setExpandedRowKeys([record.trial_id]); + } else { + setExpandedRowKeys([]); + } + }; + // 选择行 const rowSelection: TableProps['rowSelection'] = { type: 'checkbox', @@ -218,6 +193,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { }, }; + // 对比 const handleComparisonClick = () => { if (selectedRowKeys.length < 1) { message.error('请至少选择一项'); @@ -248,14 +224,19 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { )} >
(record.is_best ? styles['table-best-row'] : '')} - dataSource={trialList} + dataSource={tableData} columns={trialColumns} pagination={false} bordered={true} scroll={{ y: 'calc(100% - 110px)', x: '100%' }} rowKey="trial_id" - expandable={{ expandedRowRender: expandedRowRender2 }} + expandable={{ + expandedRowRender: expandedRowRender, + onExpand: handleExpandChange, + expandedRowKeys: expandedRowKeys, + }} rowSelection={rowSelection} /> diff --git a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx index 47e5534e..df2ca0ad 100644 --- a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx @@ -113,7 +113,7 @@ function HyperParameterBasic({ format: formatModel, }, { - label: '总实验次数', + label: '总试验次数', value: info.num_samples, }, { @@ -135,7 +135,7 @@ function HyperParameterBasic({ value: info.min_samples_required, }, { - label: '优化方向', + label: '指标优化方向', value: info.mode, format: formatOptimizeMode, }, diff --git a/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx b/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx index 0e5ced40..740010cc 100644 --- a/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/ParameterInfo/index.tsx @@ -88,9 +88,9 @@ function ParameterInfo({ info }: ParameterInfoProps) { return (
-
参数
+
超参数
-
手动运行参数
+
手动运行超参数
(ModelDeploymentTabKey.Predict); const [versionInfo, setVersionInfo] = useState(undefined); const params = useParams(); const id = params.id; @@ -61,11 +60,6 @@ function ServiceVersionInfo() { }, ]; - // 切换 Tab，重置数据 - const hanleTabChange: TabsProps['onChange'] = (value) => { - setActiveTab(value); - }; - return (
@@ -77,7 +71,7 @@ function ServiceVersionInfo() { >
- +