From 0a903c771410c043d9f60b7769e850fbd4538cc3 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
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 0000000..b8abd68
--- /dev/null
+++ b/web/src/assets/svg/navigation-pointer.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g clip-path="url(#clip0_448_5461)">
+ <path
+ d="M2.84455 8.95373C2.34843 8.7608 2.10037 8.66433 2.02795 8.52533C1.96517 8.40483 1.96508 8.26129 2.02772 8.14071C2.09998 8.00163 2.34793 7.90486 2.84383 7.71134L16.9169 2.21939C17.3646 2.0447 17.5884 1.95736 17.7314 2.00514C17.8557 2.04663 17.9531 2.1441 17.9946 2.26831C18.0424 2.41133 17.9551 2.63516 17.7804 3.08281L12.2884 17.1559C12.0949 17.6518 11.9981 17.8998 11.859 17.972C11.7385 18.0347 11.5949 18.0346 11.4744 17.9718C11.3354 17.8994 11.239 17.6513 11.046 17.1552L8.85593 11.5235C8.81677 11.4228 8.79718 11.3725 8.76694 11.3301C8.74013 11.2925 8.70727 11.2596 8.66969 11.2328C8.62728 11.2026 8.57693 11.183 8.47622 11.1438L2.84455 8.95373Z"
+ stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ </g>
+ <defs>
+ <clipPath id="clip0_448_5461">
+ <rect width="20" height="20" fill="white" />
+ </clipPath>
+ </defs>
+</svg>
\ 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 0000000..4ef8e36
--- /dev/null
+++ b/web/src/assets/svg/selected-files-collapse.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M6.66667 10H13.3333M6.5 17.5H13.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5V6.5C17.5 5.09987 17.5 4.3998 17.2275 3.86502C16.9878 3.39462 16.6054 3.01217 16.135 2.77248C15.6002 2.5 14.9001 2.5 13.5 2.5H6.5C5.09987 2.5 4.3998 2.5 3.86502 2.77248C3.39462 3.01217 3.01217 3.39462 2.77248 3.86502C2.5 4.3998 2.5 5.09987 2.5 6.5V13.5C2.5 14.9001 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9878 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5Z"
+ stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/constants/knowledge.ts b/web/src/constants/knowledge.ts
index cf117d3..043c445 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 3ade359..7577f74 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 932737f..e24e0bf 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<MenuProps>['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,
<ConfigrationIcon />,
),
+ getItem(
+ routeMap[KnowledgeRouteKey.TempTesting],
+ KnowledgeRouteKey.TempTesting,
+ <TestingIcon />,
+ ),
];
- }, [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 0000000..e75ea35
--- /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 0000000..5c4d22d
--- /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 (
+ <Flex className={styles.testingWrapper} gap={16}>
+ <TestingControl></TestingControl>
+ <TestingResult></TestingResult>
+ </Flex>
+ );
+};
+
+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 0000000..42842a2
--- /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 0000000..97ef9d5
--- /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: <strong>100°C</strong>,
+ },
+};
+
+const TestingControl = () => {
+ return (
+ <section className={styles.testingControlWrapper}>
+ <p>
+ <b>Retrieval testing</b>
+ </p>
+ <p>xxxx</p>
+ <Divider></Divider>
+ <section>
+ <Slider range marks={marks} defaultValue={[26, 37]} />
+ <Slider range marks={marks} defaultValue={[26, 37]} />
+ <Card
+ size="small"
+ title="Test text"
+ extra={
+ <Button type="primary" ghost>
+ Semantic Search
+ </Button>
+ }
+ >
+ <Input.TextArea autoSize={{ minRows: 8 }}></Input.TextArea>
+ <Flex justify={'space-between'}>
+ <Tag>10/200</Tag>
+ <Button type="primary" size="small">
+ Testing
+ </Button>
+ </Flex>
+ </Card>
+ </section>
+ <section>
+ <p className={styles.historyTitle}>
+ <Space size={'middle'}>
+ <HistoryOutlined className={styles.historyIcon} />
+ <b>Test history</b>
+ </Space>
+ </p>
+ <Space
+ direction="vertical"
+ size={'middle'}
+ className={styles.historyCardWrapper}
+ >
+ {list.map((x) => (
+ <Card className={styles.historyCard} key={x}>
+ <Flex justify={'space-between'} gap={'small'}>
+ <span>{x}</span>
+ <div className={styles.historyText}>
+ content dcjsjl snldsh svnodvn svnodrfn svjdoghdtbnhdo
+ sdvhodhbuid sldghdrlh
+ </div>
+ <Flex gap={'small'}>
+ <span>time</span>
+ <DeleteOutlined></DeleteOutlined>
+ </Flex>
+ </Flex>
+ </Card>
+ ))}
+ </Space>
+ </section>
+ </section>
+ );
+};
+
+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 0000000..2a1d8c0
--- /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 0000000..14a04ac
--- /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 (
+ <section className={styles.testingResultWrapper}>
+ <Collapse
+ expandIcon={() => (
+ <SelectedFilesCollapseIcon></SelectedFilesCollapseIcon>
+ )}
+ className={styles.selectFilesCollapse}
+ items={[
+ {
+ key: '1',
+ label: (
+ <Flex
+ justify={'space-between'}
+ align="center"
+ className={styles.selectFilesTitle}
+ >
+ <span>4/25 Files Selected</span>
+ <Space size={52}>
+ <b>Hits</b>
+ <b>View</b>
+ </Space>
+ </Flex>
+ ),
+ children: (
+ <div>
+ <SelectFiles></SelectFiles>
+ </div>
+ ),
+ },
+ ]}
+ />
+ <Flex gap={'large'} vertical>
+ {list.map((x) => (
+ <Card key={x} title="Default size card" extra={<a href="#">More</a>}>
+ <p>Card content</p>
+ <p>Card content</p>
+ <p>Card content</p>
+ </Card>
+ ))}
+ </Flex>
+ </section>
+ );
+};
+
+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 0000000..0aee3dc
--- /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<DataType>['columns'] = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ render: (text) => <p>{text}</p>,
+ },
+
+ {
+ title: 'Hits',
+ dataIndex: 'hits',
+ key: 'hits',
+ width: 80,
+ },
+ {
+ title: 'View',
+ key: 'view',
+ width: 50,
+ render: () => <NavigationPointerIcon />,
+ },
+ ];
+
+ 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 (
+ <Table
+ columns={columns}
+ dataSource={data}
+ showHeader={false}
+ rowSelection={rowSelection}
+ />
+ );
+};
+
+export default SelectFiles;
diff --git a/web/src/pages/add-knowledge/constant.ts b/web/src/pages/add-knowledge/constant.ts
index f68a7d0..fb0e559 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 2b7a251..c2f8aeb 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',
+ },
],
},
{
--
GitLab