Update app.py

app.py

@@ -211,12 +211,12 @@ function draw() {
 
     const radius = Math.min(w, h) * 0.36;
 
-    // node positions around circle (add abbrev)
+    // nodes with abbrev
     const n = NODES.length;
     function angleFor(i) { return (i / n) * 2 * Math.PI; }
     const nodePos = NODES.map((name,i) => {
-        const ang = angleFor(i) - Math.PI/2; // start at top
-        const ab = (name.length > 7 ? name.slice(0,5) + "…" : name);
+        const ang = angleFor(i) - Math.PI/2;
+        const ab = (name.length > 7 ? name.slice(0,5)+"…" : name);
         return {
             name: name,
             abbrev: ab,
@@ -229,7 +229,6 @@ function draw() {
     const nameToIndex = {};
     NODES.forEach((nm,i)=> nameToIndex[nm]=i);
 
-    // small node circles and labels outside
     const group = svg.append("g").selectAll("g").data(nodePos).enter().append("g")
         .attr("transform", d => `translate(${d.x},${d.y})`);
 
@@ -240,6 +239,7 @@ function draw() {
         .style("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))
@@ -258,12 +258,11 @@ function draw() {
         .style("cursor","pointer")
         .text(d => d.abbrev);
 
-    // bezier helper
+    // helper curves
     function bezierPath(x0,y0,x1,y1,above=true) {
         const mx = (x0 + x1)/2;
         const my = (y0 + y1)/2;
-        const dx = mx;
-        const dy = my;
+        const dx = mx, dy = my;
         const len = Math.sqrt(dx*dx + dy*dy) || 1;
         const ux = dx/len, uy = dy/len;
         const offset = (above ? -1 : 1) * Math.max(30, radius*0.9);
@@ -272,80 +271,63 @@ function draw() {
         return `M ${x0} ${y0} Q ${cx} ${cy} ${x1} ${y1}`;
     }
 
-    // stroke width scale
     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]);
 
-    // buys (top)
-    const buyGroup = svg.append("g").attr("class","buys");
+    // groups
+    const buyGroup = svg.append("g");
     BUYS.forEach(b => {
         const a = b[0], c = b[1], wt = b[2];
         if (!(a in nameToIndex) || !(c in nameToIndex)) return;
         const s = nodePos[nameToIndex[a]];
         const t = nodePos[nameToIndex[c]];
-        const path = bezierPath(s.x,s.y,t.x,t.y,true);
         buyGroup.append("path")
-            .attr("d", path)
+            .attr("d", bezierPath(s.x,s.y,t.x,t.y,true))
             .attr("fill","none")
             .attr("stroke","#2e8540")
             .attr("stroke-width", stroke(wt))
-            .attr("stroke-linecap","round")
             .attr("opacity", 0.92)
             .attr("data-src", a)
-            .attr("data-tgt", c)
-            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
-            .on("mouseout", function() { d3.select(this).attr("opacity",0.92); });
+            .attr("data-tgt", c);
     });
 
-    // sells (bottom)
-    const sellGroup = svg.append("g").attr("class","sells");
+    const sellGroup = svg.append("g");
     SELLS.forEach(s => {
         const c = s[0], a = s[1], wt = s[2];
         if (!(c in nameToIndex) || !(a in nameToIndex)) return;
         const sp = nodePos[nameToIndex[c]];
         const tp = nodePos[nameToIndex[a]];
-        const path = bezierPath(sp.x,sp.y,tp.x,tp.y,false);
         sellGroup.append("path")
-            .attr("d", path)
+            .attr("d", bezierPath(sp.x,sp.y,tp.x,tp.y,false))
             .attr("fill","none")
             .attr("stroke","#c0392b")
             .attr("stroke-width", stroke(wt))
-            .attr("stroke-linecap","round")
             .attr("stroke-dasharray","4,3")
             .attr("opacity",0.86)
             .attr("data-src", c)
-            .attr("data-tgt", a)
-            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
-            .on("mouseout", function() { d3.select(this).attr("opacity",0.86); });
+            .attr("data-tgt", a);
     });
 
-    // transfers (grey chords)
-    const transferGroup = svg.append("g").attr("class","transfers");
+    const transferGroup = svg.append("g");
     TRANSFERS.forEach(tr => {
         const sname = tr[0], tname = tr[1], wt = tr[2];
         if (!(sname in nameToIndex) || !(tname in nameToIndex)) return;
         const sp = nodePos[nameToIndex[sname]];
         const tp = nodePos[nameToIndex[tname]];
-        const mx = (sp.x + tp.x)/2;
-        const my = (sp.y + tp.y)/2;
-        const cx = mx * 0.3, cy = my * 0.3;
-        const path = `M ${sp.x} ${sp.y} Q ${cx} ${cy} ${tp.x} ${tp.y}`;
+        const mx = (sp.x + tp.x)/2, my = (sp.y + tp.y)/2;
         transferGroup.append("path")
-            .attr("d", 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("stroke-width", stroke(wt))
             .attr("opacity",0.7)
             .attr("data-src", sname)
-            .attr("data-tgt", tname)
-            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
-            .on("mouseout", function() { d3.select(this).attr("opacity",0.7); });
+            .attr("data-tgt", tname);
     });
 
-    // loops (external arcs)
-    const loopGroup = svg.append("g").attr("class","loops");
+    const loopGroup = svg.append("g");
     LOOPS.forEach(lp => {
         const a = lp[0], c = lp[1], b = lp[2];
         if (!(a in nameToIndex) || !(b in nameToIndex)) return;
@@ -353,101 +335,103 @@ function draw() {
         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)*(sa.x - sb.x) + (sa.y - sb.y)*(sa.y - sb.y));
-        const outward = Math.max(40, radius*0.28 + len * 0.12);
-        const ndx = mx, ndy = my;
-        const nlen = Math.sqrt(ndx*ndx + ndy*ndy) || 1;
-        const ux = ndx/nlen, uy = ndy/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}`;
+        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;
         loopGroup.append("path")
-            .attr("d", path)
-            .attr("fill", "none")
-            .attr("stroke", "#227a6d")
+            .attr("d", `M ${sa.x} ${sa.y} Q ${cx} ${cy} ${sb.x} ${sb.y}`)
+            .attr("fill","none")
+            .attr("stroke","#227a6d")
             .attr("stroke-width", 2.8)
-            .attr("opacity",0.95)
-            .on("mouseover", function() { d3.select(this).attr("opacity",1); })
-            .on("mouseout", function() { d3.select(this).attr("opacity",0.95); });
+            .attr("opacity",0.95);
     });
 
-    // interactivity: focus on node
+    // opacity control
     function setOpacityFor(nodeName) {
-        group.selectAll("circle").style("opacity", d => (d.name === nodeName ? 1.0 : 0.18));
-        group.selectAll("text").style("opacity", d => (d.name === nodeName ? 1.0 : 0.28));
-        buyGroup.selectAll("path").style("opacity", function() {
-            const src = this.getAttribute("data-src");
-            const tgt = this.getAttribute("data-tgt");
-            return (src === nodeName || tgt === nodeName) ? 0.98 : 0.06;
-        });
-        sellGroup.selectAll("path").style("opacity", function() {
-            const src = this.getAttribute("data-src");
-            const tgt = this.getAttribute("data-tgt");
-            return (src === nodeName || tgt === nodeName) ? 0.98 : 0.06;
-        });
-        transferGroup.selectAll("path").style("opacity", function() {
-            const src = this.getAttribute("data-src");
-            const tgt = this.getAttribute("data-tgt");
-            return (src === nodeName || tgt === nodeName) ? 0.98 : 0.06;
-        });
-        loopGroup.selectAll("path").style("opacity", 0.95);
+        group.selectAll("circle").style("opacity", d => d.name===nodeName ? 1 : 0.18);
+        group.selectAll("text").style("opacity", d => d.name===nodeName ? 1 : 0.28);
+
+        function isConn(path) {
+            const src = path.getAttribute("data-src");
+            const tgt = path.getAttribute("data-tgt");
+            return (src===nodeName || tgt===nodeName);
+        }
+
+        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; });
     }
 
     function resetOpacity() {
-        group.selectAll("circle").style("opacity", 1.0);
-        group.selectAll("text").style("opacity", 1.0);
-        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);
-        const box = document.getElementById("info-box");
-        if (box) box.innerHTML = "<b>Click a node</b> to view details here.";
+        group.selectAll("circle").style("opacity",1);
+        group.selectAll("text").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.";
     }
 
-    // get connections for info box
+    // 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]));
-        // unique and sorted
-        function uniq(arr){ return Array.from(new Set(arr)).sort(); }
-        return {buys: uniq(buys), sells: uniq(sells), transfers: uniq(transfers), loops: uniq(loops)};
+        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));
+    }
+
+    // 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
+        });
     }
 
+    // info box updates
     function showInfo(nodeName) {
-        const box = document.getElementById("info-box");
         const con = getConnections(nodeName);
+        const box = document.getElementById("info-box");
         box.innerHTML = `
-          <div style="font-size:14px;"><b>${nodeName}</b></div><div style="height:6px"></div>
-          <div style="font-size:12px"><b>Connected nodes</b></div>
-          <div style="margin-top:6px; font-size:12px;">
-            <div><b>Buys:</b> ${con.buys.length ? con.buys.join(", ") : "<span style='color:#666'>None</span>"}</div>
-            <div><b>Sells:</b> ${con.sells.length ? con.sells.join(", ") : "<span style='color:#666'>None</span>"}</div>
-            <div><b>Transfers:</b> ${con.transfers.length ? con.transfers.join(", ") : "<span style='color:#666'>None</span>"}</div>
-            <div><b>Loops:</b> ${con.loops.length ? con.loops.join(", ") : "<span style='color:#666'>None</span>"}</div>
-          </div>
+            <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>
         `;
     }
 
     // click handlers
-    group.selectAll("circle").style("cursor","pointer").on("click", function(e,d) {
-        setOpacityFor(d.name);
-        showInfo(d.name);
-        if (e && e.stopPropagation) e.stopPropagation();
+    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){
+        selectNode(d);
+        if (e.stopPropagation) e.stopPropagation();
     });
-    group.selectAll("text").style("cursor","pointer").on("click", function(e,d) {
-        setOpacityFor(d.name);
-        showInfo(d.name);
-        if (e && e.stopPropagation) e.stopPropagation();
+    group.selectAll("text").on("click", function(e,d){
+        selectNode(d);
+        if (e.stopPropagation) e.stopPropagation();
     });
 
     document.getElementById("arc-reset").onclick = resetOpacity;
-    svg.on("click", function(event) {
+    svg.on("click", function(event){
         if (event.target.tagName === "svg") resetOpacity();
     });
 }