The biomarker app: three shells and a Data page

What reads as ad hoc Shiny

The charts are fine. The page around them is Shiny's default page, and a reader who has used the safety.viz demo app or any product site will see it in the first second.

• No header. A 22px title and a grey sentence float in the corner. There is no band, no mark, no name a reader would repeat, and nothing that says which study is loaded until they read the small print.
• Bootstrap 3's blue stacked list. The active item is a solid blue block with 12px margins between items; it is the look of every Shiny tutorial since 2014, and it is the one element on the page that is not in the charts' visual family (the charts use a soft grey panel, 1px rules and a 6px radius).
• The list and the chart share one grid with nothing between them. The chart's own Controls panel starts flush against the list, so a reader sees two columns of controls side by side and has to work out which belongs to what.
• The Data page is a form. Three grey Browse boxes with a blue progress bar each, headings in three sizes, and the column questions as a flex row of selects. The thing it is for, "which column is which", has no visual grammar: a guessed column and an unsaid one look the same until you read the words.
• Nothing persists. The source line is a sentence under the title; the "computed by R" line is a footer that scrolls away. Both are facts a reader should be able to find from any chart without scrolling.
• On a phone the list wins. Seven items stacked one under another take the top half of the first screen; the chart's own collapsed Controls bar sits under them, and the first tile starts two thirds of the way down.

What every option has to respect

• The chart is the chart. Each of the six is a bio.viz widget with its own Controls panel, title, footnotes, statistics line and downloads. The shell wraps it and never redraws a control as a Shiny input or restyles anything inside it. A chart wants about 1000px at desktop width and has to work at 390px, where its own Controls panel collapses to a bar.
• One Shiny app, one app.R, Posit Connect. Shiny is the only interface dependency, and it is suggested, not imported; the package's imports cannot grow. HTML and CSS written with shiny's own tags cost nothing. A new package such as bslib is possible but is a new Suggests entry and a larger Connect manifest; every option below says whether it needs one, and none does.
• Two facts stay visible. Which R computed the statistics, and that loaded files live in this session's memory and nowhere else.
• 390px, no sideways scroll, keyboard. Shiny's tab links are real anchors, so a shell that keeps them keeps keyboard navigation for free.
• The browser tests find things by id. The source line, the table viewer, the file inputs, the column selects, the Draw button and the tab links. Each option says which it keeps.
• Public or synthetic data only. Every mockup uses the synthetic study's real names and counts: 200 participants, 11,472 results, 12 biomarkers, 5 visits, and made-up file names such as lb.xpt and dm.csv.

The app this one should look related to

The program already has one professional web app with a header, a chart list and a data page: the safety.viz demo app. Its header is a light band with a serif name and a row of pills, one per data domain, each carrying a count; the charts of a domain are a second row of pills. Its Data page is a three-step rail on the left (load files, check the mapping, open a chart) with the loaded files listed under it, and on the right a drop zone and one card per file showing what the charts need against what the file calls it, with a small tag per row: same name, guessed, optional.

Its type and colour come from the same stylesheet as bio.viz's own site: an espresso band, warm paper, orange for the accent, a serif for names and headings. Both families are on the table below: option A borrows the demo app's light header, option B borrows the site's espresso band. The mockups on this page use system fonts because the page loads nothing from outside; the real app would ask for the family's web fonts and fall back to the system ones where a server cannot reach them.

Three shells, honestly different

Each option is drawn at 1280px with a chart in place and at 390px, then its Data page in three states: as it opens on the synthetic study; a results file chosen with two columns still to say, an outcomes file R could not read, and the button pressed once; and applied on the reader's files with no outcomes table. The chart in every desktop frame is a still of the real chart element, captured from the running app and scaled to the room the shell gives it; the phone frames use a still of the real chart at 390px with its Controls collapsed.

Option A · A sibling of the safety.viz demo app

One light header band carries the name, a row of pills (Data first, then the six charts) and a study chip on the right that always says what the charts are drawn on. The chart sits in a white card under it and gets the full width. On a phone the pills scroll sideways under the name, like the demo app's.

Biomarker charts GSM.BIO 0.4.0

Data 3 TABLES Group comparison Association scatter Correlation matrix Biomarker screen Cross-tabulation Stratified survival

Synthetic study 200 PARTICIPANTS · 3 TABLES

Every statistic is computed on request by R 4.3.3 with gsm.bio 0.4.0 on this server. Files you load are held in this session's memory and nowhere else.

Biomarker charts GSM.BIO

Data 3 Group comparison Association scatter Correlation

What the shell is made of

• The header is a div of shiny tags above a tab set of type pills, restyled by about sixty lines of CSS. The pills are Shiny's own tab links, so they stay anchors, keep keyboard focus and keep the data-value the tests click.
• The study chip is the existing source output, moved into the header and wrapped in a link to the Data tab.
• The footer is the existing footer sentence plus the session sentence, in one line.
• No new package. The only JavaScript is six lines that scroll the active pill into view on a phone.

A's Data page: as it opens on the synthetic study

A three-step rail on the left, exactly the demo app's grammar: choose files, say which column is which, draw the charts. The right side shows what the charts are drawn on now, ten rows a page, then one card per table the reader can load.

A's Data page: a file chosen, two columns to say, one file R could not read, the button pressed once

A's Data page: applied on the reader's files, with no outcomes table

Option B · A workbench with bio.viz's espresso rail

The chart list stays on the left, but becomes the product's spine: a dark band in the colour of bio.viz's own site header, holding the name, a card for the study that is loaded, the six charts grouped by the question each answers with a line of description under each, and the two standing facts at the bottom. Data is not a seventh item in the list; it is the study card, which opens the study page.

Biomarker chartsGSM.BIO 0.4.0

Study

The synthetic study that ships with gsm.bio
200 participants · 12 biomarkers · 5 visits · 3 tables
Change data →

Compare

Group comparisonone biomarker between groups, over the visits

Cross-tabulationtwo categories, with a cut on a biomarker

Relate

Association scattertwo variables, one point per participant

Correlation matrixevery pair of biomarkers at one visit

Screen

Biomarker screenevery biomarker on one comparison

Outcomes

Stratified survivalhigh against low, with a Kaplan–Meier curve

Statistics by R 4.3.3 with gsm.bio 0.4.0 on this server.
Files you load stay in this session's memory and nowhere else.

Group comparison

IL-6 over time · drawn on the synthetic study

Biomarker charts

Group comparison▾

Synthetic study · 3 tablesChange data

What the shell is made of

• The existing stacked list, kept as it is and restyled: the grouping labels and descriptions are added to the tab titles as tags, the band is CSS. The tab links stay anchors with their data-value.
• The study card is the existing source output with the counts added, inside a link to the Data tab; the Data tab's own link is hidden from the list and reached through the card.
• The phone drop-down is a select that drives the tab set, which is a Shiny input, but an input of the shell, not of a chart. It is the one piece of this option that has to be written in R rather than CSS.
• No new package.

B's Data page: the study page, as it opens

Under B the Data page is where the study card leads: three table cards saying what is loaded, a stepped flow for loading a study of your own, one step shown at a time, and a peek at the rows of each table.

B's Data page: step 2, two columns to say, one file not read, the Review step pressed once

B's Data page: applied, no outcomes table

Option C · Chart first, Data as a drawer

No list. A thin white bar holds the name, a segmented switcher for the six charts and, on the right, a study chip that says what is loaded. The chart gets everything under the bar. Data is not a page: the chip opens a drawer over the chart, with a three-step flow inside it, and the chart is still there, dimmed, when the drawer closes.

Biomarker chartsGSM.BIO 0.4.0

Group comparisonAssociation scatterCorrelation matrixBiomarker screenCross-tabulationStratified survival

Synthetic study 3 TABLESData

Every statistic is computed on request by R 4.3.3 with gsm.bio 0.4.0 on this server. Files you load are held in this session's memory and nowhere else.

Biomarker charts

Group comparison▾Data 3

What the shell is made of

• A tab set of type hidden holds the six charts; the segmented switcher is a radio group styled as segments on desktop and a select on a phone, each a Shiny input of the shell that updates the tab set.
• The drawer is a div that a few lines of JavaScript show and hide; the existing Data view sits inside it unchanged. Shiny draws an output only when it is visible, so opening the drawer draws the viewer then, which is what today's tab does.
• The source output becomes the chip's text.
• No new package, but the most JavaScript of the three: about forty lines for the drawer, the escape key and focus.

C's drawer: as it opens on the synthetic study

Biomarker chartsGSM.BIO 0.4.0

Group comparisonAssociation scatterCorrelation matrixBiomarker screenCross-tabulationStratified survival

Synthetic study 3 TABLESData

Data×

Drawn on now

Results · 11,472 rowsParticipants · 200Outcomes · 200

Row	USUBJID	VISIT	VISITNUM	TEST	STRESN
1	BIO-001	Baseline	0	IL-6	6.927
2	BIO-001	Week 2	2	IL-6	5.473
3	BIO-001	Week 4	4	IL-6	5.9
4	BIO-001	Week 8	8	IL-6	6.379
5	BIO-001	Week 12	12	IL-6	5.879

PreviousNextRows 1 to 5 of 11,472 · the synthetic study that ships with gsm.bio

A study of your own

1Choose files

2Say columns

3Draw

Results

needed · .csv, .xpt or .sas7bdat

Participants, optionalOutcomes, optional

Read by R on this server and held in this session's memory only.

C's drawer: step 2 on a phone, two columns to say, one file not read, Draw pressed once

Eight calls that can be made separately

Each option bundles answers to these. They can be unbundled: pick a shell, then override any of these.

Build A, with two things from B