Update app.py

app.py

@@ -225,7 +225,6 @@ function draw() {
 
     const radius = Math.min(w, h) * 0.36;
 
-    // Compute node positions with abbrev
     const n = NODES.length;
     function angleFor(i){ return (i / n) * 2 * Math.PI; }
 
@@ -244,27 +243,32 @@ function draw() {
     const nameToIndex = {};
     NODES.forEach((nm, i) => nameToIndex[nm] = i);
 
-    // --------------------------------------------------------------
-    // 1. Draw circles FIRST (bottom layer)
-    // --------------------------------------------------------------
+    //--------------------------------------------------------------------
+    // NODES — FIX #1: disable pointer events on <g>
+    //--------------------------------------------------------------------
     const nodeCircleGroup = svg.append("g")
         .attr("class", "node-circles")
         .selectAll("g")
         .data(nodePos)
         .enter()
         .append("g")
-        .attr("transform", d => `translate(${d.x},${d.y})`);
+        .attr("transform", d => `translate(${d.x},${d.y})`)
+        .style("pointer-events", "none");  // ★ FIX ADDED
 
+    //--------------------------------------------------------------------
+    // CIRCLES — FIX #2: reenable pointer events on <circle>
+    //--------------------------------------------------------------------
     nodeCircleGroup.append("circle")
         .attr("r", 16)
         .attr("fill", d => NODE_TYPE[d.name] === "amc" ? "#2b6fa6" : "#f2c88d")
         .attr("stroke", "#222")
         .attr("stroke-width", 1)
-        .style("cursor", "pointer");
+        .style("cursor", "pointer")
+        .style("pointer-events", "all");    // ★ FIX ADDED
 
-    // --------------------------------------------------------------
-    // ARC DRAWING (middle layers)
-    // --------------------------------------------------------------
+    //--------------------------------------------------------------------
+    // ARC drawing (unchanged)
+    //--------------------------------------------------------------------
     function bezierPath(x0,y0,x1,y1,above=true){
         const mx = (x0+x1)/2;
         const my = (y0+y1)/2;
@@ -333,8 +337,6 @@ 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];
@@ -352,16 +354,13 @@ function draw() {
         loopGroup.append("path")
             .attr("d", path)
             .attr("fill", "none")
-            .attr("stroke", "#9b59b6")       // violet to stand out
+            .attr("stroke", "#9b59b6")
             .attr("stroke-width", 4.2)
             .attr("opacity", 1)
             .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) {
@@ -373,11 +372,10 @@ function draw() {
             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", "#8e44ad")
                 .attr("stroke-width", 4.5)
                 .attr("opacity", 0.98)
                 .attr("stroke-linecap", "round")
@@ -385,9 +383,9 @@ function draw() {
         });
     }
 
-    // --------------------------------------------------------------
-    // 2. LABELS AT THE TOP (always visible)
-    // --------------------------------------------------------------
+    //--------------------------------------------------------------------
+    // LABELS — FIX #3: enable pointer events
+    //--------------------------------------------------------------------
     const labelGroup = svg.append("g")
         .attr("class", "node-labels")
         .selectAll("text")
@@ -404,11 +402,12 @@ function draw() {
             const deg = (d.angle * 180 / Math.PI);
             return (deg>-90 && deg<90) ? "start" : "end";
         })
+        .style("pointer-events", "all")   // ★ FIX ADDED
         .text(d => d.abbrev);
 
-    // --------------------------------------------------------------
-    // LABEL SWITCHING + OPACITY CONTROLS
-    // --------------------------------------------------------------
+    //--------------------------------------------------------------------
+    // CLICK / HIGHLIGHT logic
+    //--------------------------------------------------------------------
     function getConnections(nodeName){
         let buys = BUYS.filter(x=>x[0]===nodeName || x[1]===nodeName).map(x=>x[0]===nodeName?x[1]:x[0]);
         let sells = SELLS.filter(x=>x[0]===nodeName || x[1]===nodeName).map(x=>x[0]===nodeName?x[1]:x[0]);
@@ -443,16 +442,7 @@ function draw() {
         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; });
 
-        // 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; }
-        });
+        loopGroup.selectAll("path").style("opacity", 0.9);
     }
 
     function resetOpacity(){
@@ -463,7 +453,7 @@ function draw() {
         transferGroup.selectAll("path").style("opacity",0.7);
         loopGroup.selectAll("path").style("opacity",1);
 
-        loopPathGroup.selectAll("*").remove();  // clear highlight overlay
+        loopPathGroup.selectAll("*").remove();
         updateLabels(null, new Set());
         document.getElementById("info-box").innerHTML =
             "<b>Click a node</b> to view details here.";
@@ -497,35 +487,44 @@ function draw() {
         showInfo(name);
         const connected = getConnections(name);
         updateLabels(name, connected);
-        drawLoopPathsFor(name); // draw overlay highlights for loops involving this node
+        drawLoopPathsFor(name);
     }
 
+    //--------------------------------------------------------------------
+    // CLICK HANDLERS — working now
+    //--------------------------------------------------------------------
     nodeCircleGroup.on("click", function(event, d){
         selectNode(d);
         event.stopPropagation();
     });
+
     labelGroup.on("click", function(event, d){
         selectNode(d);
         event.stopPropagation();
     });
 
-
     document.getElementById("arc-reset").onclick = resetOpacity;
-    svg.on("click", function(evt){
-        // Only reset when clicking empty background, not circles, not labels, not paths
-        if (evt.target === this) {
-            resetOpacity();
-        }
-    });
 
+    svg.on("click", function(event){
+        if (event.target === this) resetOpacity();
+    });
 
 }
 
 draw();
-window.addEventListener("resize", draw);
+
+//-----------------------------------------------------------
+// RESIZE DEBOUNCE (ANTI-DOUBLE-CLICK ISSUE)
+//-----------------------------------------------------------
+let rz;
+window.addEventListener("resize", () => {
+    clearTimeout(rz);
+    rz = setTimeout(draw, 120);
+});
 </script>
 """
 
+
 def make_arc_html(nodes, node_type, buys, sells, transfers, loops):
     nodes_json = json.dumps(nodes)
     node_type_json = json.dumps(node_type)