docs: Comprehensive documentation update for Dashboard V3 and Canvas
## Documentation Updates - DASHBOARD.md: Updated to V3.0 with Canvas V3 features, file browser, introspection - DASHBOARD_IMPLEMENTATION_STATUS.md: Marked Canvas V3 features as COMPLETE - CANVAS.md: New comprehensive guide for Canvas Builder V3 with all features - CLAUDE.md: Added dashboard quick reference and Canvas V3 features ## Canvas V3 Features Documented - File Browser: Browse studies directory for model files - Model Introspection: Auto-discover expressions, solver type, dependencies - One-Click Add: Add expressions as design variables instantly - Claude Bug Fixes: WebSocket reconnection, SQL errors resolved - Health Check: /api/health endpoint for monitoring ## Backend Services - NX introspection service with expression discovery - File browser API with type filtering - Claude session management improvements - Context builder enhancements ## Frontend Components - FileBrowser: Modal for file selection with search - IntrospectionPanel: View discovered model information - ExpressionSelector: Dropdown for design variable configuration - Improved chat hooks with reconnection logic ## Plan Documents - Added RALPH_LOOP_CANVAS_V2/V3 implementation records - Added ATOMIZER_DASHBOARD_V2_MASTER_PLAN - Added investigation and sync documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
649
docs/04_USER_GUIDES/CANVAS.md
Normal file
649
docs/04_USER_GUIDES/CANVAS.md
Normal file
@@ -0,0 +1,649 @@
|
||||
# Atomizer Canvas - Visual Workflow Builder
|
||||
|
||||
**Last Updated**: January 16, 2026
|
||||
**Version**: 3.0
|
||||
**Status**: Production
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The Atomizer Canvas is a visual, node-based workflow builder for designing optimization studies. It provides a drag-and-drop interface for configuring FEA optimizations that integrates with Claude to validate and execute workflows.
|
||||
|
||||
### Key Features
|
||||
|
||||
- **Visual Workflow Design**: Drag-and-drop nodes to build optimization pipelines
|
||||
- **Professional Lucide Icons**: Clean, consistent iconography throughout the interface
|
||||
- **Auto-Load from Studies**: Import existing optimization_config.json files
|
||||
- **NX Model Introspection**: Automatically extract expressions from .prt/.sim/.fem files
|
||||
- **File Browser**: Browse and select model files with type filtering
|
||||
- **Expression Search**: Searchable dropdown for design variable configuration
|
||||
- **One-Click Add**: Add discovered expressions as design variables instantly
|
||||
- **Claude Integration**: "Process with Claude" button for AI-assisted study creation
|
||||
- **Responsive Layout**: Full-screen canvas that adapts to window size
|
||||
|
||||
### What's New in V3
|
||||
|
||||
| Feature | Description |
|
||||
|---------|-------------|
|
||||
| **File Browser** | Browse studies directory for .sim/.prt/.fem/.afem files |
|
||||
| **Introspection Panel** | View discovered expressions, extractors, and dependencies |
|
||||
| **One-Click Add** | Add expressions as design variables with a single click |
|
||||
| **Claude Fixes** | Fixed SQL errors, WebSocket reconnection issues |
|
||||
| **Health Check** | `/api/health` endpoint for database monitoring |
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
### Frontend Stack
|
||||
|
||||
| Component | Technology | Purpose |
|
||||
|-----------|------------|---------|
|
||||
| Flow Engine | React Flow | Node-based graph rendering |
|
||||
| State Management | Zustand | Canvas state (nodes, edges, selection) |
|
||||
| Icons | Lucide React | Professional icon library |
|
||||
| Styling | Tailwind CSS | Dark theme (Atomaster palette) |
|
||||
| Chat | WebSocket | Real-time Claude communication |
|
||||
|
||||
### Node Types (8)
|
||||
|
||||
| Node | Icon | Description | Color |
|
||||
|------|------|-------------|-------|
|
||||
| **Model** | `Cube` | NX model file (.prt, .sim, .fem) | Blue |
|
||||
| **Solver** | `Cpu` | Nastran solution type (SOL101, SOL103, etc.) | Violet |
|
||||
| **Design Variable** | `SlidersHorizontal` | Parameter to optimize with bounds | Emerald |
|
||||
| **Extractor** | `FlaskConical` | Physics result extraction (E1-E10) | Cyan |
|
||||
| **Objective** | `Target` | Optimization goal (minimize/maximize) | Rose |
|
||||
| **Constraint** | `ShieldAlert` | Design constraint (upper/lower bounds) | Amber |
|
||||
| **Algorithm** | `BrainCircuit` | Optimization method (TPE, CMA-ES, NSGA-II) | Indigo |
|
||||
| **Surrogate** | `Rocket` | Neural acceleration (optional) | Pink |
|
||||
|
||||
### File Structure
|
||||
|
||||
```
|
||||
atomizer-dashboard/frontend/src/
|
||||
├── components/canvas/
|
||||
│ ├── AtomizerCanvas.tsx # Main canvas component
|
||||
│ ├── nodes/
|
||||
│ │ ├── index.ts # Node type registry
|
||||
│ │ ├── BaseNode.tsx # Base node with handles
|
||||
│ │ ├── ModelNode.tsx # Model file node
|
||||
│ │ ├── SolverNode.tsx # Solver type node
|
||||
│ │ ├── DesignVarNode.tsx # Design variable node
|
||||
│ │ ├── ExtractorNode.tsx # Extractor node
|
||||
│ │ ├── ObjectiveNode.tsx # Objective node
|
||||
│ │ ├── ConstraintNode.tsx # Constraint node
|
||||
│ │ ├── AlgorithmNode.tsx # Algorithm node
|
||||
│ │ └── SurrogateNode.tsx # Surrogate node
|
||||
│ ├── panels/
|
||||
│ │ ├── NodeConfigPanel.tsx # Node configuration sidebar
|
||||
│ │ ├── ValidationPanel.tsx # Validation toast display
|
||||
│ │ ├── ExecuteDialog.tsx # Execute confirmation modal
|
||||
│ │ ├── ChatPanel.tsx # Claude chat sidebar
|
||||
│ │ ├── ConfigImporter.tsx # Study import dialog
|
||||
│ │ ├── TemplateSelector.tsx # Workflow template chooser
|
||||
│ │ ├── FileBrowser.tsx # File picker modal (V3)
|
||||
│ │ ├── IntrospectionPanel.tsx # Model introspection results (V3)
|
||||
│ │ └── ExpressionSelector.tsx # Expression search dropdown (V3)
|
||||
│ └── palette/
|
||||
│ └── NodePalette.tsx # Draggable node palette
|
||||
├── hooks/
|
||||
│ ├── useCanvasStore.ts # Zustand store for canvas state
|
||||
│ └── useCanvasChat.ts # Claude chat integration
|
||||
├── lib/canvas/
|
||||
│ ├── schema.ts # TypeScript type definitions
|
||||
│ ├── intent.ts # Intent serialization (174 lines)
|
||||
│ ├── validation.ts # Graph validation logic
|
||||
│ └── templates.ts # Workflow templates
|
||||
└── pages/
|
||||
└── CanvasView.tsx # Canvas page (/canvas route)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## User Interface
|
||||
|
||||
### Layout
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────────────────────────┐
|
||||
│ Canvas Builder Templates Import│
|
||||
├──────────┬────────────────────────────────────────────┬───────────┤
|
||||
│ │ │ │
|
||||
│ Node │ Canvas Area │ Config │
|
||||
│ Palette │ │ Panel │
|
||||
│ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │
|
||||
│ [Model] │ │Model├──────│Solver├──────│Algo │ │ Label: │
|
||||
│ [Solver]│ └─────┘ └──┬──┘ └─────┘ │ [____] │
|
||||
│ [DVar] │ │ │ │
|
||||
│ [Extr] │ ┌─────┐ ┌──┴──┐ ┌─────┐ │ Type: │
|
||||
│ [Obj] │ │ DVar├──────│Extr ├──────│ Obj │ │ [____] │
|
||||
│ [Const] │ └─────┘ └─────┘ └─────┘ │ │
|
||||
│ [Algo] │ │ │
|
||||
│ [Surr] │ │ │
|
||||
│ │ │ │
|
||||
├──────────┴────────────────────────────────────────────┴───────────┤
|
||||
│ [Validate] [Process with Claude] │
|
||||
└───────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Dark Theme (Atomaster Palette)
|
||||
|
||||
| Element | Color | Tailwind Class |
|
||||
|---------|-------|----------------|
|
||||
| Background | `#050A12` | `bg-dark-900` |
|
||||
| Surface | `#0A1525` | `bg-dark-850` |
|
||||
| Card | `#0F1E32` | `bg-dark-800` |
|
||||
| Border | `#1A2F4A` | `border-dark-700` |
|
||||
| Muted Text | `#5A7A9A` | `text-dark-400` |
|
||||
| Primary | `#00D4E6` | `text-primary-400` |
|
||||
|
||||
---
|
||||
|
||||
## Core Workflows
|
||||
|
||||
### 1. Building a Workflow
|
||||
|
||||
1. **Drag nodes** from the left palette onto the canvas
|
||||
2. **Connect nodes** by dragging from output handle to input handle
|
||||
3. **Configure nodes** by clicking to open the config panel
|
||||
4. **Validate** using the Validate button
|
||||
5. **Process with Claude** to create the study
|
||||
|
||||
### 2. Importing from Existing Study
|
||||
|
||||
1. Click **Import** in the header
|
||||
2. Select the **Load Study** tab
|
||||
3. **Search** for your study by name
|
||||
4. **Select** a study with an optimization_config.json
|
||||
5. Click **Load Study** to populate the canvas
|
||||
|
||||
### 3. Using Templates
|
||||
|
||||
1. Click **Templates** in the header
|
||||
2. Browse available workflow templates:
|
||||
- **Mass Minimization**: Single-objective mass reduction
|
||||
- **Multi-Objective**: Pareto optimization (mass + displacement)
|
||||
- **Turbo Mode**: Neural-accelerated optimization
|
||||
- **Mirror WFE**: Zernike wavefront error optimization
|
||||
- **Frequency Target**: Natural frequency optimization
|
||||
3. Click a template to load it
|
||||
|
||||
### 4. Processing with Claude
|
||||
|
||||
1. Build and configure your workflow
|
||||
2. Click **Validate** to check for errors
|
||||
3. Click **Process with Claude** to:
|
||||
- Validate the configuration against Atomizer protocols
|
||||
- Receive recommendations (method selection, trial count)
|
||||
- Create the optimization study
|
||||
|
||||
---
|
||||
|
||||
## Node Configuration
|
||||
|
||||
### Model Node
|
||||
|
||||
| Field | Description | Example |
|
||||
|-------|-------------|---------|
|
||||
| File Path | Path to NX model | `models/bracket.sim` |
|
||||
| File Type | prt, sim, or fem | `sim` |
|
||||
|
||||
When loading a `.sim` file, the system introspects to find:
|
||||
- Linked `.prt` (geometry part)
|
||||
- Linked `.fem` (FEM file)
|
||||
- Solver type (SOL101, SOL103, etc.)
|
||||
- Available expressions
|
||||
|
||||
### Design Variable Node
|
||||
|
||||
| Field | Description | Example |
|
||||
|-------|-------------|---------|
|
||||
| Expression Name | NX expression to vary | `thickness` |
|
||||
| Min Value | Lower bound | `5.0` |
|
||||
| Max Value | Upper bound | `15.0` |
|
||||
| Unit | Engineering unit | `mm` |
|
||||
|
||||
**Expression Selector**: Click the dropdown to:
|
||||
- **Search** through available expressions
|
||||
- **Filter** by name
|
||||
- **Refresh** to reload from model
|
||||
- **Enter manually** if expression not found
|
||||
|
||||
### Extractor Node
|
||||
|
||||
| Field | Description | Options |
|
||||
|-------|-------------|---------|
|
||||
| Extractor ID | Protocol E1-E10 | E1 (Displacement), E2 (Frequency), etc. |
|
||||
| Name | Display name | `max_displacement` |
|
||||
| Config | Extractor-specific settings | Node ID, component, etc. |
|
||||
|
||||
**Available Extractors** (SYS_12):
|
||||
|
||||
| ID | Physics | Function |
|
||||
|----|---------|----------|
|
||||
| E1 | Displacement | `extract_displacement()` |
|
||||
| E2 | Frequency | `extract_frequency()` |
|
||||
| E3 | Stress | `extract_solid_stress()` |
|
||||
| E4 | BDF Mass | `extract_mass_from_bdf()` |
|
||||
| E5 | CAD Mass | `extract_mass_from_expression()` |
|
||||
| E8 | Zernike | `extract_zernike_coefficients()` |
|
||||
| E9 | Zernike | `extract_zernike_rms()` |
|
||||
| E10 | Zernike | `extract_zernike_wfe()` |
|
||||
|
||||
### Objective Node
|
||||
|
||||
| Field | Description | Options |
|
||||
|-------|-------------|---------|
|
||||
| Name | Objective identifier | `mass`, `displacement` |
|
||||
| Direction | Optimization goal | `minimize`, `maximize` |
|
||||
| Weight | Multi-objective weight | `1.0` (0.0-10.0) |
|
||||
|
||||
### Constraint Node
|
||||
|
||||
| Field | Description | Example |
|
||||
|-------|-------------|---------|
|
||||
| Name | Constraint identifier | `max_stress` |
|
||||
| Operator | Comparison type | `<=`, `>=`, `==` |
|
||||
| Value | Threshold value | `250.0` |
|
||||
|
||||
### Algorithm Node
|
||||
|
||||
| Field | Description | Options |
|
||||
|-------|-------------|---------|
|
||||
| Method | Optimization algorithm | TPE, CMA-ES, NSGA-II, GP-BO |
|
||||
| Max Trials | Number of trials | `100` |
|
||||
| Timeout | Optional time limit | `3600` (seconds) |
|
||||
|
||||
**Method Selection** (SYS_15):
|
||||
|
||||
| Method | Best For | Design Vars | Objectives |
|
||||
|--------|----------|-------------|------------|
|
||||
| TPE | General purpose | 1-10 | 1 |
|
||||
| CMA-ES | Many variables | 5-100 | 1 |
|
||||
| NSGA-II | Multi-objective | 1-20 | 2-4 |
|
||||
| GP-BO | Expensive evaluations | 1-10 | 1 |
|
||||
|
||||
### Surrogate Node
|
||||
|
||||
| Field | Description | Options |
|
||||
|-------|-------------|---------|
|
||||
| Enabled | Toggle acceleration | true/false |
|
||||
| Model Type | Surrogate architecture | MLP, GNN, Auto |
|
||||
| Min Trials | Trials before activation | `20` |
|
||||
|
||||
---
|
||||
|
||||
## File Browser (V3)
|
||||
|
||||
The File Browser allows you to navigate the studies directory to select model files.
|
||||
|
||||
### Features
|
||||
|
||||
- **Directory Navigation**: Browse folder hierarchy with breadcrumbs
|
||||
- **Type Filtering**: Filters to `.sim`, `.prt`, `.fem`, `.afem` by default
|
||||
- **Search**: Quick search by file name
|
||||
- **Single-Click Select**: Click a file to select and close
|
||||
|
||||
### Usage
|
||||
|
||||
1. Click the **Browse** button (folder icon) next to the Model file path input
|
||||
2. Navigate to your study folder
|
||||
3. Click a model file to select it
|
||||
4. The path is automatically populated in the Model node
|
||||
|
||||
---
|
||||
|
||||
## Model Introspection (V3)
|
||||
|
||||
Model Introspection analyzes NX model files to discover expressions, solver type, and dependencies.
|
||||
|
||||
### Features
|
||||
|
||||
- **Expression Discovery**: Lists all expressions found in the model
|
||||
- **Solver Detection**: Infers solver type from file contents (SOL101, SOL103, etc.)
|
||||
- **Dependency Tracking**: Shows related .prt, .fem, .afem files
|
||||
- **Extractor Suggestions**: Recommends extractors based on solver type
|
||||
- **One-Click Add**: Add expressions as Design Variables instantly
|
||||
|
||||
### Usage
|
||||
|
||||
1. Configure a **Model** node with a valid file path
|
||||
2. Click **Introspect Model** button
|
||||
3. View discovered expressions, extractors, and files
|
||||
4. Click **+** next to any expression to add as Design Variable
|
||||
5. Click **+** next to any extractor to add to canvas
|
||||
|
||||
### Discovered Information
|
||||
|
||||
| Section | Contents |
|
||||
|---------|----------|
|
||||
| **Solver Type** | Detected solver (SOL101, SOL103, etc.) |
|
||||
| **Expressions** | Name, current value, unit |
|
||||
| **Extractors** | Available extractors for this solver |
|
||||
| **Dependent Files** | Related .prt, .fem, .afem files |
|
||||
|
||||
---
|
||||
|
||||
## API Integration
|
||||
|
||||
### Backend Endpoints
|
||||
|
||||
#### Study Configuration
|
||||
|
||||
```
|
||||
GET /api/studies/ # List all studies
|
||||
GET /api/studies/{path}/config # Get optimization_config.json
|
||||
```
|
||||
|
||||
#### File Browser (V3)
|
||||
|
||||
```
|
||||
GET /api/files/list # List files in directory
|
||||
Query: path=subdir&types=.sim,.prt,.fem,.afem
|
||||
Returns: { files: [{name, path, isDirectory}], path }
|
||||
```
|
||||
|
||||
#### NX Introspection (V3)
|
||||
|
||||
```
|
||||
POST /api/nx/introspect # Introspect NX model file
|
||||
Body: { file_path: string }
|
||||
Returns: {
|
||||
file_path, file_type, expressions, solver_type,
|
||||
dependent_files, extractors_available, warnings
|
||||
}
|
||||
|
||||
GET /api/nx/expressions # Get expressions from model
|
||||
Query: file_path=path/to/model.sim
|
||||
Returns: { expressions: [{name, value, unit, type}] }
|
||||
```
|
||||
|
||||
#### Health Check (V3)
|
||||
|
||||
```
|
||||
GET /api/health # Check database and service health
|
||||
Returns: { status: "healthy", database: "connected" }
|
||||
```
|
||||
|
||||
### MCP Canvas Tools
|
||||
|
||||
The Canvas integrates with the MCP server for Claude tool use:
|
||||
|
||||
#### `validate_canvas_intent`
|
||||
|
||||
Validates an optimization intent from the Canvas.
|
||||
|
||||
```typescript
|
||||
{
|
||||
intent: OptimizationIntent // The canvas workflow as JSON
|
||||
}
|
||||
// Returns: { valid, errors, warnings, recommendations }
|
||||
```
|
||||
|
||||
#### `execute_canvas_intent`
|
||||
|
||||
Creates an optimization study from a validated intent.
|
||||
|
||||
```typescript
|
||||
{
|
||||
intent: OptimizationIntent,
|
||||
study_name: string, // snake_case name
|
||||
auto_run?: boolean // Start optimization immediately
|
||||
}
|
||||
// Returns: { study_path, config_path, status }
|
||||
```
|
||||
|
||||
#### `interpret_canvas_intent`
|
||||
|
||||
Analyzes a Canvas intent and provides recommendations.
|
||||
|
||||
```typescript
|
||||
{
|
||||
intent: OptimizationIntent
|
||||
}
|
||||
// Returns: {
|
||||
// problem_type: "single-objective" | "multi-objective",
|
||||
// complexity: "low" | "medium" | "high",
|
||||
// recommended_method: string,
|
||||
// recommended_trials: number,
|
||||
// surrogate_recommended: boolean,
|
||||
// notes: string[]
|
||||
// }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## OptimizationIntent Schema
|
||||
|
||||
The Canvas serializes workflows to the `OptimizationIntent` JSON format:
|
||||
|
||||
```typescript
|
||||
interface OptimizationIntent {
|
||||
model: {
|
||||
path: string;
|
||||
type: 'prt' | 'sim' | 'fem';
|
||||
};
|
||||
solver: {
|
||||
type: string; // SOL101, SOL103, etc.
|
||||
};
|
||||
design_variables: Array<{
|
||||
name: string;
|
||||
expression: string;
|
||||
min: number;
|
||||
max: number;
|
||||
unit?: string;
|
||||
}>;
|
||||
extractors: Array<{
|
||||
id: string; // E1, E2, etc.
|
||||
name: string;
|
||||
config?: Record<string, unknown>;
|
||||
}>;
|
||||
objectives: Array<{
|
||||
name: string;
|
||||
extractor: string;
|
||||
direction: 'minimize' | 'maximize';
|
||||
weight?: number;
|
||||
}>;
|
||||
constraints?: Array<{
|
||||
name: string;
|
||||
extractor: string;
|
||||
operator: '<=' | '>=' | '==';
|
||||
value: number;
|
||||
}>;
|
||||
optimization: {
|
||||
method: string;
|
||||
max_trials: number;
|
||||
timeout?: number;
|
||||
};
|
||||
surrogate?: {
|
||||
enabled: boolean;
|
||||
model_type?: string;
|
||||
min_trials?: number;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Validation Rules
|
||||
|
||||
The Canvas validates workflows against these rules:
|
||||
|
||||
### Required Components
|
||||
|
||||
- At least 1 **Model** node
|
||||
- At least 1 **Solver** node
|
||||
- At least 1 **Design Variable** node
|
||||
- At least 1 **Objective** node
|
||||
- At least 1 **Algorithm** node
|
||||
|
||||
### Configuration Rules
|
||||
|
||||
- All nodes must be **configured** (no empty fields)
|
||||
- Design variable **min < max**
|
||||
- Objective must connect to an **Extractor**
|
||||
- Extractor ID must be valid (E1-E10)
|
||||
|
||||
### Connection Rules
|
||||
|
||||
- Model → Solver (required)
|
||||
- Solver → Extractor (required for each extractor)
|
||||
- Extractor → Objective (required for each objective)
|
||||
- Extractor → Constraint (optional)
|
||||
|
||||
### Recommendations
|
||||
|
||||
- Multi-objective (2+ objectives) should use **NSGA-II**
|
||||
- Many variables (5+) may benefit from **surrogate**
|
||||
- High trial count (100+) should consider **neural acceleration**
|
||||
|
||||
---
|
||||
|
||||
## Templates
|
||||
|
||||
### Mass Minimization
|
||||
|
||||
Single-objective mass reduction with stress constraint.
|
||||
|
||||
- **Nodes**: 6 (Model, Solver, DVar, Extractor, Objective, Algorithm)
|
||||
- **Objective**: Minimize mass
|
||||
- **Constraint**: Max stress < limit
|
||||
- **Method**: TPE (100 trials)
|
||||
|
||||
### Multi-Objective
|
||||
|
||||
Pareto optimization for mass vs. displacement trade-off.
|
||||
|
||||
- **Nodes**: 7
|
||||
- **Objectives**: Minimize mass, Minimize displacement
|
||||
- **Method**: NSGA-II (150 trials)
|
||||
|
||||
### Turbo Mode
|
||||
|
||||
Neural-accelerated optimization with surrogate.
|
||||
|
||||
- **Nodes**: 8 (includes Surrogate)
|
||||
- **Objective**: User-defined
|
||||
- **Method**: TPE + MLP Surrogate
|
||||
- **Trials**: 50 FEA + 5000 surrogate
|
||||
|
||||
### Mirror WFE
|
||||
|
||||
Zernike wavefront error optimization for optics.
|
||||
|
||||
- **Nodes**: 7
|
||||
- **Objective**: Minimize WFE (E10)
|
||||
- **Method**: CMA-ES (200 trials)
|
||||
|
||||
### Frequency Target
|
||||
|
||||
Natural frequency optimization with modal analysis.
|
||||
|
||||
- **Nodes**: 6
|
||||
- **Objective**: Target frequency (E2)
|
||||
- **Method**: TPE (100 trials)
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
| Key | Action |
|
||||
|-----|--------|
|
||||
| `Delete` / `Backspace` | Delete selected node |
|
||||
| `Escape` | Deselect all |
|
||||
| `Ctrl+Z` | Undo (future) |
|
||||
| `Ctrl+Shift+Z` | Redo (future) |
|
||||
| `Space` (hold) | Pan canvas |
|
||||
| Scroll | Zoom in/out |
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Canvas Not Visible
|
||||
|
||||
- Ensure you're on the `/canvas` route
|
||||
- Check for JavaScript errors in browser console
|
||||
- Verify React Flow is properly initialized
|
||||
|
||||
### Nodes Not Draggable
|
||||
|
||||
- Check that drag-and-drop events are being captured
|
||||
- Ensure `onDragStart` sets the correct data type
|
||||
|
||||
### Config Panel Not Updating
|
||||
|
||||
- Verify Zustand store is properly connected
|
||||
- Check that `updateNodeData` is being called
|
||||
|
||||
### Claude Chat Not Working
|
||||
|
||||
- Check WebSocket connection status (green indicator)
|
||||
- Verify backend is running on port 8000
|
||||
- Check `/api/chat/` endpoint is accessible
|
||||
|
||||
### Expression Dropdown Empty
|
||||
|
||||
- Ensure a Model node is configured with a file path
|
||||
- Check `/api/nx/expressions` endpoint is working
|
||||
- Try the "Refresh" button to reload expressions
|
||||
|
||||
---
|
||||
|
||||
## Development
|
||||
|
||||
### Running Locally
|
||||
|
||||
```bash
|
||||
# Frontend
|
||||
cd atomizer-dashboard/frontend
|
||||
npm install
|
||||
npm run dev
|
||||
|
||||
# Backend
|
||||
cd atomizer-dashboard/backend
|
||||
python -m uvicorn api.main:app --reload --port 8000
|
||||
|
||||
# MCP Server
|
||||
cd mcp-server/atomizer-tools
|
||||
npm run build
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Building for Production
|
||||
|
||||
```bash
|
||||
# Frontend
|
||||
cd atomizer-dashboard/frontend
|
||||
npm run build
|
||||
|
||||
# MCP Server
|
||||
cd mcp-server/atomizer-tools
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Adding New Node Types
|
||||
|
||||
1. Create node component in `components/canvas/nodes/`
|
||||
2. Add type to `schema.ts`
|
||||
3. Register in `nodes/index.ts`
|
||||
4. Add to `NodePalette.tsx`
|
||||
5. Update validation rules in `validation.ts`
|
||||
6. Add serialization logic to `intent.ts`
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- **React Flow Documentation**: https://reactflow.dev/
|
||||
- **Lucide Icons**: https://lucide.dev/icons/
|
||||
- **Zustand**: https://github.com/pmndrs/zustand
|
||||
- **Atomizer Protocols**: See `docs/protocols/`
|
||||
- **Extractor Library**: See `SYS_12_EXTRACTOR_LIBRARY.md`
|
||||
- **Method Selector**: See `SYS_15_METHOD_SELECTOR.md`
|
||||
|
||||
---
|
||||
|
||||
*Canvas Builder: Design optimizations visually, execute with AI.*
|
||||
@@ -1,6 +1,7 @@
|
||||
# Atomizer Dashboard
|
||||
|
||||
**Last Updated**: December 5, 2025
|
||||
**Last Updated**: January 16, 2026
|
||||
**Version**: 3.0
|
||||
|
||||
---
|
||||
|
||||
@@ -8,6 +9,18 @@
|
||||
|
||||
The Atomizer Dashboard is a real-time web-based interface for monitoring and analyzing multi-objective optimization studies. Built with React, TypeScript, and Tailwind CSS, it provides comprehensive visualization and interaction capabilities for NSGA-II based structural optimization.
|
||||
|
||||
### Major Features
|
||||
|
||||
| Feature | Route | Description |
|
||||
|---------|-------|-------------|
|
||||
| **Canvas Builder** | `/canvas` | Visual node-based workflow designer |
|
||||
| **Live Dashboard** | `/dashboard` | Real-time optimization monitoring |
|
||||
| **Results Viewer** | `/results` | Markdown reports with charts |
|
||||
| **Analytics** | `/analytics` | Cross-study comparison |
|
||||
| **Claude Chat** | Global | AI-powered study creation |
|
||||
|
||||
> **New in V2**: The [Canvas Builder](CANVAS.md) provides a visual, drag-and-drop interface for designing optimization workflows with Claude AI integration.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
@@ -197,6 +210,14 @@ Reusable markdown rendering component:
|
||||
- README.md display with full markdown rendering
|
||||
- New study creation via Claude terminal
|
||||
|
||||
### Canvas Page (`/canvas`) **NEW**
|
||||
- Visual node-based workflow builder
|
||||
- Drag-and-drop node palette with 8 node types
|
||||
- Claude integration for workflow processing
|
||||
- Auto-load from existing studies
|
||||
- Expression search for design variables
|
||||
- See [Canvas Documentation](CANVAS.md) for details
|
||||
|
||||
### Dashboard Page (`/dashboard`)
|
||||
- Real-time live tracker for selected study
|
||||
- Convergence plot, Pareto front, parameter importance
|
||||
@@ -395,45 +416,92 @@ atomizer-dashboard/
|
||||
├── frontend/
|
||||
│ ├── src/
|
||||
│ │ ├── components/
|
||||
│ │ │ ├── ParallelCoordinatesPlot.tsx # Multi-objective visualization
|
||||
│ │ │ ├── ParetoPlot.tsx # Pareto front scatter plot
|
||||
│ │ │ ├── OptimizerPanel.tsx # Strategy information
|
||||
│ │ │ ├── ConvergencePlot.tsx # Enhanced convergence chart
|
||||
│ │ │ ├── ParameterImportanceChart.tsx # Correlation-based importance
|
||||
│ │ │ ├── StudyReportViewer.tsx # Markdown report viewer
|
||||
│ │ │ ├── MarkdownRenderer.tsx # Shared markdown renderer
|
||||
│ │ │ ├── ClaudeTerminal.tsx # Claude AI terminal component
|
||||
│ │ │ ├── GlobalClaudeTerminal.tsx # Global terminal wrapper
|
||||
│ │ │ ├── canvas/ # Canvas Builder V2
|
||||
│ │ │ │ ├── AtomizerCanvas.tsx # Main canvas with React Flow
|
||||
│ │ │ │ ├── nodes/ # 8 node type components
|
||||
│ │ │ │ │ ├── BaseNode.tsx # Base with Lucide icons
|
||||
│ │ │ │ │ ├── ModelNode.tsx # Cube icon
|
||||
│ │ │ │ │ ├── SolverNode.tsx # Cpu icon
|
||||
│ │ │ │ │ ├── DesignVarNode.tsx # SlidersHorizontal icon
|
||||
│ │ │ │ │ ├── ExtractorNode.tsx # FlaskConical icon
|
||||
│ │ │ │ │ ├── ObjectiveNode.tsx # Target icon
|
||||
│ │ │ │ │ ├── ConstraintNode.tsx # ShieldAlert icon
|
||||
│ │ │ │ │ ├── AlgorithmNode.tsx # BrainCircuit icon
|
||||
│ │ │ │ │ └── SurrogateNode.tsx # Rocket icon
|
||||
│ │ │ │ ├── panels/
|
||||
│ │ │ │ │ ├── NodeConfigPanel.tsx # Config sidebar
|
||||
│ │ │ │ │ ├── ValidationPanel.tsx # Validation toast
|
||||
│ │ │ │ │ ├── ChatPanel.tsx # Claude chat
|
||||
│ │ │ │ │ ├── ConfigImporter.tsx # Study browser
|
||||
│ │ │ │ │ └── TemplateSelector.tsx # Workflow templates
|
||||
│ │ │ │ └── palette/
|
||||
│ │ │ │ └── NodePalette.tsx # Draggable palette
|
||||
│ │ │ ├── chat/ # Chat components
|
||||
│ │ │ │ ├── ChatMessage.tsx # Message display
|
||||
│ │ │ │ └── ThinkingIndicator.tsx # Loading indicator
|
||||
│ │ │ ├── ParallelCoordinatesPlot.tsx # Multi-objective viz
|
||||
│ │ │ ├── ParetoPlot.tsx # Pareto front scatter
|
||||
│ │ │ ├── OptimizerPanel.tsx # Strategy info
|
||||
│ │ │ ├── ConvergencePlot.tsx # Convergence chart
|
||||
│ │ │ ├── ParameterImportanceChart.tsx # Parameter importance
|
||||
│ │ │ ├── StudyReportViewer.tsx # Report viewer
|
||||
│ │ │ ├── MarkdownRenderer.tsx # Markdown renderer
|
||||
│ │ │ ├── ClaudeTerminal.tsx # Claude terminal
|
||||
│ │ │ ├── GlobalClaudeTerminal.tsx # Global terminal
|
||||
│ │ │ ├── common/
|
||||
│ │ │ │ ├── Card.tsx # Reusable card component
|
||||
│ │ │ │ └── Button.tsx # Reusable button component
|
||||
│ │ │ │ ├── Card.tsx # Card component
|
||||
│ │ │ │ └── Button.tsx # Button component
|
||||
│ │ │ ├── layout/
|
||||
│ │ │ │ ├── Sidebar.tsx # Navigation sidebar
|
||||
│ │ │ │ └── MainLayout.tsx # Page layout wrapper
|
||||
│ │ │ │ ├── Sidebar.tsx # Navigation
|
||||
│ │ │ │ └── MainLayout.tsx # Layout wrapper
|
||||
│ │ │ └── dashboard/
|
||||
│ │ │ ├── MetricCard.tsx # KPI display
|
||||
│ │ │ └── StudyCard.tsx # Study selector
|
||||
│ │ │ ├── MetricCard.tsx # KPI display
|
||||
│ │ │ └── StudyCard.tsx # Study selector
|
||||
│ │ ├── pages/
|
||||
│ │ │ ├── Home.tsx # Study selection & README
|
||||
│ │ │ ├── Dashboard.tsx # Live optimization tracker
|
||||
│ │ │ ├── Results.tsx # Report viewer
|
||||
│ │ │ └── Analytics.tsx # Cross-study analytics
|
||||
│ │ ├── context/
|
||||
│ │ │ ├── StudyContext.tsx # Global study state
|
||||
│ │ │ └── ClaudeTerminalContext.tsx # Terminal state
|
||||
│ │ │ ├── Home.tsx # Study selection
|
||||
│ │ │ ├── CanvasView.tsx # Canvas builder
|
||||
│ │ │ ├── Dashboard.tsx # Live tracker
|
||||
│ │ │ ├── Results.tsx # Report viewer
|
||||
│ │ │ └── Analytics.tsx # Analytics
|
||||
│ │ ├── hooks/
|
||||
│ │ │ └── useWebSocket.ts # WebSocket connection
|
||||
│ │ │ ├── useCanvasStore.ts # Zustand canvas state
|
||||
│ │ │ ├── useCanvasChat.ts # Canvas chat
|
||||
│ │ │ ├── useChat.ts # WebSocket chat
|
||||
│ │ │ └── useWebSocket.ts # WebSocket base
|
||||
│ │ ├── lib/canvas/
|
||||
│ │ │ ├── schema.ts # Type definitions
|
||||
│ │ │ ├── intent.ts # Intent serialization
|
||||
│ │ │ ├── validation.ts # Graph validation
|
||||
│ │ │ └── templates.ts # Workflow templates
|
||||
│ │ ├── context/
|
||||
│ │ │ ├── StudyContext.tsx # Study state
|
||||
│ │ │ └── ClaudeTerminalContext.tsx # Terminal state
|
||||
│ │ ├── api/
|
||||
│ │ │ └── client.ts # API client
|
||||
│ │ │ └── client.ts # API client
|
||||
│ │ └── types/
|
||||
│ │ └── index.ts # TypeScript types
|
||||
│ │ └── index.ts # TypeScript types
|
||||
│ └── vite.config.ts
|
||||
└── backend/
|
||||
└── api/
|
||||
├── main.py # FastAPI app
|
||||
└── routes/
|
||||
├── optimization.py # Optimization endpoints
|
||||
└── terminal.py # Claude terminal WebSocket
|
||||
├── backend/
|
||||
│ └── api/
|
||||
│ ├── main.py # FastAPI app
|
||||
│ ├── services/
|
||||
│ │ ├── claude_agent.py # Claude API integration
|
||||
│ │ ├── session_manager.py # Session lifecycle
|
||||
│ │ ├── context_builder.py # Context assembly
|
||||
│ │ └── conversation_store.py # SQLite persistence
|
||||
│ └── routes/
|
||||
│ ├── optimization.py # Optimization endpoints
|
||||
│ ├── studies.py # Study config endpoints
|
||||
│ ├── nx.py # NX introspection
|
||||
│ └── terminal.py # Claude WebSocket
|
||||
└── mcp-server/atomizer-tools/
|
||||
└── src/
|
||||
├── index.ts # MCP server entry
|
||||
└── tools/
|
||||
├── canvas.ts # Canvas tools
|
||||
├── study.ts # Study management
|
||||
├── optimization.ts # Optimization control
|
||||
└── analysis.ts # Analysis tools
|
||||
```
|
||||
|
||||
## NPM Dependencies
|
||||
@@ -506,9 +574,40 @@ if (!objectives || !designVariables) return <EmptyState />;
|
||||
|
||||
---
|
||||
|
||||
## Recent Updates (December 2025)
|
||||
## Recent Updates
|
||||
|
||||
### January 2026 (V3.0)
|
||||
|
||||
- [x] **Canvas Builder V3**: Major upgrade with model introspection and Claude fixes
|
||||
- **File Browser**: Browse studies directory for .sim/.prt/.fem/.afem files
|
||||
- **Model Introspection**: Auto-discover expressions, solver type, and dependencies
|
||||
- **One-Click Add**: Add expressions as design variables, add suggested extractors
|
||||
- **Claude Bug Fixes**: Fixed SQL errors, WebSocket reconnection, chat integration
|
||||
- **Connection Flow Fix**: Design variables now correctly flow INTO model nodes
|
||||
- **Health Check Endpoint**: `/api/health` for database status monitoring
|
||||
|
||||
- [x] **Canvas Builder V2**: Complete visual workflow designer with React Flow
|
||||
- 8 node types with professional Lucide icons
|
||||
- Drag-and-drop node palette
|
||||
- Expression search dropdown for design variables
|
||||
- Auto-load from existing optimization_config.json
|
||||
- "Process with Claude" button for AI-assisted study creation
|
||||
- MCP canvas tools (validate, execute, interpret)
|
||||
- Responsive full-screen layout
|
||||
|
||||
- [x] **Backend Services**:
|
||||
- NX introspection service (`/api/nx/introspect`, `/api/nx/expressions`)
|
||||
- File browser API (`/api/files/list`)
|
||||
- Claude session management with SQLite persistence
|
||||
- Context builder for study-aware conversations
|
||||
|
||||
- [x] **Optimization Engine v2.0**: Major code reorganization
|
||||
- New modular structure: `core/`, `nx/`, `study/`, `config/`, `reporting/`, `processors/`
|
||||
- Backwards-compatible imports with deprecation warnings
|
||||
- 120 files reorganized for better maintainability
|
||||
|
||||
### December 2025
|
||||
|
||||
### Completed
|
||||
- [x] **Convergence Plot**: Enhanced with running best, statistics, and gradient fill
|
||||
- [x] **Parameter Importance Chart**: Correlation analysis with color-coded bars
|
||||
- [x] **Study Report Viewer**: Full markdown rendering with KaTeX math support
|
||||
@@ -530,6 +629,7 @@ if (!objectives || !designVariables) return <EmptyState />;
|
||||
- [ ] Hypervolume indicator tracking
|
||||
- [ ] Interactive design variable sliders
|
||||
- [ ] Constraint importance analysis
|
||||
- [ ] Tauri desktop application (Phase 5)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,293 +1,300 @@
|
||||
# Dashboard Implementation Status
|
||||
|
||||
**Last Updated**: November 21, 2025
|
||||
**Last Updated**: January 16, 2026
|
||||
**Version**: 3.0
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Dashboard implementation following the master plan in [DASHBOARD_MASTER_PLAN.md](DASHBOARD_MASTER_PLAN.md), prioritized as:
|
||||
1. **Live Dashboard** (Phase 4) - In Progress
|
||||
2. Study Configurator (Phase 3)
|
||||
3. Results Viewer (Phase 5)
|
||||
The Atomizer Dashboard V2 is now feature-complete with the Canvas Builder. This document tracks implementation status across all major features.
|
||||
|
||||
---
|
||||
|
||||
## Completed: Backend (Phase 1 + 4)
|
||||
## Phase Summary
|
||||
|
||||
### ✅ FastAPI Backend
|
||||
- **Main application**: [atomizer-dashboard/backend/api/main.py](../atomizer-dashboard/backend/api/main.py)
|
||||
- **CORS middleware** configured for local development
|
||||
- **Auto-reload** enabled for development
|
||||
| Phase | Name | Status | Notes |
|
||||
|-------|------|--------|-------|
|
||||
| 0 | MCP Chat Foundation | COMPLETE | Claude API integration, session management |
|
||||
| 1 | Canvas with React Flow | COMPLETE | 8 node types, validation, serialization |
|
||||
| 2 | LLM Intelligence Layer | COMPLETE | Canvas chat hook, MCP canvas tools |
|
||||
| 3 | Bidirectional Sync | COMPLETE | Session persistence, context builder |
|
||||
| 4 | Templates & Polish | COMPLETE | Template selector, config importer |
|
||||
| 5 | Tauri Desktop | PLANNED | Future phase |
|
||||
|
||||
### ✅ REST API Endpoints
|
||||
**File**: [atomizer-dashboard/backend/api/routes/optimization.py](../atomizer-dashboard/backend/api/routes/optimization.py)
|
||||
---
|
||||
|
||||
Implemented endpoints:
|
||||
- `GET /api/optimization/studies` - List all studies
|
||||
- `GET /api/optimization/studies/{study_id}/status` - Get study status
|
||||
- `GET /api/optimization/studies/{study_id}/history` - Get trial history
|
||||
- `GET /api/optimization/studies/{study_id}/pruning` - Get pruning diagnostics
|
||||
## Phase 0: MCP Chat Foundation - COMPLETE
|
||||
|
||||
### ✅ WebSocket Real-Time Updates
|
||||
**File**: [atomizer-dashboard/backend/api/websocket/optimization_stream.py](../atomizer-dashboard/backend/api/websocket/optimization_stream.py)
|
||||
### Backend Services
|
||||
|
||||
| Component | File | Lines | Status |
|
||||
|-----------|------|-------|--------|
|
||||
| Claude Agent | `backend/api/services/claude_agent.py` | 722 | COMPLETE |
|
||||
| CLI Agent | `backend/api/services/claude_cli_agent.py` | 202 | COMPLETE |
|
||||
| Conversation Store | `backend/api/services/conversation_store.py` | 295 | COMPLETE |
|
||||
| Session Manager | `backend/api/services/session_manager.py` | 425 | COMPLETE |
|
||||
| Context Builder | `backend/api/services/context_builder.py` | 246 | COMPLETE |
|
||||
|
||||
### MCP Server
|
||||
|
||||
| Tool | Description | Status |
|
||||
|------|-------------|--------|
|
||||
| `list_studies` | List all studies | COMPLETE |
|
||||
| `get_study_status` | Study details | COMPLETE |
|
||||
| `create_study` | Create from description | COMPLETE |
|
||||
| `run_optimization` | Start optimization | COMPLETE |
|
||||
| `stop_optimization` | Stop optimization | COMPLETE |
|
||||
| `get_trial_data` | Query trials | COMPLETE |
|
||||
| `analyze_convergence` | Convergence metrics | COMPLETE |
|
||||
| `compare_trials` | Side-by-side comparison | COMPLETE |
|
||||
| `get_best_design` | Best design details | COMPLETE |
|
||||
| `generate_report` | Markdown reports | COMPLETE |
|
||||
| `export_data` | CSV/JSON export | COMPLETE |
|
||||
| `explain_physics` | FEA concepts | COMPLETE |
|
||||
| `recommend_method` | Algorithm recommendation | COMPLETE |
|
||||
| `query_extractors` | Extractor list | COMPLETE |
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Canvas with React Flow - COMPLETE
|
||||
|
||||
### Core Components
|
||||
|
||||
| Component | Location | Status |
|
||||
|-----------|----------|--------|
|
||||
| Schema | `frontend/src/lib/canvas/schema.ts` | COMPLETE |
|
||||
| Intent Serializer | `frontend/src/lib/canvas/intent.ts` | COMPLETE |
|
||||
| Validation | `frontend/src/lib/canvas/validation.ts` | COMPLETE |
|
||||
| Templates | `frontend/src/lib/canvas/templates.ts` | COMPLETE |
|
||||
| Canvas Store | `frontend/src/hooks/useCanvasStore.ts` | COMPLETE |
|
||||
| Main Canvas | `frontend/src/components/canvas/AtomizerCanvas.tsx` | COMPLETE |
|
||||
|
||||
### Node Types (8)
|
||||
|
||||
| Node | Icon | Color | Status |
|
||||
|------|------|-------|--------|
|
||||
| Model | `Cube` | Blue | COMPLETE |
|
||||
| Solver | `Cpu` | Violet | COMPLETE |
|
||||
| Design Variable | `SlidersHorizontal` | Emerald | COMPLETE |
|
||||
| Extractor | `FlaskConical` | Cyan | COMPLETE |
|
||||
| Objective | `Target` | Rose | COMPLETE |
|
||||
| Constraint | `ShieldAlert` | Amber | COMPLETE |
|
||||
| Algorithm | `BrainCircuit` | Indigo | COMPLETE |
|
||||
| Surrogate | `Rocket` | Pink | COMPLETE |
|
||||
|
||||
### Panels
|
||||
|
||||
| Panel | Purpose | Status |
|
||||
|-------|---------|--------|
|
||||
| NodeConfigPanel | Configure selected node | COMPLETE |
|
||||
| ValidationPanel | Display validation errors | COMPLETE |
|
||||
| ExecuteDialog | Confirm study creation | COMPLETE |
|
||||
| ChatPanel | Claude chat sidebar | COMPLETE |
|
||||
| ConfigImporter | Load from study/JSON | COMPLETE |
|
||||
| TemplateSelector | Choose workflow template | COMPLETE |
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: LLM Intelligence Layer - COMPLETE
|
||||
|
||||
### Canvas MCP Tools
|
||||
|
||||
| Tool | Purpose | Status |
|
||||
|------|---------|--------|
|
||||
| `validate_canvas_intent` | Validate graph before execution | COMPLETE |
|
||||
| `execute_canvas_intent` | Create study + optionally run | COMPLETE |
|
||||
| `interpret_canvas_intent` | Get recommendations | COMPLETE |
|
||||
|
||||
### Canvas Chat Hook
|
||||
|
||||
| Hook | File | Status |
|
||||
|------|------|--------|
|
||||
| `useCanvasChat` | `frontend/src/hooks/useCanvasChat.ts` | COMPLETE |
|
||||
|
||||
Features:
|
||||
- **File watching** using `watchdog` library
|
||||
- Monitors `optimization_history_incremental.json` for changes
|
||||
- Monitors `pruning_history.json` for pruned trials
|
||||
- **Automatic broadcasting** to all connected clients
|
||||
- **Connection management** (starts/stops observers automatically)
|
||||
|
||||
Message types:
|
||||
- `connected` - Initial connection confirmation
|
||||
- `trial_completed` - New trial finished
|
||||
- `new_best` - New best trial found
|
||||
- `progress` - Progress updates (current/total trials)
|
||||
- `trial_pruned` - Trial pruned (with diagnostics)
|
||||
|
||||
### ✅ Documentation
|
||||
- **Backend README**: [atomizer-dashboard/backend/README.md](../atomizer-dashboard/backend/README.md)
|
||||
- API usage examples
|
||||
- WebSocket message protocol
|
||||
- Testing instructions
|
||||
- `processWithClaude(intent)` - Full processing with study creation
|
||||
- `validateWithClaude(intent)` - Validation only
|
||||
- `analyzeWithClaude(intent)` - Get recommendations
|
||||
|
||||
---
|
||||
|
||||
## ✅ Completed: Enhanced Live Dashboard (Phase 4)
|
||||
## Phase 3: Bidirectional Sync - COMPLETE
|
||||
|
||||
### Live Dashboard Features (dashboard-enhanced.html)
|
||||
**Location**: [atomizer-dashboard/dashboard-enhanced.html](../atomizer-dashboard/dashboard-enhanced.html)
|
||||
|
||||
Fully functional live dashboard with:
|
||||
- ✅ **Real-time WebSocket streaming** - Instant updates on new trials
|
||||
- ✅ **Study discovery** - Auto-detects all active studies
|
||||
- ✅ **Interactive charts** (Chart.js v4.4.0):
|
||||
- Convergence plot (objective value + "best so far" trajectory)
|
||||
- Parameter space scatter plot (2D visualization of design variables)
|
||||
- ✅ **Pruning alerts** - Toast notifications for pruned trials
|
||||
- ✅ **Data export** - Download trial history as JSON or CSV
|
||||
- ✅ **Metric dashboard** - Total trials, best value, average, pruned count
|
||||
- ✅ **Live trial feed** - Last 20 trials with animations
|
||||
- ✅ **Connection monitoring** - WebSocket status indicator
|
||||
- ✅ **Alert system** - Success/warning notifications with auto-dismiss
|
||||
|
||||
**Access**: http://localhost:8000 (after starting backend)
|
||||
| Feature | Status |
|
||||
|---------|--------|
|
||||
| Session persistence (SQLite) | COMPLETE |
|
||||
| Context builder | COMPLETE |
|
||||
| Canvas to Chat bridge | COMPLETE |
|
||||
| Study context loading | COMPLETE |
|
||||
|
||||
---
|
||||
|
||||
## Pending: Full React Frontend (Phase 2)
|
||||
## Phase 4: Templates & Polish - COMPLETE
|
||||
|
||||
### Next Phase Tasks
|
||||
### Templates
|
||||
|
||||
#### High Priority
|
||||
1. **Initialize React + Vite + TypeScript project**
|
||||
2. **Set up TailwindCSS for styling**
|
||||
3. **Create WebSocket connection hook** (`useWebSocket.ts`)
|
||||
4. **Build Dashboard page component** (`Dashboard.tsx`)
|
||||
5. **Migrate charts to Recharts** (React-compatible charting library)
|
||||
6. **Add parameter importance chart** (Protocol 9 data)
|
||||
7. **Add control panel** (start/stop/pause buttons - future)
|
||||
| Template | Description | Complexity |
|
||||
|----------|-------------|------------|
|
||||
| Mass Minimization | Single-objective mass reduction | Simple |
|
||||
| Multi-Objective | Mass + displacement Pareto | Medium |
|
||||
| Turbo Mode | Neural-accelerated | Advanced |
|
||||
| Mirror WFE | Zernike optimization | Advanced |
|
||||
| Frequency Target | Modal analysis | Medium |
|
||||
|
||||
#### Medium Priority
|
||||
8. **Create study list view**
|
||||
9. **Add routing** (React Router)
|
||||
10. **Build Study Configurator page**
|
||||
11. **Build Results Viewer page**
|
||||
### UI Features
|
||||
|
||||
| Feature | Status |
|
||||
|---------|--------|
|
||||
| Lucide icons (no emojis) | COMPLETE |
|
||||
| Dark theme (Atomaster) | COMPLETE |
|
||||
| Responsive layout | COMPLETE |
|
||||
| Full-screen canvas | COMPLETE |
|
||||
| Floating action buttons | COMPLETE |
|
||||
|
||||
---
|
||||
|
||||
## Testing Plan
|
||||
## Canvas V3 Upgrade - COMPLETE
|
||||
|
||||
### Backend Testing
|
||||
All Canvas V2 and V3 features have been implemented:
|
||||
|
||||
| Feature | Status |
|
||||
|---------|--------|
|
||||
| Professional Lucide icons | COMPLETE |
|
||||
| Responsive full-screen layout | COMPLETE |
|
||||
| Auto-load from optimization_config.json | COMPLETE |
|
||||
| NX model introspection endpoint | COMPLETE |
|
||||
| Expression search dropdown | COMPLETE |
|
||||
| "Process with Claude" button | COMPLETE |
|
||||
| MCP canvas tools | COMPLETE |
|
||||
| Backend study list endpoint | COMPLETE |
|
||||
| File browser for model selection | COMPLETE |
|
||||
| Introspection panel (expressions, extractors) | COMPLETE |
|
||||
| Claude WebSocket fixes | COMPLETE |
|
||||
| Health check endpoint | COMPLETE |
|
||||
|
||||
---
|
||||
|
||||
## File Inventory
|
||||
|
||||
### MCP Server (`mcp-server/atomizer-tools/`)
|
||||
|
||||
```
|
||||
src/
|
||||
├── index.ts # Server entry (imports canvasTools)
|
||||
├── tools/
|
||||
│ ├── study.ts # Study management
|
||||
│ ├── optimization.ts # Optimization control
|
||||
│ ├── analysis.ts # Analysis tools
|
||||
│ ├── reporting.ts # Report generation
|
||||
│ ├── physics.ts # Physics explanations
|
||||
│ ├── canvas.ts # Canvas intent tools
|
||||
│ └── admin.ts # Power mode tools
|
||||
└── utils/
|
||||
└── paths.ts # Path utilities
|
||||
```
|
||||
|
||||
### Backend Services (`atomizer-dashboard/backend/api/services/`)
|
||||
|
||||
```
|
||||
__init__.py
|
||||
claude_agent.py # Full Claude API integration (722 lines)
|
||||
claude_cli_agent.py # CLI-based agent (202 lines)
|
||||
conversation_store.py # SQLite persistence (295 lines)
|
||||
session_manager.py # Session lifecycle (425 lines)
|
||||
context_builder.py # Context assembly (246 lines)
|
||||
nx_introspection.py # NX model introspection (NEW)
|
||||
```
|
||||
|
||||
### Backend Routes (`atomizer-dashboard/backend/api/routes/`)
|
||||
|
||||
```
|
||||
__init__.py
|
||||
terminal.py # Claude WebSocket endpoint
|
||||
optimization.py # Optimization API
|
||||
studies.py # Study configuration
|
||||
files.py # File browser API (NEW)
|
||||
nx.py # NX introspection API (NEW)
|
||||
```
|
||||
|
||||
### Frontend Canvas (`atomizer-dashboard/frontend/src/components/canvas/`)
|
||||
|
||||
```
|
||||
AtomizerCanvas.tsx # Main canvas component
|
||||
nodes/
|
||||
├── index.ts # Node type registry
|
||||
├── BaseNode.tsx # Base with multiple handles
|
||||
├── ModelNode.tsx
|
||||
├── SolverNode.tsx
|
||||
├── DesignVarNode.tsx
|
||||
├── ExtractorNode.tsx
|
||||
├── ObjectiveNode.tsx
|
||||
├── ConstraintNode.tsx
|
||||
├── AlgorithmNode.tsx
|
||||
└── SurrogateNode.tsx
|
||||
panels/
|
||||
├── NodeConfigPanel.tsx # Node configuration sidebar
|
||||
├── ValidationPanel.tsx # Validation toast display
|
||||
├── ExecuteDialog.tsx # Execute confirmation modal
|
||||
├── ChatPanel.tsx # Claude chat sidebar
|
||||
├── ConfigImporter.tsx # Study import dialog
|
||||
├── TemplateSelector.tsx # Workflow template chooser
|
||||
├── FileBrowser.tsx # File picker for model selection (NEW)
|
||||
├── IntrospectionPanel.tsx # Model introspection results (NEW)
|
||||
└── ExpressionSelector.tsx # Expression search dropdown (NEW)
|
||||
palette/
|
||||
└── NodePalette.tsx
|
||||
```
|
||||
|
||||
### Canvas Library (`atomizer-dashboard/frontend/src/lib/canvas/`)
|
||||
|
||||
```
|
||||
schema.ts # Type definitions
|
||||
intent.ts # Serialization (174 lines)
|
||||
validation.ts # Graph validation
|
||||
templates.ts # Workflow templates
|
||||
index.ts # Exports
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Build Verification
|
||||
|
||||
#### Manual Test: REST API
|
||||
```bash
|
||||
# Start backend
|
||||
cd atomizer-dashboard/backend
|
||||
python -m uvicorn api.main:app --reload
|
||||
# Build MCP server
|
||||
cd mcp-server/atomizer-tools
|
||||
npm run build
|
||||
# Expected: Compiles without errors
|
||||
|
||||
# Test endpoints
|
||||
curl http://localhost:8000/
|
||||
curl http://localhost:8000/api/optimization/studies
|
||||
curl http://localhost:8000/api/optimization/studies/circular_plate_frequency_tuning/status
|
||||
# Build frontend
|
||||
cd atomizer-dashboard/frontend
|
||||
npm run build
|
||||
# Expected: Compiles without errors
|
||||
```
|
||||
|
||||
#### Manual Test: WebSocket
|
||||
```bash
|
||||
# Install wscat
|
||||
npm install -g wscat
|
||||
### Functional Testing
|
||||
|
||||
# Connect to WebSocket
|
||||
wscat -c ws://localhost:8000/api/ws/optimization/circular_plate_frequency_tuning
|
||||
|
||||
# Or use Python
|
||||
python -c "
|
||||
import asyncio
|
||||
import websockets
|
||||
import json
|
||||
|
||||
async def test():
|
||||
uri = 'ws://localhost:8000/api/ws/optimization/circular_plate_frequency_tuning'
|
||||
async with websockets.connect(uri) as ws:
|
||||
while True:
|
||||
msg = await ws.recv()
|
||||
print(json.loads(msg))
|
||||
|
||||
asyncio.run(test())
|
||||
"
|
||||
```
|
||||
|
||||
### Frontend Testing (Once Built)
|
||||
1. **Unit tests**: React Testing Library
|
||||
2. **Integration tests**: WebSocket mock server
|
||||
3. **E2E tests**: Cypress with running optimization
|
||||
|
||||
---
|
||||
|
||||
## Architecture Summary
|
||||
|
||||
### Backend Stack
|
||||
- **FastAPI** - Async Python web framework
|
||||
- **Uvicorn** - ASGI server
|
||||
- **Watchdog** - File system monitoring
|
||||
- **WebSockets** - Real-time communication
|
||||
|
||||
### Frontend Stack (Planned)
|
||||
- **React 18** - UI framework
|
||||
- **Vite** - Build tool
|
||||
- **TypeScript** - Type safety
|
||||
- **TailwindCSS** - Styling
|
||||
- **Recharts** - Interactive charts
|
||||
- **React Query** - Server state management
|
||||
|
||||
### Communication Flow
|
||||
```
|
||||
optimization_history_incremental.json (file modified)
|
||||
↓
|
||||
Watchdog Observer
|
||||
↓
|
||||
OptimizationFileHandler
|
||||
↓
|
||||
WebSocket Broadcast
|
||||
↓
|
||||
Connected Clients (Frontend)
|
||||
↓
|
||||
React State Update
|
||||
↓
|
||||
UI Re-render (charts, tables)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
### Completed (This Session)
|
||||
1. ✅ Backend complete (FastAPI + WebSocket + file watching)
|
||||
2. ✅ Enhanced live dashboard (charts, pruning alerts, data export)
|
||||
3. ✅ Real-time updates working end-to-end
|
||||
4. ✅ Data export functionality (JSON/CSV)
|
||||
|
||||
### Short Term (Next Session)
|
||||
5. Build full React + Vite + TypeScript frontend
|
||||
6. Migrate to Recharts for React-compatible charts
|
||||
7. Add parameter importance visualization
|
||||
8. Build Study Configurator page
|
||||
9. Build Results Viewer page
|
||||
|
||||
### Medium Term
|
||||
9. Build Study Configurator page
|
||||
10. Build Results Viewer page
|
||||
11. Add LLM chat interface (future)
|
||||
|
||||
---
|
||||
|
||||
## File Structure (Current)
|
||||
|
||||
```
|
||||
atomizer-dashboard/
|
||||
├── backend/ ✅ COMPLETE
|
||||
│ ├── api/
|
||||
│ │ ├── main.py # FastAPI app
|
||||
│ │ ├── routes/
|
||||
│ │ │ ├── __init__.py
|
||||
│ │ │ └── optimization.py # REST endpoints
|
||||
│ │ └── websocket/
|
||||
│ │ ├── __init__.py
|
||||
│ │ └── optimization_stream.py # WebSocket + file watching
|
||||
│ ├── requirements.txt
|
||||
│ └── README.md
|
||||
│
|
||||
├── dashboard-test.html ✅ Basic live dashboard
|
||||
├── dashboard-enhanced.html ✅ Enhanced with charts & export
|
||||
│
|
||||
└── frontend/ ⏳ PLANNED (React app)
|
||||
└── (to be created in next phase)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Known Issues / Limitations
|
||||
|
||||
### Backend
|
||||
1. **Process management**: No start/stop optimization control yet (future enhancement)
|
||||
2. **Authentication**: No auth layer (planned for future phase)
|
||||
3. **Error handling**: Basic error handling, could be improved
|
||||
4. **Testing**: No automated tests yet
|
||||
|
||||
### Frontend
|
||||
- Not yet started
|
||||
|
||||
---
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
### Backend
|
||||
- **File watching overhead**: Minimal (~1ms per event)
|
||||
- **WebSocket latency**: <100ms typical
|
||||
- **Concurrent connections**: Tested with up to 10 clients per study
|
||||
- **Memory**: ~50MB per active observer
|
||||
|
||||
### Expected Frontend Performance
|
||||
- **Initial load**: <2s
|
||||
- **WebSocket message handling**: <50ms
|
||||
- **Chart re-render**: <100ms (with React.memo optimization)
|
||||
- [ ] Navigate to `/canvas`
|
||||
- [ ] Drag nodes from palette
|
||||
- [ ] Connect nodes with edges
|
||||
- [ ] Configure node properties
|
||||
- [ ] Click "Validate"
|
||||
- [ ] Click "Process with Claude"
|
||||
- [ ] Chat panel responds
|
||||
- [ ] Import from existing study
|
||||
- [ ] Select workflow template
|
||||
- [ ] Expression dropdown works
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- [Master Plan](DASHBOARD_MASTER_PLAN.md) - Complete architecture and roadmap
|
||||
- [Backend README](../atomizer-dashboard/backend/README.md) - API documentation
|
||||
- [Session Summary Nov 20](SESSION_SUMMARY_NOV20.md) - Previous work on optimization engine
|
||||
- [Pruning Diagnostics](PRUNING_DIAGNOSTICS.md) - Data available for display
|
||||
- [Canvas Documentation](CANVAS.md) - Full Canvas Builder guide
|
||||
- [Dashboard Overview](DASHBOARD.md) - Main dashboard documentation
|
||||
- [RALPH_LOOP_CANVAS_V2](../plans/RALPH_LOOP_CANVAS_V2.md) - V2 upgrade prompt
|
||||
|
||||
---
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
### Start the Dashboard
|
||||
```bash
|
||||
# Terminal 1: Start backend
|
||||
cd atomizer-dashboard/backend
|
||||
python -m uvicorn api.main:app --reload --host 0.0.0.0 --port 8000
|
||||
|
||||
# Terminal 2: Start an optimization (if needed)
|
||||
cd ../..
|
||||
python studies/circular_plate_frequency_tuning/run_optimization.py
|
||||
|
||||
# Access dashboard at: http://localhost:8000
|
||||
```
|
||||
|
||||
### Features to Test
|
||||
1. **Study Discovery**: Dashboard should auto-load all active studies
|
||||
2. **Study Selection**: Click a study in left sidebar to connect
|
||||
3. **Real-time Updates**: New trials appear instantly (watch for animation)
|
||||
4. **Charts**: Convergence and parameter space plots update in real-time
|
||||
5. **Pruning Alerts**: Orange toast notification when trial is pruned
|
||||
6. **Data Export**: Click "Export JSON" or "Export CSV" buttons
|
||||
7. **WebSocket Log**: Check bottom panel for connection events
|
||||
|
||||
---
|
||||
|
||||
**Status**: ✅ Enhanced live dashboard complete and functional. Ready for React frontend development.
|
||||
*Implementation completed via autonomous Claude Code sessions.*
|
||||
|
||||
Reference in New Issue
Block a user