Fix: Optimized knowledge base file parsing and display #9869 (#10292)

### What problem does this PR solve?

Fix: Optimized knowledge base file parsing and display #9869

- Optimized the ChunkMethodDialog component logic and adjusted
FormSchema validation rules
- Updated the document information interface definition, adding
pipeline_id, pipeline_name, and suffix fields
- Refactored the ChunkResultBar component, removing filter-related logic
and simplifying the input box and chunk creation functionality
- Improved FormatPreserveEditor to support text mode switching
(full/omitted) display control
- Updated timeline node titles to more accurate semantic descriptions
(e.g., character splitters)
- Optimized the data flow result page structure and style, dynamically
adjusting height and content display
- Fixed the table sorting function on the dataset overview page and
enhanced the display of task type icons and status mapping.

### Type of change

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

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

@@ -4,6 +4,11 @@ export enum LogTabs {
 }
 
 export enum ProcessingType {
-  knowledgeGraph = 'knowledgeGraph',
-  raptor = 'raptor',
+  knowledgeGraph = 'GraphRAG',
+  raptor = 'RAPTOR',
 }
+
+export const ProcessingTypeMap = {
+  [ProcessingType.knowledgeGraph]: 'Knowledge Graph',
+  [ProcessingType.raptor]: 'Raptor',
+};

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

@@ -10,13 +10,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
 import { useParams, useSearchParams } from 'umi';
 import { LogTabs } from './dataset-common';
+import { IFileLogList, IOverviewTital } from './interface';
 
-export interface IOverviewTital {
-  cancelled: number;
-  failed: number;
-  finished: number;
-  processing: number;
-}
 const useFetchOverviewTital = () => {
   const [searchParams] = useSearchParams();
   const { id } = useParams();
@@ -33,40 +28,6 @@ const useFetchOverviewTital = () => {
   return { data };
 };
 
-export interface IFileLogItem {
-  create_date: string;
-  create_time: number;
-  document_id: string;
-  document_name: string;
-  document_suffix: string;
-  document_type: string;
-  dsl: any;
-  path: string[];
-  task_id: string;
-  id: string;
-  name: string;
-  kb_id: string;
-  operation_status: string;
-  parser_id: string;
-  pipeline_id: string;
-  pipeline_title: string;
-  avatar: string;
-  process_begin_at: null | string;
-  process_duration: number;
-  progress: number;
-  progress_msg: string;
-  source_from: string;
-  status: string;
-  task_type: string;
-  tenant_id: string;
-  update_date: string;
-  update_time: number;
-}
-export interface IFileLogList {
-  logs: IFileLogItem[];
-  total: number;
-}
-
 const useFetchFileLogList = () => {
   const [searchParams] = useSearchParams();
   const { searchString, handleInputChange } = useHandleSearchChange();

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

@@ -124,7 +124,7 @@ const FileLogsPage: FC = () => {
         };
       });
     }
-  }, [tableOriginData, active]);
+  }, [tableOriginData]);
 
   const changeActiveLogs = (active: (typeof LogTabs)[keyof typeof LogTabs]) => {
     setActive(active);

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

@@ -0,0 +1,62 @@
+import { RunningStatus, RunningStatusMap } from '../dataset/constant';
+import { LogTabs } from './dataset-common';
+
+export interface DocumentLog {
+  fileName: string;
+  status: RunningStatus;
+  statusName: typeof RunningStatusMap;
+}
+
+export interface FileLogsTableProps {
+  data: Array<IFileLogItem & DocumentLog>;
+  pageCount: number;
+  pagination: {
+    current: number;
+    pageSize: number;
+    total: number;
+  };
+  setPagination: (pagination: { page: number; pageSize: number }) => void;
+  loading?: boolean;
+  active: (typeof LogTabs)[keyof typeof LogTabs];
+}
+
+export interface IOverviewTital {
+  cancelled: number;
+  failed: number;
+  finished: number;
+  processing: number;
+}
+
+export interface IFileLogItem {
+  create_date: string;
+  create_time: number;
+  document_id: string;
+  document_name: string;
+  document_suffix: string;
+  document_type: string;
+  dsl: any;
+  path: string[];
+  task_id: string;
+  id: string;
+  name: string;
+  kb_id: string;
+  operation_status: string;
+  parser_id: string;
+  pipeline_id: string;
+  pipeline_title: string;
+  avatar: string;
+  process_begin_at: null | string;
+  process_duration: number;
+  progress: number;
+  progress_msg: string;
+  source_from: string;
+  status: string;
+  task_type: string;
+  tenant_id: string;
+  update_date: string;
+  update_time: number;
+}
+export interface IFileLogList {
+  logs: IFileLogItem[];
+  total: number;
+}

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

@@ -1,7 +1,6 @@
 import FileStatusBadge from '@/components/file-status-badge';
-import { FileIcon } from '@/components/icon-font';
+import { FileIcon, IconFontFill } from '@/components/icon-font';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
-import SvgIcon from '@/components/svg-icon';
 import { Button } from '@/components/ui/button';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import {
@@ -15,7 +14,7 @@ import {
 import { RunningStatusMap } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { formatDate } from '@/utils/date';
+import { formatDate, formatSecondsToHumanReadable } from '@/utils/date';
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -29,32 +28,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { TFunction } from 'i18next';
-import { ClipboardList, Eye } from 'lucide-react';
+import { ArrowUpDown, 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';
-import { IFileLogItem } from './hook';
-
-interface DocumentLog {
-  fileName: string;
-  status: RunningStatus;
-  statusName: typeof RunningStatusMap;
-}
-
-interface FileLogsTableProps {
-  data: DocumentLog[];
-  pageCount: number;
-  pagination: {
-    current: number;
-    pageSize: number;
-    total: number;
-  };
-  setPagination: (pagination: { page: number; pageSize: number }) => void;
-  loading?: boolean;
-  active: (typeof LogTabs)[keyof typeof LogTabs];
-}
+import { LogTabs, ProcessingType, ProcessingTypeMap } from './dataset-common';
+import { DocumentLog, FileLogsTableProps, IFileLogItem } from './interface';
 
 export const getFileLogsTableColumns = (
   t: TFunction<'translation', string>,
@@ -133,7 +113,18 @@ export const getFileLogsTableColumns = (
     },
     {
       accessorKey: 'process_begin_at',
-      header: t('startDate'),
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="transparent"
+            className="border-none"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {t('startDate')}
+            <ArrowUpDown />
+          </Button>
+        );
+      },
       cell: ({ row }) => (
         <div className="text-text-primary">
           {formatDate(row.original.process_begin_at)}
@@ -227,34 +218,60 @@ export const getDatasetLogsTableColumns = (
       ),
     },
     {
-      accessorKey: 'startDate',
-      header: t('startDate'),
+      accessorKey: 'process_begin_at',
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="transparent"
+            className="border-none"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {t('startDate')}
+            <ArrowUpDown />
+          </Button>
+        );
+      },
       cell: ({ row }) => (
-        <div className="text-text-primary">{row.original.startDate}</div>
-      ),
-    },
-    {
-      accessorKey: 'processingType',
-      header: t('processingType'),
-      cell: ({ row }) => (
-        <div className="flex items-center gap-2 text-text-primary">
-          {ProcessingType.knowledgeGraph === row.original.processingType && (
-            <SvgIcon name={`data-flow/knowledgegraph`} width={24}></SvgIcon>
-          )}
-          {ProcessingType.raptor === row.original.processingType && (
-            <SvgIcon name={`data-flow/raptor`} width={24}></SvgIcon>
-          )}
-          {row.original.processingType}
+        <div className="text-text-primary">
+          {formatDate(row.original.process_begin_at)}
         </div>
       ),
     },
     {
-      accessorKey: 'status',
+      accessorKey: 'task_type',
+      header: t('processingType'),
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2 text-text-primary">
+          {ProcessingType.knowledgeGraph === row.original.task_type && (
+            <IconFontFill
+              name={`knowledgegraph`}
+              className="text-text-secondary"
+            ></IconFontFill>
+          )}
+          {ProcessingType.raptor === row.original.task_type && (
+            <IconFontFill
+              name={`dataflow-01`}
+              className="text-text-secondary"
+            ></IconFontFill>
+          )}
+          {ProcessingTypeMap[row.original.task_type as ProcessingType] ||
+            row.original.task_type}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'operation_status',
       header: t('status'),
       cell: ({ row }) => (
+        // <FileStatusBadge
+        //   status={row.original.status}
+        //   name={row.original.statusName}
+        // />
         <FileStatusBadge
-          status={row.original.status}
-          name={row.original.statusName}
+          status={row.original.operation_status as RunningStatus}
+          name={
+            RunningStatusMap[row.original.operation_status as RunningStatus]
+          }
         />
       ),
     },
@@ -294,17 +311,19 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
   const { t } = useTranslate('knowledgeDetails');
   const [isModalVisible, setIsModalVisible] = useState(false);
   const { navigateToDataflowResult } = useNavigatePage();
-  const [logInfo, setLogInfo] = useState<IFileLogItem>({});
+  const [logInfo, setLogInfo] = useState<IFileLogItem>();
   const kowledgeId = useParams().id;
   const showLog = (row: Row<IFileLogItem & DocumentLog>) => {
     const logDetail = {
-      taskId: row.original.id,
+      taskId: row.original?.dsl?.task_id,
       fileName: row.original.document_name,
       source: row.original.source_from,
-      task: row.original.dsl.task_id,
+      task: row.original?.task_type,
       status: row.original.statusName,
       startDate: formatDate(row.original.process_begin_at),
-      duration: (row.original.process_duration || 0) + 's',
+      duration: formatSecondsToHumanReadable(
+        row.original.process_duration || 0,
+      ),
       details: row.original.progress_msg,
     };
     console.log('logDetail', logDetail);
@@ -331,7 +350,7 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
     [pagination],
   );
 
-  const table = useReactTable({
+  const table = useReactTable<IFileLogItem & DocumentLog>({
     data: data || [],
     columns,
     manualPagination: true,
@@ -405,11 +424,14 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
           />
         </div>
       </div>
-      <ProcessLogModal
-        visible={isModalVisible}
-        onCancel={() => setIsModalVisible(false)}
-        logInfo={logInfo}
-      />
+      {isModalVisible && (
+        <ProcessLogModal
+          title={active === LogTabs.FILE_LOGS ? t('fileLogs') : t('datasetLog')}
+          visible={isModalVisible}
+          onCancel={() => setIsModalVisible(false)}
+          logInfo={logInfo}
+        />
+      )}
     </div>
   );
 };