Implementation:Infiniflow Ragflow DataflowResult Page
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Dataflow |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React page component serving as the top-level pipeline result view with timeline navigation, document preview, and step-specific content panels.
Description
The Chunk (DataflowResult) page component orchestrates the dataflow pipeline result view. It supports both knowledge-base and agent contexts, determined by URL params (knowledgeId vs agentId). The page fetches pipeline results via useFetchPipelineResult and file log details via useFetchPipelineFileLogDetail, then constructs timeline nodes via useTimelineDataFlow. The layout features: a PageHeader with context-aware breadcrumbs (dataset or agent navigation), a centered TimelineDataFlow component for step navigation, a split panel with DocumentPreview (left, 2/5 width) showing the source document with chunk highlights, and a ParserContainer (right, 3/5 width) for the active step's content. Step changes are guarded by a confirmation modal when unsaved changes exist. The page tracks rerun state via useRerunDataflow and provides summary info via useSummaryInfo.
Usage
Accessed as the dataflow-result route when viewing pipeline processing results for a document within a knowledge base or agent workflow.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/dataflow-result/index.tsx
- Lines: 1-267
Signature
const Chunk: React.FC;
// Default export - no props; relies on URL search params for knowledgeId, agentId, etc.
Import
import Chunk from '@/pages/dataflow-result';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (URL params) | string | Yes | knowledgeId or agentId, agentTitle, documentExtension, isReadOnly from search params |
Outputs
| Name | Type | Description |
|---|---|---|
| Page JSX | ReactNode | Full pipeline result page with timeline, document preview, and step content |
Usage Examples
// Mounted via route configuration
import DataflowResult from '@/pages/dataflow-result';
// In route config:
{ path: '/dataflow-result', component: DataflowResult }