Update app.py

app.py

@@ -367,8 +367,11 @@ HTML_TEMPLATE = """
         
         /* Aesthetics: Big Number, No BG, Small label below */
         .aggr-val { font-size: 20px; font-family: 'JetBrains Mono'; font-weight: 800; line-height: 1; margin-bottom: 2px; }
-        .aggr-lbl { font-size: 9px; font-weight: 700; color: #aaa; background: transparent; padding: 0; border-radius: 0; margin-top: 2px; }
+        .aggr-lbl { font-size: 9px; font-weight: 700; color: #aaa; background: transparent; padding: 0; border-radius: 0; margin-top: 2px; display:flex; align-items:center; gap:3px; }
         
+        .info-bubble { width:12px; height:12px; background:#eee; color:#666; border-radius:50%; font-size:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Inter'; font-weight:800; }
+        .info-bubble:hover { background:var(--accent); color:white; }
+
         /* Modals */
         .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
         .modal-box { background: #fff; width: 420px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 25px; display:flex; flex-direction:column; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@@ -385,6 +388,12 @@ HTML_TEMPLATE = """
         .modal-action { background:var(--accent); color:white; border:none; padding:10px 20px; border-radius:6px; font-weight:bold; cursor:pointer; width:100%; margin-top:20px; }
         .modal-action.sec { background:#eee; color:#333; margin-top:10px; }
 
+        /* INFO TABLE */
+        .info-table { width:100%; font-family:'JetBrains Mono'; font-size:10px; border-collapse: collapse; margin-top:10px; }
+        .info-table th { text-align:left; color:#888; border-bottom:1px solid #eee; padding:5px; }
+        .info-table td { padding:5px; border-bottom:1px solid #f9f9f9; color:#333; }
+        .info-row-res { background: #f0f7ff; font-weight:800; }
+
         .preset-pill { display:inline-block; padding:4px 8px; background:#f0f0f0; border-radius:4px; font-size:10px; font-weight:700; margin-right:5px; cursor:pointer; color:#555; border:1px solid transparent; }
         .preset-pill:hover { border-color:#aaa; background:#e0e0e0; }
         
@@ -439,6 +448,26 @@ HTML_TEMPLATE = """
     </div>
 </div>
 
+<!-- INFO BREAKDOWN MODAL -->
+<div class="modal" id="infoModal">
+    <div class="modal-box" style="width: 500px; max-width:95%;">
+        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
+            <span>CALCULATION BREAKDOWN</span>
+            <span style="cursor:pointer; color:#999;" onclick="closeModal('infoModal')">✕</span>
+        </div>
+        <div style="margin-top:15px; font-size:12px;">
+            <div><strong>LIVE SPOT:</strong> <span id="infoSpot" style="font-family:'JetBrains Mono'; color:var(--accent);">0.00</span></div>
+            <div style="margin-top:5px;"><strong>FORMULA:</strong> <span id="infoForm" style="font-family:'JetBrains Mono'; background:#f4f4f4; padding:2px 6px; border-radius:4px;"></span></div>
+        </div>
+        <div style="overflow-y:auto; max-height:400px; margin-top:10px;">
+            <table class="info-table" id="infoTable">
+                <!-- Dynamic Content -->
+            </table>
+        </div>
+        <div style="margin-top:10px; font-size:10px; color:#888; text-align:center;">* Uses Raw Integer Values for Accuracy</div>
+    </div>
+</div>
+
 <!-- CONFIG MODAL (Left/Right Columns) -->
 <div class="modal" id="confModal">
     <div class="modal-box">
@@ -584,6 +613,9 @@ HTML_TEMPLATE = """
     let IS_POLLING = false;
     let SEARCH_TIMER = null;
     let ATM_STRIKE = 0;
+    
+    // DATA STORE FOR INFO MODAL
+    let LATEST_ROW_DATA = {};
 
 // Default Configurations
     const DEFAULTS = {
@@ -640,11 +672,13 @@ HTML_TEMPLATE = """
         }
 
         con.innerHTML = CONFIG.side.map((item, idx) => {
-            // Create grid boxes for ranges. Flex handles the 50/50, 33/33 automatically.
             const boxes = item.ranges.map((r, rIdx) => `
                 <div class="aggr-item">
                     <span class="aggr-val" id="sv-${idx}-${rIdx}">0</span>
-                    <span class="aggr-lbl">ATM ±${r}</span>
+                    <span class="aggr-lbl">
+                        ATM ±${r} 
+                        <span class="info-bubble" onclick="showInfo(${idx}, ${rIdx})">i</span>
+                    </span>
                 </div>
             `).join('');
 
@@ -823,6 +857,68 @@ HTML_TEMPLATE = """
             return 0;
         }
     }
+    
+    // ===================================
+    // INFO MODAL LOGIC
+    // ===================================
+    function showInfo(cardIdx, rangeIdx) {
+        if(!CONFIG.side[cardIdx]) return;
+        
+        const cfg = CONFIG.side[cardIdx];
+        const range = cfg.ranges[rangeIdx];
+        const formula = cfg.formula;
+        
+        document.getElementById('infoSpot').innerText = SPOT_PRICE.toFixed(2);
+        document.getElementById('infoForm').innerText = formula;
+        
+        // RE-RUN SPLIT LOGIC
+        const kList = Object.keys(LATEST_ROW_DATA).map(parseFloat).sort((a,b)=>a-b);
+        const lowers = kList.filter(k => k < SPOT_PRICE);
+        const uppers = kList.filter(k => k >= SPOT_PRICE); // Exact match goes to upper/call side
+        
+        const selLow = lowers.slice(-range);
+        const selHigh = uppers.slice(0, range);
+        
+        const allSel = [...selLow, ...selHigh].sort((a,b)=>a-b);
+        let grandTotal = 0;
+        
+        const table = document.getElementById('infoTable');
+        
+        // Headers based on formula vars? No, just show standard vars
+        let hHTML = `<tr>
+            <th style="width:50px;">STRIKE</th>
+            <th>CS</th><th>CB</th><th>PS</th><th>PB</th><th>CALC</th>
+        </tr>`;
+        
+        let rowsHTML = allSel.map(k => {
+            const d = LATEST_ROW_DATA[k] || {};
+            const val = evaluateFormula(formula, d);
+            grandTotal += val;
+            
+            // Styling for spot split
+            const borderStyle = (k >= SPOT_PRICE && selLow.includes(k- (kList[1]-kList[0]))) ? "border-top:2px solid var(--accent);" : "";
+            
+            return `
+            <tr style="${borderStyle}">
+                <td style="font-weight:bold;">${k}</td>
+                <td>${d.CS || 0}</td>
+                <td>${d.CB || 0}</td>
+                <td>${d.PS || 0}</td>
+                <td>${d.PB || 0}</td>
+                <td style="font-weight:bold; color:${val>=0?'var(--green)':'var(--red)'}">${val}</td>
+            </tr>`;
+        }).join('');
+        
+        // Footer
+        rowsHTML += `<tr class="info-row-res">
+            <td colspan="5" style="text-align:right;">TOTAL</td>
+            <td style="color:${grandTotal>=0?'var(--green)':'var(--red)'}">${grandTotal}</td>
+        </tr>`;
+        
+        table.innerHTML = hHTML + rowsHTML;
+        
+        document.getElementById('infoModal').style.display = 'flex';
+    }
 
     // ===================================
     // APP LOGIC
@@ -1111,6 +1207,9 @@ HTML_TEMPLATE = """
                 rowData[item.k].PV = d.v;
             }
         }
+        
+        // STORE GLOBAL FOR INFO MODAL
+        LATEST_ROW_DATA = rowData;
 
         // --- RENDER CHAIN (Main Columns) ---
         let maxL = 0, maxR = 0;
@@ -1170,35 +1269,38 @@ HTML_TEMPLATE = """
             }
         }
 
-        // --- SIDEBAR DYNAMIC AGGREGATION ---
-        if(ATM_STRIKE > 0 && CONFIG.side && CONFIG.side.length > 0) {
+        // --- SIDEBAR DYNAMIC AGGREGATION (SYMMETRIC OTM LOGIC) ---
+        if(SPOT_PRICE > 0 && CONFIG.side && CONFIG.side.length > 0) {
             const kList = Object.keys(rowData).map(parseFloat).sort((a,b)=>a-b);
-            const atmIdx = kList.indexOf(ATM_STRIKE);
             
-            if(atmIdx !== -1) {
-                // Loop through each configured Card
-                CONFIG.side.forEach((item, idx) => {
-                    // Loop through each Range in the card
-                    item.ranges.forEach((rng, rIdx) => {
-                        const el = document.getElementById(`sv-${idx}-${rIdx}`);
-                        if(el) {
-                            let total = 0;
-                            const start = Math.max(0, atmIdx - rng);
-                            const end = Math.min(kList.length, atmIdx + rng + 1);
-                            
-                            for(let i=start; i<end; i++) {
-                                const k = kList[i];
-                                if(rowData[k]) {
-                                    total += evaluateFormula(item.formula, rowData[k]);
-                                }
+            // SPLIT LIST BASED ON EXACT SPOT PRICE
+            const lowers = kList.filter(k => k < SPOT_PRICE);
+            const uppers = kList.filter(k => k >= SPOT_PRICE); // Include exact match in upper/call bucket
+
+            CONFIG.side.forEach((item, idx) => {
+                item.ranges.forEach((rng, rIdx) => {
+                    const el = document.getElementById(`sv-${idx}-${rIdx}`);
+                    if(el) {
+                        // Take 'rng' amount from bottom of lowers (Closest below spot)
+                        const selLow = lowers.slice(-rng);
+                        // Take 'rng' amount from top of uppers (Closest above spot)
+                        const selHigh = uppers.slice(0, rng);
+                        
+                        // Combine logic
+                        const targetStrikes = [...selLow, ...selHigh];
+                        
+                        let total = 0;
+                        for(const k of targetStrikes) {
+                            if(rowData[k]) {
+                                total += evaluateFormula(item.formula, rowData[k]);
                             }
-
-                            el.innerText = (total > 0 ? "+" : "") + fmt(total);
-                            el.style.color = total >= 0 ? 'var(--green)' : 'var(--red)';
                         }
-                    });
+
+                        el.innerText = (total > 0 ? "+" : "") + fmt(total);
+                        el.style.color = total >= 0 ? 'var(--green)' : 'var(--red)';
+                    }
                 });
-            }
+            });
         }
     }