Merge pull request #1264 from weaveworks/1263-untruncate-only-hovered

Untruncate only the hovered node's text, not its adjacents.

client/app/scripts/charts/node.js

@@ -52,16 +52,17 @@ export default class Node extends React.Component {
     this.handleMouseClick = this.handleMouseClick.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.state = { hovered: false };
   }
 
   render() {
     const { blurred, focused, highlighted, label, pseudo, rank,
       subLabel, scaleFactor, transform, zoomScale } = this.props;
-
+    const { hovered } = this.state;
     const nodeScale = focused ? this.props.selectedNodeScale : this.props.nodeScale;
 
     const color = getNodeColor(rank, label, pseudo);
-    const truncate = !focused && !highlighted;
+    const truncate = !focused && !hovered;
     const labelText = truncate ? ellipsis(label, 14, nodeScale(4 * scaleFactor)) : label;
     const subLabelText = truncate ? ellipsis(subLabel, 12, nodeScale(4 * scaleFactor)) : subLabel;
 
@@ -82,6 +83,7 @@ export default class Node extends React.Component {
       node: true,
       highlighted,
       blurred,
+      hovered,
       pseudo
     });
 
@@ -90,10 +92,12 @@ export default class Node extends React.Component {
     return (
       <g className={className} transform={transform} onClick={this.handleMouseClick}
         onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-        <NodeShapeType
-          size={nodeScale(scaleFactor)}
-          color={color}
-          {...this.props} />
+        <rect className="hover-box"
+          x={-nodeScale(scaleFactor * 0.5)}
+          y={-nodeScale(scaleFactor * 0.5)}
+          width={nodeScale(scaleFactor)}
+          height={nodeScale(scaleFactor) + subLabelOffsetY}
+          />
         <text className="node-label" textAnchor="middle" style={{fontSize: labelFontSize}}
           x="0" y={labelOffsetY + nodeScale(0.5 * scaleFactor)}>
           {labelText}
@@ -102,6 +106,10 @@ export default class Node extends React.Component {
           x="0" y={subLabelOffsetY + nodeScale(0.5 * scaleFactor)}>
           {subLabelText}
         </text>
+        <NodeShapeType
+          size={nodeScale(scaleFactor)}
+          color={color}
+          {...this.props} />
       </g>
     );
   }
@@ -113,10 +121,12 @@ export default class Node extends React.Component {
 
   handleMouseEnter() {
     enterNode(this.props.id);
+    this.setState({ hovered: true });
   }
 
   handleMouseLeave() {
     leaveNode(this.props.id);
+    this.setState({ hovered: false });
   }
 }
 

client/app/styles/main.less

@@ -26,6 +26,7 @@
 @primary-color: @weave-charcoal-blue;
 @background-color: lighten(@primary-color, 66%);
 @background-lighter-color: lighten(@background-color, 8%);
+@background-average-color: mix(@background-color, @background-lighter-color);
 @background-darker-color: darken(@background-color, 8%);
 @background-darker-secondary-color: darken(@background-color, 4%);
 @background-dark-color: @primary-color;
@@ -337,6 +338,17 @@ h2 {
     cursor: pointer;
     transition: opacity .5s @base-ease;
 
+    .hover-box {
+      fill-opacity: 0;
+    }
+
+    &.hovered text {
+      stroke: @background-average-color;
+      stroke-width: 8px;
+      stroke-opacity: 0.7;
+      paint-order: stroke;
+    }
+
     &.pseudo {
       cursor: default;