LeakyBucket · Realtime Network Traffic Simulator

A high-performance, visually immersive simulator for the Leaky Bucket algorithm, featuring a premium analysis suite and real-time 3D packet physics.

---

Key Features

• Dynamic Controls: Real-time manipulation of Inflow Rate, Leak Rate, and Buffer Capacity.
• 3D Visualization: High-fidelity 3D packet flow rendering powered by React Three Fiber.
• Real-time Analysis: A premium dashboard featuring glassmorphism widgets for deep simulation diagnostics.
• Session Spline: Lightweight, high-resolution session tracking from start to stop using Recharts.
• Intelligence Metrics: Real-time calculation of Estimated Latency (Queuing Delay) and Peak Load.
• Feedback: A "Bucket Mood" indicator that provides descriptive, personality-driven status updates.
• Performance First: State management optimized with useRef for 60FPS simulation loops.

---

🛠️ Technical Stack

• Framework: React 19 + Vite 8
• 3D Engine: Three.js via React Three Fiber
• Data Viz: Recharts (for Analysis suite)
• Animations: GSAP & Framer Motion
• Styling: Vanilla CSS

---

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

1. Clone the repository:

   git clone <repository-url>
   cd cn-project

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

---

How it Works

The Leaky Bucket algorithm acts as a buffer. Regardless of how bursty or irregular the incoming traffic is, it exits the bucket at a constant, steady rate.

1. Inflow: New "packets" arrive at the bucket based on the user-defined Inflow Rate.
2. Buffer: If the bucket has space, the packet is queued (adding to Latency).
3. Leak: Packets are removed from the bucket and "transmitted" at the fixed Leak Rate.
4. Analysis: The Analysis Dashboard monitors success rates, dropped packets, and theoretical queuing delay in real-time.

---

Project Structure

├── src/
│   ├── components/
│   │   ├── Visualizer.jsx      # 3D Scene (Three.js)
│   │   ├── ChartPanel.jsx     # MacBook-Style Analysis Suite
│   │   ├── InfoPanel.jsx       # Algorithm Documentation
│   │   └── ...
│   ├── hooks/
│   │   └── useLeakyBucket.js   # Core Algorithm Logic
│   ├── App.jsx                 # Dashboard Entry & State
│   └── main.jsx
└── vite.config.js              # Vite Configuration

---

Analysis Suite Details

Estimated Latency

Calculates the theoretical time a packet spends waiting in the buffer using the formula: Latency = Queue Size / Leak Rate. This provides critical insight into the "lag" introduced by traffic shaping.

Session Spline

A lightweight Recharts implementation that captures the full history of the propagation session from the moment it starts until it stops, providing a high-fidelity visual trace of queue behavior.

---

Developed for Computer Networking project by Saksham Hans and group.