From 0a903c771410c043d9f60b7769e850fbd4538cc3 Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 8 Feb 2024 11:58:43 +0800 Subject: [PATCH] feat: add SelectFiles and add KnowledgeTesting (#60) * feat: add KnowledgeTesting * feat: add SelectFiles --- web/src/assets/svg/navigation-pointer.svg | 12 +++ .../assets/svg/selected-files-collapse.svg | 5 + web/src/constants/knowledge.ts | 1 + web/src/less/variable.less | 1 + .../components/knowledge-sidebar/index.tsx | 47 ++++++---- .../components/knowledge-testing/index.less | 5 + .../components/knowledge-testing/index.tsx | 16 ++++ .../testing-control/index.less | 26 ++++++ .../testing-control/index.tsx | 92 +++++++++++++++++++ .../testing-result/index.less | 16 ++++ .../testing-result/index.tsx | 54 +++++++++++ .../testing-result/select-files.tsx | 82 +++++++++++++++++ web/src/pages/add-knowledge/constant.ts | 1 + web/src/routes.ts | 4 + 14 files changed, 343 insertions(+), 19 deletions(-) create mode 100644 web/src/assets/svg/navigation-pointer.svg create mode 100644 web/src/assets/svg/selected-files-collapse.svg create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/index.less create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/index.tsx create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx create mode 100644 web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx diff --git a/web/src/assets/svg/navigation-pointer.svg b/web/src/assets/svg/navigation-pointer.svg new file mode 100644 index 000000000..b8abd685d --- /dev/null +++ b/web/src/assets/svg/navigation-pointer.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/selected-files-collapse.svg b/web/src/assets/svg/selected-files-collapse.svg new file mode 100644 index 000000000..4ef8e368d --- /dev/null +++ b/web/src/assets/svg/selected-files-collapse.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/web/src/constants/knowledge.ts b/web/src/constants/knowledge.ts index cf117d31c..043c445e2 100644 --- a/web/src/constants/knowledge.ts +++ b/web/src/constants/knowledge.ts @@ -2,6 +2,7 @@ export enum KnowledgeRouteKey { Dataset = 'dataset', Testing = 'testing', Configuration = 'configuration', + TempTesting = 'tempTesting', } export enum RunningStatus { diff --git a/web/src/less/variable.less b/web/src/less/variable.less index 3ade35962..7577f74ab 100644 --- a/web/src/less/variable.less +++ b/web/src/less/variable.less @@ -1,6 +1,7 @@ @fontWeight600: 600; @fontWeight700: 700; +@grayBackground: rgba(247, 248, 250, 1); @gray2: rgba(29, 25, 41, 1); @gray3: rgba(52, 48, 62, 1); @gray8: rgba(165, 163, 169, 1); diff --git a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx index 932737fcd..e24e0bf32 100644 --- a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx @@ -6,7 +6,7 @@ import { getWidth } from '@/utils'; import { AntDesignOutlined } from '@ant-design/icons'; import { Avatar, Menu, MenuProps, Space } from 'antd'; import classNames from 'classnames'; -import { useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { useNavigate, useSelector } from 'umi'; import { KnowledgeRouteKey, routeMap } from '../../constant'; import styles from './index.less'; @@ -26,23 +26,27 @@ const KnowledgeSidebar = () => { type MenuItem = Required['items'][number]; - function getItem( - label: React.ReactNode, - key: React.Key, - icon?: React.ReactNode, - disabled?: boolean, - children?: MenuItem[], - type?: 'group', - ): MenuItem { - return { - key, - icon, - children, - label, - type, - disabled, - } as MenuItem; - } + const getItem = useCallback( + ( + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + disabled?: boolean, + children?: MenuItem[], + type?: 'group', + ): MenuItem => { + return { + key, + icon, + children, + label, + type, + disabled, + } as MenuItem; + }, + [], + ); + const items: MenuItem[] = useMemo(() => { return [ getItem( @@ -60,8 +64,13 @@ const KnowledgeSidebar = () => { KnowledgeRouteKey.Configuration, , ), + getItem( + routeMap[KnowledgeRouteKey.TempTesting], + KnowledgeRouteKey.TempTesting, + , + ), ]; - }, [id]); + }, [getItem]); useEffect(() => { if (windowWidth.width > 957) { diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/index.less new file mode 100644 index 000000000..e75ea35eb --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/index.less @@ -0,0 +1,5 @@ +.testingWrapper { + flex: 1; + background-color: @grayBackground; + height: 100%; +} diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx new file mode 100644 index 000000000..5c4d22d98 --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx @@ -0,0 +1,16 @@ +import { Flex } from 'antd'; +import TestingControl from './testing-control'; +import TestingResult from './testing-result'; + +import styles from './index.less'; + +const KnowledgeTesting = () => { + return ( + + + + + ); +}; + +export default KnowledgeTesting; diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less new file mode 100644 index 000000000..42842a278 --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less @@ -0,0 +1,26 @@ +.testingControlWrapper { + width: 350px; + background-color: white; + padding: 30px 20px; + .historyTitle { + padding: 30px 0 20px; + } + .historyIcon { + vertical-align: middle; + } + .historyCardWrapper { + width: 100%; + } + .historyCard { + width: 100%; + :global(.ant-card-body) { + padding: 10px; + } + } + .historyText { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + } +} diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx new file mode 100644 index 000000000..97ef9d5f2 --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx @@ -0,0 +1,92 @@ +import { + Button, + Card, + Divider, + Flex, + Input, + Slider, + SliderSingleProps, + Space, + Tag, +} from 'antd'; + +import { DeleteOutlined, HistoryOutlined } from '@ant-design/icons'; +import styles from './index.less'; + +const list = [1, 2, 3]; + +const marks: SliderSingleProps['marks'] = { + 0: '0°C', + 26: '26°C', + 37: '37°C', + 100: { + style: { + color: '#f50', + }, + label: 100°C, + }, +}; + +const TestingControl = () => { + return ( +
+

+ Retrieval testing +

+

xxxx

+ +
+ + + + Semantic Search + + } + > + + + 10/200 + + + +
+
+

+ + + Test history + +

+ + {list.map((x) => ( + + + {x} +
+ content dcjsjl snldsh svnodvn svnodrfn svjdoghdtbnhdo + sdvhodhbuid sldghdrlh +
+ + time + + + + + ))} + +
+
+ ); +}; + +export default TestingControl; diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less new file mode 100644 index 000000000..2a1d8c01f --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less @@ -0,0 +1,16 @@ +.testingResultWrapper { + flex: 1; + background-color: white; + padding: 30px 20px; + + .selectFilesCollapse { + :global(.ant-collapse-header) { + padding-left: 22px; + } + margin-bottom: 32px; + } + + .selectFilesTitle { + padding-right: 10px; + } +} diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx new file mode 100644 index 000000000..14a04ac96 --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx @@ -0,0 +1,54 @@ +import { ReactComponent as SelectedFilesCollapseIcon } from '@/assets/svg/selected-files-collapse.svg'; +import { Card, Collapse, Flex, Space } from 'antd'; +import SelectFiles from './select-files'; + +import styles from './index.less'; + +const list = [1, 2, 3, 4]; + +const TestingResult = () => { + return ( +
+ ( + + )} + className={styles.selectFilesCollapse} + items={[ + { + key: '1', + label: ( + + 4/25 Files Selected + + Hits + View + + + ), + children: ( +
+ +
+ ), + }, + ]} + /> + + {list.map((x) => ( + More}> +

Card content

+

Card content

+

Card content

+ + ))} + +
+ ); +}; + +export default TestingResult; diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx new file mode 100644 index 000000000..0aee3dc13 --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx @@ -0,0 +1,82 @@ +import { ReactComponent as NavigationPointerIcon } from '@/assets/svg/navigation-pointer.svg'; +import { Table, TableProps } from 'antd'; + +interface DataType { + key: string; + name: string; + hits: number; + address: string; + tags: string[]; +} + +const SelectFiles = () => { + const columns: TableProps['columns'] = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + render: (text) =>

{text}

, + }, + + { + title: 'Hits', + dataIndex: 'hits', + key: 'hits', + width: 80, + }, + { + title: 'View', + key: 'view', + width: 50, + render: () => , + }, + ]; + + const rowSelection = { + onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { + console.log( + `selectedRowKeys: ${selectedRowKeys}`, + 'selectedRows: ', + selectedRows, + ); + }, + getCheckboxProps: (record: DataType) => ({ + disabled: record.name === 'Disabled User', // Column configuration not to be checked + name: record.name, + }), + }; + + const data: DataType[] = [ + { + key: '1', + name: 'John Brown', + hits: 32, + address: 'New York No. 1 Lake Park', + tags: ['nice', 'developer'], + }, + { + key: '2', + name: 'Jim Green', + hits: 42, + address: 'London No. 1 Lake Park', + tags: ['loser'], + }, + { + key: '3', + name: 'Joe Black', + hits: 32, + address: 'Sydney No. 1 Lake Park', + tags: ['cool', 'teacher'], + }, + ]; + return ( + + ); +}; + +export default SelectFiles; diff --git a/web/src/pages/add-knowledge/constant.ts b/web/src/pages/add-knowledge/constant.ts index f68a7d0f9..fb0e55946 100644 --- a/web/src/pages/add-knowledge/constant.ts +++ b/web/src/pages/add-knowledge/constant.ts @@ -4,6 +4,7 @@ export const routeMap = { [KnowledgeRouteKey.Dataset]: 'Dataset', [KnowledgeRouteKey.Testing]: 'Retrieval testing', [KnowledgeRouteKey.Configuration]: 'Configuration', + [KnowledgeRouteKey.TempTesting]: 'Testing', }; export enum KnowledgeDatasetRouteKey { diff --git a/web/src/routes.ts b/web/src/routes.ts index 2b7a25199..c2f8aebcf 100644 --- a/web/src/routes.ts +++ b/web/src/routes.ts @@ -46,6 +46,10 @@ const routes = [ path: '/knowledge/testing', component: '@/pages/add-knowledge/components/knowledge-search', }, + { + path: '/knowledge/tempTesting', + component: '@/pages/add-knowledge/components/knowledge-testing', + }, ], }, {