From 2c554fe273c4204ca574126722371d378d108557 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 9 Sep 2015 18:12:02 +0200
Subject: [PATCH] blur nodes that not selected nor adjacent

---
 client/app/scripts/charts/edge.js        | 12 ++++++++++--
 client/app/scripts/charts/node.js        |  7 +++++--
 client/app/scripts/charts/nodes-chart.js | 18 ++++++++++++++++--
 client/app/scripts/stores/app-store.js   |  6 ++++++
 client/app/styles/main.less              | 11 +++++++++++
 5 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js
index 97797195f..5a40ea3cd 100644
--- a/client/app/scripts/charts/edge.js
+++ b/client/app/scripts/charts/edge.js
@@ -51,18 +51,26 @@ const Edge = React.createClass({
   },
 
   render: function() {
-    const className = this.props.highlighted ? 'edge highlighted' : 'edge';
+    const classNames = ['edge'];
     const points = flattenPoints(this.props.points);
     const props = this.props;
     const handleMouseEnter = this.handleMouseEnter;
     const handleMouseLeave = this.handleMouseLeave;
 
+    if (this.props.highlighted) {
+      classNames.push('highlighted');
+    }
+    if (this.props.blurred) {
+      classNames.push('blurred');
+    }
+    const classes = classNames.join(' ');
+
     return (
       <Spring endValue={points}>
         {function(interpolated) {
           const path = line(extractPoints(interpolated));
           return (
-            <g className={className} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} id={props.id}>
+            <g className={classes} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} id={props.id}>
               <path d={path} className="shadow" />
               <path d={path} className="link" />
             </g>
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index eff188b02..039dd9e3e 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -26,17 +26,20 @@ const Node = React.createClass({
     if (this.props.highlighted) {
       classNames.push('highlighted');
     }
-
+    if (this.props.blurred) {
+      classNames.push('blurred');
+    }
     if (this.props.pseudo) {
       classNames.push('pseudo');
     }
+    const classes = classNames.join(' ');
 
     return (
       <Spring endValue={{x: {val: this.props.dx, config: animConfig}, y: {val: this.props.dy, config: animConfig}}}>
         {function(interpolated) {
           const transform = 'translate(' + interpolated.x.val + ',' + interpolated.y.val + ')';
           return (
-            <g className={classNames.join(' ')} transform={transform} id={props.id}
+            <g className={classes} transform={transform} id={props.id}
               onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
               {props.highlighted && <circle r={scale(0.7)} className="highlighted"></circle>}
               <circle r={scale(0.5)} className="border" stroke={color}></circle>
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 64380771a..ffb41420c 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -82,11 +82,18 @@ const NodesChart = React.createClass({
   },
 
   renderGraphNodes: function(nodes, scale) {
+    const hasSelectedNode = this.props.selectedNodeId && this.props.nodes.has(this.props.selectedNodeId);
+    const adjacency = hasSelectedNode ? this.props.nodes.get(this.props.selectedNodeId).get('adjacency') : null;
     return _.map(nodes, function(node) {
       const highlighted = _.includes(this.props.highlightedNodeIds, node.id)
         || this.props.selectedNodeId === node.id;
+      const blurred = hasSelectedNode
+        && this.props.selectedNodeId !== node.id
+        && !adjacency.includes(node.id);
+
       return (
         <Node
+          blurred={blurred}
           highlighted={highlighted}
           onClick={this.props.onNodeClick}
           key={node.id}
@@ -104,10 +111,17 @@ const NodesChart = React.createClass({
   },
 
   renderGraphEdges: function(edges) {
+    const selectedNodeId = this.props.selectedNodeId;
+    const hasSelectedNode = selectedNodeId && this.props.nodes.has(selectedNodeId);
+
     return _.map(edges, function(edge) {
       const highlighted = _.includes(this.props.highlightedEdgeIds, edge.id);
+      const blurred = hasSelectedNode
+        && edge.source.id !== selectedNodeId
+        && edge.target.id !== selectedNodeId;
       return (
-        <Edge key={edge.id} id={edge.id} points={edge.points} highlighted={highlighted} />
+        <Edge key={edge.id} id={edge.id} points={edge.points} blurred={blurred}
+          highlighted={highlighted} />
       );
     }, this);
   },
@@ -200,7 +214,7 @@ const NodesChart = React.createClass({
       return;
     }
 
-    const adjacency = props.nodes.get(props.selectedNodeId).get('adjacency');
+    const adjacency = this.props.nodes.get(props.selectedNodeId).get('adjacency');
     const adjacentLayoutNodes = [];
 
     adjacency.forEach(function(adjacentId) {
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 81f601083..7960a6388 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -93,6 +93,12 @@ const AppStore = assign({}, EventEmitter.prototype, {
     return activeTopologyOptions;
   },
 
+  getAdjacentNodes: function() {
+    if (nodes.has(selectedNodeId)) {
+      return nodes.get(selectedNodeId).get('adjacency');
+    }
+  },
+
   getCurrentTopology: function() {
     if (!currentTopology) {
       currentTopology = setTopology(currentTopologyId);
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 1eb64c63d..c5e00e0ed 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -176,6 +176,11 @@ body {
 
   g.node {
     cursor: pointer;
+    transition: opacity .5s ease-in-out;
+
+    &.blurred {
+      opacity: 0.25;
+    }
 
     &.pseudo {
       opacity: 0.8;
@@ -197,6 +202,12 @@ body {
   }
 
   .edge {
+    transition: opacity .5s ease-in-out;
+
+    &.blurred {
+      opacity: 0.2;
+    }
+
     .link {
       stroke: @text-secondary-color;
       stroke-width: 1.5px;