phase 4 complete

web/templates/scan_detail.html

@@ -133,7 +133,9 @@
                     <p class="text-muted mb-3">
                         Historical port count trend for scans using the same configuration
                     </p>
-                    <canvas id="historyChart" height="80"></canvas>
+                    <div style="position: relative; height: 300px;">
+                        <canvas id="historyChart"></canvas>
+                    </div>
                 </div>
             </div>
         </div>
@@ -166,10 +168,14 @@
 <script>
     const scanId = {{ scan_id }};
     let scanData = null;
+    let historyChart = null; // Store chart instance to prevent duplicates
 
     // Load scan on page load
     document.addEventListener('DOMContentLoaded', function() {
-        loadScan();
+        loadScan().then(() => {
+            findPreviousScan();
+            loadHistoricalChart();
+        });
 
         // Auto-refresh every 10 seconds if scan is running
         setInterval(function() {
@@ -494,8 +500,13 @@
             if (data.scans && data.scans.length > 1) {
                 document.getElementById('historical-chart-row').style.display = 'block';
 
+                // Destroy existing chart to prevent canvas growth bug
+                if (historyChart) {
+                    historyChart.destroy();
+                }
+
                 const ctx = document.getElementById('historyChart').getContext('2d');
-                new Chart(ctx, {
+                historyChart = new Chart(ctx, {
                     type: 'line',
                     data: {
                         labels: data.labels,
@@ -570,11 +581,5 @@
             console.error('Error loading historical chart:', error);
         }
     }
-
-    // Initialize: find previous scan and load chart after loading current scan
-    loadScan().then(() => {
-        findPreviousScan();
-        loadHistoricalChart();
-    });
 </script>
 {% endblock %}