Update app.py

app.py

@@ -1,8 +1,7 @@
-
 # app.py
-# D3 physics (client-side) + Plotly visualization for MF churn explorer
-# Liquid "gel" motion (viscous, slow, ooze-like) - Option L2
-# Requirements: gradio, networkx, plotly, pandas, numpy
+# Mutual Fund Churn Explorer with Gel + Wave Liquid Motion (Option D)
+# D3 + Plotly hybrid layout
+# Designed for Hugging Face Spaces (Gradio)
 
 import gradio as gr
 import pandas as pd
@@ -12,9 +11,10 @@ import numpy as np
 import json
 from collections import defaultdict
 
-# ---------------------------
+# ============================================================
 # DATA
-# ---------------------------
+# ============================================================
+
 AMCS = [
     "SBI MF", "ICICI Pru MF", "HDFC MF", "Nippon India MF", "Kotak MF",
     "UTI MF", "Axis MF", "Aditya Birla SL MF", "Mirae MF", "DSP MF"
@@ -66,138 +66,195 @@ SELL_MAP = sanitize_map(SELL_MAP)
 COMPLETE_EXIT = sanitize_map(COMPLETE_EXIT)
 FRESH_BUY = sanitize_map(FRESH_BUY)
 
-# ---------------------------
-# BUILD GRAPH
-# ---------------------------
-company_edges = []
-for amc, comps in BUY_MAP.items():
-    for c in comps:
-        company_edges.append((amc, c, {"action": "buy", "weight": 1}))
-for amc, comps in SELL_MAP.items():
-    for c in comps:
-        company_edges.append((amc, c, {"action": "sell", "weight": 1}))
-for amc, comps in COMPLETE_EXIT.items():
-    for c in comps:
-        company_edges.append((amc, c, {"action": "complete_exit", "weight": 3}))
-for amc, comps in FRESH_BUY.items():
-    for c in comps:
-        company_edges.append((amc, c, {"action": "fresh_buy", "weight": 3}))
+# ============================================================
+# GRAPH BUILDING
+# ============================================================
 
 def infer_amc_transfers(buy_map, sell_map):
     transfers = defaultdict(int)
-    company_to_sellers = defaultdict(list)
-    company_to_buyers = defaultdict(list)
+    comp_sellers = defaultdict(list)
+    comp_buyers = defaultdict(list)
+
     for amc, comps in sell_map.items():
         for c in comps:
-            company_to_sellers[c].append(amc)
+            comp_sellers[c].append(amc)
+
     for amc, comps in buy_map.items():
         for c in comps:
-            company_to_buyers[c].append(amc)
-    for c in set(company_to_sellers.keys()) | set(company_to_buyers.keys()):
-        sellers = company_to_sellers[c]
-        buyers = company_to_buyers[c]
-        for s in sellers:
-            for b in buyers:
-                transfers[(s,b)] += 1
+            comp_buyers[c].append(amc)
+
+    for c in set(comp_sellers.keys()) | set(comp_buyers.keys()):
+        for s in comp_sellers[c]:
+            for b in comp_buyers[c]:
+                transfers[(s, b)] += 1
+
     out = []
     for (s,b), w in transfers.items():
-        out.append((s,b, {"action":"transfer","weight":w}))
+        out.append((s, b, {"action":"transfer","weight":w}))
     return out
 
 transfer_edges = infer_amc_transfers(BUY_MAP, SELL_MAP)
 
 def build_graph(include_transfers=True):
     G = nx.DiGraph()
+
     for a in AMCS:
         G.add_node(a, type="amc")
     for c in COMPANIES:
         G.add_node(c, type="company")
-    for u,v,attr in company_edges:
-        if G.has_edge(u,v):
-            G[u][v]["weight"] += attr["weight"]
-            G[u][v]["actions"].append(attr["action"])
-        else:
-            G.add_edge(u,v,weight=attr["weight"], actions=[attr["action"]])
+
+    # BUY/SELL edges
+    for amc, comps in BUY_MAP.items():
+        for c in comps:
+            G.add_edge(amc, c, weight=1, actions=["buy"])
+
+    for amc, comps in SELL_MAP.items():
+        for c in comps:
+            if G.has_edge(amc, c):
+                G[amc][c]["weight"] += 1
+                G[amc][c]["actions"].append("sell")
+            else:
+                G.add_edge(amc, c, weight=1, actions=["sell"])
+
+    # complete exits
+    for amc, comps in COMPLETE_EXIT.items():
+        for c in comps:
+            if G.has_edge(amc, c):
+                G[amc][c]["weight"] += 3
+                G[amc][c]["actions"].append("complete_exit")
+            else:
+                G.add_edge(amc, c, weight=3, actions=["complete_exit"])
+
+    # fresh buys
+    for amc, comps in FRESH_BUY.items():
+        for c in comps:
+            if G.has_edge(amc, c):
+                G[amc][c]["weight"] += 3
+                G[amc][c]["actions"].append("fresh_buy")
+            else:
+                G.add_edge(amc, c, weight=3, actions=["fresh_buy"])
+
+    # inferred transfers
     if include_transfers:
         for s,b,attr in transfer_edges:
             if G.has_edge(s,b):
                 G[s][b]["weight"] += attr["weight"]
                 G[s][b]["actions"].append("transfer")
             else:
-                G.add_edge(s,b,weight=attr["weight"], actions=["transfer"])
+                G.add_edge(s,b, weight=attr["weight"], actions=["transfer"])
+
     return G
 
-# ---------------------------
-# BUILD PLOTLY FIGURE (placeholders for positions)
-# ---------------------------
+# ============================================================
+# BUILD FIGURE (placeholders — positions will be set by D3)
+# ============================================================
+
 def build_plotly_figure(G,
                         node_color_amc="#9EC5FF",
                         node_color_company="#FFCF9E",
                         edge_color_buy="#2ca02c",
                         edge_color_sell="#d62728",
                         edge_color_transfer="#888888",
-                        edge_thickness_base=1.4):
+                        edge_thickness=1.4):
+
     node_names = []
     node_x = []
     node_y = []
-    node_color = []
-    node_size = []
-    for n,d in G.nodes(data=True):
+    node_colors = []
+    node_sizes = []
+
+    for n, d in G.nodes(data=True):
         node_names.append(n)
-        node_x.append(0.0); node_y.append(0.0)
-        if d["type"]=="amc":
-            node_color.append(node_color_amc); node_size.append(36)
+        node_x.append(0)
+        node_y.append(0)
+        if d["type"] == "amc":
+            node_colors.append(node_color_amc)
+            node_sizes.append(36)
         else:
-            node_color.append(node_color_company); node_size.append(56)
+            node_colors.append(node_color_company)
+            node_sizes.append(56)
+
     edge_traces = []
-    edge_src = []
-    edge_tgt = []
-    edge_colors = []
-    edge_widths = []
-    for u,v,attrs in G.edges(data=True):
-        edge_traces.append(go.Scatter(x=[0,0], y=[0,0], mode="lines",
-                                      line=dict(color="#888", width=1), hoverinfo="none"))
-        edge_src.append(node_names.index(u))
-        edge_tgt.append(node_names.index(v))
-        acts = attrs.get("actions",[])
-        weight = attrs.get("weight",1)
+    src_idx = []
+    tgt_idx = []
+    e_colors = []
+    e_widths = []
+
+    for u, v, attrs in G.edges(data=True):
+        edge_traces.append(
+            go.Scatter(
+                x=[0,0], y=[0,0], mode="lines",
+                line=dict(color="#aaa", width=1),
+                hoverinfo="none"
+            )
+        )
+        src_idx.append(node_names.index(u))
+        tgt_idx.append(node_names.index(v))
+
+        acts = attrs.get("actions", [])
+        w = attrs.get("weight", 1)
+
         if "complete_exit" in acts:
-            edge_colors.append(edge_color_sell); edge_widths.append(edge_thickness_base*3)
+            e_colors.append(edge_color_sell)
+            e_widths.append(edge_thickness * 3)
         elif "fresh_buy" in acts:
-            edge_colors.append(edge_color_buy); edge_widths.append(edge_thickness_base*3)
+            e_colors.append(edge_color_buy)
+            e_widths.append(edge_thickness * 3)
         elif "transfer" in acts:
-            edge_colors.append(edge_color_transfer); edge_widths.append(edge_thickness_base*(1+np.log1p(weight)))
+            e_colors.append(edge_color_transfer)
+            e_widths.append(edge_thickness * (1 + np.log1p(w)))
         elif "sell" in acts:
-            edge_colors.append(edge_color_sell); edge_widths.append(edge_thickness_base*(1+np.log1p(weight)))
+            e_colors.append(edge_color_sell)
+            e_widths.append(edge_thickness * (1 + np.log1p(w)))
         else:
-            edge_colors.append(edge_color_buy); edge_widths.append(edge_thickness_base*(1+np.log1p(weight)))
-    node_trace = go.Scatter(x=node_x, y=node_y, mode="markers+text",
-                            marker=dict(color=node_color, size=node_size, line=dict(width=2,color="#222")),
-                            text=node_names, textposition="top center", hoverinfo="text")
+            e_colors.append(edge_color_buy)
+            e_widths.append(edge_thickness * (1 + np.log1p(w)))
+
+    node_trace = go.Scatter(
+        x=node_x, y=node_y,
+        mode="markers+text",
+        marker=dict(color=node_colors, size=node_sizes, line=dict(width=2,color="#333")),
+        text=node_names,
+        textposition="top center",
+        hoverinfo="text"
+    )
+
     fig = go.Figure(data=edge_traces + [node_trace])
-    fig.update_layout(showlegend=False, autosize=True,
-                      margin=dict(l=8,r=8,t=36,b=8), xaxis=dict(visible=False), yaxis=dict(visible=False))
+    fig.update_layout(
+        autosize=True,
+        showlegend=False,
+        margin=dict(l=5, r=5, t=30, b=5),
+        xaxis=dict(visible=False),
+        yaxis=dict(visible=False)
+    )
+
     meta = {
         "node_names": node_names,
-        "edge_source_index": edge_src,
-        "edge_target_index": edge_tgt,
-        "edge_colors": edge_colors,
-        "edge_widths": edge_widths,
-        "node_sizes": node_size
+        "edge_source_index": src_idx,
+        "edge_target_index": tgt_idx,
+        "edge_colors": e_colors,
+        "edge_widths": e_widths,
+        "node_sizes": node_sizes
     }
+
     return fig, meta
 
-# ---------------------------
-# Build HTML with D3 + viscous "gel" motion
-# ---------------------------
-def make_network_html_d3_gel(fig, meta, div_id="network-plot-div"):
+
+# ============================================================
+# D3 + GEL + WAVE Motion Renderer
+# ============================================================
+
+def make_network_html(fig, meta, div_id="network-plot-div"):
+
     fig_json = json.dumps(fig.to_plotly_json())
     meta_json = json.dumps(meta)
+
     html = f"""
-<div id="{div_id}" style="width:100%;height:560px;"></div>
-<div style="margin-top:6px;margin-bottom:8px;">
-  <button id="{div_id}-reset" style="padding:8px 12px;border-radius:6px;">Reset view</button>
-  <button id="{div_id}-stop" style="padding:8px 12px;border-radius:6px;margin-left:8px;">Stop layout</button>
+<div id="{div_id}" style="width:100%; height:620px;"></div>
+
+<div style="margin-top:6px;">
+  <button id="{div_id}-reset" style="padding:8px 12px; border-radius:6px;">Reset</button>
+  <button id="{div_id}-stop" style="padding:8px 12px; margin-left:8px; border-radius:6px;">Stop Layout</button>
 </div>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
@@ -206,96 +263,114 @@ def make_network_html_d3_gel(fig, meta, div_id="network-plot-div"):
 <script>
 const fig = {fig_json};
 const meta = {meta_json};
+
 const container = document.getElementById("{div_id}");
+
 Plotly.newPlot(container, fig.data, fig.layout, {{responsive:true}});
 
-// index bookkeeping
 const nodeTraceIndex = fig.data.length - 1;
 const edgeCount = fig.data.length - 1;
 
-// build nodes and links for D3
-const nodes = meta.node_names.map((n,i)=>({{id:i, name:n, r: meta.node_sizes[i] || 20}}));
-const links = meta.edge_source_index.map((s,i)=>({{source:s, target: meta.edge_target_index[i], color: meta.edge_colors[i], width: meta.edge_widths[i] || 1}}));
+// Build nodes for D3
+const nodes = meta.node_names.map((name, i) => {{
+    return {{
+        id: i,
+        name: name,
+        r: meta.node_sizes[i] || 20,
+        displayX: 0,
+        displayY: 0,
+        vx_smooth: 0,
+        vy_smooth: 0
+    }};
+}});
+
+// Build links
+const links = meta.edge_source_index.map((s, i) => {{
+    return {{
+        source: s,
+        target: meta.edge_target_index[i],
+        color: meta.edge_colors[i],
+        width: meta.edge_widths[i]
+    }};
+}});
 
-// Viscous gel simulation parameters (softer, slower motion)
+// D3 simulation
 const simulation = d3.forceSimulation(nodes)
-    .force("link", d3.forceLink(links).id(d => d.id).distance(140).strength(0.35))
-    .force("charge", d3.forceManyBody().strength(-40))
-    .force("collision", d3.forceCollide().radius(d => d.r * 0.85))
+    .force("link", d3.forceLink(links).id(d => d.id).distance(150).strength(0.35))
+    .force("charge", d3.forceManyBody().strength(-50))
+    .force("collision", d3.forceCollide().radius(d => d.r * 0.9))
     .force("center", d3.forceCenter(0,0))
     .velocityDecay(0.55);
 
-// We add per-node velocity smoothing variables to create "gel" feel
-nodes.forEach(n => {{
-    n.vx_smooth = 0;
-    n.vy_smooth = 0;
-    n.displayX = n.x || 0;
-    n.displayY = n.y || 0;
-}});
-
 let tickCount = 0;
-const maxTicks = 400; // safety cap
+const maxTicks = 400;
 
 simulation.on("tick", () => {{
     tickCount++;
-    // On each tick, update the target positions from d3, then apply viscous smoothing
+
     nodes.forEach(n => {{
-        // D3 provides n.x/n.y; we do gel smoothing on displayX/displayY using velocity
-        const targetX = n.x || 0;
-        const targetY = n.y || 0;
+        const tx = n.x || 0;
+        const ty = n.y || 0;
 
-        // viscous velocity update (gel-like): vx_smooth integrates difference slowly
-        n.vx_smooth = (n.vx_smooth * 0.82) + (targetX - n.displayX) * 0.06;
-        n.vy_smooth = (n.vy_smooth * 0.82) + (targetY - n.displayY) * 0.06;
+        // Gel viscosity smoothing
+        n.vx_smooth = n.vx_smooth * 0.82 + (tx - n.displayX) * 0.06;
+        n.vy_smooth = n.vy_smooth * 0.82 + (ty - n.displayY) * 0.06;
 
-        // apply a small damping to give heavy 'gel' inertia
-        n.vx_smooth *= 0.92;
-        n.vy_smooth *= 0.92;
+        // Heavy damping
+        n.vx_smooth *= 0.90;
+        n.vy_smooth *= 0.90;
 
-        // update display positions
+        // Update display positions
         n.displayX += n.vx_smooth;
         n.displayY += n.vy_smooth;
+
+        // Wave pulse (gentle breathing)
+        const t = Date.now() * 0.001;
+        n.displayX += Math.sin(t + n.id) * 0.12;
+        n.displayY += Math.cos(t + n.id) * 0.12;
     }});
 
-    // prepare arrays for Plotly update using displayX/displayY
+    // Node arrays
     const xs = nodes.map(n => n.displayX);
     const ys = nodes.map(n => n.displayY);
 
-    // update node trace
-    Plotly.restyle(container, {{ 'x': [xs], 'y': [ys] }}, [nodeTraceIndex]);
+    // Update node trace
+    Plotly.restyle(container, {{x: [xs], y: [ys]}}, [nodeTraceIndex]);
 
-    // update each edge trace using display positions
+    // Update edges
     for (let e = 0; e < edgeCount; e++) {{
-        const sIdx = meta.edge_source_index[e];
-        const tIdx = meta.edge_target_index[e];
-        const sx = nodes[sIdx].displayX || 0;
-        const sy = nodes[sIdx].displayY || 0;
-        const tx = nodes[tIdx].displayX || 0;
-        const ty = nodes[tIdx].displayY || 0;
-        Plotly.restyle(container, {{ 'x': [[sx, tx]], 'y': [[sy, ty]] }}, [e]);
-        // set line style color/width (ensure visual matches original meta)
-        Plotly.restyle(container, {{ 'line.color': [meta.edge_colors[e]], 'line.width': [meta.edge_widths[e]] }}, [e]);
+        const s = meta.edge_source_index[e];
+        const t = meta.edge_target_index[e];
+
+        Plotly.restyle(container,
+            {{
+                x: [[nodes[s].displayX, nodes[t].displayX]],
+                y: [[nodes[s].displayY, nodes[t].displayY]],
+                "line.color": [meta.edge_colors[e]],
+                "line.width": [meta.edge_widths[e]]
+            }},
+            [e]
+        );
     }}
 
-    // Safety stop conditions
     if (simulation.alpha() < 0.02 || tickCount > maxTicks) {{
         simulation.stop();
     }}
 }});
 
-// stop button
-document.getElementById("{div_id}-stop").addEventListener('click', () => {{
+// STOP button
+document.getElementById("{div_id}-stop").addEventListener("click", () => {{
     simulation.stop();
 }});
 
-// map name to index
+// FOCUS and RESET
 const nameToIndex = {{}};
-meta.node_names.forEach((n,i)=> nameToIndex[n]=i);
+meta.node_names.forEach((n,i)=> nameToIndex[n] = i);
 
-// focus and reset functions (hide others on focus - Option A)
-function focusNode(nodeName) {{
-    const idx = nameToIndex[nodeName];
+function focusNode(name) {{
+    const idx = nameToIndex[name];
     const keep = new Set([idx]);
+
     for (let e = 0; e < meta.edge_source_index.length; e++) {{
         const s = meta.edge_source_index[e], t = meta.edge_target_index[e];
         if (s === idx) keep.add(t);
@@ -303,202 +378,222 @@ function focusNode(nodeName) {{
     }}
 
     const N = meta.node_names.length;
-    const nodeOp = Array(N).fill(0.0);
-    const textColors = Array(N).fill("rgba(0,0,0,0)");
-    for (let i=0;i<N;i++) {{
-        if (keep.has(i)) {{ nodeOp[i]=1.0; textColors[i]="black"; }}
+    const op = Array(N).fill(0);
+    const colors = Array(N).fill("rgba(0,0,0,0)");
+
+    for (let i = 0; i < N; i++) {{
+        if (keep.has(i)) {{
+            op[i] = 1;
+            colors[i] = "black";
+        }}
     }}
-    Plotly.restyle(container, {{ "marker.opacity": [nodeOp], "textfont.color": [textColors] }}, [nodeTraceIndex]);
 
-    // edges
-    for (let e=0;e<edgeCount;e++) {{
+    Plotly.restyle(container, {{
+        "marker.opacity": [op],
+        "textfont.color": [colors]
+    }}, [nodeTraceIndex]);
+
+    for (let e = 0; e < edgeCount; e++) {{
         const s = meta.edge_source_index[e], t = meta.edge_target_index[e];
         const show = keep.has(s) && keep.has(t);
-        const color = show ? meta.edge_colors[e] : 'rgba(0,0,0,0)';
-        const width = show ? meta.edge_widths[e] : 0.1;
-        Plotly.restyle(container, {{ 'line.color': [color], 'line.width': [width] }}, [e]);
-    }}
 
-    // zoom to bbox
-    const nodesTrace = fig.data[nodeTraceIndex];
-    const xs = [], ys = [];
-    for (let j=0;j<meta.node_names.length;j++) {{
-        if (keep.has(j)) {{ xs.push(nodesTrace.x[j]); ys.push(nodesTrace.y[j]); }}
-    }}
-    if (xs.length>0) {{
-        const xmin = Math.min(...xs), xmax = Math.max(...xs);
-        const ymin = Math.min(...ys), ymax = Math.max(...ys);
-        const padX = (xmax - xmin) * 0.4 + 10;
-        const padY = (ymax - ymin) * 0.4 + 10;
-        Plotly.relayout(container, {{ xaxis: {{ range: [xmin - padX, xmax + padX] }}, yaxis: {{ range: [ymin - padY, ymax + padY] }} }});
+        Plotly.restyle(container, {{
+            "line.color": [show ? meta.edge_colors[e] : "rgba(0,0,0,0)"],
+            "line.width": [show ? meta.edge_widths[e] : 0.1]
+        }}, [e]);
     }}
 }}
 
-// reset
 function resetView() {{
     const N = meta.node_names.length;
-    const nodeOp = Array(N).fill(1.0);
-    const textColors = Array(N).fill("black");
-    Plotly.restyle(container, {{ "marker.opacity": [nodeOp], "textfont.color": [textColors] }}, [nodeTraceIndex]);
-    for (let e=0;e<edgeCount;e++) {{
-        Plotly.restyle(container, {{ 'line.color': [meta.edge_colors[e]], 'line.width': [meta.edge_widths[e]] }}, [e]);
+    Plotly.restyle(container, {{
+        "marker.opacity": [Array(N).fill(1)],
+        "textfont.color": [Array(N).fill("black")]
+    }}, [nodeTraceIndex]);
+
+    for (let e = 0; e < edgeCount; e++) {{
+        Plotly.restyle(container, {{
+            "line.color": [meta.edge_colors[e]],
+            "line.width": [meta.edge_widths[e]]
+        }}, [e]);
     }}
-    Plotly.relayout(container, {{ xaxis: {{autorange:true}}, yaxis: {{autorange:true}} }});
-    // restart a gentle simulation to re-space nodes
-    tickCount = 0;
+
     simulation.alpha(0.5);
     simulation.restart();
 }}
 
-// click handler
-container.on('plotly_click', function(eventData) {{
-    const p = eventData.points[0];
-    if (p.curveNumber === nodeTraceIndex) {{
-        const nodeIndex = p.pointNumber;
-        const nodeName = meta.node_names[nodeIndex];
-        focusNode(nodeName);
-    }}
-}});
+document.getElementById("{div_id}-reset").addEventListener("click", resetView);
 
-// reset button
-document.getElementById("{div_id}-reset").addEventListener('click', function() {{
-    resetView();
+container.on("plotly_click", (e) => {{
+    const p = e.points[0];
+    if (p && p.curveNumber === nodeTraceIndex) {{
+        const name = meta.node_names[p.pointNumber];
+        focusNode(name);
+    }}
 }});
 </script>
 """
+
     return html
 
-# ---------------------------
-# Company / AMC summaries (unchanged)
-# ---------------------------
-def company_trade_summary(company_name):
-    buyers = [a for a, comps in BUY_MAP.items() if company_name in comps]
-    sellers = [a for a, comps in SELL_MAP.items() if company_name in comps]
-    fresh = [a for a, comps in FRESH_BUY.items() if company_name in comps]
-    exits = [a for a, comps in COMPLETE_EXIT.items() if company_name in comps]
+# ============================================================
+# COMPANY / AMC SUMMARY
+# ============================================================
+
+def company_trade_summary(company):
+    buyers = [a for a, cs in BUY_MAP.items() if company in cs]
+    sellers = [a for a, cs in SELL_MAP.items() if company in cs]
+    fresh = [a for a, cs in FRESH_BUY.items() if company in cs]
+    exits = [a for a, cs in COMPLETE_EXIT.items() if company in cs]
+
     df = pd.DataFrame({
-        "Role": ["Buyer"]*len(buyers) + ["Seller"]*len(sellers) + ["Fresh buy"]*len(fresh) + ["Complete exit"]*len(exits),
+        "Role": ["Buyer"] * len(buyers)
+               + ["Seller"] * len(sellers)
+               + ["Fresh buy"] * len(fresh)
+               + ["Complete exit"] * len(exits),
         "AMC": buyers + sellers + fresh + exits
     })
+
     if df.empty:
         return None, pd.DataFrame([], columns=["Role","AMC"])
+
     counts = df.groupby("Role").size().reset_index(name="Count")
-    fig = go.Figure(go.Bar(x=counts["Role"], y=counts["Count"], marker_color=["green","red","orange","black"][:len(counts)]))
-    fig.update_layout(title_text=f"Trade summary for {company_name}", autosize=True, margin=dict(t=30,b=10))
+
+    fig = go.Figure(go.Bar(
+        x=counts["Role"], y=counts["Count"],
+        marker_color=["green","red","orange","black"][:len(counts)]
+    ))
+    fig.update_layout(title=f"Trades for {company}", margin=dict(t=30,b=5))
+
     return fig, df
 
-def amc_transfer_summary(amc_name):
-    sold = SELL_MAP.get(amc_name, [])
+
+def amc_transfer_summary(amc):
+    sold = SELL_MAP.get(amc, [])
     transfers = []
     for s in sold:
-        buyers = [a for a, comps in BUY_MAP.items() if s in comps]
+        buyers = [a for a, cs in BUY_MAP.items() if s in cs]
         for b in buyers:
             transfers.append({"security": s, "buyer_amc": b})
+
     df = pd.DataFrame(transfers)
+
     if df.empty:
         return None, pd.DataFrame([], columns=["security","buyer_amc"])
+
     counts = df["buyer_amc"].value_counts().reset_index()
     counts.columns = ["Buyer AMC","Count"]
-    fig = go.Figure(go.Bar(x=counts["Buyer AMC"], y=counts["Count"], marker_color="lightslategray"))
-    fig.update_layout(title_text=f"Inferred transfers from {amc_name}", autosize=True, margin=dict(t=30,b=10))
+
+    fig = go.Figure(go.Bar(
+        x=counts["Buyer AMC"], y=counts["Count"],
+        marker_color="gray"
+    ))
+    fig.update_layout(title=f"Inferred transfers from {amc}", margin=dict(t=30,b=5))
+
     return fig, df
 
-# ---------------------------
-# Build initial HTML
-# ---------------------------
+
+# ============================================================
+# FINAL NETWORK HTML BUILDER
+# ============================================================
+
 def build_network_html(node_color_company="#FFCF9E", node_color_amc="#9EC5FF",
                        edge_color_buy="#2ca02c", edge_color_sell="#d62728",
-                       edge_color_transfer="#888888", edge_thickness=1.4, include_transfers=True):
+                       edge_color_transfer="#888888", edge_thickness=1.4,
+                       include_transfers=True):
+
     G = build_graph(include_transfers=include_transfers)
-    fig, meta = build_plotly_figure(G,
-                                   node_color_amc=node_color_amc,
-                                   node_color_company=node_color_company,
-                                   edge_color_buy=edge_color_buy,
-                                   edge_color_sell=edge_color_sell,
-                                   edge_color_transfer=edge_color_transfer,
-                                   edge_thickness_base=edge_thickness)
-    return make_network_html_d3_gel(fig, meta)
+    fig, meta = build_plotly_figure(
+        G,
+        node_color_amc=node_color_amc,
+        node_color_company=node_color_company,
+        edge_color_buy=edge_color_buy,
+        edge_color_sell=edge_color_sell,
+        edge_color_transfer=edge_color_transfer,
+        edge_thickness=edge_thickness
+    )
+    return make_network_html(fig, meta)
 
 initial_html = build_network_html()
 
-# ---------------------------
-# Mobile CSS & UI
-# ---------------------------
+
+# ============================================================
+# UI LAYOUT
+# ============================================================
+
 responsive_css = """
-.gradio-container { padding:0 !important; margin:0 !important; }
-.plotly-graph-div, .js-plotly-plot, .output_plot { width:100% !important; max-width:100% !important; }
-.js-plotly-plot { height:560px !important; }
-@media(max-width:780px){ .js-plotly-plot{ height:520px !important; } }
-body, html { overflow-x:hidden !important; }
+.js-plotly-plot { height:620px !important; }
+@media(max-width:780px){ .js-plotly-plot{ height:600px !important; } }
 """
 
-with gr.Blocks(css=responsive_css, title="MF Churn Explorer (Gel Motion)") as demo:
-    gr.Markdown("## Mutual Fund Churn Explorer — Gel-like liquid motion (L2)")
+with gr.Blocks(css=responsive_css, title="MF Churn Explorer — Liquid Motion") as demo:
+
+    gr.Markdown("## Mutual Fund Churn Explorer — Liquid Gel + Wave Motion (L2 + Rhythm)")
 
     network_html = gr.HTML(value=initial_html)
 
-    legend_html = gr.HTML(value=\"\"\"
+    legend_html = gr.HTML("""
 <div style='font-family:sans-serif;font-size:14px;margin-top:10px;line-height:1.6;'>
   <b>Legend</b><br>
   <div><span style="display:inline-block;width:28px;border-bottom:3px solid #2ca02c;"></span> BUY (green solid)</div>
   <div><span style="display:inline-block;width:28px;border-bottom:3px dotted #d62728;"></span> SELL (red dotted)</div>
-  <div><span style="display:inline-block;width:28px;border-bottom:3px dashed #888;"></span> TRANSFER (grey dashed — inferred, not actual reported transfer)</div>
-  <div><span style="display:inline-block;width:28px;border-bottom:5px solid #2ca02c;"></span> FRESH BUY (thick green)</div>
-  <div><span style="display:inline-block;width:28px;border-bottom:5px solid #d62728;"></span> COMPLETE EXIT (thick red)</div>
+  <div><span style="display:inline-block;width:28px;border-bottom:3px dashed #888;"></span> TRANSFER (grey dashed — inferred)</div>
+  <div><span style="display:inline-block;width:28px;border-bottom:5px solid #2ca02c;"></span> FRESH BUY</div>
+  <div><span style="display:inline-block;width:28px;border-bottom:5px solid #d62728;"></span> COMPLETE EXIT</div>
 </div>
-\"\"\")
+""")
 
-    with gr.Accordion("Network Customization — expand to edit", open=False):
+    with gr.Accordion("Customize Network", open=False):
         node_color_company = gr.ColorPicker("#FFCF9E", label="Company node color")
         node_color_amc = gr.ColorPicker("#9EC5FF", label="AMC node color")
         edge_color_buy = gr.ColorPicker("#2ca02c", label="BUY edge color")
         edge_color_sell = gr.ColorPicker("#d62728", label="SELL edge color")
         edge_color_transfer = gr.ColorPicker("#888888", label="Transfer edge color")
-        edge_thickness = gr.Slider(0.5, 6.0, value=1.4, step=0.1, label="Edge thickness base")
-        include_transfers = gr.Checkbox(value=True, label="Show AMC→AMC inferred transfers")
-        update_button = gr.Button("Update Network Graph")
+        edge_thickness = gr.Slider(0.5, 6.0, 1.4, step=0.1, label="Edge thickness")
+        include_transfers = gr.Checkbox(True, label="Show inferred AMC→AMC transfers")
+        update_btn = gr.Button("Update Graph")
 
-    gr.Markdown("### Inspect Company (buyers / sellers)")
+    gr.Markdown("### Company Summary")
     select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
     company_plot = gr.Plot()
     company_table = gr.DataFrame()
 
-    gr.Markdown("### Inspect AMC (inferred transfers)")
+    gr.Markdown("### AMC Summary (Inferred Transfers)")
     select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
     amc_plot = gr.Plot()
     amc_table = gr.DataFrame()
 
-    def update_network_html(node_color_company_val, node_color_amc_val,
-                            edge_color_buy_val, edge_color_sell_val, edge_color_transfer_val,
-                            edge_thickness_val, include_transfers_val):
-        return build_network_html(node_color_company=node_color_company_val,
-                                  node_color_amc=node_color_amc_val,
-                                  edge_color_buy=edge_color_buy_val,
-                                  edge_color_sell=edge_color_sell_val,
-                                  edge_color_transfer=edge_color_transfer_val,
-                                  edge_thickness=edge_thickness_val,
-                                  include_transfers=include_transfers_val)
-
-    def on_company_select(cname):
-        fig, df = company_trade_summary(cname)
-        if fig is None:
-            return None, pd.DataFrame([], columns=["Role", "AMC"])
-        return fig, df
-
-    def on_amc_select(aname):
-        fig, df = amc_transfer_summary(aname)
-        if fig is None:
-            return None, pd.DataFrame([], columns=["security", "buyer_amc"])
-        return fig, df
-
-    update_button.click(fn=update_network_html,
-                        inputs=[node_color_company, node_color_amc,
-                                edge_color_buy, edge_color_sell, edge_color_transfer,
-                                edge_thickness, include_transfers],
-                        outputs=[network_html])
-
-    select_company.change(fn=on_company_select, inputs=[select_company], outputs=[company_plot, company_table])
-    select_amc.change(fn=on_amc_select, inputs=[select_amc], outputs=[amc_plot, amc_table])
+    # Callbacks
+    def update_net(c1,c2,buy,sell,trans,thick,inc):
+        return build_network_html(
+            node_color_company=c1,
+            node_color_amc=c2,
+            edge_color_buy=buy,
+            edge_color_sell=sell,
+            edge_color_transfer=trans,
+            edge_thickness=thick,
+            include_transfers=inc
+        )
+
+    update_btn.click(
+        update_net,
+        inputs=[node_color_company,node_color_amc,
+                edge_color_buy,edge_color_sell,edge_color_transfer,
+                edge_thickness,include_transfers],
+        outputs=[network_html]
+    )
+
+    def on_company(c):
+        fig,df = company_trade_summary(c)
+        return fig,df
+
+    def on_amc(a):
+        fig,df = amc_transfer_summary(a)
+        return fig,df
+
+    select_company.change(on_company, inputs=[select_company], outputs=[company_plot,company_table])
+    select_amc.change(on_amc, inputs=[select_amc], outputs=[amc_plot,amc_table])
+
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()