Update app.py

app.py

@@ -1,18 +1,17 @@
 # app.py
-# Static bipartite network for Mutual Fund Churn Explorer
-# Left = AMCs, Right = Companies. Static positions (no animation). Mobile-safe.
+# MBB-style chord diagram (mixed node order) for Mutual Fund churn
+# Uses D3 chord layout in browser, static layout (no physics). Mobile-friendly.
 
 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
-# ---------------------------
+# -------------------------
+# DATA (same as before)
+# -------------------------
 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"
@@ -64,9 +63,9 @@ SELL_MAP = sanitize_map(SELL_MAP)
 COMPLETE_EXIT = sanitize_map(COMPLETE_EXIT)
 FRESH_BUY = sanitize_map(FRESH_BUY)
 
-# ---------------------------
-# Build graph + inferred transfers
-# ---------------------------
+# -------------------------
+# Inferred AMC->AMC transfers (same heuristic)
+# -------------------------
 def infer_amc_transfers(buy_map, sell_map):
     transfers = defaultdict(int)
     c2s = defaultdict(list)
@@ -81,306 +80,95 @@ def infer_amc_transfers(buy_map, sell_map):
         for s in c2s[c]:
             for b in c2b[c]:
                 transfers[(s,b)] += 1
-    out = []
-    for (s,b), w in transfers.items():
-        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")
-    # buys
+    return transfers
+
+transfer_counts = infer_amc_transfers(BUY_MAP, SELL_MAP)
+
+# -------------------------
+# Build mixed ordering (AMC, company, AMC, company...)
+# -------------------------
+def build_mixed_ordering(amcs, companies):
+    mixed = []
+    n = max(len(amcs), len(companies))
+    for i in range(n):
+        if i < len(amcs):
+            mixed.append(amcs[i])
+        if i < len(companies):
+            mixed.append(companies[i])
+    return mixed
+
+NODES = build_mixed_ordering(AMCS, COMPANIES)
+
+# Node types map for styling
+NODE_TYPE = {n: ("amc" if n in AMCS else "company") for n in NODES}
+
+# -------------------------
+# Build flow matrix: nodes x nodes
+# Matrix interpretation:
+# - AMC -> Company for BUY
+# - Company -> AMC for SELL
+# - AMC -> AMC for inferred TRANSFER
+# Fresh buy and complete exit use higher weight
+# -------------------------
+def build_flow_matrix(nodes):
+    idx = {n:i for i,n in enumerate(nodes)}
+    n = len(nodes)
+    M = [[0]*n for _ in range(n)]
+
+    # buys: AMC -> Company
     for amc, comps in BUY_MAP.items():
         for c in comps:
-            if G.has_edge(amc, c):
-                G[amc][c]["weight"] += 1
-                G[amc][c]["actions"].append("buy")
-            else:
-                G.add_edge(amc, c, weight=1, actions=["buy"])
-    # sells
+            if amc in idx and c in idx:
+                w = 1
+                if amc in FRESH_BUY and c in FRESH_BUY.get(amc, []):
+                    w = 3
+                M[idx[amc]][idx[c]] += w
+
+    # sells: Company -> AMC
     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 buy
-    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.get("weight",1)
-                G[s][b]["actions"].append("transfer")
-            else:
-                G.add_edge(s,b, weight=attr.get("weight",1), actions=["transfer"])
-    return G
-
-# ---------------------------
-# Static bipartite layout generator
-# ---------------------------
-def bipartite_positions(G, left_nodes, right_nodes, x_left=-1.0, x_right=1.0, y_pad=0.1):
-    """
-    Place left_nodes at x_left and right_nodes at x_right.
-    Spread nodes vertically from -1..1 with padding y_pad.
-    Returns dict {node: (x,y)}
-    """
-    pos = {}
-    # left column
-    nL = len(left_nodes)
-    if nL == 1:
-        ysL = [0.0]
-    else:
-        span = 2.0 - 2*y_pad
-        ysL = [ -1 + y_pad + i * (span/(nL-1)) for i in range(nL) ]
-    for n, y in zip(left_nodes, ysL):
-        pos[n] = (x_left, y)
-    # right column
-    nR = len(right_nodes)
-    if nR == 1:
-        ysR = [0.0]
-    else:
-        span = 2.0 - 2*y_pad
-        ysR = [ -1 + y_pad + i * (span/(nR-1)) for i in range(nR) ]
-    for n, y in zip(right_nodes, ysR):
-        pos[n] = (x_right, y)
-    return pos
-
-# ---------------------------
-# Build static Plotly figure
-# ---------------------------
-def build_plotly_static_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.6):
-    # positions: left=AMCS, right=COMPANIES
-    pos = bipartite_positions(G, AMCS, COMPANIES, x_left=-1.0, x_right=1.0, y_pad=0.06)
-
-    node_names = []
-    node_x = []
-    node_y = []
-    node_color = []
-    node_size = []
-    node_type = []
-
-    for n, d in G.nodes(data=True):
-        node_names.append(n)
-        x,y = pos[n]
-        node_x.append(x)
-        node_y.append(y)
-        if d["type"] == "amc":
-            node_color.append(node_color_amc); node_size.append(36); node_type.append("amc")
-        else:
-            node_color.append(node_color_company); node_size.append(52); node_type.append("company")
-
-    # create edge traces (one per edge for easy restyle)
-    edge_traces = []
-    edge_src_idx = []
-    edge_tgt_idx = []
-    edge_colors = []
-    edge_widths = []
-
-    for u,v,attrs in G.edges(data=True):
-        x0,y0 = pos[u]; x1,y1 = pos[v]
-        acts = attrs.get("actions", [])
-        w = attrs.get("weight", 1)
-        if "complete_exit" in acts:
-            color = edge_color_sell; width = edge_thickness * 3; dash = "solid"
-        elif "fresh_buy" in acts:
-            color = edge_color_buy; width = edge_thickness * 3; dash = "solid"
-        elif "transfer" in acts:
-            color = edge_color_transfer; width = edge_thickness * (1 + np.log1p(w)); dash = "dash"
-        elif "sell" in acts:
-            color = edge_color_sell; width = edge_thickness * (1 + np.log1p(w)); dash = "dot"
-        else:
-            color = edge_color_buy; width = edge_thickness * (1 + np.log1p(w)); dash = "solid"
-
-        edge_traces.append(go.Scatter(
-            x=[x0, x1], y=[y0, y1],
-            mode="lines",
-            line=dict(color=color, width=width, dash=dash),
-            hoverinfo="text",
-            text=f"{u} → {v} ({', '.join(acts)})"
-        ))
-        edge_src_idx.append(node_names.index(u))
-        edge_tgt_idx.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="#222")),
-        text=node_names,
-        textposition="middle right",
-        hoverinfo="text"
-    )
-
-    fig = go.Figure(data=edge_traces + [node_trace])
-    fig.update_layout(
-        title="Mutual Fund Churn — Static Bipartite Layout",
-        showlegend=False,
-        autosize=True,
-        margin=dict(l=10, r=10, t=40, b=10),
-        xaxis=dict(visible=False),
-        yaxis=dict(visible=False)
-    )
-
-    meta = {
-        "node_names": node_names,
-        "edge_source_index": edge_src_idx,
-        "edge_target_index": edge_tgt_idx,
-        "edge_colors": edge_colors,
-        "edge_widths": edge_widths,
-        "node_x": node_x,
-        "node_y": node_y,
-    }
-
-    return fig, meta
-
-# ---------------------------
-# Make HTML (static) with JS click handlers
-# ---------------------------
-def make_static_html(fig, meta, div_id="network-plot-div"):
-    fig_json = json.dumps(fig.to_plotly_json())
-    meta_json = json.dumps(meta)
-    # NOTE: inside this f-string we must double braces for JS object blocks
-    html = f"""
-<div id="{div_id}" style="width:100%; height:580px;"></div>
-<div style="margin-top:6px;">
-  <button id="{div_id}-reset" style="padding:8px 12px; border-radius:6px;">Reset</button>
-</div>
-
-<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}");
-
-// Render plotly figure (static positions embedded)
-Plotly.newPlot(container, fig.data, fig.layout, {{responsive:true}});
+            if amc in idx and c in idx:
+                w = 1
+                if amc in COMPLETE_EXIT and c in COMPLETE_EXIT.get(amc, []):
+                    w = 3
+                # represent sell as company -> amc
+                M[idx[c]][idx[amc]] += w
 
-const nodeTraceIndex = fig.data.length - 1;
-const edgeCount = fig.data.length - 1;
+    # inferred transfers: AMC -> AMC
+    for (s,b), w in transfer_counts.items():
+        if s in idx and b in idx:
+            M[idx[s]][idx[b]] += w
 
-// Map name -> index
-const nameToIndex = {{}};
-meta.node_names.forEach((n,i) => nameToIndex[n]=i);
+    return M
 
-// Focus node: show only node + neighbors, hide others (including labels)
-function focusNode(name) {{
-    const idx = nameToIndex[name];
-    const keep = new Set([idx]);
+MATRIX = build_flow_matrix(NODES)
 
-    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 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"; }}
-    }}
-
-    Plotly.restyle(container, {{
-        "marker.opacity": [nodeOp],
-        "textfont.color": [textColors]
-    }}, [nodeTraceIndex]);
-
-    // edges: show only those connecting kept nodes
-    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]);
-    }}
-}}
-
-// Reset view
-function resetView() {{
-    const N = meta.node_names.length;
-    Plotly.restyle(container, {{
-        "marker.opacity": [Array(N).fill(1.0)],
-        "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]);
-    }}
-}}
-
-// Hook click
-container.on('plotly_click', function(evt) {{
-    const p = evt.points && evt.points[0];
-    if (p && p.curveNumber === nodeTraceIndex) {{
-        const name = meta.node_names[p.pointNumber];
-        focusNode(name);
-    }}
-}});
-
-// Hook reset button
-document.getElementById("{div_id}-reset").addEventListener("click", resetView);
-</script>
-"""
-    return html
-
-# ---------------------------
-# Company & AMC summaries (unchanged)
-# ---------------------------
+# -------------------------
+# Helper summaries (unchanged)
+# -------------------------
 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]
-
+    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=f"Trade summary for {company}", margin=dict(t=30,b=10))
+    fig = {
+        "data": [{"type":"bar","x": counts["Role"].tolist(), "y": counts["Count"].tolist()}],
+        "layout":{"title":f"Trades for {company}"}
+    }
     return fig, df
 
 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]
+        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)
@@ -388,95 +176,179 @@ def amc_transfer_summary(amc):
         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="gray"))
-    fig.update_layout(title=f"Inferred transfers from {amc}", margin=dict(t=30,b=10))
+    fig = {
+        "data": [{"type":"bar","x": counts["Buyer AMC"].tolist(), "y": counts["Count"].tolist()}],
+        "layout":{"title":f"Inferred transfers from {amc}"}
+    }
     return fig, df
 
-# ---------------------------
-# Build static figure & meta
-# ---------------------------
-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.6,
-                       include_transfers=True):
-    G = build_graph(include_transfers=include_transfers)
-    fig, meta = build_plotly_static_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_static_html(fig, meta)
-
-initial_html = build_network_html()
-
-# ---------------------------
-# Gradio UI
-# ---------------------------
-responsive_css = """
-.js-plotly-plot { height:560px !important; }
-@media(max-width:780px){ .js-plotly-plot{ height:520px !important; } }
-"""
-
-with gr.Blocks(css=responsive_css, title="MF Churn Explorer — Static Bipartite") as demo:
-    gr.Markdown("## Mutual Fund Churn Explorer — Static Bipartite Layout (mobile-friendly)")
+# -------------------------
+# Build HTML with D3 chord
+# -------------------------
+def make_chord_html(nodes, matrix, node_type):
+    nodes_json = json.dumps(nodes)
+    mat_json = json.dumps(matrix)
+    types_json = json.dumps(node_type)
 
-    network_html = gr.HTML(value=initial_html)
+    # D3 chord diagram: mixed nodes around circle, modern palette
+    html = f"""
+<div id="chord-container" style="width:100%; height:640px;"></div>
+<div style="margin-top:8px;">
+  <button id="chord-reset" style="padding:8px 12px; border-radius:6px;">Reset</button>
+</div>
 
-    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 (thick green)</div>
-  <div><span style="display:inline-block;width:28px;border-bottom:5px solid #d62728;"></span> COMPLETE EXIT (thick red)</div>
+<div style="margin-top:10px; font-family:sans-serif; font-size:13px;">
+  <b>Legend</b><br/>
+  <span style="display:inline-block;width:12px;height:12px;background:#2b6fa6;margin-right:6px;border-radius:2px;"></span> AMC nodes<br/>
+  <span style="display:inline-block;width:12px;height:12px;background:#f2c88d;margin-right:6px;border-radius:2px;"></span> Company nodes<br/>
+  <em style="color:#666;">Note: TRANSFER connections are inferred from simultaneous buys/sells, not explicitly reported.</em>
 </div>
-""")
-
-    with gr.Accordion("Customize Network (static)", 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.6, step=0.1, label="Edge thickness")
-        include_transfers = gr.Checkbox(value=True, label="Show inferred AMC→AMC transfers")
-        update_button = gr.Button("Update Graph")
-
-    gr.Markdown("### Inspect Company (buyers / sellers)")
+
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+const NODE_NAMES = {nodes_json};
+const MATRIX = {mat_json};
+const NODE_TYPE = {types_json};
+
+// Dimensions responsive
+const container = document.getElementById("chord-container");
+function draw() {{
+    container.innerHTML = ""; // clear
+    const width = Math.min(900, container.clientWidth || 900);
+    const height = Math.max(420, Math.min(700, Math.floor(width * 0.75)));
+    const outerRadius = Math.min(width, height) * 0.45;
+    const innerRadius = outerRadius * 0.86;
+
+    const svg = d3.select(container)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", [-width/2, -height/2, width, height].join(" "));
+
+    // color scheme
+    const colorNode = d => (NODE_TYPE[d] === "amc") ? "#2b6fa6" : "#f2c88d"; // muted blue and amber
+    const chord = d3.chord()
+        .padAngle(0.02)
+        .sortSubgroups(d3.descending)
+        (MATRIX);
+
+    const arc = d3.arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius + 6);
+
+    const ribbon = d3.ribbon()
+        .radius(innerRadius)
+        .padAngle(0.01);
+
+    // groups (outer arcs)
+    const group = svg.append("g")
+        .selectAll("g")
+        .data(chord.groups)
+        .enter().append("g")
+        .attr("class","group");
+
+    group.append("path")
+        .style("fill", d => colorNode(NODE_NAMES[d.index]))
+        .style("stroke", d => d3.color(colorNode(NODE_NAMES[d.index])).darker(0.6))
+        .attr("d", arc)
+        .attr("cursor","pointer")
+        .on("click", (e,d) => focusNode(d.index));
+
+    // labels
+    group.append("text")
+        .each(function(d) {{
+            const name = NODE_NAMES[d.index];
+            d.angle = (d.startAngle + d.endAngle) / 2;
+            this._currentAngle = d.angle;
+        }})
+        .attr("dy", ".35em")
+        .attr("transform", function(d) {{
+            const angle = (d.startAngle + d.endAngle) / 2;
+            const deg = angle * 180 / Math.PI - 90;
+            const rotate = deg;
+            const translate = outerRadius + 18;
+            return "rotate(" + rotate + ") translate(" + translate + ")" + ( (deg > 90) ? " rotate(180)" : "" );
+        }})
+        .style("font-family", "sans-serif")
+        .style("font-size", Math.max(10, Math.min(14, outerRadius*0.04)))
+        .style("text-anchor", function(d) {{
+            const angle = (d.startAngle + d.endAngle) / 2;
+            const deg = angle * 180 / Math.PI - 90;
+            return (deg > 90) ? "end" : "start";
+        }})
+        .text(d => NODE_NAMES[d.index]);
+
+    // ribbons (flows)
+    const ribbons = svg.append("g")
+        .attr("class","ribbons")
+        .selectAll("path")
+        .data(chord)
+        .enter().append("path")
+        .attr("d", ribbon)
+        .style("fill", d => colorNode(NODE_NAMES[d.source.index]) )
+        .style("stroke", d => d3.color(colorNode(NODE_NAMES[d.source.index])).darker(0.6) )
+        .style("opacity", 0.85)
+        .on("mouseover", function(e, d) {{
+            d3.select(this).transition().style("opacity", 1.0).style("filter","brightness(1.05)");
+        }})
+        .on("mouseout", function(e, d) {{
+            d3.select(this).transition().style("opacity", 0.85).style("filter",null);
+        }});
+
+    // interactivity: focus/hide
+    function focusNode(index) {{
+        // highlight groups and ribbons connected to index
+        ribbons.transition().style("opacity", r => (r.source.index === index || r.target.index === index) ? 1.0 : 0.08);
+        group.selectAll("path").transition().style("opacity", (g) => (g.index === index ? 1.0 : 0.4));
+        group.selectAll("text").transition().style("opacity", (g) => (g.index === index ? 1.0 : 0.45));
+    }}
+
+    // reset function
+    function resetView() {{
+        ribbons.transition().style("opacity", 0.85);
+        group.selectAll("path").transition().style("opacity", 1.0);
+        group.selectAll("text").transition().style("opacity", 1.0);
+    }}
+
+    // click outside to reset
+    svg.on("click", (event) => {{
+        const target = event.target;
+        if (target.tagName === "svg" || target.tagName === "g") {{
+            resetView();
+        }}
+    }});
+
+    // expose reset button
+    document.getElementById("chord-reset").onclick = resetView;
+
+    // responsive text sizing: done via font-size above
+}}
+
+// initial draw and redraw on resize
+draw();
+window.addEventListener("resize", () => {{
+    draw();
+}});
+</script>
+"""
+    return html
+
+# -------------------------
+# Build Gradio app
+# -------------------------
+initial_html = make_chord_html(NODES, MATRIX, NODE_TYPE)
+
+with gr.Blocks(title="MBB-style chord diagram — Mutual Fund churn") as demo:
+    gr.Markdown("## Mutual Fund Churn — Chord Diagram (consulting-grade)")
+    gr.HTML(initial_html)
+    gr.Markdown("### Inspect Company / AMC (unchanged)")
     select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
     company_plot = gr.Plot()
     company_table = gr.DataFrame()
-
-    gr.Markdown("### Inspect AMC (inferred transfers)")
     select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
     amc_plot = gr.Plot()
     amc_table = gr.DataFrame()
 
-    def update_network(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)
-
-    update_button.click(update_network,
-                        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