fix: fixed click graph feature

1 files changed, 146 insertions, 76 deletions

diff --git a/static/js/main.js b/static/js/main.js
index 5460247..b06bfee 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -118,20 +118,26 @@ function removeToken() {
 
 function showMetrics() {
     if (!metricsSection) {
+        console.error("Metrics section not found in DOM");
         return;
     }
     
-    metricsSection.style.display = 'block';
-    createOrShowHideButton(); 
-    
-    // Display the service status when metrics are shown
-    updateServiceStatusDisplay();
-    
-    // Initialize metrics UI if not already initialized
-    if (!chartsInitialized) {
-        initializeMetricsUI();
-    } else {
-        startDataUpdates();
+    try {
+        metricsSection.style.display = 'block';
+        createOrShowHideButton(); 
+        
+        // Display the service status when metrics are shown
+        updateServiceStatusDisplay();
+        
+        // Initialize metrics UI if not already initialized
+        if (!chartsInitialized) {
+            initializeMetricsUI();
+        } else {
+            startDataUpdates();
+        }
+    } catch (error) {
+        console.error("Error showing metrics:", error);
+        alert("There was an error displaying the metrics. Please try refreshing the page.");
     }
 }
 
@@ -374,12 +380,18 @@ function createMetricCard(container, metricName, definition) {
     
     // Add click event for chart expansion
     const chartContainer = metricCard.querySelector('.chart-container');
-    if (chartContainer && typeof expandChart === 'function') {
+    if (chartContainer) {
         chartContainer.addEventListener('click', function() {
-            const metricAttr = this.getAttribute('data-metric');
-            const labelAttr = this.getAttribute('data-label');
-            if (metricAttr && labelAttr) {
-                expandChart(metricAttr, labelAttr);
+            try {
+                const metricAttr = this.getAttribute('data-metric');
+                const labelAttr = this.getAttribute('data-label');
+                if (metricAttr && labelAttr && typeof expandChart === 'function') {
+                    expandChart(metricAttr, labelAttr);
+                }
+            } catch (error) {
+                console.error("Error expanding chart:", error);
+                // Fallback if there's an error - show a simple alert
+                alert(`Could not expand the ${displayName} chart. Please try again later.`);
             }
         });
     }
@@ -714,72 +726,51 @@ function initializeMetricsUI() {
         });
 }
 
-// --- Initialize everything when DOM is loaded ---
-document.addEventListener('DOMContentLoaded', function() {
-    // Start server stats check
-    getServerStats();
-    setInterval(getServerStats, 30000);
-
-    // Apply styles to submit button
-    if (submitPasswordBtn) submitPasswordBtn.classList.add('submit-button');
-    
-    // Set up password input event listener
-    if (passwordInput) {
-        passwordInput.addEventListener('keyup', function(event) {
-            if (event.key === 'Enter') {
-                submitPasswordBtn.click();
-            }
-        });
-    }
+// Function to handle metrics visibility changes
+function handleMetricsVisibilityChange() {
+    if (!metricsSection) return;
     
-    // Set up view metrics button
-    if (viewMetricsBtn) {
-        viewMetricsBtn.addEventListener('click', function() {
-            if (getToken()) {
-                showMetrics();
+    try {
+        if (metricsSection.offsetParent !== null) {
+            // Metrics section is visible
+            if (!chartsInitialized) {
+                initializeMetricsUI();
             } else {
-                openPasswordModal();
-            }
-        });
-    }
-    
-    // Set up password modal submit button
-    if (submitPasswordBtn) {
-        submitPasswordBtn.addEventListener('click', login);
-    }
-    
-    // Set up password modal close button
-    if (closeModalBtn) {
-        closeModalBtn.addEventListener('click', closePasswordModal);
-    }
-    
-    // Close password modal when clicking outside
-    if (passwordModal) {
-        passwordModal.addEventListener('click', function(event) {
-            if (event.target === passwordModal) {
-                closePasswordModal();
+                startDataUpdates();
             }
-        });
-    }
-    
-    // Check if already authenticated and show metrics if so
-    if (getToken()) showMetrics();
-    
-    // Observer for metrics section visibility
-    if (metricsSection) {
-        const observer = new MutationObserver(handleMetricsVisibilityChange);
-        observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] });
+        } else {
+            // Metrics section is hidden
+            stopDataUpdates();
+        }
+    } catch (error) {
+        console.error("Error handling metrics visibility change:", error);
+        // Don't show alert here since this might be called repeatedly
+        // Just log the error to console
     }
-});
+}
 
 // Chart expansion functionality
-const chartModal = document.getElementById('chart-modal');
-const chartModalTitle = document.getElementById('chart-modal-title');
-const closeChartModalBtn = document.querySelector('#chart-modal .close-button');
-const closeChartBtn = document.getElementById('close-chart-modal');
+let chartModal;
+let chartModalTitle;
+let closeChartModalBtn;
+let closeChartBtn;
 let expandedChart = null;
 
 function expandChart(metricName, displayName) {
+    // Make sure the modal elements are initialized
+    if (!chartModal || !chartModalTitle) {
+        chartModal = document.getElementById('chart-modal');
+        chartModalTitle = document.getElementById('chart-modal-title');
+        closeChartModalBtn = document.querySelector('#chart-modal .close-button');
+        closeChartBtn = document.getElementById('close-chart-modal');
+    }
+    
+    // Safety check - if elements still not found, exit
+    if (!chartModal || !chartModalTitle) {
+        console.error("Chart modal elements not found");
+        return;
+    }
+    
     // Set the modal title
     chartModalTitle.textContent = displayName;
     
@@ -789,7 +780,16 @@ function expandChart(metricName, displayName) {
     
     // Create an expanded version of the chart
     const expandedChartCanvas = document.getElementById('expandedChart');
+    if (!expandedChartCanvas) {
+        console.error("Expanded chart canvas not found");
+        return;
+    }
+    
     const ctx = expandedChartCanvas.getContext('2d');
+    if (!ctx) {
+        console.error("Could not get canvas context");
+        return;
+    }
     
     // If there's already an expanded chart, destroy it first
     if (expandedChart) {
@@ -798,7 +798,10 @@ function expandChart(metricName, displayName) {
     
     // Clone the options and data from the original chart
     const originalChart = charts[metricName];
-    if (!originalChart) return;
+    if (!originalChart) {
+        console.error(`Chart for ${metricName} not found`);
+        return;
+    }
     
     const chartOptions = JSON.parse(JSON.stringify(originalChart.options));
     // Adjust options for the expanded view
@@ -825,13 +828,80 @@ function expandChart(metricName, displayName) {
 
 // Close modal events
 function closeChartModal() {
+    if (!chartModal) {
+        chartModal = document.getElementById('chart-modal');
+        if (!chartModal) return;
+    }
+    
     chartModal.classList.remove('show');
     setTimeout(() => chartModal.style.display = 'none', 300);
 }
 
-// Initialize event listeners when DOM is loaded
+// --- Initialize everything when DOM is loaded ---
 document.addEventListener('DOMContentLoaded', function() {
-    // Chart modal close buttons
+    // Initialize chart modal elements
+    chartModal = document.getElementById('chart-modal');
+    chartModalTitle = document.getElementById('chart-modal-title');
+    closeChartModalBtn = document.querySelector('#chart-modal .close-button');
+    closeChartBtn = document.getElementById('close-chart-modal');
+    
+    // Start server stats check
+    getServerStats();
+    setInterval(getServerStats, 30000);
+
+    // Apply styles to submit button
+    if (submitPasswordBtn) submitPasswordBtn.classList.add('submit-button');
+    
+    // Set up password input event listener
+    if (passwordInput) {
+        passwordInput.addEventListener('keyup', function(event) {
+            if (event.key === 'Enter') {
+                submitPasswordBtn.click();
+            }
+        });
+    }
+    
+    // Set up view metrics button
+    if (viewMetricsBtn) {
+        viewMetricsBtn.addEventListener('click', function() {
+            if (getToken()) {
+                showMetrics();
+            } else {
+                openPasswordModal();
+            }
+        });
+    }
+    
+    // Set up password modal submit button
+    if (submitPasswordBtn) {
+        submitPasswordBtn.addEventListener('click', login);
+    }
+    
+    // Set up password modal close button
+    const passwordCloseBtn = document.querySelector('#password-modal .close-button');
+    if (passwordCloseBtn) {
+        passwordCloseBtn.addEventListener('click', closePasswordModal);
+    }
+    
+    // Close password modal when clicking outside
+    if (passwordModal) {
+        passwordModal.addEventListener('click', function(event) {
+            if (event.target === passwordModal) {
+                closePasswordModal();
+            }
+        });
+    }
+    
+    // Check if already authenticated and show metrics if so
+    if (getToken()) showMetrics();
+    
+    // Observer for metrics section visibility
+    if (metricsSection) {
+        const observer = new MutationObserver(handleMetricsVisibilityChange);
+        observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] });
+    }
+    
+    // Chart modal event listeners
     if (closeChartModalBtn) {
         closeChartModalBtn.addEventListener('click', closeChartModal);
     }