Update app.py

app.py

@@ -183,7 +183,6 @@ JS_TEMPLATE = """
   <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>
 
-<!-- Info box -->
 <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;">
@@ -192,31 +191,35 @@ JS_TEMPLATE = """
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
 <script>
-const NODES = __NODES__ ;
-const NODE_TYPE = __NODE_TYPE__ ;
-const BUYS = __BUYS__ ;
-const SELLS = __SELLS__ ;
-const TRANSFERS = __TRANSFERS__ ;
-const LOOPS = __LOOPS__ ;
+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(1200, container.clientWidth || 920);
     const h = Math.max(420, Math.floor(w * 0.62));
-    const svg = d3.select(container).append("svg")
+
+    const svg = d3.select(container)
+        .append("svg")
         .attr("width", "100%")
         .attr("height", h)
         .attr("viewBox", [-w/2, -h/2, w, h].join(" "));
 
     const radius = Math.min(w, h) * 0.36;
 
-    // nodes with abbrev
+    // Compute node positions with abbrev
     const n = NODES.length;
-    function angleFor(i) { return (i / n) * 2 * Math.PI; }
-    const nodePos = NODES.map((name,i) => {
+    function angleFor(i){ return (i / n) * 2 * Math.PI; }
+
+    const nodePos = NODES.map((name, i) => {
         const ang = angleFor(i) - Math.PI/2;
-        const ab = (name.length > 7 ? name.slice(0,5)+"…" : name);
+        const ab = (name.length > 7 ? name.slice(0,5) + "…" : name);
         return {
             name: name,
             abbrev: ab,
@@ -227,57 +230,49 @@ function draw() {
     });
 
     const nameToIndex = {};
-    NODES.forEach((nm,i)=> nameToIndex[nm]=i);
-
-    const group = svg.append("g").selectAll("g").data(nodePos).enter().append("g")
+    NODES.forEach((nm, i) => nameToIndex[nm] = i);
+
+    // --------------------------------------------------------------
+    // 1. Draw circles FIRST (bottom layer)
+    // --------------------------------------------------------------
+    const nodeCircleGroup = svg.append("g")
+        .attr("class", "node-circles")
+        .selectAll("g")
+        .data(nodePos)
+        .enter()
+        .append("g")
         .attr("transform", d => `translate(${d.x},${d.y})`);
 
-    group.append("circle")
+    nodeCircleGroup.append("circle")
         .attr("r", 16)
-        .style("fill", d => NODE_TYPE[d.name] === "amc" ? "#2b6fa6" : "#f2c88d")
-        .style("stroke", "#222")
-        .style("stroke-width", 1)
+        .attr("fill", d => NODE_TYPE[d.name] === "amc" ? "#2b6fa6" : "#f2c88d")
+        .attr("stroke", "#222")
+        .attr("stroke-width", 1)
         .style("cursor", "pointer");
 
-    // short label on load
-    group.append("text")
-        .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.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 flip = (deg > 90 || deg < -90) ? 180 : 0;
-            return `rotate(${deg}) translate(${radius + 26}) rotate(${flip})`;
-        })
-        .style("cursor","pointer")
-        .text(d => d.abbrev);
+    // --------------------------------------------------------------
+    // ARC DRAWING (middle layers)
+    // --------------------------------------------------------------
 
-    // helper curves
-    function bezierPath(x0,y0,x1,y1,above=true) {
-        const mx = (x0 + x1)/2;
-        const my = (y0 + y1)/2;
-        const dx = mx, dy = my;
-        const len = Math.sqrt(dx*dx + dy*dy) || 1;
-        const ux = dx/len, uy = dy/len;
+    function bezierPath(x0,y0,x1,y1,above=true){
+        const mx = (x0+x1)/2;
+        const my = (y0+y1)/2;
+        const len = Math.sqrt(mx*mx + my*my) || 1;
+        const ux = mx/len, uy = my/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}`;
+        return `M${x0},${y0} Q${mx + ux*offset},${my + uy*offset} ${x1},${y1}`;
     }
 
-    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]);
+    const allW = [].concat(
+        BUYS.map(x=>x[2]),
+        SELLS.map(x=>x[2]),
+        TRANSFERS.map(x=>x[2])
+    );
+    const stroke = d3.scaleLinear()
+        .domain([Math.min(...allW), Math.max(...allW)])
+        .range([1,6]);
 
-    // groups
-    const buyGroup = svg.append("g");
+    const buyGroup = svg.append("g").attr("class", "buys");
     BUYS.forEach(b => {
         const a = b[0], c = b[1], wt = b[2];
         if (!(a in nameToIndex) || !(c in nameToIndex)) return;
@@ -285,15 +280,15 @@ function draw() {
         const t = nodePos[nameToIndex[c]];
         buyGroup.append("path")
             .attr("d", bezierPath(s.x,s.y,t.x,t.y,true))
-            .attr("fill","none")
-            .attr("stroke","#2e8540")
+            .attr("fill", "none")
+            .attr("stroke", "#2e8540")
             .attr("stroke-width", stroke(wt))
             .attr("opacity", 0.92)
             .attr("data-src", a)
             .attr("data-tgt", c);
     });
 
-    const sellGroup = svg.append("g");
+    const sellGroup = svg.append("g").attr("class", "sells");
     SELLS.forEach(s => {
         const c = s[0], a = s[1], wt = s[2];
         if (!(c in nameToIndex) || !(a in nameToIndex)) return;
@@ -301,16 +296,16 @@ function draw() {
         const tp = nodePos[nameToIndex[a]];
         sellGroup.append("path")
             .attr("d", bezierPath(sp.x,sp.y,tp.x,tp.y,false))
-            .attr("fill","none")
-            .attr("stroke","#c0392b")
+            .attr("fill", "none")
+            .attr("stroke", "#c0392b")
             .attr("stroke-width", stroke(wt))
-            .attr("stroke-dasharray","4,3")
-            .attr("opacity",0.86)
+            .attr("stroke-dasharray", "4,3")
+            .attr("opacity", 0.86)
             .attr("data-src", c)
             .attr("data-tgt", a);
     });
 
-    const transferGroup = svg.append("g");
+    const transferGroup = svg.append("g").attr("class", "transfers");
     TRANSFERS.forEach(tr => {
         const sname = tr[0], tname = tr[1], wt = tr[2];
         if (!(sname in nameToIndex) || !(tname in nameToIndex)) return;
@@ -318,45 +313,82 @@ function draw() {
         const tp = nodePos[nameToIndex[tname]];
         const mx = (sp.x + tp.x)/2, my = (sp.y + tp.y)/2;
         transferGroup.append("path")
-            .attr("d", `M ${sp.x} ${sp.y} Q ${mx*0.3} ${my*0.3} ${tp.x} ${tp.y}`)
-            .attr("fill","none")
-            .attr("stroke","#7d7d7d")
+            .attr("d", `M${sp.x},${sp.y} Q${mx*0.3},${my*0.3} ${tp.x},${tp.y}`)
+            .attr("fill", "none")
+            .attr("stroke", "#7d7d7d")
             .attr("stroke-width", stroke(wt))
-            .attr("opacity",0.7)
+            .attr("opacity", 0.7)
             .attr("data-src", sname)
             .attr("data-tgt", tname);
     });
 
-    const loopGroup = svg.append("g");
+    const loopGroup = svg.append("g").attr("class", "loops");
     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 sb = nodePos[nameToIndex[b]];
-        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.12);
-        const nlen = Math.sqrt(mx*mx + my*my)||1;
-        const ux = mx/nlen, uy = my/nlen;
-        const cx = mx + ux*outward, cy = my + uy*outward;
+        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;
         loopGroup.append("path")
-            .attr("d", `M ${sa.x} ${sa.y} Q ${cx} ${cy} ${sb.x} ${sb.y}`)
-            .attr("fill","none")
-            .attr("stroke","#227a6d")
+            .attr("d", `M${sa.x},${sa.y} Q${mx+ux*offset},${my+uy*offset} ${sb.x},${sb.y}`)
+            .attr("fill", "none")
+            .attr("stroke", "#227a6d")
             .attr("stroke-width", 2.8)
-            .attr("opacity",0.95);
+            .attr("opacity", 0.95);
     });
 
-    // opacity control
-    function setOpacityFor(nodeName) {
-        group.selectAll("circle").style("opacity", d => d.name===nodeName ? 1 : 0.18);
-        group.selectAll("text").style("opacity", d => d.name===nodeName ? 1 : 0.28);
+    // --------------------------------------------------------------
+    // 2. LABELS AT THE TOP (always visible)
+    // --------------------------------------------------------------
+    const labelGroup = svg.append("g")
+        .attr("class", "node-labels")
+        .selectAll("text")
+        .data(nodePos)
+        .enter()
+        .append("text")
+        .attr("x", d => Math.cos(d.angle) * (radius + 28))
+        .attr("y", d => Math.sin(d.angle) * (radius + 28))
+        .attr("dy", "0.35em")
+        .style("font-family", "sans-serif")
+        .style("font-size", "13px")
+        .style("cursor", "pointer")
+        .style("text-anchor", d => {
+            const deg = (d.angle * 180 / Math.PI);
+            return (deg>-90 && deg<90) ? "start" : "end";
+        })
+        .text(d => d.abbrev);
+
+    // --------------------------------------------------------------
+    // LABEL SWITCHING + OPACITY CONTROLS
+    // --------------------------------------------------------------
+    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]);
+        let transfers = TRANSFERS.filter(x=>x[0]===nodeName || x[1]===nodeName).map(x=>x[0]===nodeName?x[1]:x[0]);
+        let loops = LOOPS.filter(x=>x[0]===nodeName || x[2]===nodeName).map(x=>x[0]===nodeName?x[2]:x[0]);
+        return new Set([].concat(buys, sells, transfers, loops));
+    }
 
-        function isConn(path) {
-            const src = path.getAttribute("data-src");
-            const tgt = path.getAttribute("data-tgt");
-            return (src===nodeName || tgt===nodeName);
+    function updateLabels(selected, connected){
+        labelGroup.text(d => {
+            if (selected && (d.name===selected || connected.has(d.name)))
+                return d.name;
+            return d.abbrev;
+        });
+    }
+
+    function setOpacityFor(nodeName){
+        nodeCircleGroup.selectAll("circle")
+            .style("opacity", d => d.name===nodeName ? 1 : 0.18);
+
+        labelGroup.style("opacity", d => d.name===nodeName?1:0.28);
+
+        function isConn(p){
+            return p.getAttribute("data-src")===nodeName ||
+                   p.getAttribute("data-tgt")===nodeName;
         }
 
         buyGroup.selectAll("path").style("opacity", function(){ return isConn(this)?0.98:0.06; });
@@ -364,76 +396,46 @@ function draw() {
         transferGroup.selectAll("path").style("opacity", function(){ return isConn(this)?0.98:0.06; });
     }
 
-    function resetOpacity() {
-        group.selectAll("circle").style("opacity",1);
-        group.selectAll("text").style("opacity",1);
+    function resetOpacity(){
+        nodeCircleGroup.selectAll("circle").style("opacity",1);
+        labelGroup.style("opacity",1);
         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);
         updateLabels(null, new Set());
-        document.getElementById("info-box").innerHTML = "<b>Click a node</b> to view details here.";
-    }
-
-    // detect connections for label switching
-    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]));
-        let transfers = TRANSFERS.filter(x => x[0]===nodeName || x[1]===nodeName)
-                                 .map(x => (x[0]===nodeName ? x[1] : x[0]));
-        let loops = LOOPS.filter(x => x[0]===nodeName || x[2]===nodeName)
-                         .map(x => (x[0]===nodeName ? x[2] : x[0]));
-
-        return new Set([].concat(buys, sells, transfers, loops));
+        document.getElementById("info-box").innerHTML =
+            "<b>Click a node</b> to view details here.";
     }
 
-    // dynamic label switching
-    function updateLabels(selected, connectedSet) {
-        group.selectAll("text").text(d => {
-            if (selected && (d.name === selected || connectedSet.has(d.name))) {
-                return d.name; // show full name
-            }
-            return d.abbrev;  // otherwise short
-        });
+    function showInfo(name){
+        const con = [...getConnections(name)].sort();
+        document.getElementById("info-box").innerHTML = 
+        `<b>${name}</b><br><br>
+         <b>Connected nodes:</b><br>
+         ${con.length?con.join(", "):"None"}`;
     }
 
-    // info box updates
-    function showInfo(nodeName) {
-        const con = getConnections(nodeName);
-        const box = document.getElementById("info-box");
-        box.innerHTML = `
-            <div style="font-size:14px;"><b>${nodeName}</b></div>
-            <div style="margin-top:6px; font-size:12px;"><b>Connected nodes</b></div>
-            <div style="margin-top:6px; font-size:12px;">
-              <div><b>Buys:</b> ${[...con].join(", ") || "<span style='color:#777'>None</span>"}</div>
-            </div>
-        `;
+    function selectNode(d){
+        const name = d.name;
+        setOpacityFor(name);
+        showInfo(name);
+        const connected = getConnections(name);
+        updateLabels(name, connected);
     }
 
-    // click handlers
-    function selectNode(d) {
-        const nodeName = d.name;
-        setOpacityFor(nodeName);
-        showInfo(nodeName);
-        const connected = getConnections(nodeName);
-        updateLabels(nodeName, connected);
-    }
-
-    group.selectAll("circle").on("click", function(e,d){
+    nodeCircleGroup.on("click", function(e,d){
         selectNode(d);
-        if (e.stopPropagation) e.stopPropagation();
+        e.stopPropagation();
     });
-    group.selectAll("text").on("click", function(e,d){
+    labelGroup.on("click", function(e,d){
         selectNode(d);
-        if (e.stopPropagation) e.stopPropagation();
+        e.stopPropagation();
     });
 
     document.getElementById("arc-reset").onclick = resetOpacity;
-    svg.on("click", function(event){
-        if (event.target.tagName === "svg") resetOpacity();
-    });
+    svg.on("click", function(evt){ if(evt.target.tagName==="svg") resetOpacity(); });
+
 }
 
 draw();
@@ -441,6 +443,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)