230 lines
16 KiB
HTML
230 lines
16 KiB
HTML
<!doctype html>
|
||
<!-- PROTOTYPE (throwaway) — Option C "Maturity rail", revised per user feedback:
|
||
connector starts from the Marts stage · no live/next badges · uniform stroke
|
||
intensity · texts inside boxes capitalized · EN translation same size as Italian.
|
||
This is the only variant carried forward; A and B were discarded. -->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>PROTOTYPE · Slide “The problem” — outputs rail from the datamarts (option C, revised)</title>
|
||
<link rel="stylesheet" href="/deck/fonts.css">
|
||
<style>
|
||
:root {
|
||
--bordeaux: #cb333b; --bordeaux-deep: #8f1204; --bordeaux-tint: #f4dfe1;
|
||
--surface: #fdfcfc; --surface-alt: #f6f5f5; --surface-sunken: #ecebeb;
|
||
--ink: #2a2426; --ink-muted: #6b6568;
|
||
--line: #e3e0e1; --line-strong: #c9c5c6;
|
||
--sans: 'Source Sans 3', system-ui, sans-serif;
|
||
--display: 'Source Serif 4', Georgia, serif;
|
||
--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; background: #e9e7e7; font-family: var(--sans); padding: 26px 0 90px; }
|
||
.proto-head { text-align: center; margin: 0 0 14px; }
|
||
.proto-head b { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bordeaux); }
|
||
.proto-head span { display: block; margin-top: 6px; font: 400 13px/1.4 var(--sans); color: var(--ink-muted); }
|
||
|
||
/* ---- slide frame (deck-like, 1200×690) ---- */
|
||
.frame { width: 1200px; height: 690px; margin: 0 auto; background: var(--surface);
|
||
display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(42,36,38,.18); overflow: hidden; }
|
||
.head { flex: 0 0 74px; display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 40px; border-bottom: 1px solid var(--line); }
|
||
.head img { height: 54px; display: block; }
|
||
.head-org { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
|
||
.band { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 40px; background: var(--bordeaux); color: var(--surface); }
|
||
.band b { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
|
||
.sbody { flex: 1; min-height: 0; display: flex; flex-direction: column;
|
||
padding: 20px 48px 14px; text-align: left; }
|
||
.foot { flex: 0 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
|
||
padding: 0 40px; border-top: 1px solid var(--line);
|
||
font: 600 9.5px/1.4 var(--sans); letter-spacing: .03em; color: var(--ink-muted); }
|
||
.kicker { font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 10px; }
|
||
h2 { font: 700 27px/1.15 var(--sans); letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; }
|
||
|
||
.quote { position: relative; margin: 0 0 10px; padding: 14px 22px 11px 64px; border: 1px solid var(--line);
|
||
background: var(--surface-alt); border-radius: 8px;
|
||
font: italic 400 16.5px/1.5 var(--display); color: var(--ink); }
|
||
.quote::before { content: '\201C'; position: absolute; left: 18px; top: 6px;
|
||
font: 700 44px/1 var(--display); color: var(--bordeaux); }
|
||
.tr-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; align-items: center; }
|
||
.tr-grid .it, .tr-grid .en { margin: 0; }
|
||
.tr-grid .en { padding-left: 18px; border-left: 1px solid var(--line-strong);
|
||
font: 400 16.5px/1.5 var(--sans); color: var(--bordeaux-deep); }
|
||
.en-tag { display: inline-block; margin-right: 7px; padding: 2px 7px; border-radius: 4px;
|
||
background: var(--bordeaux); color: #fdfcfc; font: 700 9px/1 var(--sans); letter-spacing: .12em; vertical-align: 3px; }
|
||
|
||
.pipeline { display: flex; align-items: stretch; gap: 10px; }
|
||
.stage { flex: 1; padding: 10px 8px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); }
|
||
.stage b { display: block; font: 700 12.5px/1.2 var(--sans); margin-bottom: 3px; text-transform: uppercase; }
|
||
.stage span { display: block; font: 400 10.5px/1.35 var(--sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .02em; }
|
||
.stage .tag { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 9999px;
|
||
background: var(--bordeaux); color: #fdfcfc; font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
|
||
.brain { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
|
||
border-radius: 9999px; background: #fff; border: 1.5px solid var(--bordeaux); }
|
||
.brain svg { width: 26px; height: 26px; color: var(--bordeaux); }
|
||
.stage.ai { background: var(--bordeaux-tint); border-color: var(--bordeaux); }
|
||
.arrow { align-self: center; color: var(--line-strong); font: 700 17px/1 var(--sans); }
|
||
.stage.hot { background: #fdf1f2; border-color: var(--bordeaux); }
|
||
|
||
.thoth-wrap { position: relative; display: flex; justify-content: flex-end; margin-top: 10px; }
|
||
.thoth-col { width: 500px; text-align: center; }
|
||
.thoth-box { border: 1px solid var(--bordeaux); border-radius: 8px; padding: 9px 14px;
|
||
background: var(--surface-alt); font: 600 11.5px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .02em; }
|
||
.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; }
|
||
.t-conn { position: absolute; width: 2px; background: var(--bordeaux); }
|
||
.t-head { position: absolute; width: 0; height: 0; border: 5px solid transparent;
|
||
border-bottom: 7px solid var(--bordeaux); transform: translateX(-50%); }
|
||
|
||
/* ---- deep-dive concepts (center-left) ---- */
|
||
.midrow { display: flex; gap: 28px; margin-top: 10px; 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: 6px 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) ---- */
|
||
.railwrap { position: relative; display: flex; justify-content: flex-end; }
|
||
.conn-drop { position: absolute; top: -14px; width: 2px; background: var(--bordeaux); }
|
||
.conn-elbow { position: absolute; height: 2px; background: var(--bordeaux); }
|
||
.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;
|
||
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::before { content: ''; position: absolute; left: -2px; top: 50%; width: 14px; height: 2px; background: var(--bordeaux); }
|
||
.rail .row .oicon { flex: 0 0 26px; width: 26px; height: 26px; color: var(--bordeaux); display: block; }
|
||
.rail .row b { font: 700 13.5px/1.2 var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
|
||
.rail .row span.d { font: 400 11px/1.3 var(--sans); color: var(--ink-muted); }
|
||
|
||
.caption { max-width: 1200px; margin: 12px auto 0; text-align: center;
|
||
font: 400 12.5px/1.5 var(--sans); color: var(--ink-muted); }
|
||
.caption b { color: var(--ink); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="proto-head">
|
||
<b>Prototype (revised) — slide “The problem” · outputs rail from the datamarts</b>
|
||
<span>Option C only: connector from Marts · no status badges · uniform intensity · capitalized box texts.</span>
|
||
</div>
|
||
|
||
<div class="frame">
|
||
<div class="head">
|
||
<img src="/deck/logo.png" alt="">
|
||
<span class="head-org">AritmoLab · Policlinico San Donato</span>
|
||
</div>
|
||
<div class="band"><b>The problem</b><span style="font:700 11px/1 var(--sans)">04 · The problem</span></div>
|
||
<div class="sbody">
|
||
<div class="kicker">From free text to a research platform</div>
|
||
<h2>The clinical truth lives in unstructured columns</h2>
|
||
<div class="quote">
|
||
<div class="tr-grid">
|
||
<p class="it">“Il paziente riferisce sincope ricorrente; ECG basale con sopraslivellamento ST in V1–V3; test provocativo con flecainide positivo per pattern Brugada.”</p>
|
||
<p class="en"><span class="en-tag">EN</span>“The patient reports recurrent syncope; baseline ECG with ST-segment elevation in V1–V3; flecainide provocation test positive for a Brugada pattern.”</p>
|
||
</div>
|
||
</div>
|
||
<div class="pipeline" id="pipeline">
|
||
<div class="stage"><b>Sources</b><span>Cardioref · Genetic data<br>Omics Portal · ECG</span></div>
|
||
<div class="arrow">→</div>
|
||
<div class="stage"><b>Staging</b><span>raw replica</span></div>
|
||
<div class="arrow">→</div>
|
||
<div class="stage ai"><b>Integration</b><span>3NF · text mining</span><span class="brain" style="margin-top:5px"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4 C11 2 5.5 4 6 8.5 C2.5 10 2 14.5 4.5 17 C2.5 20 4 24.5 8 25 C9 28 14 29.5 16 27"/><path d="M16 4 C21 2 26.5 4 26 8.5 C29.5 10 30 14.5 27.5 17 C29.5 20 28 24.5 24 25 C23 28 18 29.5 16 27"/><path d="M16 4.5 V26.5"/><path d="M16 10 h4.5"/><circle cx="23" cy="10" r="1.7" fill="currentColor" stroke="none"/><path d="M16 15.5 h-4.5"/><circle cx="8.5" cy="15.5" r="1.7" fill="currentColor" stroke="none"/><path d="M16 21 h4.5"/><circle cx="23" cy="21" r="1.7" fill="currentColor" stroke="none"/></svg></span></div>
|
||
<div class="arrow">→</div>
|
||
<div class="stage"><b>Data Warehouse</b><span>star schema</span></div>
|
||
<div class="arrow">→</div>
|
||
<div class="stage hot" id="marts"><b>Marts</b><span>dbt · Superset</span></div>
|
||
</div>
|
||
<div class="midrow">
|
||
<div class="concepts">
|
||
<div class="lbl">four challenges to face · the answers come next</div>
|
||
<div class="citem"><span class="n">01</span><div><b>Volume without structure</b><span class="d">twenty years of records locked in free-text columns</span></div></div>
|
||
<div class="citem"><span class="n">02</span><div><b>Ambiguous language</b><span class="d">negation · family history · bilingual shorthand</span></div></div>
|
||
<div class="citem"><span class="n">03</span><div><b>No shared ontology</b><span class="d">every system names conditions its own way</span></div></div>
|
||
<div class="citem"><span class="n">04</span><div><b>Proving reliability</b><span class="d">extraction must be demonstrably correct</span></div></div>
|
||
</div>
|
||
<div class="railwrap" id="railwrap">
|
||
<div class="conn-drop" id="conn-drop"></div>
|
||
<div class="conn-elbow" id="conn-elbow"></div>
|
||
<div class="rail" id="rail">
|
||
<div class="lbl">outputs of the datamarts</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="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>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 & risk analysis</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="thoth-wrap" id="thothwrap">
|
||
<div class="t-conn" id="t-conn"></div>
|
||
<div class="t-head" id="t-head"></div>
|
||
<div class="thoth-col">
|
||
<div class="thoth-box"><span class="brain" style="margin-right:9px; vertical-align:middle"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4 C11 2 5.5 4 6 8.5 C2.5 10 2 14.5 4.5 17 C2.5 20 4 24.5 8 25 C9 28 14 29.5 16 27"/><path d="M16 4 C21 2 26.5 4 26 8.5 C29.5 10 30 14.5 27.5 17 C29.5 20 28 24.5 24 25 C23 28 18 29.5 16 27"/><path d="M16 4.5 V26.5"/><path d="M16 10 h4.5"/><circle cx="23" cy="10" r="1.7" fill="currentColor" stroke="none"/><path d="M16 15.5 h-4.5"/><circle cx="8.5" cy="15.5" r="1.7" fill="currentColor" stroke="none"/><path d="M16 21 h4.5"/><circle cx="23" cy="21" r="1.7" fill="currentColor" stroke="none"/></svg></span>ThothII — natural-language → SQL over the DWH, builds the final datamarts</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>Role of AI in the Analysis of Unstructured Clinical Databases</span><span>Dr. Marco Pancotti - MultiPhysixLab</span><span>Dr. Sara Paratico - Gruppo San Donato</span><span>San Donato Milanese, Milan, Italy · 2–3 October 2026</span><span>04 / 14</span></div>
|
||
</div>
|
||
|
||
<p class="caption"><b>Option C, revised.</b> The rail drops straight from the Marts stage; the three outputs have equal
|
||
visual weight and no status labels; texts inside the diagram boxes are capitalized; the EN translation is now the same size as the Italian.</p>
|
||
|
||
<script>
|
||
// Draw the connector: vertical drop from the center of the Marts stage,
|
||
// elbow leftward, into the top of the rail.
|
||
function alignConnector() {
|
||
const marts = document.getElementById('marts');
|
||
const rail = document.getElementById('rail');
|
||
const wrap = document.getElementById('railwrap');
|
||
const drop = document.getElementById('conn-drop');
|
||
const elbow = document.getElementById('conn-elbow');
|
||
const mr = marts.getBoundingClientRect();
|
||
const rr = rail.getBoundingClientRect();
|
||
const wr = wrap.getBoundingClientRect();
|
||
const cx = mr.left + mr.width / 2 - wr.left; // Marts center, wrap coords
|
||
const railLeft = rr.left - wr.left; // rail border x, wrap coords
|
||
const railTop = rr.top - wr.top; // rail top, wrap coords
|
||
drop.style.left = (cx - 1) + 'px';
|
||
drop.style.top = '-' + (rr.top - mr.bottom + 2) + 'px';
|
||
drop.style.height = (rr.top - mr.bottom + 2 + railTop) + 'px';
|
||
elbow.style.left = railLeft + 'px';
|
||
elbow.style.width = Math.max(0, cx - railLeft) + 'px';
|
||
elbow.style.top = (railTop - 1) + 'px';
|
||
|
||
// ThothII arrow: from the box up to the Marts stage, along the right margin
|
||
const pipe = document.getElementById('pipeline');
|
||
const twrap = document.getElementById('thothwrap');
|
||
const box = twrap.querySelector('.thoth-box');
|
||
const conn = document.getElementById('t-conn');
|
||
const head = document.getElementById('t-head');
|
||
const pr = pipe.getBoundingClientRect();
|
||
const tr = twrap.getBoundingClientRect();
|
||
const br = box.getBoundingClientRect();
|
||
const x = tr.width - 10; // right margin, under Marts
|
||
const top = pr.bottom - tr.top + 2; // just under the pipeline
|
||
const boxTop = br.top - tr.top;
|
||
conn.style.left = x + 'px';
|
||
conn.style.top = top + 'px';
|
||
conn.style.height = Math.max(0, boxTop - top) + 'px';
|
||
head.style.left = x + 'px';
|
||
head.style.top = (top - 7) + 'px';
|
||
}
|
||
addEventListener('load', alignConnector);
|
||
addEventListener('resize', alignConnector);
|
||
if (document.fonts && document.fonts.ready) document.fonts.ready.then(alignConnector);
|
||
alignConnector();
|
||
</script>
|
||
</body>
|
||
</html>
|