Fix: Optimized the timeline component and parser editing features #9869 (#10268)

### What problem does this PR solve?

Fix: Optimized the timeline component and parser editing features #9869

- Introduced the TimelineNodeType type, restructured the timeline node
structure, and supported dynamic node generation
- Enhanced the FormatPreserveEditor component to support editing and
line wrapping of JSON-formatted content
- Added a rerun function and loading state to the parser and splitter
components
- Adjusted the timeline style and interaction logic to enhance the user
experience
- Improved the modal component and added a destroy method to support
more flexible control
- Optimized the chunk result display and operation logic, supporting
batch deletion and selection
### Type of change

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

web/src/pages/dataset/dataset-overview/hook.ts

@@ -4,10 +4,12 @@ import {
 } from '@/hooks/logic-hooks';
 import kbService, {
   listDataPipelineLogDocument,
+  listPipelineDatasetLogs,
 } from '@/services/knowledge-service';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useParams, useSearchParams } from 'umi';
+import { LogTabs } from './dataset-common';
 
 export interface IOverviewTital {
   cancelled: number;
@@ -61,7 +63,7 @@ export interface IFileLogItem {
   update_time: number;
 }
 export interface IFileLogList {
-  docs: IFileLogItem[];
+  logs: IFileLogItem[];
   total: number;
 }
 
@@ -70,7 +72,14 @@ const useFetchFileLogList = () => {
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
   const { id } = useParams();
+  const [active, setActive] = useState<(typeof LogTabs)[keyof typeof LogTabs]>(
+    LogTabs.FILE_LOGS,
+  );
   const knowledgeBaseId = searchParams.get('id') || id;
+  const fetchFunc =
+    active === LogTabs.DATASET_LOGS
+      ? listPipelineDatasetLogs
+      : listDataPipelineLogDocument;
   const { data } = useQuery<IFileLogList>({
     queryKey: [
       'fileLogList',
@@ -78,9 +87,10 @@ const useFetchFileLogList = () => {
       pagination.current,
       pagination.pageSize,
       searchString,
+      active,
     ],
     queryFn: async () => {
-      const { data: res = {} } = await listDataPipelineLogDocument({
+      const { data: res = {} } = await fetchFunc({
         kb_id: knowledgeBaseId,
         page: pagination.current,
         page_size: pagination.pageSize,
@@ -102,6 +112,8 @@ const useFetchFileLogList = () => {
     searchString,
     handleInputChange: onInputChange,
     pagination: { ...pagination, total: data?.total },
+    active,
+    setActive,
   };
 };
 

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

@@ -71,9 +71,7 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
 };
 const FileLogsPage: FC = () => {
   const { t } = useTranslation();
-  const [active, setActive] = useState<(typeof LogTabs)[keyof typeof LogTabs]>(
-    LogTabs.FILE_LOGS,
-  );
+
   const [topAllData, setTopAllData] = useState({
     totalFiles: {
       value: 0,
@@ -111,12 +109,14 @@ const FileLogsPage: FC = () => {
     searchString,
     handleInputChange,
     pagination,
+    active,
+    setActive,
   } = useFetchFileLogList();
 
   const tableList = useMemo(() => {
     console.log('tableList', tableOriginData);
-    if (tableOriginData && tableOriginData.docs?.length) {
-      return tableOriginData.docs.map((item) => {
+    if (tableOriginData && tableOriginData.logs?.length) {
+      return tableOriginData.logs.map((item) => {
         return {
           ...item,
           fileName: item.document_name,

web/src/pages/dataset/dataset-overview/overview-table.tsx

@@ -31,6 +31,7 @@ import {
 import { TFunction } from 'i18next';
 import { ClipboardList, Eye } from 'lucide-react';
 import { FC, useMemo, useState } from 'react';
+import { useParams } from 'umi';
 import { RunningStatus } from '../dataset/constant';
 import ProcessLogModal from '../process-log-modal';
 import { LogTabs, ProcessingType } from './dataset-common';
@@ -58,9 +59,11 @@ interface FileLogsTableProps {
 export const getFileLogsTableColumns = (
   t: TFunction<'translation', string>,
   showLog: (row: Row<IFileLogItem & DocumentLog>, active: LogTabs) => void,
+  kowledgeId: string,
   navigateToDataflowResult: (
     id: string,
-    knowledgeId?: string | undefined,
+    knowledgeId: string,
+    doc_id?: string,
   ) => () => void,
 ) => {
   // const { t } = useTranslate('knowledgeDetails');
@@ -175,7 +178,11 @@ export const getFileLogsTableColumns = (
             variant="ghost"
             size="sm"
             className="p-1"
-            onClick={navigateToDataflowResult(row.original.id)}
+            onClick={navigateToDataflowResult(
+              row.original.id,
+              kowledgeId,
+              row.original.document_id,
+            )}
           >
             <ClipboardList />
           </Button>
@@ -288,7 +295,8 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
   const [isModalVisible, setIsModalVisible] = useState(false);
   const { navigateToDataflowResult } = useNavigatePage();
   const [logInfo, setLogInfo] = useState<IFileLogItem>({});
-  const showLog = (row: Row<IFileLogItem & DocumentLog>, active: LogTabs) => {
+  const kowledgeId = useParams().id;
+  const showLog = (row: Row<IFileLogItem & DocumentLog>) => {
     const logDetail = {
       taskId: row.original.id,
       fileName: row.original.document_name,
@@ -306,7 +314,12 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
 
   const columns = useMemo(() => {
     return active === LogTabs.FILE_LOGS
-      ? getFileLogsTableColumns(t, showLog, navigateToDataflowResult)
+      ? getFileLogsTableColumns(
+          t,
+          showLog,
+          kowledgeId || '',
+          navigateToDataflowResult,
+        )
       : getDatasetLogsTableColumns(t, showLog);
   }, [active, t]);
 

web/src/pages/dataset/dataset/hooks.ts

@@ -80,7 +80,7 @@ export const useShowLog = (documents: IDocumentInfo[]) => {
         fileSize: findRecord.size + '',
         source: findRecord.source_type,
         task: findRecord.status,
-        state: findRecord.run,
+        status: findRecord.run,
         startTime: findRecord.process_begin_at,
         endTime: findRecord.process_begin_at,
         duration: findRecord.process_duration + 's',

web/src/pages/dataset/dataset/parsing-status-cell.tsx

@@ -7,11 +7,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card';
 import { Progress } from '@/components/ui/progress';
 import { Separator } from '@/components/ui/separator';
 import { IDocumentInfo } from '@/interfaces/database/document';
@@ -19,7 +14,7 @@ import { CircleX } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DocumentType, RunningStatus } from './constant';
-import { ParsingCard, PopoverContent } from './parsing-card';
+import { ParsingCard } from './parsing-card';
 import { UseChangeDocumentParserShowType } from './use-change-document-parser';
 import { useHandleRunDocumentByIds } from './use-run-document';
 import { UseSaveMetaShowType } from './use-save-meta';
@@ -122,23 +117,13 @@ export function ParsingStatusCell({
           )}
           {isParserRunning(run) ? (
             <>
-              <HoverCard>
-                <HoverCardTrigger asChild>
-                  <div
-                    className="flex items-center gap-1"
-                    onClick={() => handleShowLog(record)}
-                  >
-                    <Progress value={p} className="h-1 flex-1 min-w-10" />
-                    {p}%
-                  </div>
-                </HoverCardTrigger>
-                <HoverCardContent className="w-[40vw]">
-                  <PopoverContent
-                    record={record}
-                    handleShowLog={handleShowLog}
-                  ></PopoverContent>
-                </HoverCardContent>
-              </HoverCard>
+              <div
+                className="flex items-center gap-1 cursor-pointer"
+                onClick={() => handleShowLog(record)}
+              >
+                <Progress value={p} className="h-1 flex-1 min-w-10" />
+                {p}%
+              </div>
               <div
                 className="cursor-pointer flex items-center gap-3"
                 onClick={