Data Export Settings Block for React

Edit the constants at the top. RECIPES is the section with several parts and SINGLES the parts that stand alone; each part has an id, a label, a one-line hint, its size in mb and the ids it needs. SPEED is how many megabytes an archive is built a minute, which drives the time, and FIRST is the list of past requests. Sizes should come from your own counts: the totals, the time and the photo line are all computed from them.

Each part lists the parts it can't be read without. Ticking one adds whatever is missing and the status line names it; unticking one removes every ticked part that needs it and names those too. The section box is ticked when all its parts are, mixed when some are, and pressing it ticks or unticks the lot, with the same rules. Because the rules live in one function, adding a part is a new entry in the data and nothing else.

A row is added to the list with today's date, the format, the file count and the size, and its status is Processing. Nothing is prepared, sent or downloaded: no file exists, and the row stays Processing in this demo. To make it real, send the chosen part ids and the format to your server in the submit handler, and update the list from your own queue. The export dialog that hands over a real file is a separate block.

Because building an archive is the expensive part, so a second request while one is waiting is refused: the status line says to cancel the waiting one first, and focus moves to its cancel button. Cancelling turns the row to Cancelled, says so, and puts focus back on the request button. Choosing nothing is refused too, with focus on the first box. The button stays visible and focusable in both cases and is marked aria-disabled rather than disabled.

The size stays the same, but the number of files doesn't: JSON and NDJSON make one file per section, CSV one flat file per part, so a seven-part choice is four JSON files or seven CSV files. The line under the control says what each format is for. The figures update as you tick parts or switch format, and the list's rows keep a fixed height, so requesting never moves the page.

The tree keeps its boxes, hints wrap under the names and the sizes stay at the end of each row. The three figures stay in a row, the requests list keeps its three rows and the action bar is pinned to the bottom of the screen so the button is always in reach.