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:
@@ -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)
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user