Skip to content

Commit 5341e51

Browse files
Uli-ZUli-Z
committed
Update visualization copy to English and fix color thresholds
1 parent 8eeb482 commit 5341e51

2 files changed

Lines changed: 30 additions & 28 deletions

File tree

‎visualization/demo_filter.html‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Hierarchy Filter (Standalone HTML)</title>
5+
<title>EUCAST ECOFF Coverage Explorer</title>
66
<style>
77
body { font-family: sans-serif; margin: 1.5rem; color: #222; }
88
.filter-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
@@ -44,7 +44,7 @@
4444
</style>
4545
</head>
4646
<body>
47-
<h1>Hierarchy Filter (Demo, Single-HTML)</h1>
47+
<h1>EUCAST ECOFF Coverage Explorer</h1>
4848

4949
<div class="sections">
5050
<div class="section">
@@ -129,7 +129,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
129129
const root = { id: `root-${datasetKey}`, name: "root", children: [], isLeaf: false };
130130
data.forEach(item => {
131131
let nodes = root.children;
132-
const fullPath = ["Alle", ...item.path, item.label];
132+
const fullPath = ["All", ...item.path, item.label];
133133
const pathParts = [];
134134
fullPath.forEach((segment, idx) => {
135135
pathParts.push(segment);
@@ -192,7 +192,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
192192
selectAllLeaves("ab");
193193
const sectionConfig = {
194194
mo: {
195-
label: "Erreger",
195+
label: "Organisms",
196196
summaryEl: document.getElementById("moSummary"),
197197
bodyEl: document.getElementById("moBody"),
198198
treeEl: document.getElementById("moTree"),
@@ -203,7 +203,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
203203
arrowEl: document.querySelector('[data-section="mo"] .arrow'),
204204
},
205205
ab: {
206-
label: "Antibiotika",
206+
label: "Antibiotics",
207207
summaryEl: document.getElementById("abSummary"),
208208
bodyEl: document.getElementById("abBody"),
209209
treeEl: document.getElementById("abTree"),
@@ -340,10 +340,10 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
340340
const renderableTree = buildRenderableTree(BASE_TREES[datasetKey], datasetKey, filters, percentile);
341341
const selectedCodes = collectSelected(renderableTree, datasetKey, []);
342342
visibleSelected[datasetKey] = selectedCodes;
343-
cfg.summaryEl.textContent = `${selectedCodes.length} ${cfg.label} ausgewählt`;
343+
cfg.summaryEl.textContent = `${selectedCodes.length} ${cfg.label} selected`;
344344

345345
if (!renderableTree) {
346-
treeEl.innerHTML = "<div class=\"meta muted\">Keine Treffer</div>";
346+
treeEl.innerHTML = "<div class=\"meta muted\">No matches</div>";
347347
return;
348348
}
349349

@@ -465,29 +465,30 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
465465

466466
function fractionToColor(fraction) {
467467
if (fraction === null || fraction === undefined) return "#f5f5f5";
468-
if (fraction >= 0.99) return "#2e7d32"; // green
469-
if (fraction >= 0.95) return "#ffeb3b"; // yellow
470-
return "#c62828"; // red
468+
const pct = Math.round(fraction * 100);
469+
if (pct >= 99) return "#2e7d32"; // green
470+
if (pct >= 95) return "#ffeb3b"; // yellow
471+
return "#c62828"; // red
471472
}
472473

473474
function renderMatrix() {
474475
const container = document.getElementById("matrixContainer");
475476
let moIds = visibleSelected.mo || [];
476477
let abCodes = visibleSelected.ab || [];
477478
if (!moIds.length || !abCodes.length) {
478-
container.innerHTML = "Bitte mindestens einen Erreger und ein Antibiotikum auswählen.";
479+
container.innerHTML = "Select at least one organism and one antibiotic.";
479480
return;
480481
}
481482

482483
moIds = [...moIds].sort((a, b) => {
483484
const ka = ORDER_KEYS.mo.get(a) || a;
484485
const kb = ORDER_KEYS.mo.get(b) || b;
485-
return ka.localeCompare(kb, "de");
486+
return ka.localeCompare(kb, "en");
486487
});
487488
abCodes = [...abCodes].sort((a, b) => {
488489
const ka = ORDER_KEYS.ab.get(a) || a;
489490
const kb = ORDER_KEYS.ab.get(b) || b;
490-
return ka.localeCompare(kb, "de");
491+
return ka.localeCompare(kb, "en");
491492
});
492493

493494
const table = document.createElement("table");
@@ -498,7 +499,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
498499

499500
const corner = document.createElement("th");
500501
corner.className = "sticky-col";
501-
corner.textContent = "Antibiotikum \\ Erreger";
502+
corner.textContent = "Antibiotic \\ Organism";
502503
headerRow.appendChild(corner);
503504

504505
moIds.forEach(code => {

‎visualization/filter.html‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Hierarchy Filter (Standalone HTML)</title>
5+
<title>EUCAST ECOFF Coverage Explorer</title>
66
<style>
77
body { font-family: sans-serif; margin: 1.5rem; color: #222; }
88
.filter-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
@@ -49,7 +49,7 @@
4949
</script>
5050
</head>
5151
<body>
52-
<h1>Hierarchy Filter (Demo, Single-HTML)</h1>
52+
<h1>EUCAST ECOFF Coverage Explorer</h1>
5353

5454
<div class="sections">
5555
<div class="section">
@@ -134,7 +134,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
134134
const root = { id: `root-${datasetKey}`, name: "root", children: [], isLeaf: false };
135135
data.forEach(item => {
136136
let nodes = root.children;
137-
const fullPath = ["Alle", ...item.path, item.label];
137+
const fullPath = ["All", ...item.path, item.label];
138138
const pathParts = [];
139139
fullPath.forEach((segment, idx) => {
140140
pathParts.push(segment);
@@ -197,7 +197,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
197197
selectAllLeaves("ab");
198198
const sectionConfig = {
199199
mo: {
200-
label: "Erreger",
200+
label: "Organisms",
201201
summaryEl: document.getElementById("moSummary"),
202202
bodyEl: document.getElementById("moBody"),
203203
treeEl: document.getElementById("moTree"),
@@ -208,7 +208,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
208208
arrowEl: document.querySelector('[data-section="mo"] .arrow'),
209209
},
210210
ab: {
211-
label: "Antibiotika",
211+
label: "Antibiotics",
212212
summaryEl: document.getElementById("abSummary"),
213213
bodyEl: document.getElementById("abBody"),
214214
treeEl: document.getElementById("abTree"),
@@ -345,10 +345,10 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
345345
const renderableTree = buildRenderableTree(BASE_TREES[datasetKey], datasetKey, filters, percentile);
346346
const selectedCodes = collectSelected(renderableTree, datasetKey, []);
347347
visibleSelected[datasetKey] = selectedCodes;
348-
cfg.summaryEl.textContent = `${selectedCodes.length} ${cfg.label} ausgewählt`;
348+
cfg.summaryEl.textContent = `${selectedCodes.length} ${cfg.label} selected`;
349349

350350
if (!renderableTree) {
351-
treeEl.innerHTML = "<div class=\"meta muted\">Keine Treffer</div>";
351+
treeEl.innerHTML = "<div class=\"meta muted\">No matches</div>";
352352
return;
353353
}
354354

@@ -470,29 +470,30 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
470470

471471
function fractionToColor(fraction) {
472472
if (fraction === null || fraction === undefined) return "#f5f5f5";
473-
if (fraction >= 0.99) return "#2e7d32"; // green
474-
if (fraction >= 0.95) return "#ffeb3b"; // yellow
475-
return "#c62828"; // red
473+
const pct = Math.round(fraction * 100);
474+
if (pct >= 99) return "#2e7d32"; // green
475+
if (pct >= 95) return "#ffeb3b"; // yellow
476+
return "#c62828"; // red
476477
}
477478

478479
function renderMatrix() {
479480
const container = document.getElementById("matrixContainer");
480481
let moIds = visibleSelected.mo || [];
481482
let abCodes = visibleSelected.ab || [];
482483
if (!moIds.length || !abCodes.length) {
483-
container.innerHTML = "Bitte mindestens einen Erreger und ein Antibiotikum auswählen.";
484+
container.innerHTML = "Select at least one organism and one antibiotic.";
484485
return;
485486
}
486487

487488
moIds = [...moIds].sort((a, b) => {
488489
const ka = ORDER_KEYS.mo.get(a) || a;
489490
const kb = ORDER_KEYS.mo.get(b) || b;
490-
return ka.localeCompare(kb, "de");
491+
return ka.localeCompare(kb, "en");
491492
});
492493
abCodes = [...abCodes].sort((a, b) => {
493494
const ka = ORDER_KEYS.ab.get(a) || a;
494495
const kb = ORDER_KEYS.ab.get(b) || b;
495-
return ka.localeCompare(kb, "de");
496+
return ka.localeCompare(kb, "en");
496497
});
497498

498499
const table = document.createElement("table");
@@ -503,7 +504,7 @@ <h2>ECOFF matrix (share ≤ ECOFF)</h2>
503504

504505
const corner = document.createElement("th");
505506
corner.className = "sticky-col";
506-
corner.textContent = "Antibiotikum \\ Erreger";
507+
corner.textContent = "Antibiotic \\ Organism";
507508
headerRow.appendChild(corner);
508509

509510
moIds.forEach(code => {

0 commit comments

Comments
 (0)