Optimal Merge Pattern Visualizer

A full-stack web app that demonstrates the Optimal Merge Pattern using a greedy min-heap algorithm. Backend is built with Flask; frontend is React (Vite) with Plotly for interactive visuals.

Project Structure

• server/ — Flask backend API
  • app.py — /visualize endpoint; returns step-by-step merge states
  • requirements.txt — Python dependencies
• visualizer-ui/ — React frontend (Vite)
  • src/App.jsx — UI, calls backend, renders Plotly charts
  • src/App.css — Dark theme styling
  • src/main.jsx, index.html, vite.config.js, package.json

Prerequisites

• Python 3.10+
• Node.js 18+

Run (Windows PowerShell)

1. Backend (Flask)

# From project root
python -m venv .venv
. .venv\Scripts\Activate.ps1
pip install -r server/requirements.txt
python server/app.py

The backend will start on http://127.0.0.1:5000.

2. Frontend (Vite + React)

Open a new terminal window:

# From project root
npm --prefix visualizer-ui install
npm --prefix visualizer-ui run dev

This starts the frontend dev server on http://localhost:3000 and should open your browser.

Usage

• Enter file sizes as a comma-separated list (e.g., 5, 10, 20, 30).
• Click "Run Visualization".
• Use Previous/Next to step through, or Play to auto-advance.
• Left panel shows controls and the running total cost.
• Merge Tree uses a Plotly Treemap; Min-Heap panel shows the current heap sizes.

Notes

• CORS is enabled in the Flask app for local development.
• The backend also exposes /health for a quick status check.

Algorithm

The optimal merge pattern repeatedly merges the two smallest lists/files first. Using a min-heap guarantees O(n log n) behavior for n items. Each merge’s cost is the sum of the two merged sizes; total cost is the sum of all merge costs.