goal #79 · design exploration · 2026-07-28
Shell + navigation directions for the new app (the open.gismo app-first arc), each carrying the two surfaces you picked alongside it: the chart-viewing workflow and the snapshot / demo-study surface. Directions first, a recommendation, then the recommended frame worked in detail. Everything here is a static mockup with synthetic study content — no real renderers are mounted yet; vendoring the live safety.viz bundle into the winning direction is the next step, per the participant-profile-v2 precedent.
Design language
Today four visual languages coexist: the safety.viz docs site (espresso / paper / burnt orange, Instrument Serif), open.gismo's dark-slate Vite site, gsm.kri's Roboto-and-blue reports, and the deliberately unbranded gray-blue chart chrome. These mockups commit to the safety.viz espresso system as the app's identity — it is the only one explicitly written to be extracted as the shared portfolio stylesheet, it already carries the hub's keynote look, and it makes app and docs one continuous world. The dark-slate look isn't discarded; it becomes raw material for the app's eventual dark theme.
Type: Instrument Serif display · Instrument Sans body · IBM Plex Mono for identifiers, snapshots, and SHAs. (This page falls back to Georgia / system faces if the Instrument families aren't installed locally.) Chart marks use the validated blue–orange series pair; the good/warn/bad trio is reserved for flags and always travels with a text label.
Structure
A Domain is a top-level analytical lens on the same study — its own home view, its own chart registry, its own pipeline workflows, all sharing the study's chrome, cohort, and provenance. The app launches with two: Safety (the safety.viz renderers over mapped clinical data — LB, AE, EG) and RBQM (KRIs, flags, and the site × metric matrix, powered by the gsm.viz widgets and gsm.kri metric workflows). A third domain later — QTL, efficacy, ops — is a registry entry, not a redesign.
The chart gallery — 11 safety.viz renderers over the study's mapped domains, with participant drill-down and the pinned-selection chip.
charts: safety.viz · data: Mapped_LB / AE / EG · workflows: gsm.safety
The monitor — flag tiles, the site × metric matrix, changes since last snapshot, metric drill-downs over time.
charts: gsm.viz widgets · data: Analysis_* / Flags_* · workflows: gsm.kri
What to look at: the domain switcher sits in the global top bar, peer to nothing — it's the app's primary axis. Cohort badge, participant chip, and provenance chip stay put when you switch: same study, different lens. The three directions below predate this concept; the recommendation shows how it snaps them together.
Direction A
"The study's risk state is the home page; charts are drill-downs." The gsm.kri heritage — flags, the group × metric matrix, and what changed since the last snapshot — promoted from a static report to the app's front door.
| Site | AE | SAE | Disc | Query | PD | Lab |
|---|---|---|---|---|---|---|
| S-0084 | ||||||
| S-0121 | ||||||
| S-0056 | ||||||
| S-0170 |
Showing flagged sites · 24 total → open full matrix
What to look at: the espresso side band carries the section nav (Overview / Charts / Data / Snapshots / Evidence — Evidence is first-class, from the safety.viz docs pattern). The top bar holds the three global context devices: study switcher, cohort badge, provenance chip. Risk tiles always carry labels, never color alone. In the domain model, this whole direction survives as the RBQM domain's home.
Direction B
"The charts are the product; the app is the thinnest possible frame around them." The safetyGraphics mental model carried forward — a browsable chart library as home, one click from any card to a full-bleed renderer.
What to look at: the cards are the safety.viz docs gallery, re-homed inside the app — same status vocabulary (Available / Experimental / Prototype), same thumbnails, plus the study's own data behind every card instead of demo data. The frame adds nothing but context: study switcher, four tabs, cohort badge, provenance chip. In the domain model, this gallery is the Safety domain's home.
Direction C
"Every view is a published, versioned artifact — the app is a living study report with history." The most GitHub-native reading of D1: Actions run the pipeline, and this site is what they publish. Snapshots aren't a feature tab; they're the masthead.
What to look at: the masthead is a living title page — study identity in Instrument Serif over espresso, with the snapshot timeline as global chrome: every dot is a published pipeline run, and picking one re-renders the whole site "as of" that snapshot. The Overview interleaves each domain's headline (RBQM flags, Safety charts) with a link into its full home. This is also exactly what a forked K3 demo-study repo publishes, unchanged.
★ Recommendation
Winner: Direction C (Study site) — and the Domain concept makes the graft structural rather than cosmetic: C is the frame, the Safety domain is B's gallery, the RBQM domain is A's monitor, and the study Overview interleaves each domain's headline. Two reasons. First, alignment: the locked decisions all point here — D1 makes GitHub the acceptance path, D6 puts snapshots in v1 and in the keynote demo, K3 makes the demo a forkable study repo that publishes a live site. C is the only direction where those aren't features bolted onto an app; they're the app. Second, differentiation: safetyGraphics already exists as "a frame around charts" — B alone would be a prettier reimplementation. The versioned, provenance-forward study site is what the gsm substrate makes newly possible.
Runner-up: B (Gallery) — the fallback if v1 scope tightens, since it's the smallest step from what exists. A (Monitor) shouldn't lead — gsm.kri's report already serves the monitoring loop — but as the RBQM domain's home it gets a first-class seat without owning the frame.
Worked surface 1
The loop, in the recommended frame: home → chart → participant. From the masthead, a gallery card opens the chart page below. The shell must host four content shapes — canvas chart, table-first (AE Explorer), chart + docked rail (below), and small multiples — so the chrome commits to a three-zone grid: controls left, content center, drill-down rail right, any zone collapsible.
What to look at: the per-chart header keeps safetyGraphics' micro-labeled summary (name / type / domain) and adds the evidence count as a trust signal, with the docs site's Chart | Guide | Evidence sub-tabs in-app. Clicking a flagged point docks the participant rail (safety.viz's existing 520px pattern) and pins the participant as a global chip in the top bar — safetyGraphics' best navigation device, kept. The selection chip follows you to any other chart.
Worked surface 2
D6 makes snapshots v1 scope; the deferred Project Snapshot Comparison from open.gismo's todo is the natural centerpiece. Two selectors, a change summary, and a per-artifact diff — phase-tagged with open.gismo's existing color ramp, the one piece of its current vocabulary these mockups keep.
| Artifact | Phase | Change | Note |
|---|---|---|---|
| Flags_Site.csv | Reporting | 2 flags changed | S-0084 AE rate amber → red · S-0033 SAE resolved |
| Analysis_ALT.csv | Metrics | +12 rows · 3 changed | new visit-8 labs, S-0084-011 peak updated |
| Mapped_AE.csv | Mappings | +38 rows | new cycle of AE data in dv-2026-07-25 |
| manifest.csv | Config | 1 pin bumped | gsm.kri 1.2.3 → 1.2.4 |
Row-level diff opens in the data viewer · every value links to its artifact in both snapshots
What to look at: comparison respects the static-files contract — it's a client-side diff of two published snapshot trees, no server. The K3 strip is the demo-study story told as product copy; in direction C it doubles as the app's own onboarding page.
Signature component
No provenance badge exists anywhere in the ecosystem today, yet every ingredient does — snapshot id and date, input data version, the gsm.library manifest pins, engine versions, the CI run. This component composes them: a quiet chip in the global chrome of every direction, expanding to the full reproducibility record. It's the one element that says what this app is about — numbers you can trace.
Collapsed — global chrome
✓ snap 2026-07-26 · 9c41f2aGreen check = CI run passed and every pin resolves. A changed or unverifiable state turns the chip amber with a label — never color alone.
Expanded — the reproducibility record
Open decisions
| ID | Decision | Recommendation |
|---|---|---|
| D-APP0 | The app needs a name. Mocks show the open.gismo wordmark (repo reality), but the safetyGraphics successor deserves a product name of its own. | Decide before requirements — the name lands in Phase 1 scope, the plan rewrite, and the keynote. |
| D-APP1 | Adopt the safety.viz espresso tokens as the app design system (vs open.gismo's dark slate, vs something new). | Yes — espresso. One portfolio language; dark slate becomes the dark theme's starting material. |
| D-APP2 | Shell frame: C (study site) hosting B's gallery and A's overview strip. | As recommended above — most aligned with D1/D6/K3, most differentiated from safetyGraphics. |
| D-APP3 | The chart chrome (sv-* shell) is theme-agnostic with no CSS hook, so charts will sit visually apart from any app frame. | Add CSS-variable hooks to the sv shell — this is safety.viz#41's scope; the app becomes its first consumer. |
| D-APP4 | One maturity vocabulary across app and charts (safety.viz has status pills + in-chart banners; R packages have lifecycle badges). | Adopt safety.viz's trio (Available / Experimental / Prototype) app-wide; add "Legacy-hosted" for Shiny-shimmed widgets. |
| D-APP5 | Provenance chip as global chrome in every direction. | Yes — net-new signature component; composes only data that already exists in the snapshot tree. |
| D-APP6 | Mapping/readiness surface: safetyGraphics' gating step, reduced to red/green borders there. Static-files contract means the app can't edit mappings — only show their state. | v1 = read-only readiness panel per domain (mapped / missing / defaulted), linking to the workflow YAML that fixes it. |
| D-APP7 | The Domain model: Safety + RBQM at launch, each a registry entry binding a home view, a chart set (safety.viz / gsm.viz), and a workflow family (gsm.safety / gsm.kri). How extensible, and where is the registry defined? | Registry-driven, defined in study config — a domain is data, not code; the data/config framework doc carries the details. |
Next steps
If a direction (or the graft) holds after your pass: ① vendor the real safety.viz dist bundle + synthetic data into the chosen frame so the chart page runs live, per the participant-profile-v2 mockup precedent; ② promote the chosen direction into the app-first plan rewrite on #34 as its UI headline; ③ publish the exploration to the hub's reports/ for the permanent record. Comments on any D-APP item work like the #130 review — one-liners are enough. The data & config framework companion doc carries the D-FW ledger for everything below the UI.