# System Monitor - Enhanced Animated Visualization

## Overview

The System Monitor provides a beautiful, real-time animated visualization of your entire system architecture. It's like looking at your system from above with a bird's-eye view, showing all components and data flow between them.

## Features

### 🎨 Visual Components

1. **API Server (Center)** - The main FastAPI server
   - Green pulsing glow when healthy
   - Central hub for all communications
   - Server icon with status indicator

2. **Database (Right)** - SQLite database
   - Blue when online, red when offline
   - Shows data persistence operations
   - Database cylinder icon

3. **Clients (Bottom)** - Multiple client connections
   - Purple nodes representing different clients
   - Monitor icons showing active connections
   - Receives final responses

4. **Data Sources (Top Arc)** - External API sources
   - Orange/yellow nodes in an arc formation
   - Radio wave icons for data sources
   - Shows active/inactive status

5. **AI Models (Left Side)** - Machine learning models
   - Pink nodes for AI/ML models
   - Neural network icons
   - Status indicators for model health

### 🌊 Animated Data Flow

The system shows complete request/response cycles with beautiful animations:

1. **Request Phase (Purple)** 
   - Client → Server
   - Arrow indicator on packet

2. **Processing Phase (Cyan)**
   - Server → Data Source/AI Model/Database
   - Shows where data is being fetched

3. **Response Phase (Green)**
   - Data Source/AI Model/Database → Server
   - Checkmark indicator on packet

4. **Final Response (Bright Green)**
   - Server → Client
   - Particle explosion effect on arrival

### ✨ Visual Effects

- **Pulsing Glows** - All nodes have animated glowing effects
- **Animated Connections** - Dashed lines flow between active nodes
- **Packet Trails** - Data packets leave glowing trails
- **Particle Effects** - Burst animations when packets arrive
- **Grid Background** - Subtle grid pattern for depth
- **Gradient Backgrounds** - Beautiful dark theme with gradients

### 📊 Real-Time Stats

**Top-Left Legend:**
- Request (Purple)
- Processing (Cyan)
- Response (Green)

**Top-Right Stats Panel:**
- Active Packets count
- Data Sources count
- AI Models count
- Connected Clients count

### 🔄 Data Updates

The monitor updates via two methods:

1. **WebSocket** - Real-time updates every 2 seconds
2. **HTTP Polling** - Fallback polling every 5 seconds

### 🎯 Status Indicators

Each node shows its status:
- **Green dot** - Online/Healthy
- **Red dot** - Offline/Failed
- **Pulsing glow** - Active processing

## Technical Details

### Canvas Size
- Default: 700px height
- Responsive: Adjusts for different screen sizes
- Dark theme with gradient background

### Animation System
- 60 FPS smooth animations
- Easing functions for natural movement
- Trail effects with fade-out
- Particle system for visual feedback

### Node Layout
- **Server**: Center (x: 50%, y: 50%)
- **Database**: Right of server (+200px)
- **Clients**: Bottom row (3 clients, 150px spacing)
- **Sources**: Top arc (250px radius)
- **AI Models**: Left column (80px spacing)

### Packet Flow Logic

```
Client Request
    ↓
API Server
    ↓
[Data Source / AI Model / Database]
    ↓
API Server
    ↓
Client Response (with particle effect)
```

### Demo Mode

When no real requests are active, the system generates demo packets every 3 seconds to showcase the animation system:
- `/api/market/price`
- `/api/models/sentiment`
- `/api/service/rate`
- `/api/monitoring/status`
- `/api/database/query`

## API Integration

### Endpoints Used

- `GET /api/monitoring/status` - System status
- `WS /api/monitoring/ws` - Real-time WebSocket
- `GET /api/monitoring/sources/detailed` - Source details
- `GET /api/monitoring/requests/recent` - Recent requests

### Data Structure

```javascript
{
  database: { online: true },
  ai_models: {
    total: 10,
    available: 8,
    failed: 2,
    models: [...]
  },
  data_sources: {
    total: 15,
    active: 12,
    pools: 3,
    sources: [...]
  },
  recent_requests: [...],
  stats: {
    active_sources: 12,
    requests_last_minute: 45,
    requests_last_hour: 2500
  }
}
```

## Customization

### Colors

You can customize colors in the code:

```javascript
// Node colors
server: '#22c55e'    // Green
database: '#3b82f6'  // Blue
client: '#8b5cf6'    // Purple
source: '#f59e0b'    // Orange
aiModel: '#ec4899'   // Pink

// Packet colors
request: '#8b5cf6'      // Purple
processing: '#22d3ee'   // Cyan
response: '#22c55e'     // Green
final: '#10b981'        // Bright Green
```

### Canvas Size

Adjust in CSS:

```css
.network-canvas-container {
  height: 700px; /* Change this value */
}
```

### Animation Speed

Adjust packet speed:

```javascript
speed: 0.015  // Lower = slower, Higher = faster
```

### Demo Packet Frequency

```javascript
setInterval(() => {
  this.createPacket({ endpoint: randomEndpoint });
}, 3000); // Change interval (milliseconds)
```

## Browser Compatibility

- ✅ Chrome/Edge (Chromium)
- ✅ Firefox
- ✅ Safari
- ✅ Opera

Requires HTML5 Canvas support.

## Performance

- Optimized for 60 FPS
- Automatic cleanup of old packets
- Efficient canvas rendering
- Pauses updates when tab is hidden

## Troubleshooting

### Canvas not showing
- Check browser console for errors
- Ensure canvas element exists in DOM
- Verify JavaScript is enabled

### No animations
- Check WebSocket connection status
- Verify API endpoints are accessible
- Look for rate limiting (429 errors)

### Slow performance
- Reduce canvas size
- Decrease packet generation frequency
- Close other browser tabs

## Future Enhancements

- [ ] Click on nodes to see details
- [ ] Zoom and pan controls
- [ ] Export visualization as image
- [ ] Custom color themes
- [ ] Sound effects for packets
- [ ] 3D visualization mode
- [ ] Historical playback
- [ ] Alert animations for errors

## Credits

Built with ❤️ using:
- HTML5 Canvas API
- WebSocket API
- FastAPI backend
- Modern JavaScript (ES6+)

---

**Version**: 2.0  
**Last Updated**: 2025-12-08  
**Author**: Crypto Monitor Team