Update app.py

app.py

@@ -1,11 +1,6 @@
 # app.py
-# Static weighted semi-layer arc diagram (Option B)
-# - Top half: BUY arcs (AMC -> Company) (green solid)
-# - Bottom half: SELL arcs (Company -> AMC) (red dotted)
-# - Transfers: grey chords across center (inferred)
-# - Loops: external arc outside circle (highlight loops)
-# Interaction: click node -> highlight its flows; Reset button
-# Mobile-friendly; no D3 simulation.
+# Static weighted semi-layer arc diagram (L1 labels outside)
+# JS block injected safely (no Python f-strings inside JS)
 
 import gradio as gr
 import pandas as pd
@@ -14,7 +9,7 @@ import numpy as np
 from collections import defaultdict
 
 # ---------------------------
-# Data (same as before)
+# Data
 # ---------------------------
 AMCS = [
     "SBI MF", "ICICI Pru MF", "HDFC MF", "Nippon India MF", "Kotak MF",
@@ -83,13 +78,13 @@ def infer_amc_transfers(buy_map, sell_map):
     for c in set(c2s.keys()) | set(c2b.keys()):
         for s in c2s[c]:
             for b in c2b[c]:
-                transfers[(s,b)] += 1
+                transfers[(s, b)] += 1
     return transfers
 
 TRANSFER_COUNTS = infer_amc_transfers(BUY_MAP, SELL_MAP)
 
 # ---------------------------
-# Mixed ordering (reduce crossings)
+# Mixed ordering to reduce crossings
 # ---------------------------
 def build_mixed_ordering(amcs, companies):
     mixed = []
@@ -105,43 +100,36 @@ NODES = build_mixed_ordering(AMCS, COMPANIES)
 NODE_TYPE = {n: ("amc" if n in AMCS else "company") for n in NODES}
 
 # ---------------------------
-# Build list of flows with weights
+# Build flows
 # ---------------------------
 def build_flows():
-    # BUY flows: (source_amc, target_company, weight, type)
     buys = []
     for amc, comps in BUY_MAP.items():
         for c in comps:
             w = 3 if (amc in FRESH_BUY and c in FRESH_BUY.get(amc, [])) else 1
             buys.append((amc, c, w))
-    # SELL flows: (source_company, target_amc, weight)
     sells = []
     for amc, comps in SELL_MAP.items():
         for c in comps:
             w = 3 if (amc in COMPLETE_EXIT and c in COMPLETE_EXIT.get(amc, [])) else 1
             sells.append((c, amc, w))
-    # transfers: amc -> amc (inferred)
     transfers = []
     for (s,b), w in TRANSFER_COUNTS.items():
         transfers.append((s, b, w))
-    # loops: find AMC -> Company -> AMC where both buy & sell exist
     loops = []
-    # map buys and sells for quick lookup
-    buy_pairs = set((a,c) for a,c,_ in buys)
-    sell_pairs = set((c,a) for c,a,_ in sells)
-    for (a,c,w1) in buys:
-        for (c2,b,w2) in sells:
+    # loops: a -> c -> b
+    for a,c,w1 in buys:
+        for c2,b,w2 in sells:
             if c == c2:
-                # loop: a -> c -> b
-                loops.append((a, c, b, 1))  # weight of loop visual (1)
-    # dedupe loops by tuple
-    loops = list({(a,c,b) for (a,c,b,_) in loops})
+                loops.append((a, c, b))
+    # dedupe
+    loops = list({(a,c,b) for (a,c,b) in loops})
     return buys, sells, transfers, loops
 
 BUYS, SELLS, TRANSFERS, LOOPS = build_flows()
 
 # ---------------------------
-# Helper summaries for inspectors
+# Inspector summaries
 # ---------------------------
 def company_trade_summary(company):
     buyers = [a for a, cs in BUY_MAP.items() if company in cs]
@@ -154,10 +142,10 @@ def company_trade_summary(company):
         "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")
-    fig = go_bar = {
-        "data": [{"type": "bar", "x": counts["Role"].tolist(), "y": counts["Count"].tolist()}],
+    fig = {
+        "data": [{"type":"bar", "x": counts["Role"].tolist(), "y": counts["Count"].tolist()}],
         "layout": {"title": f"Trades for {company}"}
     }
     return fig, df
@@ -171,27 +159,19 @@ def amc_transfer_summary(amc):
             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 = {
-        "data": [{"type": "bar", "x": counts["Buyer AMC"].tolist(), "y": counts["Count"].tolist()}],
+        "data": [{"type":"bar", "x": counts["Buyer AMC"].tolist(), "y": counts["Count"].tolist()}],
         "layout": {"title": f"Inferred transfers from {amc}"}
     }
     return fig, df
 
 # ---------------------------
-# Make HTML + JS with D3 to draw arc layers
+# HTML template (JS inserted safely via replace)
 # ---------------------------
-def make_arc_html(nodes, node_type, buys, sells, transfers, loops):
-    nodes_json = json.dumps(nodes)
-    types_json = json.dumps(node_type)
-    buys_json = json.dumps(buys)
-    sells_json = json.dumps(sells)
-    transfers_json = json.dumps(transfers)
-    loops_json = json.dumps(loops)
-
-    html = f"""
+JS_TEMPLATE = """
 <div id="arc-container" style="width:100%; height:720px;"></div>
 <div style="margin-top:8px;">
   <button id="arc-reset" style="padding:8px 12px; border-radius:6px;">Reset</button>
@@ -202,20 +182,20 @@ def make_arc_html(nodes, node_type, buys, sells, transfers, loops):
   <span style="display:inline-block;width:12px;height:8px;background:#2e8540;margin-right:6px;"></span> BUY (green solid)<br/>
   <span style="display:inline-block;width:12px;height:8px;background:#c0392b;margin-right:6px;border-bottom:3px dotted #c0392b;"></span> SELL (red dotted)<br/>
   <span style="display:inline-block;width:12px;height:8px;background:#7d7d7d;margin-right:6px;"></span> TRANSFER (grey, inferred)<br/>
-  <span style="display:inline-block;width:12px;height:8px;background:#227a6d;margin-right:6px;"></span> LOOP (external arc)
-  <div style="margin-top:6px;color:#666;font-size:12px;">Note: Transfers are inferred based on matching sells & buys across AMCs. Numbers show relative weight.</div>
+  <span style="display:inline-block;width:12px;height:8px;background:#227a6d;margin-right:6px;"></span> LOOP (external arc)<br/>
+  <div style="margin-top:6px;color:#666;font-size:12px;">Note: Transfers are inferred by matching sells and buys across AMCs. Thickness shows relative weight.</div>
 </div>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
 <script>
-const NODES = {nodes_json};
-const NODE_TYPE = {types_json};
-const BUYS = {buys_json};         // [ [amc, company, weight], ... ]
-const SELLS = {sells_json};       // [ [company, amc, weight], ... ]
-const TRANSFERS = {transfers_json}; // [ [amc, amc, weight], ... ]
-const LOOPS = {loops_json};       // [ [amc, company, amc], ... ]
-
-function draw() {{
+const NODES = __NODES__ ;
+const NODE_TYPE = __NODE_TYPE__ ;
+const BUYS = __BUYS__ ;
+const SELLS = __SELLS__ ;
+const TRANSFERS = __TRANSFERS__ ;
+const LOOPS = __LOOPS__ ;
+
+function draw() {
     const container = document.getElementById("arc-container");
     container.innerHTML = "";
     const w = Math.min(920, container.clientWidth || 820);
@@ -226,270 +206,239 @@ function draw() {{
         .attr("viewBox", [-w/2, -h/2, w, h].join(" "));
 
     const radius = Math.min(w, h) * 0.36;
-    const outer = radius + 18;
-    const center = {x:0, y:0};
 
-    // compute node angles evenly around circle (mixed order), but we'll draw buys on top & sells below
+    // node positions around circle
     const n = NODES.length;
-    const angleFor = (i) => ( (i / n) * 2 * Math.PI ); // full circle evenly
-    const nodePos = NODES.map((name,i) => {{
-        const angle = angleFor(i) - Math.PI/2; // start at top
-        return {{
-            name: name,
-            angle: angle,
-            x: Math.cos(angle) * radius,
-            y: Math.sin(angle) * radius
-        }};
-    }});
-
-    const nameToIndex = {{}};
-    NODES.forEach((n,i)=>nameToIndex[n]=i);
-
-    // Draw outer node arcs as small blocks (just visual)
+    function angleFor(i) { return (i / n) * 2 * Math.PI; }
+    const nodePos = NODES.map((name,i) => {
+        const ang = angleFor(i) - Math.PI/2; // start at top
+        return { name: name, angle: ang, x: Math.cos(ang)*radius, y: Math.sin(ang)*radius };
+    });
+
+    const nameToIndex = {};
+    NODES.forEach((nm,i)=> nameToIndex[nm]=i);
+
+    // small node circles and labels outside
     const group = svg.append("g").selectAll("g").data(nodePos).enter().append("g")
-        .attr("transform", d => `translate(${d.x},${d.y}) rotate(${(d.angle*180/Math.PI)+90})`);
+        .attr("transform", d => `translate(${d.x},${d.y})`);
 
     group.append("circle")
-        .attr("r", 18)
+        .attr("r", 16)
         .style("fill", d => NODE_TYPE[d.name] === "amc" ? "#2b6fa6" : "#f2c88d")
         .style("stroke", "#222")
-        .style("stroke-width", 1);
+        .style("stroke-width", 1)
+        .style("cursor", "pointer");
 
-    // labels (outside)
     group.append("text")
-        .attr("x", d => (Math.cos(d.angle) * (radius + 28)))
-        .attr("y", d => (Math.sin(d.angle) * (radius + 28)))
+        .attr("x", d => Math.cos(d.angle) * (radius + 26))
+        .attr("y", d => Math.sin(d.angle) * (radius + 26))
         .attr("dy", "0.35em")
         .style("font-family", "sans-serif")
-        .style("font-size", Math.max(10, Math.min(14, radius*0.045)))
+        .style("font-size", Math.max(10, Math.min(14, radius*0.04)))
         .style("text-anchor", d => {
             const deg = (d.angle * 180 / Math.PI);
             return (deg > -90 && deg < 90) ? "start" : "end";
         })
         .attr("transform", d => {
             const deg = (d.angle * 180 / Math.PI);
-            const rotate = deg;
             const flip = (deg > 90 || deg < -90) ? 180 : 0;
-            return `rotate(${rotate}) translate(${radius + 28}) rotate(${flip})`;
+            return `rotate(${deg}) translate(${radius + 26}) rotate(${flip})`;
         })
+        .style("cursor","pointer")
         .text(d => d.name);
 
-    // helper: build a bezier path between two points with control y offset
-    function bezierPath(x0,y0,x1,y1, curvature=0.7, above=true) {{
-        // mid point
+    // bezier helper
+    function bezierPath(x0,y0,x1,y1,above=true) {
         const mx = (x0 + x1)/2;
         const my = (y0 + y1)/2;
-        // control point offset outward from center to create arch
-        const dx = mx - 0;
-        const dy = my - 0;
-        // normalize radial direction
+        const dx = mx;
+        const dy = my;
         const len = Math.sqrt(dx*dx + dy*dy) || 1;
-        const ux = dx/len;
-        const uy = dy/len;
-        const offset = (above ? -1 : 1) * Math.max(30, radius*curvature);
+        const ux = dx/len, uy = dy/len;
+        const offset = (above ? -1 : 1) * Math.max(30, radius*0.9);
         const cx = mx + ux * offset;
         const cy = my + uy * offset;
         return `M ${x0} ${y0} Q ${cx} ${cy} ${x1} ${y1}`;
-    }}
+    }
 
-    // scale for stroke-width (weights)
-    const allWeights = [].concat(BUYS.map(d=>d[2]), SELLS.map(d=>d[2]), TRANSFERS.map(d=>d[2]));
-    const wmin = Math.min(...(allWeights.length?allWeights:[1]));
-    const wmax = Math.max(...(allWeights.length?allWeights:[1]));
-    const strokeScale = d3.scaleLinear().domain([wmin, Math.max(wmax,1)]).range([1.0, 6.0]);
+    // stroke width scale
+    const allW = [].concat(BUYS.map(d=>d[2]), SELLS.map(d=>d[2]), TRANSFERS.map(d=>d[2]));
+    const wmin = Math.min(...(allW.length?allW:[1]));
+    const wmax = Math.max(...(allW.length?allW:[1]));
+    const stroke = d3.scaleLinear().domain([wmin, Math.max(wmax,1)]).range([1.0, 6.0]);
 
-    // --------------------
-    // Draw BUY arcs (top half: above center)
-    // --------------------
+    // buys (top)
     const buyGroup = svg.append("g").attr("class","buys");
-    BUYS.forEach(b => {{
-        const [a, c, wt] = b;
+    BUYS.forEach(b => {
+        const a = b[0], c = b[1], wt = b[2];
         if (!(a in nameToIndex) || !(c in nameToIndex)) return;
         const s = nodePos[nameToIndex[a]];
         const t = nodePos[nameToIndex[c]];
-        // draw only arc above center if midpoint y is < 0 => above; else we still force above
-        const path = bezierPath(s.x, s.y, t.x, t.y, 0.9, true);
+        const path = bezierPath(s.x,s.y,t.x,t.y,true);
         buyGroup.append("path")
             .attr("d", path)
-            .attr("fill", "none")
-            .attr("stroke", "#2e8540")
-            .attr("stroke-width", strokeScale(wt))
+            .attr("fill","none")
+            .attr("stroke","#2e8540")
+            .attr("stroke-width", stroke(wt))
             .attr("stroke-linecap","round")
             .attr("opacity", 0.92)
             .attr("data-src", a)
             .attr("data-tgt", c)
-            .attr("class","buy-link")
-            .on("mouseover", function() {{ d3.select(this).attr("opacity",1).attr("stroke-width", +d3.select(this).attr("stroke-width")*1.2); }})
-            .on("mouseout", function() {{ d3.select(this).attr("opacity",0.92).attr("stroke-width", +d3.select(this).attr("stroke-width")/1.2); }});
-    }});
-
-    // --------------------
-    // Draw SELL arcs (bottom half: below center)
-    // --------------------
+            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
+            .on("mouseout", function() { d3.select(this).attr("opacity",0.92); });
+    });
+
+    // sells (bottom)
     const sellGroup = svg.append("g").attr("class","sells");
-    SELLS.forEach(sell => {{
-        const [c, a, wt] = sell;
+    SELLS.forEach(s => {
+        const c = s[0], a = s[1], wt = s[2];
         if (!(c in nameToIndex) || !(a in nameToIndex)) return;
-        const s = nodePos[nameToIndex[c]];
-        const t = nodePos[nameToIndex[a]];
-        const path = bezierPath(s.x, s.y, t.x, t.y, 0.9, false);
+        const sp = nodePos[nameToIndex[c]];
+        const tp = nodePos[nameToIndex[a]];
+        const path = bezierPath(sp.x,sp.y,tp.x,tp.y,false);
         sellGroup.append("path")
             .attr("d", path)
-            .attr("fill", "none")
-            .attr("stroke", "#c0392b")
-            .attr("stroke-width", strokeScale(wt))
+            .attr("fill","none")
+            .attr("stroke","#c0392b")
+            .attr("stroke-width", stroke(wt))
             .attr("stroke-linecap","round")
             .attr("stroke-dasharray","4,3")
-            .attr("opacity", 0.86)
+            .attr("opacity",0.86)
             .attr("data-src", c)
             .attr("data-tgt", a)
-            .attr("class","sell-link")
-            .on("mouseover", function() {{ d3.select(this).attr("opacity",1).attr("stroke-width", +d3.select(this).attr("stroke-width")*1.15); }})
-            .on("mouseout", function() {{ d3.select(this).attr("opacity",0.86).attr("stroke-width", +d3.select(this).attr("stroke-width")/1.15); }});
-    }});
-
-    // --------------------
-    // Transfers (grey chords across center) - arch going through center with smaller curvature
-    // --------------------
+            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
+            .on("mouseout", function() { d3.select(this).attr("opacity",0.86); });
+    });
+
+    // transfers (grey chords)
     const transferGroup = svg.append("g").attr("class","transfers");
-    TRANSFERS.forEach(tr => {{
-        const [sname, tname, wt] = tr;
+    TRANSFERS.forEach(tr => {
+        const sname = tr[0], tname = tr[1], wt = tr[2];
         if (!(sname in nameToIndex) || !(tname in nameToIndex)) return;
-        const s = nodePos[nameToIndex[sname]];
-        const t = nodePos[nameToIndex[tname]];
-        // chord via center: control point near center
-        const mx = (s.x + t.x)/2;
-        const my = (s.y + t.y)/2;
-        const cx = mx * 0.3; // pull control slightly toward center
-        const cy = my * 0.3;
-        const path = `M ${s.x} ${s.y} Q ${cx} ${cy} ${t.x} ${t.y}`;
+        const sp = nodePos[nameToIndex[sname]];
+        const tp = nodePos[nameToIndex[tname]];
+        const mx = (sp.x + tp.x)/2;
+        const my = (sp.y + tp.y)/2;
+        const cx = mx * 0.3, cy = my * 0.3;
+        const path = `M ${sp.x} ${sp.y} Q ${cx} ${cy} ${tp.x} ${tp.y}`;
         transferGroup.append("path")
             .attr("d", path)
-            .attr("fill", "none")
-            .attr("stroke", "#7d7d7d")
-            .attr("stroke-width", strokeScale(wt))
-            .attr("opacity", 0.7)
+            .attr("fill","none")
+            .attr("stroke","#7d7d7d")
+            .attr("stroke-width", stroke(wt))
+            .attr("opacity",0.7)
             .attr("data-src", sname)
             .attr("data-tgt", tname)
-            .on("mouseover", function() {{ d3.select(this).attr("opacity",1); }})
-            .on("mouseout", function() {{ d3.select(this).attr("opacity",0.7); }});
-    }});
+            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
+            .on("mouseout", function() { d3.select(this).attr("opacity",0.7); });
+    });
 
-    // --------------------
-    // Loops: external arcs (outside the circle)
-    // --------------------
+    // loops (external arcs)
     const loopGroup = svg.append("g").attr("class","loops");
-    LOOPS.forEach(lp => {{
-        const [a, c, b] = lp;
-        if (!(a in nameToIndex) || !(c in nameToIndex) || !(b in nameToIndex)) return;
+    LOOPS.forEach(lp => {
+        const a = lp[0], c = lp[1], b = lp[2];
+        if (!(a in nameToIndex) || !(b in nameToIndex)) return;
         const sa = nodePos[nameToIndex[a]];
-        const sc = nodePos[nameToIndex[c]];
         const sb = nodePos[nameToIndex[b]];
-        // external arc connecting sa and sb that bows outward
         const mx = (sa.x + sb.x)/2;
         const my = (sa.y + sb.y)/2;
-        const len = Math.sqrt((sa.x - sb.x)**2 + (sa.y - sb.y)**2);
-        const outward = Math.max(40, radius * 0.28 + len * 0.15);
-        // outward normal from center to midpoint
-        const ndx = mx; const ndy = my;
+        const len = Math.sqrt((sa.x - sb.x)*(sa.x - sb.x) + (sa.y - sb.y)*(sa.y - sb.y));
+        const outward = Math.max(40, radius*0.28 + len * 0.12);
+        const ndx = mx, ndy = my;
         const nlen = Math.sqrt(ndx*ndx + ndy*ndy) || 1;
-        const ux = ndx / nlen; const uy = ndy / nlen;
+        const ux = ndx/nlen, uy = ndy/nlen;
         const cx = mx + ux * outward;
         const cy = my + uy * outward;
         const path = `M ${sa.x} ${sa.y} Q ${cx} ${cy} ${sb.x} ${sb.y}`;
         loopGroup.append("path")
             .attr("d", path)
-            .attr("fill","none")
-            .attr("stroke","#227a6d")
+            .attr("fill", "none")
+            .attr("stroke", "#227a6d")
             .attr("stroke-width", 2.8)
-            .attr("opacity", 0.95)
-            .on("mouseover", function() {{ d3.select(this).attr("opacity",1.0); }})
-            .on("mouseout", function() {{ d3.select(this).attr("opacity",0.95); }});
-    }});
-
-    // --------------------
-    // Interactivity: click a node to focus its connected flows
-    // --------------------
-    function setOpacityFor(nodeName) {{
-        // nodes (circles)
+            .attr("opacity",0.95)
+            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
+            .on("mouseout", function() { d3.select(this).attr("opacity",0.95); });
+    });
+
+    // interactivity: focus on node
+    function setOpacityFor(nodeName) {
         group.selectAll("circle").style("opacity", d => (d.name === nodeName ? 1.0 : 0.18));
         group.selectAll("text").style("opacity", d => (d.name === nodeName ? 1.0 : 0.28));
-
-        // buys
-        buyGroup.selectAll("path").style("opacity", function() {{
+        buyGroup.selectAll("path").style("opacity", function() {
             const src = this.getAttribute("data-src");
             const tgt = this.getAttribute("data-tgt");
             return (src === nodeName || tgt === nodeName) ? 0.98 : 0.06;
-        }});
-        // sells
-        sellGroup.selectAll("path").style("opacity", function() {{
+        });
+        sellGroup.selectAll("path").style("opacity", function() {
             const src = this.getAttribute("data-src");
             const tgt = this.getAttribute("data-tgt");
             return (src === nodeName || tgt === nodeName) ? 0.98 : 0.06;
-        }});
-        // transfers
-        transferGroup.selectAll("path").style("opacity", function() {{
+        });
+        transferGroup.selectAll("path").style("opacity", function() {
             const src = this.getAttribute("data-src");
             const tgt = this.getAttribute("data-tgt");
             return (src === nodeName || tgt === nodeName) ? 0.98 : 0.06;
-        }});
-        // loops - highlight if nodeName is involved
-        loopGroup.selectAll("path").style("opacity", function() {{
-            // we can't attach data easily; use geometry check via stroke or leave always visible but dim
-            return 0.95; // keep visible
-        }});
-    }}
-
-    function resetOpacity() {{
+        });
+        loopGroup.selectAll("path").style("opacity", 0.95);
+    }
+
+    function resetOpacity() {
         group.selectAll("circle").style("opacity", 1.0);
         group.selectAll("text").style("opacity", 1.0);
         buyGroup.selectAll("path").style("opacity", 0.92);
         sellGroup.selectAll("path").style("opacity", 0.86);
         transferGroup.selectAll("path").style("opacity", 0.7);
         loopGroup.selectAll("path").style("opacity", 0.95);
-    }}
+    }
 
-    // click handler on circles
-    group.selectAll("circle").style("cursor", "pointer").on("click", function(e,d) {{
+    group.selectAll("circle").style("cursor","pointer").on("click", function(e,d) {
         setOpacityFor(d.name);
-        d3.event && d3.event.stopPropagation && d3.event.stopPropagation();
-    }});
-    // click on label also focuses
-    group.selectAll("text").style("cursor","pointer").on("click", function(e,d) {{
+        if (e && e.stopPropagation) e.stopPropagation();
+    });
+    group.selectAll("text").style("cursor","pointer").on("click", function(e,d) {
         setOpacityFor(d.name);
-        d3.event && d3.event.stopPropagation && d3.event.stopPropagation();
-    }});
+        if (e && e.stopPropagation) e.stopPropagation();
+    });
 
-    // reset button
     document.getElementById("arc-reset").onclick = resetOpacity;
-
-    // click outside resets
-    svg.on("click", function(event) {{
-        // if clicked on background, reset
+    svg.on("click", function(event) {
         if (event.target.tagName === "svg") resetOpacity();
-    }});
-}}
+    });
+}
 
-// initial draw and resize
 draw();
 window.addEventListener("resize", draw);
 </script>
 """
+
+def make_arc_html(nodes, node_type, buys, sells, transfers, loops):
+    # prepare JSON strings
+    nodes_json = json.dumps(nodes)
+    node_type_json = json.dumps(node_type)
+    buys_json = json.dumps(buys)
+    sells_json = json.dumps(sells)
+    transfers_json = json.dumps(transfers)
+    loops_json = json.dumps(loops)
+    html = JS_TEMPLATE.replace("__NODES__", nodes_json) \
+                      .replace("__NODE_TYPE__", node_type_json) \
+                      .replace("__BUYS__", buys_json) \
+                      .replace("__SELLS__", sells_json) \
+                      .replace("__TRANSFERS__", transfers_json) \
+                      .replace("__LOOPS__", loops_json)
     return html
 
-# ---------------------------
-# Build Gradio UI
-# ---------------------------
 initial_html = make_arc_html(NODES, NODE_TYPE, BUYS, SELLS, TRANSFERS, LOOPS)
 
-# minimal CSS to keep mobile-friendly
+# ---------------------------
+# Gradio UI
+# ---------------------------
 responsive_css = """
 #arc-container { padding:0; margin:0; }
 svg { font-family: sans-serif; }
 """
 
-with gr.Blocks(css=responsive_css, title="MF Churn — Semi-layer Arc Diagram") as demo:
-    gr.Markdown("## Mutual Fund Churn — Weighted Arcs (BUY top / SELL bottom) — loops highlighted")
+with gr.Blocks(css=responsive_css, title="MF Churn — Semi-layer Arc Diagram (L1 labels)") as demo:
+    gr.Markdown("## Mutual Fund Churn — Weighted Arcs (BUY top / SELL bottom) — labels outside (L1)")
     gr.HTML(initial_html)
 
     gr.Markdown("### Inspect Company / AMC")
@@ -512,4 +461,4 @@ with gr.Blocks(css=responsive_css, title="MF Churn — Semi-layer Arc Diagram")
     select_amc.change(on_amc, inputs=[select_amc], outputs=[amc_plot, amc_table])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()