Update app.py

app.py

@@ -14,12 +14,7 @@ HISTORY_LENGTH = 300
 BROADCAST_RATE = 0.1  # 10Hz updates
 
 # --- HFT Damping Configuration ---
-# DECAY_LAMBDA: Controls how fast "relevance" drops off with distance.
-# 100 means an order $100 away has ~36% weight. 50 is tighter (scalping), 200 is wider (swing).
 DECAY_LAMBDA = 100.0 
-
-# IMPACT_SENSITIVITY: Converts the weighted volume score into Price Impact ($).
-# Multiplier for the Square Root Law.
 IMPACT_SENSITIVITY = 0.5 
 
 # --- Logging ---
@@ -30,7 +25,6 @@ market_state = {
     "bids": {},
     "asks": {},
     "history": [],      # Price history: {t, p}
-    "liq_history": [],  # Liquidity Trend history: {t, v}
     "current_mid": 0.0,
     "prev_mid": 0.0,
     "ready": False
@@ -42,9 +36,6 @@ connected_clients = set()
 def analyze_structure(diff_x, diff_y, current_mid):
     """
     Applies HFT Spatial Decay and Square Root Market Impact models.
-    Input:
-      diff_x: List of distances from mid ($).
-      diff_y: List of CUMULATIVE Net Liquidity (Bids - Asks).
     """
     if not diff_y or len(diff_y) < 5:
         return None
@@ -55,21 +46,15 @@ def analyze_structure(diff_x, diff_y, current_mid):
     # 1. Calculate Spatial Weighted Imbalance
     for i in range(len(diff_x)):
         dist = diff_x[i]
-        cum_vol = diff_y[i]
+        cum_vol = diff_y[i] # diff_y is the Net (Bid - Ask)
         
-        # Unpack cumulative volume to get marginal volume at this step
         marginal_vol = cum_vol - prev_vol
         prev_vol = cum_vol
         
-        # Apply Exponential Decay (Spatial Damping)
-        # Orders close to spread (dist=0) have weight 1.0
-        # Orders far away decay towards 0.0
         weight = math.exp(-dist / DECAY_LAMBDA)
-        
         weighted_imbalance += marginal_vol * weight
 
-    # 2. Calculate Market Impact (Square Root Law)
-    # Impact is not linear; it follows a square root function of volume.
+    # 2. Market Impact
     if weighted_imbalance != 0:
         impact = math.sqrt(abs(weighted_imbalance)) * IMPACT_SENSITIVITY
         if weighted_imbalance < 0:
@@ -79,11 +64,9 @@ def analyze_structure(diff_x, diff_y, current_mid):
 
     projected_price = current_mid + impact
 
-    # 3. Structural Reversals (Support/Resistance Scans)
-    # We still use the raw curve to find "Walls"
+    # 3. Structural Reversals
     support_level = None
     resistance_level = None
-    
     scan_limit = len(diff_y) // 2
     
     for i in range(1, scan_limit):
@@ -91,11 +74,8 @@ def analyze_structure(diff_x, diff_y, current_mid):
         curr_val = diff_y[i]
         dist = diff_x[i]
 
-        # Resistance: Net Liquidity flips from + to - (Buyer exhaustion / Seller Wall)
         if prev_val > 0 and curr_val < 0 and resistance_level is None:
             resistance_level = current_mid + dist
-
-        # Support: Net Liquidity flips from - to + (Seller exhaustion / Buyer Wall)
         if prev_val < 0 and curr_val > 0 and support_level is None:
             support_level = current_mid - dist
 
@@ -103,7 +83,7 @@ def analyze_structure(diff_x, diff_y, current_mid):
         "projected": projected_price,
         "support": support_level,
         "resistance": resistance_level,
-        "net_score": weighted_imbalance # Sending the decay-weighted score
+        "net_score": weighted_imbalance
     }
 
 def process_market_data():
@@ -112,7 +92,7 @@ def process_market_data():
 
     mid = market_state['current_mid']
     
-    # Snapshot Top 300 for Depth Chart
+    # Snapshot Top 300
     raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])[:300]
     raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])[:300]
 
@@ -131,43 +111,38 @@ def process_market_data():
             cum += q
             d_a_x.append(d); d_a_y.append(cum)
 
-    # Calculate Net Liquidity Curve (Depth)
-    # We interpolate to ensure bids and asks are compared at the exact same distances
+    # Interpolate for Charts
     diff_x, diff_y = [], []
+    chart_bids, chart_asks = [], [] # Separated arrays for the raw depth chart
+    
     if d_b_x and d_a_x:
         max_dist = min(d_b_x[-1], d_a_x[-1])
-        # Resolution: 100 steps across the available depth
         step_size = max_dist / 100
         steps = [i * step_size for i in range(1, 101)]
         
         for s in steps:
-            # Find cumulative bid vol at distance s
+            # Interpolate Bid Volume at distance s
             idx_b = bisect.bisect_right(d_b_x, s)
             vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
             
-            # Find cumulative ask vol at distance s
+            # Interpolate Ask Volume at distance s
             idx_a = bisect.bisect_right(d_a_x, s)
             vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
             
             diff_x.append(s)
-            diff_y.append(vol_b - vol_a) # Cumulative Net Imbalance
+            diff_y.append(vol_b - vol_a) # Net
+            chart_bids.append(vol_b)     # Raw Bid
+            chart_asks.append(vol_a)     # Raw Ask
 
     analysis = analyze_structure(diff_x, diff_y, mid)
-    
-    # Store Liquidity Trend for history
-    now = time.time()
-    if analysis:
-        # Update Trend History if needed (throttle slightly to match graph res)
-        if not market_state['liq_history'] or (now - market_state['liq_history'][-1]['t'] > 0.5):
-            market_state['liq_history'].append({'t': now, 'v': analysis['net_score']})
-            if len(market_state['liq_history']) > HISTORY_LENGTH:
-                market_state['liq_history'].pop(0)
 
     return {
         "mid": mid,
-        "history": market_state['history'],     # Price History
-        "liq_history": market_state['liq_history'], # Net Liq History
-        "diff": { "x": diff_x, "y": diff_y },   # Depth Snapshot
+        "history": market_state['history'],
+        "depth_x": diff_x,
+        "depth_net": diff_y,
+        "depth_bids": chart_bids,
+        "depth_asks": chart_asks,
         "analysis": analysis
     }
 
@@ -190,11 +165,11 @@ HTML_PAGE = f"""
         }}
         body {{ margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-main); font-family: monospace; overflow: hidden; height: 100vh; width: 100vw; }}
         
-        /* Grid Layout: 3 Rows in Main Column */
+        /* Grid: 2 Columns, 2 Rows. Bottom Row (Depth) is taller/flexible */
         .grid-container {{ 
             display: grid; 
             grid-template-columns: 3fr 1fr; 
-            grid-template-rows: 2fr 1fr 1fr; 
+            grid-template-rows: 55% 45%; 
             gap: 4px; 
             height: 100vh; 
             padding: 4px; 
@@ -203,14 +178,16 @@ HTML_PAGE = f"""
         
         .panel {{ background: #12141a; border: 1px solid var(--border); border-radius: 4px; position: relative; display: flex; flex-direction: column; overflow: hidden; }}
         
+        /* Grid Assignments */
         #p-price {{ grid-column: 1 / 2; grid-row: 1 / 2; }}
-        #p-trend {{ grid-column: 1 / 2; grid-row: 2 / 3; }} 
-        #p-depth {{ grid-column: 1 / 2; grid-row: 3 / 4; }}
-        #p-stats {{ grid-column: 2 / 3; grid-row: 1 / 4; border-left: 2px solid #45a29e; }}
+        #p-stats {{ grid-column: 2 / 3; grid-row: 1 / 3; border-left: 2px solid #45a29e; }}
+        #p-bottom {{ grid-column: 1 / 2; grid-row: 2 / 3; display: flex; gap: 4px; background: transparent; border: none; }}
+
+        .sub-panel {{ flex: 1; background: #12141a; border: 1px solid var(--border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }}
 
         .panel-header {{ padding: 6px 10px; background: #0f1116; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: bold; display: flex; justify-content: space-between; color: var(--accent-green); text-transform: uppercase; }}
         
-        #tv-price, #tv-trend, #tv-depth {{ flex: 1; width: 100%; position: relative; }}
+        #tv-price, #tv-raw, #tv-net {{ flex: 1; width: 100%; position: relative; }}
         
         .stats-content {{ padding: 15px; overflow-y: auto; flex: 1; }}
         .stat-box {{ margin-bottom: 20px; padding: 10px; background: rgba(255,255,255,0.02); border-radius: 4px; }}
@@ -219,7 +196,7 @@ HTML_PAGE = f"""
         .green {{ color: var(--accent-green); }}
         .red {{ color: var(--accent-red); }}
         
-        .terminal-box {{ margin-top: auto; font-size: 11px; height: 200px; display: flex; flex-direction: column; }}
+        .terminal-box {{ margin-top: auto; font-size: 11px; height: 250px; display: flex; flex-direction: column; }}
         .term-header {{ border-bottom: 1px dashed #444; margin-bottom: 5px; opacity: 0.7; }}
         #term-logs {{ flex: 1; overflow-y: hidden; display: flex; flex-direction: column-reverse; }}
         .log-line {{ margin-top: 4px; padding-left: 8px; border-left: 2px solid #333; }}
@@ -241,19 +218,21 @@ HTML_PAGE = f"""
             <div id="tv-price"></div>
         </div>
 
-        <!-- ROW 2: LIQUIDITY TREND -->
-        <div id="p-trend" class="panel">
-            <div class="panel-header"><span>HFT Weighted Imbalance (Decay {DECAY_LAMBDA})</span><span id="live-trend">0.0</span></div>
-            <div id="tv-trend"></div>
-        </div>
-
-        <!-- ROW 3: DEPTH STRUCTURE -->
-        <div id="p-depth" class="panel">
-            <div class="panel-header"><span>Net Liquidity Structure</span><span>Range: $100</span></div>
-            <div id="tv-depth"></div>
+        <!-- ROW 2: SPLIT DEPTH -->
+        <div id="p-bottom">
+            <!-- LEFT: RAW DEPTH -->
+            <div class="sub-panel">
+                <div class="panel-header"><span>Market Depth (Bids vs Asks)</span></div>
+                <div id="tv-raw"></div>
+            </div>
+            <!-- RIGHT: NET DELTA -->
+            <div class="sub-panel">
+                <div class="panel-header"><span>Net Delta (Bids - Asks)</span></div>
+                <div id="tv-net"></div>
+            </div>
         </div>
 
-        <!-- COL 2: STATS -->
+        <!-- RIGHT COL: STATS -->
         <div id="p-stats" class="panel">
             <div class="panel-header">HFT ANALYTICS ENGINE</div>
             <div class="stats-content">
@@ -284,7 +263,6 @@ HTML_PAGE = f"""
                 loader: document.getElementById('loader'),
                 status: document.getElementById('loading-status'),
                 price: document.getElementById('live-price'),
-                trend: document.getElementById('live-trend'),
                 scoreVal: document.getElementById('score-val'),
                 resVal: document.getElementById('res-val'),
                 supVal: document.getElementById('sup-val'),
@@ -307,36 +285,35 @@ HTML_PAGE = f"""
             const predSeries = priceChart.addLineSeries({{ color: '#ff9800', lineWidth: 2, lineStyle: 2 }});
             let supportLine = null, resistanceLine = null;
 
-            // 2. Trend Chart (Baseline Series)
-            const trendChart = LightweightCharts.createChart(document.getElementById('tv-trend'), {{
+            // 2. Raw Depth Chart (Left Bottom) - TimeScale hacked to show Distance
+            const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {{
                 ...chartCommon,
-                rightPriceScale: {{ scaleMargins: {{ top: 0.1, bottom: 0.1 }} }}
-            }});
-            const trendSeries = trendChart.addBaselineSeries({{
-                baseValue: {{ type: 'price', price: 0 }},
-                topLineColor: '#66fcf1', topFillColor1: 'rgba(102, 252, 241, 0.28)', topFillColor2: 'rgba(102, 252, 241, 0.05)',
-                bottomLineColor: '#ff3b3b', bottomFillColor1: 'rgba(255, 59, 59, 0.28)', bottomFillColor2: 'rgba(255, 59, 59, 0.05)',
+                timeScale: {{ tickMarkFormatter: (time) => parseFloat(time).toFixed(0) }},
+                localization: {{ timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2) }}
             }});
+            // Bids (Green) vs Asks (Red)
+            const rawBidSeries = rawChart.addAreaSeries({{ lineColor: '#00e676', topColor: 'rgba(0, 230, 118, 0.2)', bottomColor: 'rgba(0, 230, 118, 0.0)', lineWidth: 2, title: "Bids" }});
+            const rawAskSeries = rawChart.addAreaSeries({{ lineColor: '#ff1744', topColor: 'rgba(255, 23, 68, 0.2)', bottomColor: 'rgba(255, 23, 68, 0.0)', lineWidth: 2, title: "Asks" }});
 
-            // 3. Depth Chart
-            const depthChart = LightweightCharts.createChart(document.getElementById('tv-depth'), {{
+            // 3. Net Delta Chart (Right Bottom)
+            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
                 ...chartCommon,
                 timeScale: {{ tickMarkFormatter: (time) => parseFloat(time).toFixed(0) }},
                 localization: {{ timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2) }}
             }});
-            const bullSeries = depthChart.addAreaSeries({{ topColor: 'rgba(102, 252, 241, 0.4)', bottomColor: 'rgba(102, 252, 241, 0.0)', lineColor: '#66fcf1', lineWidth: 2 }});
-            const bearSeries = depthChart.addAreaSeries({{ topColor: 'rgba(255, 59, 59, 0.4)', bottomColor: 'rgba(255, 59, 59, 0.0)', lineColor: '#ff3b3b', lineWidth: 2 }});
+            const bullSeries = netChart.addAreaSeries({{ topColor: 'rgba(102, 252, 241, 0.4)', bottomColor: 'rgba(102, 252, 241, 0.0)', lineColor: '#66fcf1', lineWidth: 2 }});
+            const bearSeries = netChart.addAreaSeries({{ topColor: 'rgba(255, 59, 59, 0.4)', bottomColor: 'rgba(255, 59, 59, 0.0)', lineColor: '#ff3b3b', lineWidth: 2 }});
 
             // Auto-Resize
             const resizeObserver = new ResizeObserver(entries => {{
                 for(let entry of entries) {{
                     const {{width, height}} = entry.contentRect;
                     if(entry.target.id === 'tv-price') priceChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'tv-trend') trendChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'tv-depth') depthChart.applyOptions({{width, height}});
+                    if(entry.target.id === 'tv-raw') rawChart.applyOptions({{width, height}});
+                    if(entry.target.id === 'tv-net') netChart.applyOptions({{width, height}});
                 }}
             }});
-            ['tv-price', 'tv-trend', 'tv-depth'].forEach(id => resizeObserver.observe(document.getElementById(id)));
+            ['tv-price', 'tv-raw', 'tv-net'].forEach(id => resizeObserver.observe(document.getElementById(id)));
 
             // --- WEBSOCKET ---
             function log(msg, type='neutral') {{
@@ -361,7 +338,7 @@ HTML_PAGE = f"""
                     if (data.error) return;
                     dom.loader.style.display = 'none';
 
-                    // 1. Price Data
+                    // 1. Price Update
                     const cleanHistory = [];
                     const seen = new Set();
                     data.history.forEach(d => {{
@@ -379,9 +356,7 @@ HTML_PAGE = f"""
                             predSeries.setData([last, {{ time: last.time + 60, value: projected }}]);
                             dom.projVal.innerText = projected.toLocaleString(undefined, {{minimumFractionDigits: 0, maximumFractionDigits: 0}});
 
-                            // Sync Trend Chart Value
-                            dom.trend.innerText = net_score.toFixed(2);
-                            dom.trend.style.color = net_score >= 0 ? 'var(--accent-green)' : 'var(--accent-red)';
+                            // Stats
                             dom.scoreVal.innerText = net_score.toFixed(2);
                             dom.scoreVal.className = net_score > 0 ? "stat-value green" : "stat-value red";
 
@@ -403,35 +378,40 @@ HTML_PAGE = f"""
                                 if (resistanceLine) {{ priceSeries.removePriceLine(resistanceLine); resistanceLine = null; }}
                             }}
 
-                            // AI Logs based on Weighted Score
+                            // AI Logs
                             if (Math.abs(net_score) > 20 && Math.random() > 0.98) {{
                                 log(net_score > 0 ? "Momentum: Buying Pressure" : "Momentum: Selling Pressure", net_score > 0 ? 'bull' : 'bear');
                             }}
                         }}
                     }}
 
-                    // 2. Liquidity Trend Data
-                    if (data.liq_history) {{
-                        const trendData = [];
-                        const seenT = new Set();
-                        data.liq_history.forEach(d => {{
-                            const t = Math.floor(d.t);
-                            if(!seenT.has(t)) {{ seenT.add(t); trendData.push({{ time: t, value: d.v }}); }}
-                        }});
-                        if (trendData.length) trendSeries.setData(trendData);
-                    }}
-
-                    // 3. Depth Snapshot
-                    if (data.diff && data.diff.x.length) {{
+                    // 2. Depth Charts Update
+                    if (data.depth_x && data.depth_x.length) {{
                         const bull = [], bear = [];
-                        for (let i = 0; i < data.diff.x.length; i++) {{
-                            const x = data.diff.x[i];
-                            const y = data.diff.y[i];
-                            if (y >= 0) {{ bull.push({{ time: x, value: y }}); bear.push({{ time: x, value: 0 }}); }}
-                            else {{ bull.push({{ time: x, value: 0 }}); bear.push({{ time: x, value: y }}); }}
+                        const rawBids = [], rawAsks = [];
+                        
+                        for (let i = 0; i < data.depth_x.length; i++) {{
+                            const x = data.depth_x[i];
+                            const netY = data.depth_net[i];
+                            const bidY = data.depth_bids[i];
+                            const askY = data.depth_asks[i];
+
+                            // Net Chart
+                            if (netY >= 0) {{ bull.push({{ time: x, value: netY }}); bear.push({{ time: x, value: 0 }}); }}
+                            else {{ bull.push({{ time: x, value: 0 }}); bear.push({{ time: x, value: netY }}); }}
+
+                            // Raw Chart
+                            rawBids.push({{ time: x, value: bidY }});
+                            rawAsks.push({{ time: x, value: askY }});
                         }}
+                        
+                        // Update Net
                         bullSeries.setData(bull);
                         bearSeries.setData(bear);
+
+                        // Update Raw
+                        rawBidSeries.setData(rawBids);
+                        rawAskSeries.setData(rawAsks);
                     }}
                 }};
             }}