Feat: Jump from the chunk page to the dataset page #3221 (#4961)

### What problem does this PR solve?
Feat: Jump from the chunk page to the dataset page #3221

### Type of change


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

web/src/hooks/logic-hooks/navigate-hooks.ts

@@ -1,9 +1,14 @@
 import { Routes } from '@/routes';
 import { useCallback } from 'react';
-import { useNavigate } from 'umi';
+import { useNavigate, useSearchParams } from 'umi';
+
+export enum QueryStringMap {
+  KnowledgeId = 'knowledgeId',
+}
 
 export const useNavigatePage = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   const navigateToDatasetList = useCallback(() => {
     navigate(Routes.Datasets);
@@ -32,6 +37,30 @@ export const useNavigatePage = () => {
     navigate(Routes.Chat);
   }, [navigate]);
 
+  const navigateToChunkParsedResult = useCallback(
+    (id: string, knowledgeId?: string) => () => {
+      navigate(
+        `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
+      );
+    },
+    [navigate],
+  );
+
+  const getQueryString = useCallback(
+    (queryStringKey?: QueryStringMap) => {
+      const allQueryString = {
+        [QueryStringMap.KnowledgeId]: searchParams.get(
+          QueryStringMap.KnowledgeId,
+        ),
+      };
+      if (queryStringKey) {
+        return allQueryString[queryStringKey];
+      }
+      return allQueryString;
+    },
+    [searchParams],
+  );
+
   return {
     navigateToDatasetList,
     navigateToDataset,
@@ -39,5 +68,7 @@ export const useNavigatePage = () => {
     navigateToProfile,
     navigateToChatList,
     navigateToChat,
+    navigateToChunkParsedResult,
+    getQueryString,
   };
 };

web/src/pages/chunk/chunk-result/index.tsx

@@ -0,0 +1,3 @@
+export default function ChunkResult() {
+  return <div>ChunkResult</div>;
+}

web/src/pages/chunk/index.tsx

@@ -0,0 +1,21 @@
+import { PageHeader } from '@/components/page-header';
+import {
+  QueryStringMap,
+  useNavigatePage,
+} from '@/hooks/logic-hooks/navigate-hooks';
+import { Outlet } from 'umi';
+
+export default function ChunkPage() {
+  const { navigateToDataset, getQueryString } = useNavigatePage();
+  return (
+    <section>
+      <PageHeader
+        title="Editing block"
+        back={navigateToDataset(
+          getQueryString(QueryStringMap.KnowledgeId) as string,
+        )}
+      ></PageHeader>
+      <Outlet />
+    </section>
+  );
+}

web/src/pages/chunk/parsed-result/index.tsx

@@ -0,0 +1,3 @@
+export default function ParsedResult() {
+  return <div>ParsedResult</div>;
+}

web/src/pages/chunk/result-view/index.tsx

@@ -0,0 +1,3 @@
+export default function ResultView() {
+  return <div>ResultView</div>;
+}

web/src/pages/dataset/dataset/use-dataset-table-columns.tsx

@@ -15,8 +15,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IDocumentInfo } from '@/interfaces/database/document';
 import { cn } from '@/lib/utils';
+import { formatDate } from '@/utils/date';
 import { getExtension } from '@/utils/document-util';
 import { ColumnDef } from '@tanstack/table-core';
 import { ArrowUpDown, MoreHorizontal, Pencil, Wrench } from 'lucide-react';
@@ -54,6 +56,8 @@ export function useDatasetTableColumns({
   //   showSetMetaModal();
   // }, [setRecord, showSetMetaModal]);
 
+  const { navigateToChunkParsedResult } = useNavigatePage();
+
   const columns: ColumnDef<IDocumentInfo>[] = [
     {
       id: 'select',
@@ -93,12 +97,17 @@ export function useDatasetTableColumns({
       meta: { cellClassName: 'max-w-[20vw]' },
       cell: ({ row }) => {
         const name: string = row.getValue('name');
-        // return <div className="capitalize">{row.getValue('name')}</div>;
 
         return (
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex gap-2">
+              <div
+                className="flex gap-2 cursor-pointer"
+                onClick={navigateToChunkParsedResult(
+                  row.original.id,
+                  row.original.kb_id,
+                )}
+              >
                 <SvgIcon
                   name={`file-icon/${getExtension(name)}`}
                   width={24}
@@ -127,7 +136,9 @@ export function useDatasetTableColumns({
         );
       },
       cell: ({ row }) => (
-        <div className="lowercase">{row.getValue('create_time')}</div>
+        <div className="lowercase">
+          {formatDate(row.getValue('create_time'))}
+        </div>
       ),
     },
     {

web/src/routes.ts

@@ -12,6 +12,12 @@ export enum Routes {
   ProfileSetting = '/profile-setting',
   DatasetTesting = '/testing',
   DatasetSetting = '/setting',
+  Chunk = '/chunk',
+  ChunkResult = `${Chunk}${Chunk}`,
+  Parsed = '/parsed',
+  ParsedResult = `${Chunk}${Parsed}`,
+  Result = '/result',
+  ResultView = `${Chunk}${Result}`,
 }
 
 const routes = [
@@ -237,6 +243,35 @@ const routes = [
       },
     ],
   },
+  {
+    path: Routes.Chunk,
+    layout: false,
+    routes: [
+      {
+        path: Routes.Chunk,
+        component: `@/pages${Routes.Chunk}`,
+        routes: [
+          {
+            path: `${Routes.ParsedResult}/:id`,
+            component: `@/pages${Routes.Chunk}/parsed-result`,
+          },
+          {
+            path: `${Routes.ChunkResult}/:id`,
+            component: `@/pages${Routes.Chunk}/chunk-result`,
+          },
+          {
+            path: `${Routes.ResultView}/:id`,
+            component: `@/pages${Routes.Chunk}/result-view`,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: Routes.Chunk,
+    layout: false,
+    component: `@/pages${Routes.Chunk}`,
+  },
   {
     path: Routes.ProfileSetting,
     layout: false,