fix: Change the data in the dataset page to be obtained using the interface (#8726)

### What problem does this PR solve?

Change the data in the dataset page to be obtained using the interface,
and change the import to obtain all data every 15 seconds to obtain the
data of the current page every 5 seconds when parsing the existing file.
[#3221](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -12,9 +12,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useRowSelection } from '@/hooks/logic-hooks/use-row-selection';
 import { useFetchDocumentList } from '@/hooks/use-document-request';
-import { IDocumentInfo } from '@/interfaces/database/document';
 import { Upload } from 'lucide-react';
-import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DatasetTable } from './dataset-table';
 import { useBulkOperateDataset } from './use-bulk-operate-dataset';
@@ -42,16 +40,7 @@ export default function Dataset() {
     handleFilterSubmit,
     loading,
   } = useFetchDocumentList();
-  const { filters, documents: filteredDocuments } = useSelectDatasetFilters();
-  const [datasetInfo, setDatasetInfo] = useState<IDocumentInfo[]>(documents);
-
-  useMemo(() => {
-    setDatasetInfo(documents);
-  }, [documents]);
-
-  useMemo(() => {
-    setDatasetInfo(filteredDocuments);
-  }, [filteredDocuments]);
+  const { filters, onOpenChange } = useSelectDatasetFilters();
 
   const {
     createLoading,
@@ -69,7 +58,6 @@ export default function Dataset() {
     rowSelection,
     setRowSelection,
   });
-
   return (
     <section className="p-5">
       <ListFilterBar
@@ -78,13 +66,13 @@ export default function Dataset() {
         searchString={searchString}
         value={filterValue}
         onChange={handleFilterSubmit}
+        onOpenChange={onOpenChange}
         filters={filters}
         leftPanel={
           <div className="items-start">
-            <div className="pb-1">Dataset</div>
+            <div className="pb-1">{t('knowledgeDetails.dataset')}</div>
             <div className="text-text-sub-title-invert text-sm">
-              Please wait for your files to finish parsing before starting an
-              AI-powered chat.
+              {t('knowledgeDetails.datasetDescription')}
             </div>
           </div>
         }
@@ -111,7 +99,7 @@ export default function Dataset() {
         <BulkOperateBar list={list} count={selectedCount}></BulkOperateBar>
       )}
       <DatasetTable
-        documents={datasetInfo}
+        documents={documents}
         pagination={pagination}
         setPagination={setPagination}
         rowSelection={rowSelection}

web/src/pages/dataset/dataset/use-select-filters.ts

@@ -1,30 +1,36 @@
-import { useFetchAllDocumentList } from '@/hooks/use-document-request';
-import { groupListByType } from '@/utils/dataset-util';
+import { FilterCollection } from '@/components/list-filter-bar/interface';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useGetDocumentFilter } from '@/hooks/use-document-request';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 export function useSelectDatasetFilters() {
-  const {
-    data: { docs: documents },
-  } = useFetchAllDocumentList();
-  const { t } = useTranslation();
+  const { t } = useTranslate('knowledgeDetails');
+  const { filter, onOpenChange } = useGetDocumentFilter();
 
   const fileTypes = useMemo(() => {
-    return groupListByType(documents, 'type', 'type');
-  }, [documents]);
-
+    if (filter.suffix) {
+      return Object.keys(filter.suffix).map((x) => ({
+        id: x,
+        label: x.toUpperCase(),
+        count: filter.suffix[x],
+      }));
+    }
+  }, [filter.suffix]);
   const fileStatus = useMemo(() => {
-    return groupListByType(documents, 'run', 'run').map((x) => ({
-      ...x,
-      label: t(`knowledgeDetails.runningStatus${x.label}`),
-    }));
-  }, [documents, t]);
-  const filters = useMemo(() => {
+    if (filter.run_status) {
+      return Object.keys(filter.run_status).map((x) => ({
+        id: x,
+        label: t(`runningStatus${x}`),
+        count: filter.run_status[x as unknown as number],
+      }));
+    }
+  }, [filter.run_status, t]);
+  const filters: FilterCollection[] = useMemo(() => {
     return [
       { field: 'type', label: 'File Type', list: fileTypes },
       { field: 'run', label: 'Status', list: fileStatus },
-    ];
+    ] as FilterCollection[];
   }, [fileStatus, fileTypes]);
 
-  return { fileTypes, fileStatus, filters, documents };
+  return { filters, onOpenChange };
 }

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

@@ -35,9 +35,8 @@ export default function RetrievalTesting() {
     <div className="p-5">
       <section className="flex justify-between items-center">
         <TopTitle
-          title={'Configuration'}
-          description={`  Update your knowledge base configuration here, particularly the chunk
-                  method.`}
+          title={'Retrieval testing'}
+          description={`Conduct a retrieval test to check if RAGFlow can recover the intended content for the LLM.`}
         ></TopTitle>
         {/* <Button>Save as Preset</Button> */}
       </section>