From 55bed7b7b6020078a80978a1474c49b7bfb6d4f2 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Tue, 12 Jul 2016 18:29:15 +0200
Subject: [PATCH] A couple more tweaks to the network-bar position.

- Center it vertically properly.
---
 client/app/scripts/charts/node-networks-overlay.js | 5 +++--
 client/app/scripts/charts/node.js                  | 8 +++-----
 client/app/styles/main.less                        | 1 -
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/app/scripts/charts/node-networks-overlay.js b/client/app/scripts/charts/node-networks-overlay.js
index c59f794ea..b09dcac2e 100644
--- a/client/app/scripts/charts/node-networks-overlay.js
+++ b/client/app/scripts/charts/node-networks-overlay.js
@@ -5,8 +5,8 @@ import { getNetworkColor } from '../utils/color-utils';
 import { isContrastMode } from '../utils/contrast-utils';
 
 
-const barHeight = 5;
 // Gap size between bar segments.
+const minBarHeight = 3;
 const padding = 0.05;
 const rx = 1;
 const ry = rx;
@@ -16,6 +16,7 @@ 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());
@@ -24,7 +25,7 @@ function NodeNetworksOverlay({offset, 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}
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 7a0b2556b..3ed37dc83 100644
--- a/client/app/scripts/charts/node.js
+++ b/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;
-    let 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,
@@ -103,10 +104,7 @@ class Node extends React.Component {
     const NodeShapeType = getNodeShape(this.props);
     const useSvgLabels = exportingGraph;
     const size = nodeScale(scaleFactor);
-    const networkOffset = nodeScale(scaleFactor * 0.65);
-    if (showingNetworks && networks) {
-      labelOffsetY += (focused ? 12 : 8);
-    }
+    const networkOffset = focused ? nodeScale(scaleFactor * 0.67) : nodeScale(0.67);
 
     return (
       <g className={nodeClassName} transform={transform}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index da5f5d83e..acf5aa467 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -358,7 +358,6 @@ h2 {
 
     .node-label-wrapper {
       cursor: pointer;
-      padding-top: 6px;
     }
 
     .node-sublabel {