Archived Design Explorations
The following mockups were developed during the earlier smart-blocks design phase. They represent interaction concepts that may inform future iterations.
Compute Node Display Views#
Golden Signals View
┌────────────────────┐
│ ▓▓▓▓▓░░░ LAT 45ms │
│ ▓▓▓░░░░░ RPS 120 │
│ ▓░░░░░░░ ERR 2.1% │
│ ▓▓▓▓▓▓░░ SAT 78% │
└────────────────────┘
Connection View
┌────────────────────┐
│ → DB-Primary │
│ → Cache-01 │
│ ← LB-01 │
│ ↔ Worker-02 │
└────────────────────┘
Live Requests View
┌────────────────────┐
│ GET /api/users │
│ ├─► db.query() │
│ └─► cache.get() │
│ 23ms ✓ │
└────────────────────┘
Storage Node Display Views#
Database Mode
┌────────────────────┐
│ PostgreSQL [PRIMARY]│
│ QPS: 1.2k Conn: 45│
│ Rep Lag: 12ms │
│ ████████░░ 80% full│
└────────────────────┘
Cache Mode
┌────────────────────┐
│ Redis [REPLICA 2/3]│
│ Hit: 94% Mem: 2.1G│
│ Keys: 45.2k │
│ Evictions: 23/min │
└────────────────────┘
Replication View
┌────────────────────┐
│ ┌───┐ │
│ │ P │ ──► R1 ✓ │
│ └───┘ ──► R2 ✓ │
│ ──► R3 ⚠ │
│ lag: 0, 0, 45ms│
└────────────────────┘
Digital Twin Interface#
Simulation Controls
┌─────────────────────────────────────────────────────────────┐
│ ◀◀ ◀ [▶ PLAY] ▶ ▶▶ Speed: [1x ▼] │
│ │
│ Step: 47/312 Time: 00:00:12.450 │
│ ═══════════════●════════════════════════════════ │
└─────────────────────────────────────────────────────────────┘
Distributed Trace View (Jaeger-style)
┌─────────────────────────────────────────────────────────────────┐
│ Trace: req-7f3a2b Duration: 127ms Spans: 5 │
├─────────────────────────────────────────────────────────────────┤
│ LB-01 ████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 3ms │
│ Worker-02 ██████████████████████████████████████ 112ms │
│ ├─ db.query ████████████████████████░░░░░░░░░ 89ms │
│ ├─ cache.get ████░ 8ms │
│ └─ transform ██ 4ms │
│ DB-Primary ████████████████████████░░░░░░░░░ 89ms │
│ Cache-01 ████░ 8ms │
│ ────────────────────────────────────────────────────────────── │
│ 0ms 25ms 50ms 75ms 100ms 127ms │
└─────────────────────────────────────────────────────────────────┘
Time-Step Exploration#
Step-by-step execution allows pausing the simulation and advancing one step at a time to observe each operation sequentially.
Step 1: Request arrives at Load Balancer
┌──────┐ ┌──────┐ ┌──────┐
│ LB │ ← ━━━━━ │ │ │ │
│ ●●●● │ req │ Srv │ │ DB │
└──────┘ └──────┘ └──────┘
↑ ACTIVE dim dim
Step 2: LB routes to Server
┌──────┐ ┌──────┐ ┌──────┐
│ LB │ ━━━━━ → │ Srv │ │ DB │
│ ○○○○ │ req │ ●●●● │ │ │
└──────┘ └──────┘ └──────┘
done ↑ ACTIVE dim
Step 3: Server queries Database
┌──────┐ ┌──────┐ ┌──────┐
│ LB │ │ Srv │ ━━━━━ → │ DB │
│ │ │ ◐◐◐◐ │ query │ ●●●● │
└──────┘ └──────┘ └──────┘
done waiting ↑ ACTIVE
System Architecture Diagram (Original)#
┌─────────────────────────────────────────────────────────────┐
│ DIGITAL TWIN (Web UI) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ Topology │ │ Time-step │ │ Distributed Trace │ │
│ │ View │ │ Controller │ │ (Jaeger-style) │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
▲
│ WebSocket
▼
┌─────────────────────────────────────────────────────────────┐
│ ORCHESTRATOR (Raspberry Pi 4) │
│ • Simulation engine (controls timing, injects requests) │
│ • Trace collector │
│ • Network coordinator │
│ • REST API for UI │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
│ I2C Bus │ UART │ ESP-NOW
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ COMPUTE │ │ STORAGE │ │ NETWORK │
│ NODE │───│ NODE │───│ NODE │
└───────────┘ └───────────┘ └───────────┘