Add visualization_tool/js/app.js

visualization_tool/js/app.js

@@ -0,0 +1,94 @@
+"use strict";
+
+/**
+ * Application entry logic for visualization_tool
+ * Handles initialization, data loading, and UI event binding.
+ */
+
+/**
+ * Fetches metrics and initializes the interface.
+ * @returns {Promise<void>}
+ */
+async function initApp() {
+  try {
+    const metricsContainer = document.getElementById('metrics-container');
+    if (!metricsContainer) {
+      console.warn('Metrics container not found.');
+      return;
+    }
+
+    const filterSelect = document.getElementById('filter-select');
+    
+    // Fetch data from /metrics
+    const filter = filterSelect?.value || '';
+    const response = await fetch(`/metrics${filter ? `?filter=${encodeURIComponent(filter)}` : ''}`);
+    if (!response.ok) throw new Error(`Failed to fetch metrics: ${response.statusText}`);
+    const metricsData = await response.json();
+
+    renderMetrics(metricsData);
+    bindUIEvents();
+
+  } catch (error) {
+    console.error('Error initializing app:', error);
+    const status = document.getElementById('status-message');
+    if (status) status.textContent = 'Fehler beim Laden der Daten.';
+  }
+}
+
+/**
+ * Sets up event listeners for UI interactions.
+ */
+function bindUIEvents() {
+  const filterSelect = document.getElementById('filter-select');
+  if (filterSelect) {
+    filterSelect.addEventListener('change', async () => {
+      await initApp();
+    });
+  }
+}
+
+/**
+ * Renders the metrics table or visualization.
+ * @param {Array<Object>} data - Array of metrics data.
+ */
+function renderMetrics(data) {
+  const container = document.getElementById('metrics-container');
+  if (!container) return;
+  container.innerHTML = '';
+
+  if (!Array.isArray(data) || data.length === 0) {
+    container.textContent = 'Keine Daten gefunden.';
+    return;
+  }
+
+  const table = document.createElement('table');
+  table.className = 'metrics-table';
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  ;['Metrik', 'Run-ID', 'Pinned', 'Effektgröße', 'CI-unter', 'CI-ober'].forEach(h => {
+    const th = document.createElement('th');
+    th.textContent = h;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+
+  const tbody = document.createElement('tbody');
+  data.forEach(item => {
+    const tr = document.createElement('tr');
+    const { metric_name, run_id, pinned_flag, effect_size, ci_low, ci_high } = item;
+
+    [metric_name, run_id, pinned_flag ? 'Ja' : 'Nein', effect_size, ci_low, ci_high].forEach(val => {
+      const td = document.createElement('td');
+      td.textContent = val;
+      tr.appendChild(td);
+    });
+    tbody.appendChild(tr);
+  });
+
+  table.appendChild(thead);
+  table.appendChild(tbody);
+  container.appendChild(table);
+}
+
+// Initialize app on window load
+document.addEventListener('DOMContentLoaded', initApp);