Erasure Lab

Interactive Erasure Coding Explorer for Distributed Storage Engineers

Stop guessing. Start seeing the trade-offs.

Live Demo · 中文文档 · Report Bug

---

Why does EC(4,2) vs EC(6,3) matter if they're both 1.5x?

They share the same storage overhead — but everything else is different.

EC(6,3) tolerates 3 simultaneous failures instead of 2. It also demands 9 I/Os per write instead of 6, and needs to read 6 chunks to repair a single lost block instead of 4. These hidden dimensions — repair bandwidth, degraded read latency, cascading failure risk — are the trade-offs that take senior engineers years to internalize.

Erasure Lab makes them visible in seconds.

    🔗 Try it now → ec-lab.steinslab.io    

What is Erasure Lab?

Erasure Lab is a pure-frontend, embeddable, interactive web tool built as an Explorable Explanation — a format where reading and interacting are inseparable. It helps distributed storage engineers build engineering intuition about encoding scheme trade-offs through direct manipulation.

Drag a slider. Kill a node. Watch the math come alive.

Encoding Types Covered

Type	Description
Replication	N-way copies (e.g., 3-replica) — simple, expensive, fast repair
Erasure Coding (EC)	Reed-Solomon style (k data + m parity) — space-efficient, higher I/O
LRC	Local Reconstruction Codes — local parity groups for faster repair

Features

🎛 Interactive Parameter Exploration

Drag sliders to adjust k, m, replica count, AFR, MTTR, and cluster size. Every chart, metric, and formula updates in real-time (<16ms) — no "Calculate" button, no page refresh.

📊 8-Dimensional Trade-off Analysis

Simultaneously visualize the metrics that actually matter:

• Storage Overhead — Capacity bar showing raw vs. effective storage
• Fault Tolerance — Maximum simultaneous failures survived
• Repair Cost — Chunks read per single-block repair
• I/O Fan-out — Write amplification per operation
• Deployment Threshold — Minimum nodes required
• Durability — Annual data loss probability (Markov chain model)
• Read Performance — Degraded-mode read penalty
• Compute Overhead — Encoding/decoding computational cost

🕸 Multi-Scheme Radar Chart

Overlay multiple encoding schemes on a single radar chart. Instantly spot where LRC wins on repair cost but loses on storage, or why 3-replica dominates on read performance.

💀 Node Failure Simulator

Click to "kill" nodes on an interactive grid. Watch the system transition through Safe → Degraded → Data Lost states. Compare how EC(4,2) and EC(6,3) behave under identical failure scenarios.

📐 "Show Your Math" — Transparent Formulas

Every computed result has an expandable formula panel powered by KaTeX. Variables are live-bound to your slider values — change a parameter and watch the math update in real-time. No black boxes.

Includes full Markov chain derivation for durability probability with intermediate state transition visualization.

⚡ Preset Configurations

One-click presets for industry-standard configurations:

• Ceph default EC(4,2)
• HDFS 3-Replica
• Azure LRC(10,4,2)
• And more...

🌐 Additional Highlights

• Dark / Light Theme — Engineer-friendly dark mode by default
• PWA Offline Support — Works completely offline, install as a desktop app
• i18n — English and Chinese interface
• Embeddable — Drop into any wiki, blog, or internal platform via iframe
• Zero Backend — Pure static site, deploy anywhere

Quick Start

Online

Visit ec-lab.steinslab.io — no installation required.

Local Development

git clone https://github.com/user/erasure-lab.git
cd erasure-lab
npm install
npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build    # Production build → dist/
npm run preview  # Preview production build locally

Test

npm test              # Run all tests
npm run test:coverage # With coverage report

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript
Build	Vite 7
State	Zustand (selector-based, <16ms update budget)
Charts	Recharts + Custom SVG
Math	KaTeX (synchronous rendering)
Styling	Tailwind CSS 4 + Shadcn UI
Validation	Zod
Testing	Vitest + Testing Library
PWA	vite-plugin-pwa

Architecture

src/
├── engine/        # Pure math — zero UI dependencies, 100% tested
│   ├── erasureCode.ts    # EC/LRC/Replication calculations
│   ├── probability.ts    # Markov chain durability model
│   └── simulation.ts     # Node failure state machine
├── store/         # Zustand state — the only bridge between engine and UI
├── components/
│   ├── charts/    # RadarChart, NodeGrid, IOFanout, PersistenceFlow...
│   ├── controls/  # ScrubbableSlider, PresetCard, ParameterPanel...
│   ├── math/      # FormulaBlock, MathBlock (KaTeX rendering)
│   └── content/   # Explorable Explanation article renderer
├── content/       # Article content (narrative + embedded interactives)
└── locales/       # i18n translations

Key architectural invariant: engine/ never imports from store/ or components/. UI never calls engine/ directly — all computation flows through the store.

Contributing

Contributions are welcome! Whether it's a bug fix, new encoding scheme, or improved visualization — feel free to open an issue or submit a pull request.

npm run lint          # Lint check
npm run format:check  # Format check
npm test              # All tests must pass

Other Project

This project is an interactive utility for the Distributed Storage Roaming Guide.

Erasure Lab provides interactive engineering intuition. Together, they help you build a distributed storage knowledge system and technical intuition.

License

MIT

---

Built for the engineers who care about every bit.
ec-lab.steinslab.io