Pipeline Config Settings Block for React

Edit SAVED (the stages when the page opens: each has an id, a name, whether it is on, its limit in minutes, whether it runs in parallel and its trigger), TRIGGERS and ADDABLE, the three stages Add stage brings. MAX_STAGES and MAX_PARALLEL cap the pipeline and a column. The canvas, the lines, the order sentence and the unsaved count are all worked out from the stages.

columnsOf turns the stages into columns: a stage that runs in parallel joins the previous column while it has room (three at most), otherwise it starts a new one. The cards are placed in a grid from that, and the SVG, which has the same columns and rows in its coordinates, draws a hairline from every card to every card of the next column. The lines are decoration and hidden from assistive technology; the cards are buttons in an ordered list in the same order, and the sentence under the canvas says it again, so nothing depends on seeing the drawing. A canvas that needs more room than the window has scrolls sideways inside its own focusable region.

It is the worst case, not a forecast: every stage may run up to its time limit, stages in a column run at the same time so the column takes its longest limit, and the columns run one after another. A stage that is off takes no time. Nothing runs here: the limits are typed sample data, so replace them with the times from your own history if you want a forecast.

Everything. Save keeps the stages in this page's state, Remove and Undo walk a stack in the page, and a reload brings back the starting pipeline. To make it real, store the stage list and each stage's trigger and limit on your server, run the stages from it with the same column rule, and enforce the limits in the runner. Save refuses an empty limit or one outside 1 to 60 minutes, selects the stage and moves focus to its limit field.

Below the medium breakpoint the window shows one pane at a time: the canvas becomes a list of stages (a group that runs together is labelled In parallel) and choosing one opens its inspector with a Back button that returns focus to the stage. With a keyboard, Tab runs through the cards in order and then the inspector; the Earlier and Later buttons stay focusable at the ends and say why they do nothing, and after a move focus stays on the pressed button.