diff --git a/metrics_visualization/js/app.js b/metrics_visualization/js/app.js new file mode 100644 index 0000000..6a5507c --- /dev/null +++ b/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 }; \ No newline at end of file