Fix: Added read-only mode support and optimized navigation logic #9869 (#10370)

### What problem does this PR solve? Fix: Added read-only mode support and optimized navigation logic #9869 - Added the `isReadonly` property to the parseResult component to control the enabled state of editing and interactive features - Added the `navigateToDataFile` navigation method to navigate to the data file details page - Refactored the `navigateToDataflowResult` method to use an object parameter to support more flexible query parameter configuration - Unified the `var(--accent-primary)` CSS variable format to `rgb(var(--accent-primary))` to accommodate more styling scenarios - Extracted the parser initialization logic into a separate hook (`useParserInit`) ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-08 20:42:30 +08:00 · 2025-09-30 12:00:29 +08:00
parent fb19e24f8a
commit 4d6ff672eb
27 changed files with 468 additions and 253 deletions
--- a/web/public/iconfont.js
+++ b/web/public/iconfont.js
@ -1,5 +1,6 @@
 (window._iconfont_svg_string_4909832 =
  '<svg>' +
+  '<symbol id="icon-play" viewBox="0 0 1024 1024"><path d="M0 0h1024v1024H0z" fill="#00BEB4" opacity=".01" ></path><path d="M161.206857 839.972571V185.929143a72.850286 72.850286 0 0 1 109.275429-63.049143l566.345143 326.948571a72.850286 72.850286 0 0 1 0 126.244572l-566.418286 326.948571a72.850286 72.850286 0 0 1-109.202286-63.049143z" fill="#00BEB4" ></path></symbol>' +
  '<symbol id="icon-Pipeline" viewBox="0 0 1024 1024"><path d="M610.9184 729.6a59.392 59.392 0 0 1 59.3408 59.392v79.104a59.3408 59.3408 0 0 1-59.392 59.3408H413.1328a59.392 59.392 0 0 1-59.3408-59.392V788.992a59.392 59.392 0 0 1 59.392-59.3408h197.7856z m0-316.4672a59.392 59.392 0 0 1 59.3408 59.3408v79.104a59.3408 59.3408 0 0 1-59.392 59.392H413.1328a59.3408 59.3408 0 0 1-59.3408-59.392V472.4736a59.392 59.392 0 0 1 59.392-59.392h197.7856z m0-316.5184a59.392 59.392 0 0 1 59.3408 59.3408V235.008a59.3408 59.3408 0 0 1-59.392 59.392H413.1328A59.3408 59.3408 0 0 1 353.792 235.008V155.9552a59.392 59.392 0 0 1 59.392-59.392h197.7856z" fill="#00BEB4" ></path><path d="M749.3632 472.4224a197.8368 197.8368 0 0 1 0 395.6224l-4.608-0.256a39.5776 39.5776 0 0 1 4.608-78.848l6.9632-0.2048a118.6816 118.6816 0 0 0-6.9632-237.2096l-4.608-0.256a39.5776 39.5776 0 0 1 4.608-78.848zM274.6368 155.904l4.608 0.256a39.5776 39.5776 0 0 1-4.608 78.848 118.6816 118.6816 0 1 0 0 237.4144 39.5776 39.5776 0 1 1 0 79.104 197.7856 197.7856 0 1 1 0-395.6224z" fill="#1177D7" ></path></symbol>' +
  '<symbol id="icon-dataflow-01" viewBox="0 0 1024 1024"><path d="M636.202667 214.954667c-18.688 1.493333-28.288 4.266667-34.944 7.68a85.333333 85.333333 0 0 0-37.290667 37.290666c-3.413333 6.656-6.186667 16.213333-7.68 34.944C554.666667 314.069333 554.666667 338.901333 554.666667 375.466667V469.333333h135.253333a128.042667 128.042667 0 1 1 0 85.333334H554.666667v93.866666c0 36.565333 0 61.397333 1.621333 80.597334 1.493333 18.688 4.266667 28.288 7.68 34.944a85.333333 85.333333 0 0 0 37.290667 37.290666c6.656 3.413333 16.213333 6.186667 34.944 7.68 14.08 1.152 31.232 1.493333 53.76 1.578667A128.042667 128.042667 0 0 1 938.666667 853.333333a128 128 0 0 1-248.746667 42.666667 814.037333 814.037333 0 0 1-60.672-1.877333c-23.978667-1.962667-46.037333-6.186667-66.730667-16.725334a170.666667 170.666667 0 0 1-74.581333-74.581333c-10.538667-20.693333-14.762667-42.752-16.725333-66.730667C469.333333 712.96 469.333333 684.629333 469.333333 650.325333V554.666667H334.08a128.042667 128.042667 0 1 1 0-85.333334H469.333333V373.717333c0-34.346667 0-62.72 1.877334-85.76 1.962667-24.021333 6.186667-46.08 16.725333-66.773333a170.666667 170.666667 0 0 1 74.581333-74.581333c20.693333-10.538667 42.752-14.762667 66.730667-16.725334a813.653333 813.653333 0 0 1 60.714667-1.834666 128.042667 128.042667 0 1 1 0 85.333333c-22.528 0.085333-39.68 0.426667-53.76 1.578667z"  ></path></symbol>' +
  '<symbol id="icon-knowledgegraph" viewBox="0 0 1024 1024"><path d="M190.464 489.472h327.68v40.96h-327.68z" ></path><path d="M482.34496 516.5056l111.26784-308.20352 38.54336 13.9264L520.86784 530.432z"  ></path><path d="M620.544 196.608m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z"  ></path><path d="M182.272 509.952m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z"  ></path><path d="M558.65344 520.9088l283.77088 163.84-20.48 35.47136-283.77088-163.84z"  ></path><path d="M841.728 686.08m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z"  ></path><path d="M448.67584 803.77856l49.60256-323.91168 40.48896 6.20544-49.60256 323.91168z" ></path><path d="M512 530.432m-143.36 0a143.36 143.36 0 1 0 286.72 0 143.36 143.36 0 1 0-286.72 0Z" ></path><path d="M462.848 843.776m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z"></path></symbol>' +
--- a/web/src/components/originui/timeline.tsx
+++ b/web/src/components/originui/timeline.tsx
@ -246,7 +246,7 @@ const CustomTimeline = ({
  orientation = 'horizontal',
  lineStyle = 'solid',
  lineColor = 'var(--text-secondary)',
-  indicatorColor = 'var(--accent-primary)',
+  indicatorColor = 'rgb(var(--accent-primary))',
  defaultValue = 1,
  className,
  activeStyle,
--- a/web/src/hooks/logic-hooks/navigate-hooks.ts
+++ b/web/src/hooks/logic-hooks/navigate-hooks.ts
@ -1,3 +1,4 @@
+import { NavigateToDataflowResultProps } from '@/pages/dataflow-result/interface';
 import { Routes } from '@/routes';
 import { useCallback } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'umi';
@ -23,6 +24,13 @@ export const useNavigatePage = () => {
    [navigate],
  );

+  const navigateToDataFile = useCallback(
+    (id: string) => () => {
+      navigate(`${Routes.DatasetBase}${Routes.DatasetBase}/${id}`);
+    },
+    [navigate],
+  );
+
  const navigateToHome = useCallback(() => {
    navigate(Routes.Root);
  }, [navigate]);
@ -133,10 +141,16 @@ export const useNavigatePage = () => {
  );

  const navigateToDataflowResult = useCallback(
-    (id: string, knowledgeId: string, doc_id?: string) => () => {
+    (props: NavigateToDataflowResultProps) => () => {
+      let params: string[] = [];
+      Object.keys(props).forEach((key) => {
+        if (props[key]) {
+          params.push(`${key}=${props[key]}`);
+        }
+      });
      navigate(
        // `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
-        `${Routes.DataflowResult}?id=${id}&doc_id=${doc_id}&${QueryStringMap.KnowledgeId}=${knowledgeId}&type=dataflow`,
+        `${Routes.DataflowResult}?${params.join('&')}`,
      );
    },
    [navigate],
@ -163,5 +177,6 @@ export const useNavigatePage = () => {
    navigateToOldProfile,
    navigateToDataflowResult,
    navigateToDataflow,
+    navigateToDataFile,
  };
 };
--- a/web/src/pages/agent/canvas/edge/index.tsx
+++ b/web/src/pages/agent/canvas/edge/index.tsx
@ -39,7 +39,9 @@ function InnerButtonEdge({
    targetPosition,
  });
  const selectedStyle = useMemo(() => {
-    return selected ? { strokeWidth: 1, stroke: 'var(--accent-primary)' } : {};
+    return selected
+      ? { strokeWidth: 1, stroke: 'rgb(var(--accent-primary))' }
+      : {};
  }, [selected]);

  const onEdgeClick = () => {
@ -56,7 +58,7 @@ function InnerButtonEdge({
      let index = idx - 1;
      while (index >= 0) {
        if (path[index] === source) {
-          return { strokeWidth: 1, stroke: 'var(--accent-primary)' };
+          return { strokeWidth: 1, stroke: 'rgb(var(--accent-primary))' };
        }
        index--;
      }
--- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
@ -72,7 +72,7 @@ const Chunk = () => {
    chunkUpdatingVisible,
    documentId,
  } = useUpdateChunk();
-  const { navigateToDataset, getQueryString, navigateToDatasetList } =
+  const { navigateToDataFile, getQueryString, navigateToDatasetList } =
    useNavigatePage();
  const fileUrl = useGetDocumentUrl();
  useEffect(() => {
@ -188,7 +188,7 @@ const Chunk = () => {
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink
-                onClick={navigateToDataset(
+                onClick={navigateToDataFile(
                  getQueryString(QueryStringMap.id) as string,
                )}
              >
--- a/web/src/pages/data-flow/log-sheet/index.tsx
+++ b/web/src/pages/data-flow/log-sheet/index.tsx
@ -6,8 +6,10 @@ import {
  SheetHeader,
  SheetTitle,
 } from '@/components/ui/sheet';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
+import { PipelineResultSearchParams } from '@/pages/dataflow-result/constant';
 import {
  ArrowUpRight,
  CirclePause,
@ -41,7 +43,7 @@ export function LogSheet({
  const { t } = useTranslation();

  const { handleDownloadJson } = useDownloadOutput(logs);
-
+  const { navigateToDataflowResult } = useNavigatePage();
  return (
    <Sheet open onOpenChange={hideModal} modal={false}>
      <SheetContent
@ -51,7 +53,20 @@ export function LogSheet({
        <SheetHeader>
          <SheetTitle className="flex items-center gap-2.5">
            <Logs className="size-4" /> {t('flow.log')}
-            <Button variant={'ghost'} disabled={!isCompleted}>
+            <Button
+              variant={'ghost'}
+              disabled={!isCompleted}
+              onClick={navigateToDataflowResult({
+                id: 'cfc28d6c9c4911f088bf047c16ec874f', // 'log_id',
+                [PipelineResultSearchParams.AgentId]:
+                  'cfc28d6c9c4911f088bf047c16ec874f', // 'agent_id',
+                [PipelineResultSearchParams.DocumentId]:
+                  '05b0e19a9d9d11f0b674047c16ec874f', //'doc_id',
+                [PipelineResultSearchParams.AgentTitle]: 'full', //'title',
+                [PipelineResultSearchParams.IsReadOnly]: 'true',
+                [PipelineResultSearchParams.Type]: 'dataflow',
+              })}
+            >
              {t('dataflow.viewResult')} <ArrowUpRight />
            </Button>
          </SheetTitle>
--- a/web/src/pages/dataflow-result/components/chunk-result-bar/index.tsx
+++ b/web/src/pages/dataflow-result/components/chunk-result-bar/index.tsx
@ -7,28 +7,17 @@ import { ChunkTextMode } from '../../constant';
 interface ChunkResultBarProps {
  changeChunkTextMode: React.Dispatch<React.SetStateAction<string | number>>;
  createChunk: (text: string) => void;
+  isReadonly: boolean;
 }
-export default ({ changeChunkTextMode, createChunk }: ChunkResultBarProps) => {
+export default ({
+  changeChunkTextMode,
+  createChunk,
+  isReadonly,
+}: ChunkResultBarProps) => {
  const { t } = useTranslate('chunk');
  const [textSelectValue, setTextSelectValue] = useState<string | number>(
    ChunkTextMode.Full,
  );
-  // const handleFilterChange = (e: string | number) => {
-  //   const value = e === -1 ? undefined : (e as number);
-  //   selectAllChunk(false);
-  //   handleSetAvailable(value);
-  // };
-  // const filterContent = (
-  //   <div className="w-[200px]">
-  //     <Radio.Group onChange={handleFilterChange} value={available}>
-  //       <div className="flex flex-col gap-2 p-4">
-  //         <Radio value={-1}>{t('all')}</Radio>
-  //         <Radio value={1}>{t('enabled')}</Radio>
-  //         <Radio value={0}>{t('disabled')}</Radio>
-  //       </div>
-  //     </Radio.Group>
-  //   </div>
-  // );
  const textSelectOptions = [
    { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
    { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
@ -57,31 +46,15 @@ export default ({ changeChunkTextMode, createChunk }: ChunkResultBarProps) => {
          </div>
        ))}
      </div>
-      {/* <Input
-        className="bg-bg-card text-muted-foreground"
-        style={{ width: 200 }}
-        placeholder={t('search')}
-        icon={<SearchOutlined />}
-        onChange={handleInputChange}
-        value={searchString}
-      />
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button className="bg-bg-card text-muted-foreground hover:bg-card">
-            <ListFilter />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0 w-[200px]">
-          {filterContent}
-        </PopoverContent>
-      </Popover> */}
-      <Button
-        onClick={() => createChunk('')}
-        variant={'secondary'}
-        className="bg-bg-card text-muted-foreground hover:bg-card"
-      >
-        <Plus size={44} />
-      </Button>
+      {!isReadonly && (
+        <Button
+          onClick={() => createChunk('')}
+          variant={'secondary'}
+          className="bg-bg-card text-muted-foreground hover:bg-card"
+        >
+          <Plus size={44} />
+        </Button>
+      )}
    </div>
  );
 };
--- a/web/src/pages/dataflow-result/components/parse-editer/hook.ts
+++ b/web/src/pages/dataflow-result/components/parse-editer/hook.ts
@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react';
+import { IJsonContainerProps, IObjContainerProps } from './interface';
+
+export const useParserInit = ({
+  initialValue,
+}: {
+  initialValue:
+    | Pick<IJsonContainerProps, 'initialValue'>
+    | Pick<IObjContainerProps, 'initialValue'>;
+}) => {
+  const [content, setContent] = useState(initialValue);
+
+  useEffect(() => {
+    setContent(initialValue);
+    console.log('initialValue json parse', initialValue);
+  }, [initialValue]);
+
+  const [activeEditIndex, setActiveEditIndex] = useState<number | undefined>(
+    undefined,
+  );
+  const editDivRef = useRef<HTMLDivElement>(null);
+
+  return {
+    content,
+    setContent,
+    activeEditIndex,
+    setActiveEditIndex,
+    editDivRef,
+  };
+};
--- a/web/src/pages/dataflow-result/components/parse-editer/index.tsx
+++ b/web/src/pages/dataflow-result/components/parse-editer/index.tsx
@ -1,22 +1,8 @@
 import { CheckedState } from '@radix-ui/react-checkbox';
-import { ChunkTextMode } from '../../constant';
-import { ArrayContainer, parserKeyMap } from './json-parser';
+import { FormatPreserveEditorProps } from './interface';
+import { ArrayContainer } from './json-parser';
 import { ObjectContainer } from './object-parser';
-interface FormatPreserveEditorProps {
-  initialValue: {
-    key: keyof typeof parserKeyMap | 'text' | 'html';
-    type: string;
-    value: Array<{ [key: string]: string }>;
-  };
-  onSave: (value: any) => void;
-  className?: string;
-  isSelect?: boolean;
-  isDelete?: boolean;
-  isChunck?: boolean;
-  handleCheckboxClick?: (id: string | number, checked: boolean) => void;
-  selectedChunkIds?: string[];
-  textMode?: ChunkTextMode;
-}
+
 const FormatPreserveEditor = ({
  initialValue,
  onSave,
@ -25,6 +11,8 @@ const FormatPreserveEditor = ({
  handleCheckboxClick,
  selectedChunkIds,
  textMode,
+  clickChunk,
+  isReadonly,
 }: FormatPreserveEditorProps) => {
  console.log('initialValue', initialValue);

@ -42,6 +30,7 @@ const FormatPreserveEditor = ({
    <div className="editor-container">
      {['json', 'chunks'].includes(initialValue.key) && (
        <ArrayContainer
+          isReadonly={isReadonly}
          className={className}
          initialValue={initialValue}
          handleCheck={handleCheck}
@ -51,11 +40,13 @@ const FormatPreserveEditor = ({
          unescapeNewlines={unescapeNewlines}
          textMode={textMode}
          isChunck={isChunck}
+          clickChunk={clickChunk}
        />
      )}

      {['text', 'html'].includes(initialValue.key) && (
        <ObjectContainer
+          isReadonly={isReadonly}
          className={className}
          initialValue={initialValue}
          handleCheck={handleCheck}
@ -65,6 +56,7 @@ const FormatPreserveEditor = ({
          unescapeNewlines={unescapeNewlines}
          textMode={textMode}
          isChunck={isChunck}
+          clickChunk={clickChunk}
        />
      )}
    </div>
--- a/web/src/pages/dataflow-result/components/parse-editer/interface.ts
+++ b/web/src/pages/dataflow-result/components/parse-editer/interface.ts
@ -0,0 +1,65 @@
+import { CheckedState } from '@radix-ui/react-checkbox';
+import { ChunkTextMode } from '../../constant';
+import { IChunk } from '../../interface';
+import { parserKeyMap } from './json-parser';
+
+export interface FormatPreserveEditorProps {
+  initialValue: {
+    key: keyof typeof parserKeyMap | 'text' | 'html';
+    type: string;
+    value: Array<{ [key: string]: string }>;
+  };
+  onSave: (value: any) => void;
+  className?: string;
+  isSelect?: boolean;
+  isDelete?: boolean;
+  isChunck?: boolean;
+  handleCheckboxClick?: (id: string | number, checked: boolean) => void;
+  selectedChunkIds?: string[];
+  textMode?: ChunkTextMode;
+  clickChunk: (chunk: IChunk) => void;
+  isReadonly: boolean;
+}
+
+export type IJsonContainerProps = {
+  initialValue: {
+    key: keyof typeof parserKeyMap;
+    type: string;
+    value: {
+      [key: string]: string;
+    }[];
+  };
+  isChunck?: boolean;
+  handleCheck: (e: CheckedState, index: number) => void;
+  selectedChunkIds: string[] | undefined;
+  unescapeNewlines: (text: string) => string;
+  escapeNewlines: (text: string) => string;
+  onSave: (data: {
+    value: {
+      text: string;
+    }[];
+    key: string;
+    type: string;
+  }) => void;
+  className?: string;
+  textMode?: ChunkTextMode;
+  clickChunk: (chunk: IChunk) => void;
+  isReadonly: boolean;
+};
+
+export type IObjContainerProps = {
+  initialValue: {
+    key: string;
+    type: string;
+    value: string;
+  };
+  isChunck?: boolean;
+  handleCheck: (e: CheckedState, index: number) => void;
+  unescapeNewlines: (text: string) => string;
+  escapeNewlines: (text: string) => string;
+  onSave: (data: { value: string; key: string; type: string }) => void;
+  className?: string;
+  textMode?: ChunkTextMode;
+  clickChunk: (chunk: IChunk) => void;
+  isReadonly: boolean;
+};
--- a/web/src/pages/dataflow-result/components/parse-editer/json-parser.tsx
+++ b/web/src/pages/dataflow-result/components/parse-editer/json-parser.tsx
@ -1,37 +1,16 @@
 import { Checkbox } from '@/components/ui/checkbox';
 import { cn } from '@/lib/utils';
-import { CheckedState } from '@radix-ui/react-checkbox';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ChunkTextMode } from '../../constant';
 import styles from '../../index.less';
+import { useParserInit } from './hook';
+import { IJsonContainerProps } from './interface';
 export const parserKeyMap = {
  json: 'text',
-  chunks: 'content_with_weight',
+  chunks: 'text',
 };
-type IProps = {
-  initialValue: {
-    key: keyof typeof parserKeyMap;
-    type: string;
-    value: {
-      [key: string]: string;
-    }[];
-  };
-  isChunck?: boolean;
-  handleCheck: (e: CheckedState, index: number) => void;
-  selectedChunkIds: string[] | undefined;
-  unescapeNewlines: (text: string) => string;
-  escapeNewlines: (text: string) => string;
-  onSave: (data: {
-    value: {
-      text: string;
-    }[];
-    key: string;
-    type: string;
-  }) => void;
-  className?: string;
-  textMode?: ChunkTextMode;
-};
-export const ArrayContainer = (props: IProps) => {
+
+export const ArrayContainer = (props: IJsonContainerProps) => {
  const {
    initialValue,
    isChunck,
@ -42,29 +21,27 @@ export const ArrayContainer = (props: IProps) => {
    onSave,
    className,
    textMode,
+    clickChunk,
+    isReadonly,
  } = props;

-  const [content, setContent] = useState(initialValue);
+  const {
+    content,
+    setContent,
+    activeEditIndex,
+    setActiveEditIndex,
+    editDivRef,
+  } = useParserInit({ initialValue });

-  useEffect(() => {
-    setContent(initialValue);
-    console.log('initialValue json parse', initialValue);
-  }, [initialValue]);
-
-  const [activeEditIndex, setActiveEditIndex] = useState<number | undefined>(
-    undefined,
-  );
-  const editDivRef = useRef<HTMLDivElement>(null);
  const handleEdit = useCallback(
    (e?: any, index?: number) => {
-      console.log(e, e.target.innerText);
      setContent((pre) => ({
        ...pre,
        value: pre.value.map((item, i) => {
          if (i === index) {
            return {
              ...item,
-              [parserKeyMap[content.key]]: e.target.innerText,
+              [parserKeyMap[content.key]]: unescapeNewlines(e.target.innerText),
            };
          }
          return item;
@ -76,14 +53,13 @@ export const ArrayContainer = (props: IProps) => {
  );
  const handleSave = useCallback(
    (e: any) => {
-      console.log(e, e.target.innerText);
      const saveData = {
        ...content,
        value: content.value?.map((item, index) => {
          if (index === activeEditIndex) {
            return {
              ...item,
-              [parserKeyMap[content.key]]: unescapeNewlines(e.target.innerText),
+              [parserKeyMap[content.key]]: e.target.innerText,
            };
          } else {
            return item;
@ -99,8 +75,9 @@ export const ArrayContainer = (props: IProps) => {
  useEffect(() => {
    if (activeEditIndex !== undefined && editDivRef.current) {
      editDivRef.current.focus();
-      editDivRef.current.textContent =
-        content.value[activeEditIndex][parserKeyMap[content.key]];
+      editDivRef.current.textContent = escapeNewlines(
+        content.value[activeEditIndex][parserKeyMap[content.key]],
+      );
    }
  }, [activeEditIndex, content]);

@ -119,7 +96,7 @@ export const ArrayContainer = (props: IProps) => {
                : ''
            }
          >
-            {isChunck && (
+            {isChunck && !isReadonly && (
              <Checkbox
                onCheckedChange={(e) => {
                  handleCheck(e, index);
@ -132,16 +109,8 @@ export const ArrayContainer = (props: IProps) => {
            {activeEditIndex === index && (
              <div
                ref={editDivRef}
-                contentEditable={true}
+                contentEditable={!isReadonly}
                onBlur={handleSave}
-                //   onKeyUp={handleChange}
-                // dangerouslySetInnerHTML={{
-                //   __html: DOMPurify.sanitize(
-                //     escapeNewlines(
-                //       content.value[index][parserKeyMap[content.key]],
-                //     ),
-                //   ),
-                // }}
                className={cn(
                  'w-full bg-transparent text-text-secondary border-none focus-visible:border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none p-0',
                  className,
@ -159,7 +128,10 @@ export const ArrayContainer = (props: IProps) => {
                )}
                key={index}
                onClick={(e) => {
-                  handleEdit(e, index);
+                  clickChunk(item);
+                  if (!isReadonly) {
+                    handleEdit(e, index);
+                  }
                }}
              >
                {escapeNewlines(item[parserKeyMap[content.key]])}
--- a/web/src/pages/dataflow-result/components/parse-editer/object-parser.tsx
+++ b/web/src/pages/dataflow-result/components/parse-editer/object-parser.tsx
@ -1,24 +1,10 @@
 import { cn } from '@/lib/utils';
-import { CheckedState } from '@radix-ui/react-checkbox';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ChunkTextMode } from '../../constant';
 import styles from '../../index.less';
-
-type IProps = {
-  initialValue: {
-    key: string;
-    type: string;
-    value: string;
-  };
-  isChunck?: boolean;
-  handleCheck: (e: CheckedState, index: number) => void;
-  unescapeNewlines: (text: string) => string;
-  escapeNewlines: (text: string) => string;
-  onSave: (data: { value: string; key: string; type: string }) => void;
-  className?: string;
-  textMode?: ChunkTextMode;
-};
-export const ObjectContainer = (props: IProps) => {
+import { useParserInit } from './hook';
+import { IObjContainerProps } from './interface';
+export const ObjectContainer = (props: IObjContainerProps) => {
  const {
    initialValue,
    isChunck,
@ -27,36 +13,34 @@ export const ObjectContainer = (props: IProps) => {
    onSave,
    className,
    textMode,
+    clickChunk,
+    isReadonly,
  } = props;

-  const [content, setContent] = useState(initialValue);
+  const {
+    content,
+    setContent,
+    activeEditIndex,
+    setActiveEditIndex,
+    editDivRef,
+  } = useParserInit({ initialValue });

-  useEffect(() => {
-    setContent(initialValue);
-    console.log('initialValue object parse', initialValue);
-  }, [initialValue]);
-
-  const [activeEditIndex, setActiveEditIndex] = useState<number | undefined>(
-    undefined,
-  );
-  const editDivRef = useRef<HTMLDivElement>(null);
  const handleEdit = useCallback(
    (e?: any) => {
-      console.log(e, e.target.innerText);
      setContent((pre) => ({
        ...pre,
-        value: e.target.innerText,
+        value: escapeNewlines(e.target.innerText),
      }));
      setActiveEditIndex(1);
    },
    [setContent, setActiveEditIndex],
  );
+
  const handleSave = useCallback(
    (e: any) => {
-      console.log(e, e.target.innerText);
      const saveData = {
        ...content,
-        value: unescapeNewlines(e.target.innerText),
+        value: e.target.innerText,
      };
      onSave(saveData);
      setActiveEditIndex(undefined);
@ -83,7 +67,7 @@ export const ObjectContainer = (props: IProps) => {
        {activeEditIndex && (
          <div
            ref={editDivRef}
-            contentEditable={true}
+            contentEditable={!isReadonly}
            onBlur={handleSave}
            className={cn(
              'w-full bg-transparent text-text-secondary border-none focus-visible:border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none p-0',
@ -100,7 +84,10 @@ export const ObjectContainer = (props: IProps) => {
              },
            )}
            onClick={(e) => {
-              handleEdit(e);
+              clickChunk(content);
+              if (!isReadonly) {
+                handleEdit(e);
+              }
            }}
          >
            {escapeNewlines(content.value)}
--- a/web/src/pages/dataflow-result/components/time-line/index.tsx
+++ b/web/src/pages/dataflow-result/components/time-line/index.tsx
@ -83,8 +83,8 @@ const TimelineDataFlow = ({
          nodeSize={24}
          activeStyle={{
            nodeSize: 30,
-            iconColor: 'var(--accent-primary)',
-            textColor: 'var(--accent-primary)',
+            iconColor: 'rgb(var(--accent-primary))',
+            textColor: 'rgb(var(--accent-primary))',
          }}
        />
      </div>
--- a/web/src/pages/dataflow-result/constant.ts
+++ b/web/src/pages/dataflow-result/constant.ts
@ -9,6 +9,15 @@ export enum TimelineNodeType {
  contextGenerator = 'extractor',
  titleSplitter = 'hierarchicalMerger',
  characterSplitter = 'splitter',
-  tokenizer = 'indexer',
+  tokenizer = 'tokenizer',
  end = 'end',
 }
+
+export enum PipelineResultSearchParams {
+  DocumentId = 'doc_id',
+  KnowledgeId = 'knowledgeId',
+  Type = 'type',
+  IsReadOnly = 'is_read_only',
+  AgentId = 'agent_id',
+  AgentTitle = 'agent_title',
+}
--- a/web/src/pages/dataflow-result/hooks.ts
+++ b/web/src/pages/dataflow-result/hooks.ts
@ -1,10 +1,6 @@
 import { TimelineNode } from '@/components/originui/timeline';
 import message from '@/components/ui/message';
-import {
-  useCreateChunk,
-  useDeleteChunk,
-  useSelectChunkList,
-} from '@/hooks/chunk-hooks';
+import { useCreateChunk, useDeleteChunk } from '@/hooks/chunk-hooks';
 import { useSetModalState, useShowDeleteConfirm } from '@/hooks/common-hooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
 import { IChunk } from '@/interfaces/database/knowledge';
@ -18,7 +14,11 @@ import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useParams, useSearchParams } from 'umi';
 import { ITimelineNodeObj, TimelineNodeObj } from './components/time-line';
-import { ChunkTextMode, TimelineNodeType } from './constant';
+import {
+  ChunkTextMode,
+  PipelineResultSearchParams,
+  TimelineNodeType,
+} from './constant';
 import { IDslComponent, IPipelineFileLogDetail } from './interface';

 export const useFetchPipelineFileLogDetail = (props?: {
@ -55,28 +55,21 @@ export const useFetchPipelineFileLogDetail = (props?: {
 };

 export const useHandleChunkCardClick = () => {
-  const [selectedChunkId, setSelectedChunkId] = useState<string>('');
+  const [selectedChunk, setSelectedChunk] = useState<IChunk>();

-  const handleChunkCardClick = useCallback((chunkId: string) => {
-    setSelectedChunkId(chunkId);
+  const handleChunkCardClick = useCallback((chunk: IChunk) => {
+    console.log('click-chunk-->', chunk);
+    setSelectedChunk(chunk);
  }, []);

-  return { handleChunkCardClick, selectedChunkId };
+  return { handleChunkCardClick, selectedChunk };
 };

-export const useGetSelectedChunk = (selectedChunkId: string) => {
-  const data = useSelectChunkList();
-  return (
-    data?.data?.find((x) => x.chunk_id === selectedChunkId) ?? ({} as IChunk)
-  );
-};
-
-export const useGetChunkHighlights = (selectedChunkId: string) => {
+export const useGetChunkHighlights = (selectedChunk?: IChunk) => {
  const [size, setSize] = useState({ width: 849, height: 1200 });
-  const selectedChunk: IChunk = useGetSelectedChunk(selectedChunkId);

  const highlights: IHighlight[] = useMemo(() => {
-    return buildChunkHighlights(selectedChunk, size);
+    return selectedChunk ? buildChunkHighlights(selectedChunk, size) : [];
  }, [selectedChunk, size]);

  const setWidthAndHeight = useCallback((width: number, height: number) => {
@ -276,3 +269,23 @@ export const useTimelineDataFlow = (data: IPipelineFileLogDetail) => {
    timelineNodes,
  };
 };
+
+export const useGetPipelineResultSearchParams = () => {
+  const [currentQueryParameters] = useSearchParams();
+  const is_read_only = currentQueryParameters.get(
+    PipelineResultSearchParams.IsReadOnly,
+  ) as 'true' | 'false';
+  console.log('is_read_only', is_read_only);
+  return {
+    type: currentQueryParameters.get(PipelineResultSearchParams.Type) || '',
+    documentId:
+      currentQueryParameters.get(PipelineResultSearchParams.DocumentId) || '',
+    knowledgeId:
+      currentQueryParameters.get(PipelineResultSearchParams.KnowledgeId) || '',
+    isReadOnly: is_read_only === 'true',
+    agentId:
+      currentQueryParameters.get(PipelineResultSearchParams.AgentId) || '',
+    agentTitle:
+      currentQueryParameters.get(PipelineResultSearchParams.AgentTitle) || '',
+  };
+};
--- a/web/src/pages/dataflow-result/index.tsx
+++ b/web/src/pages/dataflow-result/index.tsx
@ -5,6 +5,7 @@ import DocumentPreview from './components/document-preview';
 import {
  useFetchPipelineFileLogDetail,
  useGetChunkHighlights,
+  useGetPipelineResultSearchParams,
  useHandleChunkCardClick,
  useRerunDataflow,
  useTimelineDataFlow,
@ -25,10 +26,7 @@ import {
 } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Modal } from '@/components/ui/modal/modal';
-import {
-  QueryStringMap,
-  useNavigatePage,
-} from '@/hooks/logic-hooks/navigate-hooks';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
 import { useGetDocumentUrl } from './components/document-preview/hooks';
 import TimelineDataFlow from './components/time-line';
@ -38,22 +36,29 @@ import { IDslComponent } from './interface';
 import ParserContainer from './parser';

 const Chunk = () => {
+  const { isReadOnly, knowledgeId, agentId, agentTitle } =
+    useGetPipelineResultSearchParams();
+
  const {
    data: { documentInfo },
  } = useFetchNextChunkList();
-  const { selectedChunkId } = useHandleChunkCardClick();
+  const { selectedChunk, handleChunkCardClick } = useHandleChunkCardClick();
  const [activeStepId, setActiveStepId] = useState<number | string>(2);
  const { data: dataset } = useFetchPipelineFileLogDetail();
  const { t } = useTranslation();

  const { timelineNodes } = useTimelineDataFlow(dataset);

-  const { navigateToDataset, getQueryString, navigateToDatasetList } =
-    useNavigatePage();
+  const {
+    navigateToDataset,
+    navigateToDatasetList,
+    navigateToAgents,
+    navigateToDataflow,
+  } = useNavigatePage();
  const fileUrl = useGetDocumentUrl();

  const { highlights, setWidthAndHeight } =
-    useGetChunkHighlights(selectedChunkId);
+    useGetChunkHighlights(selectedChunk);

  const fileType = useMemo(() => {
    switch (documentInfo?.type) {
@ -77,6 +82,7 @@ const Chunk = () => {
  } = useRerunDataflow({
    data: dataset,
  });
+
  const handleStepChange = (id: number | string, step: TimelineNode) => {
    if (isChange) {
      Modal.show({
@ -135,18 +141,32 @@ const Chunk = () => {
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
-              <BreadcrumbLink onClick={navigateToDatasetList}>
-                {t('knowledgeDetails.dataset')}
+              <BreadcrumbLink
+                onClick={() => {
+                  if (knowledgeId) {
+                    navigateToDatasetList();
+                  }
+                  if (agentId) {
+                    navigateToAgents();
+                  }
+                }}
+              >
+                {knowledgeId ? t('knowledgeDetails.dataset') : t('header.flow')}
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink
-                onClick={navigateToDataset(
-                  getQueryString(QueryStringMap.KnowledgeId) as string,
-                )}
+                onClick={() => {
+                  if (knowledgeId) {
+                    navigateToDataset(knowledgeId)();
+                  }
+                  if (agentId) {
+                    navigateToDataflow(agentId)();
+                  }
+                }}
              >
-                {t('knowledgeDetails.overview')}
+                {knowledgeId ? t('knowledgeDetails.overview') : agentTitle}
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
@ -194,8 +214,10 @@ const Chunk = () => {
            {/* {currentTimeNode?.type === TimelineNodeType.parser && ( */}
            {(currentTimeNode?.type === TimelineNodeType.parser ||
              currentTimeNode?.type === TimelineNodeType.characterSplitter ||
-              currentTimeNode?.type === TimelineNodeType.titleSplitter) && (
+              currentTimeNode?.type === TimelineNodeType.titleSplitter ||
+              currentTimeNode?.type === TimelineNodeType.contextGenerator) && (
              <ParserContainer
+                isReadonly={isReadOnly}
                isChange={isChange}
                reRunLoading={reRunLoading}
                setIsChange={setIsChange}
@ -206,6 +228,7 @@ const Chunk = () => {
                    key: string;
                  }
                }
+                clickChunk={handleChunkCardClick}
                reRunFunc={handleReRunFunc}
              />
            )}
--- a/web/src/pages/dataflow-result/interface.ts
+++ b/web/src/pages/dataflow-result/interface.ts
@ -1,3 +1,5 @@
+import { PipelineResultSearchParams } from './constant';
+
 interface ComponentParams {
  debug_inputs: Record<string, any>;
  delay_after_error: number;
@ -60,3 +62,19 @@ export interface IPipelineFileLogDetail {
  update_date: string;
  update_time: number;
 }
+
+export interface IChunk {
+  positions: number[][];
+  image_id: string;
+  text: string;
+}
+
+export interface NavigateToDataflowResultProps {
+  id: string;
+  [PipelineResultSearchParams.KnowledgeId]?: string;
+  [PipelineResultSearchParams.DocumentId]: string;
+  [PipelineResultSearchParams.AgentId]?: string;
+  [PipelineResultSearchParams.AgentTitle]?: string;
+  [PipelineResultSearchParams.IsReadOnly]?: string;
+  [PipelineResultSearchParams.Type]: string;
+}
--- a/web/src/pages/dataflow-result/parser.tsx
+++ b/web/src/pages/dataflow-result/parser.tsx
@ -10,17 +10,28 @@ import FormatPreserEditor from './components/parse-editer';
 import RerunButton from './components/rerun-button';
 import { TimelineNodeType } from './constant';
 import { useChangeChunkTextMode } from './hooks';
-import { IDslComponent } from './interface';
+import { IChunk, IDslComponent } from './interface';
 interface IProps {
+  isReadonly: boolean;
  isChange: boolean;
  setIsChange: (isChange: boolean) => void;
  step?: TimelineNode;
  data: { value: IDslComponent; key: string };
  reRunLoading: boolean;
+  clickChunk: (chunk: IChunk) => void;
  reRunFunc: (data: { value: IDslComponent; key: string }) => void;
 }
 const ParserContainer = (props: IProps) => {
-  const { isChange, setIsChange, step, data, reRunFunc, reRunLoading } = props;
+  const {
+    isChange,
+    setIsChange,
+    step,
+    data,
+    reRunFunc,
+    reRunLoading,
+    clickChunk,
+    isReadonly,
+  } = props;
  const { t } = useTranslation();
  const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
  const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
@ -83,13 +94,13 @@ const ParserContainer = (props: IProps) => {
      initialText.value = initialText.value.filter(
        (item: any, index: number) => !selectedChunkIds.includes(index + ''),
      );
+      setIsChange(true);
      setSelectedChunkIds([]);
    }
-  }, [selectedChunkIds, initialText]);
+  }, [selectedChunkIds, initialText, setIsChange]);

  const handleCheckboxClick = useCallback(
    (id: string | number, checked: boolean) => {
-      console.log('handleCheckboxClick', id, checked, selectedChunkIds);
      setSelectedChunkIds((prev) => {
        if (checked) {
          return [...prev, id.toString()];
@ -116,20 +127,18 @@ const ParserContainer = (props: IProps) => {

  const handleCreateChunk = useCallback(
    (text: string) => {
-      console.log('handleCreateChunk', text);
      const newText = [...initialText.value, { text: text || ' ' }];
      setInitialText({
        ...initialText,
        value: newText,
      });
-      console.log('newText', newText, initialText);
    },
    [initialText],
  );

  return (
    <>
-      {isChange && (
+      {isChange && !isReadonly && (
        <div className=" absolute top-2 right-6">
          <RerunButton
            step={step}
@ -163,13 +172,16 @@ const ParserContainer = (props: IProps) => {

        {isChunck && (
          <div className="pt-[5px] pb-[5px] flex justify-between items-center">
-            <CheckboxSets
-              selectAllChunk={selectAllChunk}
-              removeChunk={handleRemoveChunk}
-              checked={selectedChunkIds.length === initialText.value.length}
-              selectedChunkIds={selectedChunkIds}
-            />
+            {!isReadonly && (
+              <CheckboxSets
+                selectAllChunk={selectAllChunk}
+                removeChunk={handleRemoveChunk}
+                checked={selectedChunkIds.length === initialText.value.length}
+                selectedChunkIds={selectedChunkIds}
+              />
+            )}
            <ChunkResultBar
+              isReadonly={isReadonly}
              changeChunkTextMode={changeChunkTextMode}
              createChunk={handleCreateChunk}
            />
@ -189,15 +201,14 @@ const ParserContainer = (props: IProps) => {
            <FormatPreserEditor
              initialValue={initialText}
              onSave={handleSave}
-              // className={
-              //   initialText.key !== 'json' ? '!h-[calc(100vh-220px)]' : ''
-              // }
+              isReadonly={isReadonly}
              isChunck={isChunck}
              textMode={textMode}
              isDelete={
                step?.type === TimelineNodeType.characterSplitter ||
                step?.type === TimelineNodeType.titleSplitter
              }
+              clickChunk={clickChunk}
              handleCheckboxClick={handleCheckboxClick}
              selectedChunkIds={selectedChunkIds}
            />
--- a/web/src/pages/dataset/dataset-overview/hook.ts
+++ b/web/src/pages/dataset/dataset-overview/hook.ts
@ -1,3 +1,4 @@
+import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
 import {
  useGetPaginationWithRouter,
  useHandleSearchChange,
@ -32,6 +33,7 @@ const useFetchFileLogList = () => {
  const [searchParams] = useSearchParams();
  const { searchString, handleInputChange } = useHandleSearchChange();
  const { pagination, setPagination } = useGetPaginationWithRouter();
+  const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
  const { id } = useParams();
  const [active, setActive] = useState<(typeof LogTabs)[keyof typeof LogTabs]>(
    LogTabs.FILE_LOGS,
@ -48,6 +50,7 @@ const useFetchFileLogList = () => {
      pagination,
      searchString,
      active,
+      filterValue,
    ],
    placeholderData: (previousData) => {
      if (previousData === undefined) {
@ -57,13 +60,16 @@ const useFetchFileLogList = () => {
    },
    enabled: true,
    queryFn: async () => {
-      const { data: res = {} } = await fetchFunc({
-        kb_id: knowledgeBaseId,
-        page: pagination.current,
-        page_size: pagination.pageSize,
-        keywords: searchString,
-        // order_by: '',
-      });
+      const { data: res = {} } = await fetchFunc(
+        {
+          kb_id: knowledgeBaseId,
+          page: pagination.current,
+          page_size: pagination.pageSize,
+          keywords: searchString,
+          // order_by: '',
+        },
+        { ...filterValue },
+      );
      return res.data || [];
    },
  });
@ -82,6 +88,8 @@ const useFetchFileLogList = () => {
    setPagination,
    active,
    setActive,
+    filterValue,
+    handleFilterSubmit,
  };
 };

--- a/web/src/pages/dataset/dataset-overview/index.tsx
+++ b/web/src/pages/dataset/dataset-overview/index.tsx
@ -1,10 +1,12 @@
+import { FilterCollection } from '@/components/list-filter-bar/interface';
 import SvgIcon from '@/components/svg-icon';
 import { useIsDarkTheme } from '@/components/theme-provider';
 import { useFetchDocumentList } from '@/hooks/use-document-request';
-import { parseColorToRGBA } from '@/utils/common-util';
+import { t } from 'i18next';
 import { CircleQuestionMark } from 'lucide-react';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { RunningStatus, RunningStatusMap } from '../dataset/constant';
 import { LogTabs } from './dataset-common';
 import { DatasetFilter } from './dataset-filter';
 import { useFetchFileLogList, useFetchOverviewTital } from './hook';
@ -16,6 +18,10 @@ interface StatCardProps {
  icon: JSX.Element;
  children?: JSX.Element;
 }
+interface CardFooterProcessProps {
+  success: number;
+  failed: number;
+}

 const StatCard: FC<StatCardProps> = ({ title, value, children, icon }) => {
  return (
@ -35,10 +41,6 @@ const StatCard: FC<StatCardProps> = ({ title, value, children, icon }) => {
  );
 };

-interface CardFooterProcessProps {
-  success: number;
-  failed: number;
-}
 const CardFooterProcess: FC<CardFooterProcessProps> = ({
  success = 0,
  failed = 0,
@ -47,12 +49,7 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
  return (
    <div className="flex items-center flex-col gap-2">
      <div className="w-full flex justify-between gap-4 rounded-lg text-sm font-bold text-text-primary">
-        <div
-          className="flex items-center justify-between  rounded-md w-1/2 p-2"
-          style={{
-            backgroundColor: `${parseColorToRGBA('var(--state-success)', 0.05)}`,
-          }}
-        >
+        <div className="flex items-center justify-between  rounded-md w-1/2 p-2 bg-state-success-5">
          <div className="flex items-center rounded-lg gap-1">
            <div className="w-2 h-2 rounded-full bg-state-success"></div>
            <div>{t('knowledgeDetails.success')}</div>
@ -70,6 +67,35 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
    </div>
  );
 };
+
+const filters = [
+  {
+    field: 'operation_status',
+    label: t('knowledgeDetails.status'),
+    list: Object.values(RunningStatus).map((value) => {
+      // const value = key as RunningStatus;
+      console.log(value);
+      return {
+        id: value,
+        label: RunningStatusMap[value].label,
+      };
+    }),
+  },
+  {
+    field: 'types',
+    label: t('knowledgeDetails.task'),
+    list: [
+      {
+        id: 'Parse',
+        label: 'Parse',
+      },
+      {
+        id: 'Download',
+        label: 'Download',
+      },
+    ],
+  },
+];
 const FileLogsPage: FC = () => {
  const { t } = useTranslation();

@ -89,12 +115,11 @@ const FileLogsPage: FC = () => {
      failed: 0,
    },
  });
-
  const { data: topData } = useFetchOverviewTital();
  const {
    pagination: { total: fileTotal },
  } = useFetchDocumentList();
-  console.log('topData --> ', topData);
+
  useEffect(() => {
    setTopAllData((prev) => {
      return {
@ -127,6 +152,8 @@ const FileLogsPage: FC = () => {
    pagination,
    setPagination,
    active,
+    filterValue,
+    handleFilterSubmit,
    setActive,
  } = useFetchFileLogList();

@ -156,6 +183,7 @@ const FileLogsPage: FC = () => {
  };

  const isDark = useIsDarkTheme();
+
  return (
    <div className="p-5 min-w-[880px] border-border border rounded-lg mr-5">
      {/* Stats Cards */}
@ -215,10 +243,13 @@ const FileLogsPage: FC = () => {

      {/* Tabs & Search */}
      <DatasetFilter
+        filters={filters as FilterCollection[]}
+        value={filterValue}
        active={active}
        setActive={changeActiveLogs}
        searchString={searchString}
        onSearchChange={handleInputChange}
+        onChange={handleFilterSubmit}
      />

      {/* Table */}
--- a/web/src/pages/dataset/dataset-overview/overview-table.tsx
+++ b/web/src/pages/dataset/dataset-overview/overview-table.tsx
@ -14,6 +14,8 @@ import {
 import { RunningStatusMap } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { PipelineResultSearchParams } from '@/pages/dataflow-result/constant';
+import { NavigateToDataflowResultProps } from '@/pages/dataflow-result/interface';
 import { formatDate, formatSecondsToHumanReadable } from '@/utils/date';
 import {
  ColumnDef,
@ -41,9 +43,7 @@ export const getFileLogsTableColumns = (
  showLog: (row: Row<IFileLogItem & DocumentLog>, active: LogTabs) => void,
  kowledgeId: string,
  navigateToDataflowResult: (
-    id: string,
-    knowledgeId: string,
-    doc_id?: string,
+    props: NavigateToDataflowResultProps,
  ) => () => void,
 ) => {
  // const { t } = useTranslate('knowledgeDetails');
@ -165,18 +165,23 @@ export const getFileLogsTableColumns = (
          >
            <Eye />
          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="p-1"
-            onClick={navigateToDataflowResult(
-              row.original.id,
-              kowledgeId,
-              row.original.document_id,
-            )}
-          >
-            <ClipboardList />
-          </Button>
+          {row.original.pipeline_id && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="p-1"
+              onClick={navigateToDataflowResult({
+                id: row.original.id,
+                [PipelineResultSearchParams.KnowledgeId]: kowledgeId,
+                [PipelineResultSearchParams.DocumentId]:
+                  row.original.document_id,
+                [PipelineResultSearchParams.IsReadOnly]: 'false',
+                [PipelineResultSearchParams.Type]: 'dataflow',
+              })}
+            >
+              <ClipboardList />
+            </Button>
+          )}
        </div>
      ),
    },
@ -371,6 +376,7 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
      ? Math.ceil(pagination.total / pagination.pageSize)
      : 0,
  });
+
  return (
    <div className="w-full h-[calc(100vh-360px)]">
      <Table rootClassName="max-h-[calc(100vh-380px)]">
--- a/web/src/pages/dataset/dataset/constant.ts
+++ b/web/src/pages/dataset/dataset/constant.ts
@ -3,14 +3,20 @@ import { RunningStatus } from '@/constants/knowledge';
 export const RunningStatusMap = {
  [RunningStatus.UNSTART]: {
    label: 'UNSTART',
-    color: 'var(--accent-primary)',
+    color: 'rgba(var(--accent-primary))',
  },
  [RunningStatus.RUNNING]: {
    label: 'Parsing',
    color: 'var(--team-member)',
  },
-  [RunningStatus.CANCEL]: { label: 'CANCEL', color: 'var(--state-warning)' },
-  [RunningStatus.DONE]: { label: 'SUCCESS', color: 'var(--state-success)' },
+  [RunningStatus.CANCEL]: {
+    label: 'CANCEL',
+    color: 'rgba(var(--state-warning))',
+  },
+  [RunningStatus.DONE]: {
+    label: 'SUCCESS',
+    color: 'rgba(var(--state-success))',
+  },
  [RunningStatus.FAIL]: { label: 'FAIL', color: 'rgba(var(--state-error))' },
 };

--- a/web/src/pages/dataset/dataset/parsing-status-cell.tsx
+++ b/web/src/pages/dataset/dataset/parsing-status-cell.tsx
@ -21,7 +21,7 @@ import { UseSaveMetaShowType } from './use-save-meta';
 import { isParserRunning } from './utils';
 const IconMap = {
  [RunningStatus.UNSTART]: (
-    <div className="w-0 h-0 border-l-[10px] border-l-accent-primary border-t-8 border-r-4 border-b-8 border-transparent"></div>
+    <IconFontFill name="play" className="text-accent-primary" />
  ),
  [RunningStatus.RUNNING]: (
    <CircleX size={14} color="rgba(var(--state-error))" />
--- a/web/src/services/knowledge-service.ts
+++ b/web/src/services/knowledge-service.ts
@ -210,6 +210,10 @@ const methods = {
    url: traceRaptor,
    method: 'get',
  },
+  pipelineRerun: {
+    url: api.pipelineRerun,
+    method: 'post',
+  },
 };

 const kbService = registerServer<keyof typeof methods>(methods, request);
--- a/web/src/utils/common-util.ts
+++ b/web/src/utils/common-util.ts
@ -174,6 +174,32 @@ export function parseColorToRGB(color: string): [number, number, number] {
    colorStr = getCSSVariableValue(varName);
  }

+  // Handle rgb(var(--accent-primary)) format
+  if (colorStr.startsWith('rgb(var(')) {
+    const varMatch = colorStr.match(/rgb\(var\(([^)]+)\)\)/);
+    if (!varMatch) {
+      console.error(`Invalid nested CSS variable: ${color}`);
+      return [0, 0, 0];
+    }
+    const varName = varMatch[1];
+    if (!varName) {
+      console.error(`Invalid nested CSS variable: ${colorStr}`);
+      return [0, 0, 0];
+    }
+    // Get the CSS variable value which should be in format "r, g, b"
+    const rgbValues = getCSSVariableValue(varName);
+    const rgbMatch = rgbValues.match(/^(\d+),?\s*(\d+),?\s*(\d+)$/);
+    if (rgbMatch) {
+      return [
+        parseInt(rgbMatch[1]),
+        parseInt(rgbMatch[2]),
+        parseInt(rgbMatch[3]),
+      ];
+    }
+    console.error(`Unsupported RGB CSS variable format: ${rgbValues}`);
+    return [0, 0, 0];
+  }
+
  // Handles hexadecimal colors (e.g. #FF5733)
  if (colorStr.startsWith('#')) {
    const cleanedHex = colorStr.replace(/^#/, '');
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -81,8 +81,14 @@ module.exports = {
          5: 'rgba(var(--accent-primary) / 0.05)', // 5%
        },
        'bg-accent': 'var(--bg-accent)',
-        'state-success': 'var(--state-success)',
-        'state-warning': 'var(--state-warning)',
+        'state-success': {
+          DEFAULT: 'rgb(var(--state-success) / <alpha-value>)',
+          5: 'rgba(var(--state-success) / 0.05)', // 5%
+        },
+        'state-warning': {
+          DEFAULT: 'rgb(var(--state-warning) / <alpha-value>)',
+          5: 'rgba(var(--state-warning) / 0.05)', // 5%
+        },
        'state-error': {
          DEFAULT: 'rgb(var(--state-error) / <alpha-value>)',
          5: 'rgba(var(--state-error) / 0.05)', // 5%
--- a/web/tailwind.css
+++ b/web/tailwind.css
@ -116,8 +116,10 @@
    /* Output Variables Box */
    --bg-accent: rgba(76, 164, 231, 0.05);

-    --state-success: #3ba05c;
-    --state-warning: #faad14;
+    /* --state-success: #3ba05c; */
+    --state-success: 59 160 92;
+    /* --state-warning: #767573; */
+    --state-warning: 118 117 115;
    --state-error: 216 73 75;

    --team-group: #5ab77e;