Process Scheduler Visualizer

An interactive web application for visualizing and comparing CPU scheduling algorithms. Built for students and educators studying operating systems concepts.

Features

Scheduling Algorithms

• FCFS — First Come First Serve (non-preemptive)
• SJF — Shortest Job First (non-preemptive)
• SRTF — Shortest Remaining Time First (preemptive)
• Round Robin — with configurable time quantum
• Priority (Non-preemptive) — lower number = higher priority
• Priority (Preemptive) — preemptive priority scheduling

Simulation

• Play, Pause, Resume, and Step-by-step execution
• Speed control: 1x, 2x, 5x, 10x
• Animated ready queue with queue movement
• Real-time CPU execution panel with progress bar
• Dynamic Gantt chart built during simulation

Analytics

• Per-process statistics: Completion, Turnaround, Waiting, Response time
• Aggregate metrics: Throughput, CPU Utilization
• Algorithm comparison page with Recharts bar charts

UI

• Modern dashboard layout with dark mode
• Responsive design for desktop and mobile
• Algorithm information panel with descriptions, pros/cons, complexity

Tech Stack

Technology	Purpose
React 19	UI framework
Vite 8	Build tool & dev server
Tailwind CSS 4	Styling
Recharts	Comparison charts
React Router	Navigation
Lucide React	Icons

Installation

Prerequisites

• Node.js 18+ (recommended: 20+)
• npm 9+

Setup

# Clone or navigate to the project directory
cd Process_Scheduler_Visualizer

# Install dependencies
npm install

# Start development server
npm run dev

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

Build for Production

npm run build
npm run preview

Project Structure

Process_Scheduler_Visualizer/
├── public/
│   └── favicon.svg
├── src/
│   ├── algorithms/          # Scheduling algorithm implementations
│   │   ├── base.js          # Shared utilities
│   │   ├── fcfs.js
│   │   ├── sjf.js
│   │   ├── srtf.js
│   │   ├── roundRobin.js
│   │   ├── priorityNonPreemptive.js
│   │   ├── priorityPreemptive.js
│   │   └── index.js         # Algorithm registry
│   ├── components/
│   │   ├── common/          # Button, Card, ProgressBar
│   │   ├── charts/          # GanttChart, ComparisonCharts
│   │   ├── input/           # ProcessInputPanel
│   │   ├── info/            # AlgorithmInfo
│   │   ├── layout/          # Header, Layout
│   │   ├── simulation/      # Controls, ReadyQueue, CPU panel
│   │   └── stats/           # StatisticsDashboard
│   ├── context/
│   │   └── SchedulerContext.jsx
│   ├── data/
│   │   ├── algorithmInfo.js
│   │   └── sampleData.js
│   ├── hooks/
│   │   ├── useDarkMode.js
│   │   └── useSimulation.js
│   ├── pages/
│   │   ├── SimulatorPage.jsx
│   │   └── ComparisonPage.jsx
│   ├── utils/
│   │   ├── colors.js
│   │   ├── statistics.js
│   │   └── validation.js
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── vite.config.js
├── package.json
└── README.md

Usage Guide

1. Define Processes

Enter process details in the input panel:

• PID — Process identifier (e.g., P1, P2)
• Arrival Time — When the process arrives (≥ 0)
• Burst Time — CPU time required (> 0)
• Priority — Lower number = higher priority

Use Load Sample for pre-built datasets or Add Process for custom entries.

2. Run Simulation

1. Select a scheduling algorithm from the dropdown
2. Set time quantum (for Round Robin)
3. Click Run to compute and auto-play, or Play to animate step-by-step
4. Use Pause, Resume, Step, and speed controls during playback

3. Compare Algorithms

Navigate to the Compare page to see bar charts comparing all six algorithms on the current process set.

4. Dark Mode

Toggle dark mode using the sun/moon icon in the header. Preference is saved to localStorage.

Sample Datasets

Dataset	Processes	Description
Basic	4	Standard 4-process set
Mixed Arrivals	5	Staggered arrival times
Priority Test	4	Priority-focused scenario
Round Robin Demo	4	Ideal for RR visualization

Priority Convention

Lower priority number = higher priority (e.g., priority 1 beats priority 3).

License

MIT