Feat: Display tag word cloud on recall test page #4368 (#4438)

### What problem does this PR solve?

Feat: Display tag word cloud on recall test page #4368

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2025-01-10 11:35:07 +08:00 committed by GitHub
parent 6acbd374d8
commit 06c54367fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 65 additions and 4 deletions

View File

@ -218,9 +218,8 @@ export const useTestChunkRetrieval = (): ResponsePostType<ITestingResult> & {
if (data.code === 0) {
const res = data.data;
return {
chunks: res.chunks,
...res,
documents: res.doc_aggs,
total: res.total,
};
}
return (

View File

@ -132,6 +132,7 @@ export interface ITestingResult {
chunks: ITestingChunk[];
documents: ITestingDocument[];
total: number;
labels?: Record<string, number>;
}
export type IRenameTag = { fromTag: string; toTag: string };

View File

@ -26,7 +26,7 @@ export function TagWordCloud() {
type: 'wordCloud',
autoFit: true,
layout: {
fontSize: [20, 100],
fontSize: [10, 50],
// fontSize: (d: any) => {
// if (d.value) {
// return (d.value / sumValue) * 100 * (length / 10);

View File

@ -1,10 +1,11 @@
import Rerank from '@/components/rerank';
import SimilaritySlider from '@/components/similarity-slider';
import { useTranslate } from '@/hooks/common-hooks';
import { useChunkIsTesting } from '@/hooks/knowledge-hooks';
import { Button, Card, Divider, Flex, Form, Input } from 'antd';
import { FormInstance } from 'antd/lib';
import { LabelWordCloud } from './label-word-cloud';
import { useChunkIsTesting } from '@/hooks/knowledge-hooks';
import styles from './index.less';
type FieldType = {
@ -58,6 +59,7 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
</Card>
</Form>
</section>
<LabelWordCloud></LabelWordCloud>
{/* <section>
<div className={styles.historyTitle}>
<Space size={'middle'}>

View File

@ -0,0 +1,59 @@
import { useSelectTestingResult } from '@/hooks/knowledge-hooks';
import { Chart } from '@antv/g2';
import { useCallback, useEffect, useMemo, useRef } from 'react';
export function LabelWordCloud() {
const domRef = useRef<HTMLDivElement>(null);
let chartRef = useRef<Chart>();
const { labels } = useSelectTestingResult();
const list = useMemo(() => {
if (!labels) {
return [];
}
return Object.keys(labels).reduce<
Array<{ text: string; name: string; value: number }>
>((pre, cur) => {
pre.push({ name: cur, text: cur, value: labels[cur] });
return pre;
}, []);
}, [labels]);
const renderWordCloud = useCallback(() => {
if (domRef.current && list.length) {
chartRef.current = new Chart({ container: domRef.current });
chartRef.current.options({
type: 'wordCloud',
autoFit: true,
layout: {
fontSize: [6, 15],
},
data: {
type: 'inline',
value: list,
},
encode: { color: 'text' },
legend: false,
tooltip: {
title: 'name', // title
items: ['value'], // data item
},
});
chartRef.current.render();
}
}, [list]);
useEffect(() => {
renderWordCloud();
return () => {
chartRef.current?.destroy();
};
}, [renderWordCloud]);
return <div ref={domRef} className="w-full h-[13vh]"></div>;
}