feat: Implement Protocol 13 - Real-Time Dashboard Tracking
Complete implementation of Protocol 13 featuring real-time web dashboard for monitoring multi-objective optimization studies. ## New Features ### Backend (Python) - Real-time tracking system with per-trial JSON writes - New API endpoints for metadata, optimizer state, and Pareto fronts - Unit inference from objective descriptions - Multi-objective support using Optuna's best_trials API ### Frontend (React + TypeScript) - OptimizerPanel: Real-time optimizer state (phase, strategy, progress) - ParetoPlot: Pareto front visualization with normalization toggle - 3 modes: Raw, Min-Max [0-1], Z-Score standardization - Pareto front line connecting optimal points - ParallelCoordinatesPlot: High-dimensional interactive visualization - Objectives + design variables on parallel axes - Click-to-select, hover-to-highlight - Color-coded feasibility - Dynamic units throughout all visualizations ### Documentation - Comprehensive Protocol 13 guide with architecture, data flow, usage ## Files Added - `docs/PROTOCOL_13_DASHBOARD.md` - `atomizer-dashboard/frontend/src/components/OptimizerPanel.tsx` - `atomizer-dashboard/frontend/src/components/ParetoPlot.tsx` - `atomizer-dashboard/frontend/src/components/ParallelCoordinatesPlot.tsx` - `optimization_engine/realtime_tracking.py` ## Files Modified - `atomizer-dashboard/frontend/src/pages/Dashboard.tsx` - `atomizer-dashboard/backend/api/routes/optimization.py` - `optimization_engine/intelligent_optimizer.py` ## Testing - Tested with bracket_stiffness_optimization_V2 (30 trials, 20 Pareto solutions) - Dashboard running on localhost:3001 - All P1 and P2 features verified working 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
490
atomizer-dashboard/backend/api/routes/optimization.py
Normal file
490
atomizer-dashboard/backend/api/routes/optimization.py
Normal file
@@ -0,0 +1,490 @@
|
||||
"""
|
||||
Optimization API endpoints
|
||||
Handles study status, history retrieval, and control operations
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter, HTTPException
|
||||
from pathlib import Path
|
||||
from typing import List, Dict, Optional
|
||||
import json
|
||||
import sys
|
||||
import sqlite3
|
||||
|
||||
# Add project root to path
|
||||
sys.path.append(str(Path(__file__).parent.parent.parent.parent.parent))
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
# Base studies directory
|
||||
STUDIES_DIR = Path(__file__).parent.parent.parent.parent.parent / "studies"
|
||||
|
||||
@router.get("/studies")
|
||||
async def list_studies():
|
||||
"""List all available optimization studies"""
|
||||
try:
|
||||
studies = []
|
||||
if not STUDIES_DIR.exists():
|
||||
return {"studies": []}
|
||||
|
||||
for study_dir in STUDIES_DIR.iterdir():
|
||||
if not study_dir.is_dir():
|
||||
continue
|
||||
|
||||
# Look for optimization config (check multiple locations)
|
||||
config_file = study_dir / "optimization_config.json"
|
||||
if not config_file.exists():
|
||||
config_file = study_dir / "1_setup" / "optimization_config.json"
|
||||
if not config_file.exists():
|
||||
continue
|
||||
|
||||
# Load config
|
||||
with open(config_file) as f:
|
||||
config = json.load(f)
|
||||
|
||||
# Check if results directory exists
|
||||
results_dir = study_dir / "2_results"
|
||||
|
||||
# Check for Optuna database (Protocol 10) or JSON history (other protocols)
|
||||
study_db = results_dir / "study.db"
|
||||
history_file = results_dir / "optimization_history_incremental.json"
|
||||
|
||||
status = "not_started"
|
||||
trial_count = 0
|
||||
best_value = None
|
||||
|
||||
# Protocol 10: Read from Optuna SQLite database
|
||||
if study_db.exists():
|
||||
try:
|
||||
conn = sqlite3.connect(str(study_db))
|
||||
cursor = conn.cursor()
|
||||
|
||||
# Get trial count and status
|
||||
cursor.execute("SELECT COUNT(*) FROM trials WHERE state = 'COMPLETE'")
|
||||
trial_count = cursor.fetchone()[0]
|
||||
|
||||
# Get best trial (for single-objective, or first objective for multi-objective)
|
||||
if trial_count > 0:
|
||||
cursor.execute("""
|
||||
SELECT value FROM trial_values
|
||||
WHERE trial_id IN (
|
||||
SELECT trial_id FROM trials WHERE state = 'COMPLETE'
|
||||
)
|
||||
ORDER BY value ASC
|
||||
LIMIT 1
|
||||
""")
|
||||
result = cursor.fetchone()
|
||||
if result:
|
||||
best_value = result[0]
|
||||
|
||||
conn.close()
|
||||
|
||||
# Determine status
|
||||
total_trials = config.get('optimization_settings', {}).get('n_trials', 50)
|
||||
if trial_count >= total_trials:
|
||||
status = "completed"
|
||||
else:
|
||||
status = "running" # Simplified - would need process check
|
||||
|
||||
except Exception as e:
|
||||
print(f"Warning: Failed to read Optuna database for {study_dir.name}: {e}")
|
||||
status = "error"
|
||||
|
||||
# Legacy: Read from JSON history
|
||||
elif history_file.exists():
|
||||
with open(history_file) as f:
|
||||
history = json.load(f)
|
||||
trial_count = len(history)
|
||||
if history:
|
||||
# Find best trial
|
||||
best_trial = min(history, key=lambda x: x['objective'])
|
||||
best_value = best_trial['objective']
|
||||
|
||||
# Determine status
|
||||
total_trials = config.get('trials', {}).get('n_trials', 50)
|
||||
if trial_count >= total_trials:
|
||||
status = "completed"
|
||||
else:
|
||||
status = "running" # Simplified - would need process check
|
||||
|
||||
# Get total trials from config (supports both formats)
|
||||
total_trials = (
|
||||
config.get('optimization_settings', {}).get('n_trials') or
|
||||
config.get('trials', {}).get('n_trials', 50)
|
||||
)
|
||||
|
||||
studies.append({
|
||||
"id": study_dir.name,
|
||||
"name": study_dir.name.replace("_", " ").title(),
|
||||
"status": status,
|
||||
"progress": {
|
||||
"current": trial_count,
|
||||
"total": total_trials
|
||||
},
|
||||
"best_value": best_value,
|
||||
"target": config.get('target', {}).get('value'),
|
||||
"path": str(study_dir)
|
||||
})
|
||||
|
||||
return {"studies": studies}
|
||||
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to list studies: {str(e)}")
|
||||
|
||||
@router.get("/studies/{study_id}/status")
|
||||
async def get_study_status(study_id: str):
|
||||
"""Get detailed status of a specific study"""
|
||||
try:
|
||||
study_dir = STUDIES_DIR / study_id
|
||||
if not study_dir.exists():
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
|
||||
# Load config (check multiple locations)
|
||||
config_file = study_dir / "optimization_config.json"
|
||||
if not config_file.exists():
|
||||
config_file = study_dir / "1_setup" / "optimization_config.json"
|
||||
|
||||
with open(config_file) as f:
|
||||
config = json.load(f)
|
||||
|
||||
# Check for results
|
||||
results_dir = study_dir / "2_results"
|
||||
study_db = results_dir / "study.db"
|
||||
history_file = results_dir / "optimization_history_incremental.json"
|
||||
|
||||
# Protocol 10: Read from Optuna database
|
||||
if study_db.exists():
|
||||
conn = sqlite3.connect(str(study_db))
|
||||
cursor = conn.cursor()
|
||||
|
||||
# Get trial counts by state
|
||||
cursor.execute("SELECT COUNT(*) FROM trials WHERE state = 'COMPLETE'")
|
||||
trial_count = cursor.fetchone()[0]
|
||||
|
||||
cursor.execute("SELECT COUNT(*) FROM trials WHERE state = 'PRUNED'")
|
||||
pruned_count = cursor.fetchone()[0]
|
||||
|
||||
# Get best trial (first objective for multi-objective)
|
||||
best_trial = None
|
||||
if trial_count > 0:
|
||||
cursor.execute("""
|
||||
SELECT t.trial_id, t.number, tv.value
|
||||
FROM trials t
|
||||
JOIN trial_values tv ON t.trial_id = tv.trial_id
|
||||
WHERE t.state = 'COMPLETE'
|
||||
ORDER BY tv.value ASC
|
||||
LIMIT 1
|
||||
""")
|
||||
result = cursor.fetchone()
|
||||
if result:
|
||||
trial_id, trial_number, best_value = result
|
||||
|
||||
# Get parameters for this trial
|
||||
cursor.execute("""
|
||||
SELECT param_name, param_value
|
||||
FROM trial_params
|
||||
WHERE trial_id = ?
|
||||
""", (trial_id,))
|
||||
params = {row[0]: row[1] for row in cursor.fetchall()}
|
||||
|
||||
best_trial = {
|
||||
"trial_number": trial_number,
|
||||
"objective": best_value,
|
||||
"design_variables": params,
|
||||
"results": {"first_frequency": best_value}
|
||||
}
|
||||
|
||||
conn.close()
|
||||
|
||||
total_trials = config.get('optimization_settings', {}).get('n_trials', 50)
|
||||
status = "completed" if trial_count >= total_trials else "running"
|
||||
|
||||
return {
|
||||
"study_id": study_id,
|
||||
"status": status,
|
||||
"progress": {
|
||||
"current": trial_count,
|
||||
"total": total_trials,
|
||||
"percentage": (trial_count / total_trials * 100) if total_trials > 0 else 0
|
||||
},
|
||||
"best_trial": best_trial,
|
||||
"pruned_trials": pruned_count,
|
||||
"config": config
|
||||
}
|
||||
|
||||
# Legacy: Read from JSON history
|
||||
if not history_file.exists():
|
||||
return {
|
||||
"study_id": study_id,
|
||||
"status": "not_started",
|
||||
"progress": {"current": 0, "total": config.get('trials', {}).get('n_trials', 50)},
|
||||
"config": config
|
||||
}
|
||||
|
||||
with open(history_file) as f:
|
||||
history = json.load(f)
|
||||
|
||||
trial_count = len(history)
|
||||
total_trials = config.get('trials', {}).get('n_trials', 50)
|
||||
|
||||
# Find best trial
|
||||
best_trial = None
|
||||
if history:
|
||||
best_trial = min(history, key=lambda x: x['objective'])
|
||||
|
||||
# Check for pruning data
|
||||
pruning_file = results_dir / "pruning_history.json"
|
||||
pruned_count = 0
|
||||
if pruning_file.exists():
|
||||
with open(pruning_file) as f:
|
||||
pruning_history = json.load(f)
|
||||
pruned_count = len(pruning_history)
|
||||
|
||||
status = "completed" if trial_count >= total_trials else "running"
|
||||
|
||||
return {
|
||||
"study_id": study_id,
|
||||
"status": status,
|
||||
"progress": {
|
||||
"current": trial_count,
|
||||
"total": total_trials,
|
||||
"percentage": (trial_count / total_trials * 100) if total_trials > 0 else 0
|
||||
},
|
||||
"best_trial": best_trial,
|
||||
"pruned_trials": pruned_count,
|
||||
"config": config
|
||||
}
|
||||
|
||||
except FileNotFoundError:
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to get study status: {str(e)}")
|
||||
|
||||
@router.get("/studies/{study_id}/history")
|
||||
async def get_optimization_history(study_id: str, limit: Optional[int] = None):
|
||||
"""Get optimization history (all trials)"""
|
||||
try:
|
||||
study_dir = STUDIES_DIR / study_id
|
||||
results_dir = study_dir / "2_results"
|
||||
study_db = results_dir / "study.db"
|
||||
history_file = results_dir / "optimization_history_incremental.json"
|
||||
|
||||
# Protocol 10: Read from Optuna database
|
||||
if study_db.exists():
|
||||
conn = sqlite3.connect(str(study_db))
|
||||
cursor = conn.cursor()
|
||||
|
||||
# Get all completed trials
|
||||
cursor.execute("""
|
||||
SELECT trial_id, number, datetime_start, datetime_complete
|
||||
FROM trials
|
||||
WHERE state = 'COMPLETE'
|
||||
ORDER BY number DESC
|
||||
""" + (f" LIMIT {limit}" if limit else ""))
|
||||
|
||||
trial_rows = cursor.fetchall()
|
||||
|
||||
trials = []
|
||||
for trial_id, trial_num, start_time, end_time in trial_rows:
|
||||
# Get objectives for this trial
|
||||
cursor.execute("""
|
||||
SELECT value
|
||||
FROM trial_values
|
||||
WHERE trial_id = ?
|
||||
ORDER BY objective
|
||||
""", (trial_id,))
|
||||
values = [row[0] for row in cursor.fetchall()]
|
||||
|
||||
# Get parameters for this trial
|
||||
cursor.execute("""
|
||||
SELECT param_name, param_value
|
||||
FROM trial_params
|
||||
WHERE trial_id = ?
|
||||
""", (trial_id,))
|
||||
params = {}
|
||||
for param_name, param_value in cursor.fetchall():
|
||||
try:
|
||||
params[param_name] = float(param_value) if param_value is not None else None
|
||||
except (ValueError, TypeError):
|
||||
params[param_name] = param_value
|
||||
|
||||
trials.append({
|
||||
"trial_number": trial_num,
|
||||
"objective": values[0] if len(values) > 0 else None, # Primary objective
|
||||
"objectives": values if len(values) > 1 else None, # All objectives for multi-objective
|
||||
"design_variables": params,
|
||||
"results": {"first_frequency": values[0]} if len(values) > 0 else {},
|
||||
"start_time": start_time,
|
||||
"end_time": end_time
|
||||
})
|
||||
|
||||
conn.close()
|
||||
return {"trials": trials}
|
||||
|
||||
# Legacy: Read from JSON history
|
||||
if not history_file.exists():
|
||||
return {"trials": []}
|
||||
|
||||
with open(history_file) as f:
|
||||
history = json.load(f)
|
||||
|
||||
# Apply limit if specified
|
||||
if limit:
|
||||
history = history[-limit:]
|
||||
|
||||
return {"trials": history}
|
||||
|
||||
except FileNotFoundError:
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to get history: {str(e)}")
|
||||
|
||||
@router.get("/studies/{study_id}/pruning")
|
||||
async def get_pruning_history(study_id: str):
|
||||
"""Get pruning diagnostics"""
|
||||
try:
|
||||
study_dir = STUDIES_DIR / study_id
|
||||
pruning_file = study_dir / "2_results" / "pruning_history.json"
|
||||
|
||||
if not pruning_file.exists():
|
||||
return {"pruned_trials": []}
|
||||
|
||||
with open(pruning_file) as f:
|
||||
pruning_history = json.load(f)
|
||||
|
||||
return {"pruned_trials": pruning_history}
|
||||
|
||||
except FileNotFoundError:
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to get pruning history: {str(e)}")
|
||||
|
||||
def _infer_objective_unit(objective: Dict) -> str:
|
||||
"""Infer unit from objective name and description"""
|
||||
name = objective.get("name", "").lower()
|
||||
desc = objective.get("description", "").lower()
|
||||
|
||||
# Common unit patterns
|
||||
if "frequency" in name or "hz" in desc:
|
||||
return "Hz"
|
||||
elif "stiffness" in name or "n/mm" in desc:
|
||||
return "N/mm"
|
||||
elif "mass" in name or "kg" in desc:
|
||||
return "kg"
|
||||
elif "stress" in name or "mpa" in desc or "pa" in desc:
|
||||
return "MPa"
|
||||
elif "displacement" in name or "mm" in desc:
|
||||
return "mm"
|
||||
elif "force" in name or "newton" in desc:
|
||||
return "N"
|
||||
elif "%" in desc or "percent" in desc:
|
||||
return "%"
|
||||
|
||||
# Check if unit is explicitly mentioned in description (e.g., "(N/mm)")
|
||||
import re
|
||||
unit_match = re.search(r'\(([^)]+)\)', desc)
|
||||
if unit_match:
|
||||
return unit_match.group(1)
|
||||
|
||||
return "" # No unit found
|
||||
|
||||
@router.get("/studies/{study_id}/metadata")
|
||||
async def get_study_metadata(study_id: str):
|
||||
"""Read optimization_config.json for objectives, design vars, units (Protocol 13)"""
|
||||
try:
|
||||
study_dir = STUDIES_DIR / study_id
|
||||
if not study_dir.exists():
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
|
||||
# Load config (check multiple locations)
|
||||
config_file = study_dir / "optimization_config.json"
|
||||
if not config_file.exists():
|
||||
config_file = study_dir / "1_setup" / "optimization_config.json"
|
||||
|
||||
if not config_file.exists():
|
||||
raise HTTPException(status_code=404, detail=f"Config file not found for study {study_id}")
|
||||
|
||||
with open(config_file) as f:
|
||||
config = json.load(f)
|
||||
|
||||
# Enhance objectives with inferred units if not present
|
||||
objectives = config.get("objectives", [])
|
||||
for obj in objectives:
|
||||
if "unit" not in obj or not obj["unit"]:
|
||||
obj["unit"] = _infer_objective_unit(obj)
|
||||
|
||||
return {
|
||||
"objectives": objectives,
|
||||
"design_variables": config.get("design_variables", []),
|
||||
"constraints": config.get("constraints", []),
|
||||
"study_name": config.get("study_name", study_id),
|
||||
"description": config.get("description", "")
|
||||
}
|
||||
|
||||
except FileNotFoundError:
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to get study metadata: {str(e)}")
|
||||
|
||||
@router.get("/studies/{study_id}/optimizer-state")
|
||||
async def get_optimizer_state(study_id: str):
|
||||
"""Read realtime optimizer state from intelligent_optimizer/ (Protocol 13)"""
|
||||
try:
|
||||
study_dir = STUDIES_DIR / study_id
|
||||
results_dir = study_dir / "2_results"
|
||||
state_file = results_dir / "intelligent_optimizer" / "optimizer_state.json"
|
||||
|
||||
if not state_file.exists():
|
||||
return {"available": False}
|
||||
|
||||
with open(state_file) as f:
|
||||
state = json.load(f)
|
||||
|
||||
return {"available": True, **state}
|
||||
|
||||
except FileNotFoundError:
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to get optimizer state: {str(e)}")
|
||||
|
||||
@router.get("/studies/{study_id}/pareto-front")
|
||||
async def get_pareto_front(study_id: str):
|
||||
"""Get Pareto-optimal solutions for multi-objective studies (Protocol 13)"""
|
||||
try:
|
||||
study_dir = STUDIES_DIR / study_id
|
||||
results_dir = study_dir / "2_results"
|
||||
study_db = results_dir / "study.db"
|
||||
|
||||
if not study_db.exists():
|
||||
return {"is_multi_objective": False, "pareto_front": []}
|
||||
|
||||
# Import optuna here to avoid loading it for all endpoints
|
||||
import optuna
|
||||
|
||||
storage = optuna.storages.RDBStorage(f"sqlite:///{study_db}")
|
||||
study = optuna.load_study(study_name=study_id, storage=storage)
|
||||
|
||||
# Check if multi-objective
|
||||
if len(study.directions) == 1:
|
||||
return {"is_multi_objective": False, "pareto_front": []}
|
||||
|
||||
# Get Pareto front
|
||||
pareto_trials = study.best_trials
|
||||
|
||||
return {
|
||||
"is_multi_objective": True,
|
||||
"pareto_front": [
|
||||
{
|
||||
"trial_number": t.number,
|
||||
"values": t.values,
|
||||
"params": t.params,
|
||||
"user_attrs": dict(t.user_attrs),
|
||||
"constraint_satisfied": t.user_attrs.get("constraint_satisfied", True)
|
||||
}
|
||||
for t in pareto_trials
|
||||
]
|
||||
}
|
||||
|
||||
except FileNotFoundError:
|
||||
raise HTTPException(status_code=404, detail=f"Study {study_id} not found")
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to get Pareto front: {str(e)}")
|
||||
155
atomizer-dashboard/frontend/src/components/OptimizerPanel.tsx
Normal file
155
atomizer-dashboard/frontend/src/components/OptimizerPanel.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* Intelligent Optimizer Panel - Protocol 13
|
||||
* Displays real-time optimizer state: phase, strategy, progress, confidence
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface OptimizerState {
|
||||
available: boolean;
|
||||
current_phase?: string;
|
||||
current_strategy?: string;
|
||||
trial_number?: number;
|
||||
total_trials?: number;
|
||||
is_multi_objective?: boolean;
|
||||
latest_recommendation?: {
|
||||
strategy: string;
|
||||
confidence: number;
|
||||
reasoning: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function OptimizerPanel({ studyId }: { studyId: string }) {
|
||||
const [state, setState] = useState<OptimizerState | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchState = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/optimization/studies/${studyId}/optimizer-state`);
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
setState(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch optimizer state:', err);
|
||||
setError('Failed to load');
|
||||
}
|
||||
};
|
||||
|
||||
fetchState();
|
||||
const interval = setInterval(fetchState, 1000); // Update every second
|
||||
return () => clearInterval(interval);
|
||||
}, [studyId]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
|
||||
<h3 className="text-lg font-semibold mb-4 text-dark-100">Intelligent Optimizer</h3>
|
||||
<div className="text-dark-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!state?.available) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Format phase name for display
|
||||
const formatPhase = (phase?: string) => {
|
||||
if (!phase) return 'Unknown';
|
||||
return phase
|
||||
.split('_')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
// Format strategy name for display
|
||||
const formatStrategy = (strategy?: string) => {
|
||||
if (!strategy) return 'Not set';
|
||||
return strategy.toUpperCase();
|
||||
};
|
||||
|
||||
const progress = state.trial_number && state.total_trials
|
||||
? (state.trial_number / state.total_trials) * 100
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
|
||||
<h3 className="text-lg font-semibold mb-4 text-dark-100 flex items-center gap-2">
|
||||
Intelligent Optimizer
|
||||
{state.is_multi_objective && (
|
||||
<span className="text-xs bg-purple-500/20 text-purple-300 px-2 py-1 rounded">
|
||||
Multi-Objective
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Phase */}
|
||||
<div>
|
||||
<div className="text-sm text-dark-300 mb-1">Phase</div>
|
||||
<div className="text-lg font-semibold text-primary-400">
|
||||
{formatPhase(state.current_phase)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Strategy */}
|
||||
<div>
|
||||
<div className="text-sm text-dark-300 mb-1">Current Strategy</div>
|
||||
<div className="text-lg font-semibold text-blue-400">
|
||||
{formatStrategy(state.current_strategy)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div>
|
||||
<div className="text-sm text-dark-300 mb-1">Progress</div>
|
||||
<div className="text-lg text-dark-100">
|
||||
{state.trial_number || 0} / {state.total_trials || 0} trials
|
||||
</div>
|
||||
<div className="w-full bg-dark-500 rounded-full h-2 mt-2">
|
||||
<div
|
||||
className="bg-primary-400 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confidence (if available) */}
|
||||
{state.latest_recommendation && (
|
||||
<div>
|
||||
<div className="text-sm text-dark-300 mb-1">Confidence</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-dark-500 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-400 h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${state.latest_recommendation.confidence * 100}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-mono text-dark-200 min-w-[3rem] text-right">
|
||||
{(state.latest_recommendation.confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reasoning (if available) */}
|
||||
{state.latest_recommendation && (
|
||||
<div>
|
||||
<div className="text-sm text-dark-300 mb-1">Reasoning</div>
|
||||
<div className="text-sm text-dark-100 bg-dark-800 rounded p-3 border border-dark-600">
|
||||
{state.latest_recommendation.reasoning}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
/**
|
||||
* Parallel Coordinates Plot - Protocol 13
|
||||
* High-dimensional visualization for multi-objective Pareto fronts
|
||||
* Shows objectives and design variables as parallel axes
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ParetoTrial {
|
||||
trial_number: number;
|
||||
values: number[];
|
||||
params: Record<string, number>;
|
||||
constraint_satisfied?: boolean;
|
||||
}
|
||||
|
||||
interface Objective {
|
||||
name: string;
|
||||
type: 'minimize' | 'maximize';
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
interface DesignVariable {
|
||||
name: string;
|
||||
unit?: string;
|
||||
min: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
interface ParallelCoordinatesPlotProps {
|
||||
paretoData: ParetoTrial[];
|
||||
objectives: Objective[];
|
||||
designVariables: DesignVariable[];
|
||||
}
|
||||
|
||||
export function ParallelCoordinatesPlot({
|
||||
paretoData,
|
||||
objectives,
|
||||
designVariables
|
||||
}: ParallelCoordinatesPlotProps) {
|
||||
const [hoveredTrial, setHoveredTrial] = useState<number | null>(null);
|
||||
const [selectedTrials, setSelectedTrials] = useState<Set<number>>(new Set());
|
||||
|
||||
if (paretoData.length === 0) {
|
||||
return (
|
||||
<div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
|
||||
<h3 className="text-lg font-semibold mb-4 text-dark-100">Parallel Coordinates</h3>
|
||||
<div className="h-96 flex items-center justify-center text-dark-300">
|
||||
No Pareto front data yet
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Combine objectives and design variables into axes
|
||||
const axes: Array<{name: string, label: string, type: 'objective' | 'param'}> = [
|
||||
...objectives.map((obj, i) => ({
|
||||
name: `obj_${i}`,
|
||||
label: obj.unit ? `${obj.name} (${obj.unit})` : obj.name,
|
||||
type: 'objective' as const
|
||||
})),
|
||||
...designVariables.map(dv => ({
|
||||
name: dv.name,
|
||||
label: dv.unit ? `${dv.name} (${dv.unit})` : dv.name,
|
||||
type: 'param' as const
|
||||
}))
|
||||
];
|
||||
|
||||
// Normalize data to [0, 1] for each axis
|
||||
const normalizedData = paretoData.map(trial => {
|
||||
const allValues: number[] = [];
|
||||
|
||||
// Add objectives
|
||||
trial.values.forEach(val => allValues.push(val));
|
||||
|
||||
// Add design variables
|
||||
designVariables.forEach(dv => {
|
||||
allValues.push(trial.params[dv.name]);
|
||||
});
|
||||
|
||||
return {
|
||||
trial_number: trial.trial_number,
|
||||
values: allValues,
|
||||
feasible: trial.constraint_satisfied !== false
|
||||
};
|
||||
});
|
||||
|
||||
// Calculate min/max for each axis
|
||||
const ranges = axes.map((_, axisIdx) => {
|
||||
const values = normalizedData.map(d => d.values[axisIdx]);
|
||||
return {
|
||||
min: Math.min(...values),
|
||||
max: Math.max(...values)
|
||||
};
|
||||
});
|
||||
|
||||
// Normalize function
|
||||
const normalize = (value: number, axisIdx: number): number => {
|
||||
const range = ranges[axisIdx];
|
||||
if (range.max === range.min) return 0.5;
|
||||
return (value - range.min) / (range.max - range.min);
|
||||
};
|
||||
|
||||
// Chart dimensions
|
||||
const width = 800;
|
||||
const height = 400;
|
||||
const margin = { top: 80, right: 20, bottom: 40, left: 20 };
|
||||
const plotWidth = width - margin.left - margin.right;
|
||||
const plotHeight = height - margin.top - margin.bottom;
|
||||
|
||||
const axisSpacing = plotWidth / (axes.length - 1);
|
||||
|
||||
// Toggle trial selection
|
||||
const toggleTrial = (trialNum: number) => {
|
||||
const newSelected = new Set(selectedTrials);
|
||||
if (newSelected.has(trialNum)) {
|
||||
newSelected.delete(trialNum);
|
||||
} else {
|
||||
newSelected.add(trialNum);
|
||||
}
|
||||
setSelectedTrials(newSelected);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-dark-100">
|
||||
Parallel Coordinates ({paretoData.length} solutions)
|
||||
</h3>
|
||||
{selectedTrials.size > 0 && (
|
||||
<button
|
||||
onClick={() => setSelectedTrials(new Set())}
|
||||
className="text-xs px-3 py-1 bg-dark-600 hover:bg-dark-500 rounded text-dark-200"
|
||||
>
|
||||
Clear Selection ({selectedTrials.size})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<svg width={width} height={height} className="overflow-visible">
|
||||
<g transform={`translate(${margin.left}, ${margin.top})`}>
|
||||
{/* Draw axes */}
|
||||
{axes.map((axis, i) => {
|
||||
const x = i * axisSpacing;
|
||||
return (
|
||||
<g key={axis.name} transform={`translate(${x}, 0)`}>
|
||||
{/* Axis line */}
|
||||
<line
|
||||
y1={0}
|
||||
y2={plotHeight}
|
||||
stroke="#475569"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
|
||||
{/* Axis label */}
|
||||
<text
|
||||
y={-10}
|
||||
textAnchor="middle"
|
||||
fill="#94a3b8"
|
||||
fontSize={12}
|
||||
className="select-none"
|
||||
transform={`rotate(-45, 0, -10)`}
|
||||
>
|
||||
{axis.label}
|
||||
</text>
|
||||
|
||||
{/* Min/max labels */}
|
||||
<text
|
||||
y={plotHeight + 15}
|
||||
textAnchor="middle"
|
||||
fill="#64748b"
|
||||
fontSize={10}
|
||||
>
|
||||
{ranges[i].min.toFixed(2)}
|
||||
</text>
|
||||
<text
|
||||
y={-25}
|
||||
textAnchor="middle"
|
||||
fill="#64748b"
|
||||
fontSize={10}
|
||||
>
|
||||
{ranges[i].max.toFixed(2)}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Draw lines for each trial */}
|
||||
{normalizedData.map(trial => {
|
||||
const isHovered = hoveredTrial === trial.trial_number;
|
||||
const isSelected = selectedTrials.has(trial.trial_number);
|
||||
const isHighlighted = isHovered || isSelected;
|
||||
|
||||
// Build path
|
||||
const pathData = axes.map((_, i) => {
|
||||
const x = i * axisSpacing;
|
||||
const normalizedY = normalize(trial.values[i], i);
|
||||
const y = plotHeight * (1 - normalizedY);
|
||||
return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
|
||||
}).join(' ');
|
||||
|
||||
return (
|
||||
<path
|
||||
key={trial.trial_number}
|
||||
d={pathData}
|
||||
fill="none"
|
||||
stroke={
|
||||
isSelected ? '#fbbf24' :
|
||||
trial.feasible ? '#10b981' : '#ef4444'
|
||||
}
|
||||
strokeWidth={isHighlighted ? 2.5 : 1}
|
||||
opacity={
|
||||
selectedTrials.size > 0
|
||||
? (isSelected ? 1 : 0.1)
|
||||
: (isHighlighted ? 1 : 0.4)
|
||||
}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="transition-all duration-200 cursor-pointer"
|
||||
onMouseEnter={() => setHoveredTrial(trial.trial_number)}
|
||||
onMouseLeave={() => setHoveredTrial(null)}
|
||||
onClick={() => toggleTrial(trial.trial_number)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Hover tooltip */}
|
||||
{hoveredTrial !== null && (
|
||||
<g transform={`translate(${plotWidth + 10}, 20)`}>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={120}
|
||||
height={60}
|
||||
fill="#1e293b"
|
||||
stroke="#334155"
|
||||
strokeWidth={1}
|
||||
rx={4}
|
||||
/>
|
||||
<text x={10} y={20} fill="#e2e8f0" fontSize={12} fontWeight="bold">
|
||||
Trial #{hoveredTrial}
|
||||
</text>
|
||||
<text x={10} y={38} fill="#94a3b8" fontSize={10}>
|
||||
Click to select
|
||||
</text>
|
||||
<text x={10} y={52} fill="#94a3b8" fontSize={10}>
|
||||
{selectedTrials.has(hoveredTrial) ? '✓ Selected' : '○ Not selected'}
|
||||
</text>
|
||||
</g>
|
||||
)}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex gap-6 justify-center mt-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-0.5 bg-green-400" />
|
||||
<span className="text-dark-200">Feasible</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-0.5 bg-red-400" />
|
||||
<span className="text-dark-200">Infeasible</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-0.5 bg-yellow-400" style={{ height: '2px' }} />
|
||||
<span className="text-dark-200">Selected</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
247
atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
Normal file
247
atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* Pareto Front Plot - Protocol 13
|
||||
* Visualizes Pareto-optimal solutions for multi-objective optimization
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ScatterChart, Scatter, Line, XAxis, YAxis, CartesianGrid, Tooltip, Cell, ResponsiveContainer, Legend } from 'recharts';
|
||||
|
||||
interface ParetoTrial {
|
||||
trial_number: number;
|
||||
values: [number, number];
|
||||
params: Record<string, number>;
|
||||
constraint_satisfied?: boolean;
|
||||
}
|
||||
|
||||
interface Objective {
|
||||
name: string;
|
||||
type: 'minimize' | 'maximize';
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
interface ParetoPlotProps {
|
||||
paretoData: ParetoTrial[];
|
||||
objectives: Objective[];
|
||||
}
|
||||
|
||||
type NormalizationMode = 'raw' | 'minmax' | 'zscore';
|
||||
|
||||
export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
|
||||
const [normMode, setNormMode] = useState<NormalizationMode>('raw');
|
||||
|
||||
if (paretoData.length === 0) {
|
||||
return (
|
||||
<div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
|
||||
<h3 className="text-lg font-semibold mb-4 text-dark-100">Pareto Front</h3>
|
||||
<div className="h-64 flex items-center justify-center text-dark-300">
|
||||
No Pareto front data yet
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Extract raw values
|
||||
const rawData = paretoData.map(trial => ({
|
||||
x: trial.values[0],
|
||||
y: trial.values[1],
|
||||
trial_number: trial.trial_number,
|
||||
feasible: trial.constraint_satisfied !== false
|
||||
}));
|
||||
|
||||
// Calculate statistics for normalization
|
||||
const xValues = rawData.map(d => d.x);
|
||||
const yValues = rawData.map(d => d.y);
|
||||
|
||||
const xMin = Math.min(...xValues);
|
||||
const xMax = Math.max(...xValues);
|
||||
const yMin = Math.min(...yValues);
|
||||
const yMax = Math.max(...yValues);
|
||||
|
||||
const xMean = xValues.reduce((a, b) => a + b, 0) / xValues.length;
|
||||
const yMean = yValues.reduce((a, b) => a + b, 0) / yValues.length;
|
||||
|
||||
const xStd = Math.sqrt(xValues.reduce((sum, val) => sum + Math.pow(val - xMean, 2), 0) / xValues.length);
|
||||
const yStd = Math.sqrt(yValues.reduce((sum, val) => sum + Math.pow(val - yMean, 2), 0) / yValues.length);
|
||||
|
||||
// Normalize data based on selected mode
|
||||
const normalizeX = (val: number): number => {
|
||||
if (normMode === 'minmax') {
|
||||
return xMax === xMin ? 0.5 : (val - xMin) / (xMax - xMin);
|
||||
} else if (normMode === 'zscore') {
|
||||
return xStd === 0 ? 0 : (val - xMean) / xStd;
|
||||
}
|
||||
return val; // raw
|
||||
};
|
||||
|
||||
const normalizeY = (val: number): number => {
|
||||
if (normMode === 'minmax') {
|
||||
return yMax === yMin ? 0.5 : (val - yMin) / (yMax - yMin);
|
||||
} else if (normMode === 'zscore') {
|
||||
return yStd === 0 ? 0 : (val - yMean) / yStd;
|
||||
}
|
||||
return val; // raw
|
||||
};
|
||||
|
||||
// Transform data with normalization
|
||||
const data = rawData.map(d => ({
|
||||
x: normalizeX(d.x),
|
||||
y: normalizeY(d.y),
|
||||
rawX: d.x,
|
||||
rawY: d.y,
|
||||
trial_number: d.trial_number,
|
||||
feasible: d.feasible
|
||||
}));
|
||||
|
||||
// Sort data by x-coordinate for Pareto front line
|
||||
const sortedData = [...data].sort((a, b) => a.x - b.x);
|
||||
|
||||
// Get objective labels with normalization indicator
|
||||
const normSuffix = normMode === 'minmax' ? ' [0-1]' : normMode === 'zscore' ? ' [z-score]' : '';
|
||||
const xLabel = objectives[0]
|
||||
? `${objectives[0].name}${objectives[0].unit ? ` (${objectives[0].unit})` : ''}${normSuffix}`
|
||||
: `Objective 1${normSuffix}`;
|
||||
const yLabel = objectives[1]
|
||||
? `${objectives[1].name}${objectives[1].unit ? ` (${objectives[1].unit})` : ''}${normSuffix}`
|
||||
: `Objective 2${normSuffix}`;
|
||||
|
||||
// Custom tooltip (always shows raw values)
|
||||
const CustomTooltip = ({ active, payload }: any) => {
|
||||
if (!active || !payload || payload.length === 0) return null;
|
||||
|
||||
const point = payload[0].payload;
|
||||
return (
|
||||
<div className="bg-dark-800 border border-dark-600 rounded p-3 shadow-lg">
|
||||
<div className="text-sm font-semibold text-dark-100 mb-2">
|
||||
Trial #{point.trial_number}
|
||||
</div>
|
||||
<div className="space-y-1 text-xs">
|
||||
<div className="text-dark-200">
|
||||
{objectives[0]?.name || 'Obj 1'}: <span className="font-mono">{point.rawX.toFixed(4)}</span>
|
||||
</div>
|
||||
<div className="text-dark-200">
|
||||
{objectives[1]?.name || 'Obj 2'}: <span className="font-mono">{point.rawY.toFixed(4)}</span>
|
||||
</div>
|
||||
<div className={point.feasible ? 'text-green-400' : 'text-red-400'}>
|
||||
{point.feasible ? '✓ Feasible' : '✗ Infeasible'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-dark-700 rounded-lg p-6 border border-dark-600">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-dark-100">
|
||||
Pareto Front ({paretoData.length} solutions)
|
||||
</h3>
|
||||
|
||||
{/* Normalization Toggle */}
|
||||
<div className="flex gap-1 bg-dark-800 rounded p-1 border border-dark-600">
|
||||
<button
|
||||
onClick={() => setNormMode('raw')}
|
||||
className={`px-3 py-1 text-xs rounded transition-colors ${
|
||||
normMode === 'raw'
|
||||
? 'bg-primary-500 text-white'
|
||||
: 'text-dark-300 hover:text-dark-100'
|
||||
}`}
|
||||
>
|
||||
Raw
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setNormMode('minmax')}
|
||||
className={`px-3 py-1 text-xs rounded transition-colors ${
|
||||
normMode === 'minmax'
|
||||
? 'bg-primary-500 text-white'
|
||||
: 'text-dark-300 hover:text-dark-100'
|
||||
}`}
|
||||
>
|
||||
Min-Max
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setNormMode('zscore')}
|
||||
className={`px-3 py-1 text-xs rounded transition-colors ${
|
||||
normMode === 'zscore'
|
||||
? 'bg-primary-500 text-white'
|
||||
: 'text-dark-300 hover:text-dark-100'
|
||||
}`}
|
||||
>
|
||||
Z-Score
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<ScatterChart margin={{ top: 20, right: 20, bottom: 60, left: 60 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
|
||||
<XAxis
|
||||
type="number"
|
||||
dataKey="x"
|
||||
name={objectives[0]?.name || 'Objective 1'}
|
||||
stroke="#94a3b8"
|
||||
label={{
|
||||
value: xLabel,
|
||||
position: 'insideBottom',
|
||||
offset: -45,
|
||||
fill: '#94a3b8',
|
||||
style: { fontSize: '14px' }
|
||||
}}
|
||||
tick={{ fill: '#94a3b8' }}
|
||||
/>
|
||||
<YAxis
|
||||
type="number"
|
||||
dataKey="y"
|
||||
name={objectives[1]?.name || 'Objective 2'}
|
||||
stroke="#94a3b8"
|
||||
label={{
|
||||
value: yLabel,
|
||||
angle: -90,
|
||||
position: 'insideLeft',
|
||||
offset: -45,
|
||||
fill: '#94a3b8',
|
||||
style: { fontSize: '14px' }
|
||||
}}
|
||||
tick={{ fill: '#94a3b8' }}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
height={36}
|
||||
content={() => (
|
||||
<div className="flex gap-4 justify-center mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-green-400" />
|
||||
<span className="text-sm text-dark-200">Feasible</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-400" />
|
||||
<span className="text-sm text-dark-200">Infeasible</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{/* Pareto front line */}
|
||||
<Line
|
||||
type="monotone"
|
||||
data={sortedData}
|
||||
dataKey="y"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
connectNulls={false}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
<Scatter name="Pareto Front" data={data}>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.feasible ? '#10b981' : '#ef4444'}
|
||||
r={entry.feasible ? 6 : 4}
|
||||
opacity={entry.feasible ? 1 : 0.6}
|
||||
/>
|
||||
))}
|
||||
</Scatter>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
427
atomizer-dashboard/frontend/src/pages/Dashboard.tsx
Normal file
427
atomizer-dashboard/frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,427 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
LineChart, Line, ScatterChart, Scatter,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell
|
||||
} from 'recharts';
|
||||
import { useWebSocket } from '../hooks/useWebSocket';
|
||||
import { Card } from '../components/Card';
|
||||
import { MetricCard } from '../components/MetricCard';
|
||||
import { StudyCard } from '../components/StudyCard';
|
||||
import { OptimizerPanel } from '../components/OptimizerPanel';
|
||||
import { ParetoPlot } from '../components/ParetoPlot';
|
||||
import { ParallelCoordinatesPlot } from '../components/ParallelCoordinatesPlot';
|
||||
import type { Study, Trial, ConvergenceDataPoint, ParameterSpaceDataPoint } from '../types';
|
||||
|
||||
interface DashboardProps {
|
||||
studies: Study[];
|
||||
selectedStudyId: string | null;
|
||||
onStudySelect: (studyId: string) => void;
|
||||
}
|
||||
|
||||
export default function Dashboard({ studies, selectedStudyId, onStudySelect }: DashboardProps) {
|
||||
const [trials, setTrials] = useState<Trial[]>([]);
|
||||
const [allTrials, setAllTrials] = useState<Trial[]>([]);
|
||||
const [bestValue, setBestValue] = useState<number>(Infinity);
|
||||
const [prunedCount, setPrunedCount] = useState<number>(0);
|
||||
const [alerts, setAlerts] = useState<Array<{ id: number; type: 'success' | 'warning'; message: string }>>([]);
|
||||
const [alertIdCounter, setAlertIdCounter] = useState(0);
|
||||
|
||||
// Protocol 13: New state for metadata and Pareto front
|
||||
const [studyMetadata, setStudyMetadata] = useState<any>(null);
|
||||
const [paretoFront, setParetoFront] = useState<any[]>([]);
|
||||
|
||||
const showAlert = (type: 'success' | 'warning', message: string) => {
|
||||
const id = alertIdCounter;
|
||||
setAlertIdCounter(prev => prev + 1);
|
||||
setAlerts(prev => [...prev, { id, type, message }]);
|
||||
setTimeout(() => {
|
||||
setAlerts(prev => prev.filter(a => a.id !== id));
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
// WebSocket connection
|
||||
const { isConnected } = useWebSocket({
|
||||
studyId: selectedStudyId,
|
||||
onTrialCompleted: (trial) => {
|
||||
setTrials(prev => [trial, ...prev].slice(0, 20));
|
||||
setAllTrials(prev => [...prev, trial]);
|
||||
if (trial.objective < bestValue) {
|
||||
setBestValue(trial.objective);
|
||||
showAlert('success', `New best: ${trial.objective.toFixed(4)} (Trial #${trial.trial_number})`);
|
||||
}
|
||||
},
|
||||
onNewBest: (trial) => {
|
||||
console.log('New best trial:', trial);
|
||||
},
|
||||
onTrialPruned: (pruned) => {
|
||||
setPrunedCount(prev => prev + 1);
|
||||
showAlert('warning', `Trial #${pruned.trial_number} pruned: ${pruned.pruning_cause}`);
|
||||
},
|
||||
});
|
||||
|
||||
// Load initial trial history when study changes
|
||||
useEffect(() => {
|
||||
if (selectedStudyId) {
|
||||
setTrials([]);
|
||||
setAllTrials([]);
|
||||
setBestValue(Infinity);
|
||||
setPrunedCount(0);
|
||||
|
||||
// Fetch full history
|
||||
fetch(`/api/optimization/studies/${selectedStudyId}/history`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const sortedTrials = data.trials.sort((a: Trial, b: Trial) => a.trial_number - b.trial_number);
|
||||
setAllTrials(sortedTrials);
|
||||
setTrials(sortedTrials.slice(-20).reverse());
|
||||
if (sortedTrials.length > 0) {
|
||||
const minObj = Math.min(...sortedTrials.map((t: Trial) => t.objective));
|
||||
setBestValue(minObj);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to load history:', err));
|
||||
|
||||
// Fetch pruning count
|
||||
fetch(`/api/optimization/studies/${selectedStudyId}/pruning`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setPrunedCount(data.pruned_trials?.length || 0);
|
||||
})
|
||||
.catch(err => console.error('Failed to load pruning data:', err));
|
||||
|
||||
// Protocol 13: Fetch metadata
|
||||
fetch(`/api/optimization/studies/${selectedStudyId}/metadata`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setStudyMetadata(data);
|
||||
})
|
||||
.catch(err => console.error('Failed to load metadata:', err));
|
||||
|
||||
// Protocol 13: Fetch Pareto front
|
||||
fetch(`/api/optimization/studies/${selectedStudyId}/pareto-front`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.is_multi_objective) {
|
||||
setParetoFront(data.pareto_front);
|
||||
} else {
|
||||
setParetoFront([]);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to load Pareto front:', err));
|
||||
}
|
||||
}, [selectedStudyId]);
|
||||
|
||||
// Prepare chart data
|
||||
const convergenceData: ConvergenceDataPoint[] = allTrials.map((trial, idx) => ({
|
||||
trial_number: trial.trial_number,
|
||||
objective: trial.objective,
|
||||
best_so_far: Math.min(...allTrials.slice(0, idx + 1).map(t => t.objective)),
|
||||
}));
|
||||
|
||||
const parameterSpaceData: ParameterSpaceDataPoint[] = allTrials.map(trial => {
|
||||
const params = Object.values(trial.design_variables);
|
||||
return {
|
||||
trial_number: trial.trial_number,
|
||||
x: params[0] || 0,
|
||||
y: params[1] || 0,
|
||||
objective: trial.objective,
|
||||
isBest: trial.objective === bestValue,
|
||||
};
|
||||
});
|
||||
|
||||
// Calculate average objective
|
||||
const avgObjective = allTrials.length > 0
|
||||
? allTrials.reduce((sum, t) => sum + t.objective, 0) / allTrials.length
|
||||
: 0;
|
||||
|
||||
// Get parameter names
|
||||
const paramNames = allTrials.length > 0 ? Object.keys(allTrials[0].design_variables) : [];
|
||||
|
||||
// Helper: Format parameter label with unit from metadata
|
||||
const getParamLabel = (paramName: string, index: number): string => {
|
||||
if (!studyMetadata?.design_variables) {
|
||||
return paramName || `Parameter ${index + 1}`;
|
||||
}
|
||||
const dv = studyMetadata.design_variables.find((v: any) => v.name === paramName);
|
||||
if (dv && dv.unit) {
|
||||
return `${paramName} (${dv.unit})`;
|
||||
}
|
||||
return paramName || `Parameter ${index + 1}`;
|
||||
};
|
||||
|
||||
// Export functions
|
||||
const exportJSON = () => {
|
||||
if (allTrials.length === 0) return;
|
||||
const data = JSON.stringify(allTrials, null, 2);
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${selectedStudyId}_trials.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
showAlert('success', 'JSON exported successfully!');
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
if (allTrials.length === 0) return;
|
||||
const headers = ['trial_number', 'objective', ...paramNames].join(',');
|
||||
const rows = allTrials.map(t => [
|
||||
t.trial_number,
|
||||
t.objective,
|
||||
...paramNames.map(k => t.design_variables[k])
|
||||
].join(','));
|
||||
const csv = [headers, ...rows].join('\n');
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${selectedStudyId}_trials.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
showAlert('success', 'CSV exported successfully!');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
{/* Alerts */}
|
||||
<div className="fixed top-4 right-4 z-50 space-y-2">
|
||||
{alerts.map(alert => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className={`px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
|
||||
alert.type === 'success'
|
||||
? 'bg-green-900 border-l-4 border-green-400 text-green-100'
|
||||
: 'bg-yellow-900 border-l-4 border-yellow-400 text-yellow-100'
|
||||
}`}
|
||||
>
|
||||
{alert.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="mb-8 flex items-center justify-between border-b border-dark-500 pb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-primary-400">Atomizer Dashboard</h1>
|
||||
<p className="text-dark-200 mt-2">Real-time optimization monitoring</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={exportJSON} className="btn-secondary" disabled={allTrials.length === 0}>
|
||||
Export JSON
|
||||
</button>
|
||||
<button onClick={exportCSV} className="btn-secondary" disabled={allTrials.length === 0}>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
{/* Sidebar - Study List */}
|
||||
<aside className="col-span-3">
|
||||
<Card title="Active Studies">
|
||||
<div className="space-y-3 max-h-[calc(100vh-200px)] overflow-y-auto">
|
||||
{studies.map(study => (
|
||||
<StudyCard
|
||||
key={study.id}
|
||||
study={study}
|
||||
isActive={study.id === selectedStudyId}
|
||||
onClick={() => onStudySelect(study.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="col-span-9">
|
||||
{/* Metrics Grid */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<MetricCard label="Total Trials" value={allTrials.length} />
|
||||
<MetricCard
|
||||
label="Best Value"
|
||||
value={bestValue === Infinity ? '-' : bestValue.toFixed(4)}
|
||||
valueColor="text-green-400"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Avg Objective"
|
||||
value={avgObjective > 0 ? avgObjective.toFixed(4) : '-'}
|
||||
valueColor="text-blue-400"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Connection"
|
||||
value={isConnected ? 'Connected' : 'Disconnected'}
|
||||
valueColor={isConnected ? 'text-green-400' : 'text-red-400'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<MetricCard
|
||||
label="Pruned"
|
||||
value={prunedCount}
|
||||
valueColor={prunedCount > 0 ? 'text-red-400' : 'text-green-400'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Protocol 13: Intelligent Optimizer & Pareto Front */}
|
||||
{selectedStudyId && (
|
||||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||||
<OptimizerPanel studyId={selectedStudyId} />
|
||||
{paretoFront.length > 0 && studyMetadata && (
|
||||
<ParetoPlot
|
||||
paretoData={paretoFront}
|
||||
objectives={studyMetadata.objectives || []}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Parallel Coordinates (full width for multi-objective) */}
|
||||
{paretoFront.length > 0 && studyMetadata && (
|
||||
<div className="mb-6">
|
||||
<ParallelCoordinatesPlot
|
||||
paretoData={paretoFront}
|
||||
objectives={studyMetadata.objectives || []}
|
||||
designVariables={studyMetadata.design_variables || []}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||||
{/* Convergence Chart */}
|
||||
<Card title="Convergence Plot">
|
||||
{convergenceData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={convergenceData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
|
||||
<XAxis
|
||||
dataKey="trial_number"
|
||||
stroke="#94a3b8"
|
||||
label={{ value: 'Trial Number', position: 'insideBottom', offset: -5, fill: '#94a3b8' }}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#94a3b8"
|
||||
label={{ value: 'Objective', angle: -90, position: 'insideLeft', fill: '#94a3b8' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px' }}
|
||||
labelStyle={{ color: '#e2e8f0' }}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="objective"
|
||||
stroke="#60a5fa"
|
||||
name="Objective"
|
||||
dot={{ r: 3 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="best_so_far"
|
||||
stroke="#10b981"
|
||||
name="Best So Far"
|
||||
strokeWidth={2}
|
||||
dot={{ r: 4 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="h-64 flex items-center justify-center text-dark-300">
|
||||
No trial data yet
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Parameter Space Chart */}
|
||||
<Card title={`Parameter Space (${paramNames[0] || 'X'} vs ${paramNames[1] || 'Y'})`}>
|
||||
{parameterSpaceData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<ScatterChart>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
|
||||
<XAxis
|
||||
type="number"
|
||||
dataKey="x"
|
||||
stroke="#94a3b8"
|
||||
name={paramNames[0] || 'X'}
|
||||
label={{ value: getParamLabel(paramNames[0], 0), position: 'insideBottom', offset: -5, fill: '#94a3b8' }}
|
||||
/>
|
||||
<YAxis
|
||||
type="number"
|
||||
dataKey="y"
|
||||
stroke="#94a3b8"
|
||||
name={paramNames[1] || 'Y'}
|
||||
label={{ value: getParamLabel(paramNames[1], 1), angle: -90, position: 'insideLeft', fill: '#94a3b8' }}
|
||||
/>
|
||||
<Tooltip
|
||||
cursor={{ strokeDasharray: '3 3' }}
|
||||
contentStyle={{ backgroundColor: '#1e293b', border: 'none', borderRadius: '8px' }}
|
||||
labelStyle={{ color: '#e2e8f0' }}
|
||||
formatter={(value: any, name: string) => {
|
||||
if (name === 'objective') return [value.toFixed(4), 'Objective'];
|
||||
return [value.toFixed(3), name];
|
||||
}}
|
||||
/>
|
||||
<Scatter name="Trials" data={parameterSpaceData}>
|
||||
{parameterSpaceData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.isBest ? '#10b981' : '#60a5fa'}
|
||||
r={entry.isBest ? 8 : 5}
|
||||
/>
|
||||
))}
|
||||
</Scatter>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="h-64 flex items-center justify-center text-dark-300">
|
||||
No trial data yet
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Trial Feed */}
|
||||
<Card title="Recent Trials">
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{trials.length > 0 ? (
|
||||
trials.map(trial => (
|
||||
<div
|
||||
key={trial.trial_number}
|
||||
className={`p-3 rounded-lg transition-all duration-200 ${
|
||||
trial.objective === bestValue
|
||||
? 'bg-green-900 border-l-4 border-green-400'
|
||||
: 'bg-dark-500 hover:bg-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-primary-400">
|
||||
Trial #{trial.trial_number}
|
||||
</span>
|
||||
<span className={`font-mono text-lg ${
|
||||
trial.objective === bestValue ? 'text-green-400 font-bold' : 'text-dark-100'
|
||||
}`}>
|
||||
{trial.objective.toFixed(4)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-dark-200 flex flex-wrap gap-3">
|
||||
{Object.entries(trial.design_variables).map(([key, val]) => (
|
||||
<span key={key}>
|
||||
<span className="text-dark-400">{key}:</span> {val.toFixed(3)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-8 text-dark-300">
|
||||
No trials yet. Waiting for optimization to start...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user