From 260ac11c65d0ca0cb1ab72f56d5aaa9a1ac59e32 Mon Sep 17 00:00:00 2001
From: luccioman <luccioman@users.noreply.github.com>
Date: Wed, 31 Oct 2018 07:43:42 +0100
Subject: [PATCH] Limit length of initially visible text in link structure
 graph nodes

To improve a bit readability of graphs having a large number of nodes.
---
 htroot/env/hypertree.css | 18 +++++++++++++++++-
 htroot/js/hypertree.js   | 12 +++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/htroot/env/hypertree.css b/htroot/env/hypertree.css
index 5175180bf..50331d4a6 100644
--- a/htroot/env/hypertree.css
+++ b/htroot/env/hypertree.css
@@ -32,6 +32,22 @@ circle {
 }
 text {
   font: 9px sans-serif;
-  pointer-events: none;
+  cursor: default;
   text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
 }
+
+text tspan.truncated {
+	display: none;
+}
+
+text:hover tspan.truncated {
+	display: inherit;
+}
+
+text tspan.ellipsis {
+	display: inherit;
+}
+
+text:hover tspan.ellipsis {
+	display: none;
+}
diff --git a/htroot/js/hypertree.js b/htroot/js/hypertree.js
index d823c4276..c4eecad5c 100644
--- a/htroot/js/hypertree.js
+++ b/htroot/js/hypertree.js
@@ -64,10 +64,20 @@ function linkstructure(hostname, element, width, height, maxtime, maxnodes) {
 			.attr("class",function(d) {return "hypertree-link " + d.type; })
 			.attr("marker-end", function(d) { return "url(#" + d.type + ")";});
 		var circle = svg.append("g").selectAll("circle").data(simulation.nodes()).enter().append("circle").attr("r", 4).call(d3.drag());
+		var maxTextLength = 40;
 		var text = svg.append("g")
 			.selectAll("text").data(simulation.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em")
 			.attr("style", function(d) {return d.type == "Outbound" ? "fill:#888888;" : "fill:#000000;";})
-			.text(function(d) {return d.name;});
+			.text(function(d) {/* Limit the length of nodes visible text to improve readability */ return d.name.substring(0, Math.min(d.name.length, maxTextLength));});
+		text.append("tspan")
+			.attr("class", "truncated")
+			.text(function(d) {/* The end of large texts is wraped in a tspan, made visible on mouse overing */return d.name.length > maxTextLength ? d.name.substring(maxTextLength) : ""});
+		
+		text.append("tspan")
+			.attr("class", "ellipsis")
+			.text(function(d) {/* Add an ellipsis to mark long texts that are truncated */ return d.name.length > maxTextLength ? "..." : ""});
+
+		
 		function ticked() {
 		  path.attr("d", linkArc);
 		  circle.attr("transform", transform);