Merge pull request #1756 from weaveworks/tighter-node-bounding-boxes-1520

Tighter node bounding boxes

client/app/scripts/charts/node.js

@@ -105,18 +105,22 @@ 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 ?
 
           svgLabels(label, subLabel, labelClassName, subLabelClassName, labelOffsetY) :
 
-          <foreignObject x={labelOffsetX} y={labelOffsetY} width={labelWidth}
-            height="10em" transform={labelTransform}>
-            <div className="node-label-wrapper" onClick={this.handleMouseClick}>
+          <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>
@@ -127,7 +131,7 @@ class Node extends React.Component {
             </div>
           </foreignObject>}
 
-        <g onClick={this.handleMouseClick}>
+        <g {...mouseEvents}>
           <NodeShapeType
             size={size}
             color={color}

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;
@@ -368,6 +372,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;
     }
 
@@ -1176,10 +1193,12 @@ h2 {
 }
 
 .grid-mode-selector {
+
   margin-top: 8px;
   margin-left: 8px;
 
   &-wrapper {
+    pointer-events: all;
     border-color: @background-darker-secondary-color;
   }
 
@@ -1265,6 +1284,8 @@ h2 {
 }
 
 .search {
+  pointer-events: all;
+
   display: inline-block;
   position: relative;
   width: 10em;