Database Schema Changelog Block for React

Edit TABLES at the top of the file. A table has an id, a top and an x (its place on the stage in pixels and in percent of the stage's width) and its columns; a column has a name, a type, pk, an fk (the table and column it points at) and an optional mark (NEW or CHANGED). The cards, the foreign-key curves and the dots at their ends are all computed from that list.

Each row of a card is a fixed 28 pixels and each header 36, so a column's height on the stage is known. A small helper turns every foreign key into one cubic curve in a 100-wide, stretched SVG and two dots placed with CSS variables, so the lines follow the cards as the stage changes width. The drawing is hidden from assistive technology; the same facts are in words on every foreign-key row, and the list of tables is real HTML.

It marks that table's relations and presses its name button (aria-pressed): the lines touching the table turn heavier, and the columns at both ends of each one get a solid shade, which also works on the stacked cards of a phone where there are no lines. Pressing it again, or another table, takes it back. It only changes local state.

By an icon and a word: sparkles and "New", a pencil and "Changed". A new table also gets a heavier border. A screen reader hears "was text" after the changed column's type.

The cards stack in one column (two from sm), and each foreign key says "references users.id" under its name; the lines and dots are hidden. The key to the marks moves under the cards. The migration list keeps its rows, with the id, day and tag above each name.

The stage is a figure and stays left to right, as a diagram should, so the lines never cross the wrong way. The header, the caption and the migration list follow the reading direction.