Implementation:ArroyoSystems Arroyo Pipeline Graph

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, DataVisualization
Last Updated	2026-02-08 08:00 GMT

Overview

An interactive directed acyclic graph (DAG) visualization of a pipeline's operator topology using React Flow and Dagre for automatic layout, with backpressure-based node coloring.

Description

PipelineGraphViewer renders a ReactFlow graph where each node represents a pipeline operator and edges represent data flow connections. Key features:

Dagre layout -- Uses the dagre library to automatically compute hierarchical node positions (top-to-bottom).
Custom node type -- PipelineGraphNode renders a box with the operator description, source/target handles, and a click handler to select the active operator.
Backpressure coloring -- Each node's background color reflects its backpressure level via getBackpressureColor (white for low, yellow for medium, red for high).
Active state -- The currently selected operator node receives an "active" CSS class.
Background grid -- A dot grid background pattern via React Flow's Background component.

Usage

Used in the Operators tab of PipelineDetails and in the bottom panel of CreatePipeline after query validation.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/pipelines/PipelineGraph.tsx

Signature

export function PipelineGraphViewer(props: {
  graph: PipelineGraph;
  operatorMetricGroups?: OperatorMetricGroup[];
  setActiveOperator: (node: number) => void;
  activeOperator?: number;
}): JSX.Element;

Import

import { PipelineGraphViewer } from './PipelineGraph';

I/O Contract

Inputs

Name	Type	Required	Description
graph	PipelineGraph	Yes	Pipeline graph with nodes and edges arrays
operatorMetricGroups	OperatorMetricGroup[]	No	Per-operator metric data for backpressure coloring
setActiveOperator	(node: number) => void	Yes	Callback when a node is clicked
activeOperator	number	No	Currently selected operator node ID

Outputs

Name	Type	Description
Graph view	React element	Interactive DAG visualization with React Flow

Usage Examples

<PipelineGraphViewer
  graph={pipeline.graph}
  operatorMetricGroups={operatorMetricGroups}
  setActiveOperator={setActiveOperator}
  activeOperator={activeOperator}
/>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment