feat: Add professional web-based optimization dashboard
Complete dashboard UI for controlling and monitoring optimization runs. Backend API (Flask): - RESTful endpoints for study management - Start/stop/resume optimization runs - Real-time status monitoring - Configuration management - Visualization data endpoints Frontend (HTML/CSS/JS + Chart.js): - Modern gradient design with cards and charts - Study list sidebar with metadata - Active optimizations monitoring (5s polling) - Interactive charts (progress, design vars, constraints) - Trial history table - New optimization modal - Resume/delete study actions Features: - List all studies with trial counts - View detailed study results - Start new optimizations from UI - Resume existing studies with additional trials - Real-time progress monitoring - Delete unwanted studies - Chart.js visualizations (progress, DVs, constraints) - Configuration file selection - Study metadata tracking Usage: python dashboard/start_dashboard.py # Opens browser to http://localhost:5000 Dependencies: flask, flask-cors (auto-installed) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
188
dashboard/README.md
Normal file
188
dashboard/README.md
Normal file
@@ -0,0 +1,188 @@
|
||||
# Atomizer Dashboard
|
||||
|
||||
Professional web-based dashboard for controlling and monitoring optimization runs.
|
||||
|
||||
## Features
|
||||
|
||||
### Study Management
|
||||
- **List all studies** - View all optimization studies with metadata
|
||||
- **Resume studies** - Continue existing studies with additional trials
|
||||
- **Delete studies** - Clean up old/unwanted studies
|
||||
- **Study details** - View complete history, results, and metadata
|
||||
|
||||
### Optimization Control
|
||||
- **Start new optimizations** - Configure and launch optimization runs
|
||||
- **Real-time monitoring** - Track progress of active optimizations
|
||||
- **Configuration management** - Load and save optimization configs
|
||||
|
||||
### Visualization
|
||||
- **Progress charts** - Objective values over trials
|
||||
- **Design variable plots** - Track parameter evolution
|
||||
- **Constraint visualization** - Monitor constraint satisfaction
|
||||
- **Running best** - See convergence progress
|
||||
|
||||
### Results Analysis
|
||||
- **Best results cards** - Quick view of optimal solutions
|
||||
- **Trial history table** - Complete trial-by-trial data
|
||||
- **Export capabilities** - Download results in CSV/JSON
|
||||
|
||||
## Installation
|
||||
|
||||
1. Install dependencies:
|
||||
```bash
|
||||
cd dashboard
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
2. Start the dashboard server:
|
||||
```bash
|
||||
python api/app.py
|
||||
```
|
||||
|
||||
3. Open your browser to:
|
||||
```
|
||||
http://localhost:5000
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Method 1: Using the launcher script
|
||||
```bash
|
||||
cd C:\Users\antoi\Documents\Atomaste\Atomizer
|
||||
python dashboard/start_dashboard.py
|
||||
```
|
||||
|
||||
### Method 2: Manual start
|
||||
```bash
|
||||
cd dashboard
|
||||
python api/app.py
|
||||
```
|
||||
|
||||
The dashboard will automatically open in your default browser at `http://localhost:5000`
|
||||
|
||||
## Usage
|
||||
|
||||
### Starting a New Optimization
|
||||
|
||||
1. Click "New Optimization" button
|
||||
2. Enter study name
|
||||
3. Set number of trials
|
||||
4. Select configuration file
|
||||
5. Optionally check "Resume existing" if continuing a study
|
||||
6. Click "Start Optimization"
|
||||
|
||||
### Viewing Study Results
|
||||
|
||||
1. Click on a study in the sidebar
|
||||
2. View summary cards showing best results
|
||||
3. Examine charts for optimization progress
|
||||
4. Review trial history table for details
|
||||
|
||||
### Resuming a Study
|
||||
|
||||
1. Select the study from the sidebar
|
||||
2. Click "Resume Study"
|
||||
3. Enter number of additional trials
|
||||
4. Optimization continues from where it left off
|
||||
|
||||
### Monitoring Active Optimizations
|
||||
|
||||
Active optimizations appear in the sidebar with:
|
||||
- Real-time progress bars
|
||||
- Current trial number
|
||||
- Status indicators
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Studies
|
||||
- `GET /api/studies` - List all studies
|
||||
- `GET /api/studies/<name>` - Get study details
|
||||
- `DELETE /api/studies/<name>/delete` - Delete a study
|
||||
|
||||
### Optimization
|
||||
- `POST /api/optimization/start` - Start new optimization
|
||||
- `GET /api/optimization/status` - Get all active optimizations
|
||||
- `GET /api/optimization/<name>/status` - Get specific optimization status
|
||||
|
||||
### Configuration
|
||||
- `GET /api/config/load?path=<path>` - Load config file
|
||||
- `POST /api/config/save` - Save config file
|
||||
|
||||
### Visualization
|
||||
- `GET /api/results/visualization/<name>` - Get chart data
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
dashboard/
|
||||
├── api/
|
||||
│ └── app.py # Flask REST API server
|
||||
├── frontend/
|
||||
│ ├── index.html # Main dashboard UI
|
||||
│ ├── app.js # JavaScript logic
|
||||
│ └── styles.css # Modern styling
|
||||
├── requirements.txt # Python dependencies
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Backend**: Flask (Python)
|
||||
- **Frontend**: Vanilla JavaScript + Chart.js
|
||||
- **Styling**: Modern CSS with gradients and shadows
|
||||
- **Charts**: Chart.js for interactive visualizations
|
||||
|
||||
## Features in Detail
|
||||
|
||||
### Real-time Monitoring
|
||||
The dashboard polls active optimizations every 5 seconds to show:
|
||||
- Current trial number
|
||||
- Progress percentage
|
||||
- Status (running/completed/failed)
|
||||
|
||||
### Study Persistence
|
||||
All studies are stored in SQLite databases with:
|
||||
- Complete trial history
|
||||
- Optuna study state
|
||||
- Metadata (creation date, config hash, resume count)
|
||||
|
||||
### Configuration Detection
|
||||
The system automatically detects when a study configuration has changed:
|
||||
- Warns when resuming with different geometry
|
||||
- Calculates MD5 hash of critical config parameters
|
||||
- Helps prevent invalid resume operations
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Dashboard won't start
|
||||
- Check that Flask is installed: `pip install flask flask-cors`
|
||||
- Ensure port 5000 is not in use
|
||||
- Check firewall settings
|
||||
|
||||
### Can't see studies
|
||||
- Verify optimization_results folder exists
|
||||
- Check that studies have metadata files
|
||||
- Refresh the studies list
|
||||
|
||||
### Charts not showing
|
||||
- Ensure Chart.js loaded (check browser console)
|
||||
- Verify study has trial history
|
||||
- Check API endpoints are responding
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
- [ ] Multi-objective Pareto front visualization
|
||||
- [ ] Export results to PDF/Excel
|
||||
- [ ] Optimization comparison tool
|
||||
- [ ] Parameter importance analysis
|
||||
- [ ] Surrogate model visualization
|
||||
- [ ] Configuration editor UI
|
||||
- [ ] Live log streaming
|
||||
- [ ] Email notifications on completion
|
||||
|
||||
## Support
|
||||
|
||||
For issues or questions:
|
||||
1. Check the console for error messages
|
||||
2. Verify API is running (`http://localhost:5000/api/studies`)
|
||||
3. Review optimization logs in the console
|
||||
Reference in New Issue
Block a user