perf-graph

Perf Graph

A web-based visualization tool for Typeberry performance metrics generated by picofuzz.

Overview

Perf Graph displays performance charts for different Typeberry test scenarios:

• Fallback
• Safrole
• Storage
• Storage Light

The tool visualizes block import times and statistical metrics (min, max, mean, median, percentiles) over time.

Prerequisites

• Node.js 20+
• npm

Setup

# Install dependencies
npm install

Usage

Generating Performance Data

First, generate CSV performance data using picofuzz with the --stats flag:

cd ..
npm exec tsx picofuzz/index.ts -s perf-graph/public/fallback.csv data/fallback /tmp/typeberry.sock
npm exec tsx picofuzz/index.ts -s perf-graph/public/safrole.csv data/safrole /tmp/typeberry.sock
npm exec tsx picofuzz/index.ts -s perf-graph/public/storage.csv data/storage /tmp/typeberry.sock
npm exec tsx picofuzz/index.ts -s perf-graph/public/storage_light.csv data/storage_light /tmp/typeberry.sock

Running the Visualization

# Development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Data Format

The tool expects CSV files in the public/ directory with the following format:

projectName,date,count,sum,mean,median,min,max,range,stdDeviation,variance,p1,p5,p10,p25,p50,p75,p90,p95,p99

All timing values are in nanoseconds and will be converted to milliseconds for display.

License

Mozilla Public License 2.0 (MPL-2.0)