Components¶

The package registers two custom elements when it is imported: <sbmlsim-panel>, one panel of a model, and <sbmlsim-app>, the app of a model, which places panels itself. Both have a shadow root, so the styles of the page cannot reach into them and theirs cannot leak into the page; the --sbmlsim-* tokens are the one hook from outside (Embedding).

<sbmlsim-panel>¶

<sbmlsim-panel
  endpoint="https://models.example.org"
  model="hctz"
  panel="renal_plasma"
  fallback="./renal_plasma.json"
  auto
></sbmlsim-panel>

Attributes¶

A change of endpoint, model or panel after the panel started starts it again with what they name.

Methods¶

Events¶

Both bubble and are composed, so they reach the page out of the shadow root of a panel which an app placed.

Parts¶

The panel exposes three parts for ::part(): panel (the whole panel, whose head, body and foot an app lays out as subgrids of its rows), figure (the figure) and foot (the provenance line).

What it does¶

• A request grids over at most one knob. The first run grids over the first range knob at its declared steps, with every other knob at its default, and every movement of that knob is read out of the grid without a request. Releasing another knob runs one simulation which grids over that knob instead, at the value the others now have. An input event interpolates and redraws, a change event schedules a run, and a scheduled run which is superseded is cancelled.
• A range knob may name stops. A range knob whose choices name values inside its bounds draws a select of those stops above its slider; picking one moves the slider there, and a value which is no stop shows custom.
• The readout is a view of the drawn grid. A pointer over the figure draws a crosshair at the nearest time of the grid and a box with the value of every curve there. The figure is also a slider for the keyboard (role="slider"): the arrow keys move the readout one point, Page Up and Page Down a tenth of the axis, Home and End to its ends, and a screen reader hears the values of every curve.
• The study data is one fetch per declaration. It arrives in the unit of the curve it sits under; a series of another unit or under a curve the panel does not draw is left out with one console.warn, and a series which declares the state of the knobs it was measured under (at) is drawn only at that state.
• Nothing rejects into the page. Every failure is caught inside the element and shown as one line which names no url and no host; a request the endpoint shed (a 503 with a Retry-After) is sent again after the time it names, at most six times, while the panel shows that it loads. A failure is no freeze: the next move of a knob runs again.

<sbmlsim-app>¶

<sbmlsim-app endpoint="https://models.example.org" model="hctz" page="renal"></sbmlsim-app>

Attributes¶

The shell has no methods: it starts itself when it is connected and is driven by its attributes alone.

Events¶

The events of its panels (sbmlsim-result, sbmlsim-error) bubble out of the shell as well. sbmlsim-page lets a deployment give its pages addresses and answer the back button by setting page again:

const app = document.querySelector('sbmlsim-app')
app.addEventListener('sbmlsim-page', (event) => {
  history.pushState(null, '', `#${event.detail.page}`)
})
addEventListener('popstate', () => app.setAttribute('page', location.hash.slice(1)))

What it does¶

• It draws the app of the model. The title and the subtitle, the navigation of the pages (none for an app of one page), the switcher of the variants (none for fewer than two), the grid of the panels of the page, as many columns as fit panels of at least 480 px, and the provenance footer: the citation, the DOI and the licenses of the app and the versions which simulated what is shown.
• A knob the panels of a page share is one control. It is drawn once above the grid and every panel which declares it follows it (through its values), so every plot of the page is of the state the controls show.
• A page may name scenarios. A page with scenarios draws a select labelled Example which sets every knob a scenario names in one state.
• A page change swaps the panels. The panels of the page which is left are frozen and removed, the ones of the page which is shown start themselves.
• It follows the variant. A switch of the variant reads the app again in it and passes it to every panel as its variant, holding the figures of the variant before, dimmed, until the new ones are drawn.
• A failure leaves one line, in the voice of the panel, and no navigation, grid or footer.

Failure kinds¶

The kind of sbmlsim-error is a short machine string, and the message is a fixed line per kind (FAILURE_MESSAGES), so nothing a server, a browser or a stack trace writes reaches the page:

A request which was stopped (aborted), superseded by a newer one or stopped by freeze(), is no failure and dispatches nothing.

The exports of the package¶

The module, and the global sbmlsimWeb of the IIFE bundle, export:

The types of every payload (PanelDeclaration, SimulateResponse, AppDeclaration, ...), EndpointFetch and the element types SbmlsimPanelHTMLElement and SbmlsimAppHTMLElement are exported for TypeScript.