Merge pull request #1667 from weaveworks/1663-fixes-network-bars-position

Fixes network bars position when a node is selected.

client/app/scripts/charts/node-networks-overlay.js

@@ -5,21 +5,18 @@ import { getNetworkColor } from '../utils/color-utils';
 import { isContrastMode } from '../utils/contrast-utils';
 
 
-const barHeight = 5;
-const barMarginTop = 6;
-const labelHeight = 32;
 // Gap size between bar segments.
+const minBarHeight = 3;
 const padding = 0.05;
 const rx = 1;
 const ry = rx;
 const x = d3.scale.ordinal();
 
-function NodeNetworksOverlay({labelOffsetY, size, stack, networks = makeList()}) {
-  const offset = labelOffsetY + labelHeight + barMarginTop;
-
+function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
   // Min size is about a quarter of the width, feels about right.
   const minBarWidth = (size / 4);
   const barWidth = Math.max(size, minBarWidth * networks.size);
+  const barHeight = Math.max(size * 0.085, minBarHeight);
 
   // Update singleton scale.
   x.domain(networks.map((n, i) => i).toJS());
@@ -28,7 +25,7 @@ function NodeNetworksOverlay({labelOffsetY, size, stack, networks = makeList()})
   const bars = networks.map((n, i) => (
     <rect
       x={x(i)}
-      y={offset}
+      y={offset - barHeight * 0.5}
       width={x.rangeBand()}
       height={barHeight}
       rx={rx}

client/app/scripts/charts/node.js

@@ -87,7 +87,8 @@ class Node extends React.Component {
     const labelTransform = focused ? `scale(${1 / zoomScale})` : '';
     const labelWidth = nodeScale(scaleFactor * 4);
     const labelOffsetX = -labelWidth / 2;
-    const labelOffsetY = focused ? nodeScale(0.5) : nodeScale(0.5 * scaleFactor);
+    const labelDy = (showingNetworks && networks) ? 0.75 : 0.60;
+    const labelOffsetY = focused ? nodeScale(labelDy) : nodeScale(labelDy * scaleFactor);
 
     const nodeClassName = classnames('node', {
       highlighted,
@@ -99,11 +100,12 @@ class Node extends React.Component {
 
     const labelClassName = classnames('node-label', { truncate });
     const subLabelClassName = classnames('node-sublabel', { truncate });
-    const matchedResultsStyle = showingNetworks ? { marginTop: 6 } : null;
 
     const NodeShapeType = getNodeShape(this.props);
     const useSvgLabels = exportingGraph;
     const size = nodeScale(scaleFactor);
+    const networkOffset = focused ? nodeScale(scaleFactor * 0.67) : nodeScale(0.67);
+
     return (
       <g className={nodeClassName} transform={transform}
         onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@@ -121,8 +123,7 @@ class Node extends React.Component {
               <div className={subLabelClassName}>
                 <MatchedText text={subLabel} match={matches.get('sublabel')} />
               </div>
-              {!blurred && <MatchedResults matches={matches.get('metadata')}
-                style={matchedResultsStyle} />}
+              {!blurred && <MatchedResults matches={matches.get('metadata')} />}
             </div>
           </foreignObject>}
 
@@ -133,7 +134,7 @@ class Node extends React.Component {
             {...this.props} />
         </g>
 
-        {showingNetworks && <NodeNetworksOverlay labelOffsetY={labelOffsetY}
+        {showingNetworks && <NodeNetworksOverlay offset={networkOffset}
           size={size} networks={networks} stack={stack} />}
       </g>
     );

client/app/styles/main.less

@@ -358,7 +358,6 @@ h2 {
 
     .node-label-wrapper {
       cursor: pointer;
-      padding-top: 6px;
     }
 
     .node-sublabel {