Update app.py

app.py

@@ -2,15 +2,17 @@ import pandas as pd
 import requests
 import uvicorn
 import json
-import numpy as np
+import asyncio
 from datetime import datetime, timedelta
 from fastapi import FastAPI, Body, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 from typing import Optional, List, Dict, Any
 
 # ==========================================
 # 1. CONFIGURATION
 # ==========================================
+# Supabase Configuration (Using provided keys)
 SB_URL = "https://tuyhtqxfvjndbyjazosi.supabase.co"
 SB_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR1eWh0cXhmdmpuZGJ5amF6b3NpIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2ODE0NjAyMiwiZXhwIjoyMDgzNzIyMDIyfQ.YsmGS67vL5TghB5OOi6pmsPL6rrgx7SNpARHmQ9b5cw"
 
@@ -26,18 +28,19 @@ app = FastAPI()
 # ==========================================
 # 2. HELPER FUNCTIONS
 # ==========================================
-def sb_request(endpoint: str, params: dict = None):
+def sb_get(endpoint: str, params: dict = None):
+    """Generic Supabase GET helper."""
     try:
         url = f"{SB_URL}/rest/v1{endpoint}"
         r = requests.get(url, headers=HEADERS, params=params)
         r.raise_for_status()
         return r.json()
     except Exception as e:
-        print(f"Supabase Error: {e}")
+        print(f"DB Error ({endpoint}): {e}")
         return []
 
 # ==========================================
-# 3. API ROUTES
+# 3. API ROUTES - METADATA
 # ==========================================
 
 @app.get("/")
@@ -46,179 +49,129 @@ def home():
 
 @app.get("/api/dates")
 def get_dates():
-    # Fetch distinct dates based on the minute column
-    # We fetch a large range of minutes to extract unique dates
-    data = sb_request("/history_buckets_upstox", {
-        "select": "minute",
-        "order": "minute.desc",
-        "limit": "5000" 
-    })
-    dates = set()
-    for row in data:
-        if row.get('minute'):
-            dates.add(row['minute'].split('T')[0])
+    """Fetch distinct dates available in history."""
+    # We limit to check recent 5000 records to find dates. 
+    # For a full history scan, a specific RPC function in Supabase is better, 
+    # but this works for standard usage.
+    data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "5000"})
+    dates = set(row['minute'].split('T')[0] for row in data)
     return JSONResponse(sorted(list(dates), reverse=True))
 
 @app.get("/api/roots")
 def get_roots(date: str):
-    # Fetch roots present on this specific date
-    start = f"{date}T00:00:00"
-    end = f"{date}T23:59:59"
-    data = sb_request("/history_buckets_upstox", {
-        "select": "root",
-        "minute": f"gte.{start}&minute=lte.{end}",
-        "limit": "2000"
-    })
-    roots = set()
-    for row in data:
-        if row.get('root'):
-            roots.add(row['root'])
+    """Fetch roots available for a specific date."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    # RPC or distinct select is ideal, but here we query range and set-ify
+    data = sb_get(f"/history_buckets_upstox?select=root&minute=gte.{start}&minute=lte.{end}")
+    roots = set(row['root'] for row in data)
     return JSONResponse(sorted(list(roots)))
 
 @app.get("/api/expiries")
 def get_expiries(date: str, root: str):
-    start = f"{date}T00:00:00"
-    end = f"{date}T23:59:59"
-    data = sb_request("/history_buckets_upstox", {
-        "select": "expiry",
-        "root": f"eq.{root}",
-        "minute": f"gte.{start}&minute=lte.{end}",
-        "limit": "2000"
-    })
-    exps = set()
-    for row in data:
-        if row.get('expiry'):
-            exps.add(row['expiry'])
-    
-    # Sort with MARKET at top
-    sl = sorted(list(exps))
-    if "MARKET" in sl:
-        sl.remove("MARKET")
-        sl.insert(0, "MARKET")
-    return JSONResponse(sl)
+    """Fetch expiries for a specific date and root."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    data = sb_get(f"/history_buckets_upstox?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}")
+    exps = set(row['expiry'] for row in data)
+    return JSONResponse(sorted(list(exps)))
 
 @app.get("/api/instruments")
 def get_instruments(date: str, root: str, expiry: str):
-    # Fetch one row to get keys from the JSONB 'data' column
-    start = f"{date}T00:00:00"
-    end = f"{date}T23:59:59"
-    data = sb_request("/history_buckets_upstox", {
-        "select": "data",
-        "root": f"eq.{root}",
-        "expiry": f"eq.{expiry}",
-        "minute": f"gte.{start}&minute=lte.{end}",
-        "limit": "1",
-        "order": "minute.desc"
-    })
-    
-    instruments = []
-    if data and data[0].get('data'):
-        instruments = list(data[0]['data'].keys())
-    
-    return JSONResponse(sorted(instruments))
+    """Fetch specific instrument keys (Symbol names) from the JSON data blob."""
+    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+    # We only need 1 record to see the keys structure for that day/root/expiry
+    res = sb_get(f"/history_buckets_upstox?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=1")
+    instruments = res[0]['data'].keys() if res else []
+    return JSONResponse(sorted(list(instruments)))
+
+# ==========================================
+# 4. API ROUTES - DATA FETCHING
+# ==========================================
 
-@app.post("/api/fetch_plot")
-def fetch_plot_data(
+@app.post("/api/fetch_series")
+def fetch_series(
     date: str = Body(...),
     root: str = Body(...),
     expiry: str = Body(...),
     instrument: str = Body(...),
-    timeframe: str = Body(...),
+    timeframe: str = Body(...), 
     start_time: str = Body(...),
     end_time: str = Body(...)
 ):
+    """
+    Fetches raw 10s data, resamples to timeframe (Median), and returns base vectors.
+    """
     t_start = f"{date}T{start_time}:00"
     t_end = f"{date}T{end_time}:59"
-
-    # Fetch rows
-    rows = sb_request("/history_buckets_upstox", {
-        "select": "minute,data",
-        "root": f"eq.{root}",
-        "expiry": f"eq.{expiry}",
-        "minute": f"gte.{t_start}&minute=lte.{t_end}",
-        "order": "minute.asc"
-    })
-
-    if not rows:
-        return JSONResponse({"error": "No data found for this selection"})
-
-    # Process 6-slot sub-minute data
+    
+    # Supabase query
+    url = f"/history_buckets_upstox?select=minute,data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+    rows = sb_get(url)
+    
     records = []
     
+    # Process 10-second buckets
     for row in rows:
         try:
-            base_ts = pd.to_datetime(row['minute'])
+            base_ts = datetime.fromisoformat(row['minute'])
             inst_data = row['data'].get(instrument)
             
             if not inst_data: continue
 
-            # Extract arrays
-            # Upstox buckets: p=Price, b=BuyQty, s=SellQty, v=Vol, o=OI
-            p = inst_data.get('p', [])
-            b = inst_data.get('b', [])
-            s = inst_data.get('s', [])
-            v = inst_data.get('v', [])
-            o = inst_data.get('o', [])
-
-            # Iterate 6 slots (0s, 10s, 20s, 30s, 40s, 50s)
+            # Extract arrays (p=price, b=buy_qty, s=sell_qty, v=vol, o=oi)
+            # Upstox buckets usually have 6 slots (0s, 10s, 20s, 30s, 40s, 50s)
+            p_arr = inst_data.get('p', []) or []
+            b_arr = inst_data.get('b', []) or []
+            s_arr = inst_data.get('s', []) or []
+            v_arr = inst_data.get('v', []) or []
+            o_arr = inst_data.get('o', []) or []
+            
             for i in range(6):
-                # We need at least a price to consider the slot valid
-                if i < len(p) and p[i] is not None:
-                    ts = base_ts + timedelta(seconds=i*10)
-                    
-                    val_p = float(p[i])
-                    val_b = float(b[i]) if i < len(b) and b[i] is not None else 0.0
-                    val_s = float(s[i]) if i < len(s) and s[i] is not None else 0.0
-                    val_v = float(v[i]) if i < len(v) and v[i] is not None else 0.0
-                    val_o = float(o[i]) if i < len(o) and o[i] is not None else 0.0
-                    
+                # Ensure we have price data at minimum to record a tick
+                if i < len(p_arr) and p_arr[i] is not None:
                     records.append({
-                        "ts": ts,
-                        "P": val_p,
-                        "B": val_b,
-                        "S": val_s,
-                        "V": val_v,
-                        "OI": val_o
+                        "ts": base_ts + timedelta(seconds=i*10),
+                        "price": float(p_arr[i]),
+                        "buy_qty": float(b_arr[i]) if i < len(b_arr) and b_arr[i] else 0.0,
+                        "sell_qty": float(s_arr[i]) if i < len(s_arr) and s_arr[i] else 0.0,
+                        "volume": float(v_arr[i]) if i < len(v_arr) and v_arr[i] else 0.0,
+                        "oi": float(o_arr[i]) if i < len(o_arr) and o_arr[i] else 0.0
                     })
-        except Exception as e:
+        except Exception:
             continue
 
     if not records:
-        return JSONResponse({"error": "Empty dataset after processing"})
+         return JSONResponse({"error": "No data found for this selection"})
 
-    # Create DataFrame
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
-
-    # Resample Logic
-    # 1min, 3min, 5min, etc.
+    
+    # Timeframe Mapping
     tf_map = {
-        "1min": "1T", "3min": "3T", "5min": "5T", 
-        "15min": "15T", "30min": "30T", "1hour": "1H"
+        "1min": "1min", "3min": "3min", "5min": "5min", 
+        "15min": "15min", "30min": "30min", "1hour": "1h"
     }
-    panda_tf = tf_map.get(timeframe, "1T")
-
-    # Aggregation: Median is best for noise reduction as requested
-    resampled = df.resample(panda_tf).median()
+    panda_tf = tf_map.get(timeframe, "1min")
     
-    # Drop rows where Price is NaN (gap in data)
-    resampled.dropna(subset=['P'], inplace=True)
-
-    return JSONResponse({
-        "status": "ok",
+    # Resample using Median to smooth out noise/nulls
+    resampled = df.resample(panda_tf).median().dropna()
+    
+    # Format for Frontend
+    response_data = {
         "labels": resampled.index.strftime('%H:%M').tolist(),
-        "data": {
-            "P": resampled['P'].tolist(),
-            "B": resampled['B'].tolist(),
-            "S": resampled['S'].tolist(),
-            "V": resampled['V'].tolist(),
-            "OI": resampled['OI'].tolist()
-        }
-    })
+        "P": resampled['price'].tolist(),
+        "B": resampled['buy_qty'].tolist(),
+        "S": resampled['sell_qty'].tolist(),
+        "V": resampled['volume'].tolist(),
+        "OI": resampled['oi'].tolist()
+    }
+    
+    return JSONResponse(response_data)
+
 
 # ==========================================
-# 4. FRONTEND (HTML/JS/CSS)
+# 5. FRONTEND TEMPLATE
 # ==========================================
+
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
@@ -226,174 +179,356 @@ HTML_TEMPLATE = """
     <meta charset="UTF-8">
     <title>DepthChain Historical</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        :root { 
-            --bg: #f3f4f6; 
-            --panel: #ffffff; 
-            --border: #e5e7eb; 
-            --text: #1f2937; 
-            --primary: #2563eb; 
-            --danger: #dc2626;
-            --success: #16a34a;
-        }
-        * { box-sizing: border-box; }
-        body { 
-            margin: 0; background: var(--bg); color: var(--text); 
-            font-family: 'Manrope', sans-serif; height: 100vh; 
-            display: flex; flex-direction: column; overflow: hidden; 
-        }
-
-        /* TOP BAR */
-        .top-nav {
-            background: #fff; border-bottom: 1px solid var(--border);
-            height: 50px; display: flex; align-items: center; justify-content: space-between;
-            padding: 0 20px; flex-shrink: 0;
-        }
-        .logo { font-weight: 800; font-size: 18px; color: var(--text); display:flex; gap:5px; align-items:center; }
-        .logo span { color: var(--primary); }
-
-        /* MAIN LAYOUT */
-        .layout { display: flex; flex: 1; height: calc(100vh - 50px); }
-        
-        /* SIDEBAR: CONTROLS */
-        .sidebar {
-            width: 320px; background: var(--panel); border-right: 1px solid var(--border);
-            display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0;
-            padding: 15px; gap: 15px;
+        /* --- THEME & RESET --- */
+        :root {
+            --bg-body: #f4f5f7;
+            --bg-card: #ffffff;
+            --text-primary: #172b4d;
+            --text-secondary: #5e6c84;
+            --border: #dfe1e6;
+            --accent: #0052cc;
+            --accent-hover: #0747a6;
+            --danger: #de350b;
+            --success: #00875a;
+            --font-main: 'Inter', sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
         }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
         
+        body {
+            background-color: var(--bg-body);
+            color: var(--text-primary);
+            font-family: var(--font-main);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        /* --- HEADER --- */
+        header {
+            background: var(--bg-card);
+            border-bottom: 1px solid var(--border);
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20px;
+            flex-shrink: 0;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+        }
+        .brand { font-weight: 700; font-size: 16px; display:flex; align-items:center; gap:8px;}
+        .brand span { color: var(--accent); background: #e6effc; padding: 2px 6px; border-radius: 4px; font-size: 11px; text-transform:uppercase;}
+
+        /* --- MAIN LAYOUT --- */
+        .main-container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+
+        /* --- GLOBAL SIDEBAR (Date & Time) --- */
+        .global-sidebar {
+            width: 260px;
+            background: var(--bg-card);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+            gap: 15px;
+            z-index: 10;
+        }
+
         .section-title {
-            font-size: 11px; font-weight: 800; color: #9ca3af; 
-            text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
-            border-bottom: 1px solid var(--border); padding-bottom: 4px;
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 5px;
         }
 
-        .form-group { margin-bottom: 10px; }
-        .form-label { font-size: 11px; font-weight: 700; color: #4b5563; display: block; margin-bottom: 4px; }
-        .form-select, .form-input {
-            width: 100%; padding: 8px 10px; border: 1px solid var(--border);
-            border-radius: 6px; font-size: 12px; font-family: 'Manrope'; 
-            outline: none; background: #f9fafb; transition: 0.2s;
+        .control-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 4px;
+            color: var(--text-primary);
         }
-        .form-select:focus, .form-input:focus {
-            border-color: var(--primary); background: #fff;
-            box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
+
+        select, input {
+            width: 100%;
+            padding: 8px 10px;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            font-size: 13px;
+            font-family: var(--font-main);
+            background: #fafbfc;
+            color: var(--text-primary);
+            transition: all 0.2s;
         }
-        
-        .btn {
-            width: 100%; padding: 10px; border: none; border-radius: 6px;
-            font-weight: 700; font-size: 12px; cursor: pointer; transition: 0.2s;
-        }
-        .btn-primary { background: var(--primary); color: white; }
-        .btn-primary:hover { background: #1d4ed8; }
-        .btn-outline { background: white; border: 1px solid var(--border); color: var(--text); }
-        .btn-outline:hover { background: #f3f4f6; }
-        .btn-sm { padding: 4px 8px; font-size: 10px; width: auto; }
-
-        /* PANELS CONFIGURATION */
-        .panels-container { display: flex; flex-direction: column; gap: 10px; }
-        .panel-card {
-            background: #fff; border: 1px solid var(--border);
-            border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        }
-        .panel-header {
-            background: #f8fafc; padding: 8px 12px; border-bottom: 1px solid var(--border);
-            display: flex; justify-content: space-between; align-items: center;
+        select:focus, input:focus {
+            outline: none;
+            border-color: var(--accent);
+            background: #fff;
+            box-shadow: 0 0 0 2px rgba(0,82,204,0.1);
         }
-        .panel-title { font-size: 11px; font-weight: 800; color: #64748b; }
-        .panel-body { padding: 10px; }
 
-        .series-row {
-            display: grid; grid-template-columns: 20px 1fr 60px 20px; gap: 8px;
-            align-items: center; margin-bottom: 8px; border-bottom: 1px dashed #f1f5f9;
-            padding-bottom: 8px;
+        .btn-primary {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 10px;
+            border-radius: 4px;
+            font-weight: 600;
+            cursor: pointer;
+            width: 100%;
+            font-size: 13px;
+            margin-top: auto;
         }
-        .color-picker { width: 20px; height: 20px; border: none; padding: 0; cursor: pointer; background:none; }
-        .formula-box {
-            display: flex; gap: 5px; align-items: center;
+        .btn-primary:hover { background: var(--accent-hover); }
+
+        .btn-add-panel {
+            background: transparent;
+            border: 1px dashed var(--border);
+            color: var(--text-secondary);
+            padding: 8px;
+            width: 100%;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 12px;
+        }
+        .btn-add-panel:hover { background: #ebecf0; color: var(--text-primary); border-color: #c1c7d0; }
+
+        /* --- CHART AREA --- */
+        .charts-wrapper {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
         }
-        .var-select { width: 100%; font-family: 'JetBrains Mono'; font-size: 11px; }
 
-        /* CHART AREA */
-        .chart-main {
-            flex: 1; background: #f1f5f9; padding: 20px; overflow-y: auto;
-            display: flex; flex-direction: column; gap: 20px;
+        .chart-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 15px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+            display: flex;
+            flex-direction: column;
+            min-height: 450px; /* Large charts */
+            position: relative;
+        }
+
+        .chart-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #f0f0f0;
+            padding-bottom: 10px;
+        }
+
+        .chart-title {
+            font-weight: 700;
+            font-size: 14px;
+            color: var(--text-primary);
         }
-        .chart-wrapper {
-            background: #fff; border-radius: 8px; padding: 15px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            min-height: 400px; border: 1px solid var(--border);
+
+        .chart-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .icon-btn {
+            background: none;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+        }
+        .icon-btn:hover { background: #ebecf0; color: var(--text-primary); }
+        .icon-btn.danger { color: var(--danger); border-color: #ffd2cc; }
+        .icon-btn.danger:hover { background: #ffebe6; }
+
+        .chart-canvas-container {
+            flex: 1;
             position: relative;
+            width: 100%;
+            min-height: 0; /* Flexbox trick */
         }
-        .chart-wrapper canvas { width: 100% !important; height: 100% !important; }
 
-        /* LOADER */
-        .loader {
-            position: fixed; inset: 0; background: rgba(255,255,255,0.8);
-            z-index: 1000; display: none; justify-content: center; align-items: center;
+        /* --- MODAL (Chart Config) --- */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(9, 30, 66, 0.54);
+            z-index: 100;
+            display: none;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background: white;
+            width: 600px;
+            max-width: 90%;
+            max-height: 85vh;
+            border-radius: 8px;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+            display: flex;
             flex-direction: column;
+            overflow: hidden;
+        }
+        .modal-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border);
+            font-weight: 700;
+            font-size: 15px;
+            display: flex; justify-content: space-between; align-items: center;
+            background: #fafbfc;
+        }
+        .modal-body {
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .modal-footer {
+            padding: 15px 20px;
+            border-top: 1px solid var(--border);
+            display: flex; justify-content: flex-end; gap: 10px;
+            background: #fafbfc;
+        }
+
+        /* Config Grid */
+        .config-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid var(--border);
+        }
+
+        /* Series List in Modal */
+        .series-list {
+            display: flex; flex-direction: column; gap: 10px;
         }
-        .spinner {
-            width: 40px; height: 40px; border: 4px solid #e5e7eb;
-            border-top: 4px solid var(--primary); border-radius: 50%;
-            animation: spin 1s linear infinite; margin-bottom: 10px;
+        .series-row {
+            display: grid;
+            grid-template-columns: 40px 1fr 1fr 80px 30px;
+            gap: 10px;
+            align-items: center;
+            background: #f4f5f7;
+            padding: 8px;
+            border-radius: 4px;
+        }
+        .series-row input[type="color"] { padding: 0; height: 30px; border:none; cursor: pointer; }
+        
+        .helper-text { font-size: 11px; color: var(--text-secondary); margin-top: 5px; font-family: var(--font-mono); }
+        .var-tag { 
+            display: inline-block; background: #e6effc; color: var(--accent); 
+            padding: 2px 5px; border-radius: 3px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; margin-right: 4px;
         }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
+        /* Loader */
+        .loader {
+            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(255,255,255,0.8);
+            z-index: 200;
+            display: flex; flex-direction: column;
+            justify-content: center; align-items: center;
+            font-weight: 700; color: var(--accent);
+            display: none;
+        }
     </style>
 </head>
 <body>
 
 <!-- LOADER -->
 <div class="loader" id="loader">
-    <div class="spinner"></div>
-    <div style="font-weight:700; color:#4b5563;">LOADING DATA...</div>
+    <div style="font-size: 24px;">FETCHING & COMPUTING...</div>
+    <div style="font-size: 12px; margin-top:10px; color:#666;">Processing high-resolution historical data</div>
 </div>
 
-<!-- TOP NAV -->
-<div class="top-nav">
-    <div class="logo">DepthChain <span>HISTORICAL</span></div>
-    <div>
-        <button class="btn btn-primary btn-sm" onclick="fetchAndPlot()">REFRESH PLOTS</button>
+<!-- MODAL FOR CHART CONFIG -->
+<div class="modal-overlay" id="configModal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <span id="modalTitle">Configure Panel</span>
+            <span style="cursor:pointer; font-size:20px;" onclick="closeModal()">×</span>
+        </div>
+        <div class="modal-body">
+            
+            <div class="section-title">Data Source (Specific to this Panel)</div>
+            <div class="config-grid">
+                <div class="control-group">
+                    <label>Root Symbol</label>
+                    <select id="cfgRoot" onchange="modalRootChanged()"></select>
+                </div>
+                <div class="control-group">
+                    <label>Expiry</label>
+                    <select id="cfgExp" onchange="modalExpChanged()" disabled></select>
+                </div>
+                <div class="control-group" style="grid-column: span 2;">
+                    <label>Instrument</label>
+                    <select id="cfgInst" disabled></select>
+                </div>
+            </div>
+
+            <div class="section-title">Plots / Formulas</div>
+            <div style="margin-bottom: 10px;">
+                <span class="helper-text">Variables: </span>
+                <span class="var-tag" onclick="insertVar('$P')">$P (Price)</span>
+                <span class="var-tag" onclick="insertVar('$V')">$V (Vol)</span>
+                <span class="var-tag" onclick="insertVar('$OI')">$OI (Open Int)</span>
+                <span class="var-tag" onclick="insertVar('$B')">$B (Buy Qty)</span>
+                <span class="var-tag" onclick="insertVar('$S')">$S (Sell Qty)</span>
+            </div>
+            
+            <div class="series-list" id="seriesList">
+                <!-- Dynamic Rows -->
+            </div>
+            <button class="btn-add-panel" style="margin-top:10px;" onclick="addSeriesRow()">+ Add Plot Line</button>
+
+        </div>
+        <div class="modal-footer">
+            <button class="icon-btn" onclick="closeModal()">Cancel</button>
+            <button class="btn-primary" style="width: auto;" onclick="saveConfig()">Save & Update</button>
+        </div>
     </div>
 </div>
 
-<div class="layout">
-    <!-- LEFT SIDEBAR -->
-    <div class="sidebar">
+<!-- TOP BAR -->
+<header>
+    <div class="brand">DepthChain <span>Historical India</span></div>
+    <div style="font-size:12px; font-weight:600; color:var(--text-secondary);">
+        NO LOGIN REQUIRED • DATA VIEWER
+    </div>
+</header>
+
+<!-- MAIN CONTENT -->
+<div class="main-container">
+    
+    <!-- LEFT SIDEBAR: GLOBAL TIME SETTINGS -->
+    <div class="global-sidebar">
+        <div class="section-title">Global Time Settings</div>
         
-        <!-- 1. DATA SELECT -->
-        <div class="section-title">1. Data Selection</div>
-        <div class="form-group">
-            <span class="form-label">Date</span>
-            <select id="selDate" class="form-select" onchange="loadRoots()"></select>
-        </div>
-        <div class="form-group">
-            <span class="form-label">Root Symbol</span>
-            <select id="selRoot" class="form-select" onchange="loadExpiries()" disabled>
-                <option>-- Select Date First --</option>
-            </select>
+        <div class="control-group">
+            <label>Trade Date</label>
+            <select id="glDate" onchange="loadGlobalDate()"></select>
         </div>
-        <div class="form-group">
-            <span class="form-label">Expiry</span>
-            <select id="selExp" class="form-select" onchange="loadInstruments()" disabled>
-                <option>--</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <span class="form-label">Instrument (Strike/Future)</span>
-            <select id="selInst" class="form-select" disabled>
-                <option>--</option>
-            </select>
-        </div>
-        
-        <!-- 2. TIME & RESAMPLE -->
-        <div class="section-title" style="margin-top:10px;">2. Time Settings</div>
-        <div class="form-group">
-            <span class="form-label">Timeframe (Resample)</span>
-            <select id="selTF" class="form-select">
+
+        <div class="control-group">
+            <label>Timeframe (Median)</label>
+            <select id="glTF">
                 <option value="1min">1 Minute</option>
                 <option value="3min">3 Minutes</option>
                 <option value="5min">5 Minutes</option>
@@ -402,319 +537,407 @@ HTML_TEMPLATE = """
                 <option value="1hour">1 Hour</option>
             </select>
         </div>
-        <div style="display:flex; gap:10px;">
-            <div class="form-group" style="flex:1;">
-                <span class="form-label">Start</span>
-                <input type="time" id="startTime" class="form-input" value="09:15">
+
+        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px;">
+            <div class="control-group">
+                <label>Start</label>
+                <input type="time" id="glStart" value="09:15">
             </div>
-            <div class="form-group" style="flex:1;">
-                <span class="form-label">End</span>
-                <input type="time" id="endTime" class="form-input" value="15:30">
+            <div class="control-group">
+                <label>End</label>
+                <input type="time" id="glEnd" value="15:30">
             </div>
         </div>
 
-        <!-- 3. PLOT CONFIG -->
-        <div class="section-title" style="margin-top:10px; display:flex; justify-content:space-between;">
-            <span>3. Panels Config</span>
-            <button class="btn btn-outline btn-sm" onclick="addPanel()">+ PANEL</button>
+        <div style="margin-top:20px; border-top: 1px solid var(--border); padding-top:20px;">
+            <div class="section-title">Dashboard Layout</div>
+            <button class="btn-add-panel" onclick="addNewPanel()">+ Add New Chart Panel</button>
         </div>
-        
-        <div id="panelsContainer" class="panels-container"></div>
-        
+
+        <button class="btn-primary" onclick="plotAll()">FETCH & PLOT ALL</button>
     </div>
 
-    <!-- RIGHT CHART AREA -->
-    <div class="chart-main" id="chartMain">
-        <div style="text-align:center; margin-top:100px; color:#94a3b8;">
-            <div style="font-size:40px; margin-bottom:10px;">📊</div>
-            <div style="font-weight:700;">No Data Loaded</div>
-            <div style="font-size:12px;">Select Data on the left and click Refresh Plots</div>
+    <!-- RIGHT: CHARTS CONTAINER -->
+    <div class="charts-wrapper" id="chartsContainer">
+        <!-- Dynamic Charts -->
+        <div style="text-align:center; color:#888; margin-top:100px;">
+            <h3>Welcome to DepthChain Historical</h3>
+            <p>Add a panel or click "Fetch" to begin.</p>
         </div>
     </div>
+
 </div>
 
 <script>
     // --- STATE ---
-    let PANELS = [
-        { 
-            id: 1, 
-            series: [{ id: 101, type: 'predefined', var: '$P', color: '#2563eb', axis: 'left' }] 
-        }
-    ];
-    let CACHED_DATA = null;
-    let CHARTS = [];
-
-    // --- PREDEFINED VARIABLES ---
-    const VARS = [
-        { label: 'Price ($P)', val: '$P' },
-        { label: 'Net Flow ($B - $S)', val: '$B - $S' },
-        { label: 'Open Interest ($OI)', val: '$OI' },
-        { label: 'Volume ($V)', val: '$V' },
-        { label: 'Buy Qty ($B)', val: '$B' },
-        { label: 'Sell Qty ($S)', val: '$S' },
-        { label: 'OI Change', val: '$OI' }, // Logic handled in render if needed
-        { label: 'Custom Formula...', val: 'custom' }
-    ];
-
+    let PANELS = []; // Stores config for each panel
+    let CURRENT_EDIT_ID = null; // ID of panel currently being edited in modal
+    let CHARTS_INSTANCES = {}; // Stores Chart.js instances
+    
     // --- INIT ---
     window.onload = async () => {
-        renderPanels();
-        await loadDates();
+        // 1. Fetch Dates
+        const res = await fetch('/api/dates');
+        const dates = await res.json();
+        const dSel = document.getElementById('glDate');
+        dSel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+        
+        // 2. Add Default Panel
+        if(dates.length > 0) {
+            addNewPanel();
+            // Trigger root load for modal internal usage
+            loadGlobalDate(); 
+        }
     };
 
-    // --- API CALLS ---
-    async function loadDates() {
-        const sel = document.getElementById('selDate');
-        sel.innerHTML = '<option>Loading...</option>';
-        try {
-            const r = await fetch('/api/dates');
-            const d = await r.json();
-            sel.innerHTML = d.map(x => `<option value="${x}">${x}</option>`).join('');
-            if(d.length > 0) loadRoots();
-        } catch(e) { sel.innerHTML = '<option>Error</option>'; }
+    function loadGlobalDate() {
+        // When date changes, we might want to clear caches or just let user re-plot
+        console.log("Date Changed");
     }
 
-    async function loadRoots() {
-        const date = document.getElementById('selDate').value;
-        const sel = document.getElementById('selRoot');
-        sel.disabled = true; sel.innerHTML = '<option>Loading...</option>';
-        try {
-            const r = await fetch(`/api/roots?date=${date}`);
-            const d = await r.json();
-            sel.innerHTML = d.map(x => `<option value="${x}">${x}</option>`).join('');
-            sel.disabled = false;
-            if(d.length > 0) loadExpiries();
-        } catch(e) { sel.innerHTML = '<option>None</option>'; }
-    }
-
-    async function loadExpiries() {
-        const date = document.getElementById('selDate').value;
-        const root = document.getElementById('selRoot').value;
-        const sel = document.getElementById('selExp');
-        sel.disabled = true; sel.innerHTML = '<option>Loading...</option>';
-        try {
-            const r = await fetch(`/api/expiries?date=${date}&root=${root}`);
-            const d = await r.json();
-            sel.innerHTML = d.map(x => `<option value="${x}">${x}</option>`).join('');
-            sel.disabled = false;
-            if(d.length > 0) loadInstruments();
-        } catch(e) { sel.innerHTML = '<option>None</option>'; }
+    // --- PANEL MANAGEMENT ---
+    function addNewPanel() {
+        const id = Date.now();
+        PANELS.push({
+            id: id,
+            // Default Config
+            root: '', 
+            expiry: '', 
+            instrument: '',
+            series: [
+                { formula: '$P', color: '#0052cc', label: 'Price', axis: 'left' }
+            ]
+        });
+        renderDashboard();
+        // Automatically open settings for new panel to force selection
+        openSettings(id);
     }
 
-    async function loadInstruments() {
-        const date = document.getElementById('selDate').value;
-        const root = document.getElementById('selRoot').value;
-        const exp = document.getElementById('selExp').value;
-        const sel = document.getElementById('selInst');
-        sel.disabled = true; sel.innerHTML = '<option>Loading...</option>';
-        try {
-            const r = await fetch(`/api/instruments?date=${date}&root=${root}&expiry=${exp}`);
-            const d = await r.json();
-            sel.innerHTML = d.map(x => `<option value="${x}">${x}</option>`).join('');
-            sel.disabled = false;
-        } catch(e) { sel.innerHTML = '<option>None</option>'; }
+    function deletePanel(id) {
+        if(!confirm("Remove this chart?")) return;
+        PANELS = PANELS.filter(p => p.id !== id);
+        if(CHARTS_INSTANCES[id]) {
+            CHARTS_INSTANCES[id].destroy();
+            delete CHARTS_INSTANCES[id];
+        }
+        renderDashboard();
     }
 
-    // --- PANEL CONFIG RENDERER ---
-    function renderPanels() {
-        const c = document.getElementById('panelsContainer');
-        c.innerHTML = '';
+    function renderDashboard() {
+        const container = document.getElementById('chartsContainer');
         
-        PANELS.forEach((p, pIdx) => {
-            let seriesHTML = '';
-            p.series.forEach((s, sIdx) => {
-                // Variable Select Options
-                const opts = VARS.map(v => `<option value="${v.val}" ${s.var === v.val ? 'selected' : ''}>${v.label}</option>`).join('');
-                const inputDisplay = s.var === 'custom' || !VARS.find(v => v.val === s.var) ? 'block' : 'none';
-                
-                seriesHTML += `
-                <div class="series-row">
-                    <input type="color" class="color-picker" value="${s.color}" onchange="updateSeries(${pIdx}, ${sIdx}, 'color', this.value)">
-                    
-                    <div style="display:flex; flex-direction:column; gap:2px;">
-                        <select class="form-select" style="padding:4px; font-size:10px;" onchange="updateSeriesVar(${pIdx}, ${sIdx}, this.value)">
-                            ${opts}
-                        </select>
-                        <input type="text" class="form-input" style="padding:4px; font-size:10px; display:${inputDisplay};" 
-                               value="${s.var === 'custom' ? '' : s.var}" 
-                               placeholder="Formula (e.g. $B - $S)"
-                               onchange="updateSeries(${pIdx}, ${sIdx}, 'var', this.value)">
+        // We only append new ones or remove old ones in a real framework (React/Vue).
+        // Here, simplistic re-render of container structure, but we keep canvas references if possible?
+        // To keep it simple: We will re-render HTML structure, but we need to re-bind charts.
+        
+        // Save existing chart canvases if needed? No, let's rebuild.
+        container.innerHTML = PANELS.map((p, idx) => `
+            <div class="chart-card" id="card-${p.id}">
+                <div class="chart-header">
+                    <div class="chart-title">
+                        PANEL ${idx+1}: <span style="color:var(--accent);">${p.instrument || 'Not Configured'}</span>
+                    </div>
+                    <div class="chart-actions">
+                        <button class="icon-btn" onclick="openSettings(${p.id})">⚙ SETTINGS</button>
+                        <button class="icon-btn danger" onclick="deletePanel(${p.id})">✖</button>
                     </div>
-
-                    <select class="form-select" style="padding:4px; font-size:10px;" onchange="updateSeries(${pIdx}, ${sIdx}, 'axis', this.value)">
-                        <option value="left" ${s.axis==='left'?'selected':''}>L-Axis</option>
-                        <option value="right" ${s.axis==='right'?'selected':''}>R-Axis</option>
-                    </select>
-
-                    <button style="color:red; background:none; border:none; cursor:pointer; font-weight:bold;" onclick="removeSeries(${pIdx}, ${sIdx})">×</button>
-                </div>`;
-            });
-
-            c.innerHTML += `
-            <div class="panel-card">
-                <div class="panel-header">
-                    <span class="panel-title">PANEL ${pIdx+1}</span>
-                    <button class="btn-outline btn-sm" style="color:red; border:none;" onclick="removePanel(${pIdx})">DEL</button>
                 </div>
-                <div class="panel-body">
-                    ${seriesHTML}
-                    <button class="btn btn-outline btn-sm" style="width:100%; margin-top:5px; border-style:dashed;" onclick="addSeries(${pIdx})">+ Add Series</button>
+                <div class="chart-canvas-container">
+                    <canvas id="canvas-${p.id}"></canvas>
                 </div>
-            </div>`;
-        });
+            </div>
+        `).join('');
+
+        // Restore charts if data exists (this happens after "Fetch" usually)
+        // If we just added a panel, it's empty.
     }
 
-    // --- CONFIG LOGIC ---
-    function addPanel() { PANELS.push({ id: Date.now(), series: [{ var: '$P', color: '#000000', axis: 'left' }] }); renderPanels(); }
-    function removePanel(i) { PANELS.splice(i, 1); renderPanels(); }
-    function addSeries(pi) { PANELS[pi].series.push({ var: '$P', color: getRandomColor(), axis: 'left' }); renderPanels(); }
-    function removeSeries(pi, si) { PANELS[pi].series.splice(si, 1); renderPanels(); }
-    
-    function updateSeries(pi, si, key, val) { PANELS[pi].series[si][key] = val; }
-    function updateSeriesVar(pi, si, val) {
-        if (val === 'custom') {
-            PANELS[pi].series[si].var = ''; 
+    // --- MODAL & CONFIGURATION ---
+    async function openSettings(panelId) {
+        CURRENT_EDIT_ID = panelId;
+        const panel = PANELS.find(p => p.id === panelId);
+        const modal = document.getElementById('configModal');
+        const glDate = document.getElementById('glDate').value;
+
+        // 1. Populate Roots
+        const rSel = document.getElementById('cfgRoot');
+        rSel.innerHTML = '<option>Loading...</option>';
+        modal.style.display = 'flex';
+
+        // Fetch Roots for current date
+        const res = await fetch(`/api/roots?date=${glDate}`);
+        const roots = await res.json();
+        rSel.innerHTML = `<option value="">-- Select Root --</option>` + roots.map(r => `<option>${r}</option>`).join('');
+        
+        // Set existing values if present
+        if(panel.root && roots.includes(panel.root)) {
+            rSel.value = panel.root;
+            await modalRootChanged(panel.expiry, panel.instrument);
         } else {
-            PANELS[pi].series[si].var = val;
+            document.getElementById('cfgExp').innerHTML = ''; document.getElementById('cfgExp').disabled=true;
+            document.getElementById('cfgInst').innerHTML = ''; document.getElementById('cfgInst').disabled=true;
         }
-        renderPanels(); 
+
+        // Render Series Rows
+        renderSeriesRows(panel.series);
     }
-    function getRandomColor() { return '#' + Math.floor(Math.random()*16777215).toString(16); }
 
-    // --- DATA FETCH & PLOT ---
-    async function fetchAndPlot() {
-        const inst = document.getElementById('selInst').value;
-        if (!inst || inst === '--' || inst === 'Loading...') return alert("Please select an Instrument first.");
+    async function modalRootChanged(preSelectExp=null, preSelectInst=null) {
+        const date = document.getElementById('glDate').value;
+        const root = document.getElementById('cfgRoot').value;
+        const eSel = document.getElementById('cfgExp');
+        
+        eSel.innerHTML = '<option>Loading...</option>'; eSel.disabled = true;
+        
+        const res = await fetch(`/api/expiries?date=${date}&root=${root}`);
+        const exps = await res.json();
+        
+        eSel.innerHTML = `<option value="">-- Select Expiry --</option>` + exps.map(e => `<option>${e}</option>`).join('');
+        eSel.disabled = false;
 
-        document.getElementById('loader').style.display = 'flex';
+        if(preSelectExp && exps.includes(preSelectExp)) {
+            eSel.value = preSelectExp;
+            await modalExpChanged(preSelectInst);
+        }
+    }
 
-        const payload = {
-            date: document.getElementById('selDate').value,
-            root: document.getElementById('selRoot').value,
-            expiry: document.getElementById('selExp').value,
-            instrument: inst,
-            timeframe: document.getElementById('selTF').value,
-            start_time: document.getElementById('startTime').value,
-            end_time: document.getElementById('endTime').value
-        };
-
-        try {
-            const r = await fetch('/api/fetch_plot', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
-            const resp = await r.json();
+    async function modalExpChanged(preSelectInst=null) {
+        const date = document.getElementById('glDate').value;
+        const root = document.getElementById('cfgRoot').value;
+        const exp = document.getElementById('cfgExp').value;
+        const iSel = document.getElementById('cfgInst');
 
-            if (resp.error) {
-                alert(resp.error);
-                document.getElementById('loader').style.display = 'none';
-                return;
-            }
+        iSel.innerHTML = '<option>Loading...</option>'; iSel.disabled = true;
+
+        const res = await fetch(`/api/instruments?date=${date}&root=${root}&expiry=${exp}`);
+        const insts = await res.json();
 
-            CACHED_DATA = resp; // { labels: [], data: { P:[], B:[], ... } }
-            drawCharts();
+        iSel.innerHTML = `<option value="">-- Select Instrument --</option>` + insts.map(i => `<option>${i}</option>`).join('');
+        iSel.disabled = false;
 
-        } catch (e) {
-            console.error(e);
-            alert("Failed to fetch data.");
-        } finally {
-            document.getElementById('loader').style.display = 'none';
+        if(preSelectInst && insts.includes(preSelectInst)) {
+            iSel.value = preSelectInst;
         }
     }
 
-    // --- CHART DRAWING ---
-    function drawCharts() {
-        const container = document.getElementById('chartMain');
-        container.innerHTML = '';
-        CHARTS.forEach(c => c.destroy());
-        CHARTS = [];
-
-        if(!CACHED_DATA) return;
-
-        PANELS.forEach((panel, idx) => {
-            // Container
-            const wrapper = document.createElement('div');
-            wrapper.className = 'chart-wrapper';
-            const canvas = document.createElement('canvas');
-            wrapper.appendChild(canvas);
-            container.appendChild(wrapper);
-
-            // Compute Data
-            const datasets = panel.series.map(s => {
-                const values = CACHED_DATA.labels.map((_, i) => evaluateFormula(s.var, i));
-                return {
-                    label: s.var,
-                    data: values,
-                    borderColor: s.color,
-                    backgroundColor: s.color,
-                    borderWidth: 2,
-                    pointRadius: 0,
-                    pointHoverRadius: 4,
-                    yAxisID: s.axis === 'left' ? 'y' : 'y1',
-                    tension: 0.2
-                };
+    function renderSeriesRows(seriesData) {
+        const list = document.getElementById('seriesList');
+        list.innerHTML = '';
+        seriesData.forEach((s, idx) => {
+            const div = document.createElement('div');
+            div.className = 'series-row';
+            div.innerHTML = `
+                <input type="color" value="${s.color}" class="s-color">
+                <input type="text" value="${s.formula}" placeholder="Formula" class="s-formula">
+                <input type="text" value="${s.label || s.formula}" placeholder="Legend Label" class="s-label">
+                <select class="s-axis">
+                    <option value="left" ${s.axis==='left'?'selected':''}>Left Axis</option>
+                    <option value="right" ${s.axis==='right'?'selected':''}>Right Axis</option>
+                </select>
+                <span style="color:red; font-weight:bold; cursor:pointer;" onclick="this.parentElement.remove()">×</span>
+            `;
+            list.appendChild(div);
+        });
+    }
+
+    function addSeriesRow() {
+        const list = document.getElementById('seriesList');
+        const div = document.createElement('div');
+        div.className = 'series-row';
+        div.innerHTML = `
+            <input type="color" value="#000000" class="s-color">
+            <input type="text" value="$P" class="s-formula">
+            <input type="text" value="Price" class="s-label">
+            <select class="s-axis">
+                <option value="left">Left Axis</option>
+                <option value="right">Right Axis</option>
+            </select>
+            <span style="color:red; font-weight:bold; cursor:pointer;" onclick="this.parentElement.remove()">×</span>
+        `;
+        list.appendChild(div);
+    }
+
+    function insertVar(v) {
+        // Crude insert into last focused input could be complex. 
+        // For now, prompt user or just alert. 
+        // Better: append to all empty inputs or just alert logic
+        alert("Type " + v + " in the formula box.");
+    }
+
+    function saveConfig() {
+        if(!CURRENT_EDIT_ID) return;
+        
+        // Get Form Data
+        const root = document.getElementById('cfgRoot').value;
+        const exp = document.getElementById('cfgExp').value;
+        const inst = document.getElementById('cfgInst').value;
+
+        if(!root || !exp || !inst) {
+            alert("Please select Root, Expiry and Instrument.");
+            return;
+        }
+
+        // Get Series Data
+        const rows = document.querySelectorAll('.series-row');
+        const newSeries = [];
+        rows.forEach(r => {
+            newSeries.push({
+                color: r.querySelector('.s-color').value,
+                formula: r.querySelector('.s-formula').value,
+                label: r.querySelector('.s-label').value,
+                axis: r.querySelector('.s-axis').value
             });
+        });
+
+        // Update Global State
+        const pIdx = PANELS.findIndex(p => p.id === CURRENT_EDIT_ID);
+        PANELS[pIdx].root = root;
+        PANELS[pIdx].expiry = exp;
+        PANELS[pIdx].instrument = inst;
+        PANELS[pIdx].series = newSeries;
+
+        closeModal();
+        renderDashboard(); // Re-render headers
+        
+        // Optionally auto-plot this specific chart if Global Date matches?
+        // Better to wait for user to click Fetch All to avoid partial state.
+    }
+
+    function closeModal() {
+        document.getElementById('configModal').style.display = 'none';
+        CURRENT_EDIT_ID = null;
+    }
+
+    // --- DATA FETCHING AND PLOTTING ---
+    async function plotAll() {
+        document.getElementById('loader').style.display = 'flex';
+        
+        // Global Settings
+        const date = document.getElementById('glDate').value;
+        const tf = document.getElementById('glTF').value;
+        const start = document.getElementById('glStart').value;
+        const end = document.getElementById('glEnd').value;
+
+        // Process each panel
+        for(let panel of PANELS) {
+            if(!panel.instrument) continue; // Skip unconfigured
+
+            try {
+                // 1. Fetch Data
+                const res = await fetch('/api/fetch_series', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        date: date,
+                        root: panel.root,
+                        expiry: panel.expiry,
+                        instrument: panel.instrument,
+                        timeframe: tf,
+                        start_time: start,
+                        end_time: end
+                    })
+                });
+                
+                const data = await res.json();
+                
+                if(data.error) {
+                    console.warn(`Panel ${panel.id} error: ${data.error}`);
+                    continue;
+                }
+
+                // 2. Compute Formulas
+                const datasets = panel.series.map(s => {
+                    const computedData = data.labels.map((_, i) => {
+                        const P = data.P[i] || 0;
+                        const V = data.V[i] || 0;
+                        const OI = data.OI[i] || 0;
+                        const B = data.B[i] || 0;
+                        const S = data.S[i] || 0;
+                        
+                        // Eval
+                        let formulaStr = s.formula
+                            .replace(/\$OI/g, OI)
+                            .replace(/\$P/g, P)
+                            .replace(/\$V/g, V)
+                            .replace(/\$B/g, B)
+                            .replace(/\$S/g, S);
+                        
+                        try { return new Function('return ' + formulaStr)(); } 
+                        catch { return null; }
+                    });
+
+                    return {
+                        label: s.label,
+                        data: computedData,
+                        borderColor: s.color,
+                        backgroundColor: s.color,
+                        borderWidth: 2,
+                        pointRadius: 0,
+                        pointHoverRadius: 6,
+                        yAxisID: s.axis === 'left' ? 'y' : 'y1',
+                        tension: 0.1
+                    };
+                });
+
+                // 3. Draw Chart
+                drawChart(panel.id, data.labels, datasets);
+
+            } catch(e) {
+                console.error("Plot Error", e);
+            }
+        }
+
+        document.getElementById('loader').style.display = 'none';
+    }
 
-            // Config ChartJS
-            const ctx = canvas.getContext('2d');
-            const chart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: CACHED_DATA.labels,
-                    datasets: datasets
+    function drawChart(id, labels, datasets) {
+        const ctx = document.getElementById(`canvas-${id}`).getContext('2d');
+        
+        // Destroy old if exists
+        if(CHARTS_INSTANCES[id]) CHARTS_INSTANCES[id].destroy();
+
+        // Check if Y1 is needed
+        const hasRightAxis = datasets.some(d => d.yAxisID === 'y1');
+
+        CHARTS_INSTANCES[id] = new Chart(ctx, {
+            type: 'line',
+            data: { labels, datasets },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: { mode: 'index', intersect: false },
+                plugins: {
+                    legend: { display: true, position: 'top' },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                        titleColor: '#000',
+                        bodyColor: '#000',
+                        borderColor: '#ccc',
+                        borderWidth: 1
+                    }
                 },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    interaction: { mode: 'index', intersect: false },
-                    plugins: {
-                        legend: { position: 'top', labels: { usePointStyle: true, boxWidth: 8 } },
-                        title: { display: true, text: `Panel ${idx+1}`, align: 'start', font: { size: 14 } }
+                scales: {
+                    x: {
+                        grid: { display: false },
+                        ticks: { maxTicksLimit: 10, maxRotation: 0 }
                     },
-                    scales: {
-                        x: { 
-                            grid: { display: false },
-                            ticks: { maxTicksLimit: 10 }
-                        },
-                        y: {
-                            type: 'linear', display: true, position: 'left',
-                            grid: { color: '#f1f5f9' },
-                            title: { display: true, text: 'Left Axis' }
-                        },
-                        y1: {
-                            type: 'linear', display: datasets.some(d => d.yAxisID === 'y1'), position: 'right',
-                            grid: { display: false },
-                            title: { display: true, text: 'Right Axis' }
-                        }
+                    y: {
+                        type: 'linear', display: true, position: 'left',
+                        grid: { color: '#f0f0f0' },
+                        title: { display: true, text: 'Left Axis' }
+                    },
+                    y1: {
+                        type: 'linear', display: hasRightAxis, position: 'right',
+                        grid: { display: false },
+                        title: { display: hasRightAxis, text: 'Right Axis' }
                     }
                 }
-            });
-            CHARTS.push(chart);
+            }
         });
     }
 
-    function evaluateFormula(formula, idx) {
-        if(!CACHED_DATA) return 0;
-        const P = CACHED_DATA.data.P[idx] || 0;
-        const B = CACHED_DATA.data.B[idx] || 0;
-        const S = CACHED_DATA.data.S[idx] || 0;
-        const V = CACHED_DATA.data.V[idx] || 0;
-        const OI = CACHED_DATA.data.OI[idx] || 0;
-
-        // Replace vars with values
-        // Note: Replace strictly
-        let exp = formula
-            .replaceAll('$P', P)
-            .replaceAll('$B', B)
-            .replaceAll('$S', S)
-            .replaceAll('$V', V)
-            .replaceAll('$OI', OI);
-
-        try { return new Function('return ' + exp)(); } 
-        catch (e) { return 0; }
-    }
-
 </script>
 </body>
 </html>