Update app.py

app.py

@@ -1,12 +1,14 @@
 # app.py
-# Weighted Arc Diagram – Short labels → Full label on click
-# Clean, stable, mobile-friendly, no login layer
+# 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
 
 import gradio as gr
 import pandas as pd
 import json
 from collections import defaultdict
-import numpy as np
 
 ###############################################################
 # DATA
@@ -53,41 +55,27 @@ FRESH_BUY = {"HDFC MF": ["Tata Elxsi"], "UTI MF": ["Adani Ports"], "Mirae MF": [
 COMPLETE_EXIT = {"DSP MF": ["Shriram Finance"]}
 
 ###############################################################
-# SHORT LABELS FOR NODES
+# 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",
+    "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",
+
+    "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"
 }
 
 FULL_LABEL = {k: k for k in SHORT_LABEL}
 
 ###############################################################
-# ARC EDGES
+# TRANSFERS
 ###############################################################
 
 def infer_transfers(buy_map, sell_map):
@@ -113,7 +101,7 @@ def infer_transfers(buy_map, sell_map):
 TRANSFERS = infer_transfers(BUY_MAP, SELL_MAP)
 
 ###############################################################
-# NODE ORDER (interleaved AMC + Company)
+# NODE ORDERING (interleave)
 ###############################################################
 
 def interleave(a, b):
@@ -125,7 +113,7 @@ def interleave(a, b):
     return out
 
 NODES = interleave(AMCS, COMPANIES)
-NODE_TYPE = {n: "amc" if n in AMCS else "company" for n in NODES}
+NODE_TYPE = {n: ("amc" if n in AMCS else "company") for n in NODES}
 
 ###############################################################
 # INSPECT PANELS
@@ -136,7 +124,7 @@ def company_trade_summary(company):
     sellers = [a for a, cs in SELL_MAP.items() if company in cs]
 
     df = pd.DataFrame({
-        "Role": ["Buyer"] * len(buyers) + ["Seller"] * len(sellers),
+        "Role": ["Buyer"]*len(buyers) + ["Seller"]*len(sellers),
         "AMC": buyers + sellers
     })
 
@@ -144,13 +132,13 @@ def company_trade_summary(company):
         return None, df
 
     fig = {
-        "data": [{"type": "bar", "x": df["Role"], "y": [1] * len(df)}],
+        "data": [{"type": "bar", "x": df["Role"], "y": [1]*len(df)}],
         "layout": {"title": f"Trades for {company}"}
     }
     return fig, df
 
 ###############################################################
-# D3 HTML BLOCK (THIS IS THE GOOD VERSION)
+# FULL ARC DIAGRAM HTML + JS
 ###############################################################
 
 ARC_HTML = """
@@ -160,28 +148,202 @@ ARC_HTML = """
 <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 (inferred)</span><br>
+• <span style='color:gray;'>Gray = Transfer</span><br>
 • <span style='color:#227a6d;'>Teal = Loop</span><br>
-Small label → click for full label.
+Short labels → Click a node to expand.
 </div>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
+
 <script>
-document.getElementById("arc-container").innerHTML =
-  "<h3 style='margin-top:80px;text-align:center;color:#999;'>Arc diagram loads here (JS stripped for brevity in preview) — but works in HF.</h3>";
+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}`;
+    }
+
+    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;
+            });
+    }
+
+    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);
+    }
+
+    nodeG.on("click", function(e, d) {
+        highlight(d.name);
+        e.stopPropagation();
+    });
+
+    svg.on("click", () => reset());
+}
+
+drawArcDiagram();
+
+window.addEventListener("resize", drawArcDiagram);
 </script>
 """
 
 ###############################################################
-# GRADIO UI
+# 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="Arc Diagram — MF Churn") as demo:
-    gr.Markdown("## Mutual Fund Churn — Arc Diagram (Short → Full Label on Click)")
+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="Select company")
+    gr.Markdown("### Inspect Company")
+    dd = gr.Dropdown(COMPANIES, label="Pick a company")
     plot = gr.Plot()
     table = gr.DataFrame()