Update app.py

app.py

@@ -6,7 +6,7 @@ import re
 from datetime import timedelta
 from fastapi import FastAPI, Body
 from fastapi.responses import HTMLResponse, JSONResponse
-from typing import Optional, Set
+from typing import Optional, Set, Dict, List
 
 # ==========================================
 # 1. CONFIGURATION
@@ -48,53 +48,26 @@ def sb_rpc(func_name: str, params: dict = None):
         print(f"DB Error RPC ({func_name}): {e}")
         return []
 
-def extract_variables_from_formulas(series_list: list) -> Set[str]:
-    """
-    Parse formulas to extract required variables.
-    Returns set of column names needed from SQL.
-    Always includes 'price' as base.
-    """
-    required = {'price'}  # Always need price
-    
-    variable_map = {
-        '$P': 'price',
-        '$V': 'volume', 
-        '$OI': 'oi',
-        '$B': 'buy_qty',
-        '$S': 'sell_qty',
-        '$CB': 'cb',
-        '$CS': 'cs',
-        '$PB': 'pb',
-        '$PS': 'ps'
-    }
-    
-    for s in series_list:
-        formula = s.get('formula', '')
-        for var, col in variable_map.items():
-            if var in formula:
-                required.add(col)
-    
-    return required
-
-def detect_instrument_type(instrument: str) -> str:
-    """
-    Detect instrument type from name.
-    Returns: 'futures', 'equity', 'call', 'put'
-    """
+def is_option(instrument: str) -> bool:
+    """Check if instrument is an option (CE or PE)"""
     if not instrument:
-        return 'unknown'
-    instrument = instrument.upper()
-    
-    if 'FUT' in instrument:
-        return 'futures'
-    elif '-INDEX' in instrument or '-EQ' in instrument:
-        return 'equity'
-    elif instrument.endswith('CE'):
-        return 'call'
+        return False
+    return instrument.upper().endswith('CE') or instrument.upper().endswith('PE')
+
+def get_pair_instrument(instrument: str) -> str:
+    """Get the pair instrument (CE->PE, PE->CE)"""
+    if instrument.endswith('CE'):
+        return instrument.replace('CE', 'PE')
     elif instrument.endswith('PE'):
-        return 'put'
-    else:
-        return 'unknown'
+        return instrument.replace('PE', 'CE')
+    return None
+
+def extract_strike(instrument: str) -> float:
+    """Extract strike price from instrument name"""
+    match = re.search(r'(\d+(?:\.\d+)?)(?:CE|PE)$', instrument)
+    if match:
+        return float(match.group(1))
+    return 0.0
 
 # ==========================================
 # 3. API ROUTES - METADATA
@@ -171,7 +144,7 @@ def get_instruments(date: str, root: str, expiry: str):
     return JSONResponse({"spot_fut": sorted(spot_fut), "options": sorted(options)})
 
 # ==========================================
-# 4. API ROUTES - DATA FETCHING (RPC DRIVEN WITH CHUNKING)
+# 4. API ROUTES - DATA FETCHING
 # ==========================================
 
 @app.post("/api/fetch_series")
@@ -185,24 +158,118 @@ async def fetch_series(
     end_time: str = Body(...),
     mode: str = Body("normal"),
     atm_range: int = Body(5),
-    series: list = Body(default=[])  # For variable extraction
+    series: list = Body(default=[])
 ):
     root = root.upper()
     t_start_dt = pd.to_datetime(f"{date} {start_time}:00")
     t_end_dt = pd.to_datetime(f"{date} {end_time}:59")
     
-    # Extract required variables from formulas
-    required_cols = extract_variables_from_formulas(series)
+    # =========================================================
+    # CHUNKING LOGIC: Split into 2-hour chunks for fast RPC
+    # =========================================================
+    async def fetch_chunk_normal(start_dt, end_dt, inst):
+        """Fetch chunk for normal mode - single instrument"""
+        params = {
+            "p_root": root,
+            "p_expiry": expiry,
+            "p_start_time": start_dt.strftime("%Y-%m-%d %H:%M:%S"),
+            "p_end_time": end_dt.strftime("%Y-%m-%d %H:%M:%S"),
+            "p_instrument": inst
+        }
+        loop = asyncio.get_event_loop()
+        return await loop.run_in_executor(None, sb_rpc, "get_normal_chart_data", params)
     
-    if mode == "advanced":
-        # 1. Fetch available instruments (Lightweight metadata fetch)
+    async def fetch_chunk_advanced(start_dt, end_dt, ref_inst):
+        """Fetch chunk for advanced mode - returns raw options data"""
+        params = {
+            "p_root": root,
+            "p_expiry": expiry,
+            "p_start_time": start_dt.strftime("%Y-%m-%d %H:%M:%S"),
+            "p_end_time": end_dt.strftime("%Y-%m-%d %H:%M:%S"),
+            "p_ref_instrument": ref_inst,
+            "p_atm_range": atm_range
+        }
+        loop = asyncio.get_event_loop()
+        return await loop.run_in_executor(None, sb_rpc, "get_advanced_chart_data", params)
+    
+    # =========================================================
+    # NORMAL MODE
+    # =========================================================
+    if mode == "normal":
+        if not instrument:
+            return JSONResponse({"error": "No Instrument Selected.", "labels": [], "P": []})
+        
+        all_records = []
+        
+        # Check if it's an option - need to fetch both CE and PE
+        if is_option(instrument):
+            primary_inst = instrument
+            pair_inst = get_pair_instrument(instrument)
+            
+            # Fetch both instruments
+            curr = t_start_dt
+            chunk_hours = 2
+            
+            while curr <= t_end_dt:
+                nxt = curr + timedelta(hours=chunk_hours) - timedelta(seconds=1)
+                if nxt > t_end_dt:
+                    nxt = t_end_dt
+                
+                # Fetch primary and pair in parallel
+                tasks = [
+                    fetch_chunk_normal(curr, nxt, primary_inst),
+                    fetch_chunk_normal(curr, nxt, pair_inst) if pair_inst else None
+                ]
+                tasks = [t for t in tasks if t is not None]
+                
+                results = await asyncio.gather(*tasks)
+                
+                # Process primary instrument
+                if results[0] and isinstance(results[0], list):
+                    for rec in results[0]:
+                        rec['is_primary'] = True
+                        all_records.append(rec)
+                
+                # Process pair instrument (for CB/CS/PB/PS)
+                if len(results) > 1 and results[1] and isinstance(results[1], list):
+                    for rec in results[1]:
+                        rec['is_pair'] = True
+                        all_records.append(rec)
+                
+                curr += timedelta(hours=chunk_hours)
+        else:
+            # Non-option (Futures/Equity) - single fetch
+            curr = t_start_dt
+            chunk_hours = 2
+            
+            while curr <= t_end_dt:
+                nxt = curr + timedelta(hours=chunk_hours) - timedelta(seconds=1)
+                if nxt > t_end_dt:
+                    nxt = t_end_dt
+                
+                result = await fetch_chunk_normal(curr, nxt, instrument)
+                if result and isinstance(result, list):
+                    all_records.extend(result)
+                
+                curr += timedelta(hours=chunk_hours)
+        
+        if not all_records:
+            return JSONResponse({"error": "No valid data found in range.", "labels": [], "P": []})
+        
+        # Process normal mode data
+        return process_normal_data(all_records, timeframe, instrument, is_option(instrument))
+    
+    # =========================================================
+    # ADVANCED MODE
+    # =========================================================
+    else:
+        # Get reference instrument
         inst_data = sb_rpc("get_instruments_for_expiry", {"p_date": date, "p_root": root, "p_expiry": expiry})
         instruments = [r['instrument_name'] for r in inst_data]
         
         if not instruments:
-            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels":[], "P":[], "breakdown": []})
+            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels": [], "P": []})
         
-        # 2. Intelligent Default Selection
         ref_instrument = instrument
         if not ref_instrument:
             spot_keys = [k for k in instruments if k.endswith('-INDEX') or k.endswith('-EQ')]
@@ -215,152 +282,253 @@ async def fetch_series(
             else:
                 others = [k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
                 ref_instrument = others[0] if others else instruments[0]
-
-        rpc_name = "get_advanced_chart_data"
-        base_params = {
-            "p_root": root,
-            "p_expiry": expiry,
-            "p_ref_instrument": ref_instrument,
-            "p_atm_range": atm_range,
-            "p_strike_map": {}
-        }
-    
-    else:
-        # Normal fetching
-        if not instrument:
-            return JSONResponse({"error": "No Instrument Selected.", "labels": [], "P":[], "breakdown": []})
-            
-        rpc_name = "get_normal_chart_data"
-        base_params = {
-            "p_root": root,
-            "p_expiry": expiry,
-            "p_instrument": instrument
-        }
-
-    # =========================================================
-    # CHUNKING LOGIC: Bypass Supabase DB/Timeout Limits
-    # ADVANCED MODE: Use 30 min chunks (faster for heavy query)
-    # NORMAL MODE: Use 2 hour chunks
-    # =========================================================
-    async def fetch_chunk(start_dt, end_dt):
-        params = base_params.copy()
-        params["p_start_time"] = start_dt.strftime("%Y-%m-%d %H:%M:%S")
-        params["p_end_time"] = end_dt.strftime("%Y-%m-%d %H:%M:%S")
         
-        loop = asyncio.get_event_loop()
-        return await loop.run_in_executor(None, sb_rpc, rpc_name, params)
-
-    tasks = []
-    curr = t_start_dt
-    
-    # CRITICAL FIX: Smaller chunks for advanced mode to avoid RPC timeout
-    chunk_hours = 0.5 if mode == "advanced" else 2  # 30 min for advanced, 2 hours for normal
-
-    while curr <= t_end_dt:
-        if mode == "advanced":
-            # 30 minute chunks for advanced mode
-            nxt = curr + timedelta(minutes=30) - timedelta(seconds=1)
-        else:
-            # 2 hour chunks for normal mode
-            nxt = curr + timedelta(hours=chunk_hours) - timedelta(seconds=1)
-        
-        if nxt > t_end_dt:
-            nxt = t_end_dt
+        # Fetch all chunks
+        all_records = []
+        curr = t_start_dt
+        chunk_hours = 2
         
-        tasks.append(fetch_chunk(curr, nxt))
-        
-        if mode == "advanced":
-            curr += timedelta(minutes=30)
-        else:
+        while curr <= t_end_dt:
+            nxt = curr + timedelta(hours=chunk_hours) - timedelta(seconds=1)
+            if nxt > t_end_dt:
+                nxt = t_end_dt
+            
+            result = await fetch_chunk_advanced(curr, nxt, ref_instrument)
+            if result and isinstance(result, list):
+                all_records.extend(result)
+            
             curr += timedelta(hours=chunk_hours)
         
-    # Execute all chunks in parallel
-    chunk_results = await asyncio.gather(*tasks)
-    
-    all_records = []
-    for res in chunk_results:
-        if isinstance(res, list):
-            all_records.extend(res)
+        if not all_records:
+            return JSONResponse({"error": "No valid data found in range.", "labels": [], "P": []})
+        
+        # Process advanced mode data - aggregate options based on ATM
+        return process_advanced_data(all_records, timeframe, atm_range)
 
-    if not all_records:
-        return JSONResponse({"error": "No valid data found in range.", "labels":[], "P":[], "breakdown": []})
 
-    # =========================================================
-    # DATA PROCESSING & AGGREGATION
-    # =========================================================
-    df = pd.DataFrame(all_records)
+def process_normal_data(records: list, timeframe: str, instrument: str, is_opt: bool) -> JSONResponse:
+    """Process normal mode data - handle CE/PE pairing for options"""
+    
+    df = pd.DataFrame(records)
+    
+    if df.empty:
+        return JSONResponse({"error": "No data to process.", "labels": [], "P": []})
     
-    # Standardize output
-    df.rename(columns={
-        "tick_ts": "ts",
-        "b_qty": "buy_qty",
-        "s_qty": "sell_qty",
-        "vol": "volume"
-    }, inplace=True)
+    df['tick_ts'] = pd.to_datetime(df['tick_ts'])
+    df = df.sort_values('tick_ts')
     
-    df['ts'] = pd.to_datetime(df['ts'])
+    if is_opt:
+        # For options, merge primary and pair data
+        primary_df = df[df.get('is_primary', False) == True].copy()
+        pair_df = df[df.get('is_pair', False) == True].copy()
+        
+        if not primary_df.empty:
+            primary_df = primary_df.set_index('tick_ts')
+            
+            # Rename for primary (the selected instrument)
+            if instrument.endswith('CE'):
+                # Primary is CE, Pair is PE
+                primary_df = primary_df.rename(columns={
+                    'b_qty': 'cb', 's_qty': 'cs', 'vol': 'vol', 'oi': 'oi'
+                })
+                primary_df['pb'] = 0
+                primary_df['ps'] = 0
+            else:
+                # Primary is PE, Pair is CE
+                primary_df = primary_df.rename(columns={
+                    'b_qty': 'pb', 's_qty': 'ps', 'vol': 'vol', 'oi': 'oi'
+                })
+                primary_df['cb'] = 0
+                primary_df['cs'] = 0
+            
+            if not pair_df.empty:
+                pair_df = pair_df.set_index('tick_ts')
+                if instrument.endswith('CE'):
+                    # Pair is PE
+                    primary_df['pb'] = pair_df['b_qty'].reindex(primary_df.index, method='ffill').fillna(0)
+                    primary_df['ps'] = pair_df['s_qty'].reindex(primary_df.index, method='ffill').fillna(0)
+                else:
+                    # Pair is CE
+                    primary_df['cb'] = pair_df['b_qty'].reindex(primary_df.index, method='ffill').fillna(0)
+                    primary_df['cs'] = pair_df['s_qty'].reindex(primary_df.index, method='ffill').fillna(0)
+            
+            df = primary_df.reset_index()
+        else:
+            # Fallback - just use all records
+            df = df.set_index('tick_ts')
+            df['cb'] = 0
+            df['cs'] = 0
+            df['pb'] = 0
+            df['ps'] = 0
+            df = df.reset_index()
+    else:
+        # For non-options, just use the data as-is
+        df['cb'] = 0
+        df['cs'] = 0
+        df['pb'] = 0
+        df['ps'] = 0
     
-    # Deduplicate boundaries
-    df.drop_duplicates(subset=['ts'], inplace=True)
-    df.set_index('ts', inplace=True)
-    df.sort_index(inplace=True)
+    df = df.set_index('tick_ts')
+    df = df.sort_index()
     
-    # Resample Timeframes accurately in Pandas 
+    # Resample
     tf_map = {
         "1min": "1min", "3min": "3min", "5min": "5min", 
         "15min": "15min", "30min": "30min", "1hour": "1h"
     }
     panda_tf = tf_map.get(timeframe, "1min")
     
-    # CORRECTED: Use LAST value for all quantity columns (not mean)
     agg_dict = {
         "price": "last",
-        "volume": "sum",
+        "vol": "sum",
         "oi": "last",
-        "buy_qty": "last",    # Changed from mean to last
-        "sell_qty": "last",   # Changed from mean to last
-        "cb": "last",         # Changed from mean to last
-        "cs": "last",         # Changed from mean to last
-        "pb": "last",         # Changed from mean to last
-        "ps": "last"          # Changed from mean to last
+        "b_qty": "last",
+        "s_qty": "last",
+        "cb": "last",
+        "cs": "last",
+        "pb": "last",
+        "ps": "last"
     }
     
-    # Only aggregate columns that actually exist
     existing_cols = {k: v for k, v in agg_dict.items() if k in df.columns}
-    
     resampled = df.resample(panda_tf).agg(existing_cols).ffill().fillna(0)
     
-    # Prepare breakdown data for inspection
+    # Build breakdown for inspection
     breakdown_data = []
-    if 'breakdown' in df.columns:
-        # Take last breakdown for each resampled period
-        breakdown_series = df['breakdown'].resample(panda_tf).last()
-        for idx, bd in breakdown_series.items():
-            if bd and isinstance(bd, list):
-                breakdown_data.append({
-                    "time": idx.strftime('%H:%M'),
-                    "breakdown": bd
-                })
+    for idx in resampled.index:
+        breakdown_data.append({
+            "time": idx.strftime('%H:%M'),
+            "cb": resampled.loc[idx, 'cb'] if 'cb' in resampled else 0,
+            "cs": resampled.loc[idx, 'cs'] if 'cs' in resampled else 0,
+            "pb": resampled.loc[idx, 'pb'] if 'pb' in resampled else 0,
+            "ps": resampled.loc[idx, 'ps'] if 'ps' in resampled else 0,
+        })
     
-    response_data = {
+    return JSONResponse({
         "labels": resampled.index.strftime('%H:%M').tolist(),
         "P": resampled['price'].tolist() if 'price' in resampled else [],
-        "B": resampled['buy_qty'].tolist() if 'buy_qty' in resampled else [],
-        "S": resampled['sell_qty'].tolist() if 'sell_qty' in resampled else [],
-        "V": resampled['volume'].tolist() if 'volume' in resampled else [],
+        "B": resampled['b_qty'].tolist() if 'b_qty' in resampled else [],
+        "S": resampled['s_qty'].tolist() if 's_qty' in resampled else [],
+        "V": resampled['vol'].tolist() if 'vol' in resampled else [],
         "OI": resampled['oi'].tolist() if 'oi' in resampled else [],
         "CB": resampled['cb'].tolist() if 'cb' in resampled else [],
         "CS": resampled['cs'].tolist() if 'cs' in resampled else [],
         "PB": resampled['pb'].tolist() if 'pb' in resampled else [],
         "PS": resampled['ps'].tolist() if 'ps' in resampled else [],
         "breakdown": breakdown_data
+    })
+
+
+def process_advanced_data(records: list, timeframe: str, atm_range: int) -> JSONResponse:
+    """Process advanced mode data - aggregate options within ATM ± range"""
+    
+    df = pd.DataFrame(records)
+    
+    if df.empty:
+        return JSONResponse({"error": "No data to process.", "labels": [], "P": []})
+    
+    df['tick_ts'] = pd.to_datetime(df['tick_ts'])
+    df = df.sort_values('tick_ts')
+    
+    # Forward fill ref_price within each tick
+    df['ref_price'] = df.groupby('tick_ts')['ref_price'].transform(lambda x: x.ffill().bfill())
+    
+    # Get unique timestamps and process each
+    results = []
+    for ts, group in df.groupby('tick_ts'):
+        ref_price = group['ref_price'].iloc[0]
+        ref_b = group['ref_b'].iloc[0]
+        ref_s = group['ref_s'].iloc[0]
+        
+        if ref_price <= 0:
+            continue
+        
+        # Filter options within ATM ± range
+        options = group[group['strike_price'] > 0].copy()
+        if options.empty:
+            continue
+        
+        # Calculate ATM distance
+        options['atm_dist'] = abs(options['strike_price'] - ref_price)
+        options['atm_rank'] = options['atm_dist'].rank(method='dense')
+        
+        # Filter within range
+        options_in_range = options[options['atm_rank'] <= (atm_range + 1)]
+        
+        if options_in_range.empty:
+            continue
+        
+        # Aggregate
+        cb = options_in_range[options_in_range['opt_type'] == 'CE']['b_qty'].sum()
+        cs = options_in_range[options_in_range['opt_type'] == 'CE']['s_qty'].sum()
+        pb = options_in_range[options_in_range['opt_type'] == 'PE']['b_qty'].sum()
+        ps = options_in_range[options_in_range['opt_type'] == 'PE']['s_qty'].sum()
+        
+        results.append({
+            'tick_ts': ts,
+            'price': ref_price,
+            'b_qty': ref_b,
+            's_qty': ref_s,
+            'cb': cb,
+            'cs': cs,
+            'pb': pb,
+            'ps': ps
+        })
+    
+    if not results:
+        return JSONResponse({"error": "No options data in range.", "labels": [], "P": []})
+    
+    result_df = pd.DataFrame(results)
+    result_df = result_df.set_index('tick_ts')
+    result_df = result_df.sort_index()
+    
+    # Resample
+    tf_map = {
+        "1min": "1min", "3min": "3min", "5min": "5min", 
+        "15min": "15min", "30min": "30min", "1hour": "1h"
     }
+    panda_tf = tf_map.get(timeframe, "1min")
+    
+    agg_dict = {
+        "price": "last",
+        "b_qty": "last",
+        "s_qty": "last",
+        "cb": "last",
+        "cs": "last",
+        "pb": "last",
+        "ps": "last"
+    }
+    
+    resampled = result_df.resample(panda_tf).agg(agg_dict).ffill().fillna(0)
+    
+    # Build breakdown
+    breakdown_data = []
+    for idx in resampled.index:
+        breakdown_data.append({
+            "time": idx.strftime('%H:%M'),
+            "cb": float(resampled.loc[idx, 'cb']),
+            "cs": float(resampled.loc[idx, 'cs']),
+            "pb": float(resampled.loc[idx, 'pb']),
+            "ps": float(resampled.loc[idx, 'ps']),
+        })
     
-    return JSONResponse(response_data)
+    return JSONResponse({
+        "labels": resampled.index.strftime('%H:%M').tolist(),
+        "P": resampled['price'].tolist(),
+        "B": resampled['b_qty'].tolist(),
+        "S": resampled['s_qty'].tolist(),
+        "V": [],
+        "OI": [],
+        "CB": resampled['cb'].tolist(),
+        "CS": resampled['cs'].tolist(),
+        "PB": resampled['pb'].tolist(),
+        "PS": resampled['ps'].tolist(),
+        "breakdown": breakdown_data
+    })
 
 
 # ==========================================
-# 5. FRONTEND TEMPLATE
+# 5. FRONTEND TEMPLATE (same as before)
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -373,7 +541,6 @@ HTML_TEMPLATE = """
     <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>
-        /* --- THEME --- */
         :root {
             --bg-body: #0d1117;
             --bg-header: #161b22;
@@ -400,7 +567,6 @@ HTML_TEMPLATE = """
         ::-webkit-scrollbar-track { background: var(--bg-body); }
         ::-webkit-scrollbar-thumb { background: var(--bg-panel); border: 2px solid var(--bg-body); border-radius: 6px; }
 
-        /* HEADER */
         .top-bar {
             height: 52px; background: var(--bg-header); border-bottom: 1px solid var(--border);
             display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0;
@@ -424,7 +590,6 @@ HTML_TEMPLATE = """
         .layout-btn { width: 30px; height: 26px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
         .layout-btn.active { background: var(--bg-panel); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
 
-        /* GRID */
         .main-container { flex: 1; display: flex; overflow-y: auto; overflow-x: hidden; }
         .column { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
         .column:last-child { border-right: none; }
@@ -435,7 +600,6 @@ HTML_TEMPLATE = """
         }
         .add-chart-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
 
-        /* CARD */
         .chart-card { background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
         .card-header {
             height: 38px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
@@ -458,7 +622,6 @@ HTML_TEMPLATE = """
         .card-body { flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
         .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); background: radial-gradient(circle, var(--bg-panel) 0%, var(--bg-card) 100%); text-align: center; padding: 20px;}
 
-        /* MODAL */
         .modal-backdrop {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); 
             z-index: 100; display: none; justify-content: center; align-items: center;
@@ -475,7 +638,6 @@ HTML_TEMPLATE = """
         
         .form-section label { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; display: block; }
         
-        /* CUSTOM DROPDOWN UI */
         .input-wrapper { position: relative; width: 100%; }
         .input-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); font-size: 10px; }
         .custom-dd {
@@ -488,10 +650,8 @@ HTML_TEMPLATE = """
         .custom-dd-opt:hover { background: var(--bg-input); color: var(--accent); }
         .custom-dd-group { padding: 6px 12px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-body); text-transform: uppercase; }
 
-        /* SERIES ROW STRUCTURE */
         .series-row { 
             background: var(--bg-panel); padding: 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; 
-            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
         }
         .series-row-top { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
         .series-row-bottom { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@@ -517,7 +677,6 @@ HTML_TEMPLATE = """
             padding: 4px 10px; border-radius: 6px; border: 1px dashed var(--border); flex: 1;
         }
 
-        /* UI ENHANCEMENTS */
         .segmented-control {
             display: flex; background: var(--bg-body); border: 1px solid var(--border);
             border-radius: 6px; padding: 2px; overflow: hidden; margin-bottom: 6px;
@@ -537,19 +696,12 @@ HTML_TEMPLATE = """
         }
         .info-icon:hover { color: var(--text-primary); border-color: var(--accent); }
         
-        /* INFO MODAL TABLE */
         .info-table { width: 100%; font-family: var(--font-mono); font-size: 11px; border-collapse: collapse; margin-top: 10px; }
         .info-table th { text-align: left; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding: 8px; font-weight: 600; }
         .info-table td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
         .info-table tr:hover { background: rgba(47, 129, 247, 0.05); }
-        .info-table .result-row { background: rgba(47, 129, 247, 0.1); font-weight: 700; }
         .info-table .positive { color: var(--success); }
         .info-table .negative { color: var(--danger); }
-        
-        .label-group {
-            display: flex; gap: 8px; align-items: center;
-        }
-        .label-group span { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
     </style>
 </head>
 <body>
@@ -589,17 +741,13 @@ HTML_TEMPLATE = """
         <div class="modal-body">
             <div id="cfgLoading" style="display:none; text-align:center; color:var(--text-secondary);">Loading...</div>
             <div id="cfgContent">
-                
-                <!-- Global Settings Mode -->
                 <div id="cfgGlobalOnly" style="display:none;">
                     <div class="form-section">
                         <label>Refresh Rate (Seconds)</label>
                         <input type="number" id="cfgRefresh" value="15" min="5">
                     </div>
-                    <div style="height:1px; background:var(--border); margin: 16px 0;"></div>
                 </div>
 
-                <!-- Single Chart Config Mode -->
                 <div id="cfgChartOnly">
                     <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                         <div class="form-section">
@@ -628,7 +776,6 @@ HTML_TEMPLATE = """
                         </div>
                     </div>
 
-                    <!-- EXPLICIT INSTRUMENT SELECTION -->
                     <div class="form-section" id="cfgInstrumentContainer">
                         <label id="lblInst">Instrument</label>
                         <div class="input-wrapper">
@@ -637,16 +784,14 @@ HTML_TEMPLATE = """
                             <div id="dd-cfgInst" class="custom-dd"></div>
                         </div>
                         <div id="advInstHint" style="display:none; font-size:10px; color:var(--text-secondary); margin-top:4px; line-height: 1.4;">
-                            * For Advanced Mode, select the base Spot or Future here. We will use this price to calculate the ATM options.
+                            * For Advanced Mode, select the base Spot or Future here for ATM calculation.
                         </div>
                     </div>
 
-                    <!-- Advanced Mode Fields -->
                     <div id="cfgAdvancedFields" style="display:none;">
                         <div class="form-section" style="margin-top:12px;">
                             <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
                             <input type="number" id="cfgAtmRange" value="5" min="1" max="50" style="width:100%;">
-                            <div style="font-size:10px; color:var(--text-secondary); margin-top:4px; line-height: 1.4;">Calculates aggregate pressure dynamically across ATM plus/minus this many strikes.</div>
                         </div>
                     </div>
 
@@ -670,20 +815,17 @@ HTML_TEMPLATE = """
                             </div>
                         </div>
                     </div>
-                    <div style="height:1px; background:var(--border); margin: 12px 0 8px 0;"></div>
                 </div>
 
-                <!-- PRESET MANAGER -->
-                <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px; border:1px solid var(--border); margin-bottom: 12px;">
+                <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px; border:1px solid var(--border); margin-top:12px;">
                     <label>Quick Configurations</label>
                     <div style="display:flex; gap:8px;">
                         <select id="cfgPresetsDropdown" style="flex:1;" onchange="Config.loadPreset()"></select>
-                        <button class="primary" onclick="Config.savePreset()" title="Save Current Lines as Configuration">Save</button>
-                        <button class="danger" onclick="Config.deletePreset()" title="Delete Selected Model" style="width: 32px; padding:0;">✕</button>
+                        <button class="primary" onclick="Config.savePreset()">Save</button>
+                        <button class="danger" onclick="Config.deletePreset()" style="width: 32px; padding:0;">✕</button>
                     </div>
                 </div>
 
-                <!-- Common Series Config -->
                 <div class="form-section">
                     <div style="display:flex; align-items:center; margin-bottom: 6px;">
                         <label style="margin:0;">Plot Series</label>
@@ -701,7 +843,7 @@ HTML_TEMPLATE = """
     </div>
 </div>
 
-<!-- INSPECTION/BREAKDOWN MODAL -->
+<!-- INSPECTION MODAL -->
 <div class="modal-backdrop" id="infoModal">
     <div class="modal modal-lg">
         <div class="modal-head">
@@ -734,7 +876,6 @@ HTML_TEMPLATE = """
 </div>
 
 <script>
-// --- CUSTOM SEARCHABLE DROPDOWN LOGIC ---
 document.addEventListener('click', (e) => {
     if (!e.target.closest('.input-wrapper')) {
         document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
@@ -791,7 +932,7 @@ const CustomDD = {
         let pool = [...this.data[id]];
         
         if(id === 'cfgRoot' && q === '') {
-            const recentItems = this.recent.cfgRoot.map(r => ({val: r, group: 'Recent Search'}));
+            const recentItems = this.recent.cfgRoot.map(r => ({val: r, group: 'Recent'}));
             pool = [...recentItems, ...pool];
         }
 
@@ -799,7 +940,7 @@ const CustomDD = {
                             .filter(item => item.val.toLowerCase().includes(q));
         
         if (filtered.length === 0) {
-            el.innerHTML = '<div class="custom-dd-opt" style="color:var(--text-secondary); cursor:default;">No matches found</div>';
+            el.innerHTML = '<div class="custom-dd-opt" style="color:var(--text-secondary); cursor:default;">No matches</div>';
             return;
         }
 
@@ -832,20 +973,16 @@ const CustomDD = {
 const App = {
     state: { date: null, mode: 'LIVE', columns: 3, layout: [[],[],[]], charts: {}, refreshRate: 15 },
     
-    // PRESETS - Organized by Mode and Instrument Type
     presets: {
-        // Normal Mode - Futures/Equity/Spot
         "Basic Flow": [
             { formula: '$P', label: 'Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$B', label: 'Buy Qty', color1: '#238636', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$S', label: 'Sell Qty', color1: '#da3633', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' }
+            { formula: '$B', label: 'Buy', color1: '#238636', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
+            { formula: '$S', label: 'Sell', color1: '#da3633', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' }
         ],
-        "Net Flow (Futures)": [
+        "Net Flow": [
             { formula: '$P', label: 'Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
             { formula: '$B - $S', label: 'Net Flow', color1: '#238636', axis: 'right', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BUY', labelFalse: 'SELL' }
         ],
-        
-        // Normal Mode - Options
         "Call Flow": [
             { formula: '$P', label: 'Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
             { formula: '$CB', label: 'Call Buy', color1: '#238636', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
@@ -865,23 +1002,9 @@ const App = {
             { formula: '$P', label: 'Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
             { formula: '$CB + $PS - ($PB + $CS)', label: 'Net Flow', color1: '#238636', axis: 'right', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
         ],
-        
-        // Advanced Mode
-        "Advanced - Price & Flows": [
-            { formula: '$P', label: 'Spot Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$CB + $PS', label: 'Bull Side', color1: '#238636', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$PB + $CS', label: 'Bear Side', color1: '#da3633', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' }
-        ],
         "Advanced - Net Flow": [
-            { formula: '$P', label: 'Spot Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
+            { formula: '$P', label: 'Spot', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
             { formula: '$CB + $PS - ($PB + $CS)', label: 'Net Flow', color1: '#238636', axis: 'right', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
-        ],
-        "Advanced - Components": [
-            { formula: '$P', label: 'Spot Price', color1: '#2f81f7', axis: 'left', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$CB', label: 'Call Buy', color1: '#238636', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$CS', label: 'Call Sell', color1: '#3fb950', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$PB', label: 'Put Buy', color1: '#da3633', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' },
-            { formula: '$PS', label: 'Put Sell', color1: '#f85149', axis: 'right', cond: 'none', thresh: '0', color2: '#ffffff', labelTrue: '', labelFalse: '' }
         ]
     },
 
@@ -943,14 +1066,9 @@ const App = {
     save() {
         const cleanCharts = {};
         for(let id in this.state.charts) cleanCharts[id] = { config: this.state.charts[id].config };
-        
         localStorage.setItem('dc_pro_v4_final', JSON.stringify({
-            date: this.state.date,
-            mode: this.state.mode,
-            columns: this.state.columns,
-            layout: this.state.layout,
-            refreshRate: this.state.refreshRate,
-            charts: cleanCharts
+            date: this.state.date, mode: this.state.mode, columns: this.state.columns,
+            layout: this.state.layout, refreshRate: this.state.refreshRate, charts: cleanCharts
         }));
     },
 
@@ -972,7 +1090,6 @@ const App = {
 
     renderGrid() {
         document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1) === this.state.columns));
-        
         const container = document.getElementById('gridRoot');
         container.innerHTML = '';
 
@@ -987,11 +1104,9 @@ const App = {
                     this.state.charts[id].instance.destroy();
                     this.state.charts[id].instance = null;
                 }
-
                 const card = this.createCardDOM(id);
                 if (count > 0 && count <= 3) card.style.height = `calc(${viewH / count}px - 1px)`;
                 else card.style.height = '300px';
-
                 col.appendChild(card);
                 setTimeout(() => ChartLogic.plot(id), 0);
             });
@@ -1021,19 +1136,14 @@ const App = {
                     <span>${isCfg ? cfg.root : 'New Chart'}</span>
                     ${isCfg ? `${advancedLabel} <span class="card-meta">${cfg.expiry}</span>` : ''}
                 </div>
-                <div class="card-tools">
-                    <button class="tool-btn info-btn" id="info-btn-${id}" onclick="ChartLogic.showBreakdown('${id}')" style="display:none;">i</button>
+                <div class="card-tools" style="display: flex; gap: 4px;">
+                    <button class="tool-btn info-btn" id="infoBtn-${id}" onclick="InspectionModal.open('${id}')" title="Breakdown" style="display: ${isCfg ? 'flex' : 'none'};">i</button>
                     <button class="tool-btn" onclick="Config.open('${id}')">⚙</button>
                     <button class="tool-btn" style="color:var(--danger)" onclick="App.removeChart('${id}')">✕</button>
                 </div>
             </div>
             <div class="card-body" id="body-${id}">
-                ${!isCfg ? `
-                    <div class="empty-state">
-                        <div style="font-size:24px; opacity:0.3;">📊</div>
-                        <button style="background:transparent; border:1px solid var(--border); padding:5px 10px; border-radius:4px; color:var(--text-secondary); margin-top:8px;" onclick="Config.open('${id}')">Configure</button>
-                    </div>
-                ` : `<canvas id="canvas-${id}"></canvas>`}
+                ${!isCfg ? `<div class="empty-state"><div style="font-size:24px; opacity:0.3;">📊</div><button style="background:transparent; border:1px solid var(--border); padding:5px 10px; border-radius:4px; color:var(--text-secondary); margin-top:8px;" onclick="Config.open('${id}')">Configure</button></div>` : `<canvas id="canvas-${id}"></canvas>`}
             </div>
         `;
         return div;
@@ -1050,12 +1160,6 @@ const App = {
 
     onDateChange() {
         this.state.date = document.getElementById('globalDate').value;
-        const today = new Date().toISOString().split('T')[0];
-        if(this.state.date === today && this.state.mode !== 'LIVE') {
-            this.state.mode = 'LIVE';
-            document.getElementById('globalMode').value = 'LIVE';
-            this.updateModeUI();
-        }
         this.save();
         this.refreshAll();
     },
@@ -1076,13 +1180,55 @@ const App = {
     startLoop() {
         const loop = () => {
             if(this.state.mode === 'LIVE') Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id, true));
-            const rate = (this.state.refreshRate || 15) * 1000;
-            setTimeout(loop, rate);
+            setTimeout(loop, (this.state.refreshRate || 15) * 1000);
         };
         loop();
     }
 };
 
+const InspectionModal = {
+    open(chartId) {
+        const chart = App.state.charts[chartId];
+        if(!chart || !chart.chartData) return;
+        
+        const data = chart.chartData;
+        const seriesConfig = chart.config.series;
+        
+        const netFlowSeries = seriesConfig.find(s => s.formula.includes('CB') || s.formula.includes('PS'));
+        document.getElementById('infoFormula').innerText = netFlowSeries ? netFlowSeries.formula : 'N/A';
+        
+        let html = '';
+        for(let i = 0; i < data.labels.length; i++) {
+            const cb = data.CB[i] || 0;
+            const cs = data.CS[i] || 0;
+            const pb = data.PB[i] || 0;
+            const ps = data.PS[i] || 0;
+            const bullSide = cb + ps;
+            const bearSide = pb + cs;
+            const netFlow = bullSide - bearSide;
+            
+            html += `<tr>
+                <td>${data.labels[i]}</td>
+                <td>${formatNum(cb)}</td>
+                <td>${formatNum(cs)}</td>
+                <td>${formatNum(pb)}</td>
+                <td>${formatNum(ps)}</td>
+                <td>${formatNum(bullSide)}</td>
+                <td>${formatNum(bearSide)}</td>
+                <td class="${netFlow>=0?'positive':'negative'}">${formatNum(netFlow)} (${netFlow>=0?'BULLISH':'BEARISH'})</td>
+            </tr>`;
+        }
+        document.getElementById('infoTableBody').innerHTML = html;
+        document.getElementById('infoModal').style.display = 'flex';
+    }
+};
+
+function formatNum(n) {
+    if(Math.abs(n) >= 1000000) return (n/1000000).toFixed(2) + 'M';
+    if(Math.abs(n) >= 1000) return (n/1000).toFixed(1) + 'K';
+    return n.toFixed(0);
+}
+
 const ChartLogic = {
     async plot(id, isUpdate=false) {
         const chart = App.state.charts[id];
@@ -1116,454 +1262,352 @@ const ChartLogic = {
             if(data.error || !data.labels || !data.labels.length) {
                 if(App.state.mode !== 'LIVE') {
                     const b = document.getElementById(`body-${id}`);
-                    if(b) b.innerHTML = `<div class="empty-state" style="opacity:0.8"><span style="font-size:20px;">⚠️</span><br/>${data.error || "No Data Found"}</div>`;
+                    if(b) b.innerHTML = `<div class="empty-state" style="opacity:0.8"><span style="font-size:20px;">⚠️</span><br/>${data.error || "No Data"}</div>`;
                 }
                 if(dot) dot.classList.remove('retry');
                 return;
             }
-
-            // Store data for breakdown modal
-            chart.chartData = data;
             
-            // Show info button if we have breakdown data
-            const infoBtn = document.getElementById(`info-btn-${id}`);
-            if(infoBtn && data.breakdown && data.breakdown.length > 0) {
-                infoBtn.style.display = 'flex';
-            }
+            App.state.charts[id].chartData = data;
 
             const body = document.getElementById(`body-${id}`);
             if(body && !body.querySelector('canvas')) body.innerHTML = `<canvas id="canvas-${id}"></canvas>`;
 
             if(dot) dot.className = `status-dot ${App.state.mode==='LIVE'?'live':'hist'}`;
+            
+            const infoBtn = document.getElementById(`infoBtn-${id}`);
+            if(infoBtn) infoBtn.style.display = 'flex';
 
             const datasets = cfg.series.map(s => {
                 const vals = data.labels.map((_, i) => {
-                    const P=data.P[i]||0, V=data.V[i]||0, OI=data.OI[i]||0, B=data.B[i]||0, S=data.S[i]||0;
-                    const CB=data.CB[i]||0, CS=data.CS[i]||0, PB=data.PB[i]||0, PS=data.PS[i]||0;
+                    const P = data.P[i] || 0, V = data.V[i] || 0, OI = data.OI[i] || 0;
+                    const B = data.B[i] || 0, S = data.S[i] || 0;
+                    const CB = data.CB[i] || 0, CS = data.CS[i] || 0;
+                    const PB = data.PB[i] || 0, PS = data.PS[i] || 0;
                     
-                    // CRITICAL FIX: Use String() not str() - JavaScript doesn't have str()
                     let f = s.formula
-                        .replace(/\$CB/g, String(CB)).replace(/\$CS/g, String(CS))
-                        .replace(/\$PB/g, String(PB)).replace(/\$PS/g, String(PS))
-                        .replace(/\$OI/g, String(OI)).replace(/\$P/g, String(P))
-                        .replace(/\$V/g, String(V)).replace(/\$B/g, String(B)).replace(/\$S/g, String(S));
+                        .replace(/\\$CB/g, str(CB)).replace(/\\$CS/g, str(CS))
+                        .replace(/\\$PB/g, str(PB)).replace(/\\$PS/g, str(PS))
+                        .replace(/\\$OI/g, str(OI)).replace(/\\$P/g, str(P))
+                        .replace(/\\$V/g, str(V)).replace(/\\$B/g, str(B)).replace(/\\$S/g, str(S));
                         
                     try { return new Function('return '+f)(); } catch{ return null; }
                 });
                 
                 let dataset = {
                     label: s.label, data: vals,
-                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1'
+                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1,
+                    yAxisID: s.axis==='left'?'y':'y1',
+                    labelTrue: s.labelTrue || '', labelFalse: s.labelFalse || '',
+                    condition: s.cond, threshold: parseFloat(s.thresh) || 0,
+                    colorTrue: s.color1, colorFalse: s.color2 || s.color1
                 };
 
                 if(s.cond && s.cond !== 'none') {
-                    let thresh = parseFloat(s.thresh) || 0;
-                    let cTrue = s.color1;
-                    let cFalse = s.color2 || s.color1;
-                    
                     dataset.segment = {
                         borderColor: ctx => {
                             let v = ctx.p1.parsed.y;
-                            if(s.cond === '>') return v > thresh ? cTrue : cFalse;
-                            if(s.cond === '<') return v < thresh ? cTrue : cFalse;
-                            return cTrue;
+                            if(s.cond === '>') return v > dataset.threshold ? dataset.colorTrue : dataset.colorFalse;
+                            if(s.cond === '<') return v < dataset.threshold ? dataset.colorTrue : dataset.colorFalse;
+                            return dataset.colorTrue;
                         }
                     };
-                    dataset.borderColor = cTrue; 
-                    dataset.backgroundColor = cTrue;
-
-                    const hoverColorCallback = (ctx) => {
-                        let v = ctx.raw;
-                        if (v === undefined || v === null) return cTrue;
-                        if(s.cond === '>') return v > thresh ? cTrue : cFalse;
-                        if(s.cond === '<') return v < thresh ? cTrue : cFalse;
-                        return cTrue;
-                    };
-                    dataset.pointHoverBackgroundColor = hoverColorCallback;
-                    dataset.pointHoverBorderColor = hoverColorCallback;
-
+                    dataset.borderColor = dataset.colorTrue;
+                    dataset.backgroundColor = dataset.colorTrue;
                 } else {
                     dataset.borderColor = s.color1;
                     dataset.backgroundColor = s.color1;
                 }
+                
                 return dataset;
             });
 
-            const ctx = document.getElementById(`canvas-${id}`).getContext('2d');
-            
-            if(chart.instance) chart.instance.destroy();
-            
-            chart.instance = new Chart(ctx, {
-                type: 'line',
-                data: { labels: data.labels, datasets: datasets },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    interaction: { mode: 'index', intersect: false },
-                    plugins: {
-                        legend: { 
-                            labels: { 
-                                color: '#e6edf3', 
-                                font: { size: 11, family: 'Inter' },
-                                boxWidth: 12,
-                                usePointStyle: true
-                            },
-                            position: 'top'
-                        },
-                        tooltip: {
-                            backgroundColor: 'rgba(13, 17, 23, 0.95)',
-                            titleColor: '#e6edf3',
-                            bodyColor: '#8b949e',
-                            borderColor: '#30363d',
-                            borderWidth: 1,
-                            padding: 10,
-                            titleFont: { family: 'JetBrains Mono', size: 12 },
-                            bodyFont: { family: 'Inter', size: 11 }
-                        }
-                    },
-                    scales: {
-                        x: { 
-                            grid: { color: '#21262d', drawBorder: false }, 
-                            ticks: { color: '#8b949e', font: { family: 'JetBrains Mono', size: 10 }, maxTicksLimit: 8 }
-                        },
-                        y: { 
-                            type: 'linear', 
-                            display: true, 
-                            position: 'left',
-                            grid: { color: '#21262d', drawBorder: false },
-                            ticks: { color: '#8b949e', font: { family: 'JetBrains Mono', size: 10 } }
-                        },
-                        y1: { 
-                            type: 'linear', 
-                            display: true, 
-                            position: 'right', 
-                            grid: { drawOnChartArea: false },
-                            ticks: { color: '#8b949e', font: { family: 'JetBrains Mono', size: 10 } }
-                        }
-                    }
-                }
-            });
-        } catch(e) {
-            console.error(e);
-            if(dot) dot.classList.remove('retry');
-        }
+            this.render(id, data.labels, datasets, cfg.series);
+
+        } catch(e) { console.error(e); }
     },
 
-    showBreakdown(id) {
-        const chart = App.state.charts[id];
-        if(!chart || !chart.chartData || !chart.chartData.breakdown) return;
-        
-        const data = chart.chartData;
-        const cfg = chart.config;
-        
-        // Get the first series formula for display
-        const formula = cfg.series && cfg.series[0] ? cfg.series[0].formula : 'N/A';
-        document.getElementById('infoFormula').innerText = formula;
+    render(id, labels, datasets, seriesConfig) {
+        const ctx = document.getElementById(`canvas-${id}`);
+        if(!ctx) return;
         
-        const tbody = document.getElementById('infoTableBody');
-        tbody.innerHTML = '';
-        
-        data.breakdown.forEach((item, idx) => {
-            const bd = item.breakdown;
-            if(!bd || !Array.isArray(bd)) return;
-            
-            // Calculate aggregates
-            let cbTotal = 0, csTotal = 0, pbTotal = 0, psTotal = 0;
-            bd.forEach(strike => {
-                cbTotal += strike.b || 0;
-                csTotal += strike.s || 0;
-            });
-            
-            // For display, we'll show the sums
-            const cbPlusPs = cbTotal + psTotal;
-            const pbPlusCs = pbTotal + csTotal;
-            const netFlow = cbPlusPs - pbPlusCs;
-            
-            const row = document.createElement('tr');
-            row.innerHTML = `
-                <td>${item.time}</td>
-                <td>${cbTotal.toFixed(0)}</td>
-                <td>${csTotal.toFixed(0)}</td>
-                <td>${pbTotal.toFixed(0)}</td>
-                <td>${psTotal.toFixed(0)}</td>
-                <td>${cbPlusPs.toFixed(0)}</td>
-                <td>${pbPlusCs.toFixed(0)}</td>
-                <td class="${netFlow >= 0 ? 'positive' : 'negative'}">${netFlow.toFixed(0)}</td>
-            `;
-            tbody.appendChild(row);
+        if(App.state.charts[id].instance) {
+            App.state.charts[id].instance.destroy();
+            App.state.charts[id].instance = null;
+        }
+
+        const hasRight = datasets.some(d => d.yAxisID === 'y1');
+        App.state.charts[id].instance = new Chart(ctx.getContext('2d'), {
+            type: 'line',
+            data: { labels, datasets },
+            options: {
+                responsive: true, maintainAspectRatio: false, animation: false,
+                interaction: { mode: 'index', intersect: false },
+                plugins: { 
+                    legend: { display: false },
+                    tooltip: { 
+                        backgroundColor: 'rgba(22, 27, 34, 0.95)', titleColor:'#e6edf3', bodyColor:'#e6edf3',
+                        callbacks: {
+                            label: function(context) {
+                                let s = seriesConfig[context.datasetIndex];
+                                let v = context.parsed.y;
+                                let label = s.label;
+                                if(s.cond && s.cond !== 'none') {
+                                    let thresh = parseFloat(s.thresh) || 0;
+                                    if(s.cond === '>') label = v > thresh ? (s.labelTrue || s.label) : (s.labelFalse || s.label);
+                                    if(s.cond === '<') label = v < thresh ? (s.labelTrue || s.label) : (s.labelFalse || s.label);
+                                }
+                                return `${label}: ${formatNum(v)}`;
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: { grid:{color:'#30363d'}, ticks:{color:'#8b949e', maxTicksLimit:8, font:{size:10}} },
+                    y: { type:'linear', display:true, position:'left', grid:{color:'#30363d'}, ticks:{color:'#8b949e'} },
+                    y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#8b949e'} }
+                }
+            }
         });
-        
-        document.getElementById('infoModal').style.display = 'flex';
     }
 };
 
 const Config = {
-    editingId: null,
-    isGlobal: false,
-    currentMode: 'normal',
+    tid: null, isGlobal: false, currentMode: 'normal',
+    
+    setMode(mode) {
+        this.currentMode = mode;
+        document.querySelectorAll('#cfgModeToggle .seg-btn').forEach((b, i) => b.classList.toggle('active', (i===0) === (mode==='normal')));
+        document.getElementById('cfgAdvancedFields').style.display = mode === 'advanced' ? 'block' : 'none';
+        document.getElementById('lblInst').innerText = mode === 'normal' ? 'Instrument' : 'Reference Spot/Fut';
+        document.getElementById('advInstHint').style.display = mode === 'advanced' ? 'block' : 'none';
+        this.updatePresetsDropdown();
+        this.loadPreset(mode === 'advanced' ? "Advanced - Net Flow" : "Overall Net Flow");
+    },
 
-    open(id) {
-        this.editingId = id;
-        this.isGlobal = false;
-        const cfg = App.state.charts[id].config;
-        
+    updatePresetsDropdown() {
+        const sel = document.getElementById('cfgPresetsDropdown');
+        const mode = this.currentMode;
+        let presetNames = Object.keys(App.presets).filter(k => mode === 'advanced' ? k.startsWith('Advanced') : !k.startsWith('Advanced'));
+        sel.innerHTML = presetNames.map(k => `<option value="${k}">${k}</option>`).join('');
+    },
+
+    loadPreset(name) {
+        name = name || document.getElementById('cfgPresetsDropdown').value;
+        if(name && App.presets[name]) {
+            document.getElementById('cfgPresetsDropdown').value = name;
+            this.renderSeries(App.presets[name]);
+        }
+    },
+
+    savePreset() {
+        const name = prompt("Enter name:", "Custom Model");
+        if(!name) return;
+        App.presets[name] = this.extractSeriesFromDOM();
+        localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
+        this.updatePresetsDropdown();
+    },
+
+    deletePreset() {
+        const name = document.getElementById('cfgPresetsDropdown').value;
+        if(name.startsWith('Basic')||name.startsWith('Net Flow')||name.startsWith('Call')||name.startsWith('Put')||name.startsWith('Aggregated')||name.startsWith('Overall')||name.startsWith('Advanced')) return alert("Cannot delete default models.");
+        if(confirm(`Delete '${name}'?`)) {
+            delete App.presets[name];
+            localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
+            this.updatePresetsDropdown();
+        }
+    },
+
+    async open(id) {
+        this.tid = id; this.isGlobal = false;
+        document.getElementById('configModal').style.display = 'flex';
         document.getElementById('cfgTitle').innerText = 'Configure Chart';
+        document.getElementById('cfgLoading').style.display = 'block';
+        document.getElementById('cfgContent').style.display = 'none';
         document.getElementById('cfgGlobalOnly').style.display = 'none';
         document.getElementById('cfgChartOnly').style.display = 'block';
-        document.getElementById('configModal').style.display = 'flex';
-        
-        // Reset fields
-        document.getElementById('cfgRoot').value = cfg.root || '';
-        document.getElementById('cfgExp').value = cfg.expiry || '';
-        document.getElementById('cfgInst').value = cfg.instrument || '';
-        document.getElementById('cfgTF').value = cfg.timeframe || '5min';
+
+        CustomDD.clear('cfgRoot');
+        const res = await fetch(`/api/roots?date=${App.state.date}`);
+        CustomDD.set('cfgRoot', await res.json());
+
+        const cfg = App.state.charts[id].config;
+        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
         document.getElementById('cfgStart').value = cfg.start || '09:15';
         document.getElementById('cfgEnd').value = cfg.end || '15:30';
-        document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
-        
-        // Set mode
         this.currentMode = cfg.chartMode || 'normal';
-        this.updateModeUI();
-        
-        // Load series
-        this.renderSeries(cfg.series || []);
-        
-        // Load presets dropdown
-        this.loadPresetsDropdown();
+        document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
         
-        // Load instruments if root and expiry set
-        if(cfg.root && cfg.expiry) {
-            this.loadInstruments(cfg.root, cfg.expiry);
-        }
+        document.querySelectorAll('#cfgModeToggle .seg-btn').forEach((b, i) => b.classList.toggle('active', (i===0) === (this.currentMode==='normal')));
+        document.getElementById('cfgAdvancedFields').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
+        document.getElementById('lblInst').innerText = this.currentMode === 'normal' ? 'Instrument' : 'Reference Spot/Fut';
+        document.getElementById('advInstHint').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
+
+        this.updatePresetsDropdown();
+        if (cfg.series && cfg.series.length > 0) this.renderSeries(cfg.series);
+        else this.loadPreset(this.currentMode === 'advanced' ? "Advanced - Net Flow" : "Overall Net Flow");
+
+        document.getElementById('cfgRoot').value = cfg.root || '';
+        document.getElementById('cfgExp').value = cfg.expiry || '';
+        document.getElementById('cfgInst').value = cfg.instrument || '';
+
+        if(cfg.root) await this.onRootChange(cfg.expiry, cfg.instrument);
+        document.getElementById('cfgLoading').style.display = 'none';
+        document.getElementById('cfgContent').style.display = 'block';
     },
 
     openDefaults() {
         this.isGlobal = true;
-        this.editingId = null;
+        document.getElementById('configModal').style.display = 'flex';
         document.getElementById('cfgTitle').innerText = 'Settings';
+        document.getElementById('cfgLoading').style.display = 'none';
+        document.getElementById('cfgContent').style.display = 'block';
         document.getElementById('cfgGlobalOnly').style.display = 'block';
         document.getElementById('cfgChartOnly').style.display = 'none';
-        document.getElementById('cfgRefresh').value = App.state.refreshRate;
-        document.getElementById('configModal').style.display = 'flex';
+        document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
+        this.updatePresetsDropdown();
     },
 
-    close() {
-        document.getElementById('configModal').style.display = 'none';
-    },
+    close() { document.getElementById('configModal').style.display = 'none'; },
 
-    setMode(mode) {
-        this.currentMode = mode;
-        this.updateModeUI();
-    },
+    async onRootChange(preExp, preInst) {
+        const root = document.getElementById('cfgRoot').value.toUpperCase();
+        CustomDD.clear('cfgExp');
+        CustomDD.clear('cfgInst');
+        if (!preExp) document.getElementById('cfgExp').value = '';
+        if (!preInst) document.getElementById('cfgInst').value = '';
+        if (!root) return;
 
-    updateModeUI() {
-        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
-        btns.forEach(b => b.classList.remove('active'));
-        btns[this.currentMode === 'normal' ? 0 : 1].classList.add('active');
-        
-        const advFields = document.getElementById('cfgAdvancedFields');
-        const instHint = document.getElementById('advInstHint');
-        const lblInst = document.getElementById('lblInst');
+        const exps = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`).then(r=>r.json());
+        CustomDD.set('cfgExp', exps);
         
-        if(this.currentMode === 'advanced') {
-            advFields.style.display = 'block';
-            instHint.style.display = 'block';
-            lblInst.innerText = 'Reference Instrument (Spot/Future)';
-        } else {
-            advFields.style.display = 'none';
-            instHint.style.display = 'none';
-            lblInst.innerText = 'Instrument';
+        if(preExp && exps.includes(preExp)) { 
+            document.getElementById('cfgExp').value = preExp; 
+            await this.onExpChange(preInst); 
+        } else if (exps.length > 0) {
+            const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r=>r.json());
+            if(auto.current) { 
+                document.getElementById('cfgExp').value = auto.current.expiry; 
+                await this.onExpChange(auto.current.instrument); 
+            }
         }
     },
 
-    async onRootChange() {
-        const root = document.getElementById('cfgRoot').value;
-        if(!root) return;
-        
-        // Load expiries
-        const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`);
-        const exps = await res.json();
-        
-        CustomDD.set('cfgExp', exps);
-        CustomDD.render('cfgExp', '');
-    },
+    async onExpChange(preInst) {
+        const root = document.getElementById('cfgRoot').value.toUpperCase();
+        const exp = document.getElementById('cfgExp').value.toUpperCase();
+        CustomDD.clear('cfgInst');
+        if (!root || !exp) return;
 
-    async onExpChange() {
-        const root = document.getElementById('cfgRoot').value;
-        const expiry = document.getElementById('cfgExp').value;
-        if(!root || !expiry) return;
-        
-        await this.loadInstruments(root, expiry);
+        const data = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`).then(r=>r.json());
+        if (data.spot_fut.length) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Equity');
+        if (data.options.length) CustomDD.set('cfgInst', data.options, 'Options');
+        if(preInst) document.getElementById('cfgInst').value = preInst;
     },
 
-    async loadInstruments(root, expiry) {
-        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${expiry}`);
-        const data = await res.json();
-        
-        CustomDD.data.cfgInst = [];
-        CustomDD.set('cfgInst', data.spot_fut, 'Spot/Futures');
-        CustomDD.set('cfgInst', data.options, 'Options');
-        CustomDD.render('cfgInst', '');
-    },
+    toggleCond(sel) { sel.nextElementSibling.style.display = sel.value === 'none' ? 'none' : 'flex'; },
 
-    renderSeries(series) {
-        const container = document.getElementById('cfgSeries');
-        container.innerHTML = '';
-        
-        series.forEach((s, idx) => {
-            const row = document.createElement('div');
-            row.className = 'series-row';
-            row.innerHTML = `
+    renderSeries(list) {
+        const c = document.getElementById('cfgSeries'); c.innerHTML = '';
+        list.forEach(s => {
+            const r = document.createElement('div'); r.className = 'series-row';
+            const showCond = s.cond && s.cond !== 'none';
+            r.innerHTML = `
                 <div class="series-row-top">
-                    <input type="text" class="s-form" placeholder="Formula (e.g. $CB + $PS)" value="${s.formula || ''}">
-                    <input type="text" class="s-lbl" placeholder="Label" value="${s.label || ''}" style="width:120px;">
-                    <input type="color" class="color-input" value="${s.color1 || '#2f81f7'}">
-                    <button class="tool-btn" onclick="Config.removeSeriesRow(this)" style="color:var(--danger)">✕</button>
+                    <input type="text" value="${s.formula}" class="s-form" placeholder="Formula" style="flex:1;">
+                    <input type="text" value="${s.label}" class="s-lbl" placeholder="Label" style="width:100px;">
+                    <select class="s-axis" style="width:60px;"><option value="left" ${s.axis==='left'?'selected':''}>Left</option><option value="right" ${s.axis==='right'?'selected':''}>Right</option></select>
+                    <button class="tool-btn" style="color:var(--danger); width:32px; background:rgba(218,54,51,0.1);" onclick="this.parentElement.parentElement.remove()">✕</button>
                 </div>
                 <div class="series-row-bottom">
-                    <select class="s-axis">
-                        <option value="left" ${s.axis==='left'?'selected':''}>Left Axis</option>
-                        <option value="right" ${s.axis==='right'?'selected':''}>Right Axis</option>
+                    <input type="color" value="${s.color1}" class="color-input s-color1" title="Color">
+                    <select class="s-cond" style="width:80px;" onchange="Config.toggleCond(this)">
+                        <option value="none" ${!s.cond||s.cond==='none'?'selected':''}>Solid</option>
+                        <option value=">" ${s.cond==='>'?'selected':''}>If &gt;</option>
+                        <option value="<" ${s.cond==='<'?'selected':''}>If &lt;</option>
                     </select>
-                    <div class="s-cond-group">
-                        <select class="s-cond">
-                            <option value="none" ${s.cond==='none'?'selected':''}>No Cond</option>
-                            <option value=">" ${s.cond==='>'?'selected':''}>></option>
-                            <option value="<" ${s.cond==='<'?'selected':''}><</option>
-                        </select>
-                        <input type="text" class="s-thresh" placeholder="Threshold" value="${s.thresh || '0'}" style="width:70px;">
-                        <input type="color" class="color-input" value="${s.color2 || '#ffffff'}" title="False Color">
+                    <div class="s-cond-group" style="display:${showCond?'flex':'none'}; flex-wrap:wrap;">
+                        <input type="number" class="s-thresh" value="${s.thresh||0}" style="width:70px;">
+                        <span style="color:var(--text-secondary); font-size:11px;">True:</span>
+                        <input type="color" value="${s.color1||'#238636'}" class="color-input s-color-true">
+                        <input type="text" class="s-label-true" value="${s.labelTrue||''}" placeholder="Label" style="width:70px;">
+                        <span style="color:var(--text-secondary); font-size:11px;">False:</span>
+                        <input type="color" value="${s.color2||'#da3633'}" class="color-input s-color-false">
+                        <input type="text" class="s-label-false" value="${s.labelFalse||''}" placeholder="Label" style="width:70px;">
                     </div>
-                </div>
-            `;
-            container.appendChild(row);
+                </div>`;
+            c.appendChild(r);
         });
     },
 
     addSeriesRow() {
-        const container = document.getElementById('cfgSeries');
-        const row = document.createElement('div');
-        row.className = 'series-row';
-        row.innerHTML = `
+        const r = document.createElement('div'); r.className = 'series-row';
+        r.innerHTML = `
             <div class="series-row-top">
-                <input type="text" class="s-form" placeholder="Formula (e.g. $CB + $PS)">
-                <input type="text" class="s-lbl" placeholder="Label" style="width:120px;">
-                <input type="color" class="color-input" value="#2f81f7">
-                <button class="tool-btn" onclick="Config.removeSeriesRow(this)" style="color:var(--danger)">✕</button>
+                <input type="text" value="$P" class="s-form" placeholder="Formula" style="flex:1;">
+                <input type="text" value="New" class="s-lbl" placeholder="Label" style="width:100px;">
+                <select class="s-axis" style="width:60px;"><option value="left">Left</option><option value="right">Right</option></select>
+                <button class="tool-btn" style="color:var(--danger); width:32px; background:rgba(218,54,51,0.1);" onclick="this.parentElement.parentElement.remove()">✕</button>
             </div>
             <div class="series-row-bottom">
-                <select class="s-axis">
-                    <option value="left">Left Axis</option>
-                    <option value="right" selected>Right Axis</option>
+                <input type="color" value="#2f81f7" class="color-input s-color1">
+                <select class="s-cond" style="width:80px;" onchange="Config.toggleCond(this)">
+                    <option value="none" selected>Solid</option>
+                    <option value=">">If &gt;</option>
+                    <option value="<">If &lt;</option>
                 </select>
-                <div class="s-cond-group">
-                    <select class="s-cond">
-                        <option value="none">No Cond</option>
-                        <option value=">">></option>
-                        <option value="<"><</option>
-                    </select>
-                    <input type="text" class="s-thresh" placeholder="Threshold" value="0" style="width:70px;">
-                    <input type="color" class="color-input" value="#ffffff" title="False Color">
+                <div class="s-cond-group" style="display:none; flex-wrap:wrap;">
+                    <input type="number" class="s-thresh" value="0" style="width:70px;">
+                    <span style="color:var(--text-secondary); font-size:11px;">True:</span>
+                    <input type="color" value="#238636" class="color-input s-color-true">
+                    <input type="text" class="s-label-true" value="" placeholder="Label" style="width:70px;">
+                    <span style="color:var(--text-secondary); font-size:11px;">False:</span>
+                    <input type="color" value="#da3633" class="color-input s-color-false">
+                    <input type="text" class="s-label-false" value="" placeholder="Label" style="width:70px;">
                 </div>
-            </div>
-        `;
-        container.appendChild(row);
-    },
-
-    removeSeriesRow(btn) {
-        btn.closest('.series-row').remove();
-    },
-
-    loadPresetsDropdown() {
-        const sel = document.getElementById('cfgPresetsDropdown');
-        sel.innerHTML = '<option value="">-- Select Preset --</option>' + 
-            Object.keys(App.presets).map(p => `<option value="${p}">${p}</option>`).join('');
-    },
-
-    loadPreset() {
-        const name = document.getElementById('cfgPresetsDropdown').value;
-        if(!name || !App.presets[name]) return;
-        this.renderSeries(App.presets[name]);
-    },
-
-    savePreset() {
-        const name = prompt('Enter preset name:');
-        if(!name) return;
-        
-        const series = this.getSeriesFromDOM();
-        App.presets[name] = series;
-        
-        // Save to localStorage
-        localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
-        this.loadPresetsDropdown();
-        alert('Preset saved!');
+            </div>`;
+        document.getElementById('cfgSeries').appendChild(r);
     },
 
-    deletePreset() {
-        const name = document.getElementById('cfgPresetsDropdown').value;
-        if(!name || !App.presets[name]) return;
-        if(!confirm(`Delete preset "${name}"?`)) return;
-        
-        delete App.presets[name];
-        localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
-        this.loadPresetsDropdown();
-    },
-
-    getSeriesFromDOM() {
-        const rows = document.querySelectorAll('#cfgSeries .series-row');
-        return Array.from(rows).map(row => ({
-            formula: row.querySelector('.s-form').value,
-            label: row.querySelector('.s-lbl').value,
-            color1: row.querySelector('.color-input').value,
-            axis: row.querySelector('.s-axis').value,
-            cond: row.querySelector('.s-cond').value,
-            thresh: row.querySelector('.s-thresh').value,
-            color2: row.querySelectorAll('.color-input')[1]?.value || '#ffffff'
+    extractSeriesFromDOM() {
+        return Array.from(document.querySelectorAll('#cfgSeries .series-row')).map(r => ({
+            formula: r.querySelector('.s-form').value,
+            label: r.querySelector('.s-lbl').value,
+            axis: r.querySelector('.s-axis').value,
+            color1: r.querySelector('.s-color-true') ? r.querySelector('.s-color-true').value : r.querySelector('.s-color1').value,
+            cond: r.querySelector('.s-cond').value,
+            thresh: r.querySelector('.s-thresh') ? r.querySelector('.s-thresh').value : '0',
+            color2: r.querySelector('.s-color-false') ? r.querySelector('.s-color-false').value : '#ffffff',
+            labelTrue: r.querySelector('.s-label-true') ? r.querySelector('.s-label-true').value : '',
+            labelFalse: r.querySelector('.s-label-false') ? r.querySelector('.s-label-false').value : ''
         }));
     },
 
     saveChartConfig() {
-        if(this.isGlobal) {
+        if(this.isGlobal) { 
             App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
             App.save();
-            this.close();
-            return;
+        } else {
+            const root = document.getElementById('cfgRoot').value.toUpperCase();
+            const exp = document.getElementById('cfgExp').value.toUpperCase();
+            const inst = document.getElementById('cfgInst').value.toUpperCase();
+            if(!root || !exp) return alert("Incomplete Details.");
+            App.state.charts[this.tid].config = {
+                chartMode: this.currentMode, atmRange: parseInt(document.getElementById('cfgAtmRange').value) || 5,
+                root, expiry: exp, instrument: inst,
+                timeframe: document.getElementById('cfgTF').value,
+                start: document.getElementById('cfgStart').value, end: document.getElementById('cfgEnd').value,
+                series: this.extractSeriesFromDOM()
+            };
+            App.save();
+            App.renderGrid();
+            ChartLogic.plot(this.tid);
         }
-
-        const cfg = {
-            root: document.getElementById('cfgRoot').value.toUpperCase(),
-            expiry: document.getElementById('cfgExp').value,
-            instrument: document.getElementById('cfgInst').value,
-            timeframe: document.getElementById('cfgTF').value,
-            start: document.getElementById('cfgStart').value,
-            end: document.getElementById('cfgEnd').value,
-            chartMode: this.currentMode,
-            atmRange: parseInt(document.getElementById('cfgAtmRange').value) || 5,
-            series: this.getSeriesFromDOM()
-        };
-
-        App.state.charts[this.editingId].config = cfg;
-        App.save();
         this.close();
-        App.renderGrid();
     }
 };
 
-// Info icon tooltip
-document.getElementById('infoIcon').addEventListener('click', () => {
-    alert(`Formula Variables:
-$P = Price
-$V = Volume  
-$OI = Open Interest
-$B = Buy Qty
-$S = Sell Qty
-$CB = Call Buy
-$CS = Call Sell
-$PB = Put Buy
-$PS = Put Sell
-
-Example: $CB + $PS - ($PB + $CS)`);
-});
+function str(val) { return val != null ? val.toString() : "0"; }
 
 window.onload = () => App.init();
 </script>
@@ -1572,4 +1616,4 @@ window.onload = () => App.init();
 """
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    uvicorn.run(app, host="0.0.0.0", port=7860)