Anto01
2b3573ec42
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>
101 lines
2.6 KiB
Markdown
101 lines
2.6 KiB
Markdown
# Frontend Integration Testing Guide
|
|
|
|
## 1. Start Both Servers
|
|
|
|
### Terminal 1 - Backend
|
|
```bash
|
|
cd atomizer-dashboard/backend
|
|
python -m uvicorn api.main:app --reload --port 8000
|
|
```
|
|
|
|
### Terminal 2 - Frontend
|
|
```bash
|
|
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
|
|
```typescript
|
|
fetch('http://localhost:8000/api/optimization/studies')
|
|
.then(r => r.json())
|
|
.then(data => console.log('Studies:', data));
|
|
```
|
|
|
|
### Get Study Status
|
|
```typescript
|
|
fetch('http://localhost:8000/api/optimization/studies/bracket_stiffness_optimization_V3/status')
|
|
.then(r => r.json())
|
|
.then(data => console.log('Status:', data));
|
|
```
|
|
|
|
### Connect WebSocket
|
|
```typescript
|
|
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.
|