From 9bc289a4b11ffb0c7099eb6e1877e677b1def9f7 Mon Sep 17 00:00:00 2001
From: niclas <nicjan01@gmail.com>
Date: Wed, 28 Feb 2024 14:05:28 +0100
Subject: [PATCH] Add [graph] node enlargement while hovering

---
 .../docs/01_attachements/javascripts/graph.js    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
index 0add079..a65d8e1 100644
--- a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
+++ b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
@@ -147,6 +147,7 @@ document$.subscribe(function () {
             tooltip.html(d.id)
                 .style("left", (event.pageX) + "px")
                 .style("top", (event.pageY - 28) + "px");
+            d3.select(this).attr("r", parseFloat(d3.select(this).attr("r")) + 5);
         })
             .on("mousemove", function (event) {
                 tooltip.style("left", (event.pageX) + "px")
@@ -156,6 +157,9 @@ document$.subscribe(function () {
                 tooltip.transition()
                     .duration(500)
                     .style("opacity", 0);
+                d3.select(this).attr("r", function (d, i) {
+                    return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
+                });
             });
 
         // Apply links on nodes
@@ -223,7 +227,10 @@ document$.subscribe(function () {
             .on("mouseover", function (event, d) {
                 // Highlight all nodes associated with this galaxy
                 svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
-                    .attr("r", NODE_RADIUS + 5);
+                    .each(function () {
+                        var currentRadius = d3.select(this).attr("r");
+                        d3.select(this).attr("r", parseFloat(currentRadius) + 5);
+                    });
                 tooltip.transition()
                     .duration(200)
                     .style("opacity", .9);
@@ -252,11 +259,8 @@ document$.subscribe(function () {
             // .text(d => d.name);
             .text(d => d.name.length > maxCharLength ? d.name.substring(0, maxCharLength) + "..." : d.name)
             .on("mouseover", function (event, d) {
-                // Repeat the highlight effect here for consistency
                 svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
-                    // .attr("r", NODE_RADIUS + 5);
                     .each(function () {
-                        // 'this' refers to the individual SVG circle elements
                         var currentRadius = d3.select(this).attr("r");
                         d3.select(this).attr("r", parseFloat(currentRadius) + 5);
                     });
@@ -325,6 +329,7 @@ document$.subscribe(function () {
                     tooltip.html(d.id)
                         .style("left", (event.pageX) + "px")
                         .style("top", (event.pageY - 28) + "px");
+                    d3.select(this).attr("r", parseFloat(d3.select(this).attr("r")) + 5);
                 })
                     .on("mousemove", function (event) {
                         tooltip.style("left", (event.pageX) + "px")
@@ -334,6 +339,9 @@ document$.subscribe(function () {
                         tooltip.transition()
                             .duration(500)
                             .style("opacity", 0);
+                        d3.select(this).attr("r", function (d, i) {
+                            return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
+                        });
                     });
 
                 // Apply links on nodes