Rate Limiting Settings Block for React

By a plain function over the typed requests, run in order. A fixed window allows a request while fewer than the limit have been allowed in its window, and starts the count again at each window edge. A sliding window allows it while fewer than the limit were allowed in the window's length just before it. A token bucket starts full, refills at the limit divided by the window, and spends one token for each request it allows. The burst allowance is the most requests accepted in the same second for the two windows, and the size of the bucket for the token bucket. The result is worked out on every render, so the ticks, the counts and the sentence always agree.

Edit REQUESTS, a list of millisecond offsets from the first request, and AXIS_MS, the length of the strip. Keep the ticks at least 200 ms apart so the hollow marks don't overlap at 320 px. SAVED is the setting the account has stored when the page opens, and ALGORITHMS and WINDOWS fill the two menus.

The ticks are decoration: the strip is one image named with the whole result (the algorithm, the counts and the first rejection), and the same facts are written next to it as text, with the counts in large figures. A rejected request differs from an allowed one by lane and by shape, a hollow bar under the line, so nothing relies on colour. The time axis is drawn left to right in every language, because time on it runs one way.

All of it. Nothing is limited, counted or sent: Save keeps the setting in this page and says so, and the requests are typed. To make it real, send the saved algorithm, limit, window and burst to your gateway, and feed the strip your own recent requests for a client instead of the typed ones. Run the same decision on the gateway, so what the strip shows is what clients get.

The block keeps two copies of the setting, the saved one and the one being edited, and counts how many of the four controls differ ("2 changes not saved yet."). Save makes the edited copy the saved one; Discard puts the saved copy back and redraws the limit field. Both stay in place and focusable while nothing changed, marked aria-disabled, and say so when pressed.

The strip and its verdict come first, so the effect of a change is on screen above the controls that make it, and the controls stack under it at full width. The sentence under the controls reserves its room, so a longer one never moves the foot, which stays pinned to the bottom of the screen while you scroll.