Atomizer/docs/07_DEVELOPMENT/dashboard_initial_prompt.md

MASTER PROMPT FOR CLAUDE CODE: ADVANCED NX OPTIMIZATION DASHBOARD PROJECT CONTEXT I need you to build an advanced optimization dashboard for my atomizer project that manages Nastran structural optimizations. The dashboard should be professional, scientific (dark theme, no emojis), and integrate with my existing backend/frontend architecture. CORE REQUIREMENTS

1. CONFIGURATION PAGE

Load NX optimization files via Windows file explorer Display optimization parameters that LLM created (ranges, objectives, constraints) Allow real-time editing and fine-tuning of optimization setup Generate and display optimization configuration report (markdown/PDF) Parameters the LLM might have missed or gotten wrong should be adjustable

2. MONITORING PAGE (Real-time Optimization Tracking)

Live optimization progress with pause/stop controls State-of-the-art visualization suite:

Convergence plots (objective values over iterations) Parallel coordinates plot (all parameters and objectives) Hypervolume evolution Surrogate model accuracy plots Pareto front evolution Parameter correlation matrices Cross-correlation heatmaps Diversity metrics

WebSocket connection for real-time updates Display optimizer thinking/decisions

3. ITERATIONS VIEWER PAGE

Table view of all iterations with parameters and objective values 3D mesh visualization using Three.js:

Show deformation and stress from .op2/.dat files Use pyNastran to extract mesh and results Interactive rotation/zoom Color-mapped stress/displacement results

Compare iterations side-by-side Filter and sort by any parameter/objective

4. REPORT PAGE

Comprehensive optimization report sections:

Executive summary Problem definition Objectives and constraints Optimization methodology Convergence analysis Results and recommendations All plots and visualizations

Interactive editing with LLM assistance "Clean up report with my notes" functionality Export to PDF/Markdown

TECHNICAL SPECIFICATIONS Architecture Requirements

Frontend: React + TypeScript with Plotly.js, D3.js, Three.js Backend: FastAPI with WebSocket support Data: pyNastran for OP2/BDF processing Real-time: WebSocket for live updates Storage: Study folders with iteration data

Visual Design

Dark theme (#0a0a0a background) Scientific color palette (no bright colors) Clean, professional typography No emojis or decorative elements Focus on data density and clarity

Integration Points

File selection through Windows Explorer Claude Code integration for optimization setup Existing optimizer callbacks for real-time data pyNastran for mesh/results extraction

IMPLEMENTATION PLAN Phase 1: Foundation

Setup project structure with proper separation of concerns Create dark theme scientific UI framework Implement WebSocket infrastructure for real-time updates Setup pyNastran integration for OP2/BDF processing

Phase 2: Configuration System

Build file loader for NX optimization files Create parameter/objective/constraint editors Implement LLM configuration parser and display Add configuration validation and adjustment tools Generate configuration reports

Phase 3: Monitoring Dashboard

Implement real-time WebSocket data streaming Create convergence plot component Build parallel coordinates visualization Add hypervolume and diversity trackers Implement surrogate model visualization Create pause/stop optimization controls

Phase 4: Iteration Analysis

Build iteration data table with filtering/sorting Implement 3D mesh viewer with Three.js Add pyNastran mesh/results extraction pipeline Create stress/displacement overlay system Build iteration comparison tools

Phase 5: Report Generation

Design report structure and sections Implement automated report generation Add interactive editing capabilities Integrate LLM assistance for report modification Create PDF/Markdown export functionality

Phase 6: Integration & Polish

Connect all pages with proper navigation Implement state management across pages Add error handling and recovery Performance optimization Testing and refinement

KEY FEATURES TO RESEARCH AND IMPLEMENT

Convergence Visualization: Research best practices from Optuna, pymoo, scikit-optimize Parallel Coordinates: Implement brushing, highlighting, and filtering capabilities 3D Mesh Rendering: Use pyNastran's mesh extraction with Three.js WebGL rendering Surrogate Models: Visualize Gaussian Process or Neural Network approximations Hypervolume Calculation: Implement proper reference point selection and normalization

SUCCESS CRITERIA

Dashboard can load and configure optimizations without manual file editing Real-time monitoring shows all critical optimization metrics 3D visualization clearly shows design changes between iterations Reports are publication-ready and comprehensive System maintains scientific rigor and professional appearance All interactions are smooth and responsive

START IMPLEMENTATION Begin by creating the project structure, then implement the Configuration Page with file loading and parameter display. Focus on getting the data flow working before adding advanced visualizations. Use pyNastran from the start for mesh/results handling. Remember: Keep it scientific, professional, and data-focused. No unnecessary UI elements or decorations.