Update app.py

app.py

@@ -1,9 +1,7 @@
 # app.py
-# Interactive MF churn explorer — Plotly graph with node click-to-focus
-# + Legend
-# + Fixed JS (labels hide properly)
-# + Mobile-friendly
-# + HF iframe safe
+# D3 physics (client-side) + Plotly visualization for MF churn explorer
+# Option A: Replace Python layout with D3 force simulation in browser
+# Requirements: gradio, networkx, plotly, pandas, numpy
 
 import gradio as gr
 import pandas as pd
@@ -13,10 +11,9 @@ 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"
@@ -57,111 +54,91 @@ SELL_MAP = {
 COMPLETE_EXIT = {"DSP MF": ["Shriram Finance"]}
 FRESH_BUY = {"HDFC MF": ["Tata Elxsi"], "UTI MF": ["Adani Ports"], "Mirae MF": ["HAL"]}
 
-
 def sanitize_map(m):
     out = {}
     for k, vals in m.items():
         out[k] = [v for v in vals if v in COMPANIES]
     return out
 
-
 BUY_MAP = sanitize_map(BUY_MAP)
 SELL_MAP = sanitize_map(SELL_MAP)
 COMPLETE_EXIT = sanitize_map(COMPLETE_EXIT)
 FRESH_BUY = sanitize_map(FRESH_BUY)
 
-# ============================================================
+# ---------------------------
 # GRAPH BUILDING
-# ============================================================
-
+# ---------------------------
 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}))
 
-
 def infer_amc_transfers(buy_map, sell_map):
     transfers = defaultdict(int)
-    c2s = defaultdict(list)
-    c2b = defaultdict(list)
-
+    company_to_sellers = defaultdict(list)
+    company_to_buyers = defaultdict(list)
     for amc, comps in sell_map.items():
         for c in comps:
-            c2s[c].append(amc)
-
+            company_to_sellers[c].append(amc)
     for amc, comps in buy_map.items():
         for c in comps:
-            c2b[c].append(amc)
-
-    for c in set(c2s.keys()) | set(c2b.keys()):
-        for s in c2s[c]:
-            for b in c2b[c]:
-                transfers[(s, b)] += 1
-
-    output = []
-    for (s, b), w in transfers.items():
-        output.append((s, b, {"action": "transfer", "weight": w}))
-    return output
-
+            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
+    edge_list = []
+    for (s,b), w in transfers.items():
+        edge_list.append((s,b, {"action": "transfer", "weight": w}))
+    return edge_list
 
 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")
-
-    # company edges
-    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"]])
-
-    # inferred transfer edges
-    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")
+    for u, v, attrs in company_edges:
+        if u in G.nodes and v in G.nodes:
+            if G.has_edge(u, v):
+                G[u][v]["weight"] += attrs.get("weight",1)
+                G[u][v]["actions"].append(attrs["action"])
             else:
-                G.add_edge(s, b, weight=attr["weight"], actions=["transfer"])
-
+                G.add_edge(u, v, weight=attrs.get("weight",1), actions=[attrs["action"]])
+    if include_transfers:
+        for s,b,attrs in transfer_edges:
+            if s in G.nodes and b in G.nodes:
+                if G.has_edge(s,b):
+                    G[s][b]["weight"] += attrs.get("weight",1)
+                    G[s][b]["actions"].append("transfer")
+                else:
+                    G.add_edge(s,b,weight=attrs.get("weight",1), actions=["transfer"])
     return G
 
-# ============================================================
-# PLOTLY FIGURE
-# ============================================================
-
-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
-):
-    pos = nx.spring_layout(G, seed=42, k=1.2)
-
+# ---------------------------
+# Build Plotly figure (positions will be set by D3 in browser)
+# ---------------------------
+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):
+    # For D3 we don't need Python positions. Use zeros placeholder
     node_names = []
     node_x = []
     node_y = []
@@ -170,97 +147,61 @@ def build_plotly_figure(
 
     for n, d in G.nodes(data=True):
         node_names.append(n)
-        x, y = pos[n]
-        node_x.append(x)
-        node_y.append(y)
-
+        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_color.append(node_color_amc); node_size.append(36)
         else:
-            node_color.append(node_color_company)
-            node_size.append(56)
+            node_color.append(node_color_company); node_size.append(56)
 
     edge_traces = []
-    edge_source = []
-    edge_target = []
+    edge_source_index = []
+    edge_target_index = []
     edge_colors = []
     edge_widths = []
-
     for u, v, attrs in G.edges(data=True):
-        x0, y0 = pos[u]
-        x1, y1 = pos[v]
-        acts = attrs["actions"]
-        weight = attrs["weight"]
-
+        # placeholder coordinates, will be updated by D3
+        edge_traces.append(go.Scatter(x=[0,0], y=[0,0], mode="lines",
+                                      line=dict(color="#888", width=1), hoverinfo="none", opacity=1.0))
+        edge_source_index.append(node_names.index(u))
+        edge_target_index.append(node_names.index(v))
+        acts = attrs.get("actions", [])
+        weight = attrs.get("weight",1)
         if "complete_exit" in acts:
-            color = edge_color_sell
-            width = edge_thickness_base * 3
-            dash = "solid"
+            edge_colors.append(edge_color_sell); edge_widths.append(edge_thickness_base*3)
         elif "fresh_buy" in acts:
-            color = edge_color_buy
-            width = edge_thickness_base * 3
-            dash = "solid"
+            edge_colors.append(edge_color_buy); edge_widths.append(edge_thickness_base*3)
         elif "transfer" in acts:
-            color = edge_color_transfer
-            width = edge_thickness_base * (1 + np.log1p(weight))
-            dash = "dash"
+            edge_colors.append(edge_color_transfer); edge_widths.append(edge_thickness_base*(1+np.log1p(weight)))
         elif "sell" in acts:
-            color = edge_color_sell
-            width = edge_thickness_base * (1 + np.log1p(weight))
-            dash = "dot"
+            edge_colors.append(edge_color_sell); edge_widths.append(edge_thickness_base*(1+np.log1p(weight)))
         else:
-            color = edge_color_buy
-            width = edge_thickness_base * (1 + np.log1p(weight))
-            dash = "solid"
-
-        edge_traces.append(
-            go.Scatter(
-                x=[x0, x1],
-                y=[y0, y1],
-                mode="lines",
-                line=dict(color=color, width=width, dash=dash),
-                hoverinfo="none",
-                opacity=1.0
-            )
-        )
-
-        edge_source.append(node_names.index(u))
-        edge_target.append(node_names.index(v))
-        edge_colors.append(color)
-        edge_widths.append(width)
-
-    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="#333")),
-        text=node_names,
-        textposition="top center",
-        hoverinfo="text"
-    )
+            edge_colors.append(edge_color_buy); edge_widths.append(edge_thickness_base*(1+np.log1p(weight)))
 
-    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)
-    )
+    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")
 
+    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))
     meta = {
         "node_names": node_names,
-        "edge_source_index": edge_source,
-        "edge_target_index": edge_target,
+        "edge_source_index": edge_source_index,
+        "edge_target_index": edge_target_index,
         "edge_colors": edge_colors,
-        "edge_widths": edge_widths
+        "edge_widths": edge_widths,
+        "node_colors": node_color,
+        "node_sizes": node_size
     }
-
     return fig, meta
-# ================= PART 2 / 3 =================
-# HTML builder and JS (with escaped braces for f-string)
-def make_network_html(fig, meta, div_id="network-plot-div"):
+
+def make_network_html_d3(fig, meta, div_id="network-plot-div"):
+    """
+    Build HTML embedding Plotly figure and D3 physics logic.
+    Important: all { and } inside the JS template below are doubled {{ }} so f-string stays valid.
+    """
     fig_json = json.dumps(fig.to_plotly_json())
     meta_json = json.dumps(meta)
 
@@ -268,108 +209,163 @@ def make_network_html(fig, meta, div_id="network-plot-div"):
 <div id="{div_id}" style="width:100%;height:520px;"></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>
 
+<!-- load libs -->
+<script src="https://d3js.org/d3.v7.min.js"></script>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
 <script>
+// Embed figure and metadata
 const fig = {fig_json};
 const meta = {meta_json};
 
+// create plot
 const container = document.getElementById("{div_id}");
-
 Plotly.newPlot(container, fig.data, fig.layout, {{responsive:true}});
 
+// indices
 const nodeTraceIndex = fig.data.length - 1;
 const edgeCount = fig.data.length - 1;
 
-const nameToIndex = {{}}; 
-meta.node_names.forEach((n,i) => nameToIndex[n]=i);
+// build nodes array for D3
+const nodes = meta.node_names.map((n, i) => {{
+    return {{id: i, name: n, r: meta.node_sizes[i] || 20}};
+}});
 
-// focusNode: show only clicked node + its direct neighbors (Option A)
+// build links array
+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] || 1}};
+}});
+
+// D3 force simulation parameters tuned for mobile friendliness
+const simulation = d3.forceSimulation(nodes)
+    .force("link", d3.forceLink(links).id(d => d.id).distance(80).strength(0.8))
+    .force("charge", d3.forceManyBody().strength(-150))
+    .force("collision", d3.forceCollide().radius(d => d.r * 0.6))
+    .force("center", d3.forceCenter(0,0));
+
+// Keep track of whether to keep sim running
+let stopSimulation = false;
+let lastTickTime = Date.now();
+let frameSkip = 0;
+
+// throttle Plotly updates: update every N ticks for performance
+let tickCounter = 0;
+simulation.on("tick", () => {{
+    tickCounter++;
+    // throttle updates - every 2 ticks (adjustable)
+    if (tickCounter % 2 !== 0) return;
+
+    // update node coordinates arrays
+    const xs = nodes.map(n => n.x || 0);
+    const ys = nodes.map(n => n.y || 0);
+
+    // update node trace position
+    Plotly.restyle(container, {{ 'x': [xs], 'y': [ys] }}, [nodeTraceIndex]);
+
+    // update each edge trace
+    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].x || 0;
+        const sy = nodes[sIdx].y || 0;
+        const tx = nodes[tIdx].x || 0;
+        const ty = nodes[tIdx].y || 0;
+        Plotly.restyle(container, {{ 'x': [[sx, tx]], 'y': [[sy, ty]] }}, [e]);
+    }}
+
+    // stop the simulation gracefully after it's cooled
+    if (simulation.alpha() < 0.03 || stopSimulation) {{
+        simulation.stop();
+    }}
+}});
+
+// allow explicit stop
+document.getElementById("{div_id}-stop").addEventListener('click', () => {{
+    stopSimulation = true;
+}});
+
+// Map node name -> index for click focus
+const nameToIndex = {{}};
+meta.node_names.forEach((n,i) => nameToIndex[n] = i);
+
+// focusNode: hides everything except node + neighbors
 function focusNode(nodeName) {{
     const idx = nameToIndex[nodeName];
-    const keep = new Set([idx]);
-
+    const keepSet = new Set([idx]);
+    // find neighbors
     for (let e = 0; e < meta.edge_source_index.length; e++) {{
         const s = meta.edge_source_index[e];
         const t = meta.edge_target_index[e];
-        if (s === idx) {{ keep.add(t); }}
-        if (t === idx) {{ keep.add(s); }}
+        if (s === idx) keepSet.add(t);
+        if (t === idx) keepSet.add(s);
     }}
 
-    // Update nodes (hide others + hide labels)
+    // node opacity and label colors
     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)) {{
+        if (keepSet.has(i)) {{
             nodeOp[i] = 1.0;
             textColors[i] = "black";
         }}
     }}
-
     Plotly.restyle(container, {{
         "marker.opacity": [nodeOp],
         "textfont.color": [textColors]
     }}, [nodeTraceIndex]);
 
-    // Update edges: show only edges connecting kept nodes
+    // edges: show only those connecting kept nodes
     for (let e = 0; e < edgeCount; e++) {{
         const s = meta.edge_source_index[e];
         const t = meta.edge_target_index[e];
-        const show = (keep.has(s) && keep.has(t));
+        const show = keepSet.has(s) && keepSet.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]);
+        Plotly.restyle(container, {{ 'line.color': [color], 'line.width': [width] }}, [e]);
     }}
 
     // zoom to bounding box of kept nodes
-    const nodes = fig.data[nodeTraceIndex];
+    const nodesTrace = fig.data[nodeTraceIndex];
     const xs = [], ys = [];
     for (let j = 0; j < meta.node_names.length; j++) {{
-        if (keep.has(j)) {{
-            xs.push(nodes.x[j]); ys.push(nodes.y[j]);
+        if (keepSet.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 + 0.05;
-        const padY = (ymax - ymin) * 0.4 + 0.05;
-        Plotly.relayout(container, {{
-            xaxis: {{ range: [xmin - padX, xmax + padX] }},
-            yaxis: {{ range: [ymin - padY, ymax + padY] }}
-        }});
+        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] }} }});
     }}
 }}
 
-// reset view: restore nodes and edges
+// reset view function: restore everything and restart a short simulation to settle
 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]);
+    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, {{ 'line.color': [meta.edge_colors[e]], 'line.width': [meta.edge_widths[e]] }}, [e]);
     }}
-
+    // autorange
     Plotly.relayout(container, {{ xaxis: {{autorange:true}}, yaxis: {{autorange:true}} }});
+
+    // restart a short simulation to re-space nodes
+    stopSimulation = false;
+    simulation.alpha(0.6);
+    simulation.restart();
 }}
 
-// attach click handler
+// click handler: only react if node trace clicked
 container.on('plotly_click', function(eventData) {{
     const p = eventData.points[0];
     if (p.curveNumber === nodeTraceIndex) {{
@@ -379,77 +375,71 @@ container.on('plotly_click', function(eventData) {{
     }}
 }});
 
-// reset button
+// reset button hookup
 document.getElementById("{div_id}-reset").addEventListener('click', function() {{
     resetView();
 }});
+
 </script>
 """
     return html
 
-# helper to build final html block
-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):
-    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(fig, meta)
-
-# initial HTML
-initial_html = build_network_html()
-# ================= PART 3 / 3 =================
-# company & amc summaries, UI and callbacks
-
-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]
-
+# ---------------------------
+# Company / AMC inspection helpers (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]
     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"])
-
+        return None, pd.DataFrame([], columns=["Role","AMC"])
     counts = df.groupby("Role").size().reset_index(name="Count")
-    colors = ["green", "red", "orange", "black"][:len(counts)]
-    fig = go.Figure(go.Bar(x=counts["Role"], y=counts["Count"], marker_color=colors))
-    fig.update_layout(title_text=f"Trade summary for {company}", 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_text=f"Trade summary for {company_name}", autosize=True, margin=dict(t=30,b=10))
     return fig, df
 
-def amc_transfer_summary(amc):
-    sold = SELL_MAP.get(amc, [])
+def amc_transfer_summary(amc_name):
+    sold = SELL_MAP.get(amc_name, [])
     transfers = []
     for s in sold:
-        buyers = [a for a, cs in BUY_MAP.items() if s in cs]
+        buyers = [a for a, comps in BUY_MAP.items() if s in comps]
         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"])
+        return None, pd.DataFrame([], columns=["security","buyer_amc"])
     counts = df["buyer_amc"].value_counts().reset_index()
-    counts.columns = ["Buyer AMC", "Count"]
+    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}", autosize=True, margin=dict(t=30, b=10))
+    fig.update_layout(title_text=f"Inferred transfers from {amc_name}", autosize=True, margin=dict(t=30,b=10))
     return fig, df
 
-# Mobile-friendly CSS (minimal)
+# ---------------------------
+# Build the initial HTML (Plotly + D3)
+# ---------------------------
+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):
+    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(fig, meta)
+
+initial_html = build_network_html()
+
+# ---------------------------
+# Mobile CSS and Gradio UI
+# ---------------------------
 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; }
@@ -458,56 +448,25 @@ responsive_css = """
 body, html { overflow-x:hidden !important; }
 """
 
-# Build UI
-with gr.Blocks(css=responsive_css, title="MF Churn Explorer") as demo:
-    gr.Markdown("## Mutual Fund Churn Explorer — Interactive Graph")
+with gr.Blocks(css=responsive_css, title="MF Churn Explorer (D3 physics)") as demo:
+    gr.Markdown("## Mutual Fund Churn Explorer — D3 force-directed layout (mobile friendly)")
 
-    # Chart HTML (interactive client-side)
+    # interactive chart (HTML block)
     network_html = gr.HTML(value=initial_html)
 
-    # Legend (ONLY addition)
+    # Legend (updated with inferred note)
     legend_html = gr.HTML(value="""
-<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 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>
 """)
 
-    # Controls (collapsed by default)
+    # Controls (unchanged)
     with gr.Accordion("Network Customization — expand to edit", open=False):
         node_color_company = gr.ColorPicker("#FFCF9E", label="Company node color")
         node_color_amc = gr.ColorPicker("#9EC5FF", label="AMC node color")
@@ -518,23 +477,17 @@ with gr.Blocks(css=responsive_css, title="MF Churn Explorer") as demo:
         include_transfers = gr.Checkbox(value=True, label="Show AMC→AMC inferred transfers")
         update_button = gr.Button("Update Network Graph")
 
-    # Company inspect (unchanged)
+    # Company & AMC inspect (unchanged)
     gr.Markdown("### Inspect Company (buyers / sellers)")
     select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
     company_plot = gr.Plot()
     company_table = gr.DataFrame()
 
-    # AMC inspect (unchanged)
     gr.Markdown("### Inspect AMC (inferred transfers)")
     select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
     amc_plot = gr.Plot()
     amc_table = gr.DataFrame()
 
-    # Place legend right after the chart (no layout changes beyond that)
-    # We add both components so legend appears below the chart area.
-    # Note: the order of declaration in Blocks determines visual order.
-    # legend_html.update(value=legend_html.value)  # ensure added
-
     # Callbacks
     def update_network_html(node_color_company_val, node_color_amc_val,
                             edge_color_buy_val, edge_color_sell_val, edge_color_transfer_val,
@@ -568,6 +521,5 @@ with gr.Blocks(css=responsive_css, title="MF Churn Explorer") as demo:
     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])
 
-# Run
 if __name__ == "__main__":
     demo.launch()