Implementation:Infiniflow Ragflow DataflowResultHooks

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Dataflow
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete hooks for dataflow pipeline result data fetching provided by the RAGFlow frontend.

Description

The dataflow-result/hooks module exports a suite of React hooks for interacting with pipeline processing results. Key hooks include `useFetchPipelineFileLogDetail` (fetches log detail by ID), `useHandleChunkCardClick` (manages selected chunk state), `useGetChunkHighlights` (computes PDF highlights), `useChangeChunkTextMode` (toggles chunk display mode), `useDeleteChunkByIds` (confirms and deletes chunks), `useUpdateChunk` (creates/updates chunks), `useRerunDataflow` (re-executes a pipeline step), `useTimelineDataFlow` (builds timeline nodes from DSL), `useGetPipelineResultSearchParams` (reads URL search params), `useFetchPipelineResult` (fetches agent trace results), and `useSummaryInfo` (extracts parser summary).

Usage

Import individual hooks from this module in dataflow result page components to manage pipeline log data, chunk operations, and timeline visualization.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataflow-result/hooks.ts
• Lines: 1-359

Signature

export const useFetchPipelineFileLogDetail = (params: {
  isAgent: boolean; isEdit?: boolean; refreshCount?: number;
}) => { data: IPipelineFileLogDetail; loading: boolean };

export const useHandleChunkCardClick = () => {
  handleChunkCardClick: (chunk: IChunk) => void; selectedChunk: IChunk | undefined;
};

export const useGetChunkHighlights = (selectedChunk?: IChunk) => {
  highlights: IHighlight[]; setWidthAndHeight: (w: number, h: number) => void;
};

export const useChangeChunkTextMode = () => {
  textMode: ChunkTextMode; changeChunkTextMode: (mode: ChunkTextMode) => void;
};

export const useDeleteChunkByIds = () => {
  removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
};

export const useUpdateChunk = () => { ... };
export const useRerunDataflow = (params: { data: IPipelineFileLogDetail }) => { ... };
export const useTimelineDataFlow = (data: IPipelineFileLogDetail) => { timelineNodes: TimelineNode[] };
export const useGetPipelineResultSearchParams = () => { type: string; documentId: string; knowledgeId: string; isReadOnly: boolean; ... };
export function useFetchPipelineResult(params: { agentId: string }) => { pipelineResult: any };
export const useSummaryInfo = (data: IPipelineFileLogDetail, currentTimeNode: TimelineNode) => { summaryInfo: string };

Import

import {
  useFetchPipelineFileLogDetail,
  useHandleChunkCardClick,
  useTimelineDataFlow,
  useGetPipelineResultSearchParams,
} from '@/pages/dataflow-result/hooks';

I/O Contract

Inputs

Name	Type	Required	Description
isAgent	boolean	Yes	Whether the pipeline result is from an agent (vs dataset) context
isEdit	boolean	No	Whether to fetch detail data (defaults to true)
refreshCount	number	No	Incremented to trigger re-fetch of pipeline detail

Outputs

Name	Type	Description
data	IPipelineFileLogDetail	Pipeline log detail including DSL, components, and graph nodes
loading	boolean	Whether the pipeline detail is currently being fetched
timelineNodes	TimelineNode[]	Array of timeline nodes for visualizing the pipeline execution flow

Usage Examples

import { useFetchPipelineFileLogDetail, useTimelineDataFlow } from '@/pages/dataflow-result/hooks';

function PipelineResultPage() {
  const { data, loading } = useFetchPipelineFileLogDetail({ isAgent: false });
  const { timelineNodes } = useTimelineDataFlow(data);

  if (loading) return <Spinner />;
  return <Timeline nodes={timelineNodes} />;
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment