shadcn.io is not affiliated with official shadcn/ui
Fiber Network Map Block for Radix UI
Eight cities joined by eleven backbone links drawn on a diagram, line width set by capacity; choose a link, cut it with a switch and a shortest-path search re-routes five city pairs with latency before and after.
Installation
Overview
Show what a fiber cut costs, with this fiber network map for React with Radix UI. Strandlight, a carrier network, draws eight cities as numbered squares on a diagram, not a map, joined by eleven backbone links whose line width is their capacity: 10, 40, 100 or 400 Gbps. A list of links is the way in: choose one and a Switch cuts it, and the cut link turns dotted and says "Cut" in the list and on the diagram. Dijkstra's algorithm over the links still in service then re-routes five typed city pairs, and a Table gives each pair's latency before and after, the cities it now passes through, or "Unreachable" when no path remains, with the change in milliseconds. The header says the result in a sentence ("2 links cut: 3 of 5 routes change, 1 unreachable") and a polite message speaks it after each change. It's built from Switch, Table and Guides, with a CSS entrance only. For carriers, network operations tools and resilience reviews.
FAQ
How is the new route chosen?
routeOf runs Dijkstra's shortest-path search over LINKS minus the links in the cut list, weighing each link by its ms latency. It returns the total and the cities in between, or nothing when the far city cannot be reached. The Before column is the same search with no cuts, computed once.
Can I cut more than one link?
Yes. Choose a link in the list (or its pill on the diagram), turn the switch on, then choose another. Every cut stays until you turn its switch off. Cutting both links that serve Wrexby shows the Unreachable state.
How do I use my own cities and links?
Edit CITIES (a name and a position in the diagram's 480 by 360 units), LINKS (two ends, a latency and a capacity) and PAIRS, the routes the table follows. The widths come from widthOf, and the search needs no change for a different graph.
Can I use it without a mouse?
Yes. The list of links is the keyboard route: each row is a button that says whether the link is in service, the switch is a labelled control and the table is plain text. The pills and squares on the diagram are a pointer shortcut and are hidden from assistive technology.
What stays local in the demo, and how do I wire it up?
All of it. The cities, latencies and capacities are invented and nothing is switched. In your app feed LINKS from your inventory system, and send the cut to a what-if service that returns the new path latencies instead of running the search in the page.