Speed up chart loading (smarter cache) and fix glitchy period buttons

- Chart cache: 60s TTL -> 5min with file-size check (only reprocess when new data arrives)
- Period buttons: add debounce, loading state, instant visual feedback
- No data file changes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

app.py

@@ -612,7 +612,7 @@ def rdp_simplify(points, epsilon):
 
 
 # ===== CHART DATA CACHE =====
-_chart_cache = {'data': None, 'time': 0, 'key': None}
+_chart_cache = {'data': None, 'time': 0, 'key': None, 'file_size': 0}
 
 
 # ===== EMAIL ALERT FUNCTIONS =====
@@ -2100,9 +2100,15 @@ def get_snapshots_chart():
         epsilon = float(request.args.get('epsilon', '0.5'))
         cache_key = f'{period}:{epsilon}'
 
-        # 60-second cache
+        # Cache: serve cached result if same params AND file hasn't grown
         now = _time.time()
-        if _chart_cache['key'] == cache_key and _chart_cache['data'] and (now - _chart_cache['time']) < 60:
+        try:
+            current_file_size = os.path.getsize(HISTORICAL_DATA_PATH)
+        except OSError:
+            current_file_size = 0
+        if (_chart_cache['key'] == cache_key and _chart_cache['data']
+                and _chart_cache['file_size'] == current_file_size
+                and (now - _chart_cache['time']) < 300):
             return jsonify(_chart_cache['data'])
 
         # Read all snapshots
@@ -2260,7 +2266,7 @@ def get_snapshots_chart():
         }
 
         # Cache and return
-        _chart_cache = {'data': result, 'time': now, 'key': cache_key}
+        _chart_cache = {'data': result, 'time': now, 'key': cache_key, 'file_size': current_file_size}
 
         resp = jsonify(result)
         resp.headers['Cache-Control'] = 'public, max-age=30'

templates/markets.html

@@ -924,6 +924,10 @@ <h4>Disclaimer</h4>
             background: var(--bg-surface-hover);
         }
 
+        .toggle-btn:active {
+            transform: scale(0.96);
+        }
+
         .toggle-btn.active {
             background: var(--bg-surface);
             color: var(--text-primary);
@@ -2947,16 +2951,27 @@ <h4>Disclaimer</h4>
 
 document.addEventListener('DOMContentLoaded', () => {
     // Set up chart toggle buttons
+    var _chartLoading = false;
     document.querySelectorAll('.toggle-btn').forEach(btn => {
         btn.addEventListener('click', async (e) => {
-            // Update button states
+            if (_chartLoading) return; // debounce
+            var clicked = e.target.closest('.toggle-btn');
+            if (!clicked || clicked.classList.contains('active')) return;
+
+            // Update button states immediately
             document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
-            e.target.classList.add('active');
+            clicked.classList.add('active');
+            clicked.style.opacity = '0.6';
 
-            currentChartPeriod = e.target.dataset.period;
+            currentChartPeriod = clicked.dataset.period;
+            _chartLoading = true;
 
-            // Render chart with the selected period (handles both 30d and 1h)
-            await renderMarketTrendChart(candidatesData);
+            try {
+                await renderMarketTrendChart(candidatesData);
+            } finally {
+                _chartLoading = false;
+                clicked.style.opacity = '';
+            }
         });
     });