Update app.py

app.py

@@ -85,7 +85,7 @@ def infer_amc_transfers(buy_map, sell_map):
 TRANSFER_COUNTS = infer_amc_transfers(BUY_MAP, SELL_MAP)
 
 # ---------------------------
-# Mixed ordering to reduce crossings
+# Mixed ordering
 # ---------------------------
 def build_mixed_ordering(amcs, companies):
     mixed = []
@@ -109,46 +109,55 @@ def build_flows():
         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))
+
     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 = []
     for (s,b), w in TRANSFER_COUNTS.items():
         transfers.append((s, b, w))
+
     loops = []
-    # loops: a -> c -> b (buy from a into c, sell from b of c)
     for a,c,w1 in buys:
         for c2,b,w2 in sells:
             if c == c2:
                 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()
 
 # ---------------------------
-# Inspector summaries (return Plotly figures)
+# Inspector summaries
 # ---------------------------
 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)) +
-                (["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 go.Figure(), pd.DataFrame([], columns=["Role", "AMC"])
+
     counts = df.groupby("Role").size().reset_index(name="Count")
-    fig = go.Figure(data=[go.Bar(x=counts["Role"].tolist(), y=counts["Count"].tolist())])
+    fig = go.Figure(data=[go.Bar(x=counts["Role"], y=counts["Count"])])
     fig.update_layout(title=f"Trades for {company}", margin=dict(l=20,r=20,t=40,b=20))
     return fig, df
 
+
 def amc_transfer_summary(amc):
     sold = SELL_MAP.get(amc, [])
     transfers = []
@@ -156,18 +165,21 @@ def amc_transfer_summary(amc):
         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)
     if df.empty:
         return go.Figure(), pd.DataFrame([], columns=["security", "buyer_amc"])
+
     counts = df["buyer_amc"].value_counts().reset_index()
     counts.columns = ["Buyer AMC", "Count"]
-    fig = go.Figure(data=[go.Bar(x=counts["Buyer AMC"].tolist(), y=counts["Count"].tolist())])
+    fig = go.Figure(data=[go.Bar(x=counts["Buyer AMC"], y=counts["Count"])])
     fig.update_layout(title=f"Inferred transfers from {amc}", margin=dict(l=20,r=20,t=40,b=20))
     return fig, df
 
-# ---------------------------
-# HTML template (JS inserted safely via replace)
-# ---------------------------
+
+# ---------------------------------------------------------------------
+# JS_TEMPLATE - single triple-quoted string (complete HTML + JS)
+# ---------------------------------------------------------------------
 JS_TEMPLATE = """
 <div id="arc-container" style="width:100%; height:720px;"></div>
 <div style="margin-top:8px;">
@@ -179,12 +191,12 @@ JS_TEMPLATE = """
   <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)<br/>
+  <span style="display:inline-block;width:12px;height:8px;background:#9b59b6;margin-right:6px;"></span> LOOP (violet 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>
 
-<div id="info-box" style="margin-top:12px; padding:10px; 
-     border:1px solid #ddd; border-radius:8px; font-family:sans-serif; 
+<div id="info-box" style="margin-top:12px; padding:10px;
+     border:1px solid #ddd; border-radius:8px; font-family:sans-serif;
      font-size:13px; background:#fbfbfb;">
   <b>Click a node</b> to view details here.
 </div>
@@ -253,7 +265,6 @@ function draw() {
     // --------------------------------------------------------------
     // ARC DRAWING (middle layers)
     // --------------------------------------------------------------
-
     function bezierPath(x0,y0,x1,y1,above=true){
         const mx = (x0+x1)/2;
         const my = (y0+y1)/2;
@@ -322,6 +333,8 @@ function draw() {
             .attr("data-tgt", tname);
     });
 
+
+    // original loop arcs (keep logic but style to violet and slightly thicker)
     const loopGroup = svg.append("g").attr("class", "loops");
     LOOPS.forEach(lp => {
         const a = lp[0], c = lp[1], b = lp[2];
@@ -329,19 +342,49 @@ function draw() {
         const sa = nodePos[nameToIndex[a]];
         const sb = nodePos[nameToIndex[b]];
         const mx = (sa.x+sb.x)/2, my = (sa.y+sb.y)/2;
-        const len = Math.sqrt(mx*mx+my*my)||1;
-        const offset = Math.max(40, radius*0.28 + len*0.12);
-        const ux = mx/len, uy = my/len;
+        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 nlen = Math.sqrt(mx*mx + my*my) || 1;
+        const ux = mx / nlen, uy = my / 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", "#9b59b6")          // bright violet
-            .attr("stroke-width", 4.5)          // thicker so stands out
+            .attr("stroke", "#9b59b6")       // violet to stand out
+            .attr("stroke-width", 4.2)
             .attr("opacity", 1)
-            .attr("stroke-linecap","round")
-            .attr("stroke-linejoin","round");
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round");
     });
 
+    // --------------------------------------------------------------
+    // Overlay group for dynamic highlighted loop paths (drawn on click)
+    // --------------------------------------------------------------
+    const loopPathGroup = svg.append("g").attr("class", "loop-path-highlight");
+
+    function drawLoopPathsFor(nodeName) {
+        loopPathGroup.selectAll("*").remove();
+        LOOPS.forEach(lp => {
+            const amcA = lp[0], company = lp[1], amcB = lp[2];
+            if (!(amcA in nameToIndex) || !(company in nameToIndex) || !(amcB in nameToIndex)) return;
+            if (nodeName !== amcA && nodeName !== company && nodeName !== amcB) return;
+            const pA = nodePos[nameToIndex[amcA]];
+            const pC = nodePos[nameToIndex[company]];
+            const pB = nodePos[nameToIndex[amcB]];
+            // draw two-segment polyline that follows straight segments A->C and C->B
+            loopPathGroup.append("path")
+                .attr("d", `M${pA.x},${pA.y} L${pC.x},${pC.y} L${pB.x},${pB.y}`)
+                .attr("fill", "none")
+                .attr("stroke", "#8e44ad")    // slightly different violet for highlight
+                .attr("stroke-width", 4.5)
+                .attr("opacity", 0.98)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round");
+        });
+    }
+
     // --------------------------------------------------------------
     // 2. LABELS AT THE TOP (always visible)
     // --------------------------------------------------------------
@@ -382,34 +425,35 @@ function draw() {
         });
     }
 
-    function setOpacityFor(nodeName) {
+    function setOpacityFor(nodeName){
         const connected = getConnections(nodeName);
-    
-        // highlight circles
+
         nodeCircleGroup.selectAll("circle")
-            .style("opacity", d =>
-                d.name === nodeName || connected.has(d.name) ? 1 : 0.18
-            );
-    
-        // highlight labels
-        labelGroup.style("opacity", d =>
-            d.name === nodeName || connected.has(d.name) ? 1 : 0.28
-        );
-    
-        // highlight arcs
-        function isConn(path){
-            const src = path.getAttribute("data-src");
-            const tgt = path.getAttribute("data-tgt");
-            return src === nodeName || tgt === nodeName ||
-                   connected.has(src) || connected.has(tgt);
+            .style("opacity", d => (d.name===nodeName || connected.has(d.name)) ? 1 : 0.18);
+
+        labelGroup.style("opacity", d => (d.name===nodeName || connected.has(d.name)) ? 1 : 0.28);
+
+        function isConn(p){
+            const src = p.getAttribute("data-src");
+            const tgt = p.getAttribute("data-tgt");
+            return src===nodeName || tgt===nodeName || connected.has(src) || connected.has(tgt);
         }
-    
+
         buyGroup.selectAll("path").style("opacity", function(){ return isConn(this)?0.98:0.06; });
         sellGroup.selectAll("path").style("opacity", function(){ return isConn(this)?0.98:0.06; });
         transferGroup.selectAll("path").style("opacity", function(){ return isConn(this)?0.98:0.06; });
-        loopGroup.selectAll("path").style("opacity",0.95); // loops unchanged
-    }
 
+        // keep loopGroup visible but slightly dim non-relevant ones
+        loopGroup.selectAll("path").style("opacity", function(){
+            // loops don't have data-src/data-tgt; approximate by checking endpoints
+            try {
+                const dstr = this.getAttribute("d") || "";
+                // simple heuristic: if path contains nodeName coordinate string, highlight it
+                // (we'll just keep them at 0.9 for readability)
+                return 0.9;
+            } catch(e){ return 0.9; }
+        });
+    }
 
     function resetOpacity(){
         nodeCircleGroup.selectAll("circle").style("opacity",1);
@@ -417,27 +461,25 @@ function draw() {
         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);
+        loopGroup.selectAll("path").style("opacity",1);
+
+        loopPathGroup.selectAll("*").remove();  // clear highlight overlay
         updateLabels(null, new Set());
         document.getElementById("info-box").innerHTML =
             "<b>Click a node</b> to view details here.";
     }
 
-    function showInfo(nodeName) {
+    function showInfo(nodeName){
         const buys = BUYS.filter(x => x[0] === nodeName || x[1] === nodeName)
                          .map(x => x[0] === nodeName ? x[1] : x[0]);
-    
         const sells = SELLS.filter(x => x[0] === nodeName || x[1] === nodeName)
                            .map(x => x[0] === nodeName ? x[1] : x[0]);
-    
         const transfers = TRANSFERS.filter(x => x[0] === nodeName || x[1] === nodeName)
                                    .map(x => x[0] === nodeName ? x[1] : x[0]);
-    
         const loops = LOOPS.filter(x => x[0] === nodeName || x[2] === nodeName)
                            .map(x => x[0] === nodeName ? x[2] : x[0]);
-    
+
         const box = document.getElementById("info-box");
-    
         box.innerHTML = `
           <div style="font-size:14px;"><b>${nodeName}</b></div>
           <div style="margin-top:8px; font-size:13px;">
@@ -449,26 +491,26 @@ function draw() {
         `;
     }
 
-
     function selectNode(d){
         const name = d.name;
         setOpacityFor(name);
         showInfo(name);
         const connected = getConnections(name);
         updateLabels(name, connected);
+        drawLoopPathsFor(name); // draw overlay highlights for loops involving this node
     }
 
     nodeCircleGroup.on("click", function(e,d){
         selectNode(d);
-        e.stopPropagation();
+        if (e && e.stopPropagation) e.stopPropagation();
     });
     labelGroup.on("click", function(e,d){
         selectNode(d);
-        e.stopPropagation();
+        if (e && e.stopPropagation) e.stopPropagation();
     });
 
     document.getElementById("arc-reset").onclick = resetOpacity;
-    svg.on("click", function(evt){ if(evt.target.tagName==="svg") resetOpacity(); });
+    svg.on("click", function(evt){ if(evt.target.tagName === "svg") resetOpacity(); });
 
 }
 
@@ -477,9 +519,7 @@ 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)
@@ -496,12 +536,10 @@ def make_arc_html(nodes, node_type, buys, sells, transfers, loops):
 
 initial_html = make_arc_html(NODES, NODE_TYPE, BUYS, SELLS, TRANSFERS, LOOPS)
 
-# ---------------------------
-# Gradio UI
-# ---------------------------
-# ---------------------------
+# ---------------------------------------------------------------------
 # Gradio UI
-# ---------------------------
+# ---------------------------------------------------------------------
+
 responsive_css = """
 #arc-container { padding:0; margin:0; }
 svg { font-family: sans-serif; }
@@ -512,11 +550,13 @@ with gr.Blocks(css=responsive_css, title="MF Churn — Semi-layer Arc Diagram (L
     gr.HTML(initial_html)
 
     gr.Markdown("### Inspect Company / AMC")
-    
+
+    # Company inspector
     select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
     company_plot = gr.Plot()
     company_table = gr.DataFrame()
-    
+
+    # AMC inspector
     select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
     amc_plot = gr.Plot()
     amc_table = gr.DataFrame()