Segmented Bar Latency Budget Block for React

Edit BUDGET (milliseconds), HOPS (the hops in the order the request travels, each with a fill) and RELEASES: each has a ms list for its hops and a before list for the release before it. The total, the margin to the budget, the verdict, the scale of the bar and its ticks (up to the next hundred above the longest total) and every signed change are computed from those lists. The numbers are example data.

Choose v8.3: its hops add up to 269 ms, so the bar runs past the budget tick, the verdict reads "Over budget by 19 ms" and a destructive dot appears beside it. The words carry the meaning, so the dot is never the only signal, and it is the only warning mark in the block.

The bar is an image with a text alternative that lists every hop's milliseconds, the total and the budget; the same numbers are in the four-cell band, which is a description list. A polite live region announces the verdict when you switch release. The switch is a radio group: arrow keys move between releases.

The switch moves under the header and the four cells go two by two, with the same hairlines. The bar keeps its proportions, the budget label sits on the start side of its tick, and nothing scrolls sideways at 320 pixels.

The frame fades up once on load. Switching release slides the segments to their new widths and rolls the changed digits. With reduced motion the bar and the numbers change in place with no transition.

Yes. The bar and its scale are a measurement, so they keep a left-to-right direction; the labels, the milliseconds and the signed changes are isolated so a minus or a plus stays beside its number.