feat: Add Protocol 13 adaptive optimization, Plotly charts, and dashboard improvements
## Protocol 13: Adaptive Multi-Objective Optimization - Iterative FEA + Neural Network surrogate workflow - Initial FEA sampling, NN training, NN-accelerated search - FEA validation of top NN predictions, retraining loop - adaptive_state.json tracks iteration history and best values - M1 mirror study (V11) with 103 FEA, 3000 NN trials ## Dashboard Visualization Enhancements - Added Plotly.js interactive charts (parallel coords, Pareto, convergence) - Lazy loading with React.lazy() for performance - Code splitting: plotly.js-basic-dist (~1MB vs 3.5MB) - Chart library toggle (Recharts default, Plotly on-demand) - ExpandableChart component for full-screen modal views - ConsoleOutput component for real-time log viewing ## Documentation - Protocol 13 detailed documentation - Dashboard visualization guide - Plotly components README - Updated run-optimization skill with Mode 5 (adaptive) ## Bug Fixes - Fixed TypeScript errors in dashboard components - Fixed Card component to accept ReactNode title - Removed unused imports across components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Antoine
228
docs/06_PROTOCOLS_DETAILED/DASHBOARD_VISUALIZATION.md
Normal file
228
docs/06_PROTOCOLS_DETAILED/DASHBOARD_VISUALIZATION.md
Normal file
@@ -0,0 +1,228 @@
|
||||
# Atomizer Dashboard Visualization Guide
|
||||
|
||||
## Overview
|
||||
|
||||
The Atomizer Dashboard provides real-time visualization of optimization studies with interactive charts, trial history, and study management. It supports two chart libraries:
|
||||
|
||||
- **Recharts** (default): Fast, lightweight, good for real-time updates
|
||||
- **Plotly**: Interactive with zoom, pan, export - better for analysis
|
||||
|
||||
## Starting the Dashboard
|
||||
|
||||
```bash
|
||||
# Quick start (both backend and frontend)
|
||||
python start_dashboard.py
|
||||
|
||||
# Or manually:
|
||||
cd atomizer-dashboard/backend && python -m uvicorn main:app --port 8000
|
||||
cd atomizer-dashboard/frontend && npm run dev
|
||||
```
|
||||
|
||||
Access at: http://localhost:3003
|
||||
|
||||
## Chart Components
|
||||
|
||||
### 1. Pareto Front Plot
|
||||
|
||||
Visualizes the trade-off between objectives in multi-objective optimization.
|
||||
|
||||
**Features:**
|
||||
- 2D scatter plot for 2 objectives
|
||||
- 3D view for 3+ objectives (Plotly only)
|
||||
- Color differentiation: FEA (blue), NN (orange), Pareto (green)
|
||||
- Axis selector for choosing which objectives to display
|
||||
- Hover tooltips with trial details
|
||||
|
||||
**Usage:**
|
||||
- Click points to select trials
|
||||
- Use axis dropdowns to switch objectives
|
||||
- Toggle 2D/3D view (Plotly mode)
|
||||
|
||||
### 2. Parallel Coordinates Plot
|
||||
|
||||
Shows relationships between all design variables and objectives simultaneously.
|
||||
|
||||
**Features:**
|
||||
- Each vertical axis represents a variable or objective
|
||||
- Lines connect values for each trial
|
||||
- Brush filtering: drag on any axis to filter
|
||||
- Color coding by trial source (FEA/NN/Pareto)
|
||||
|
||||
**Usage:**
|
||||
- Drag on axes to create filters
|
||||
- Double-click to reset filters
|
||||
- Hover for trial details
|
||||
|
||||
### 3. Convergence Plot
|
||||
|
||||
Tracks optimization progress over time.
|
||||
|
||||
**Features:**
|
||||
- Scatter points for each trial's objective value
|
||||
- Step line showing best-so-far
|
||||
- Range slider for zooming (Plotly)
|
||||
- FEA vs NN differentiation
|
||||
|
||||
**Metrics Displayed:**
|
||||
- Best value achieved
|
||||
- Current trial value
|
||||
- Total trial count
|
||||
|
||||
### 4. Parameter Importance Chart
|
||||
|
||||
Shows which design variables most influence the objective.
|
||||
|
||||
**Features:**
|
||||
- Horizontal bar chart of correlation coefficients
|
||||
- Color coding: Red (positive), Green (negative)
|
||||
- Sortable by importance or name
|
||||
- Pearson correlation calculation
|
||||
|
||||
**Interpretation:**
|
||||
- Positive correlation: Higher parameter → Higher objective
|
||||
- Negative correlation: Higher parameter → Lower objective
|
||||
- |r| > 0.5: Strong influence
|
||||
|
||||
### 5. Expandable Charts
|
||||
|
||||
All charts support full-screen modal view:
|
||||
|
||||
**Features:**
|
||||
- Click expand icon to open modal
|
||||
- Larger view for detailed analysis
|
||||
- Maintains all interactivity
|
||||
- Close with X or click outside
|
||||
|
||||
## Chart Library Toggle
|
||||
|
||||
Switch between Recharts and Plotly using the header buttons:
|
||||
|
||||
| Feature | Recharts | Plotly |
|
||||
|---------|----------|--------|
|
||||
| Load Speed | Fast | Slower (lazy loaded) |
|
||||
| Interactivity | Basic | Advanced |
|
||||
| Export | Screenshot | PNG/SVG native |
|
||||
| 3D Support | No | Yes |
|
||||
| Real-time Updates | Better | Good |
|
||||
|
||||
**Recommendation:**
|
||||
- Use Recharts during active optimization (real-time)
|
||||
- Switch to Plotly for post-optimization analysis
|
||||
|
||||
## Study Management
|
||||
|
||||
### Study Selection
|
||||
|
||||
- Left sidebar shows all available studies
|
||||
- Click to select and load data
|
||||
- Badge shows study status (running/completed)
|
||||
|
||||
### Metrics Cards
|
||||
|
||||
Top row displays key metrics:
|
||||
- **Trials**: Total completed trials
|
||||
- **Best Value**: Best objective achieved
|
||||
- **Pruned**: Trials pruned by sampler
|
||||
|
||||
### Trial History
|
||||
|
||||
Bottom section shows trial details:
|
||||
- Trial number and objective value
|
||||
- Parameter values (expandable)
|
||||
- Source indicator (FEA/NN)
|
||||
- Sort by performance or chronological
|
||||
|
||||
## Report Viewer
|
||||
|
||||
Access generated study reports:
|
||||
|
||||
1. Click "View Report" button
|
||||
2. Markdown rendered with syntax highlighting
|
||||
3. Supports tables, code blocks, math
|
||||
|
||||
## Console Output
|
||||
|
||||
Real-time log viewer:
|
||||
|
||||
- Shows optimization progress
|
||||
- Error messages highlighted
|
||||
- Auto-scroll to latest
|
||||
- Collapsible panel
|
||||
|
||||
## API Endpoints
|
||||
|
||||
The dashboard uses these REST endpoints:
|
||||
|
||||
```
|
||||
GET /api/optimization/studies # List all studies
|
||||
GET /api/optimization/studies/{id}/status # Study status
|
||||
GET /api/optimization/studies/{id}/history # Trial history
|
||||
GET /api/optimization/studies/{id}/metadata # Study config
|
||||
GET /api/optimization/studies/{id}/pareto # Pareto front
|
||||
GET /api/optimization/studies/{id}/report # Markdown report
|
||||
GET /api/optimization/studies/{id}/console # Log output
|
||||
```
|
||||
|
||||
## WebSocket Updates
|
||||
|
||||
Real-time updates via WebSocket:
|
||||
|
||||
```
|
||||
ws://localhost:8000/api/ws/optimization/{study_id}
|
||||
```
|
||||
|
||||
Events:
|
||||
- `trial_completed`: New trial finished
|
||||
- `trial_pruned`: Trial was pruned
|
||||
- `new_best`: New best value found
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### For Large Studies (1000+ trials)
|
||||
|
||||
1. Use Recharts for real-time monitoring
|
||||
2. Switch to Plotly for final analysis
|
||||
3. Limit displayed trials in parallel coordinates
|
||||
|
||||
### Bundle Optimization
|
||||
|
||||
The dashboard uses:
|
||||
- `plotly.js-basic-dist` (smaller bundle, ~1MB vs 3.5MB)
|
||||
- Lazy loading for Plotly components
|
||||
- Code splitting (vendor, recharts, plotly chunks)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Charts Not Loading
|
||||
|
||||
1. Check backend is running (port 8000)
|
||||
2. Verify API proxy in vite.config.ts
|
||||
3. Check browser console for errors
|
||||
|
||||
### Slow Performance
|
||||
|
||||
1. Switch to Recharts mode
|
||||
2. Reduce trial history limit
|
||||
3. Close unused browser tabs
|
||||
|
||||
### Missing Data
|
||||
|
||||
1. Verify study.db exists
|
||||
2. Check study has completed trials
|
||||
3. Refresh page after new trials
|
||||
|
||||
## Development
|
||||
|
||||
### Adding New Charts
|
||||
|
||||
1. Create component in `src/components/`
|
||||
2. Add Plotly version in `src/components/plotly/`
|
||||
3. Export from `src/components/plotly/index.ts`
|
||||
4. Add to Dashboard.tsx with toggle logic
|
||||
|
||||
### Styling
|
||||
|
||||
Uses Tailwind CSS with dark theme:
|
||||
- Background: `dark-800`, `dark-900`
|
||||
- Text: `dark-100`, `dark-200`
|
||||
- Accent: `primary-500`, `primary-600`
|
||||
Reference in New Issue
Block a user