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)

web/src/hooks/knowledge-hooks.ts

@@ -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 (

web/src/interfaces/database/knowledge.ts

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

web/src/pages/add-knowledge/components/knowledge-setting/tag-word-cloud.tsx

@@ -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);

web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx

@@ -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'}>

web/src/pages/add-knowledge/components/knowledge-testing/testing-control/label-word-cloud.tsx

@@ -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>;
+}