Pipeline App

From Scripts to Product

You have working code: data loaders, QUBO builder, simulated annealing solver. But running npx tsx solve-demo.ts and reading console output isn't how anyone evaluates an optimization system.

In this module, you'll build a Next.js dashboard that makes the entire pipeline interactive. This transforms your research prototype into something demonstrable — for a portfolio, a team demo, or a stakeholder presentation.

Dashboard Architecture

┌──────────────────────────────────────────────────────┐
│  Quantum Optimization Dashboard                       │
├──────────────────┬───────────────────────────────────┤
│  Configuration   │  Results                          │
│                  │                                   │
│  Dataset:        │  ┌─────────────────────────────┐  │
│  [Classification]│  │  Selected Features / Nodes   │  │
│  [Social Graph]  │  │  (visual highlight)          │  │
│                  │  └─────────────────────────────┘  │
│  QUBO Weights:   │                                   │
│  alpha: ──●──    │  ┌─────────────────────────────┐  │
│  beta:  ──●──    │  │  Energy Distribution         │  │
│  gamma: ──●──    │  │  (histogram)                 │  │
│                  │  └─────────────────────────────┘  │
│  Solver:         │                                   │
│  Reads:  [100]   │  ┌─────────────────────────────┐  │
│  Steps:  [1000]  │  │  Method Comparison           │  │
│                  │  │  Random | Greedy | SA        │  │
│  [▶ Run Solver]  │  │  0.72  | 0.81   | 0.89      │  │
│                  │  └─────────────────────────────┘  │
└──────────────────┴───────────────────────────────────┘

Key Components

1. Dataset Selector

Toggle between the two pre-loaded datasets. When switching, the QUBO configurator updates — feature selection shows alpha/beta/gamma sliders, graph partition shows a single penalty slider.

2. QUBO Configurator

Sliders with real-time feedback. As you adjust weights, show how many QUBO terms change and the range of coefficients. This builds intuition for how weights map to the energy landscape.

3. Solver Controls

4. Results Panel

For Feature Selection:

For Graph Partitioning:

5. Method Comparison

Side-by-side table:

Technical Notes

Running the Solver in the Browser

The QUBO builder and annealing solver are pure TypeScript with no native dependencies — they can run directly in the browser via a client component. For large problems, consider:

Visualization Libraries

Keep it simple:

No need for D3 or heavy visualization libraries. The data is small enough for pure CSS/SVG.

State Management

Use React state for:

A single useState with a results object works fine for this scale.

What Makes a Good Dashboard

What's Next

In Module 6, you'll connect to real D-Wave hardware (or a faithful mock), run rigorous benchmarks at multiple scales, and package everything as a portfolio piece with honest documentation of limitations.