From c5ea9706748efc0ebdfd2d3791c1854506854efa Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Mon, 11 Apr 2016 11:59:04 +0200
Subject: [PATCH 1/2] Dont trunctate node labels on hover

* makes it easier to read long node labels on demand
---
 client/app/scripts/charts/node.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index ceeb8e899..05fef8e9d 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -27,7 +27,7 @@ const nodeShapes = {
   cloud: NodeShapeCloud
 };
 
-function getNodeShape({shape, stack}) {
+function getNodeShape({ shape, stack }) {
   const nodeShape = nodeShapes[shape];
   if (!nodeShape) {
     throw new Error(`Unknown shape: ${shape}!`);
@@ -59,8 +59,9 @@ export default class Node extends React.Component {
       subLabel, scaleFactor, transform, zoomScale } = this.props;
 
     const color = getNodeColor(rank, label, pseudo);
-    const labelText = ellipsis(label, 14, nodeScale(4 * scaleFactor));
-    const subLabelText = ellipsis(subLabel, 12, nodeScale(4 * scaleFactor));
+    const truncate = !focused && !highlighted;
+    const labelText = truncate ? ellipsis(label, 14, nodeScale(4 * scaleFactor)) : label;
+    const subLabelText = truncate ? ellipsis(subLabel, 12, nodeScale(4 * scaleFactor)) : subLabel;
 
     let labelOffsetY = 18;
     let subLabelOffsetY = 35;

From e6763f14360cce04c9b11b646daeae25e6d834b4 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 11 Apr 2016 12:27:17 +0200
Subject: [PATCH 2/2] Adds button for long named nodes

---
 client/app/scripts/components/debug-toolbar.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js
index 1549c3c7d..ef400ec65 100644
--- a/client/app/scripts/components/debug-toolbar.js
+++ b/client/app/scripts/components/debug-toolbar.js
@@ -16,6 +16,11 @@ const NODE_COUNTS = [1, 2, 3];
 const STACK_VARIANTS = [false, true];
 const METRIC_FILLS = [0, 0.1, 50, 99.9, 100];
 
+const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
 
 const sample = (collection) => _.range(_.random(4)).map(() => _.sample(collection));
 
@@ -105,12 +110,12 @@ function startPerf(delay) {
 }
 
 
-function addNodes(n) {
+function addNodes(n, prefix = 'zing') {
   const ns = AppStore.getNodes();
   const nodeNames = ns.keySeq().toJS();
   const newNodeNames = _.range(ns.size, ns.size + n).map(i => (
     // `${randomLetter()}${randomLetter()}-zing`
-    `zing${i}`
+    `${prefix}${i}`
   ));
   const allNodes = _(nodeNames).concat(newNodeNames).value();
 
@@ -183,6 +188,7 @@ export class DebugToolbar extends React.Component {
           <button onClick={() => addNodes(this.state.nodesToAdd)}>+</button>
           <button onClick={() => addAllVariants()}>Variants</button>
           <button onClick={() => addAllMetricVariants()}>Metric Variants</button>
+          <button onClick={() => addNodes(1, LOREM)}>Long name</button>
         </div>
 
         <div>