feat: Phase 1 - Canvas with React Flow

- 8 node types (Model, Solver, DesignVar, Extractor, Objective, Constraint, Algorithm, Surrogate)
- Drag-drop from palette to canvas
- Node configuration panels
- Graph validation with error/warning display
- Intent JSON serialization
- Zustand state management

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-14 20:00:35 -05:00
parent 73a7b9d9f1
commit 7919511bb2
24 changed files with 1915 additions and 6 deletions

View File

@@ -0,0 +1,21 @@
import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
export function CanvasView() {
return (
<div className="h-screen flex flex-col">
<header className="bg-white border-b border-gray-200 px-6 py-4">
<h1 className="text-xl font-bold text-gray-800">
Optimization Canvas
</h1>
<p className="text-sm text-gray-500">
Drag components from the palette to build your optimization workflow
</p>
</header>
<main className="flex-1 overflow-hidden">
<AtomizerCanvas />
</main>
</div>
);
}
export default CanvasView;