Implementation:Infiniflow Ragflow DataflowChunker Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Dataflow, Chunk_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React container component for the chunker step within the dataflow pipeline result view, providing chunk listing with bulk operations and a rerun button.
Description
The ChunkerContainer component manages chunk display and editing within a dataflow pipeline step. It uses useFetchNextChunkList for paginated chunk data, useSwitchChunk for enable/disable toggling, and useDeleteChunkByIds for bulk deletion. The component tracks an isChange flag that shows a RerunButton when chunks have been modified, allowing re-execution of the pipeline step. The layout includes ChunkResultBar for filtering and search, CheckboxSets for bulk operations, a scrollable ChunkCard list, and RAGFlowPagination. When chunks are edited via CreatingModal, it triggers the change flag and delegates save to the parent via onChunkUpdatingOk with change tracking.
Usage
Rendered within the DataflowResult page when the active timeline step is a chunker/splitter type.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/dataflow-result/chunker.tsx
- Lines: 1-241
Signature
interface IProps {
isChange: boolean;
setIsChange: (isChange: boolean) => void;
step?: TimelineNode;
}
const ChunkerContainer: React.FC<IProps>;
export { ChunkerContainer };
Import
import { ChunkerContainer } from '@/pages/dataflow-result/chunker';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| isChange | boolean | Yes | Whether any chunks have been modified since last pipeline run |
| setIsChange | function | Yes | Callback to update the change tracking flag |
| step | TimelineNode | No | Current timeline step metadata for the rerun button |
Outputs
| Name | Type | Description |
|---|---|---|
| Container JSX | ReactNode | Full chunker step UI with chunk list, bulk ops, pagination, and rerun button |
Usage Examples
import { ChunkerContainer } from './chunker';
<ChunkerContainer
isChange={isChange}
setIsChange={setIsChange}
step={currentTimeNode as TimelineNode}
/>