ui tweaks

ANNOTATE/web/static/js/chart_manager.js

@@ -441,7 +441,8 @@ class ChartManager {
                 showgrid: true,
                 zeroline: false,
                 domain: [0.3, 1],
-                fixedrange: false // Allow vertical scaling
+                fixedrange: false, // Allow vertical scaling by dragging Y-axis
+                autorange: true
             },
             yaxis2: {
                 title: {
@@ -453,7 +454,8 @@ class ChartManager {
                 showgrid: false,
                 zeroline: false,
                 domain: [0, 0.25],
-                fixedrange: false
+                fixedrange: false, // Allow vertical scaling
+                autorange: true
             },
             plot_bgcolor: '#1f2937',
             paper_bgcolor: '#1f2937',
@@ -472,10 +474,23 @@ class ChartManager {
             modeBarButtonsToRemove: ['lasso2d', 'select2d'], // Allow autoScale2d
             displaylogo: false,
             scrollZoom: true,
-            // Performance optimizations
-            doubleClick: 'reset', // Enable double-click reset
-            showAxisDragHandles: true, // Enable axis dragging
-            showAxisRangeEntryBoxes: false
+            // Enable vertical scaling by dragging Y-axis
+            doubleClick: 'reset', // Double-click to reset zoom
+            showAxisDragHandles: true, // Show drag handles on axes
+            showAxisRangeEntryBoxes: true, // Allow manual range entry
+            // Axis drag behavior
+            editable: true, // Make axes editable
+            edits: {
+                axisTitleText: false,
+                colorbarPosition: false,
+                colorbarTitleText: false,
+                legendPosition: false,
+                legendText: false,
+                shapePosition: true,
+                annotationPosition: true,
+                annotationTail: true,
+                annotationText: false
+            }
         };
 
         // Prepare chart data with pivot bounds
@@ -2368,13 +2383,20 @@ class ChartManager {
             
             if (!plotElement) return;
             
-            // Create or update metrics overlay
-            let overlay = document.getElementById(`metrics-overlay-${activeTimeframe}`);
+            // Remove any existing overlays from other timeframes
+            document.querySelectorAll('[id^="metrics-overlay-"]').forEach(el => {
+                if (el.id !== 'metrics-overlay') {
+                    el.remove();
+                }
+            });
+            
+            // Create or update single metrics overlay
+            let overlay = document.getElementById('metrics-overlay');
             
             if (!overlay) {
                 // Create overlay div
                 overlay = document.createElement('div');
-                overlay.id = `metrics-overlay-${activeTimeframe}`;
+                overlay.id = 'metrics-overlay';
                 overlay.style.cssText = `
                     position: absolute;
                     top: 10px;
@@ -2437,12 +2459,19 @@ class ChartManager {
      * Remove live metrics overlay
      */
     removeLiveMetrics() {
-        if (this.liveMetricsOverlay) {
-            this.liveMetricsOverlay.remove();
-            this.liveMetricsOverlay = null;
+        // Remove the single metrics overlay
+        const overlay = document.getElementById('metrics-overlay');
+        if (overlay) {
+            overlay.remove();
         }
         
-        // Remove all overlays
-        document.querySelectorAll('[id^="metrics-overlay-"]').forEach(el => el.remove());
+        // Also remove any old overlays with timeframe-specific IDs (cleanup)
+        document.querySelectorAll('[id^="metrics-overlay-"]').forEach(el => {
+            if (el.id !== 'metrics-overlay') {
+                el.remove();
+            }
+        });
+        
+        this.liveMetricsOverlay = null;
     }
 }