Merge pull request #1255 from weaveworks/no-truncate-on-hover

Dont trunctate node labels on hover

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;

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>