diff --git a/react-ui/src/components/BasicInfo/components.tsx b/react-ui/src/components/BasicInfo/BasicInfoItem.tsx similarity index 50% rename from react-ui/src/components/BasicInfo/components.tsx rename to react-ui/src/components/BasicInfo/BasicInfoItem.tsx index b8932a25..776a7f94 100644 --- a/react-ui/src/components/BasicInfo/components.tsx +++ b/react-ui/src/components/BasicInfo/BasicInfoItem.tsx @@ -4,9 +4,8 @@ * @Description: 用于 BasicInfo 和 BasicTableInfo 组件的子组件 */ -import { Link } from '@umijs/max'; -import { Typography } from 'antd'; import React from 'react'; +import BasicInfoItemValue from './BasicInfoItemValue'; import { type BasicInfoData, type BasicInfoLink } from './types'; type BasicInfoItemProps = { @@ -15,12 +14,14 @@ type BasicInfoItemProps = { classPrefix: string; }; -export function BasicInfoItem({ data, labelWidth, classPrefix }: BasicInfoItemProps) { +function BasicInfoItem({ data, labelWidth, classPrefix }: BasicInfoItemProps) { const { label, value, format, ellipsis } = data; const formatValue = format ? format(value) : value; const myClassName = `${classPrefix}__item`; let valueComponent = undefined; - if (Array.isArray(formatValue)) { + if (React.isValidElement(formatValue)) { + valueComponent = formatValue; + } else if (Array.isArray(formatValue)) { valueComponent = (
{formatValue.map((item: BasicInfoLink) => ( @@ -35,11 +36,6 @@ export function BasicInfoItem({ data, labelWidth, classPrefix }: BasicInfoItemPr ))}
); - } else if (React.isValidElement(formatValue)) { - // 这个判断必须在下面的判断之前 - valueComponent = ( - - ); } else if (typeof formatValue === 'object' && formatValue) { valueComponent = ( - {value} - - ); - } else if (link && value) { - component = ( - - {value} - - ); - } else if (React.isValidElement(value)) { - return value; - } else { - component = {value ?? '--'}; - } - - return ( -
- - {component} - -
- ); -} +export default BasicInfoItem; diff --git a/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx b/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx new file mode 100644 index 00000000..eb2dab24 --- /dev/null +++ b/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx @@ -0,0 +1,54 @@ +/* + * @Author: 赵伟 + * @Date: 2024-11-29 09:27:19 + * @Description: 用于 BasicInfoItem 的组件 + */ + +import { Link } from '@umijs/max'; +import { Typography } from 'antd'; +import React from 'react'; + +type BasicInfoItemValueProps = { + ellipsis?: boolean; + classPrefix: string; + value: string | React.ReactNode; + link?: string; + url?: string; +}; + +function BasicInfoItemValue({ value, link, url, ellipsis, classPrefix }: BasicInfoItemValueProps) { + if (React.isValidElement(value)) { + return value; + } + + const myClassName = `${classPrefix}__item__value`; + let component = undefined; + if (url && value) { + component = ( + + {value} + + ); + } else if (link && value) { + component = ( + + {value} + + ); + } else { + component = {value ?? '--'}; + } + + return ( +
+ + {component} + +
+ ); +} + +export default BasicInfoItemValue; diff --git a/react-ui/src/components/BasicInfo/format.ts b/react-ui/src/components/BasicInfo/format.ts deleted file mode 100644 index 0dae2422..00000000 --- a/react-ui/src/components/BasicInfo/format.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - * @Author: 赵伟 - * @Date: 2024-11-29 09:27:19 - * @Description: 用于 BasicInfo 和 BasicTableInfo 组件的常用转化格式 - */ - -// 格式化日期 -export { formatDate } from '@/utils/date'; - -/** - * 格式化字符串数组 - * @param value - 字符串数组 - * @returns 逗号分隔的字符串 - */ -export const formatList = (value: string[] | null | undefined): string => { - if ( - value === undefined || - value === null || - Array.isArray(value) === false || - value.length === 0 - ) { - return '--'; - } - return value.join(','); -}; - -/** - * 格式化布尔值 - * @param value - 布尔值 - * @returns "是" 或 "否" - */ -export const formatBoolean = (value: boolean): string => { - return value ? '是' : '否'; -}; - -type FormatEnum = (value: string | number) => string; - -/** - * 格式化枚举 - * @param options - 枚举选项 - * @returns 格式化枚举函数 - */ -export const formatEnum = (options: { value: string | number; label: string }[]): FormatEnum => { - return (value: string | number) => { - const option = options.find((item) => item.value === value); - return option ? option.label : '--'; - }; -}; diff --git a/react-ui/src/components/BasicInfo/index.tsx b/react-ui/src/components/BasicInfo/index.tsx index 1336d0b6..5f60b79a 100644 --- a/react-ui/src/components/BasicInfo/index.tsx +++ b/react-ui/src/components/BasicInfo/index.tsx @@ -1,9 +1,8 @@ import classNames from 'classnames'; import React from 'react'; -import { BasicInfoItem } from './components'; +import BasicInfoItem from './BasicInfoItem'; import './index.less'; import type { BasicInfoData, BasicInfoLink } from './types'; -export * from './format'; export type { BasicInfoData, BasicInfoLink }; type BasicInfoProps = { diff --git a/react-ui/src/components/BasicInfo/types.ts b/react-ui/src/components/BasicInfo/types.ts index a7c10ba0..be2ac774 100644 --- a/react-ui/src/components/BasicInfo/types.ts +++ b/react-ui/src/components/BasicInfo/types.ts @@ -3,12 +3,12 @@ export type BasicInfoData = { label: string; value?: any; ellipsis?: boolean; - format?: (_value?: any) => string | BasicInfoLink | BasicInfoLink[] | undefined; + format?: (_value?: any) => string | React.ReactNode | BasicInfoLink | BasicInfoLink[] | undefined; }; // 值为链接的类型 export type BasicInfoLink = { - value: string; + value?: string; link?: string; url?: string; }; diff --git a/react-ui/src/components/BasicTableInfo/index.tsx b/react-ui/src/components/BasicTableInfo/index.tsx index 571c4b5b..f24f3dc9 100644 --- a/react-ui/src/components/BasicTableInfo/index.tsx +++ b/react-ui/src/components/BasicTableInfo/index.tsx @@ -1,8 +1,7 @@ import classNames from 'classnames'; -import { BasicInfoItem } from '../BasicInfo/components'; +import BasicInfoItem from '../BasicInfo/BasicInfoItem'; import { type BasicInfoData, type BasicInfoLink } from '../BasicInfo/types'; import './index.less'; -export * from '../BasicInfo/format'; export type { BasicInfoData, BasicInfoLink }; type BasicTableInfoProps = { diff --git a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx index 76d26a75..bb30e064 100644 --- a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx +++ b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx @@ -4,16 +4,11 @@ import { experimentStatusInfo } from '@/pages/Experiment/status'; import { type NodeStatus } from '@/types'; import { parseJsonText } from '@/utils'; import { elapsedTime } from '@/utils/date'; -import { formatDataset } from '@/utils/format'; +import { formatBoolean, formatDataset, formatDate, formatEnum } from '@/utils/format'; import { Flex } from 'antd'; import classNames from 'classnames'; import { useMemo } from 'react'; -import ConfigInfo, { - formatBoolean, - formatDate, - formatEnum, - type BasicInfoData, -} from '../ConfigInfo'; +import ConfigInfo, { type BasicInfoData } from '../ConfigInfo'; import styles from './index.less'; // 格式化优化方向 diff --git a/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx b/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx index 256f7b16..72596581 100644 --- a/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx +++ b/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx @@ -2,7 +2,6 @@ import BasicInfo, { type BasicInfoData } from '@/components/BasicInfo'; import InfoGroup from '@/components/InfoGroup'; import classNames from 'classnames'; import styles from './index.less'; -export * from '@/components/BasicInfo/format'; export type { BasicInfoData }; type ConfigInfoProps = { diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx index 86760130..b900c2e5 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx @@ -6,9 +6,10 @@ import ResourceSelect, { } from '@/components/ResourceSelect'; import SubAreaTitle from '@/components/SubAreaTitle'; import { hyperParameterOptimizedModeOptions } from '@/enums'; +import { useComputingResource } from '@/hooks/resource'; import { modalConfirm } from '@/utils/ui'; -import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; -import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select } from 'antd'; +import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select, Tooltip } from 'antd'; import { isEqual } from 'lodash'; import PopParameterRange from './PopParameterRange'; import styles from './index.less'; @@ -25,12 +26,48 @@ const schedulerAlgorithms = ['ASHA', 'HyperBand', 'MedianStopping', 'PopulationB (name) => ({ label: name, value: name }), ); +const parameterTooltip = `uniform(-5, -1) + 在 -5.0 和 -1.0 之间均匀采样浮点数 + + quniform(3.2, 5.4, 0.2) + 在 3.2 和 5.4 之间均匀采样浮点数，四舍五入到 0.2 的倍数 + + loguniform(1e-4, 1e-2) + 在 0.0001 和 0.01 之间均匀采样浮点数，对数空间采样 + + qloguniform(1e-4, 1e-1, 5e-5) + 在 0.0001 和 0.01 之间均匀采样浮点数，对数空间采样并四舍五入到 0.00005 的倍数 + + randn(10, 2) + 在均值为 10，方差为 2 的正态分布中进行随机浮点数抽样 + + qrandn(10, 2, 0.2) + 在均值为 10，方差为 2 的正态分布中进行随机浮点数抽样，四舍五入到 0.2 的倍数 + + randint(-9, 15) + 在 -9（包括）到 15（不包括）之间均匀采样整数 + + qrandint(-21, 12, 3) + 在 -21（包括）到 12（不包括）之间均匀采样整数，四舍五入到 3 的倍数 + + lograndint(1, 10) + 在 1（包括）到 10（不包括）之间均匀采样整数，对数空间采样 + + qlograndint(1, 10, 2) + 在 1（包括）到 10（不包括）之间均匀采样整数，对数空间采样并四舍五入到 2 的倍数 + + choice(["a", "b", "c"]) + 从指定的选项中采样一个选项 + + grid([32, 64, 128]) + 对这些值进行网格搜索，每个值都将被采样 +`; + function ExecuteConfig() { const form = Form.useFormInstance(); const searchAlgorithm = Form.useWatch('search_alg', form); const paramsTypeOptions = searchAlgorithm === 'Ax' ? axParameterOptions : parameterOptions; - // const parameters = Form.useWatch('parameters', form); - // console.log('parameters', parameters); + const [resourceStandardList, filterResourceStandard] = useComputingResource(); const handleSearchAlgorithmChange = (value: string) => { if ( @@ -231,7 +268,17 @@ function ExecuteConfig() {
参数名称
-
参数类型
+
+ 参数类型 + + + +
取值范围
操作
 @@ -465,33 +512,25 @@ function ExecuteConfig() { - - - - - - - - - +