fix: fixed click graph feature

1 files changed, 192 insertions, 63 deletions

diff --git a/static/js/main.js b/static/js/main.js
index 74cdd10..d67493c 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -798,16 +798,17 @@ function handleMetricsVisibilityChange() {
 
 // --- Chart expansion functionality ---
 function expandChart(metricName, displayName) {
-    // Always try to get references to modal elements when function is called
-    // This ensures we have the most up-to-date references
+    // First ensure the chart modal exists (create it if needed)
+    ensureChartModalExists();
+    
+    // After ensuring the chart modal exists, get fresh references
     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');
+    const expandedChartCanvas = document.getElementById('expandedChart');
     
-    // Safety check - if elements not found, show error and exit
-    if (!chartModal || !chartModalTitle) {
-        console.error("Chart modal elements not found");
+    // Check that we have all required elements
+    if (!chartModal || !chartModalTitle || !expandedChartCanvas) {
+        console.error("Chart modal elements not found even after creation attempt");
         alert("Unable to display expanded chart. Please refresh the page and try again.");
         return;
     }
@@ -819,22 +820,6 @@ function expandChart(metricName, displayName) {
     chartModal.style.display = 'block';
     setTimeout(() => chartModal.classList.add('show'), 10);
     
-    // Create an expanded version of the chart
-    const expandedChartCanvas = document.getElementById('expandedChart');
-    if (!expandedChartCanvas) {
-        console.error("Expanded chart canvas not found");
-        return;
-    }
-    
-    // Set up close button event listeners if they exist
-    if (closeChartModalBtn) {
-        closeChartModalBtn.addEventListener('click', () => closeChartModal(chartModal));
-    }
-    
-    if (closeChartBtn) {
-        closeChartBtn.addEventListener('click', () => closeChartModal(chartModal));
-    }
-    
     const ctx = expandedChartCanvas.getContext('2d');
     if (!ctx) {
         console.error("Could not get canvas context");
@@ -905,16 +890,192 @@ function closeChartModal(modalElement) {
     }
 }
 
+// Ensure chart modal exists in the DOM
+function ensureChartModalExists() {
+    let chartModalEl = document.getElementById('chart-modal');
+    
+    // If the chart modal doesn't exist, create it programmatically
+    if (!chartModalEl) {
+        console.log("Chart modal not found in DOM, creating it dynamically");
+        
+        // First, ensure we have the required CSS styles
+        ensureModalStyles();
+        
+        // Create the modal elements
+        chartModalEl = document.createElement('div');
+        chartModalEl.id = 'chart-modal';
+        chartModalEl.className = 'modal';
+        
+        const modalContent = document.createElement('div');
+        modalContent.className = 'modal-content chart-modal-content';
+        
+        const closeButton = document.createElement('span');
+        closeButton.className = 'close-button';
+        closeButton.innerHTML = '×';
+        
+        const modalTitle = document.createElement('h3');
+        modalTitle.id = 'chart-modal-title';
+        modalTitle.textContent = 'Chart Details';
+        
+        const chartContainer = document.createElement('div');
+        chartContainer.className = 'expanded-chart-container';
+        
+        const canvas = document.createElement('canvas');
+        canvas.id = 'expandedChart';
+        
+        const closeModalBtn = document.createElement('button');
+        closeModalBtn.id = 'close-chart-modal';
+        closeModalBtn.className = 'button';
+        closeModalBtn.textContent = 'Close';
+        
+        // Assemble the modal
+        chartContainer.appendChild(canvas);
+        modalContent.appendChild(closeButton);
+        modalContent.appendChild(modalTitle);
+        modalContent.appendChild(chartContainer);
+        modalContent.appendChild(closeModalBtn);
+        chartModalEl.appendChild(modalContent);
+        
+        // Add to document body
+        document.body.appendChild(chartModalEl);
+        
+        // Set up event listeners
+        closeButton.addEventListener('click', () => closeChartModal(chartModalEl));
+        closeModalBtn.addEventListener('click', () => closeChartModal(chartModalEl));
+        chartModalEl.addEventListener('click', (event) => {
+            if (event.target === chartModalEl) {
+                closeChartModal(chartModalEl);
+            }
+        });
+        
+        // Update global references
+        chartModal = chartModalEl;
+        chartModalTitle = modalTitle;
+        closeChartModalBtn = closeButton;
+        closeChartBtn = closeModalBtn;
+        
+        console.log("Chart modal created dynamically", {
+            chartModal: !!chartModal,
+            chartModalTitle: !!chartModalTitle,
+            closeChartModalBtn: !!closeChartModalBtn,
+            closeChartBtn: !!closeChartBtn
+        });
+        
+        return true;
+    }
+    
+    return false;
+}
+
+// Ensure modal styles are added to the page
+function ensureModalStyles() {
+    // Check if we already have a style tag with our styles
+    if (document.getElementById('dynamic-modal-styles')) {
+        return;
+    }
+    
+    // Create a style element
+    const styleEl = document.createElement('style');
+    styleEl.id = 'dynamic-modal-styles';
+    
+    // Define CSS for modals
+    const css = `
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            overflow-y: auto;
+        }
+        
+        .modal.show {
+            opacity: 1;
+        }
+        
+        .modal-content {
+            background-color: #111;
+            margin: 10% auto;
+            padding: 20px;
+            border: 1px solid #333;
+            width: 80%;
+            max-width: 500px;
+            border-radius: 8px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            transform: translateY(-20px);
+            transition: transform 0.3s ease;
+            animation: modalFadeIn 0.3s forwards;
+        }
+        
+        .modal.show .modal-content {
+            transform: translateY(0);
+        }
+        
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .close-button {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            margin-top: -10px;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        
+        .close-button:hover {
+            color: #FDCFF3;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        
+        .chart-modal-content {
+            max-width: 800px;
+            width: 90%;
+        }
+        
+        .expanded-chart-container {
+            width: 100%;
+            height: 400px;
+            margin: 20px 0;
+        }
+    `;
+    
+    // Add the styles to the page
+    styleEl.textContent = css;
+    document.head.appendChild(styleEl);
+    
+    console.log("Added dynamic modal styles to page");
+}
+
 // --- Initialize everything when DOM is loaded ---
 document.addEventListener('DOMContentLoaded', function() {
     // Set DOM ready flag
     domReady = true;
     
-    // Initialize all DOM elements
+    // Try to find chart modal elements first
     chartModal = document.getElementById('chart-modal');
     chartModalTitle = document.getElementById('chart-modal-title');
     closeChartModalBtn = document.querySelector('#chart-modal .close-button');
     closeChartBtn = document.getElementById('close-chart-modal');
+    
+    // If chart modal doesn't exist, create it
+    if (!chartModal || !chartModalTitle || !closeChartModalBtn || !closeChartBtn) {
+        const created = ensureChartModalExists();
+        if (created) {
+            console.log("Chart modal was created during initialization");
+        }
+    }
+    
+    // Initialize other DOM elements
     metricsSection = document.getElementById('metrics-section');
     viewMetricsBtn = document.getElementById('view-metrics-btn');
     passwordModal = document.getElementById('password-modal');
@@ -923,12 +1084,6 @@ document.addEventListener('DOMContentLoaded', function() {
     passwordError = document.getElementById('password-error');
     metricsControls = document.getElementById('metrics-controls');
     
-    // Log any missing critical elements
-    if (!chartModal) console.warn("Chart modal element not found in DOM");
-    if (!chartModalTitle) console.warn("Chart modal title element not found in DOM");
-    if (!metricsSection) console.warn("Metrics section element not found in DOM");
-    if (!passwordModal) console.warn("Password modal element not found in DOM");
-    
     // For debugging - log all initialized elements
     console.log("DOM elements initialized:", {
         chartModal: !!chartModal,
@@ -999,26 +1154,6 @@ document.addEventListener('DOMContentLoaded', function() {
         observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] });
     }
     
-    // Set up chart modal event listeners if the elements exist
-    if (chartModal && closeChartModalBtn && closeChartBtn) {
-        // Close button in the top right
-        closeChartModalBtn.addEventListener('click', function() {
-            closeChartModal(chartModal);
-        });
-        
-        // Close button at the bottom
-        closeChartBtn.addEventListener('click', function() {
-            closeChartModal(chartModal);
-        });
-        
-        // Close modal when clicking outside of it
-        chartModal.addEventListener('click', function(event) {
-            if (event.target === chartModal) {
-                closeChartModal(chartModal);
-            }
-        });
-    }
-    
     // Close modals with Escape key
     document.addEventListener('keydown', function(event) {
         if (event.key === 'Escape') {
@@ -1034,6 +1169,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
 // Ensure chart elements are initialized when DOM is fully ready
 document.addEventListener('dom-fully-ready', function() {
+    // Ensure the chart modal exists
+    const created = ensureChartModalExists();
+    if (created) {
+        console.log("Chart modal was created during dom-fully-ready event");
+    }
+    
     // Get fresh references to chart elements
     const chartModalEl = document.getElementById('chart-modal');
     const chartModalTitleEl = document.getElementById('chart-modal-title');
@@ -1057,19 +1198,7 @@ document.addEventListener('dom-fully-ready', function() {
         closeChartBtn: !!closeChartBtn
     });
     
-    // Set up event listeners if they weren't set up properly before
-    if (allElementsFound) {
-        // Add event listeners for closing the chart modal
-        closeChartModalBtn.addEventListener('click', () => closeChartModal(chartModal));
-        closeChartBtn.addEventListener('click', () => closeChartModal(chartModal));
-        
-        // Close modal when clicking outside
-        chartModal.addEventListener('click', (event) => {
-            if (event.target === chartModal) {
-                closeChartModal(chartModal);
-            }
-        });
-    } else {
+    if (!allElementsFound) {
         console.error("Some chart modal elements are still missing after DOM is fully ready");
     }
 }); 
\ No newline at end of file