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 (
+
+ );
+ }
+
renderElement(element) {
if (element.get('isOverlay')) {
- const className = classNames('nodes-overlay', { active: element.get('isActive') });
- return (
-
- );
+ 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;