Update app.py

app.py

@@ -241,7 +241,7 @@ def decompress_payload(rich_data: List[Dict]) -> Dict:
             "totalsellqty": item.get('q', [0,0])[1],
             "oi": item.get('o', [0,0])[0],
             "oipercent": item.get('o', [0,0])[1],
-            "expiry": expiry_ts # Converted to Epoch for UI compatibility
+            "expiry": expiry_ts 
         }
     return fyers_data
 
@@ -328,10 +328,9 @@ def get_hist_dates(symbol: str):
     try:
         dates = set()
         offset = 0
-        limit = 1000 # Supabase max
+        limit = 1000 
         
         while True:
-            # Loop to fetch ALL records
             res = supabase.table('snapshots')\
                 .select('time_signature')\
                 .eq('symbol', symbol.upper())\
@@ -352,7 +351,6 @@ def get_hist_dates(symbol: str):
                 break
             
             offset += limit
-            # Safety break at 50k rows to prevent timeout if excessive
             if offset > 100000: break 
 
         return JSONResponse(sorted(list(dates), reverse=True))
@@ -361,7 +359,6 @@ def get_hist_dates(symbol: str):
 
 @app.get("/api/hist/minutes")
 def get_hist_minutes(symbol: str, date: str):
-    """Fetches ALL available minutes for a specific date using pagination"""
     try:
         minutes = set()
         offset = 0
@@ -382,11 +379,10 @@ def get_hist_minutes(symbol: str, date: str):
                 
             for item in data:
                 ts_str = item.get('time_signature', '')
-                # Format: YYYY-MM-DD HH:MM:SS -> Extract HH:MM
                 parts = ts_str.split(' ')
                 if len(parts) > 1:
-                    time_part = parts[1] # HH:MM:SS
-                    minutes.add(time_part[:5]) # HH:MM
+                    time_part = parts[1]
+                    minutes.add(time_part[:5])
             
             if len(data) < limit:
                 break
@@ -398,10 +394,6 @@ def get_hist_minutes(symbol: str, date: str):
 
 @app.get("/api/hist/load")
 def get_hist_data(symbol: str, date: str, minute: str):
-    """
-    Fetches ALL snapshots for a specific minute.
-    Returns a list of { time: "SS", data: {...reconstructed...} }
-    """
     try:
         query_sig = f"{date} {minute}"
         timeline = []
@@ -448,9 +440,246 @@ def get_hist_data(symbol: str, date: str, minute: str):
         print(e)
         return JSONResponse({"error": str(e)}, status_code=500)
 
+# --- CHARTING ENDPOINT (SERVER-SIDE PROCESSING) ---
+@app.get("/api/hist/series")
+def get_series_data(root: str, symbol: str, date: str):
+    """
+    Fetches ALL snapshots for a root+date, extracts only the requested symbol,
+    and returns a clean time-series array of {t, b, s}.
+    """
+    try:
+        series = []
+        offset = 0
+        limit = 1000 
+        
+        while True:
+            # Query all snapshots for this date
+            res = supabase.table('snapshots')\
+                .select('recorded_at, payload')\
+                .eq('symbol', root.upper())\
+                .like('time_signature', f'{date}%')\
+                .order('recorded_at', desc=False)\
+                .range(offset, offset + limit - 1)\
+                .execute()
+            
+            data = res.data
+            if not data:
+                break
+            
+            # Process batch server-side to save bandwidth
+            for row in data:
+                ts = row['recorded_at']
+                raw_payload = row['payload']
+                
+                # Normalize payload
+                if isinstance(raw_payload, str):
+                    try: raw_payload = json.loads(raw_payload)
+                    except: raw_payload = []
+                
+                if not isinstance(raw_payload, list):
+                    continue
+
+                # Find specific symbol
+                target_data = None
+                for item in raw_payload:
+                    if item.get('u') == symbol:
+                        target_data = item
+                        break
+                
+                if target_data:
+                    # 'q' is [BuyQty, SellQty]
+                    q = target_data.get('q', [0, 0])
+                    buy = q[0]
+                    sell = q[1]
+                    
+                    # VALIDATION: Skip if both are zero (noise reduction)
+                    if buy > 0 or sell > 0:
+                        series.append({
+                            "t": ts * 1000, # Chart.js needs Milliseconds
+                            "b": buy,
+                            "s": sell
+                        })
+            
+            if len(data) < limit:
+                break
+            offset += limit
+            
+            # Safety brake for massive days
+            if offset > 50000: break
+
+        return JSONResponse({"s": "ok", "data": series, "symbol": symbol, "date": date})
+
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+@app.get("/chart")
+def chart_view(root: str, symbol: str, date: str):
+    """Renders the Charting Page"""
+    return HTMLResponse(CHART_HTML
+                        .replace("{{ROOT}}", root)
+                        .replace("{{SYMBOL}}", symbol)
+                        .replace("{{DATE}}", date)
+                       )
+
+# ==========================================
+# 4. CHART HTML TEMPLATE
+# ==========================================
+CHART_HTML = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chart: {{SYMBOL}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
+    <style>
+        body { background: #0f172a; color: #f8fafc; font-family: 'Inter', sans-serif; margin: 0; padding: 20px; display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; }
+        .header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #334155; margin-bottom: 20px; }
+        .title { font-size: 18px; font-weight: 800; }
+        .subtitle { font-family: 'JetBrains Mono'; color: #94a3b8; font-size: 12px; margin-top: 5px; }
+        .chart-container { flex: 1; position: relative; width: 100%; min-height: 0; }
+        .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
+        .spinner { width: 40px; height: 40px; border: 4px solid #334155; border-top: 4px solid #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        
+        .badge { background: #1e293b; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; border: 1px solid #334155; }
+        .btn-close { background: #ef4444; border: none; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
+    </style>
+</head>
+<body>
+
+<div class="header">
+    <div>
+        <div class="title">ORDER FLOW IMBALANCE</div>
+        <div class="subtitle">
+            <span class="badge">{{ROOT}}</span> 
+            <span class="badge" style="color:#fbbf24">{{SYMBOL}}</span> 
+            <span class="badge">{{DATE}}</span>
+        </div>
+    </div>
+    <button class="btn-close" onclick="window.close()">CLOSE TAB</button>
+</div>
+
+<div class="chart-container">
+    <div class="loader" id="loader">
+        <div class="spinner"></div>
+        <div style="font-size:12px; font-weight:bold; color:#cbd5e1;">FETCHING SERVER DATA...</div>
+    </div>
+    <canvas id="myChart"></canvas>
+</div>
+
+<script>
+    const ROOT = "{{ROOT}}";
+    const SYMBOL = "{{SYMBOL}}";
+    const DATE = "{{DATE}}";
+
+    async function init() {
+        try {
+            const res = await fetch(`/api/hist/series?root=${ROOT}&symbol=${SYMBOL}&date=${DATE}`);
+            const json = await res.json();
+            
+            if(json.s !== 'ok') throw new Error(json.error || "Unknown Error");
+            
+            document.getElementById('loader').style.display = 'none';
+            renderChart(json.data);
+            
+        } catch(e) {
+            document.getElementById('loader').innerHTML = `<div style='color:#ef4444; font-weight:bold;'>ERROR: ${e.message}</div>`;
+        }
+    }
+
+    function renderChart(data) {
+        if(data.length === 0) {
+            document.getElementById('loader').innerHTML = "<div style='color:#cbd5e1;'>NO DATA FOR THIS DATE</div>";
+            document.getElementById('loader').style.display = 'block';
+            return;
+        }
+
+        const ctx = document.getElementById('myChart').getContext('2d');
+        
+        // Extract Arrays
+        const labels = data.map(d => d.t);
+        const buys = data.map(d => d.b);
+        const sells = data.map(d => d.s);
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: 'TOTAL BUY QTY',
+                        data: buys,
+                        borderColor: '#00e676', // Green
+                        backgroundColor: 'rgba(0, 230, 118, 0.1)',
+                        borderWidth: 2,
+                        pointRadius: 0,
+                        tension: 0.2,
+                        fill: false
+                    },
+                    {
+                        label: 'TOTAL SELL QTY',
+                        data: sells,
+                        borderColor: '#ff1744', // Red
+                        backgroundColor: 'rgba(255, 23, 68, 0.1)',
+                        borderWidth: 2,
+                        pointRadius: 0,
+                        tension: 0.2,
+                        fill: false
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'minute',
+                            displayFormats: { minute: 'HH:mm' }
+                        },
+                        grid: { color: '#334155' },
+                        ticks: { color: '#94a3b8' }
+                    },
+                    y: {
+                        grid: { color: '#334155' },
+                        ticks: { color: '#94a3b8' }
+                    }
+                },
+                plugins: {
+                    legend: { labels: { color: '#f8fafc', font: {family: 'JetBrains Mono'} } },
+                    tooltip: {
+                        backgroundColor: '#1e293b',
+                        titleColor: '#fff',
+                        bodyColor: '#cbd5e1',
+                        borderColor: '#475569',
+                        borderWidth: 1,
+                        callbacks: {
+                            label: function(ctx) {
+                                return ctx.dataset.label + ": " + ctx.raw.toLocaleString();
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    init();
+</script>
+</body>
+</html>
+"""
 
 # ==========================================
-# 4. FRONTEND
+# 5. MAIN FRONTEND TEMPLATE
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -502,10 +731,10 @@ HTML_TEMPLATE = """
         .sec-pill:hover { background: #ddd; color: #000; }
         .sec-pill.active { background: var(--accent); color: white; font-weight: bold; }
         
-        /* CORRUPTED DATA INDICATOR */
-        .sec-pill.bad { background: #ff5252; color: white; opacity: 0.9; }
+        /* CORRUPTED DATA INDICATOR - RED */
+        .sec-pill.bad { background: #ff5252; color: white; opacity: 1; font-weight: 800; border: 1px solid #d50000; }
         .sec-pill.bad:hover { background: #d50000; }
-        .sec-pill.bad.active { background: #b71c1c; border: 1px solid #fff; }
+        .sec-pill.bad.active { background: #b71c1c; border-color: #fff; }
 
         .grid-layout { display: flex; height: calc(100vh - 60px); }
         
@@ -526,6 +755,10 @@ HTML_TEMPLATE = """
         .graph-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid var(--border); cursor: crosshair; }
         .visual-bar { position: absolute; top: 8px; bottom: 8px; z-index: 0; border-radius: 4px; transition: width 0.3s, left 0.3s; opacity: 0.9; }
         
+        /* Graph Icon */
+        .graph-trigger { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 5; opacity: 0.2; cursor: pointer; }
+        .graph-trigger:hover { opacity: 1; color: var(--accent); }
+        
         .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; color: var(--text-main); }
         .delta-txt { z-index: 2; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.85); padding: 0 5px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-top: -2px; }
         
@@ -924,7 +1157,7 @@ HTML_TEMPLATE = """
             const res = await fetch(`/api/hist/load?symbol=${CURRENT_ROOT}&date=${date}&minute=${time}`);
             const json = await res.json();
             
-            CACHED_TIMELINE = json.timeline; // List of {s: "05", d: { ... }}
+            CACHED_TIMELINE = json.timeline; // List of {s: "00", d: { ... }}
             
             renderSecondBar();
             
@@ -1056,22 +1289,25 @@ HTML_TEMPLATE = """
         
         // Update UI with the historical packet
         updateUI(data); 
-        
-        // Also ensure Expiries are valid for this historical snapshot
-        // We look into the data items to find distinct expiries present in this snapshot
-        const presentExpiries = new Set();
-        for(let key in data) {
-             // In reconstructed data, expiry is a field if available
-             if(data[key].expiry) {
-                 // Format usually YYYY-MM-DD from v16 reconstruction
-                 // But UI expects Unix Timestamp.
-                 // We need to match it with CHAIN_DATA items.
-                 // Actually, simpler: Let the user filter expiries based on what the Master DB has.
-                 // History mode is just "Overwriting" the live price values.
-             }
-        }
     }
 
+    function openChart(symbol) {
+        // Find Date
+        let date = "";
+        if(IS_HISTORY) {
+            date = document.getElementById('histDate').value;
+            if(!date || date === 'DATE') { alert("Select a date first!"); return; }
+        } else {
+            // Default to today if live (experimental)
+            const d = new Date();
+            date = d.toISOString().split('T')[0];
+        }
+
+        if(!CURRENT_ROOT) { alert("Load a symbol first"); return; }
+        
+        const url = `/chart?root=${CURRENT_ROOT}&symbol=${symbol}&date=${date}`;
+        window.open(url, '_blank');
+    }
 
     // ===================================
     // EXISTING APP LOGIC
@@ -1454,9 +1690,17 @@ HTML_TEMPLATE = """
         const relevant = CHAIN_DATA.filter(x => x.e === ACTIVE_EXP && (x.t === 'CE' || x.t === 'PE'));
         OPT_SYMS = relevant;
         
+        // --- PREPARE MAP FOR LOOKUP ---
+        const map = {};
+        relevant.forEach(i => map[i.k + i.t] = i.s);
+
         const strikes = [...new Set(relevant.map(x => x.k))].sort((a,b) => a-b);
         
-        body.innerHTML = strikes.map(k => `
+        body.innerHTML = strikes.map(k => {
+            const ceSym = map[k + 'CE'] || '';
+            const peSym = map[k + 'PE'] || '';
+            
+            return `
             <div class="row" id="row-${k}" data-k="${k}">
                 <div class="graph-col">
                     <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
@@ -1465,6 +1709,13 @@ HTML_TEMPLATE = """
                         <span class="delta-txt" id="valL-${k}">-</span>
                     </div>
                 </div>
+                
+                <!-- Center Icons (Graph) -->
+                <div style="position:absolute; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:120px;">
+                    ${ceSym ? `<svg onclick="openChart('${ceSym}')" class="graph-trigger" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H9M17 7V15"/></svg>` : ''}
+                    ${peSym ? `<svg onclick="openChart('${peSym}')" class="graph-trigger" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H9M17 7V15"/></svg>` : ''}
+                </div>
+
                 <div class="graph-col">
                     <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
                         <div class="visual-bar" id="barR-${k}"></div>
@@ -1473,7 +1724,8 @@ HTML_TEMPLATE = """
                     </div>
                 </div>
             </div>
-        `).join('');
+            `;
+        }).join('');
         
         window.scrolled = false;
         
@@ -1581,7 +1833,11 @@ HTML_TEMPLATE = """
             return `
             <div class="fut-card">
                 <div style="display:flex; justify-content:space-between; font-weight:700;">
-                    <span>${dt} FUT</span> <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
+                    <div style="display:flex; align-items:center; gap:5px;">
+                        <span>${dt} FUT</span>
+                        <svg onclick="openChart('${f.s}')" style="cursor:pointer; color:#aaa; width:12px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H9M17 7V15"/></svg>
+                    </div>
+                    <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
                 </div>
                 <div class="meter-bg">
                     <div style="width:${bPct}%; background:var(--green)"></div>