Fixes network bars position when a node is selected.

Bar position should be a function of node size!

Note: This is still an estimated position though it looks fine. Would be
nice to take into account size of labels (foreignObjects). The
transforms (for "undoing" the canvas zoom level) are a bit hectic here
and would be really nice to pull out and put in a wrapper...)

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

@@ -6,17 +6,13 @@ import { isContrastMode } from '../utils/contrast-utils';
 
 
 const barHeight = 5;
-const barMarginTop = 6;
-const labelHeight = 32;
 // Gap size between bar segments.
 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);

client/app/scripts/charts/node.js

@@ -104,6 +104,8 @@ class Node extends React.Component {
     const NodeShapeType = getNodeShape(this.props);
     const useSvgLabels = exportingGraph;
     const size = nodeScale(scaleFactor);
+    const networkOffset = focused ? size + size * 0.10 : size + size * 0.25;
+
     return (
       <g className={nodeClassName} transform={transform}
         onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@@ -133,7 +135,7 @@ class Node extends React.Component {
             {...this.props} />
         </g>
 
-        {showingNetworks && <NodeNetworksOverlay labelOffsetY={labelOffsetY}
+        {showingNetworks && <NodeNetworksOverlay offset={networkOffset}
           size={size} networks={networks} stack={stack} />}
       </g>
     );