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

prototype: fill empty center with text-analysis deep-dive preview (01-04 concepts) beside the outputs rail

Browse Source
This commit is contained in:
Codex
2026-09-07 17:24:04 +02:00
parent 260bb174a2
commit de1524838f
1 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/prototype/slide05-outputs.html
+38 -18
View File
@@ -72,11 +72,22 @@
.thoth-box .tag { display: inline-block; margin-right: 7px; padding: 2px 9px; border-radius: 9999px; .thoth-box .tag { display: inline-block; margin-right: 7px; padding: 2px 9px; border-radius: 9999px;
background: var(--bordeaux); color: #fdfcfc; font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; } background: var(--bordeaux); color: #fdfcfc; font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
/* ---- deep-dive concepts (center-left) ---- */
.midrow { display: flex; gap: 28px; margin-top: 18px; align-items: flex-start; }
.concepts { flex: 1; min-width: 0; }
.concepts .lbl { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--bordeaux); margin: 0 0 4px; }
.citem { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.citem:last-child { border-bottom: none; }
.citem .n { font: 700 11px/1 var(--mono); color: var(--bordeaux); }
.citem b { font: 700 12.5px/1.3 var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.citem span.d { font: 400 11px/1.4 var(--sans); color: var(--ink-muted); margin-left: 8px; }
/* ---- outputs rail (option C, revised) ---- */ /* ---- outputs rail (option C, revised) ---- */
.railwrap { position: relative; display: flex; justify-content: flex-end; margin-top: 18px; } .railwrap { position: relative; display: flex; justify-content: flex-end; }
.conn-drop { position: absolute; top: -14px; width: 2px; background: var(--bordeaux); } .conn-drop { position: absolute; top: -14px; width: 2px; background: var(--bordeaux); }
.conn-elbow { position: absolute; height: 2px; background: var(--bordeaux); } .conn-elbow { position: absolute; height: 2px; background: var(--bordeaux); }
.rail { width: 560px; border-left: 2px solid var(--bordeaux); padding-top: 14px; } .rail { width: 540px; border-left: 2px solid var(--bordeaux); padding-top: 14px; }
.rail .lbl { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; .rail .lbl { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--bordeaux); margin: 0 0 6px 16px; } color: var(--bordeaux); margin: 0 0 6px 16px; }
.rail .row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 16px; position: relative; } .rail .row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 16px; position: relative; }
@@ -122,22 +133,31 @@
<div class="arrow">→</div> <div class="arrow">→</div>
<div class="stage hot" id="marts"><b>Marts</b><span>dbt · Superset</span></div> <div class="stage hot" id="marts"><b>Marts</b><span>dbt · Superset</span></div>
</div> </div>
<div class="railwrap" id="railwrap"> <div class="midrow">
<div class="conn-drop" id="conn-drop"></div> <div class="concepts">
<div class="conn-elbow" id="conn-elbow"></div> <div class="lbl">coming up — how we read the text</div>
<div class="rail" id="rail"> <div class="citem"><span class="n">01</span><div><b>Audited numbers</b><span class="d">58,438 letters · 73,389 pathologies · 2,307 Brugada patients</span></div></div>
<div class="lbl">outputs of the datamarts</div> <div class="citem"><span class="n">02</span><div><b>Hard clinical NLP</b><span class="d">negation · family attribution · two languages</span></div></div>
<div class="row"> <div class="citem"><span class="n">03</span><div><b>Clinical ontology</b><span class="d">two tiers, ordered by clinical precedence</span></div></div>
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 29 h26"/><rect x="7" y="17" width="5" height="12" rx="1"/><rect x="15" y="9" width="5" height="20" rx="1"/><rect x="23" y="13" width="5" height="16" rx="1"/></svg> <div class="citem"><span class="n">04</span><div><b>Trust by design</b><span class="d">quality gates on 100 manual reviews</span></div></div>
<b>Dashboards</b><span class="d">clinical review on Superset</span> </div>
</div> <div class="railwrap" id="railwrap">
<div class="row"> <div class="conn-drop" id="conn-drop"></div>
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="7" cy="7" r="2.6"/><circle cx="7" cy="27" r="2.6"/><circle cx="17" cy="17" r="3.4"/><circle cx="27" cy="7" r="2.6"/><circle cx="27" cy="27" r="2.6"/><path d="M9.3 8.8 L14.6 14.6"/><path d="M9.3 25.2 L14.6 19.4"/><path d="M19.4 14.6 L24.7 8.8"/><path d="M19.4 19.4 L24.7 25.2"/></svg> <div class="conn-elbow" id="conn-elbow"></div>
<b>Machine Learning</b><span class="d">cohort tables for model training</span> <div class="rail" id="rail">
</div> <div class="lbl">outputs of the datamarts</div>
<div class="row"> <div class="row">
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 27 L11 19 L17 22 L23 13"/><path d="M23 13 L30 6" stroke-dasharray="3 3.4"/><circle cx="30" cy="6" r="2.2" fill="currentColor" stroke="none"/><path d="M3 31 h28" opacity=".35"/></svg> <svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 29 h26"/><rect x="7" y="17" width="5" height="12" rx="1"/><rect x="15" y="9" width="5" height="20" rx="1"/><rect x="23" y="13" width="5" height="16" rx="1"/></svg>
<b>Predictive Statistics</b><span class="d">outcomes &amp; risk analysis</span> <b>Dashboards</b><span class="d">clinical review on Superset</span>
</div>
<div class="row">
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="7" cy="7" r="2.6"/><circle cx="7" cy="27" r="2.6"/><circle cx="17" cy="17" r="3.4"/><circle cx="27" cy="7" r="2.6"/><circle cx="27" cy="27" r="2.6"/><path d="M9.3 8.8 L14.6 14.6"/><path d="M9.3 25.2 L14.6 19.4"/><path d="M19.4 14.6 L24.7 8.8"/><path d="M19.4 19.4 L24.7 25.2"/></svg>
<b>Machine Learning</b><span class="d">cohort tables for model training</span>
</div>
<div class="row">
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 27 L11 19 L17 22 L23 13"/><path d="M23 13 L30 6" stroke-dasharray="3 3.4"/><circle cx="30" cy="6" r="2.2" fill="currentColor" stroke="none"/><path d="M3 31 h28" opacity=".35"/></svg>
<b>Predictive Statistics</b><span class="d">outcomes &amp; risk analysis</span>
</div>
</div> </div>
</div> </div>
</div> </div>