Implementation:Risingwavelabs Risingwave BackPressure Utils

Property	Value
Module	backPressure utilities
File	dashboard/components/utils/backPressure.tsx
Language	TypeScript/TSX
Lines	87
Type	Utility Module
Dependencies	@chakra-ui/react, @ctrl/tinycolor

Overview

backPressure.tsx provides utility functions for visualizing back-pressure rates and epoch-based latency through color and width calculations. These functions are core visualization utilities used by both the RelationGraph and FragmentGraph components to color-code edges and nodes based on real-time streaming performance metrics. The module exports four functions: backPressureColor for mapping back-pressure rates to a green-to-red gradient, backPressureWidth for scaling edge widths, epochToUnixMillis for converting RisingWave internal epochs to Unix timestamps, and latencyToColor for mapping latency values to a logarithmic color gradient.

Code Reference

Source Location

dashboard/components/utils/backPressure.tsx

Signature

export function backPressureColor(value: number): string

export function backPressureWidth(value: number, scale: number): number

export function epochToUnixMillis(epoch: number): number

export function latencyToColor(latency_ms: number, baseColor: string): string

Import

import {
  backPressureColor,
  backPressureWidth,
  epochToUnixMillis,
  latencyToColor,
} from "../components/utils/backPressure"

I/O Contract

backPressureColor

Parameter	Type	Description
value	number	Back-pressure rate between 0 and 1 (clamped internally)
Returns	string	Hex color string interpolated across: green[100] -> green[300] -> yellow[400] -> orange[500] -> red[700]

backPressureWidth

Parameter	Type	Description
value	number	Back-pressure rate between 0 and 1 (clamped internally)
scale	number	Scaling factor for the width
Returns	number	Edge width calculated as scale * value + 2

epochToUnixMillis

Parameter	Type	Description
epoch	number	RisingWave internal epoch value
Returns	number	Unix milliseconds, computed as 1617235200000 + epoch / 65536 using the UNIX_RISINGWAVE_DATE_SEC constant

latencyToColor

Parameter	Type	Description
latency_ms	number	Latency in milliseconds
baseColor	string	Base color for low latency values
Returns	string	Hex color string: returns baseColor for latency <= 10s, red[400] for >= 5min, and a logarithmic interpolation between baseColor -> yellow[200] -> orange[300] -> red[400] in between

Usage Examples

Coloring Edges by Back-Pressure

import { backPressureColor, backPressureWidth } from "../components/utils/backPressure"

// Map a back-pressure rate of 0.75 (75%) to a color
const color = backPressureColor(0.75) // returns an orange-ish hex color

// Calculate edge width for display
const width = backPressureWidth(0.75, 10) // returns 9.5

Converting RisingWave Epoch to Unix Time

import { epochToUnixMillis } from "../components/utils/backPressure"

const unixMs = epochToUnixMillis(risingwaveEpoch)
const date = new Date(unixMs)

Coloring Nodes by Latency

import { latencyToColor } from "../components/utils/backPressure"

// Low latency (< 10s) returns the base color
const color1 = latencyToColor(5000, "#E2E8F0") // returns "#E2E8F0"

// High latency (> 5min) returns red
const color2 = latencyToColor(400000, "#E2E8F0") // returns red[400]

// Mid-range latency returns an interpolated color
const color3 = latencyToColor(60000, "#E2E8F0") // returns a yellow/orange shade

Related Pages

• Risingwavelabs_Risingwave_FragmentDependencyGraph - Uses back-pressure utilities for fragment-level edge visualization
• Risingwavelabs_Risingwave_Relation_Graph_Page - Uses these utilities for relation-level graph edge coloring
• Risingwavelabs_Risingwave_StreamingStats_Callbacks - Provides the channel stats data that feeds into these visualization functions