Add trace_visualization/js/ui.js

trace_visualization/js/ui.js

@@ -0,0 +1,66 @@
+export function updateStatsPanel(analysisResults = {}) {
+  const statsContainer = document.getElementById('stats-summary');
+  if (!statsContainer) {
+    console.warn('Stats summary container missing (#stats-summary)');
+    return;
+  }
+
+  if (!analysisResults || !Array.isArray(analysisResults.runs)) {
+    statsContainer.textContent = 'Keine Analysedaten vorhanden.';
+    return;
+  }
+
+  const totalRuns = analysisResults.runs.length;
+  if (totalRuns === 0) {
+    statsContainer.textContent = 'Keine Analysedaten verfügbar.';
+    return;
+  }
+
+  const medianAvg = (
+    analysisResults.runs.reduce((sum, r) => sum + (r.median_shift || 0), 0) / totalRuns
+  ).toFixed(2);
+
+  const varianceAvg = (
+    analysisResults.runs.reduce((sum, r) => sum + (r.variance || 0), 0) / totalRuns
+  ).toFixed(2);
+
+  const migratedAvg = (
+    analysisResults.runs.reduce((sum, r) => sum + (r.migrated_ratio || 0), 0) / totalRuns
+  ).toFixed(2);
+
+  const offsetAvg = (
+    analysisResults.runs.reduce((sum, r) => sum + (r.offset_constant || 0), 0) / totalRuns
+  ).toFixed(2);
+
+  const strongDeviations = analysisResults.runs.filter(r => (r.variance || 0) > 1.5).length;
+
+  const summaryHTML = `
+    <h3>Analyse-Zusammenfassung</h3>
+    <ul>
+      <li><strong>Anzahl Durchläufe:</strong> ${totalRuns}</li>
+      <li><strong>Mittlerer Median-Shift:</strong> ${medianAvg}</li>
+      <li><strong>Mittlere Varianz:</strong> ${varianceAvg}</li>
+      <li><strong>Durchschnittlicher WF_MIGRATED-Anteil:</strong> ${migratedAvg}</li>
+      <li><strong>Mittlerer Offset-Koeffizient:</strong> ${offsetAvg}</li>
+      <li><strong>Signifikante Abweichungen:</strong> ${strongDeviations}</li>
+    </ul>
+  `;
+
+  statsContainer.innerHTML = summaryHTML;
+}
+
+export function setupFilterEvents() {
+  const filterElements = document.querySelectorAll('[data-filter]');
+  if (!filterElements.length) {
+    console.warn('Keine Filterelemente mit data-filter gefunden.');
+    return;
+  }
+
+  filterElements.forEach(el => {
+    el.addEventListener('click', () => {
+      const filter = el.getAttribute('data-filter');
+      const event = new CustomEvent('filterChanged', { detail: { filter } });
+      document.dispatchEvent(event);
+    });
+  });
+}