Implementation:ArroyoSystems Arroyo Checkpoint Details Component
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, DataVisualization |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
A D3-based interactive timeline visualization component that renders checkpoint event spans per operator and subtask for an Arroyo streaming pipeline job.
Description
CheckpointDetails (exported as CheckpointTimeline) renders an SVG timeline chart using D3.js that shows the timing and duration of checkpoint events across operators and their subtasks. The component processes OperatorCheckpointGroup data to lay out horizontal bars representing event spans on a time axis relative to the checkpoint start. It supports multi-lane rendering when spans overlap within a row, dynamic color-coding by span type using the Tableau10 color scheme, and interactive tooltips showing operator name, subtask index, span type, and duration. The component also renders global checkpoint events and operator-level metadata write spans.
A helper function formatDuration converts microsecond durations into human-readable strings (ms, seconds, or HH:MM:SS format).
Usage
Used within the Checkpoints component on the pipeline details page to display a timeline visualization when a user selects a specific checkpoint epoch.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/components/CheckpointDetails.tsx
Signature
export function formatDuration(micros: number): string;
export const CheckpointDetails: React.FC<CheckpointTimelineProps>;
interface CheckpointTimelineProps {
operators: OperatorCheckpointGroup[];
checkpoint: Checkpoint;
}
Import
import { CheckpointDetails, formatDuration } from './CheckpointDetails';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| operators | OperatorCheckpointGroup[] | Yes | Array of operator checkpoint groups containing subtasks and event spans |
| checkpoint | Checkpoint | Yes | Checkpoint metadata including start_time, finish_time, epoch, and global events |
Outputs
| Name | Type | Description |
|---|---|---|
| SVG Timeline | React element | An interactive D3 SVG chart with tooltip hover showing checkpoint event timelines per operator/subtask |
Usage Examples
<CheckpointDetails operators={checkpointDetails} checkpoint={checkpoint} />