Update app.py

app.py

@@ -239,7 +239,8 @@ async def fetch_series(
 
     # =========================================================
     # CHUNKING LOGIC: Bypass Supabase DB/Timeout Limits
-    # Fetches 2-hour chunks concurrently!
+    # 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()
@@ -251,15 +252,27 @@ async def fetch_series(
 
     tasks = []
     curr = t_start_dt
-    chunk_hours = 2  # Safe size for Postgres processing limit
+    
+    # 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:
-        nxt = curr + timedelta(hours=chunk_hours) - timedelta(seconds=1)
+        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
         
         tasks.append(fetch_chunk(curr, nxt))
-        curr += timedelta(hours=chunk_hours)
+        
+        if mode == "advanced":
+            curr += timedelta(minutes=30)
+        else:
+            curr += timedelta(hours=chunk_hours)
         
     # Execute all chunks in parallel
     chunk_results = await asyncio.gather(*tasks)
@@ -1008,8 +1021,8 @@ const App = {
                     <span>${isCfg ? cfg.root : 'New Chart'}</span>
                     ${isCfg ? `${advancedLabel} <span class="card-meta">${cfg.expiry}</span>` : ''}
                 </div>
-                <div class="card-tools" style="display: flex; gap: 4px;">
-                    <button class="tool-btn info-btn" id="infoBtn-${id}" onclick="InspectionModal.open('${id}')" title="Calculation Breakdown" style="display: ${isCfg ? 'flex' : 'none'};">i</button>
+                <div class="card-tools">
+                    <button class="tool-btn info-btn" id="info-btn-${id}" onclick="ChartLogic.showBreakdown('${id}')" style="display: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>
@@ -1070,69 +1083,6 @@ const App = {
     }
 };
 
-// Inspection Modal for Calculation Breakdown
-const InspectionModal = {
-    chartData: null,
-    seriesConfig: null,
-    
-    open(chartId) {
-        const chart = App.state.charts[chartId];
-        if(!chart || !chart.chartData) return;
-        
-        this.chartData = chart.chartData;
-        this.seriesConfig = chart.config.series;
-        
-        // Get the formula for Net Flow if exists
-        const netFlowSeries = this.seriesConfig.find(s => s.formula.includes('CB') || s.formula.includes('PS'));
-        document.getElementById('infoFormula').innerText = netFlowSeries ? netFlowSeries.formula : 'N/A';
-        
-        this.renderTable();
-        document.getElementById('infoModal').style.display = 'flex';
-    },
-    
-    renderTable() {
-        const tbody = document.getElementById('infoTableBody');
-        const data = this.chartData;
-        
-        if(!data || !data.labels) {
-            tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;">No data available</td></tr>';
-            return;
-        }
-        
-        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;
-            const isPositive = netFlow >= 0;
-            
-            html += `
-                <tr>
-                    <td>${data.labels[i]}</td>
-                    <td>${formatNumber(cb)}</td>
-                    <td>${formatNumber(cs)}</td>
-                    <td>${formatNumber(pb)}</td>
-                    <td>${formatNumber(ps)}</td>
-                    <td>${formatNumber(bullSide)}</td>
-                    <td>${formatNumber(bearSide)}</td>
-                    <td class="${isPositive ? 'positive' : 'negative'}">${formatNumber(netFlow)} (${isPositive ? 'BULLISH' : 'BEARISH'})</td>
-                </tr>
-            `;
-        }
-        tbody.innerHTML = html;
-    }
-};
-
-function formatNumber(num) {
-    if(num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
-    if(num >= 1000) return (num / 1000).toFixed(1) + 'K';
-    return num.toFixed(0);
-}
-
 const ChartLogic = {
     async plot(id, isUpdate=false) {
         const chart = App.state.charts[id];
@@ -1171,50 +1121,39 @@ const ChartLogic = {
                 if(dot) dot.classList.remove('retry');
                 return;
             }
+
+            // Store data for breakdown modal
+            chart.chartData = data;
             
-            // Store chart data for inspection
-            App.state.charts[id].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';
+            }
 
             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'}`;
 
-            // Show/hide info button
-            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;
-                    const V = data.V[i] || 0;
-                    const OI = data.OI[i] || 0;
-                    const B = data.B[i] || 0;
-                    const S = data.S[i] || 0;
-                    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 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;
                     
+                    // CRITICAL FIX: Use String() not str() - JavaScript doesn't have str()
                     let f = s.formula
-                        .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));
+                        .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));
                         
                     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',
-                    labelTrue: s.labelTrue || '',
-                    labelFalse: s.labelFalse || ''
+                    label: s.label, data: vals,
+                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1'
                 };
 
                 if(s.cond && s.cond !== 'none') {
@@ -1232,10 +1171,6 @@ const ChartLogic = {
                     };
                     dataset.borderColor = cTrue; 
                     dataset.backgroundColor = cTrue;
-                    dataset.threshold = thresh;
-                    dataset.condition = s.cond;
-                    dataset.colorTrue = cTrue;
-                    dataset.colorFalse = cFalse;
 
                     const hoverColorCallback = (ctx) => {
                         let v = ctx.raw;
@@ -1250,411 +1185,385 @@ const ChartLogic = {
                 } else {
                     dataset.borderColor = s.color1;
                     dataset.backgroundColor = s.color1;
-                    dataset.pointHoverBackgroundColor = s.color1;
-                    dataset.pointHoverBorderColor = s.color1;
                 }
-                
                 return dataset;
             });
 
-            this.render(id, data.labels, datasets, cfg.series);
-
-        } catch(e) { console.error(e); }
-    },
-
-    render(id, labels, datasets, seriesConfig) {
-        const ctx = document.getElementById(`canvas-${id}`);
-        if(!ctx) return;
-        
-        if(App.state.charts[id].instance && App.state.charts[id].instance.ctx.canvas !== ctx) {
-            App.state.charts[id].instance.destroy();
-            App.state.charts[id].instance = null;
-        }
-
-        if(App.state.charts[id].instance) {
-            App.state.charts[id].instance.data.labels = labels;
-            App.state.charts[id].instance.data.datasets = datasets;
-            App.state.charts[id].instance.update('none');
-        } else {
-            const hasRight = datasets.some(d => d.yAxisID === 'y1');
-            App.state.charts[id].instance = new Chart(ctx.getContext('2d'), {
+            const ctx = document.getElementById(`canvas-${id}`).getContext('2d');
+            
+            if(chart.instance) chart.instance.destroy();
+            
+            chart.instance = new Chart(ctx, {
                 type: 'line',
-                data: { labels, datasets },
+                data: { labels: data.labels, datasets: datasets },
                 options: {
-                    responsive: true, maintainAspectRatio: false, animation: false,
+                    responsive: true,
+                    maintainAspectRatio: false,
                     interaction: { mode: 'index', intersect: false },
-                    plugins: { 
-                        legend: { display: false },
-                        tooltip: { 
-                            backgroundColor: 'rgba(22, 27, 34, 0.95)', 
-                            titleColor:'#e6edf3', 
-                            bodyColor:'#e6edf3', 
-                            borderColor: '#30363d', 
+                    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,
-                            callbacks: {
-                                label: function(context) {
-                                    let s = seriesConfig[context.datasetIndex];
-                                    let v = context.parsed.y;
-                                    let label = s.label;
-                                    let color = s.color1;
-                                    
-                                    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);
-                                            color = v > thresh ? s.color1 : s.color2;
-                                        }
-                                        if(s.cond === '<') {
-                                            label = v < thresh ? (s.labelTrue || s.label) : (s.labelFalse || s.label);
-                                            color = v < thresh ? s.color1 : s.color2;
-                                        }
-                                    }
-                                    
-                                    return `${label}: ${formatNumber(v)}`;
-                                },
-                                labelColor: function(context) {
-                                    let s = seriesConfig[context.datasetIndex];
-                                    let v = context.parsed.y;
-                                    let c = s.color1;
-                                    
-                                    if(s.cond && s.cond !== 'none') {
-                                        let thresh = parseFloat(s.thresh) || 0;
-                                        if(s.cond === '>') c = v > thresh ? s.color1 : (s.color2 || s.color1);
-                                        if(s.cond === '<') c = v < thresh ? s.color1 : (s.color2 || s.color1);
-                                    }
-                                    return { borderColor: c, backgroundColor: c };
-                                }
-                            }
+                            padding: 10,
+                            titleFont: { family: 'JetBrains Mono', size: 12 },
+                            bodyFont: { family: 'Inter', size: 11 }
                         }
                     },
                     scales: {
-                        x: { grid:{color:'#30363d', tickLength:0}, ticks:{color:'#8b949e', maxTicksLimit:8, font:{size:10}} },
-                        y: { type:'linear', display:true, position:'left', grid:{color:'#30363d'}, ticks:{color:'#8b949e', font:{size:10}} },
-                        y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#8b949e', font:{size:10}} }
+                        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');
         }
-    }
-};
+    },
 
-const Config = {
-    tid: null, isGlobal: false, currentMode: 'normal',
-    
-    setMode(mode) {
-        this.currentMode = mode;
-        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
-        btns[0].classList.toggle('active', mode === 'normal');
-        btns[1].classList.toggle('active', mode === 'advanced');
+    showBreakdown(id) {
+        const chart = App.state.charts[id];
+        if(!chart || !chart.chartData || !chart.chartData.breakdown) return;
         
-        document.getElementById('cfgAdvancedFields').style.display = mode === 'advanced' ? 'block' : 'none';
-        document.getElementById('lblInst').innerText = mode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (For ATM Calc)';
-        document.getElementById('advInstHint').style.display = mode === 'advanced' ? 'block' : 'none';
-
-        this.updateInfoTooltip(mode);
-        this.updatePresetsDropdown();
+        const data = chart.chartData;
+        const cfg = chart.config;
         
-        // Load appropriate default preset
-        if (mode === 'advanced') {
-            this.loadPreset("Advanced - Net Flow");
-        } else {
-            this.loadPreset("Overall Net Flow");
-        }
-    },
-
-    updateInfoTooltip(mode) {
-        const icon = document.getElementById('infoIcon');
-        if (!icon) return;
-        if (mode === 'advanced') {
-            icon.title = "Standard Variables:\\n$P = Spot Price\\n$V = Volume\\n$OI = Open Interest\\n\\nAdvanced Mode Only:\\n$CB = Call Buy (Sum in range)\\n$CS = Call Sell (Sum in range)\\n$PB = Put Buy (Sum in range)\\n$PS = Put Sell (Sum in range)";
-            icon.style.color = "var(--accent)";
-            icon.style.borderColor = "var(--accent)";
-        } else {
-            icon.title = "Standard Variables:\\n$P = Price\\n$V = Volume\\n$OI = Open Interest\\n$B = Buy Qty (Futures/Spot)\\n$S = Sell Qty (Futures/Spot)\\n\\nOptions Only:\\n$CB = Call Buy\\n$CS = Call Sell\\n$PB = Put Buy\\n$PS = Put Sell";
-            icon.style.color = "var(--text-secondary)";
-            icon.style.borderColor = "var(--border)";
-        }
-    },
-
-    updatePresetsDropdown() {
-        const sel = document.getElementById('cfgPresetsDropdown');
-        const mode = this.currentMode;
+        // 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;
         
-        // Filter presets based on mode
-        let presetNames;
-        if (mode === 'advanced') {
-            presetNames = Object.keys(App.presets).filter(k => k.startsWith('Advanced'));
-        } else {
-            presetNames = Object.keys(App.presets).filter(k => !k.startsWith('Advanced'));
-        }
+        const tbody = document.getElementById('infoTableBody');
+        tbody.innerHTML = '';
         
-        sel.innerHTML = presetNames.map(k => `<option value="${k}">${k}</option>`).join('');
-    },
-
-    loadPreset(presetName = null) {
-        const name = presetName || document.getElementById('cfgPresetsDropdown').value;
-        if(name && App.presets[name]) {
-            document.getElementById('cfgPresetsDropdown').value = name;
-            this.renderSeries(App.presets[name]);
-        }
-    },
-
-    savePreset() {
-        const name = prompt("Enter a name for this Quick Configuration:", "Custom Model");
-        if(!name) return;
-        const series = this.extractSeriesFromDOM();
-        App.presets[name] = series;
-        localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
-        this.updatePresetsDropdown();
-        document.getElementById('cfgPresetsDropdown').value = name;
-    },
+        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);
+        });
+        
+        document.getElementById('infoModal').style.display = 'flex';
+    }
+};
 
-    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 model '${name}'?`)) {
-            delete App.presets[name];
-            localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
-            this.updatePresetsDropdown();
-            this.loadPreset();
-        }
-    },
+const Config = {
+    editingId: null,
+    isGlobal: false,
+    currentMode: 'normal',
 
-    async open(id) {
-        this.tid = id; this.isGlobal = false;
-        document.getElementById('configModal').style.display = 'flex';
+    open(id) {
+        this.editingId = id;
+        this.isGlobal = false;
+        const cfg = App.state.charts[id].config;
+        
         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';
-
-        this.updatePresetsDropdown();
-
-        CustomDD.clear('cfgRoot');
-        const res = await fetch(`/api/roots?date=${App.state.date}`);
-        const roots = await res.json();
-        CustomDD.set('cfgRoot', roots);
-
-        const cfg = App.state.charts[id].config;
-        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
+        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';
         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';
-        document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
+        this.updateModeUI();
         
-        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
-        btns[0].classList.toggle('active', this.currentMode === 'normal');
-        btns[1].classList.toggle('active', this.currentMode === 'advanced');
+        // Load series
+        this.renderSeries(cfg.series || []);
         
-        document.getElementById('cfgAdvancedFields').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
-        document.getElementById('lblInst').innerText = this.currentMode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (For ATM Calc)';
-        document.getElementById('advInstHint').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
-
-        this.updateInfoTooltip(this.currentMode);
-        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");
+        // Load presets dropdown
+        this.loadPresetsDropdown();
+        
+        // Load instruments if root and expiry set
+        if(cfg.root && cfg.expiry) {
+            this.loadInstruments(cfg.root, cfg.expiry);
         }
-
-        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;
-        document.getElementById('configModal').style.display = 'flex';
-        document.getElementById('cfgTitle').innerText = 'Global Settings';
-        document.getElementById('cfgLoading').style.display = 'none';
-        document.getElementById('cfgContent').style.display = 'block';
-        
+        this.editingId = null;
+        document.getElementById('cfgTitle').innerText = 'Settings';
         document.getElementById('cfgGlobalOnly').style.display = 'block';
         document.getElementById('cfgChartOnly').style.display = 'none';
-        document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
+        document.getElementById('cfgRefresh').value = App.state.refreshRate;
+        document.getElementById('configModal').style.display = 'flex';
+    },
 
-        this.updatePresetsDropdown();
-        this.loadPreset("Overall Net Flow");
+    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');
+    updateModeUI() {
+        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
+        btns.forEach(b => b.classList.remove('active'));
+        btns[this.currentMode === 'normal' ? 0 : 1].classList.add('active');
         
-        if (!preExp) document.getElementById('cfgExp').value = '';
-        if (!preInst) document.getElementById('cfgInst').value = '';
-
-        if (!root) return;
+        const advFields = document.getElementById('cfgAdvancedFields');
+        const instHint = document.getElementById('advInstHint');
+        const lblInst = document.getElementById('lblInst');
+        
+        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';
+        }
+    },
 
+    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);
         
-        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); 
-            }
-        }
+        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');
+    async onExpChange() {
+        const root = document.getElementById('cfgRoot').value;
+        const expiry = document.getElementById('cfgExp').value;
+        if(!root || !expiry) return;
         
-        if (!root || !exp) return;
+        await this.loadInstruments(root, expiry);
+    },
 
-        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
+    async loadInstruments(root, expiry) {
+        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${expiry}`);
         const data = await res.json();
         
-        if (data.spot_fut.length > 0) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Equity');
-        if (data.options.length > 0) CustomDD.set('cfgInst', data.options, 'Options');
-        
-        if(preInst) document.getElementById('cfgInst').value = preInst;
+        CustomDD.data.cfgInst = [];
+        CustomDD.set('cfgInst', data.spot_fut, 'Spot/Futures');
+        CustomDD.set('cfgInst', data.options, 'Options');
+        CustomDD.render('cfgInst', '');
     },
 
-    toggleCond(sel) {
-        const group = sel.nextElementSibling;
-        group.style.display = sel.value === 'none' ? 'none' : 'flex';
-    },
-
-    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 = `
+    renderSeries(series) {
+        const container = document.getElementById('cfgSeries');
+        container.innerHTML = '';
+        
+        series.forEach((s, idx) => {
+            const row = document.createElement('div');
+            row.className = 'series-row';
+            row.innerHTML = `
                 <div class="series-row-top">
-                    <input type="text" value="${s.formula}" class="s-form" placeholder="Formula (e.g. $P)" 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>
+                    <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>
                 </div>
                 <div class="series-row-bottom">
-                    <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==='none'||!s.cond?'selected':''}>Solid</option>
-                        <option value=">" ${s.cond==='>'?'selected':''}>If &gt;</option>
-                        <option value="<" ${s.cond==='<'?'selected':''}>If &lt;</option>
+                    <select class="s-axis">
+                        <option value="left" ${s.axis==='left'?'selected':''}>Left Axis</option>
+                        <option value="right" ${s.axis==='right'?'selected':''}>Right Axis</option>
                     </select>
-                    <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; font-weight:600;">True:</span>
-                        <input type="color" value="${s.color1||'#238636'}" class="color-input s-color-true" title="Color True">
-                        <input type="text" class="s-label-true" value="${s.labelTrue||''}" placeholder="Label" style="width:80px;">
-                        <span style="color:var(--text-secondary); font-size:11px; font-weight:600;">False:</span>
-                        <input type="color" value="${s.color2||'#da3633'}" class="color-input s-color-false" title="Color False">
-                        <input type="text" class="s-label-false" value="${s.labelFalse||''}" placeholder="Label" style="width:80px;">
+                    <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>
                 </div>
             `;
-            c.appendChild(r);
+            container.appendChild(row);
         });
     },
 
     addSeriesRow() {
-        const r = document.createElement('div'); r.className = 'series-row';
-        r.innerHTML = `
+        const container = document.getElementById('cfgSeries');
+        const row = document.createElement('div');
+        row.className = 'series-row';
+        row.innerHTML = `
             <div class="series-row-top">
-                <input type="text" value="$P" class="s-form" placeholder="Formula (e.g. $P)" 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>
+                <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>
             </div>
             <div class="series-row-bottom">
-                <input type="color" value="#2f81f7" class="color-input s-color1" title="Color">
-                <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 class="s-axis">
+                    <option value="left">Left Axis</option>
+                    <option value="right" selected>Right Axis</option>
                 </select>
-                <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; font-weight:600;">True:</span>
-                    <input type="color" value="#238636" class="color-input s-color-true" title="Color True">
-                    <input type="text" class="s-label-true" value="" placeholder="Label" style="width:80px;">
-                    <span style="color:var(--text-secondary); font-size:11px; font-weight:600;">False:</span>
-                    <input type="color" value="#da3633" class="color-input s-color-false" title="Color False">
-                    <input type="text" class="s-label-false" value="" placeholder="Label" style="width:80px;">
+                <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>
             </div>
         `;
-        document.getElementById('cfgSeries').appendChild(r);
+        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!');
+    },
+
+    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();
     },
 
-    extractSeriesFromDOM() {
+    getSeriesFromDOM() {
         const rows = document.querySelectorAll('#cfgSeries .series-row');
-        return Array.from(rows).map(r => {
-            const cond = r.querySelector('.s-cond').value;
-            return {
-                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: cond,
-                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 : ''
-            };
-        });
+        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'
+        }));
     },
 
     saveChartConfig() {
-        const series = this.extractSeriesFromDOM();
-
-        if(this.isGlobal) { 
+        if(this.isGlobal) {
             App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
             App.save();
-        } 
-        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. Please type or select valid options.");
-
-            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
-            };
-            App.save();
-            App.renderGrid();
-            ChartLogic.plot(this.tid);
+            this.close();
+            return;
         }
+
+        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();
     }
 };
 
-// Helper inside JS for string replacement in formulas
-function str(val) {
-    return val !== null && val !== undefined ? val.toString() : "0";
-}
+// 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)`);
+});
 
 window.onload = () => App.init();
 </script>
@@ -1663,4 +1572,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)