Relay Mesh

Orthographic microservice telemetry and semantic causal graphs for high-scale distributed systems.

ROLE:Principal Design Engineer·TIMELINE:2024–2025
STACK:React 19 · WebGL Canvas · R-Tree Spatial Index · Protocol Buffers · Tailwind CSS

The Problem & The Chaos

When an outage storm hits a fintech with 400 microservices, the incident channel explodes. 50 engineers open 12 tabs each: Datadog for APM charts, Jaeger for flame graphs, Grafana for latency curves, and Kubernetes pod logs. The biggest bottleneck during an outage isn't database IO—it's human visual triage under intense cortisol load.

“I don't need another flame graph with 50,000 rows. When checkout fails, I need to know which upstream service broke the circuit in under 30 seconds.”

Traditional observability dashboards present data in disjointed silos. Engineers spend 8 to 14 minutes just cross-referencing trace timestamps. Meanwhile, standard DOM-based SVG graphs freeze the browser when rendering >2,000 trace spans, inducing lag precisely when engineers are under extreme pressure.

The Vision & System Architecture

Relay Mesh unifies topological dependency graphs and span latency waterfalls onto a single 60fps WebGL canvas. Using custom R-tree spatial indexing, we perform raycast hover detection on 25,000 nodes in sub-1ms. When an alert fires, a causal cone algorithm automatically highlights the root anomaly and dims nominal downstream noise.

System Architecture Pipeline
Click any node to inspect data flow & latency
DETERMINISTIC DATA PATH
OTLP Protocol Stream — Binary Ingestion
Stack: Protobuf over WebSocketLatency: 8ms

Decompresses binary OpenTelemetry spans in a Web Worker, batching updates every 16ms.

What I Killed

Building great software is mostly about deciding what *not* to build. Here is what we originally thought would work, why it collapsed in real usability testing, and what we replaced it with.

Design Taste & Trade-Offs

What I Killed: AI Slop vs. Shipped Craft

ITERATION 1 (KILLED)Over-Engineered
Iteration 1: Force-Directed Physics Hairball

Our initial exploration used dynamic D3 force-directed graph physics. When nodes spun up, the whole graph wiggled and repositioned itself dynamically.

Failure Symptoms:
  • ✕Nodes drifted across the screen mid-incident, disorienting engineers trying to click them
  • ✕Burned 85% CPU on physics calculations instead of rendering telemetry data
  • ✕Engineers suffered visual fatigue from chaotic spring oscillations during traffic spikes
Usability Audit: Senior SREs refused to use it in war rooms, citing motion sickness and lack of spatial memory.
SHIPPED IN PRODUCTIONStripped to Essentials
Shipped Version: Deterministic Orthographic Columns

We locked service ingress to rigid columns and rendered dependencies strictly as a left-to-right causal cone. No wandering nodes, no spring wobble. Absolute spatial permanence.

Craft Improvements:
  • ✓Mean Time to Detect (MTTD) dropped from 14.2 minutes down to 3.8 minutes (-73%)
  • ✓Silky smooth 60fps canvas panning at 25,000 active spans
  • ✓Engineers build permanent spatial memory of their cluster architecture
Craft Principle: “In high-severity monitoring, predictability beats novelty every single time.”

Interactive Product Prototype

Try the real component states below. Everything runs client-side in React with real state machines.

Interactive Product Artifact

Relay Mesh Telemetry Canvas

TOPOLOGY HEALTH: 25,400 SPANS/SEC NOMINAL
TOPOLOGICAL CAUSAL CONECLICK NODE TO INSPECT
edge-ingress-gateway
12,400 rpsp99: 18ms
L7 Reverse Proxy & TLS
auth-session-v2
8,200 rpsp99: 34ms
JWT & RBAC Verifier
payment-router.core
3,100 rpsp99: 48ms
ISO8583 Settlement Pipeline
pg-aurora-primary
4,600 rpsp99: 14ms
ACID Transaction Store
fraud-evaluator-ml
2,900 rpsp99: 22ms
ONNX Inference Engine
CANVAS ENGINE: WEBGL / 60 FPSINDEX: R-TREE SPATIAL
SELECTED SPAN WATERFALLpayment-router.core
nominal
idempotency.check8ms
ledger.mutation22ms
webhook.dispatch18ms
TOTAL TRACE TIME48 ms
CLIENT-SIDE REACT // SUB-16MS REACTION LATENCYTEST REAL INTERACTIONS

Takeaways & What I Learned

  • 01.The DOM is not built for high-density data visualizations. Move to Canvas/WebGL early when rendering >1,000 elements.
  • 02.Spatial stability is paramount. An interface whose layout shifts when data changes will destroy an operator's muscle memory.