Implementation:Risingwavelabs Risingwave Explain DistSQL Page

Property	Value
Component	Explain
File	dashboard/pages/explain_distsql.tsx
Language	TypeScript/TSX
Lines	76
Type	Next.js Page Component
Framework	React, Chakra UI, styled-components, Graphviz

Overview

explain_distsql.tsx is a dashboard page that renders Graphviz DOT format input as a visual graph, intended for visualizing distributed SQL execution plans. It provides a text area for pasting DOT-formatted graph descriptions and a "Parse" button that triggers rendering via the GraphvizComponent. This enables developers and operators to visually inspect distributed query execution plans by pasting DOT output from EXPLAIN statements. The layout uses styled-components for the container and demo area elements.

Code Reference

Source Location

dashboard/pages/explain_distsql.tsx

Signature

export default function Explain(): JSX.Element

Import

// This is a Next.js page component, routed automatically
// Internal imports:
import GraphvizComponent from "../components/GraphvizComponent"
import Title from "../components/Title"
import NodeType from "./node"

I/O Contract

Internal State

State Variable	Type	Description
input	string	The DOT format string entered by the user
isUpdate	boolean	Flag indicating the input has been modified since last parse
isDotParsed	boolean	Flag indicating the Parse button has been clicked and input should be rendered

User Interaction Flow

1. User types or pastes DOT format text into the textarea
2. handleChange updates input state and sets isUpdate to true
3. User clicks the "Parse" button
4. handleClick sets isDotParsed to true (only if isUpdate is true)
5. GraphvizComponent renders the DOT graph in the demo area

Output

Renders a page with:

• Title - "Render Graphviz Dot format"
• Input area - A 1000px wide, 100px tall textarea for DOT input
• Parse button - Green button (80px x 100px) that triggers graph rendering
• Visualization area - 80vh tall area where the Graphviz graph is rendered

Styled Components

const ContainerDiv = styled(Box)`
  font-family: sans-serif;
  text-align: left;
`

const DemoArea = styled(Box)`
  width: 100%;
  height: 80vh;
`

Usage Examples

Typical Usage Flow

// 1. User navigates to /explain_distsql
// 2. User pastes DOT output from a RisingWave EXPLAIN statement:
//    digraph {
//      A -> B;
//      B -> C;
//      A -> C;
//    }
// 3. User clicks "Parse"
// 4. The graph is rendered visually using Graphviz

Event Handlers

const handleChange = (event: {
  target: { value: SetStateAction<string> }
}) => {
  setInput(event.target.value)
  setIsUpdate(true)
}

const handleClick = () => {
  if (!isUpdate) return
  setIsDotParsed(true)
}

Conditional Rendering

{isDotParsed && input && (
  <Box mt={4}>
    <GraphvizComponent dot={input} />
  </Box>
)}

Related Pages

• Risingwavelabs_Risingwave_Relation_Graph_Page - Another graph visualization page showing relation dependencies
• Risingwavelabs_Risingwave_FragmentDependencyGraph - SVG-based graph rendering for fragment dependencies
• Risingwavelabs_Risingwave_Cluster_Page - Related dashboard page for cluster overview