Google Cloud List Integration Block for React

Edit DAYS at the top of the file, newest first: each day has an ISO date, the expected rows, the rows loaded and a state (loaded, partial or failed). The weekday comes from the date itself ("2026-10-13" is "Tue 13 Oct"), never from the clock, so the page reads the same on every day and in every browser. The size is worked out from the rows (ROW_BYTES, about 98 bytes an event row), and the bar, the counts in the foot line and the partition name are worked out from the same data.

No. Backfill shows the day as running for about 900 milliseconds and then as loaded with every expected row. The foot line says so from the first paint ("Backfill changes this page only. Nothing is sent to Google Cloud.") and takes focus when a backfill finishes, so the result is read out. In a real product, wire backfill to your own reload of that day's partition.

The rows live in a region seven rows tall that takes keyboard focus: the arrow, Page and Home keys scroll it. The 7-day choice fills it exactly; the 14-day choice scrolls inside it and returns to the top when you switch. Because the height is fixed, switching never moves the foot band or anything below the block.

The days choice is a labelled segmented group, the window is a labelled region you can focus, and each Backfill button is named for its day ("Backfill Fri 9 Oct") and marked busy while it runs. The state is a dot and a word, never colour alone, and only the failed day uses the status colour. The rows loaded are read with their unit.

On a phone each row keeps the date, the state and Backfill, with the rows and size on a second line, and the window is a little taller so two lines fit. Partition names, numbers and the bar keep their left-to-right order in a right-to-left layout while the rows themselves flip. The header fades up once on load and the bars change width briefly; reduced motion turns both off and the running dot stops pulsing.