diff --git a/clinicians.html b/clinicians.html index 86cc9f1..7bf191e 100644 --- a/clinicians.html +++ b/clinicians.html @@ -373,7 +373,12 @@

Field Definitions

Side of Tumor Center

Defined as the anatomical laterality of the tumor center based on the position of the TC barycenter relative to the brain midline, for example left, right, or midline.

-
F003_tumor_laterality
+
+ F003 – Side of Tumor Center +
+ RightCentral/bilateralLeft +
+
@@ -381,7 +386,12 @@

Side of Tumor Center

Enhancement Quality

Qualitative assessment of CET contrast enhancement, indicating whether enhancement is present and how pronounced it appears.

-
F005_enhancement_quality
+
+ F005 – Enhancement Quality +
+ NoneMinimal/mildMarked +
+
@@ -389,7 +399,12 @@

Enhancement Quality

Definition of the Enhancing Margin

Assesses whether most of the outer margin of the enhancement is well defined or poorly defined.

-
F010_enhancing_margin
+
+ F010 – Definition of the Enhancing Margin +
+ Well-definedPoorly-defined +
+
@@ -397,7 +412,12 @@

Definition of the Enhancing Margin

Definition of the Non-Enhancing Margin

Assesses whether most of the outer margin of the non-enhancing component is well defined or poorly defined.

-
F011_non_enhancing_margin
+
+ F011 – Definition of the Non-Enhancing Margin +
+ Well-definedPoorly-defined +
+
@@ -405,7 +425,12 @@

Definition of the Non-Enhancing Margin

Intratumoral Hemorrhage

Assesses whether intrinsic hemorrhage is visible anywhere in the tumor matrix.

-
F012_intratumoral_hemorrhage
+
+ F012 – Intratumoral Hemorrhage +
+ NoYes +
+
@@ -413,7 +438,6 @@

Intratumoral Hemorrhage

Tumor Heterogeneity

The degree of heterogeneity of the internal architecture of the tumor.

-
F015_tumor_heterogeneity
@@ -421,7 +445,6 @@

Tumor Heterogeneity

Number of Lesions

Number of independent lesions observed in the brain.

-
F018_number_of_lesions
@@ -429,7 +452,12 @@

Number of Lesions

Type of Lesion

Categorical variable indicating the observed lesion type. Possible values: single, multicentric, or multifocal.

-
F019_lesion_type
+
+ F019 – Type of Lesion +
+ SingleMultifocalMulticentric +
+
@@ -437,7 +465,12 @@

Type of Lesion

Ependymal Invasion

Assesses whether the TC abuts any adjacent ependymal surface.

-
F020_ependymal_invasion
+
+ F020 – Ependymal Invasion +
+ NoYes +
+
@@ -445,7 +478,6 @@

Ependymal Invasion

Depth of TC

Determines the depth of the TC. Possible values: cortical, subcortical white matter, deep white matter, and basal nuclei.

-
F021_tc_depth
@@ -453,7 +485,6 @@

Depth of TC

Tumor Center Macroarea

The macroarea, or lobe, in which the barycenter lies, obtained using the atlas.

-
F022_center_macroarea
@@ -461,7 +492,6 @@

Tumor Center Macroarea

Midline Shift

The shift of the midline caused by the tumor mass, in millimeters.

-
F023_midline_shift
@@ -469,7 +499,6 @@

Midline Shift

Tumor Shape

The approximate shape of the tumor mass.

-
F024_tumor_shape
@@ -477,7 +506,6 @@

Tumor Shape

Tumor Origin

Where the tumor originates, according to the categories: periventricular, gyral, or deep white matter.

-
F025_tumor_origin
@@ -485,7 +513,6 @@

Tumor Origin

Tumor Crosses Midline

Indicates whether the tumor crosses the midline.

-
F026_midline_crossing
@@ -493,7 +520,6 @@

Tumor Crosses Midline

Subject-Specific Findings

Any subject-specific findings that do not fall under any predefined category.

-
F027_subject_specific_findings
@@ -762,7 +788,12 @@

Definizione dei Campi

Lato del Centro del Tumore

Definito come la lateralità anatomica del centro del tumore in base alla posizione del baricentro del TC rispetto alla linea mediana del cervello, ad esempio sinistra, destra o linea mediana.

-
F003_lateralita_tumore
+
+ F003 – Lato del Centro del Tumore +
+ DestraCentrale/bilateraleSinistra +
+
@@ -770,7 +801,12 @@

Lato del Centro del Tumore

Qualità dell'Enhancement

Valutazione qualitativa dell'enhancement del contrasto CET, indicando se l'enhancement è presente e quanto appare pronunciato.

-
F005_qualita_enhancement
+
+ F005 – Qualità dell'Enhancement +
+ AssenteMinimo/lieveMarcato +
+
@@ -778,7 +814,12 @@

Qualità dell'Enhancement

Definizione del Margine Enhancing

Valuta se la maggior parte del margine esterno dell'enhancement è ben definita o scarsamente definita.

-
F010_margine_enhancing
+
+ F010 – Definizione del Margine Enhancing +
+ Ben definitoScarsamente definito +
+
@@ -786,7 +827,12 @@

Definizione del Margine Enhancing

Definizione del Margine Non-Enhancing

Valuta se la maggior parte del margine esterno della componente non-enhancing è ben definita o scarsamente definita.

-
F011_margine_non_enhancing
+
+ F011 – Definizione del Margine Non-Enhancing +
+ Ben definitoScarsamente definito +
+
@@ -794,7 +840,12 @@

Definizione del Margine Non-Enhancing

Emorragia Intratumorale

Valuta se un'emorragia intrinseca è visibile in qualsiasi punto della matrice tumorale.

-
F012_emorragia_intratumorale
+
+ F012 – Emorragia Intratumorale +
+ No +
+
@@ -802,7 +853,6 @@

Emorragia Intratumorale

Eterogeneità del Tumore

Il grado di eterogeneità dell'architettura interna del tumore.

-
F015_eterogeneita_tumore
@@ -810,7 +860,6 @@

Eterogeneità del Tumore

Numero di Lesioni

Numero di lesioni indipendenti osservate nel cervello.

-
F018_numero_lesioni
@@ -818,7 +867,12 @@

Numero di Lesioni

Tipo di Lesione

Variabile categorica che indica il tipo di lesione osservata. Valori possibili: singola, multicentrica o multifocale.

-
F019_tipo_lesione
+
+ F019 – Tipo di Lesione +
+ SingolaMultifocaleMulticentrica +
+
@@ -826,7 +880,12 @@

Tipo di Lesione

Invasione Ependimale

Valuta se il TC è a contatto con una superficie ependimale adiacente.

-
F020_invasione_ependimale
+
+ F020 – Invasione Ependimale +
+ No +
+
@@ -834,15 +893,13 @@

Invasione Ependimale

Profondità del TC

Determina la profondità del TC. Valori possibili: corticale, sostanza bianca sottocorticale, sostanza bianca profonda e nuclei della base.

-
F021_profondita_tc
F022

Macroarea del Centro del Tumore

-

La macroarea, o lobo, in cui ricade il baricentro, ottenuta utilizzando l'atlante.

+

La macroarea, o lobo, in cui ricade il baricentro.

-
F022_macroarea_centro
@@ -850,7 +907,6 @@

Macroarea del Centro del Tumore

Spostamento della Linea Mediana

Lo spostamento della linea mediana causato dalla massa tumorale, in millimetri.

-
F023_spostamento_linea_mediana
@@ -858,7 +914,6 @@

Spostamento della Linea Mediana

Forma del Tumore

La forma approssimativa della massa tumorale.

-
F024_forma_tumore
@@ -866,7 +921,6 @@

Forma del Tumore

Origine del Tumore

Dove origina il tumore, secondo le categorie: Periventricolare, Girale, Sostanza bianca profonda.

-
F025_origine_tumore
@@ -874,7 +928,6 @@

Origine del Tumore

Il Tumore Attraversa la Linea Mediana

Indica se il tumore attraversa la linea mediana.

-
F026_crossing_linea_mediana
@@ -882,7 +935,6 @@

Il Tumore Attraversa la Linea Mediana

Reperti Specifici del Soggetto

Qualsiasi reperto specifico del soggetto che non rientra in alcuna categoria predefinita.

-
F027_reperti_specifici
diff --git a/index.html b/index.html index f718a5e..ee29f5d 100644 --- a/index.html +++ b/index.html @@ -379,6 +379,144 @@

Annotators Version in English

+
+

Field Definitions

+
+
+
+
+ F003 +

Side of Tumor Center

+

Anatomical laterality of the tumor center relative to the brain midline: left, right, or midline.

+
+
+ F003 – Side of Tumor Center +
+
+
+
+ F005 +

Enhancement Quality

+

Qualitative assessment of CET contrast enhancement, including whether it is present and how pronounced it appears.

+
+
+ F005 – Enhancement Quality +
+
+
+
+ F010 +

Definition of the Enhancing Margin

+

Whether most of the outer enhancing margin is well defined or poorly defined.

+
+
+ F010 – Definition of the Enhancing Margin +
+
+
+
+ F011 +

Definition of the Non-Enhancing Margin

+

Whether most of the outer non-enhancing component margin is well defined or poorly defined.

+
+
+ F011 – Definition of the Non-Enhancing Margin +
+
+
+
+ F012 +

Intratumoral Hemorrhage

+

Whether intrinsic hemorrhage is visible anywhere in the tumor matrix.

+
+
+ F012 – Intratumoral Hemorrhage +
+
+
+
+ F015 +

Tumor Heterogeneity

+

Degree of heterogeneity of the tumor internal architecture.

+
+
+
+
+ F018 +

Number of Lesions

+

Number of independent lesions observed in the brain.

+
+
+
+
+ F019 +

Type of Lesion

+

Categorical lesion type: single, multicentric, or multifocal.

+
+
+ F019 – Type of Lesion +
+
+
+
+ F020 +

Ependymal Invasion

+

Whether the TC abuts an adjacent ependymal surface.

+
+
+ F020 – Ependymal Invasion +
+
+
+
+ F021 +

Depth of TC

+

Possible values: cortical, subcortical white matter, deep white matter, and basal nuclei.

+
+
+
+
+ F022 +

Tumor Center Macroarea

+

The macroarea or lobe in which the barycenter lies.

+
+
+
+
+ F023 +

Midline Shift

+

Shift of the midline caused by the tumor mass, reported in millimeters.

+
+
+
+
+ F024 +

Tumor Shape

+

Approximate shape of the tumor mass.

+
+
+
+
+ F025 +

Tumor Origin

+

Likely origin category: periventricular, gyral, or deep white matter.

+
+
+
+
+ F026 +

Tumor Crosses Midline

+

Whether the tumor crosses the midline.

+
+
+
+
+ F027 +

Subject-Specific Findings

+

Any subject-specific finding that does not fall under a predefined category.

+
+
+
@@ -434,7 +572,9 @@

Definizione dei Campi

Lato del Centro del Tumore

Definito come la lateralità anatomica del centro del tumore in base alla posizione del baricentro del TC rispetto alla linea mediana del cervello, ad esempio sinistra, destra o linea mediana.

-
F003_lateralita_tumore
+
+ F003 – Lato del Centro del Tumore +
@@ -442,7 +582,9 @@

Lato del Centro del Tumore

Qualità dell'Enhancement

Valutazione qualitativa dell'enhancement del contrasto CET, indicando se l'enhancement è presente e quanto appare pronunciato.

-
F005_qualita_enhancement
+
+ F005 – Qualità dell'Enhancement +
@@ -450,7 +592,9 @@

Qualità dell'Enhancement

Definizione del Margine Enhancing

Valuta se la maggior parte del margine esterno dell'enhancement è ben definita o scarsamente definita.

-
F010_margine_enhancing
+
+ F010 – Definizione del Margine Enhancing +
@@ -458,7 +602,9 @@

Definizione del Margine Enhancing

Definizione del Margine Non-Enhancing

Valuta se la maggior parte del margine esterno della componente non-enhancing è ben definita o scarsamente definita.

-
F011_margine_non_enhancing
+
+ F011 – Definizione del Margine Non-Enhancing +
@@ -466,7 +612,9 @@

Definizione del Margine Non-Enhancing

Emorragia Intratumorale

Valuta se un'emorragia intrinseca è visibile in qualsiasi punto della matrice tumorale.

-
F012_emorragia_intratumorale
+
+ F012 – Emorragia Intratumorale +
@@ -474,7 +622,6 @@

Emorragia Intratumorale

Eterogeneità del Tumore

Il grado di eterogeneità dell'architettura interna del tumore.

-
F015_eterogeneita_tumore
@@ -482,7 +629,6 @@

Eterogeneità del Tumore

Numero di Lesioni

Numero di lesioni indipendenti osservate nel cervello.

-
F018_numero_lesioni
@@ -490,7 +636,9 @@

Numero di Lesioni

Tipo di Lesione

Variabile categorica che indica il tipo di lesione osservata. Valori possibili: singola, multicentrica o multifocale.

-
F019_tipo_lesione
+
+ F019 – Tipo di Lesione +
@@ -498,7 +646,9 @@

Tipo di Lesione

Invasione Ependimale

Valuta se il TC è a contatto con una superficie ependimale adiacente.

-
F020_invasione_ependimale
+
+ F020 – Invasione Ependimale +
@@ -506,7 +656,6 @@

Invasione Ependimale

Profondità del TC

Determina la profondità del TC. Valori possibili: corticale, sostanza bianca sottocorticale, sostanza bianca profonda e nuclei della base.

-
F021_profondita_tc
@@ -514,7 +663,6 @@

Profondità del TC

Macroarea del Centro del Tumore

La macroarea, o lobo, in cui ricade il baricentro, ottenuta utilizzando l'atlante.

-
F022_macroarea_centro
@@ -522,7 +670,6 @@

Macroarea del Centro del Tumore

Spostamento della Linea Mediana

Lo spostamento della linea mediana causato dalla massa tumorale, in millimetri.

-
F023_spostamento_linea_mediana
@@ -530,7 +677,6 @@

Spostamento della Linea Mediana

Forma del Tumore

La forma approssimativa della massa tumorale.

-
F024_forma_tumore
@@ -538,7 +684,6 @@

Forma del Tumore

Origine del Tumore

Dove origina il tumore, secondo le categorie: Periventricolare, Girale, Sostanza bianca profonda.

-
F025_origine_tumore
@@ -546,7 +691,6 @@

Origine del Tumore

Il Tumore Attraversa la Linea Mediana

Indica se il tumore attraversa la linea mediana.

-
F026_crossing_linea_mediana
@@ -554,7 +698,6 @@

Il Tumore Attraversa la Linea Mediana

Reperti Specifici del Soggetto

Qualsiasi reperto specifico del soggetto che non rientra in alcuna categoria predefinita.

-
F027_reperti_specifici
diff --git a/instruction_images/F003_img.png b/instruction_images/F003_img.png new file mode 100644 index 0000000..af2ae5f Binary files /dev/null and b/instruction_images/F003_img.png differ diff --git a/instruction_images/F005_img.png b/instruction_images/F005_img.png new file mode 100644 index 0000000..d33693a Binary files /dev/null and b/instruction_images/F005_img.png differ diff --git a/instruction_images/F010_img.png b/instruction_images/F010_img.png new file mode 100644 index 0000000..6eaca69 Binary files /dev/null and b/instruction_images/F010_img.png differ diff --git a/instruction_images/F011_img.png b/instruction_images/F011_img.png new file mode 100644 index 0000000..9664522 Binary files /dev/null and b/instruction_images/F011_img.png differ diff --git a/instruction_images/F012_img.png b/instruction_images/F012_img.png new file mode 100644 index 0000000..90ea850 Binary files /dev/null and b/instruction_images/F012_img.png differ diff --git a/instruction_images/F019_img.png b/instruction_images/F019_img.png new file mode 100644 index 0000000..e466f49 Binary files /dev/null and b/instruction_images/F019_img.png differ diff --git a/instruction_images/F020_img.png b/instruction_images/F020_img.png new file mode 100644 index 0000000..cb835de Binary files /dev/null and b/instruction_images/F020_img.png differ diff --git a/site.js b/site.js index 0743e51..3348ee6 100644 --- a/site.js +++ b/site.js @@ -24,3 +24,50 @@ button.addEventListener("click", copyPageLink); })(); + +(function () { + function openLightbox(src, alt, labels) { + const overlay = document.createElement("div"); + overlay.className = "img-lightbox"; + const box = document.createElement("div"); + box.className = "img-lightbox-box"; + const img = document.createElement("img"); + img.src = src; + img.alt = alt || ""; + box.appendChild(img); + if (labels.length) { + const row = document.createElement("div"); + row.className = "img-labels img-labels--lightbox"; + labels.forEach(function (label) { + const s = document.createElement("span"); + s.textContent = label.text; + s.style.flex = label.weight; + row.appendChild(s); + }); + box.appendChild(row); + } + overlay.appendChild(box); + overlay.addEventListener("click", () => overlay.remove()); + document.addEventListener("keydown", function onKey(e) { + if (e.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", onKey); } + }); + document.body.appendChild(overlay); + } + + document.querySelectorAll(".field-img-wrap img").forEach(function (img) { + const inner = document.createElement("div"); + inner.className = "field-img-inner"; + img.parentNode.insertBefore(inner, img); + inner.appendChild(img); + }); + + document.addEventListener("click", function (e) { + const wrap = e.target.closest(".field-img-wrap"); + if (!wrap) return; + const img = wrap.querySelector("img"); + if (!img) return; + const labelEls = Array.from(wrap.querySelectorAll(".img-labels span")); + const labels = labelEls.map(function (s) { return { text: s.textContent, weight: s.dataset.weight || "1" }; }); + openLightbox(img.src, img.alt, labels); + }); +})(); diff --git a/styles.css b/styles.css index 4a9d8d9..bcdcab1 100644 --- a/styles.css +++ b/styles.css @@ -508,6 +508,10 @@ td:first-child { font-size: 0.95rem; } +.field-item > div:only-child { + grid-column: 1 / -1; +} + .image-placeholder { display: grid; place-items: center; @@ -525,6 +529,142 @@ td:first-child { word-break: break-word; } +.field-img-wrap { + background: #fff; + border: 1px solid var(--line); + border-radius: 6px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100px; + padding: 8px; + cursor: zoom-in; + position: relative; +} + +.field-img-inner { + width: 100%; + border-radius: 4px; + overflow: hidden; + flex-shrink: 0; +} + +/* Hover overlay with centered expand icon */ +.field-img-inner { + position: relative; +} + +.field-img-inner::after { + content: "⤢"; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.6rem; + color: #fff; + background: rgba(15, 23, 42, 0.38); + opacity: 0; + transition: opacity 0.18s ease; + pointer-events: none; +} + +.field-img-wrap:hover .field-img-inner::after { + opacity: 1; +} + +.field-img-wrap img { + max-height: 110px; + width: 100%; + object-fit: contain; + display: block; + transition: transform 0.18s ease; +} + +.field-img-wrap:hover img { + transform: scale(1.03); +} + +.img-labels { + display: flex; + flex-wrap: wrap; + gap: 5px; + justify-content: center; + margin-top: 8px; + position: relative; + z-index: 1; +} + +.img-labels span { + font-size: 0.72rem; + font-weight: 600; + color: #48566f; + background: #f1f5f9; + border: 1px solid #e2e8f0; + border-radius: 4px; + padding: 2px 7px; + white-space: nowrap; +} + +/* Lightbox overlay */ +.img-lightbox { + position: fixed; + inset: 0; + z-index: 9999; + background: rgba(0, 0, 0, 0.72); + display: flex; + align-items: center; + justify-content: center; + cursor: zoom-out; + animation: lb-in 0.18s ease; +} + +@keyframes lb-in { + from { opacity: 0; } + to { opacity: 1; } +} + +.img-lightbox-box { + background: #fff; + border-radius: 10px; + padding: 16px 16px 12px; + box-shadow: 0 24px 80px rgba(0,0,0,0.45); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + max-width: min(90vw, 900px); +} + +.img-lightbox-box img { + max-width: 100%; + max-height: 75vh; + object-fit: contain; + display: block; +} + +.img-labels:has(span[data-weight]) { + width: 100%; + justify-content: space-between; +} + +.img-labels span[data-weight="1"] { flex: 1; text-align: center; } +.img-labels span[data-weight="2"] { flex: 2; text-align: center; } +.img-labels span[data-weight="3"] { flex: 3; text-align: center; } + +.img-labels--lightbox { + width: 100%; + justify-content: space-between; +} + +.img-labels--lightbox span { + font-size: 0.85rem; + padding: 4px 12px; + flex: 1; + text-align: center; +} + .prose { max-width: 940px; color: #354159;