Files
Atomizer/archive/test_scripts/test_frontend_integration.md
Anto01 2b3573ec42 feat: Add AtomizerField training data export and intelligent model discovery
Major additions:
- Training data export system for AtomizerField neural network training
- Bracket stiffness optimization study with 50+ training samples
- Intelligent NX model discovery (auto-detect solutions, expressions, mesh)
- Result extractors module for displacement, stress, frequency, mass
- User-generated NX journals for advanced workflows
- Archive structure for legacy scripts and test outputs
- Protocol documentation and dashboard launcher

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 12:01:50 -05:00

2.6 KiB

Frontend Integration Testing Guide

1. Start Both Servers

Terminal 1 - Backend

cd atomizer-dashboard/backend
python -m uvicorn api.main:app --reload --port 8000

Terminal 2 - Frontend

cd atomizer-dashboard/frontend
npm run dev

Frontend will be at: http://localhost:3003

2. Test API Integration

The frontend should be able to:

Fetch Studies List

fetch('http://localhost:8000/api/optimization/studies')
  .then(r => r.json())
  .then(data => console.log('Studies:', data));

Get Study Status

fetch('http://localhost:8000/api/optimization/studies/bracket_stiffness_optimization_V3/status')
  .then(r => r.json())
  .then(data => console.log('Status:', data));

Connect WebSocket

const ws = new WebSocket('ws://localhost:8000/api/ws/optimization/bracket_stiffness_optimization_V3');

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log('Message type:', message.type);
  console.log('Data:', message.data);
};

3. Frontend Development Tasks

Now your frontend developer can implement:

Phase 1: Basic Study Viewing

  • Studies list page
  • Study detail page with current status
  • Trial history table

Phase 2: Real-Time Updates

  • WebSocket connection manager
  • Live trial updates in UI
  • Progress bar updates
  • "New Best" notifications

Phase 3: Pareto Front Visualization

  • Scatter plot of Pareto solutions
  • Interactive filtering
  • Solution comparison

Phase 4: 3D Visualization

  • GLTF model viewer (Three.js / react-three-fiber)
  • Load mesh from /api/optimization/studies/{id}/mesh/model.gltf
  • Color-coded stress/displacement display

Phase 5: Report Generation

  • Report generation buttons
  • Download generated reports
  • Preview HTML reports in-browser

4. Test Data Available

bracket_stiffness_optimization_V3 has:

  • 100 completed trials
  • 48 Pareto-optimal solutions
  • Multi-objective: minimize mass + maximize stiffness
  • Design variables: rib_thickness_1, rib_thickness_2, rib_thickness_3, base_thickness

Perfect for testing all dashboard features.

5. API Endpoints Reference

All endpoints are documented in the technical summary provided earlier.

Key endpoints:

  • GET /api/optimization/studies - List all studies
  • GET /api/optimization/studies/{id}/status - Get study status
  • GET /api/optimization/studies/{id}/trials - Get trial history
  • GET /api/optimization/studies/{id}/pareto-front - Get Pareto solutions
  • POST /api/optimization/studies/{id}/generate-report - Generate report
  • WS /api/ws/optimization/{id} - WebSocket stream

All support CORS and are ready for React integration.