Feat: If there is no result in the recall test, an empty data image will be displayed. #4182 (#4183)

### What problem does this PR solve?

Feat: If there is no result in the recall test, an empty data image will
be displayed. #4182
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2024-12-23 15:17:56 +08:00
committed by GitHub
parent 8f070c3d56
commit a4bccc1ae7
2 changed files with 40 additions and 21 deletions

View File

@ -248,4 +248,14 @@ export const useSelectTestingResult = (): ITestingResult => {
total: 0, total: 0,
}) as ITestingResult; }) as ITestingResult;
}; };
export const useSelectIsTestingSuccess = () => {
const status = useMutationState({
filters: { mutationKey: ['testChunk'] },
select: (mutation) => {
return mutation.state.status;
},
});
return status.at(-1) === 'success';
};
//#endregion //#endregion

View File

@ -5,6 +5,7 @@ import { ITestingChunk } from '@/interfaces/database/knowledge';
import { import {
Card, Card,
Collapse, Collapse,
Empty,
Flex, Flex,
Pagination, Pagination,
PaginationProps, PaginationProps,
@ -14,7 +15,10 @@ import {
import camelCase from 'lodash/camelCase'; import camelCase from 'lodash/camelCase';
import SelectFiles from './select-files'; import SelectFiles from './select-files';
import { useSelectTestingResult } from '@/hooks/knowledge-hooks'; import {
useSelectIsTestingSuccess,
useSelectTestingResult,
} from '@/hooks/knowledge-hooks';
import { useGetPaginationWithRouter } from '@/hooks/logic-hooks'; import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import styles from './index.less'; import styles from './index.less';
@ -50,6 +54,7 @@ const TestingResult = ({ handleTesting }: IProps) => {
const { documents, chunks, total } = useSelectTestingResult(); const { documents, chunks, total } = useSelectTestingResult();
const { t } = useTranslate('knowledgeDetails'); const { t } = useTranslate('knowledgeDetails');
const { pagination, setPagination } = useGetPaginationWithRouter(); const { pagination, setPagination } = useGetPaginationWithRouter();
const isSuccess = useSelectIsTestingSuccess();
const onChange: PaginationProps['onChange'] = (pageNumber, pageSize) => { const onChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
pagination.onChange?.(pageNumber, pageSize); pagination.onChange?.(pageNumber, pageSize);
@ -105,26 +110,30 @@ const TestingResult = ({ handleTesting }: IProps) => {
flex={1} flex={1}
className={styles.selectFilesCollapse} className={styles.selectFilesCollapse}
> >
{chunks?.map((x) => ( {isSuccess && chunks.length > 0 ? (
<Card key={x.chunk_id} title={<ChunkTitle item={x}></ChunkTitle>}> chunks?.map((x) => (
<Flex gap={'middle'}> <Card key={x.chunk_id} title={<ChunkTitle item={x}></ChunkTitle>}>
{x.img_id && ( <Flex gap={'middle'}>
<Popover {x.img_id && (
placement="left" <Popover
content={ placement="left"
<Image content={
id={x.img_id} <Image
className={styles.imagePreview} id={x.img_id}
></Image> className={styles.imagePreview}
} ></Image>
> }
<Image id={x.img_id} className={styles.image}></Image> >
</Popover> <Image id={x.img_id} className={styles.image}></Image>
)} </Popover>
<div>{x.content_with_weight}</div> )}
</Flex> <div>{x.content_with_weight}</div>
</Card> </Flex>
))} </Card>
))
) : isSuccess && chunks.length === 0 ? (
<Empty></Empty>
) : null}
</Flex> </Flex>
<Pagination <Pagination
{...pagination} {...pagination}