Add heatmap_visualization/js/app.js

heatmap_visualization/js/app.js

@@ -0,0 +1,125 @@
+'use strict';
+
+/**
+ * @file js/app.js
+ * @description Initialisiert die Resonanzband-Heatmap-Anwendung. Lädt Daten von /heatmap und reagiert auf Nutzerinteraktionen.
+ * @version 1.0.0
+ */
+
+/**
+ * Lädt Heatmap-Daten von der API /heatmap.
+ * @param {Object} [filters] - optionale Filterparameter { cohort_id, time_window }
+ * @returns {Promise<Object>} - Promise mit Heatmap-Daten und Metadaten
+ */
+async function loadHeatmapData(filters = {}) {
+  try {
+    const url = new URL('/heatmap', window.location.origin);
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') {
+        url.searchParams.append(key, value);
+      }
+    });
+    const response = await fetch(url.toString(), { method: 'GET' });
+    if (!response.ok) {
+      throw new Error(`API-Fehler: ${response.status}`);
+    }
+    const data = await response.json();
+    renderHeatmap(data);
+  } catch (err) {
+    console.error('Fehler beim Laden der Heatmap-Daten:', err);
+    renderError(`Fehler beim Laden der Daten: ${err.message}`);
+  }
+}
+
+/**
+ * Rendert die Heatmap auf Basis der übergebenen Daten.
+ * @param {Object} data - Heatmap-Datenobjekt
+ */
+function renderHeatmap(data) {
+  const canvas = document.getElementById('heatmap-canvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const matrix = data?.matrix || [];
+
+  const rows = matrix.length;
+  const cols = rows > 0 ? matrix[0].length : 0;
+  const cellWidth = canvas.width / (cols || 1);
+  const cellHeight = canvas.height / (rows || 1);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  matrix.forEach((row, y) => {
+    row.forEach((value, x) => {
+      const color = getColorForValue(value);
+      ctx.fillStyle = color;
+      ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
+    });
+  });
+  renderMetrics(data);
+}
+
+/**
+ * Zeigt grundlegende Metriken aus den Heatmap-Daten an.
+ * @param {Object} data - Heatmap-Datenobjekt mit Metadaten
+ */
+function renderMetrics(data) {
+  const metricsContainer = document.getElementById('heatmap-metrics');
+  if (!metricsContainer) return;
+  const { band_center, band_width, cluster_score } = data || {};
+  metricsContainer.innerHTML = `
+    <p>Band Center: ${band_center ?? '–'}</p>
+    <p>Band Width: ${band_width ?? '–'}</p>
+    <p>Cluster Score: ${cluster_score ?? '–'}</p>
+  `;
+}
+
+/**
+ * Berechnet eine Farbskala für Heatmap-Werte.
+ * @param {number} value - numerischer Intensitätswert (0–1)
+ * @returns {string} CSS-Farbwert (rgba)
+ */
+function getColorForValue(value) {
+  const v = Math.max(0, Math.min(1, value));
+  const r = Math.floor(255 * v);
+  const g = Math.floor(100 * (1 - v));
+  const b = 150;
+  return `rgba(${r}, ${g}, ${b}, 0.9)`;
+}
+
+/**
+ * Zeigt eine Fehlermeldung im UI an.
+ * @param {string} message - Text der Fehlermeldung
+ */
+function renderError(message) {
+  const container = document.getElementById('heatmap-container');
+  if (container) container.innerHTML = `<div class="error">${message}</div>`;
+}
+
+/**
+ * Behandelt Änderungen der Filter und ruft neue Daten ab.
+ * @param {Event} event - Auslösendes Event
+ */
+function handleFilterChange(event) {
+  const form = event.currentTarget.form || document.getElementById('filter-form');
+  if (!form) return;
+
+  const formData = new FormData(form);
+  const filters = Object.fromEntries(formData.entries());
+  loadHeatmapData(filters);
+}
+
+/**
+ * Initialisiert die App, bindet Event-Listener und lädt erste Heatmap-Daten.
+ */
+function initApp() {
+  const form = document.getElementById('filter-form');
+  if (form) {
+    form.addEventListener('change', handleFilterChange);
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      handleFilterChange(e);
+    });
+  }
+  loadHeatmapData();
+}
+
+window.addEventListener('load', initApp);