Feat: Modify the Python language template code of the code operator #4977 (#7714)

### What problem does this PR solve?

Feat: Modify the Python language template code of the code operator
#4977
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/dataset/testing/index.tsx

@@ -1,37 +1,14 @@
-import { FormContainer } from '@/components/form-container';
-import { FilterButton } from '@/components/list-filter-bar';
-import { FilterPopover } from '@/components/list-filter-bar/filter-popover';
-import { FilterCollection } from '@/components/list-filter-bar/interface';
 import { Button } from '@/components/ui/button';
-import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
-import { useTranslate } from '@/hooks/common-hooks';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
-import { ITestingChunk } from '@/interfaces/database/knowledge';
-import { camelCase } from 'lodash';
 import { Plus } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback, useState } from 'react';
 import { TopTitle } from '../dataset-title';
 import TestingForm from './testing-form';
+import { TestingResult } from './testing-result';
 
-const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
-  { field: 'similarity', label: 'Hybrid Similarity' },
-  { field: 'term_similarity', label: 'Term Similarity' },
-  { field: 'vector_similarity', label: 'Vector Similarity' },
-];
-
-const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
-  const { t } = useTranslate('knowledgeDetails');
-  return (
-    <div className="flex gap-3 text-xs text-text-sub-title-invert italic">
-      {similarityList.map((x) => (
-        <div key={x.field} className="space-x-1">
-          <span>{((item[x.field] as number) * 100).toFixed(2)}</span>
-          <span>{t(camelCase(x.field))}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
+function Vertical() {
+  return <div>xxx</div>;
+}
 
 export default function RetrievalTesting() {
   const {
@@ -43,22 +20,18 @@ export default function RetrievalTesting() {
     page,
     pageSize,
     handleFilterSubmit,
+    filterValue,
   } = useTestRetrieval();
 
-  const filters: FilterCollection[] = useMemo(() => {
-    return [
-      {
-        field: 'doc_ids',
-        label: 'File',
-        list:
-          data.doc_aggs?.map((x) => ({
-            id: x.doc_id,
-            label: x.doc_name,
-            count: x.count,
-          })) ?? [],
-      },
-    ];
-  }, [data.doc_aggs]);
+  const [count, setCount] = useState(1);
+
+  const addCount = useCallback(() => {
+    setCount(2);
+  }, []);
+
+  const removeCount = useCallback(() => {
+    setCount(1);
+  }, []);
 
   return (
     <div className="p-5">
@@ -70,47 +43,66 @@ export default function RetrievalTesting() {
         ></TopTitle>
         <Button>Save as Preset</Button>
       </section>
-      <section className="flex divide-x h-full">
-        <div className="p-4 flex-1">
-          <div className="flex justify-between pb-2.5">
-            <span className="text-text-title font-semibold text-2xl">
-              Test setting
-            </span>
-            <Button variant={'outline'}>
-              <Plus /> Add New Test
-            </Button>
+      {count === 1 ? (
+        <section className="flex divide-x h-full">
+          <div className="p-4 flex-1">
+            <div className="flex justify-between pb-2.5">
+              <span className="text-text-title font-semibold text-2xl">
+                Test setting
+              </span>
+              <Button variant={'outline'} onClick={addCount}>
+                <Plus /> Add New Test
+              </Button>
+            </div>
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
           </div>
-          <TestingForm
-            loading={loading}
-            setValues={setValues}
-            refetch={refetch}
-          ></TestingForm>
-        </div>
-        <div className="p-4 flex-1">
-          <div className="flex justify-between pb-2.5">
-            <span className="text-text-title font-semibold text-2xl">
-              Test results
-            </span>
-            <FilterPopover filters={filters} onChange={handleFilterSubmit}>
-              <FilterButton></FilterButton>
-            </FilterPopover>
-          </div>
-          <section className="flex flex-col gap-5 overflow-auto h-[76vh] mb-5">
-            {data.chunks?.map((x) => (
-              <FormContainer key={x.chunk_id} className="px-5 py-2.5">
-                <ChunkTitle item={x}></ChunkTitle>
-                <p className="!mt-2.5"> {x.content_with_weight}</p>
-              </FormContainer>
-            ))}
-          </section>
-          <RAGFlowPagination
-            total={data.total}
-            onChange={onPaginationChange}
-            current={page}
+          <TestingResult
+            data={data}
+            page={page}
             pageSize={pageSize}
-          ></RAGFlowPagination>
-        </div>
-      </section>
+            filterValue={filterValue}
+            handleFilterSubmit={handleFilterSubmit}
+            onPaginationChange={onPaginationChange}
+          ></TestingResult>
+        </section>
+      ) : (
+        <section className="flex gap-2">
+          <div className="flex-1">
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
+            <TestingResult
+              data={data}
+              page={page}
+              pageSize={pageSize}
+              filterValue={filterValue}
+              handleFilterSubmit={handleFilterSubmit}
+              onPaginationChange={onPaginationChange}
+            ></TestingResult>
+          </div>
+          <div className="flex-1">
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
+            <TestingResult
+              data={data}
+              page={page}
+              pageSize={pageSize}
+              filterValue={filterValue}
+              handleFilterSubmit={handleFilterSubmit}
+              onPaginationChange={onPaginationChange}
+            ></TestingResult>
+          </div>
+        </section>
+      )}
     </div>
   );
 }