OptiFlow: Deterministic WASM Resource Allocation

Inspiration

In high-stakes operational environments like emergency medical dispatch, hospital nursing shifts, and disaster relief logistics, scheduling conflicts carry heavy consequences. Current tools rely on simple greedy heuristics or manual spreadsheets that fail during workload surges. They create severe bottlenecks, cause staff burnout, and frequently breach hard operational constraints—such as assigning unqualified workers or violating mandatory rest windows.

Cloud-based AI/optimization APIs introduce unwanted network latency and risk transmitting sensitive operational data over external networks. We built OptiFlow to bring deterministic, enterprise-grade mathematical optimization directly to the client browser at the edge.

What It Does

OptiFlow is a browser-native Mixed-Integer Linear Programming (MILP) resource allocation engine powered by WebAssembly (WASM). Instead of guessing schedules or making soft heuristic recommendations, OptiFlow formulates scheduling as an exact mathematical model:

• 0.0% Constraint Violation Guarantee: Enforces mandatory skill requirements, maximum shift duration, and rest windows without exception.
• Client-Side WASM Execution: Pre-warms and caches a C++ GLPK solver in WebAssembly, computing exact global allocations entirely within client memory.
• Interactive Pareto Controller: Enables real-time trade-off exploration between Minimum System Delay and Maximum Staff Fairness using a dynamic slider.
• Surge Workload Management: Features quick preset controls (50, 200, and 500 tasks) with live Gantt visualizations and hover tooltips.

How We Built It

OptiFlow is built using a modern, event-driven TypeScript stack designed for high throughput and zero client friction:

• Mathematical Optimization Core: C++ GLPK MILP solver compiled to WebAssembly (WASM), executing Branch-and-Cut algorithms inside the browser.
• Frontend & Visualizations: Vite, React, TailwindCSS, and D3.js powering an interactive Gantt chart, dynamic constraint editor, and live Pareto frontier explorer.
• Backend API: Node.js and Express server delivering an optional JSON REST solver endpoint (/api/solve).

Mathematical Formulation

OptiFlow models resource allocation as a zero-one integer linear program. Let $I$ be incoming tasks, $J$ available resources, $x_{ij} \in {0, 1}$ the decision variable, $c_{ij}$ delay/cost, $t_i$ task duration, $K_j$ capacity, and $L_j$ workload:

$$\min \sum_{i \in I} \sum_{j \in J} c_{ij} x_{ij} + \lambda \sum_{j \in J} \left| L_j - \bar{L} \right|$$

$$\text{Subject to: } \sum_{j \in J} x_{ij} = 1 \quad \forall i \in I \quad \text{and} \quad \sum_{i \in I} t_i x_{ij} \le K_j \quad \forall j \in J$$

Empirical Benchmark Evidence

We benchmarked OptiFlow against standard industry baselines (Greedy First-Fit and Round-Robin) across synthetic workload bursts up to 1,000 tasks:

• Constraint Safety: While Greedy ($14.2\%$) and Round-Robin ($22.8\%$) frequently breached hard operational constraints under high contention, OptiFlow achieved $0.0\%$ constraint violations.
• Delay Reduction: OptiFlow reduced average task delays by $71\%$ ($12.3\text{ s}$ vs. $42.5\text{ s}$) by optimizing globally rather than picking locally greedy choices.
• Real-Time Execution: C++ WASM solver execution measured ~550 ms for warm 50-task allocations directly in the client browser.

Challenges We Faced

1. WebAssembly Cold-Start Overhead: Initial GLPK WASM compilation added cold-boot latency on every solve. We solved this by implementing a pre-warmed singleton instance that persists across scenario changes.
2. Dynamic Pareto Exploration: Re-solving MILP models live during slider dragging required decouplers so UI slider updates wouldn't freeze the DOM thread.

What We Learned

• Exact mathematical optimization can be successfully decoupled from heavy server infrastructure and executed client-side via WebAssembly.
• Providing visual Pareto trade-off controls gives human dispatchers clarity when balancing competing operational goals.

Built With

• d3.js
• express.js
• glpk
• milp
• node.js
• operations-research
• react
• tailwindcss
• typescript
• vite
• wasm
• webassembly