Update app.py

app.py

@@ -4,15 +4,13 @@ import uvicorn
 import json
 import numpy as np
 from datetime import datetime, timedelta
-from fastapi import FastAPI, Body
+from fastapi import FastAPI, Body, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
-from typing import List, Dict, Any, Optional
+from typing import Optional, List, Dict, Any
 
 # ==========================================
-# 1. CONFIGURATION (SUPABASE HISTORY DB)
+# 1. CONFIGURATION
 # ==========================================
-# Using the HIST keys provided in upstox4.txt
 SB_URL = "https://tuyhtqxfvjndbyjazosi.supabase.co"
 SB_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR1eWh0cXhmdmpuZGJ5amF6b3NpIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2ODE0NjAyMiwiZXhwIjoyMDgzNzIyMDIyfQ.YsmGS67vL5TghB5OOi6pmsPL6rrgx7SNpARHmQ9b5cw"
 
@@ -26,832 +24,695 @@ HEADERS = {
 app = FastAPI()
 
 # ==========================================
-# 2. BACKEND LOGIC
+# 2. HELPER FUNCTIONS
 # ==========================================
-
-def fetch_supabase(endpoint: str, params: dict = {}):
+def sb_request(endpoint: str, params: dict = None):
     try:
         url = f"{SB_URL}/rest/v1{endpoint}"
-        # Convert params to query string
-        query = "&".join([f"{k}={v}" for k, v in params.items()])
-        if query:
-            url += f"?{query}"
-        
-        r = requests.get(url, headers=HEADERS)
-        if r.status_code >= 400:
-            print(f"Error fetching {url}: {r.text}")
-            return []
+        r = requests.get(url, headers=HEADERS, params=params)
+        r.raise_for_status()
         return r.json()
     except Exception as e:
-        print(f"Exception: {e}")
+        print(f"Supabase Error: {e}")
         return []
 
-def process_slots(slot_array):
-    """
-    Takes a 6-element list [v1, v2, null, v3, ...].
-    Returns the median of non-null values.
-    """
-    if not isinstance(slot_array, list):
-        return np.nan
-    valid = [x for x in slot_array if x is not None]
-    if not valid:
-        return np.nan
-    return np.median(valid)
+# ==========================================
+# 3. API ROUTES
+# ==========================================
 
 @app.get("/")
 def home():
-    return HTMLResponse(html_content)
+    return HTMLResponse(HTML_TEMPLATE)
 
 @app.get("/api/dates")
 def get_dates():
-    # Get distinct dates (based on minute column)
-    # Since we can't do complex SQL distinct easily on timestamp::date in standard PostgREST without RPC,
-    # we will fetch the last 1000 records id, minute and extract unique dates in python. 
-    # Optimization: Create a separate table for dates in production, but here we scan.
-    
-    # We fetch only the 'minute' column, order by desc, limit 5000 (approx 3-4 days of data)
-    data = fetch_supabase("/history_buckets_upstox", {
+    # 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"
+        "limit": "5000" 
     })
-    
     dates = set()
     for row in data:
         if row.get('minute'):
-            dt_str = row['minute'].split('T')[0]
-            dates.add(dt_str)
-            
-    return sorted(list(dates), reverse=True)
+            dates.add(row['minute'].split('T')[0])
+    return JSONResponse(sorted(list(dates), reverse=True))
 
 @app.get("/api/roots")
 def get_roots(date: str):
-    # Fetch roots present for this date
-    # start_dt = date T 00:00:00, end_dt = date T 23:59:59
-    data = fetch_supabase("/history_buckets_upstox", {
-        "select": "root,exchange", # Assuming exchange might be implicit in root or logic
-        "minute": f"gte.{date}T00:00:00&minute=lte.{date}T23:59:59",
-        "limit": "2000" # Sample enough rows to get distinct roots
+    # 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"
     })
-    
-    unique_roots = set()
+    roots = set()
     for row in data:
-        r = row.get('root')
-        if r: unique_roots.add(r)
-        
-    return sorted(list(unique_roots))
+        if row.get('root'):
+            roots.add(row['root'])
+    return JSONResponse(sorted(list(roots)))
 
 @app.get("/api/expiries")
 def get_expiries(date: str, root: str):
-    data = fetch_supabase("/history_buckets_upstox", {
+    start = f"{date}T00:00:00"
+    end = f"{date}T23:59:59"
+    data = sb_request("/history_buckets_upstox", {
         "select": "expiry",
-        "minute": f"gte.{date}T00:00:00&minute=lte.{date}T23:59:59",
         "root": f"eq.{root}",
-        "limit": "1000"
+        "minute": f"gte.{start}&minute=lte.{end}",
+        "limit": "2000"
     })
     exps = set()
     for row in data:
-        exps.add(row['expiry'])
+        if row.get('expiry'):
+            exps.add(row['expiry'])
     
-    # Sort: Put 'MARKET' first, then dates
+    # Sort with MARKET at top
     sl = sorted(list(exps))
     if "MARKET" in sl:
         sl.remove("MARKET")
         sl.insert(0, "MARKET")
-    return sl
+    return JSONResponse(sl)
 
 @app.get("/api/instruments")
 def get_instruments(date: str, root: str, expiry: str):
-    # Fetch one row to get the keys from the 'data' JSONB
-    data = fetch_supabase("/history_buckets_upstox", {
+    # 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",
-        "minute": f"gte.{date}T00:00:00&minute=lte.{date}T23:59:59",
         "root": f"eq.{root}",
         "expiry": f"eq.{expiry}",
-        "limit": "1"
+        "minute": f"gte.{start}&minute=lte.{end}",
+        "limit": "1",
+        "order": "minute.desc"
     })
     
-    if not data or not data[0].get('data'):
-        return []
-    
-    # Keys in 'data' are the instrument symbols (e.g., NIFTY24JAN..., Nifty 50)
-    keys = list(data[0]['data'].keys())
-    return sorted(keys)
-
-@app.post("/api/plot-data")
-def get_plot_data(payload: dict = Body(...)):
-    """
-    Payload: {
-        date: "2025-01-27",
-        root: "NSE:NIFTY",
-        expiry: "27JAN",
-        time_start: "09:15",
-        time_end: "15:30",
-        timeframe: "1min",
-        datasets: [
-            { instrument: "NIFTY24JAN...", formula: "b - s", label: "Net Flow" },
-            { instrument: "Nifty 50", formula: "p", label: "Spot Price" }
-        ]
-    }
-    """
-    date = payload.get("date")
-    root = payload.get("root")
-    expiry = payload.get("expiry")
-    tf = payload.get("timeframe", "1min")
-    datasets_config = payload.get("datasets", [])
-    
-    if not datasets_config:
-        return JSONResponse({"error": "No datasets configured"})
-
-    # 1. Fetch Data from Supabase
-    # We fetch all rows for this Day/Root/Expiry
-    # Filtering by time_start/end in DB is better for performance
-    t_start = f"{date}T{payload.get('time_start', '00:00')}:00"
-    t_end = f"{date}T{payload.get('time_end', '23:59')}:59"
+    instruments = []
+    if data and data[0].get('data'):
+        instruments = list(data[0]['data'].keys())
     
-    db_rows = fetch_supabase("/history_buckets_upstox", {
+    return JSONResponse(sorted(instruments))
+
+@app.post("/api/fetch_plot")
+def fetch_plot_data(
+    date: str = Body(...),
+    root: str = Body(...),
+    expiry: str = Body(...),
+    instrument: str = Body(...),
+    timeframe: str = Body(...),
+    start_time: str = Body(...),
+    end_time: str = Body(...)
+):
+    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 db_rows:
-        return JSONResponse({"labels": [], "datasets": []})
 
-    # 2. Convert to DataFrame
-    # Structure: timestamp | instr_key | variable | value
-    # We need to expand the 6-slot arrays into 10s intervals
-    
+    if not rows:
+        return JSONResponse({"error": "No data found for this selection"})
+
+    # Process 6-slot sub-minute data
     records = []
     
-    # Identify which instruments we actually need to process to save time
-    needed_instruments = set([d['instrument'] for d in datasets_config])
+    for row in rows:
+        try:
+            base_ts = pd.to_datetime(row['minute'])
+            inst_data = row['data'].get(instrument)
+            
+            if not inst_data: continue
 
-    for row in db_rows:
-        base_ts = pd.to_datetime(row['minute'])
-        row_data = row.get('data', {})
-        
-        for instr, metrics in row_data.items():
-            if instr not in needed_instruments:
-                continue
-                
-            # metrics = {p: [..], b: [..], ...}
-            # Iterate 6 slots
+            # 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)
             for i in range(6):
-                offset_ts = base_ts + timedelta(seconds=i*10)
-                
-                # Extract values for this slot
-                rec = {
-                    "ts": offset_ts,
-                    "instrument": instr
-                }
-                
-                has_data = False
-                for var_name in ['p', 'b', 's', 'v', 'o']:
-                    val_array = metrics.get(var_name)
-                    val = None
-                    if isinstance(val_array, list) and len(val_array) > i:
-                        val = val_array[i]
+                # 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)
                     
-                    if val is not None:
-                        has_data = True
-                        rec[var_name] = val
-                    else:
-                        rec[var_name] = np.nan
-                
-                if has_data:
-                    records.append(rec)
+                    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
+                    
+                    records.append({
+                        "ts": ts,
+                        "P": val_p,
+                        "B": val_b,
+                        "S": val_s,
+                        "V": val_v,
+                        "OI": val_o
+                    })
+        except Exception as e:
+            continue
 
     if not records:
-        return JSONResponse({"labels": [], "datasets": []})
+        return JSONResponse({"error": "Empty dataset after processing"})
 
+    # Create DataFrame
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
-    
-    # 3. Resample and Aggregate
-    # We need to group by instrument, then resample
-    
-    # Map for aggregation methods
-    agg_map = {
-        'p': 'median', # Price: Median
-        'b': 'sum',    # Buy Qty: Sum (Accumulate flow over timeframe)
-        's': 'sum',    # Sell Qty: Sum
-        'v': 'sum',    # Volume: Sum
-        'o': 'last'    # OI: Last seen value (Snapshot)
-    }
-    
-    # Ensure all columns exist
-    for col in agg_map.keys():
-        if col not in df.columns:
-            df[col] = np.nan
 
-    grouped = df.groupby('instrument')
-    
-    # Resample Timeframe (e.g. '1min' -> '1T')
-    tf_map = {'1min': '1T', '3min': '3T', '5min': '5T', '15min': '15T', '30min': '30T', '60min': '60T'}
-    pandas_tf = tf_map.get(tf, '1T')
-
-    resampled_dfs = {}
-    
-    for instr, group_df in grouped:
-        # Resample logic
-        res = group_df.resample(pandas_tf).agg(agg_map)
-        resampled_dfs[instr] = res
+    # Resample Logic
+    # 1min, 3min, 5min, etc.
+    tf_map = {
+        "1min": "1T", "3min": "3T", "5min": "5T", 
+        "15min": "15T", "30min": "30T", "1hour": "1H"
+    }
+    panda_tf = tf_map.get(timeframe, "1T")
 
-    # 4. Calculate Formulas and Prepare Chart Data
-    
-    # Find common time index (union of all)
-    all_indices = pd.Index([])
-    for d in resampled_dfs.values():
-        all_indices = all_indices.union(d.index)
-    
-    all_indices = all_indices.sort_values()
-    
-    final_datasets = []
+    # Aggregation: Median is best for noise reduction as requested
+    resampled = df.resample(panda_tf).median()
     
-    for conf in datasets_config:
-        instr = conf['instrument']
-        formula = conf['formula'] # e.g. "b - s" or "p"
-        label = conf.get('label', instr)
-        color = conf.get('color', '#000000')
-        y_axis = conf.get('yAxisID', 'y')
-        type_chart = conf.get('type', 'line')
-        
-        if instr not in resampled_dfs:
-            continue
-            
-        rdf = resampled_dfs[instr].reindex(all_indices)
-        
-        # Evaluate Formula safely
-        # Variables available: p, b, s, v, o
-        try:
-            # Create local context for eval
-            ctx = {
-                'p': rdf['p'].fillna(0),
-                'b': rdf['b'].fillna(0),
-                's': rdf['s'].fillna(0),
-                'v': rdf['v'].fillna(0),
-                'o': rdf['o'].fillna(method='ffill').fillna(0), # OI should ffill
-                'np': np
-            }
-            
-            # Simple sanitization
-            allowed_chars = set("pbsvo0123456789+-*/(). ")
-            if not set(formula).issubset(allowed_chars):
-                 # Fallback if complex chars, simpler logic
-                 pass
-
-            result_series = eval(formula, {"__builtins__": None}, ctx)
-            
-            # Replace nan with None for JSON
-            data_values = result_series.where(pd.notnull(result_series), None).tolist()
-            
-            ds = {
-                "label": label,
-                "data": data_values,
-                "borderColor": color,
-                "backgroundColor": color,
-                "type": type_chart,
-                "yAxisID": y_axis,
-                "pointRadius": 1,
-                "borderWidth": 2,
-                "fill": False,
-                "tension": 0.1 # Slight curve
-            }
-            final_datasets.append(ds)
-            
-        except Exception as e:
-            print(f"Formula Error ({formula}): {e}")
-            continue
+    # Drop rows where Price is NaN (gap in data)
+    resampled.dropna(subset=['P'], inplace=True)
 
-    # Format Labels (Time)
-    labels = [t.strftime('%H:%M') for t in all_indices]
-    
     return JSONResponse({
-        "labels": labels,
-        "datasets": final_datasets
+        "status": "ok",
+        "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()
+        }
     })
 
-
 # ==========================================
-# 3. FRONTEND (HTML/JS)
+# 4. FRONTEND (HTML/JS/CSS)
 # ==========================================
-
-html_content = """
+HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DepthChain Historical</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <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">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        :root {
-            --bg: #ffffff;
-            --panel: #f8f9fa;
-            --border: #e9ecef;
-            --text: #212529;
-            --primary: #0d6efd;
-            --accent: #6610f2;
-            --success: #198754;
-            --danger: #dc3545;
-            --shadow: 0 4px 12px rgba(0,0,0,0.05);
+        :root { 
+            --bg: #f3f4f6; 
+            --panel: #ffffff; 
+            --border: #e5e7eb; 
+            --text: #1f2937; 
+            --primary: #2563eb; 
+            --danger: #dc2626;
+            --success: #16a34a;
         }
         * { box-sizing: border-box; }
-        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 0; }
-        
-        /* HEADER */
-        .top-bar {
-            position: sticky; top: 0; z-index: 100;
+        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);
-            padding: 10px 20px; display: flex; gap: 15px; align-items: center; flex-wrap: wrap;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+            height: 50px; display: flex; align-items: center; justify-content: space-between;
+            padding: 0 20px; flex-shrink: 0;
         }
-        .control-group { display: flex; flex-direction: column; gap: 4px; }
-        .control-group label { font-size: 11px; font-weight: 700; color: #6c757d; text-transform: uppercase; }
-        .select-input { padding: 8px; border: 1px solid #ced4da; border-radius: 4px; font-size: 13px; min-width: 120px; outline:none; }
-        .select-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); }
+        .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); }
         
-        .btn { padding: 8px 16px; border: none; border-radius: 4px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
-        .btn-primary { background: var(--primary); color: white; }
-        .btn-primary:hover { background: #0b5ed7; }
-        .btn-outline { background: white; border: 1px solid #ced4da; color: var(--text); }
-        .btn-outline:hover { background: #f8f9fa; }
+        /* 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;
+        }
         
-        /* MAIN LAYOUT */
-        .container { padding: 20px; max-width: 1600px; margin: 0 auto; }
-        .charts-wrapper { display: flex; flex-direction: column; gap: 20px; }
+        .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;
+        }
+
+        .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;
+        }
+        .form-select:focus, .form-input:focus {
+            border-color: var(--primary); background: #fff;
+            box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
+        }
         
-        /* CHART CARD */
-        .chart-card {
-            background: white; border: 1px solid var(--border); border-radius: 8px;
-            padding: 15px; box-shadow: var(--shadow); position: relative;
-            transition: transform 0.2s;
+        .btn {
+            width: 100%; padding: 10px; border: none; border-radius: 6px;
+            font-weight: 700; font-size: 12px; cursor: pointer; transition: 0.2s;
         }
-        .chart-header {
+        .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;
-            margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f3f5;
         }
-        .chart-title { font-weight: 700; font-size: 14px; color: var(--text); display: flex; gap: 10px; align-items: center; }
-        .chart-meta { font-size: 12px; color: #868e96; font-family: 'JetBrains Mono'; background: #f8f9fa; padding: 2px 6px; border-radius: 4px; }
-        .chart-actions { display: flex; gap: 5px; }
-        .icon-btn { padding: 6px; border-radius: 4px; cursor: pointer; color: #adb5bd; transition: 0.2s; background: transparent; border:none; }
-        .icon-btn:hover { color: var(--primary); background: #e9ecef; }
-        .icon-btn.delete:hover { color: var(--danger); }
-        
-        .chart-body { height: 60vh; position: relative; width: 100%; }
-        
-        /* MODAL */
-        .modal-overlay {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px);
+        .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;
+        }
+        .color-picker { width: 20px; height: 20px; border: none; padding: 0; cursor: pointer; background:none; }
+        .formula-box {
+            display: flex; gap: 5px; align-items: center;
+        }
+        .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-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);
+            position: relative;
+        }
+        .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;
+            flex-direction: column;
         }
-        .modal {
-            background: white; width: 600px; max-width: 90%;
-            border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-            display: flex; flex-direction: column; overflow: hidden;
-            animation: popIn 0.2s ease-out;
+        .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;
         }
-        @keyframes popIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-        
-        .modal-header { padding: 15px 20px; background: #f8f9fa; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
-        .modal-body { padding: 20px; overflow-y: auto; max-height: 70vh; }
-        .modal-footer { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #f8f9fa; }
-        
-        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
-        .form-full { margin-bottom: 15px; }
-        .inp-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: #495057; }
-        .inp-text { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
-        
-        .dataset-list { margin-top: 15px; border: 1px solid var(--border); border-radius: 4px; }
-        .dataset-item { padding: 10px; border-bottom: 1px solid #f1f3f5; display: flex; gap: 10px; align-items: center; background: #fff; }
-        .dataset-item:last-child { border-bottom: none; }
-        .color-picker { width: 30px; height: 30px; padding: 0; border: none; cursor: pointer; }
-        
-        .no-data { text-align: center; padding: 40px; color: #adb5bd; font-weight: 500; font-size: 14px; border: 2px dashed #dee2e6; border-radius: 8px; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
-        /* Loader */
-        .loader-line { height: 3px; width: 100%; background: #e9ecef; position: fixed; top: 0; left: 0; z-index: 200; display:none; }
-        .loader-sub { height: 100%; background: var(--primary); animation: load 1s infinite; width: 30%; }
-        @keyframes load { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
     </style>
 </head>
 <body>
 
-<div class="loader-line" id="loader"><div class="loader-sub"></div></div>
-
-<!-- TOP BAR -->
-<div class="top-bar">
-    <div class="control-group">
-        <label>Date</label>
-        <select id="globalDate" class="select-input" onchange="onDateChange()"></select>
-    </div>
-    
-    <div style="flex:1;"></div>
-    
-    <button class="btn btn-outline" onclick="addChart()">
-        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 5v14m-7-7h14"></path></svg>
-        Add Chart
-    </button>
+<!-- LOADER -->
+<div class="loader" id="loader">
+    <div class="spinner"></div>
+    <div style="font-weight:700; color:#4b5563;">LOADING DATA...</div>
 </div>
 
-<!-- MAIN AREA -->
-<div class="container">
-    <div id="chartsContainer" class="charts-wrapper">
-        <div class="no-data" id="emptyState">
-            No charts added. Click "Add Chart" to begin.
-        </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>
     </div>
 </div>
 
-<!-- CHART CONFIG MODAL -->
-<div class="modal-overlay" id="configModal">
-    <div class="modal">
-        <div class="modal-header">
-            <span id="modalTitle">Configure Chart</span>
-            <button class="icon-btn" onclick="closeModal()">✕</button>
+<div class="layout">
+    <!-- LEFT SIDEBAR -->
+    <div class="sidebar">
+        
+        <!-- 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="modal-body">
-            <input type="hidden" id="editChartId">
-            
-            <!-- Global Config for this Chart -->
-            <div class="form-row">
-                <div class="control-group">
-                    <label class="inp-label">Root Symbol</label>
-                    <select id="cfgRoot" class="select-input" style="width:100%" onchange="loadExpiries()"></select>
-                </div>
-                <div class="control-group">
-                    <label class="inp-label">Expiry</label>
-                    <select id="cfgExpiry" class="select-input" style="width:100%" onchange="loadInstruments()"></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>
+        <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">
+                <option value="1min">1 Minute</option>
+                <option value="3min">3 Minutes</option>
+                <option value="5min">5 Minutes</option>
+                <option value="15min">15 Minutes</option>
+                <option value="30min">30 Minutes</option>
+                <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>
-
-            <div class="form-row">
-                <div class="control-group">
-                    <label class="inp-label">Timeframe</label>
-                    <select id="cfgTF" class="select-input" style="width:100%">
-                        <option value="1min">1 Minute</option>
-                        <option value="3min">3 Minute</option>
-                        <option value="5min">5 Minute</option>
-                        <option value="15min">15 Minute</option>
-                        <option value="30min">30 Minute</option>
-                        <option value="60min">1 Hour</option>
-                    </select>
-                </div>
-                <div class="control-group">
-                    <label class="inp-label">Axis Scaling</label>
-                    <select id="cfgScale" class="select-input" style="width:100%">
-                        <option value="shared">Shared Scale (Left)</option>
-                        <option value="separate">Separate Scales (L/R)</option>
-                    </select>
-                </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>
+        </div>
 
-            <div style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">
-                <label class="inp-label" style="display:flex; justify-content:space-between;">
-                    DATA SERIES 
-                    <button class="btn btn-outline" style="padding:2px 8px; font-size:10px;" onclick="addDatasetRow()">+ Add Line</button>
-                </label>
-                <div id="datasetContainer" class="dataset-list"></div>
-                <small style="color:#999; display:block; margin-top:5px;">
-                    Vars: <b>p</b> (Price), <b>b</b> (Buy), <b>s</b> (Sell), <b>v</b> (Vol), <b>o</b> (OI). <br>
-                    Math: +, -, *, /, (). Example: <code>b - s</code> or <code>(b+s)/2</code>
-                </small>
-            </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>
-        <div class="modal-footer">
-            <button class="btn btn-outline" onclick="closeModal()">Cancel</button>
-            <button class="btn btn-primary" onclick="saveChartConfig()">Save & Plot</button>
+        
+        <div id="panelsContainer" class="panels-container"></div>
+        
+    </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>
         </div>
     </div>
 </div>
 
 <script>
-    // STATE
-    let DATES = [];
-    let CHART_REGISTRY = {}; // id -> { chartObj, config }
-    
-    // CACHE FOR DROPDOWNS
-    let CACHE_ROOTS = [];
-    let CACHE_EXPS = [];
-    let CACHE_INSTRS = [];
-
-    // INIT
+    // --- 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' }
+    ];
+
+    // --- INIT ---
     window.onload = async () => {
+        renderPanels();
         await loadDates();
     };
 
-    // API CALLS
-    async function api(endpoint, params={}) {
-        const u = new URL('/api/' + endpoint, window.location.origin);
-        Object.keys(params).forEach(key => u.searchParams.append(key, params[key]));
-        const r = await fetch(u);
-        return r.json();
-    }
-
+    // --- API CALLS ---
     async function loadDates() {
-        DATES = await api('dates');
-        const sel = document.getElementById('globalDate');
-        sel.innerHTML = DATES.map(d => `<option value="${d}">${d}</option>`).join('');
-        // Trigger generic update if charts exist (none initially)
-    }
-
-    function onDateChange() {
-        // Reload all charts with new date
-        const dt = document.getElementById('globalDate').value;
-        Object.keys(CHART_REGISTRY).forEach(id => {
-            const config = CHART_REGISTRY[id].config;
-            config.date = dt;
-            fetchAndRender(id);
-        });
-    }
-
-    // CHART MANAGEMENT
-    function addChart() {
-        document.getElementById('emptyState').style.display = 'none';
-        const id = 'chart_' + Date.now();
-        
-        const div = document.createElement('div');
-        div.className = 'chart-card';
-        div.id = `card_${id}`;
-        div.innerHTML = `
-            <div class="chart-header">
-                <div class="chart-title">
-                    <span id="title_${id}">New Chart</span>
-                    <span class="chart-meta" id="meta_${id}">--</span>
-                </div>
-                <div class="chart-actions">
-                    <button class="icon-btn" onclick="editChart('${id}')" title="Configure">⚙️</button>
-                    <button class="icon-btn" onclick="refreshChart('${id}')" title="Refresh">↻</button>
-                    <button class="icon-btn delete" onclick="removeChart('${id}')" title="Remove">🗑</button>
-                </div>
-            </div>
-            <div class="chart-body">
-                <canvas id="${id}"></canvas>
-            </div>
-        `;
-        document.getElementById('chartsContainer').appendChild(div);
-
-        // Init ChartJS
-        const ctx = document.getElementById(id).getContext('2d');
-        const chart = new Chart(ctx, {
-            type: 'line',
-            data: { labels: [], datasets: [] },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: { mode: 'index', intersect: false },
-                scales: {
-                    x: { grid: { display: false } },
-                    y: { display: true, position: 'left' }
-                },
-                plugins: {
-                    legend: { position: 'top', align: 'end' }
-                }
-            }
-        });
-
-        // Default Config
-        CHART_REGISTRY[id] = {
-            chart: chart,
-            config: {
-                date: document.getElementById('globalDate').value,
-                root: '',
-                expiry: '',
-                timeframe: '1min',
-                scale: 'shared',
-                datasets: []
-            }
-        };
-
-        // Open Config Immediately
-        editChart(id);
-    }
-
-    function removeChart(id) {
-        if(CHART_REGISTRY[id]) {
-            CHART_REGISTRY[id].chart.destroy();
-            delete CHART_REGISTRY[id];
-        }
-        document.getElementById(`card_${id}`).remove();
-        if(Object.keys(CHART_REGISTRY).length === 0) {
-            document.getElementById('emptyState').style.display = 'block';
-        }
+        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>'; }
     }
 
-    // CONFIG MODAL LOGIC
-    async function editChart(id) {
-        const conf = CHART_REGISTRY[id].config;
-        document.getElementById('editChartId').value = id;
-        document.getElementById('modalTitle').innerText = `Configure Chart`;
-        
-        // Load Roots for current date
-        const date = document.getElementById('globalDate').value;
-        const roots = await api('roots', { date: date });
-        CACHE_ROOTS = roots;
-        
-        const rSel = document.getElementById('cfgRoot');
-        rSel.innerHTML = roots.map(r => `<option value="${r}">${r}</option>`).join('');
-        if(conf.root && roots.includes(conf.root)) rSel.value = conf.root;
-        else if(roots.length > 0) rSel.value = roots[0];
-
-        // Trigger cascade
-        await loadExpiries(conf.expiry); // Pass prev expiry to try preserve it
-        
-        document.getElementById('cfgTF').value = conf.timeframe;
-        document.getElementById('cfgScale').value = conf.scale;
-        
-        // Render Dataset Rows
-        const dsCont = document.getElementById('datasetContainer');
-        dsCont.innerHTML = '';
-        if(conf.datasets.length > 0) {
-            conf.datasets.forEach(ds => addDatasetRow(ds));
-        } else {
-            addDatasetRow(); // Add one empty
-        }
-
-        document.getElementById('configModal').style.display = 'flex';
+    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(preserveVal=null) {
-        const date = document.getElementById('globalDate').value;
-        const root = document.getElementById('cfgRoot').value;
-        if(!root) return;
-
-        const exps = await api('expiries', { date, root });
-        CACHE_EXPS = exps;
-        
-        const eSel = document.getElementById('cfgExpiry');
-        eSel.innerHTML = exps.map(e => `<option value="${e}">${e}</option>`).join('');
-        
-        if(preserveVal && exps.includes(preserveVal)) eSel.value = preserveVal;
-        
-        await loadInstruments();
+    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>'; }
     }
 
     async function loadInstruments() {
-        const date = document.getElementById('globalDate').value;
-        const root = document.getElementById('cfgRoot').value;
-        const expiry = document.getElementById('cfgExpiry').value;
-        if(!root || !expiry) return;
-
-        const instrs = await api('instruments', { date, root, expiry });
-        CACHE_INSTRS = instrs;
-        
-        // Update all instrument dropdowns in dataset list
-        document.querySelectorAll('.instr-select').forEach(sel => {
-            const curVal = sel.value;
-            sel.innerHTML = instrs.map(i => `<option value="${i}">${i}</option>`).join('');
-            if(curVal && instrs.includes(curVal)) sel.value = curVal;
-        });
-    }
-
-    function addDatasetRow(data=null) {
-        const div = document.createElement('div');
-        div.className = 'dataset-item';
-        
-        const instOpts = CACHE_INSTRS.map(i => `<option value="${i}">${i}</option>`).join('');
-        
-        div.innerHTML = `
-            <select class="select-input instr-select" style="flex:2;">${instOpts}</select>
-            <input type="text" class="inp-text form-input" style="flex:1;" placeholder="Formula (e.g. b-s)" value="${data ? data.formula : 'p'}">
-            <input type="text" class="inp-text label-input" style="flex:1;" placeholder="Legend" value="${data ? data.label : ''}">
-            <select class="select-input type-select" style="width:70px;">
-                <option value="line" ${data && data.type=='line'?'selected':''}>Line</option>
-                <option value="bar" ${data && data.type=='bar'?'selected':''}>Bar</option>
-            </select>
-            <input type="color" class="color-picker" value="${data ? data.color : getRandomColor()}">
-            <button class="icon-btn delete" onclick="this.parentElement.remove()">✕</button>
-        `;
-        
-        // Set selected value for instrument
-        if(data && data.instrument) div.querySelector('.instr-select').value = data.instrument;
-        
-        document.getElementById('datasetContainer').appendChild(div);
+        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 closeModal() {
-        document.getElementById('configModal').style.display = 'none';
-    }
+    // --- PANEL CONFIG RENDERER ---
+    function renderPanels() {
+        const c = document.getElementById('panelsContainer');
+        c.innerHTML = '';
+        
+        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)">
+                    </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>
 
-    async function saveChartConfig() {
-        const id = document.getElementById('editChartId').value;
-        const root = document.getElementById('cfgRoot').value;
-        const expiry = document.getElementById('cfgExpiry').value;
-        const tf = document.getElementById('cfgTF').value;
-        const scale = document.getElementById('cfgScale').value;
-        
-        const datasets = [];
-        const rows = document.querySelectorAll('.dataset-item');
-        
-        rows.forEach((r, idx) => {
-            const instr = r.querySelector('.instr-select').value;
-            const form = r.querySelector('.form-input').value;
-            const lbl = r.querySelector('.label-input').value;
-            const clr = r.querySelector('.color-picker').value;
-            const typ = r.querySelector('.type-select').value;
-            
-            // Axis logic
-            let yAxis = 'y'; // default shared
-            if(scale === 'separate') {
-                yAxis = 'y' + idx; // y0, y1, y2...
-            }
-            
-            datasets.push({
-                instrument: instr,
-                formula: form,
-                label: lbl || instr,
-                color: clr,
-                type: typ,
-                yAxisID: yAxis
+                    <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>
+            </div>`;
         });
+    }
 
-        // Update Config
-        const conf = CHART_REGISTRY[id].config;
-        conf.root = root;
-        conf.expiry = expiry;
-        conf.timeframe = tf;
-        conf.scale = scale;
-        conf.datasets = datasets;
-        
-        // Update Chart Scales Config
-        const chart = CHART_REGISTRY[id].chart;
-        chart.options.scales = { x: { display: true } }; // Reset
-        
-        if(scale === 'shared') {
-            chart.options.scales['y'] = { display: true, position: 'left' };
+    // --- 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 = ''; 
         } else {
-            datasets.forEach((d, i) => {
-                chart.options.scales[d.yAxisID] = {
-                    display: true,
-                    position: i % 2 === 0 ? 'left' : 'right',
-                    grid: { drawOnChartArea: i === 0 } // Only first grid
-                };
-            });
+            PANELS[pi].series[si].var = val;
         }
-        
-        closeModal();
-        
-        // Update UI Text
-        document.getElementById(`title_${id}`).innerText = `${root} (${expiry})`;
-        document.getElementById(`meta_${id}`).innerText = tf.toUpperCase();
-        
-        // Fetch
-        fetchAndRender(id);
+        renderPanels(); 
     }
+    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.");
+
+        document.getElementById('loader').style.display = 'flex';
+
+        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
+        };
 
-    async function fetchAndRender(id) {
-        const conf = CHART_REGISTRY[id].config;
-        if(conf.datasets.length === 0) return;
-        
-        document.getElementById('loader').style.display = 'block';
-        
         try {
-            const payload = {
-                date: document.getElementById('globalDate').value,
-                root: conf.root,
-                expiry: conf.expiry,
-                timeframe: conf.timeframe,
-                datasets: conf.datasets
-            };
-            
-            const r = await fetch('/api/plot-data', {
+            const r = await fetch('/api/fetch_plot', {
                 method: 'POST',
-                headers: {'Content-Type': 'application/json'},
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
             });
-            
-            const data = await r.json();
-            
-            const chart = CHART_REGISTRY[id].chart;
-            chart.data.labels = data.labels;
-            chart.data.datasets = data.datasets;
-            chart.update();
-            
-        } catch(e) {
+            const resp = await r.json();
+
+            if (resp.error) {
+                alert(resp.error);
+                document.getElementById('loader').style.display = 'none';
+                return;
+            }
+
+            CACHED_DATA = resp; // { labels: [], data: { P:[], B:[], ... } }
+            drawCharts();
+
+        } catch (e) {
             console.error(e);
-            alert("Error fetching data");
+            alert("Failed to fetch data.");
         } finally {
             document.getElementById('loader').style.display = 'none';
         }
     }
 
-    function refreshChart(id) {
-        fetchAndRender(id);
+    // --- 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
+                };
+            });
+
+            // Config ChartJS
+            const ctx = canvas.getContext('2d');
+            const chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: CACHED_DATA.labels,
+                    datasets: datasets
+                },
+                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 }
+                        },
+                        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' }
+                        }
+                    }
+                }
+            });
+            CHARTS.push(chart);
+        });
     }
 
-    function getRandomColor() {
-        const letters = '0123456789ABCDEF';
-        let color = '#';
-        for (let i = 0; i < 6; i++) {
-            color += letters[Math.floor(Math.random() * 16)];
-        }
-        return color;
+    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>