Skip to content

feat(explorer): add flamegraph gas view for transaction traces#853

Open
decofe wants to merge 4 commits intomainfrom
georgios/flamegraph-trace-view
Open

feat(explorer): add flamegraph gas view for transaction traces#853
decofe wants to merge 4 commits intomainfrom
georgios/flamegraph-trace-view

Conversation

@decofe
Copy link
Copy Markdown
Member

@decofe decofe commented Apr 16, 2026

Adds a Tenderly-style flamegraph visualization to the transaction trace tab. Users can toggle between Tree and Flamegraph views.

Changes

  • New TxTraceFlamegraph component with absolute-positioned bars proportional to gas usage
  • Tree/Flamegraph view toggle in the trace section
  • Click-to-zoom into subcalls, zoom-out button to reset
  • Hover details panel showing call type, address, function, gas usage/percentage
  • Heat-map coloring: hotter colors for higher gas consumers, red for reverted calls
  • Shared trace tree between Tree and Flamegraph views (no duplicate computation)
  • Exported useTraceTree from TxTraceTree for reuse

Testing

  • Type check: tsc --noEmit — zero errors
  • Lint: biome check — zero errors

Prompted by: Georgios

Co-authored-by: Georgios Konstantopoulos <17802178+gakonst@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d9799-1e24-74db-a4f3-5edcae8c2f79
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 16, 2026

Bundle Size Report

Metric Size Δ Change
Total 4.2 MB -591.1 KB (-12.1%)
Gzip 1.2 MB -96.8 KB (-7.3%)
Brotli 1.1 MB -76.9 KB (-6.7%)
Chunk changes (>1KB)
Chunk Change
assets/KeyManager.js (removed) -477.4 KB
assets/QueryBuilder.js (removed) -423.4 KB
assets/router.js -298.3 KB
assets/wagmi.config.js -283.2 KB
assets/_hash.js -113.0 KB
assets/BaseTanStackRouterDevtoolsPanel-Bmws3ikM.js (removed) -99.5 KB
assets/Intro.js (removed) -66.0 KB
assets/createSsrRpc.js (removed) -43.8 KB
assets/isAddressEqual.js -33.5 KB
assets/Hash.js (removed) -31.0 KB
assets/path.js (removed) -30.6 KB
assets/FloatingTanStackRouterDevtools-B7vy70jP.js (removed) -24.4 KB
assets/_layout.js -22.2 KB
assets/stringify.js (removed) -19.7 KB
assets/address.js -14.1 KB
assets/Address.js -13.1 KB
assets/getAction.js -13.0 KB
assets/base.js (removed) -12.8 KB
assets/utils.js -10.1 KB
assets/token.server.js (removed) -9.8 KB
...and 41 more

Compared against main branch (baseline from 2/4/2026, 5:13:51 PM)

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 16, 2026

Cloudflare Deployments

App Environment Status Preview
explorer devnet [OK] Deployed View Preview
explorer mainnet [OK] Deployed View Preview
explorer testnet [OK] Deployed View Preview
fee-payer devnet [>>] Skipped No changes
fee-payer moderato [>>] Skipped No changes
fee-payer privy [>>] Skipped No changes
og - [>>] Skipped No changes
perf - [>>] Skipped No changes
tokenlist - [>>] Skipped No changes

decofe and others added 3 commits April 16, 2026 19:21
Co-Authored-By: Georgios Konstantopoulos <17802178+gakonst@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d9799-1e24-74db-a4f3-5edcae8c2f79
…storage annotations

- Warm flame color palette (orange → amber → yellow → lime → teal → blue by depth)
- Thicker 32px bars with text shadow for contrast
- Show self-gas percentage on bars and in details panel
- Derive SSTORE/SLOAD counts from prestate diff, show database icon on bars
- Details panel shows total gas, self gas breakdown, and storage operations

Co-Authored-By: Georgios Konstantopoulos <17802178+gakonst@users.noreply.github.com>
…d storage icon

Co-Authored-By: Georgios Konstantopoulos <17802178+gakonst@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d9799-1e24-74db-a4f3-5edcae8c2f79
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants