feat: Add Analysis page, run comparison, notifications, and config editor
Dashboard enhancements:
- Add Analysis page with tabs: Overview, Parameters, Pareto, Correlations, Constraints, Surrogate, Runs
- Add PlotlyCorrelationHeatmap for parameter-objective correlation analysis
- Add PlotlyFeasibilityChart for constraint satisfaction visualization
- Add PlotlySurrogateQuality for FEA vs NN prediction comparison
- Add PlotlyRunComparison for comparing optimization runs within a study
Real-time improvements:
- Replace watchdog file-watching with SQLite database polling for better Windows reliability
- Add DatabasePoller class with 2-second polling interval
- Enhanced WebSocket messages: trial_completed, new_best, pareto_update, progress
Desktop notifications:
- Add useNotifications hook using Web Notifications API
- Add NotificationSettings toggle component
- Notify users when new best solutions are found
Config editor:
- Add PUT /studies/{study_id}/config endpoint with auto-backup
- Add ConfigEditor modal with tabs: General, Variables, Objectives, Settings, JSON
- Prevents editing while optimization is running
Enhanced Pareto visualization:
- Add dark mode styling with transparent backgrounds
- Add stats bar showing Pareto, FEA, NN, and infeasible counts
- Add Pareto front connecting line for 2D view
- Add table showing top 10 Pareto-optimal solutions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Antoine
@@ -1,6 +1,6 @@
|
||||
# Atomizer Dashboard
|
||||
|
||||
**Last Updated**: December 3, 2025
|
||||
**Last Updated**: December 5, 2025
|
||||
|
||||
---
|
||||
|
||||
@@ -127,6 +127,91 @@ Full-featured markdown report viewer:
|
||||
- **Pruning diagnostics**: Tracks pruned trial params and causes
|
||||
- **Database query**: Uses SQLite `state = 'PRUNED'` filter
|
||||
|
||||
### 8. Analytics Page (Cross-Study Comparisons)
|
||||
**File**: `atomizer-dashboard/frontend/src/pages/Analytics.tsx`
|
||||
|
||||
Dedicated analytics page for comparing optimization studies:
|
||||
|
||||
#### Aggregate Statistics
|
||||
- **Total Studies**: Count of all studies in the system
|
||||
- **Running/Paused/Completed**: Status distribution breakdown
|
||||
- **Total Trials**: Sum of trials across all studies
|
||||
- **Avg Trials/Study**: Average trial count per study
|
||||
- **Best Overall**: Best objective value across all studies with study ID
|
||||
|
||||
#### Study Comparison Table
|
||||
- **Sortable columns**: Name, Status, Progress, Best Value
|
||||
- **Status indicators**: Color-coded badges (running=green, paused=orange, completed=blue)
|
||||
- **Progress bars**: Visual completion percentage with color coding
|
||||
- **Quick actions**: Open button to navigate directly to a study's dashboard
|
||||
- **Selected highlight**: Current study highlighted with "Selected" badge
|
||||
- **Click-to-expand**: Row expansion for additional details
|
||||
|
||||
#### Status Distribution Chart
|
||||
- Visual breakdown of studies by status
|
||||
- Horizontal bar chart with percentage fill
|
||||
- Color-coded: Running (green), Paused (orange), Completed (blue), Not Started (gray)
|
||||
|
||||
#### Top Performers Panel
|
||||
- Ranking of top 5 studies by best objective value (assumes minimization)
|
||||
- Medal-style numbering (gold, silver, bronze for top 3)
|
||||
- Clickable rows to navigate to study
|
||||
- Trial count display
|
||||
|
||||
**Usage**: Navigate to `/analytics` when a study is selected. Provides aggregate view across all studies.
|
||||
|
||||
### 9. Global Claude Terminal
|
||||
**Files**:
|
||||
- `atomizer-dashboard/frontend/src/components/GlobalClaudeTerminal.tsx`
|
||||
- `atomizer-dashboard/frontend/src/components/ClaudeTerminal.tsx`
|
||||
- `atomizer-dashboard/frontend/src/context/ClaudeTerminalContext.tsx`
|
||||
|
||||
Persistent AI assistant terminal:
|
||||
- **Global persistence**: Terminal persists across page navigation
|
||||
- **WebSocket connection**: Real-time communication with Claude Code backend
|
||||
- **Context awareness**: Automatically includes current study context when available
|
||||
- **New Study mode**: When no study selected, offers guided study creation wizard
|
||||
- **Visual indicators**: Connection status shown in sidebar footer
|
||||
- **Keyboard shortcut**: Open/close terminal from anywhere
|
||||
|
||||
**Modes**:
|
||||
- **With Study Selected**: "Set Context" button loads study-specific context
|
||||
- **No Study Selected**: "New Study" button starts guided wizard from `.claude/skills/guided-study-wizard.md`
|
||||
|
||||
### 10. Shared Markdown Renderer
|
||||
**File**: `atomizer-dashboard/frontend/src/components/MarkdownRenderer.tsx`
|
||||
|
||||
Reusable markdown rendering component:
|
||||
- **Syntax highlighting**: Prism-based code highlighting with `oneDark` theme
|
||||
- **GitHub-flavored markdown**: Tables, task lists, strikethrough
|
||||
- **LaTeX math support**: KaTeX rendering with `remark-math` and `rehype-katex`
|
||||
- **Custom styling**: Dark theme typography optimized for dashboard
|
||||
- **Used by**: Home page (README display), Results page (reports)
|
||||
|
||||
---
|
||||
|
||||
## Pages Structure
|
||||
|
||||
### Home Page (`/`)
|
||||
- Study navigator and selector
|
||||
- README.md display with full markdown rendering
|
||||
- New study creation via Claude terminal
|
||||
|
||||
### Dashboard Page (`/dashboard`)
|
||||
- Real-time live tracker for selected study
|
||||
- Convergence plot, Pareto front, parameter importance
|
||||
- Trial history table
|
||||
|
||||
### Reports Page (`/results`)
|
||||
- AI-generated optimization report viewer
|
||||
- Full markdown rendering with syntax highlighting and math
|
||||
- Copy and download capabilities
|
||||
|
||||
### Analytics Page (`/analytics`)
|
||||
- Cross-study comparison and aggregate statistics
|
||||
- Study ranking and status distribution
|
||||
- Quick navigation to individual studies
|
||||
|
||||
---
|
||||
|
||||
## API Endpoints
|
||||
@@ -316,13 +401,26 @@ atomizer-dashboard/
|
||||
│ │ │ ├── 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
|
||||
│ │ │ ├── common/
|
||||
│ │ │ │ └── Card.tsx # Reusable card component
|
||||
│ │ │ │ ├── Card.tsx # Reusable card component
|
||||
│ │ │ │ └── Button.tsx # Reusable button component
|
||||
│ │ │ ├── layout/
|
||||
│ │ │ │ ├── Sidebar.tsx # Navigation sidebar
|
||||
│ │ │ │ └── MainLayout.tsx # Page layout wrapper
|
||||
│ │ │ └── dashboard/
|
||||
│ │ │ ├── MetricCard.tsx # KPI display
|
||||
│ │ │ └── StudyCard.tsx # Study selector
|
||||
│ │ ├── pages/
|
||||
│ │ │ └── Dashboard.tsx # Main dashboard page
|
||||
│ │ │ ├── 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
|
||||
│ │ ├── hooks/
|
||||
│ │ │ └── useWebSocket.ts # WebSocket connection
|
||||
│ │ ├── api/
|
||||
@@ -334,7 +432,8 @@ atomizer-dashboard/
|
||||
└── api/
|
||||
├── main.py # FastAPI app
|
||||
└── routes/
|
||||
└── optimization.py # Optimization endpoints
|
||||
├── optimization.py # Optimization endpoints
|
||||
└── terminal.py # Claude terminal WebSocket
|
||||
```
|
||||
|
||||
## NPM Dependencies
|
||||
@@ -415,6 +514,12 @@ if (!objectives || !designVariables) return <EmptyState />;
|
||||
- [x] **Study Report Viewer**: Full markdown rendering with KaTeX math support
|
||||
- [x] **Pruned Trials**: Real-time count from Optuna database (not JSON file)
|
||||
- [x] **Chart Data Transformation**: Fixed `values` array mapping for single/multi-objective
|
||||
- [x] **Analytics Page**: Dedicated cross-study comparison and aggregate statistics view
|
||||
- [x] **Global Claude Terminal**: Persistent AI terminal with study context awareness
|
||||
- [x] **Shared Markdown Renderer**: Reusable component with syntax highlighting and math support
|
||||
- [x] **Study Session Persistence**: localStorage-based study selection that survives page refresh
|
||||
- [x] **Paused Status Support**: Full support for paused optimization status throughout UI
|
||||
- [x] **Guided Study Wizard**: Interactive wizard skill for creating new studies via Claude
|
||||
|
||||
### Future Enhancements
|
||||
|
||||
@@ -422,7 +527,6 @@ if (!objectives || !designVariables) return <EmptyState />;
|
||||
- [ ] Advanced filtering and search in trial history
|
||||
- [ ] Export results to CSV/JSON
|
||||
- [ ] Custom parallel coordinates brushing/filtering
|
||||
- [ ] Multi-study comparison view
|
||||
- [ ] Hypervolume indicator tracking
|
||||
- [ ] Interactive design variable sliders
|
||||
- [ ] Constraint importance analysis
|
||||
|
||||
Reference in New Issue
Block a user