From a439c7ca97fd3d3709204fca7cbfa1ed5335cf59 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 2 Sep 2015 18:53:04 +0200
Subject: [PATCH] trim node titles in graph via JS

fix for #413

Sadly, the title attribute to show something on hover does not work in
SVG. So we might need another solution for that.
---
 client/app/scripts/charts/node.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index ccfca1869..35d527b7e 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -66,12 +66,29 @@ const Node = React.createClass({
         <circle r={scale(0.5)} className="border" stroke={color}></circle>
         <circle r={scale(0.45)} className="shadow"></circle>
         <circle r={Math.max(2, scale(0.125))} className="node"></circle>
-        <text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>{this.props.label}</text>
-        <text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>{this.props.subLabel}</text>
+        <text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>
+          {this.ellipsis(this.props.label, 14)}
+        </text>
+        <text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>
+          {this.ellipsis(this.props.subLabel, 12)}
+        </text>
       </g>
     );
   },
 
+  ellipsis: function(text, fontSize) {
+    const maxWidth = this.props.scale(4);
+    const averageCharLength = fontSize / 1.5;
+    const allowedChars = maxWidth / averageCharLength;
+    let truncatedText = text;
+    let trimmedText = text;
+    while (text && trimmedText.length > 1 && trimmedText.length > allowedChars) {
+      trimmedText = trimmedText.slice(0, -1);
+      truncatedText = trimmedText + '...';
+    }
+    return truncatedText;
+  },
+
   handleMouseEnter: function(ev) {
     AppActions.enterNode(ev.currentTarget.id);
   },