static/pages/system-monitor/README.md

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

{
  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:

// 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:

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

Animation Speed

Adjust packet speed:

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

Demo Packet Frequency

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