Add metrics_visualization/js/app.js

metrics_visualization/js/app.js

@@ -0,0 +1,79 @@
+'use strict';
+
+/**
+ * Entry point for the Exit Metrics Visualization Dashboard.
+ * This module initializes the UI, fetches metric data, and attaches events.
+ */
+
+import { fetchMetrics } from './api.js';
+import { renderDashboard, updateDashboardFilters } from './ui.js';
+
+/**
+ * Registers event listeners for user interactions.
+ * @returns {void}
+ */
+function attachEventListeners() {
+  const filterPinned = document.querySelector('#filter-pinned');
+  const filterUnpinned = document.querySelector('#filter-unpinned');
+  const setupSelector = document.querySelector('#setup-fingerprint');
+
+  // Defensive checks for elements
+  if (filterPinned) {
+    filterPinned.addEventListener('click', async () => {
+      await refreshMetrics({ filter: 'pinned' });
+    });
+  }
+
+  if (filterUnpinned) {
+    filterUnpinned.addEventListener('click', async () => {
+      await refreshMetrics({ filter: 'unpinned' });
+    });
+  }
+
+  if (setupSelector) {
+    setupSelector.addEventListener('change', async (e) => {
+      const setupId = e.target.value.trim();
+      await refreshMetrics({ setup_fingerprint: setupId || undefined });
+    });
+  }
+
+  window.addEventListener('resize', () => {
+    renderDashboard(window.__metricsData || []);
+  });
+}
+
+/**
+ * Fetches metrics and updates the dashboard.
+ * @param {object} [params] Optional query params for filtering.
+ */
+async function refreshMetrics(params = {}) {
+  try {
+    const data = await fetchMetrics(params);
+    if (Array.isArray(data)) {
+      window.__metricsData = data;
+      renderDashboard(data);
+      updateDashboardFilters(params);
+    } else {
+      console.warn('Unexpected API response format:', data);
+    }
+  } catch (error) {
+    console.error('Failed to refresh metrics:', error);
+  }
+}
+
+/**
+ * Initializes the app after DOMContentLoaded.
+ * Fetches initial metrics and sets up UI interactions.
+ */
+async function initApp() {
+  try {
+    await refreshMetrics();
+    attachEventListeners();
+  } catch (error) {
+    console.error('Initialization failed:', error);
+  }
+}
+
+window.addEventListener('load', initApp);
+
+export { initApp, attachEventListeners };