From 96ba3e94c96e7147ccff0ba4d66ce555597d91c2 Mon Sep 17 00:00:00 2001
From: Charlie <ctbushman@gmail.com>
Date: Fri, 16 Jan 2026 15:29:05 -0500
Subject: [PATCH 1/3] Enable zoom interactions on isolate stats chart

---
 app/templates/isolate_stats.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/templates/isolate_stats.html b/app/templates/isolate_stats.html
index c8c8e2c..51eb5ed 100644
--- a/app/templates/isolate_stats.html
+++ b/app/templates/isolate_stats.html
@@ -87,8 +87,14 @@ <h5 class="card-title">Suspected Organism</h5>
 <script type="text/javascript">
 $(document).ready(function () {
     const assemblyUrl = "{{ url_for('show_assembly', assembly_id=0)[:-1] }}";
-    if (window.Chart && window.ChartZoom) {
-        Chart.register(ChartZoom);
+    const zoomPlugin =
+        window.ChartZoom ||
+        window.ChartZoom?.default ||
+        window.zoomPlugin ||
+        window.chartjsPluginZoom ||
+        window.Zoom;
+    if (window.Chart && zoomPlugin) {
+        Chart.register(zoomPlugin);
     }
     const palette = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
     const speciesKey = (metric) => metric.suspected_organism || 'Unknown';
@@ -294,9 +300,11 @@ <h5 class="card-title">Suspected Organism</h5>
             return;
         }
 
+        const chartPlugins = zoomPlugin ? [zoomPlugin] : [];
         new Chart(context, {
             type: 'scatter',
             data: { datasets },
+            plugins: chartPlugins,
             options: {
                 parsing: false,
                 interaction: {
@@ -324,6 +332,9 @@ <h5 class="card-title">Suspected Organism</h5>
                             pinch: {
                                 enabled: true,
                             },
+                            drag: {
+                                enabled: true,
+                            },
                             mode: 'xy',
                         },
                     },

From 2971c5470829877781122b3dc19a4d672a5ec59d Mon Sep 17 00:00:00 2001
From: Charlie <ctbushman@gmail.com>
Date: Fri, 16 Jan 2026 15:40:09 -0500
Subject: [PATCH 2/3] Add zoom controls for isolate stats chart

---
 app/templates/isolate_stats.html | 56 ++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/app/templates/isolate_stats.html b/app/templates/isolate_stats.html
index 51eb5ed..f9a811f 100644
--- a/app/templates/isolate_stats.html
+++ b/app/templates/isolate_stats.html
@@ -62,7 +62,20 @@ <h5 class="card-title">Genome Size</h5>
         <div class="col-12">
           <div class="card shadow-sm h-100">
             <div class="card-body">
-              <h5 class="card-title">Completeness vs Contamination</h5>
+              <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                <h5 class="card-title mb-0">Completeness vs Contamination</h5>
+                <div class="btn-group btn-group-sm" role="group" aria-label="Zoom controls">
+                  <button id="contaminationCompletenessZoomIn" type="button" class="btn btn-outline-secondary" title="Zoom in">
+                    <i class="bi bi-zoom-in"></i>
+                  </button>
+                  <button id="contaminationCompletenessZoomOut" type="button" class="btn btn-outline-secondary" title="Zoom out">
+                    <i class="bi bi-zoom-out"></i>
+                  </button>
+                  <button id="contaminationCompletenessResetZoom" type="button" class="btn btn-outline-secondary" title="Reset zoom">
+                    <i class="bi bi-aspect-ratio"></i>
+                  </button>
+                </div>
+              </div>
               <div style="height: 230px">
                 <canvas id="contaminationCompletenessChart"></canvas>
               </div>
@@ -88,8 +101,9 @@ <h5 class="card-title">Suspected Organism</h5>
 $(document).ready(function () {
     const assemblyUrl = "{{ url_for('show_assembly', assembly_id=0)[:-1] }}";
     const zoomPlugin =
-        window.ChartZoom ||
+        window.ChartZoom?.Zoom ||
         window.ChartZoom?.default ||
+        window.ChartZoom ||
         window.zoomPlugin ||
         window.chartjsPluginZoom ||
         window.Zoom;
@@ -267,11 +281,45 @@ <h5 class="card-title">Suspected Organism</h5>
         });
     }
 
+    let contaminationCompletenessChart = null;
+
+    function attachZoomControls() {
+        const zoomInButton = document.getElementById('contaminationCompletenessZoomIn');
+        const zoomOutButton = document.getElementById('contaminationCompletenessZoomOut');
+        const resetZoomButton = document.getElementById('contaminationCompletenessResetZoom');
+
+        if (!zoomInButton || !zoomOutButton || !resetZoomButton) {
+            return;
+        }
+
+        const hasZoom = contaminationCompletenessChart && typeof contaminationCompletenessChart.zoom === 'function';
+        zoomInButton.disabled = !hasZoom;
+        zoomOutButton.disabled = !hasZoom;
+        resetZoomButton.disabled = !hasZoom;
+
+        zoomInButton.addEventListener('click', () => {
+            if (contaminationCompletenessChart) {
+                contaminationCompletenessChart.zoom(1.2);
+            }
+        });
+        zoomOutButton.addEventListener('click', () => {
+            if (contaminationCompletenessChart) {
+                contaminationCompletenessChart.zoom(0.8);
+            }
+        });
+        resetZoomButton.addEventListener('click', () => {
+            if (contaminationCompletenessChart) {
+                contaminationCompletenessChart.resetZoom();
+            }
+        });
+    }
+
     function renderScatter(metrics, grouping) {
         const context = document.getElementById('contaminationCompletenessChart');
         if (!context) {
             return;
         }
+        context.style.touchAction = 'none';
 
         const datasets = grouping.groups
             .map((group) => {
@@ -301,7 +349,7 @@ <h5 class="card-title">Suspected Organism</h5>
         }
 
         const chartPlugins = zoomPlugin ? [zoomPlugin] : [];
-        new Chart(context, {
+        contaminationCompletenessChart = new Chart(context, {
             type: 'scatter',
             data: { datasets },
             plugins: chartPlugins,
@@ -361,6 +409,8 @@ <h5 class="card-title">Suspected Organism</h5>
                 },
             },
         });
+
+        attachZoomControls();
     }
 
     fetch('{{ url_for('api_assembly_metrics') }}')

From 676917319eb36d87eea4512c758be960b5612483 Mon Sep 17 00:00:00 2001
From: Charlie <ctbushman@gmail.com>
Date: Fri, 16 Jan 2026 15:44:37 -0500
Subject: [PATCH 3/3] Remove zoom support from isolate stats chart

---
 app/templates/isolate_stats.html | 84 +-------------------------------
 1 file changed, 2 insertions(+), 82 deletions(-)

diff --git a/app/templates/isolate_stats.html b/app/templates/isolate_stats.html
index f9a811f..d2c29d2 100644
--- a/app/templates/isolate_stats.html
+++ b/app/templates/isolate_stats.html
@@ -2,7 +2,6 @@
 
 {% block head %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.umd.min.js"></script>
   <style>
     .legend-scroll {
       max-height: 420px;
@@ -62,20 +61,7 @@ <h5 class="card-title">Genome Size</h5>
         <div class="col-12">
           <div class="card shadow-sm h-100">
             <div class="card-body">
-              <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
-                <h5 class="card-title mb-0">Completeness vs Contamination</h5>
-                <div class="btn-group btn-group-sm" role="group" aria-label="Zoom controls">
-                  <button id="contaminationCompletenessZoomIn" type="button" class="btn btn-outline-secondary" title="Zoom in">
-                    <i class="bi bi-zoom-in"></i>
-                  </button>
-                  <button id="contaminationCompletenessZoomOut" type="button" class="btn btn-outline-secondary" title="Zoom out">
-                    <i class="bi bi-zoom-out"></i>
-                  </button>
-                  <button id="contaminationCompletenessResetZoom" type="button" class="btn btn-outline-secondary" title="Reset zoom">
-                    <i class="bi bi-aspect-ratio"></i>
-                  </button>
-                </div>
-              </div>
+              <h5 class="card-title">Completeness vs Contamination</h5>
               <div style="height: 230px">
                 <canvas id="contaminationCompletenessChart"></canvas>
               </div>
@@ -100,16 +86,6 @@ <h5 class="card-title">Suspected Organism</h5>
 <script type="text/javascript">
 $(document).ready(function () {
     const assemblyUrl = "{{ url_for('show_assembly', assembly_id=0)[:-1] }}";
-    const zoomPlugin =
-        window.ChartZoom?.Zoom ||
-        window.ChartZoom?.default ||
-        window.ChartZoom ||
-        window.zoomPlugin ||
-        window.chartjsPluginZoom ||
-        window.Zoom;
-    if (window.Chart && zoomPlugin) {
-        Chart.register(zoomPlugin);
-    }
     const palette = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
     const speciesKey = (metric) => metric.suspected_organism || 'Unknown';
     const MAX_SPECIES = 4;
@@ -281,45 +257,11 @@ <h5 class="card-title">Suspected Organism</h5>
         });
     }
 
-    let contaminationCompletenessChart = null;
-
-    function attachZoomControls() {
-        const zoomInButton = document.getElementById('contaminationCompletenessZoomIn');
-        const zoomOutButton = document.getElementById('contaminationCompletenessZoomOut');
-        const resetZoomButton = document.getElementById('contaminationCompletenessResetZoom');
-
-        if (!zoomInButton || !zoomOutButton || !resetZoomButton) {
-            return;
-        }
-
-        const hasZoom = contaminationCompletenessChart && typeof contaminationCompletenessChart.zoom === 'function';
-        zoomInButton.disabled = !hasZoom;
-        zoomOutButton.disabled = !hasZoom;
-        resetZoomButton.disabled = !hasZoom;
-
-        zoomInButton.addEventListener('click', () => {
-            if (contaminationCompletenessChart) {
-                contaminationCompletenessChart.zoom(1.2);
-            }
-        });
-        zoomOutButton.addEventListener('click', () => {
-            if (contaminationCompletenessChart) {
-                contaminationCompletenessChart.zoom(0.8);
-            }
-        });
-        resetZoomButton.addEventListener('click', () => {
-            if (contaminationCompletenessChart) {
-                contaminationCompletenessChart.resetZoom();
-            }
-        });
-    }
-
     function renderScatter(metrics, grouping) {
         const context = document.getElementById('contaminationCompletenessChart');
         if (!context) {
             return;
         }
-        context.style.touchAction = 'none';
 
         const datasets = grouping.groups
             .map((group) => {
@@ -348,11 +290,9 @@ <h5 class="card-title">Suspected Organism</h5>
             return;
         }
 
-        const chartPlugins = zoomPlugin ? [zoomPlugin] : [];
-        contaminationCompletenessChart = new Chart(context, {
+        new Chart(context, {
             type: 'scatter',
             data: { datasets },
-            plugins: chartPlugins,
             options: {
                 parsing: false,
                 interaction: {
@@ -368,24 +308,6 @@ <h5 class="card-title">Suspected Organism</h5>
                             },
                         },
                     },
-                    zoom: {
-                        pan: {
-                            enabled: true,
-                            mode: 'xy',
-                        },
-                        zoom: {
-                            wheel: {
-                                enabled: true,
-                            },
-                            pinch: {
-                                enabled: true,
-                            },
-                            drag: {
-                                enabled: true,
-                            },
-                            mode: 'xy',
-                        },
-                    },
                     legend: { display: false },
                 },
                 maintainAspectRatio: false,
@@ -409,8 +331,6 @@ <h5 class="card-title">Suspected Organism</h5>
                 },
             },
         });
-
-        attachZoomControls();
     }
 
     fetch('{{ url_for('api_assembly_metrics') }}')