AegisSight/AegisSight-Monitor
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Ereignis-Timeline: Klick auf Heatmap-Balken filtert den Stream

Quellcode durchsuchen 
Vorher scrollte ein Klick auf einen Balken nur zur passenden Zeit-
Gruppe — bei langem Stream kaum erkennbar. Jetzt filtert der Klick
den Stream auf das Zeitfenster des Balkens und zeigt nur diese
Einträge.

- Aktiver Balken: vergrößert (scaleY 1.6) + goldener Hintergrund +
  starker Glow + kleiner ▼-Pfeil darunter; alle anderen Balken auf
  40% Opacity gedimmt.
- Banner zwischen Strip und Stream zeigt "Gefiltert auf [Label] ·
  X Einträge" mit "Filter aufheben"-Button.
- Zweiter Klick auf denselben Balken oder Banner-Button hebt den
  Filter auf.
- Filter/Range-Buttons setzen den Strip-Window-Filter zurück (sonst
  inkonsistente Doppel-Filterung).
- Lagen-Wechsel räumt _activeStripWindow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
UserIsMH
2026-05-01 15:59:32 +02:00
Ursprung b14fe31f42
Commit 34aeb04a88
3 geänderte Dateien mit 115 neuen und 52 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

102
src/static/js/app.js
Datei anzeigen

@@ -433,7 +433,7 @@ const App = {
_editingSourceId: null,
_timelineFilter: 'all',
_timelineRange: 'all',
_activeTimelineDetail: null,
_activeStripWindow: null,
_timelineSearchTimer: null,
_pendingComplete: null,
_pendingCompleteTimer: null,
@@ -1038,7 +1038,7 @@ const App = {
}
this._timelineFilter = 'all';
this._timelineRange = 'all';
this._activeTimelineDetail = null;
this._activeStripWindow = null;
const _tsEl = document.getElementById('timeline-search'); if (_tsEl) _tsEl.value = '';
document.querySelectorAll('.ht-filter-btn').forEach(btn => {
const isActive = btn.dataset.filter === 'all';
@@ -1115,8 +1115,7 @@ const App = {
},
/** Heatmap-Strip oben + vertikaler Newsfeed-Stream darunter.
* Lageberichte sind als prominente Sektionen im Stream.
* Klick auf Heatmap-Quadrat scrollt im Stream zur passenden Zeit-Gruppe.
* Klick auf Heatmap-Balken: Stream filtert auf das Zeitfenster (aktive Balken hervorgehoben).
*/
rerenderTimeline() {
const container = document.getElementById('timeline');
@@ -1125,28 +1124,46 @@ const App = {
const filterType = this._timelineFilter;
const range = this._timelineRange;
const entries = this._collectEntries(filterType, searchTerm, range);
let entries = this._collectEntries(filterType, searchTerm, range);
this._updateTimelineCount(entries);
if (entries.length === 0) {
container.innerHTML = (searchTerm || range !== 'all')
? '<div class="ht-empty">Keine Einträge im gewählten Zeitraum.</div>'
: '<div class="ht-empty">Noch keine Meldungen. Starte eine Recherche mit "Aktualisieren".</div>';
return;
}
// Heatmap nutzt IMMER alle Eintraege (Filter-unabhaengig), damit der Strip
// die volle Aktivitaet zeigt und auch im "Lageberichte"-Filter scrollbar bleibt.
// Strip nutzt IMMER alle Eintraege im Range (unabhaengig von Filter/Search/Strip-Window)
const stripEntries = this._collectEntries('all', '', range);
stripEntries.sort((a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0));
// Wenn ein Heatmap-Balken aktiv ist: Stream zusaetzlich auf dieses Zeitfenster filtern
const win = this._activeStripWindow;
if (win && entries.length > 0) {
entries = entries.filter(e => {
const ts = new Date(e.timestamp || 0).getTime();
return ts >= win.start && ts < win.end;
});
}
let html = '<div class="ht-tl">';
if (stripEntries.length > 0) {
html += this._renderTimelineStrip(stripEntries);
}
// Vertikaler Newsfeed
// Banner mit aktivem Filter
if (win) {
html += `<div class="ht-strip-banner">
<span class="ht-strip-banner-icon" aria-hidden="true">▼</span>
<span class="ht-strip-banner-text">Gefiltert auf <strong>${UI.escape(win.label)}</strong> · ${entries.length} Eintr${entries.length === 1 ? 'ag' : 'äge'}</span>
<button class="ht-strip-banner-close" onclick="App.clearStripWindow()" aria-label="Filter aufheben">Filter aufheben</button>
</div>`;
}
html += '<div class="ht-stream">';
html += this._renderVerticalStream(entries);
if (entries.length === 0) {
html += win
? '<div class="ht-empty">Keine Einträge in diesem Zeitfenster.</div>'
: (searchTerm || range !== 'all')
? '<div class="ht-empty">Keine Einträge im gewählten Zeitraum.</div>'
: '<div class="ht-empty">Noch keine Meldungen. Starte eine Recherche mit "Aktualisieren".</div>';
} else {
html += this._renderVerticalStream(entries);
}
html += '</div>';
html += '</div>';
container.innerHTML = html;
@@ -1269,6 +1286,7 @@ const App = {
if (buckets.length === 0) return '';
const maxCount = Math.max(1, ...buckets.map(b => b.articles));
const win = this._activeStripWindow;
let html = '<div class="ht-strip">';
html += '<div class="ht-strip-cells">';
@@ -1277,6 +1295,7 @@ const App = {
const cls = ['ht-strip-cell'];
if (b.snapshots > 0) cls.push('has-snapshot');
if (b.articles === 0 && b.snapshots === 0) cls.push('empty');
if (win && win.start === b.start && win.end === b.end) cls.push('active');
const tip = `${b.label}: ${b.articles} Meldung${b.articles === 1 ? '' : 'en'}` +
(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>`;
@@ -1316,6 +1335,7 @@ const App = {
setTimelineFilter(filter) {
this._timelineFilter = filter;
this._activeStripWindow = null;
document.querySelectorAll('.ht-filter-btn').forEach(btn => {
const isActive = btn.dataset.filter === filter;
btn.classList.toggle('active', isActive);
@@ -1326,6 +1346,7 @@ const App = {
setTimelineRange(range) {
this._timelineRange = range;
this._activeStripWindow = null;
document.querySelectorAll('.ht-range-btn').forEach(btn => {
const isActive = btn.dataset.range === range;
btn.classList.toggle('active', isActive);
@@ -1334,42 +1355,23 @@ const App = {
this.rerenderTimeline();
},
/** Klick auf Heatmap-Quadrat: Filter im Stream auf das Zeitfenster scrollen. */
/** Klick auf Heatmap-Balken: Stream auf dieses Zeitfenster filtern.
* Zweiter Klick auf denselben Balken hebt den Filter auf.
*/
openTimelineWindow(startMs, endMs, label) {
// Im Stream die naechste vt-time-group finden, deren Eintraege ins Fenster fallen
const groups = document.querySelectorAll('#timeline .vt-time-group');
let target = null;
for (const g of groups) {
const firstTimeEl = g.querySelector('.vt-article-time, .vt-snapshot-time');
// Pragmatisch: nimm die erste Group, die Eintraege mit Timestamp >= startMs hat.
// Die Stream-Daten sind absteigend sortiert; wir finden die erste passende.
const matches = Array.from(g.querySelectorAll('.vt-entry')).some(entry => {
// Wir haben keine direkten Timestamps im DOM — nehmen den Group-Index
return true;
});
if (matches) {
// Statt komplizierter Ts-Suche: scrolle zur Gruppe, deren Label das Datum enthaelt
target = g;
break;
}
}
// Bessere Heuristik: die vt-time-group, deren erstes Datums-Element ins Fenster faellt
const dateAtStart = new Date(startMs);
const tzs = _tz(dateAtStart);
const wantKey = `${tzs.year}-${tzs.month}-${tzs.date}`;
const wantHour = tzs.hours;
for (const g of groups) {
const k = g.dataset.timeKey || '';
if (k.startsWith(wantKey) && (k === wantKey || k.endsWith('-' + wantHour))) {
target = g;
break;
}
}
if (target) {
target.scrollIntoView({ behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth', block: 'start' });
target.classList.add('vt-time-group--flash');
setTimeout(() => target.classList.remove('vt-time-group--flash'), 1200);
const win = this._activeStripWindow;
if (win && win.start === startMs && win.end === endMs) {
this._activeStripWindow = null;
} else {
this._activeStripWindow = { start: startMs, end: endMs, label: label || '' };
}
this.rerenderTimeline();
},
/** Strip-Filter aufheben (z.B. via Banner-Button). */
clearStripWindow() {
this._activeStripWindow = null;
this.rerenderTimeline();
},
_resizeTimelineTile() {