Update app.py

app.py

@@ -1,18 +1,19 @@
 # app.py
-# Full Working Weighted Arc Diagram
-# Short labels on nodes → full labels on click
-# Highlight on click, dim rest
-# Includes: BUY arcs, SELL arcs, TRANSFER arcs, LOOPS
-# And Company/AMC inspector panels
+# 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
+import networkx as nx
+import plotly.graph_objects as go
+import numpy as np
 import json
 from collections import defaultdict
 
-###############################################################
+# ============================================================
 # DATA
-###############################################################
+# ============================================================
 
 AMCS = [
     "SBI MF", "ICICI Pru MF", "HDFC MF", "Nippon India MF", "Kotak MF",
@@ -51,303 +52,548 @@ SELL_MAP = {
     "DSP MF": ["HAL", "Shriram Finance"]
 }
 
-FRESH_BUY = {"HDFC MF": ["Tata Elxsi"], "UTI MF": ["Adani Ports"], "Mirae MF": ["HAL"]}
 COMPLETE_EXIT = {"DSP MF": ["Shriram Finance"]}
+FRESH_BUY = {"HDFC MF": ["Tata Elxsi"], "UTI MF": ["Adani Ports"], "Mirae MF": ["HAL"]}
 
-###############################################################
-# LABELS
-###############################################################
-
-SHORT_LABEL = {
-    "SBI MF": "SBI", "ICICI Pru MF": "ICICI", "HDFC MF": "HDFC",
-    "Nippon India MF": "NIPP", "Kotak MF": "KOT", "UTI MF": "UTI",
-    "Axis MF": "AXIS", "Aditya Birla SL MF": "ABSL", "Mirae MF": "MIR",
-    "DSP MF": "DSP",
-
-    "HDFC Bank": "HDFCB", "ICICI Bank": "ICICB", "Bajaj Finance": "BajFin",
-    "Bajaj Finserv": "BajFsv", "Adani Ports": "AdPorts", "Tata Motors": "TataM",
-    "Shriram Finance": "ShrFin", "HAL": "HAL", "TCS": "TCS",
-    "AU Small Finance Bank": "AUSFB", "Pearl Global": "PearlG",
-    "Hindalco": "Hind", "Tata Elxsi": "Elxsi", "Cummins India": "Cumm",
-    "Vedanta": "Ved"
-}
+def sanitize_map(m):
+    out = {}
+    for k, vals in m.items():
+        out[k] = [v for v in vals if v in COMPANIES]
+    return out
 
-FULL_LABEL = {k: k for k in SHORT_LABEL}
+BUY_MAP = sanitize_map(BUY_MAP)
+SELL_MAP = sanitize_map(SELL_MAP)
+COMPLETE_EXIT = sanitize_map(COMPLETE_EXIT)
+FRESH_BUY = sanitize_map(FRESH_BUY)
 
-###############################################################
-# TRANSFERS
-###############################################################
+# ============================================================
+# GRAPH BUILDING
+# ============================================================
 
-def infer_transfers(buy_map, sell_map):
-    c2s = defaultdict(list)
-    c2b = defaultdict(list)
+def infer_amc_transfers(buy_map, sell_map):
     transfers = defaultdict(int)
+    comp_sellers = defaultdict(list)
+    comp_buyers = defaultdict(list)
 
-    for a, cs in sell_map.items():
-        for c in cs:
-            c2s[c].append(a)
+    for amc, comps in sell_map.items():
+        for c in comps:
+            comp_sellers[c].append(amc)
 
-    for a, cs in buy_map.items():
-        for c in cs:
-            c2b[c].append(a)
+    for amc, comps in buy_map.items():
+        for c in comps:
+            comp_buyers[c].append(amc)
 
-    for c in set(c2s) | set(c2b):
-        for s in c2s[c]:
-            for b in c2b[c]:
+    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
 
-    return transfers
+    out = []
+    for (s,b), w in transfers.items():
+        out.append((s, b, {"action":"transfer","weight":w}))
+    return out
 
-TRANSFERS = infer_transfers(BUY_MAP, SELL_MAP)
+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")
+
+    # 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"])
+
+    return G
+
+# ============================================================
+# 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=1.4):
+
+    node_names = []
+    node_x = []
+    node_y = []
+    node_colors = []
+    node_sizes = []
+
+    for n, d in G.nodes(data=True):
+        node_names.append(n)
+        node_x.append(0)
+        node_y.append(0)
+        if d["type"] == "amc":
+            node_colors.append(node_color_amc)
+            node_sizes.append(36)
+        else:
+            node_colors.append(node_color_company)
+            node_sizes.append(56)
+
+    edge_traces = []
+    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:
+            e_colors.append(edge_color_sell)
+            e_widths.append(edge_thickness * 3)
+        elif "fresh_buy" in acts:
+            e_colors.append(edge_color_buy)
+            e_widths.append(edge_thickness * 3)
+        elif "transfer" in acts:
+            e_colors.append(edge_color_transfer)
+            e_widths.append(edge_thickness * (1 + np.log1p(w)))
+        elif "sell" in acts:
+            e_colors.append(edge_color_sell)
+            e_widths.append(edge_thickness * (1 + np.log1p(w)))
+        else:
+            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(
+        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": src_idx,
+        "edge_target_index": tgt_idx,
+        "edge_colors": e_colors,
+        "edge_widths": e_widths,
+        "node_sizes": node_sizes
+    }
 
-###############################################################
-# NODE ORDERING (interleave)
-###############################################################
+    return fig, meta
 
-def interleave(a, b):
-    out = []
-    L = max(len(a), len(b))
-    for i in range(L):
-        if i < len(a): out.append(a[i])
-        if i < len(b): out.append(b[i])
-    return out
 
-NODES = interleave(AMCS, COMPANIES)
-NODE_TYPE = {n: ("amc" if n in AMCS else "company") for n in NODES}
+# ============================================================
+# 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)
 
-###############################################################
-# INSPECT PANELS
-###############################################################
+    html = f"""
+<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>
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<script>
+const fig = {fig_json};
+const meta = {meta_json};
+
+const container = document.getElementById("{div_id}");
+
+Plotly.newPlot(container, fig.data, fig.layout, {{responsive:true}});
+
+const nodeTraceIndex = fig.data.length - 1;
+const edgeCount = fig.data.length - 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]
+    }};
+}});
+
+// D3 simulation
+const simulation = d3.forceSimulation(nodes)
+    .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);
+
+let tickCount = 0;
+const maxTicks = 400;
+
+simulation.on("tick", () => {{
+    tickCount++;
+
+    nodes.forEach(n => {{
+        const tx = n.x || 0;
+        const ty = n.y || 0;
+
+        // 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;
+
+        // Heavy damping
+        n.vx_smooth *= 0.90;
+        n.vy_smooth *= 0.90;
+
+        // 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;
+    }});
+
+    // 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 edges
+    for (let e = 0; e < edgeCount; 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]
+        );
+    }}
+
+    if (simulation.alpha() < 0.02 || tickCount > maxTicks) {{
+        simulation.stop();
+    }}
+}});
+
+// STOP button
+document.getElementById("{div_id}-stop").addEventListener("click", () => {{
+    simulation.stop();
+}});
+
+// FOCUS and RESET
+const nameToIndex = {{}};
+meta.node_names.forEach((n,i)=> nameToIndex[n] = i);
+
+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);
+        if (t === idx) keep.add(s);
+    }}
+
+    const N = meta.node_names.length;
+    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": [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);
+
+        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]);
+    }}
+}}
+
+function resetView() {{
+    const N = meta.node_names.length;
+    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]);
+    }}
+
+    simulation.alpha(0.5);
+    simulation.restart();
+}}
+
+document.getElementById("{div_id}-reset").addEventListener("click", 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 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),
-        "AMC": buyers + sellers
+        "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, df
+        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=f"Trades for {company}", margin=dict(t=30,b=5))
 
-    fig = {
-        "data": [{"type": "bar", "x": df["Role"], "y": [1]*len(df)}],
-        "layout": {"title": f"Trades for {company}"}
-    }
     return fig, df
 
-###############################################################
-# FULL ARC DIAGRAM HTML + JS
-###############################################################
 
-ARC_HTML = """
-<div id="arc-container" style="width:100%; height:720px;"></div>
+def amc_transfer_summary(amc):
+    sold = SELL_MAP.get(amc, [])
+    transfers = []
+    for s in sold:
+        buyers = [a for a, cs in BUY_MAP.items() if s in cs]
+        for b in buyers:
+            transfers.append({"security": s, "buyer_amc": b})
 
-<div style="margin-top:12px;font-size:14px;">
-<b>Legend:</b><br>
-• <span style='color:#2e8540;'>Green = BUY</span><br>
-• <span style='color:#c0392b;'>Red dotted = SELL</span><br>
-• <span style='color:gray;'>Gray = Transfer</span><br>
-• <span style='color:#227a6d;'>Teal = Loop</span><br>
-Short labels → Click a node to expand.
-</div>
+    df = pd.DataFrame(transfers)
 
-<script src="https://d3js.org/d3.v7.min.js"></script>
+    if df.empty:
+        return None, pd.DataFrame([], columns=["security","buyer_amc"])
 
-<script>
-const NODES = __NODES__;
-const NODE_TYPE = __NODE_TYPE__;
-const BUYS = __BUYS__;
-const SELLS = __SELLS__;
-const TRANSFERS = __TRANSFERS__;
-const SHORT_LABEL = __SHORT_LABEL__;
-const FULL_LABEL = __FULL_LABEL__;
-
-function drawArcDiagram() {
-    const container = document.getElementById("arc-container");
-    container.innerHTML = "";
-
-    const w = container.clientWidth;
-    const h = 720;
-
-    const svg = d3.select(container)
-        .append("svg")
-        .attr("width", w)
-        .attr("height", h)
-        .attr("viewBox", [-w/2, -h/2, w, h]);
-
-    const R = Math.min(w, h) * 0.38;
-
-    function angle(i) { return (i / NODES.length) * 2 * Math.PI; }
-
-    const positions = NODES.map((name, i) => {
-        const a = angle(i) - Math.PI/2;
-        return {
-            name,
-            x: Math.cos(a) * R,
-            y: Math.sin(a) * R
-        };
-    });
-
-    const indexOf = {};
-    NODES.forEach((n, i) => indexOf[n] = i);
-
-    const nodeG = svg.append("g")
-        .selectAll("g")
-        .data(positions)
-        .enter()
-        .append("g")
-        .attr("transform", d => `translate(${d.x},${d.y})`);
-
-    nodeG.append("circle")
-        .attr("r", 18)
-        .attr("fill", d => NODE_TYPE[d.name] === "amc" ? "#2b6fa6" : "#f2c88d")
-        .attr("stroke", "#222")
-        .attr("stroke-width", 1.5)
-        .style("cursor", "pointer");
-
-    nodeG.append("text")
-        .text(d => SHORT_LABEL[d.name])
-        .attr("text-anchor", "middle")
-        .attr("dy", "0.35em")
-        .style("fill", "white")
-        .style("font-size", "10px")
-        .style("pointer-events", "none");
-
-    function curvePath(x1,y1,x2,y2,flip=false) {
-        const mx = (x1 + x2) / 2;
-        const my = (y1 + y2) / 2;
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-        const dist = Math.sqrt(dx*dx + dy*dy);
-        const nx = -dy / dist;
-        const ny = dx / dist;
-        const curve = flip ? -1 : 1;
-        const cx = mx + nx * dist * 0.35 * curve;
-        const cy = my + ny * dist * 0.35 * curve;
-        return `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`;
-    }
+    counts = df["buyer_amc"].value_counts().reset_index()
+    counts.columns = ["Buyer AMC","Count"]
 
-    const strokeScale = d3.scaleLinear()
-        .domain([1, 4])
-        .range([1.5, 6]);
-
-    const edgeG = svg.append("g");
-
-    BUYS.forEach(b => {
-        const s = b[0], t = b[1], w = b[2];
-        const a = positions[indexOf[s]];
-        const c = positions[indexOf[t]];
-        edgeG.append("path")
-            .attr("d", curvePath(a.x, a.y, c.x, c.y, false))
-            .attr("stroke", "#2e8540")
-            .attr("stroke-width", strokeScale(w))
-            .attr("fill", "none")
-            .attr("opacity", 0.9)
-            .attr("data-src", s)
-            .attr("data-tgt", t);
-    });
-
-    SELLS.forEach(s => {
-        const c = s[0], a = s[1], w = s[2];
-        const sp = positions[indexOf[c]];
-        const tp = positions[indexOf[a]];
-        edgeG.append("path")
-            .attr("d", curvePath(sp.x, sp.y, tp.x, tp.y, true))
-            .attr("stroke", "#c0392b")
-            .attr("stroke-width", strokeScale(w))
-            .attr("stroke-dasharray", "4 3")
-            .attr("fill", "none")
-            .attr("opacity", 0.85)
-            .attr("data-src", c)
-            .attr("data-tgt", a);
-    });
-
-    TRANSFERS.forEach(([s,b,w]) => {
-        const sp = positions[indexOf[s]];
-        const tp = positions[indexOf[b]];
-        edgeG.append("path")
-            .attr("d", curvePath(sp.x, sp.y, tp.x, tp.y, false))
-            .attr("stroke", "#777")
-            .attr("stroke-width", strokeScale(w))
-            .attr("fill", "none")
-            .attr("opacity", 0.6)
-            .attr("data-src", s)
-            .attr("data-tgt", b);
-    });
-
-    function highlight(name) {
-        nodeG.selectAll("circle")
-            .style("opacity", d => d.name === name ? 1 : 0.2);
-        nodeG.selectAll("text")
-            .text(d => d.name === name ? FULL_LABEL[d.name] : SHORT_LABEL[d.name])
-            .style("opacity", d => d.name === name ? 1 : 0.2);
-
-        edgeG.selectAll("path")
-            .style("opacity", function() {
-                return (this.dataset.src === name || this.dataset.tgt === name) ? 1 : 0.05;
-            });
-    }
+    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))
 
-    function reset() {
-        nodeG.selectAll("circle").style("opacity", 1);
-        nodeG.selectAll("text")
-            .text(d => SHORT_LABEL[d.name])
-            .style("opacity", 1);
-        edgeG.selectAll("path").style("opacity", 1);
-    }
+    return fig, df
 
-    nodeG.on("click", function(e, d) {
-        highlight(d.name);
-        e.stopPropagation();
-    });
 
-    svg.on("click", () => reset());
-}
+# ============================================================
+# FINAL NETWORK HTML BUILDER
+# ============================================================
 
-drawArcDiagram();
+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):
 
-window.addEventListener("resize", drawArcDiagram);
-</script>
+    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=edge_thickness
+    )
+    return make_network_html(fig, meta)
+
+initial_html = build_network_html()
+
+
+# ============================================================
+# UI LAYOUT
+# ============================================================
+
+responsive_css = """
+.js-plotly-plot { height:620px !important; }
+@media(max-width:780px){ .js-plotly-plot{ height:600px !important; } }
 """
 
-###############################################################
-# REPLACE JS PLACEHOLDERS
-###############################################################
-
-ARC_HTML = ARC_HTML.replace("__NODES__", json.dumps(NODES))
-ARC_HTML = ARC_HTML.replace("__NODE_TYPE__", json.dumps(NODE_TYPE))
-ARC_HTML = ARC_HTML.replace("__BUYS__", json.dumps([
-    (a, c, (3 if (a in FRESH_BUY and c in FRESH_BUY[a]) else 1))
-    for a, cs in BUY_MAP.items()
-    for c in cs
-]))
-ARC_HTML = ARC_HTML.replace("__SELLS__", json.dumps([
-    (c, a, (3 if (a in COMPLETE_EXIT and c in COMPLETE_EXIT[a]) else 1))
-    for a, cs in SELL_MAP.items()
-    for c in cs
-]))
-ARC_HTML = ARC_HTML.replace("__TRANSFERS__", json.dumps([
-    (s, b, w) for (s, b), w in TRANSFERS.items()
-]))
-ARC_HTML = ARC_HTML.replace("__SHORT_LABEL__", json.dumps(SHORT_LABEL))
-ARC_HTML = ARC_HTML.replace("__FULL_LABEL__", json.dumps(FULL_LABEL))
-
-###############################################################
-# UI
-###############################################################
-
-with gr.Blocks(title="MF Churn Arc Diagram") as demo:
-    gr.Markdown("## Mutual Fund Churn — Arc Diagram (Full JS)")
-    gr.HTML(ARC_HTML)
-
-    gr.Markdown("### Inspect Company")
-    dd = gr.Dropdown(COMPANIES, label="Pick a company")
-    plot = gr.Plot()
-    table = gr.DataFrame()
-
-    dd.change(company_trade_summary, dd, [plot, table])
+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("""
+<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)</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("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, 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("### Company Summary")
+    select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
+    company_plot = gr.Plot()
+    company_table = gr.DataFrame()
+
+    gr.Markdown("### AMC Summary (Inferred Transfers)")
+    select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
+    amc_plot = gr.Plot()
+    amc_table = gr.DataFrame()
+
+    # 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()