From bf8d8a89e70fa3df664e14e22379e2564f75bb4c Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 4 Aug 2016 16:49:38 +0200
Subject: [PATCH 1/4] Smaller node bounding boxes for onHover/onClick

foreignObject was huge on firefox.
---
 client/app/scripts/charts/node.js | 12 ++++++++----
 client/app/styles/main.less       | 13 +++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index afc1555f3..0b811b5e2 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -105,10 +105,14 @@ class Node extends React.Component {
     const useSvgLabels = exportingGraph;
     const size = nodeScale(scaleFactor);
     const networkOffset = focused ? nodeScale(scaleFactor * 0.67) : nodeScale(0.67);
+    const mouseEvents = {
+      onClick: this.handleMouseClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+    };
 
     return (
-      <g className={nodeClassName} transform={transform}
-        onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <g className={nodeClassName} transform={transform}>
 
         {useSvgLabels ?
 
@@ -116,7 +120,7 @@ class Node extends React.Component {
 
           <foreignObject x={labelOffsetX} y={labelOffsetY} width={labelWidth}
             height="10em" transform={labelTransform}>
-            <div className="node-label-wrapper" onClick={this.handleMouseClick}>
+            <div className="node-label-wrapper" {...mouseEvents}>
               <div className={labelClassName}>
                 <MatchedText text={label} match={matches.get('label')} />
               </div>
@@ -127,7 +131,7 @@ class Node extends React.Component {
             </div>
           </foreignObject>}
 
-        <g onClick={this.handleMouseClick}>
+        <g {...mouseEvents}>
           <NodeShapeType
             size={size}
             color={color}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 7daedae92..15473215b 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -368,6 +368,19 @@ h2 {
     }
 
     .node-label-wrapper {
+      //
+      // inline-block so wrapper is only as wide as content.
+      //
+      display: inline-block;
+
+      //
+      // - inline-block gets a different baseline depending on overflow value
+      // - this element gets its overflow value changed sometimes.
+      // - explicitly set the baseline so the text doesn't jump up and down.
+      // http://stackoverflow.com/questions/9273016
+      //
+      vertical-align: top;
+
       cursor: pointer;
     }
 

From d786a075f6dda5d26eb45bd3f7589118c0803faa Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 4 Aug 2016 17:23:52 +0200
Subject: [PATCH 2/4] Fixes foreignObject preventing other nodes from receiving
 hover

---
 client/app/scripts/charts/node.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 0b811b5e2..4b243e8dd 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -118,9 +118,9 @@ class Node extends React.Component {
 
           svgLabels(label, subLabel, labelClassName, subLabelClassName, labelOffsetY) :
 
-          <foreignObject x={labelOffsetX} y={labelOffsetY} width={labelWidth}
-            height="10em" transform={labelTransform}>
-            <div className="node-label-wrapper" {...mouseEvents}>
+          <foreignObject style={{pointerEvents: 'none'}} x={labelOffsetX} y={labelOffsetY}
+            width={labelWidth} height="100em" transform={labelTransform}>
+            <div className="node-label-wrapper" style={{pointerEvents: 'all'}} {...mouseEvents}>
               <div className={labelClassName}>
                 <MatchedText text={label} match={matches.get('label')} />
               </div>

From bf8791b9d5e62183bcad95f09b5a8ec4735b2cf5 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 4 Aug 2016 17:34:49 +0200
Subject: [PATCH 3/4] Header no longer prevents node hover/click

This introduces an inverse thingy, whenever you add something to the
header you have to be aware that by default you won't get any pointer
events and that you'll have to enable them for the dom elements you
wanna make interactive.
---
 client/app/styles/main.less | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 15473215b..b82895b7d 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -165,6 +165,8 @@ h2 {
 }
 
 .header {
+  pointer-events: none;
+
   position: absolute;
   top: 32px;
   width: 100%;
@@ -264,6 +266,8 @@ h2 {
   .topologies-item-main,
   .topologies-sub-item {
     // border: 1px solid @background-darker-secondary-color;
+    pointer-events: all;
+
     color: @text-secondary-color;
     .btn-opacity;
     cursor: pointer;
@@ -1189,6 +1193,8 @@ h2 {
 }
 
 .grid-mode-selector {
+  pointer-events: all;
+
   margin-top: 8px;
   margin-left: 8px;
 
@@ -1278,6 +1284,8 @@ h2 {
 }
 
 .search {
+  pointer-events: all;
+
   display: inline-block;
   position: relative;
   width: 10em;

From 4e2b2028f032a3a9132f33d1a191d6041af07c8e Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 4 Aug 2016 17:42:57 +0200
Subject: [PATCH 4/4] Tighten up grid-mode-selector pointer-event bounding box

---
 client/app/styles/main.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index b82895b7d..91648e535 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1193,12 +1193,12 @@ h2 {
 }
 
 .grid-mode-selector {
-  pointer-events: all;
 
   margin-top: 8px;
   margin-left: 8px;
 
   &-wrapper {
+    pointer-events: all;
     border-color: @background-darker-secondary-color;
   }