Update app.py

app.py

@@ -212,6 +212,8 @@ const LOOPS = __LOOPS__;
 
 function draw() {
     const container = document.getElementById("arc-container");
+
+    // ★ FINAL FIX: always clear old SVG before drawing
     container.innerHTML = "";
 
     const w = Math.min(1200, container.clientWidth || 920);
@@ -253,10 +255,10 @@ function draw() {
         .enter()
         .append("g")
         .attr("transform", d => `translate(${d.x},${d.y})`)
-        .style("pointer-events", "none");  // ★ FIX ADDED
+        .style("pointer-events", "none");
 
     //--------------------------------------------------------------------
-    // CIRCLES — FIX #2: reenable pointer events on <circle>
+    // CIRCLES — FIX #2: re-enable pointer events
     //--------------------------------------------------------------------
     nodeCircleGroup.append("circle")
         .attr("r", 16)
@@ -264,7 +266,7 @@ function draw() {
         .attr("stroke", "#222")
         .attr("stroke-width", 1)
         .style("cursor", "pointer")
-        .style("pointer-events", "all");    // ★ FIX ADDED
+        .style("pointer-events", "all");
 
     //--------------------------------------------------------------------
     // ARC drawing (unchanged)
@@ -384,7 +386,7 @@ function draw() {
     }
 
     //--------------------------------------------------------------------
-    // LABELS — FIX #3: enable pointer events
+    // LABELS — FIX #3
     //--------------------------------------------------------------------
     const labelGroup = svg.append("g")
         .attr("class", "node-labels")
@@ -402,11 +404,11 @@ function draw() {
             const deg = (d.angle * 180 / Math.PI);
             return (deg>-90 && deg<90) ? "start" : "end";
         })
-        .style("pointer-events", "all")   // ★ FIX ADDED
+        .style("pointer-events", "all")
         .text(d => d.abbrev);
 
     //--------------------------------------------------------------------
-    // CLICK / HIGHLIGHT logic
+    // CLICK / HIGHLIGHT logic (unchanged)
     //--------------------------------------------------------------------
     function getConnections(nodeName){
         let buys = BUYS.filter(x=>x[0]===nodeName || x[1]===nodeName).map(x=>x[0]===nodeName?x[1]:x[0]);
@@ -462,12 +464,12 @@ function draw() {
     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)
+        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 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 = `
@@ -491,7 +493,7 @@ function draw() {
     }
 
     //--------------------------------------------------------------------
-    // CLICK HANDLERS — working now
+    // CLICK HANDLERS
     //--------------------------------------------------------------------
     nodeCircleGroup.on("click", function(event, d){
         selectNode(d);
@@ -519,12 +521,13 @@ setTimeout(() => {
         clearTimeout(rz);
         rz = setTimeout(draw, 120);
     });
-}, 400);   // ★ delay enabling resize for 0.4 sec
+}, 400);
 
 </script>
 """
 
 
+
 def make_arc_html(nodes, node_type, buys, sells, transfers, loops):
     nodes_json = json.dumps(nodes)
     node_type_json = json.dumps(node_type)
@@ -553,7 +556,7 @@ svg { font-family: sans-serif; }
 
 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.HTML(initial_html,container=False)
 
     gr.Markdown("### Inspect Company / AMC")