[157] Interactive 3D Call Graph & Gas Consumption Heatmap Visualizer

[ayomideadeniran]

Description

Interactive visualizer using Three.js / React Flow to render cross-contract call traces as a directed acyclic graph (DAG), color-coded by CPU instruction count and storage footprint.

Location

frontend/src/components/CallGraphVisualizer.tsx:

// frontend/src/components/CallGraphVisualizer.tsx
// Renders interactive DAG of cross-contract invocations and CPU instruction hotspots
<Canvas><ForceDirectedGraph nodes={callNodes} edges={callEdges} /></Canvas>

Impact

Allows smart contract developers to instantly pinpoint expensive code paths and gas bottlenecks visually.

Required Fix

• Parse Soroban simulation diagnostic events into graph nodes and edges.
• Color-code call nodes using heat gradient (green -> yellow -> red) based on gas cost.
• Support click-to-highlight corresponding line numbers in Monaco Editor.

Reference

Identified during full codebase production readiness audit of soroban-playground.