← Gallery

OSPF failover — failure visualization (network-xray gallery)

A redundant triangle (r1–r2–r3). Cut the shortest path and watch OSPF detour; cut the backup too and r3 goes isolated. Driven through the tidy xrayCore facade — compare the code at the bottom. Open the router (click r2) to see the forwarding decision inside.

// load: xray-core.js (engine) + xray-api.js (this facade) + your data
var view = xrayCore.renderTopology('#topo', DEMO_CONFIG, {
  topology: DEMO.normal.topo,   // Seam A (per-link UP/DOWN)
  trace:    DEMO.normal.trace   // Seam B (path arrows)
});

// each button = one snapshot, three tidy calls
view.setTopology(scene.topo);
view.setTrace(scene.trace);
view.applyState(scene.state);

// zoom into the target router's internals (the "inside the router" cylinder):
view.openDeepDive();   // ◂ and view.closeDeepDive() to zoom back out

// for a live feed instead of static snapshots:
// view.startPolling(() => fetch('/api/state').then(r => r.json()), 3000);