From dcfb7f0c2ceb118c16d11717653b9ea7843613d5 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Tue, 12 Apr 2016 10:53:05 +0200
Subject: [PATCH] Fixes flickering when mouse moves between nodes labels

w/ a secret rect!
---
 client/app/scripts/charts/node.js | 6 ++++++
 client/app/styles/main.less       | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index bc313ff30..c7469c884 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -92,6 +92,12 @@ export default class Node extends React.Component {
     return (
       <g className={className} transform={transform} onClick={this.handleMouseClick}
         onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <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}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 658d4b6f6..7363c7433 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -338,6 +338,10 @@ h2 {
     cursor: pointer;
     transition: opacity .5s @base-ease;
 
+    .hover-box {
+      fill-opacity: 0;
+    }
+
     &.hovered text {
       stroke: @background-average-color;
       stroke-width: 8px;