mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

prototype slide 07: variant D — ontology left, right panel 'The output: text becomes recorded data' (quantitative data on records / into DWH flow / as if typed at the visit)

Browse Source
This commit is contained in:
Codex
2026-09-07 22:58:19 +02:00
parent 446c39b372
commit bdfdfca2e5
1 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/prototype/slide07-ontology.html
+47 -3
View File
@@ -8,7 +8,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>PROTOTYPE · Slide 07 "The clinical ontology" — 3 layout variants</title>
<title>PROTOTYPE · Slide 07 "The clinical ontology" — 4 layout variants</title>
<link rel="stylesheet" href="/deck/fonts.css">
<style>
:root {
@@ -98,6 +98,19 @@
.vc-why .pt:last-child { border-bottom: none; }
.vc-why .pt .num { color: var(--bordeaux-deep); }
/* ================= VARIANT D — ontology left, output panel right ================= */
.vd-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: stretch; flex: 1; min-height: 0; }
.vd-points { margin-top: 4px; }
.vd-points .pt { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.vd-points .pt:last-child { border-bottom: none; }
.vd-out { border: 1px solid var(--bordeaux); background: var(--bordeaux-tint); border-radius: 10px;
padding: 16px 18px 10px; display: flex; flex-direction: column; }
.vd-out .pt { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(143,18,4,.18); }
.vd-out .pt:last-child { border-bottom: none; }
.vd-out .pt .num { color: var(--bordeaux-deep); }
.vd-out .pt b { color: var(--bordeaux-deep); }
.vd-out .pt .d { font: 400 12.5px/1.45 var(--sans); color: var(--ink); }
/* ---- floating switcher (not part of the design) ---- */
.switcher { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 99;
display: flex; align-items: center; gap: 10px; background: #1d1a1b; color: #fff;
@@ -111,7 +124,7 @@
<body>
<div class="proto-head">
<b>PROTOTYPE · slide 07 — the clinical ontology</b>
<span>Three layout variants · EN primary (bold dark) over IT gloss (secondary) · A = three columns (your idea) · B = editorial bands · C = ontology + "why order matters" panel</span>
<span>Four layout variants · EN primary (bold dark) over IT gloss (secondary) · A = three columns (your idea) · B = editorial bands · C = ontology + "why order matters" panel · D = ontology + output panel (right)</span>
</div>
<div class="frame">
@@ -222,14 +235,45 @@ function variantC() {
</div>`;
}
// ---- variant D: ontology left, "the output" right (user request) ----
const OUTPUT = [
{ n: '01', b: 'Quantitative data on the records', d: 'every procedure and implant the text analysis reads is written back as structured, quantitative values on the record that describes it' },
{ n: '02', b: 'Straight into the DWH flow', d: 'these records enter the data-warehouse generation like any other source' },
{ n: '03', b: 'As if typed at the visit', d: 'the data lands exactly as if clinicians had keyed it in themselves during the visits' },
];
function variantD() {
return `
<div class="vd-split">
<div>
<div class="vc-tier">
<div class="col-h">Tier 1 · arrhythmic<span class="n">11</span></div>
<div class="vc-chips">${T1.map(c => pill(c, true)).join('')}</div>
</div>
<div class="vc-tier">
<div class="col-h">Tier 2 · structural<span class="n">5</span></div>
<div class="vc-chips">${T2.map(c => pill(c, false)).join('')}</div>
</div>
<div class="vd-points">${POINTS.map(p => `
<div class="pt"><span class="num">${p.n}</span><div><b>${p.b}</b> <span class="d">— ${p.d}</span></div></div>`).join('')}
</div>
</div>
<div class="vd-out">
<div class="vc-why-h" style="margin-bottom:8px">The output: text becomes recorded data</div>
${OUTPUT.map(p => `
<div class="pt"><span class="num">${p.n}</span><div><b>${p.b}</b><div class="d" style="margin-top:2px">${p.d}</div></div></div>`).join('')}
</div>
</div>`;
}
// ---- switcher ----
const VARIANTS = [
{ key: 'A', name: 'Three columns (5-6 per column)', render: variantA },
{ key: 'B', name: 'Editorial bands, big numerals', render: variantB },
{ key: 'C', name: 'Ontology + why-order panel', render: variantC },
{ key: 'D', name: 'Ontology + output panel (right)', render: variantD },
];
function current() {
const k = (location.search.match(/variant=([ABC])/) || [])[1] || 'A';
const k = (location.search.match(/variant=([ABCD])/) || [])[1] || 'A';
return Math.max(0, VARIANTS.findIndex(v => v.key === k));
}
function show(i) {