Ereignis-Timeline: Heatmap-Klick-Bug beheben

Inline-onclick mit JSON.stringify(label) + UI.escape erzeugte bei
Bucket-Labels mit Anführungszeichen oder Sonderzeichen einen kaputten
HTML-Attribut-String. Klicks lösten daher gar keinen Handler aus.

Statt JS-String im onclick werden Bucket-Daten jetzt als
data-start/data-end/data-label-Attribute am Cell-Element gehalten.
Onclick ruft App.handleStripClick(this), das die Werte sauber aus
dataset liest und an openTimelineWindow weiterreicht.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
2026-05-01 16:04:02 +02:00
Ursprung 34aeb04a88
Commit 462127dc52
2 geänderte Dateien mit 14 neuen und 2 gelöschten Zeilen

Datei anzeigen

@@ -647,7 +647,7 @@
<script src="/static/js/components.js?v=20260427a"></script> <script src="/static/js/components.js?v=20260427a"></script>
<script src="/static/js/layout.js?v=20260316b"></script> <script src="/static/js/layout.js?v=20260316b"></script>
<script src="/static/js/pipeline.js?v=20260501a"></script> <script src="/static/js/pipeline.js?v=20260501a"></script>
<script src="/static/js/app.js?v=20260501d"></script> <script src="/static/js/app.js?v=20260501e"></script>
<script src="/static/js/cluster-data.js?v=20260322f"></script> <script src="/static/js/cluster-data.js?v=20260322f"></script>
<script src="/static/js/tutorial.js?v=20260316z"></script> <script src="/static/js/tutorial.js?v=20260316z"></script>
<script src="/static/js/chat.js?v=20260422a"></script> <script src="/static/js/chat.js?v=20260422a"></script>

Datei anzeigen

@@ -1298,7 +1298,8 @@ const App = {
if (win && win.start === b.start && win.end === b.end) cls.push('active'); if (win && win.start === b.start && win.end === b.end) cls.push('active');
const tip = `${b.label}: ${b.articles} Meldung${b.articles === 1 ? '' : 'en'}` + const tip = `${b.label}: ${b.articles} Meldung${b.articles === 1 ? '' : 'en'}` +
(b.snapshots > 0 ? ` + ${b.snapshots} Lagebericht${b.snapshots === 1 ? '' : 'e'}` : ''); (b.snapshots > 0 ? ` + ${b.snapshots} Lagebericht${b.snapshots === 1 ? '' : 'e'}` : '');
html += `<div class="${cls.join(' ')}" style="--intensity:${intensity.toFixed(3)};" title="${UI.escape(tip)}" onclick="App.openTimelineWindow(${b.start}, ${b.end}, ${UI.escape(JSON.stringify(b.label))})"></div>`; // data-Attribute statt JSON-String im onclick-Inline (vermeidet Quote-Konflikte bei Labels mit Komma/Anführungszeichen)
html += `<div class="${cls.join(' ')}" style="--intensity:${intensity.toFixed(3)};" title="${UI.escape(tip)}" data-start="${b.start}" data-end="${b.end}" data-label="${UI.escape(b.label || '')}" onclick="App.handleStripClick(this)"></div>`;
}); });
html += '</div>'; html += '</div>';
@@ -1355,6 +1356,17 @@ const App = {
this.rerenderTimeline(); this.rerenderTimeline();
}, },
/** Robuster Click-Handler fuer Heatmap-Cells (vermeidet Quote-Konflikte). */
handleStripClick(el) {
if (!el) return;
const start = parseInt(el.dataset.start, 10);
const end = parseInt(el.dataset.end, 10);
const label = el.dataset.label || '';
if (!isNaN(start) && !isNaN(end)) {
this.openTimelineWindow(start, end, label);
}
},
/** Klick auf Heatmap-Balken: Stream auf dieses Zeitfenster filtern. /** Klick auf Heatmap-Balken: Stream auf dieses Zeitfenster filtern.
* Zweiter Klick auf denselben Balken hebt den Filter auf. * Zweiter Klick auf denselben Balken hebt den Filter auf.
*/ */