Add 2_interference_visualization/js/app.js

2_interference_visualization/js/app.js

@@ -0,0 +1,52 @@
+import { fetchVisualizationData } from './api.js';
+import { renderChart, updateChart } from './chart.js';
+
+/**
+ * Initialisiert die Anwendung: lädt Chart, ruft API auf, registriert Event-Listener.
+ */
+export async function initApp() {
+  try {
+    const defaultRun = '31b';
+    const defaultMetric = 'tail';
+    const data = await fetchVisualizationData({ run: defaultRun, metric: defaultMetric });
+    renderChart(data);
+    registerEventListeners();
+  } catch (error) {
+    console.error('Fehler bei der Initialisierung der App:', error);
+    const container = document.getElementById('chart-container');
+    if (container) {
+      container.textContent = 'Fehler beim Laden der Visualisierung.';
+    }
+  }
+}
+
+/**
+ * Reagiert auf Benutzeränderungen im Filterpanel und aktualisiert Diagrammdaten.
+ * @param {Event} event
+ */
+export async function handleFilterChange(event) {
+  try {
+    const runSelector = document.getElementById('run-filter');
+    const metricSelector = document.getElementById('metric-filter');
+    const selectedRun = runSelector?.value ?? '31b';
+    const selectedMetric = metricSelector?.value ?? 'tail';
+
+    const newData = await fetchVisualizationData({ run: selectedRun, metric: selectedMetric });
+    updateChart(newData);
+  } catch (error) {
+    console.error('Fehler bei der Aktualisierung des Diagramms:', error);
+  }
+}
+
+/**
+ * Registriert Event-Listener für Filterelemente.
+ */
+function registerEventListeners() {
+  const runFilter = document.getElementById('run-filter');
+  const metricFilter = document.getElementById('metric-filter');
+
+  if (runFilter) runFilter.addEventListener('change', handleFilterChange);
+  if (metricFilter) metricFilter.addEventListener('change', handleFilterChange);
+}
+
+window.addEventListener('load', initApp);