From d4df918d7741c8b283a731bf5928529518cdca38 Mon Sep 17 00:00:00 2001
From: niclas <nicjan01@gmail.com>
Date: Wed, 28 Feb 2024 13:54:38 +0100
Subject: [PATCH] Fix [graph] replace . from galaxy class names

---
 .../docs/01_attachements/javascripts/graph.js | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
index 0fb97a8..0add079 100644
--- a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
+++ b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
@@ -137,7 +137,7 @@ document$.subscribe(function () {
             .attr("fill", function (d, i) {
                 return d.id === Parent_Node.id ? Parent_Node_COLOR : colorScale(d.galaxy);
             })
-            .attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-'));
+            .attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'));
 
         // Apply tooltip on nodes
         node.on("mouseover", function (event, d) {
@@ -216,13 +216,13 @@ document$.subscribe(function () {
             .attr("class", "legend-item")
             .attr("transform", (d, i) => `translate(0, ${i * 20})`);
 
-        legendItem.append("rect")
+        legendItem.append("rect") // change node radius info TODO
             .attr("width", 12)
             .attr("height", 12)
             .style("fill", d => d.color)
             .on("mouseover", function (event, d) {
                 // Highlight all nodes associated with this galaxy
-                svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-'))
+                svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
                     .attr("r", NODE_RADIUS + 5);
                 tooltip.transition()
                     .duration(200)
@@ -233,8 +233,10 @@ document$.subscribe(function () {
             })
             .on("mouseout", function (event, d) {
                 // Remove highlight from all nodes
-                svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-'))
-                    .attr("r", NODE_RADIUS);
+                svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
+                    .attr("r", function (d, i) {
+                        return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
+                    });
                 tooltip.transition()
                     .duration(500)
                     .style("opacity", 0);
@@ -251,8 +253,13 @@ document$.subscribe(function () {
             .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, '-'))
-                    .attr("r", NODE_RADIUS + 5);
+                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);
+                    });
                 tooltip.transition()
                     .duration(200)
                     .style("opacity", .9);
@@ -261,8 +268,10 @@ document$.subscribe(function () {
                     .style("top", (event.pageY - 28) + "px");
             })
             .on("mouseout", function (event, d) {
-                svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-'))
-                    .attr("r", NODE_RADIUS);
+                svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))
+                    .attr("r", function (d, i) {
+                        return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS;
+                    });
                 tooltip.transition()
                     .duration(500)
                     .style("opacity", 0);
@@ -301,7 +310,7 @@ document$.subscribe(function () {
                             .attr("fill", function (d, i) {
                                 return d.id === Parent_Node.id ? Parent_Node_COLOR : colorScale(d.galaxy);
                             })
-                            .attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-')),
+                            .attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')),
                         update => update,
                         exit => exit.remove()
                     );