safety.viz demo app · design for release 1.11.1 · 13 October 2026

A standard note where R can be started

Decisions for you

Five, each with the recommended answer first. The mockups below show the recommended answers; the first mockup has a switch for each alternative that changes the page.

Round two, 13 October: you read the first round and said "mock-up looks good. Get rid of the data info box." The line on first open is now removed in every mockup, and the five answers stay as recommended until you approve them.

  1. Where the note sits on a chart that draws without R

    • RecommendedAt the top of the chart's card: the same place on every chart and on the RBQM tab, seen without scrolling, and built in safety.viz alone.
    • AlternativeIn place of the line under the chart, where the p-value will be printed. That line is drawn by bio.viz, so it needs a bio.viz release too, and on a tall chart it is below the first screen. Mockup 1, "Note under the chart".
  2. The control at the top right, before R is started

    • RecommendedKept as it is. A reader can then close a blue note and still start R later, and the control stays the one place for progress, the R chip and Why.
    • AlternativeHidden until R is started, so there is one Start R on screen. The blue note then has no cross. Mockup 1, "No control until R starts".
  3. Which charts get the warning

    • RecommendedThe RBQM tab, the Biomarker screen and the Correlation matrix: none of them draws a result without R. Group comparison, Association scatter and Cross-tabulation get the blue note.
    • AlternativeThe warning on the RBQM tab only, and the blue note on all five biomarker charts.
  4. The app's other notes

    • RecommendedOne rule for every note: blue is information, amber is something that cannot run until the reader acts, red is something that failed. So a chart that needs more data, and an RBQM metric the loaded data cannot support, become amber; the rest become blue. The table under "Every note in the app" lists each one.
    • AlternativeSwap purple for blue and change nothing else.
  5. When R does not start

    • RecommendedThe note turns amber, with Try again in its sentence. The chart still stands, and the reader can act.
    • AlternativeRed, as the app's "Did not draw" lines are.

The sentences in the notes are drafts for you to correct. Buttons and links outside a note keep the app's purple: it is the colour of things to press, and only notes change.

Mockups

Each is the released app's own page at 1,280 pixels wide, captured on 13 October 2026, with the proposed note and colours applied to the live page. Today swaps in the same page as released in 1.11.0, which still has the line on first open. Start R and Try again can be clicked in the mockup.

1A chart that draws without R: the blue note

  1. The note, at the top of the chart's card. Blue, with the information mark: the chart is drawn, and R adds its p-values. It says what starting R costs and that the data stays in the browser.
  2. Start R is a button in the sentence. A press does what the control at the top right does. When R did not start, the button reads Try again.
  3. A cross closes a blue note for the visit. The control at the top right is still there.
  4. The line on first open is gone. The chart's card starts right under the chart names. The Data tab still names the loaded study.
  5. The chart's own line no longer points to the top right. It reads "Start R, in the note above", and once R is ready it prints the test as it does today.
  6. The control at the top right is unchanged in every state.

2A chart that cannot be drawn without R: the amber warning

  1. The same note in the same place, as a warning: amber, with the warning mark. The Biomarker screen has nothing to draw until R has run its tests.
  2. Start R in the sentence, as on every note.
  3. No cross. A warning stays until R is started.
  4. The chart's own line points at the note.

3The RBQM tab: the amber warning

  1. The tab's first line becomes the note. It replaces "Site metrics need R. Start R, at the top right." The same note opens each metric's page before a run.
  2. Start R in the sentence. One press runs everything, as the control does today.
  3. While R starts the note is blue, with a spinner and the step it is on; the list of steps under it is today's.
  4. The line on first open is gone, here as on every tab.
  5. The control at the top right is unchanged. After a run there is no note: the results are there, and the R chip.

4A chart with no R: blue for information, and no line on first open

  1. The line on first open is gone.
  2. A sentence that tells the reader how a chart works is the same blue note. Here, the Participant Profile saying how it is opened.

The other three charts

The same note, with no change to its place or its words. Two more charts that draw without R, and one that does not.

Group comparison Info

Cross-tabulation Info

Correlation matrix Warning

Chart or tabWithout RWhat R addsNote
Group comparisonThe tiles, and an open biomarker's chart, are drawnA test under each visit of an open biomarkerInfo
Association scatterThe scatter is drawnThe correlation test and its p-valueInfo
Cross-tabulationThe table and the bars are drawnThe test of the table and its p-valueInfo
Correlation matrixAn empty gridEvery coefficient in the gridWarning
Biomarker screenThe list of biomarkers to screen, and no chartEvery estimate and p-valueWarning
RBQM tab: the overview and each metric's pageNothingEvery metricWarning

The note

One component, drawn here by the page itself in the proposed styles, so the text is live. It has two formats, and the same shape in both: a mark, one sentence with at most one button in it, and a cross only where closing it loses nothing.

Information · R adds p-values · before R is started

This chart’s p-values need R. to add them: about 13 MB, downloaded once. The study’s data stays in this browser.

Warning · the chart cannot be drawn without R

This chart cannot be drawn without R. to draw it: about 13 MB, downloaded once. The study’s data stays in this browser.

Warning · the RBQM tab

The site metrics cannot be worked out without R. to run them: about 55 MB, downloaded once. The study’s data stays in this browser.

While R starts · blue on every chart and tab

R is starting. The p-values appear under the chart when it is ready. 13 MB · 4 s

R did not start · amber on every chart and tab

R did not start, so this chart has no p-values. The reason is behind Why, at the top right.

Every note in the app

What each note looks like in release 1.11.0, and what it becomes under the recommended rule: blue is information, amber is something that cannot run until the reader acts, red is something that failed.

NoteTodayProposedFormat
The line on first openYou are looking at the CDISC pilot study…RemovedGone
A chart that can start R and draws without itStatistics need R. Start R, at the top right.This chart’s p-values need R. Start R to add them…Info
A chart or tab that cannot run without RSite metrics need R. Start R, at the top right.The site metrics cannot be worked out without R. Start R…Warning
R did not startR did not start, so no metric was run. Try again, at the top right.R did not start, so no metric was run. Try again…Warning
A sentence saying how a chart works, or that a file is being readThe participant profile opens beside a chart when…The participant profile opens beside a chart when…Info
A chart the loaded data cannot drawThis chart needs ECG data. Load it on the Data tab.This chart needs ECG data. Load it on the Data tab.Warning
An RBQM metric the loaded data cannot supportThis metric needs the protocol deviations file…This metric needs the protocol deviations file…Warning
A note from loading a file, and a chart library that did not loadThe bio.viz charts are not shown: the file did not load…The bio.viz charts are not shown: the file did not load…Warning
Something that failed to drawDid not draw. The file has no rows.Did not draw. The file has no rows.Problem unchanged

The example sentences in the last four rows are shortened stand-ins; the app's own words do not change there. The docs site, the chart gallery and the charts' own controls are not touched.

What the release holds

One requirement, a patch release cut from the current development branch, which holds nothing else since 1.11.0. Nothing R computes changes, and no file of R's changes.

TaskWhat changesFiles
The note and the coloursOne note component with two formats. The information sentences and the cannot-run boxes use it. Blue and amber named once in the styles. The line on first open is removed, with its tests.src/app/styles.js · a new src/app/note.js · src/app/page.js · src/app/rbqm-view.js
The note on the five biomarker chartsThe page draws the note at the top of the card of a chart whose library can start R, with the format the chart is listed under. The button calls the same press as the control. The sentence handed to the chart's own line says "in the note above".src/app/page.js · src/app/r-on-request.js · src/app/r-words.js · scripts/app-libraries.mjs
The note on the RBQM tabThe tab's first line, on the overview and on each metric's page, becomes the note in each of its states.src/app/rbqm-view.js · src/app/rbqm.js
Tests, evidence and the releaseUnit and browser tests for each state on each kind of chart, at desktop and phone width; the demo-path test presses Start R in the note; evidence refreshed for every chart, since the styles are shared; notes and version 1.11.1.tests/ · NEWS.md · package.json

How the app knows which format a chart gets

Left out

Not verified in these mockups

Captured from the released demo app, safety.viz 1.11.0, on 13 October 2026. The note's proposed styles are in note.css beside this page, and the script that made the captures is capture.cjs.
This report was drafted by Claude Code using Opus 5.5 and reviewed by @jwildfire