From 322414b51f365241ab72315fd5f3ba24324dfe74 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Mon, 7 Aug 2017 18:27:39 +0100
Subject: [PATCH] Polished the nodes chart overlay.

---
 .../scripts/charts/nodes-chart-elements.js    | 23 ++++++++++++-------
 client/app/styles/_base.scss                  |  3 +--
 client/app/styles/_variables.scss             |  2 +-
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/client/app/scripts/charts/nodes-chart-elements.js b/client/app/scripts/charts/nodes-chart-elements.js
index 54d0e954c..a5d390d31 100644
--- a/client/app/scripts/charts/nodes-chart-elements.js
+++ b/client/app/scripts/charts/nodes-chart-elements.js
@@ -189,16 +189,23 @@ class NodesChartElements extends React.Component {
     );
   }
 
+  renderOverlay(element) {
+    // NOTE: This piece of code is a bit hacky - as we can't set the absolute coords for the
+    // SVG element, we set the zoom level high enough that we're sure it covers the screen.
+    const className = classNames('nodes-chart-overlay', { active: element.get('isActive') });
+    const scale = this.props.selectedScale * 100000;
+    return (
+      <rect
+        className={className} fill="#fff"
+        x={-1} y={-1} width={2} height={2}
+        transform={`scale(${scale})`}
+      />
+    );
+  }
+
   renderElement(element) {
     if (element.get('isOverlay')) {
-      const className = classNames('nodes-overlay', { active: element.get('isActive') });
-      return (
-        <rect
-          className={className}
-          x={-1} y={-1} width={2} height={2}
-          transform="scale(1000000)" fill="#fff"
-        />
-      );
+      return this.renderOverlay(element);
     }
     // This heuristics is not ideal but it works.
     return element.get('points') ? this.renderEdge(element) : this.renderNode(element);
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index f14a9f8bf..14c72b03c 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -411,8 +411,7 @@
 
 }
 
-.nodes-overlay {
-  transition: all .5s $base-ease;
+.nodes-chart-overlay {
   pointer-events: none;
   opacity: 0;
 
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index b6e7205c8..07701f135 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -31,7 +31,7 @@ $border-radius: 4px;
 
 $terminal-header-height: 44px;
 
-$node-elements-in-background-opacity: 0.75;
+$node-elements-in-background-opacity: 0.7;
 
 $node-highlight-shadow-opacity: 0.5;
 $node-highlight-stroke-opacity: 0.4;