Implementation:Risingwavelabs Risingwave FragmentDependencyGraph

Property	Value
Component	FragmentDependencyGraph
File	dashboard/components/FragmentDependencyGraph.tsx
Language	TypeScript/TSX
Lines	211
Type	React Component
Framework	React, D3, d3-dag

Overview

FragmentDependencyGraph is a React component that renders an SVG-based directed acyclic graph (DAG) showing dependencies between streaming fragments. It serves as the sidebar navigation element in the dashboard's Fragment Graph view, enabling users to understand and navigate the streaming execution topology. The component uses the d3-dag library with the Zherebko layout algorithm to position fragment nodes vertically, then renders edges (curved paths), node circles, labels, and clickable overlay rectangles using D3 selections. The currently selected fragment and its connected edges are highlighted in blue.

Code Reference

Source Location

dashboard/components/FragmentDependencyGraph.tsx

Signature

export default function FragmentDependencyGraph({
  fragmentDependency,
  svgWidth,
  selectedId,
  onSelectedIdChange,
}: {
  fragmentDependency: Dag<FragmentBox>
  svgWidth: number
  selectedId: string | undefined
  onSelectedIdChange: (id: string) => void | undefined
}): JSX.Element

Import

import FragmentDependencyGraph from "../components/FragmentDependencyGraph"

I/O Contract

Inputs (Props)

Parameter	Type	Description
fragmentDependency	Dag<FragmentBox>	A d3-dag DAG structure containing the fragment dependency topology data
svgWidth	number	The pixel width of the SVG canvas
selectedId	undefined	The ID of the currently selected fragment for highlighting
onSelectedIdChange	undefined	Callback invoked when a fragment is clicked to change selection

Output

Returns an SVG element containing four layers:

• edges - Curved path elements connecting fragment nodes using d3.curveMonotoneY
• nodes - Circle elements representing each fragment
• labels - Text labels showing fragment names, right-aligned
• overlays - Transparent interactive rectangles for mouse hover/click events

Internal Constants

Constant	Value	Description
nodeRadius	5	Radius of node circles in pixels
edgeRadius	12	Edge spacing radius in pixels
MARGIN_X	10	Horizontal margin offset
MARGIN_Y	2	Vertical margin offset
STROKE_WIDTH	3	Stroke width for overlay rectangles

Usage Examples

Basic Usage in Fragment Graph Page

import FragmentDependencyGraph from "../components/FragmentDependencyGraph"

function FragmentGraphPage() {
  const [selectedId, setSelectedId] = useState<string | undefined>()

  return (
    <FragmentDependencyGraph
      fragmentDependency={dagData}
      svgWidth={200}
      selectedId={selectedId}
      onSelectedIdChange={setSelectedId}
    />
  )
}

Layout Algorithm

The component uses the Zherebko layout from d3-dag to compute node positions:

const layout = zherebko().nodeSize([
  nodeRadius * 2,
  (nodeRadius + edgeRadius) * 2,
  nodeRadius,
])
const dag = cloneDeep(fragmentDependency)
const { width, height } = layout(dag)

Selection Highlighting

Selected fragments and their connected edges are highlighted using the Chakra UI theme colors:

const isSelected = (d: DagNode<FragmentBox>) => d.data.id === selectedId

// Edges connected to selected node use blue["500"] with width 2
// Unselected edges use gray["300"] with width 1
// Selected node circles use blue["500"], others use gray["500"]

Related Pages

• Risingwavelabs_Risingwave_Streaming_API_Functions - Provides the streaming data (fragments, relations) that feed into this graph
• Risingwavelabs_Risingwave_BackPressure_Utils - Utility functions for back-pressure visualization used alongside fragment graphs
• Risingwavelabs_Risingwave_Graph_Algorithms - Graph traversal algorithms used for topology analysis
• Risingwavelabs_Risingwave_Relation_Graph_Page - The relation-level graph page that provides a higher-level view of the topology