From f46025fe101ccd0041e99fa475a2fb6193e3a87c Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Tue, 12 Jul 2016 15:45:35 +0200
Subject: [PATCH] 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 +-----
 client/app/scripts/charts/node.js                  | 4 +++-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/app/scripts/charts/node-networks-overlay.js b/client/app/scripts/charts/node-networks-overlay.js
index 22a371353..c59f794ea 100644
--- a/client/app/scripts/charts/node-networks-overlay.js
+++ b/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);
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 2ff1b47c1..cb8cb6115 100644
--- a/client/app/scripts/charts/node.js
+++ b/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>
     );