Frontend Architecture

Technology Stack

Layer	Technology	Version
Framework	React	19
Build tool	Vite + SWC	7.x
CSS utility	UnoCSS	66.x
Graph renderer	Reagraph (Three.js/WebGL)	4.30
WASM runtime	wasm-bindgen	0.2
Package manager	pnpm	latest

Layout

The UI is a full-screen split layout with no document scroll:

• Left 2/3 — Graph visualization canvas (Reagraph WebGL). Shows an interactive 2D or 3D graph. The canvas fills its container absolutely, and overflow: hidden is enforced from html down to prevent scroll.
• Right 1/3 — Control panel with internal scroll. Contains file upload, format and algorithm selection, node inputs, run button, and results panel.

Graph Rendering

Reagraph renders the graph using Three.js with WebGL — node/edge rendering is GPU-accelerated. Up to 3,000 nodes are displayed simultaneously. The renderer supports five layout algorithms:

Layout	Type	Best For
Force 2D	forceDirected2d	General graphs
Force 3D	forceDirected3d	Dense graphs with depth
Circular	circular2d	Ordered sequences
Radial 2D	radialOut2d	Trees, hierarchies
Radial 3D	radialOut3d	Deep hierarchies

Step Animation

Algorithm results are animated step-by-step. An animStep counter increments on a configurable timer:

Speed	Interval
Fast	40ms
Medium	100ms
Slow	280ms

At each tick, visiblePathNodes is computed as the first animStep nodes of the path array. WASM recomputes node styles with this subset, so nodes "light up" progressively.

For Kruskal's MST, the path array is interleaved [u0, v0, u1, v1, ...] pairs — animation reveals one edge pair per step.

Hover Neighbor Highlighting

Hovering a node triggers onNodePointerOver, setting hoverNodeId. The actives prop passed to Reagraph is then [hoverNodeId, ...neighbors] where neighbors come from parsedGraph.neighborMap[hoverNodeId] — a plain array lookup, no Map construction at hover time. All other nodes are dimmed with inactiveOpacity: 0.07.

Node Search

A search input accepts a node ID string. On submit:

1. Checks parsedGraph.nodes for existence
2. Calls graphRef.current.centerGraph([id]) to move the camera to that node
3. Shows the selected node's degree and optional shortest-path distance in an info panel

Graph Metrics Panel

The /graph_metrics endpoint is called on demand. Results displayed:

• Node and edge counts
• Graph density (E / N(N−1))
• Connected component count
• DAG status
• Average out-degree
• Top 5 hub nodes by degree

Results Display

Each algorithm type has a dedicated result renderer:

Algorithm	Display
BFS / DFS	Number of nodes visited
Dijkstra / Bellman-Ford	Distance table; click node to see distance
A*	Path node count
Bellman-Ford (negative cycle)	Warning banner
Kruskal MST	MST edge count; green-highlighted edges
PageRank	Horizontal bar chart of top 15 nodes
SCC	Color-coded component list sorted by size
Topological Sort	Ordered node list (first 50 shown)

Component Architecture

App.tsx
  ├── uploads file via FileReader
  ├── posts to Web Worker → receives ParsedGraph
  └── passes parsedGraph to GraphView

GraphView.tsx
  ├── useMemo: WASM build_path_sets → pathNodeSet, pathEdgeSet, mstEdgeSet
  ├── useMemo: WASM compute_node_styles → graphNodes[] for Reagraph
  ├── useMemo: WASM compute_edge_styles → graphEdges[] for Reagraph
  ├── useEffect: animation timer (animStep++)
  └── GraphCanvas (Reagraph) → renders WebGL scene