Update app.py

app.py

@@ -380,22 +380,35 @@ function draw() {
         });
     }
 
-    function setOpacityFor(nodeName){
+    function setOpacityFor(nodeName) {
+        const connected = getConnections(nodeName);
+    
+        // highlight circles
         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;
+            .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);
         }
-
+    
         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
     }
 
+
     function resetOpacity(){
         nodeCircleGroup.selectAll("circle").style("opacity",1);
         labelGroup.style("opacity",1);
@@ -408,14 +421,33 @@ function draw() {
             "<b>Click a node</b> to view details here.";
     }
 
-    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"}`;
+    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;">
+            <b>Buys:</b> ${buys.length ? buys.join(", ") : "<span style='color:#777'>None</span>"}<br>
+            <b>Sells:</b> ${sells.length ? sells.join(", ") : "<span style='color:#777'>None</span>"}<br>
+            <b>Transfers:</b> ${transfers.length ? transfers.join(", ") : "<span style='color:#777'>None</span>"}<br>
+            <b>Loops:</b> ${loops.length ? loops.join(", ") : "<span style='color:#777'>None</span>"}
+          </div>
+        `;
     }
 
+
     function selectNode(d){
         const name = d.name;
         setOpacityFor(name);