From e6f4a8ce717150aad293e6e62690c23fb5c2665b Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 29 May 2015 16:53:05 +0200
Subject: [PATCH 1/3] highlight connected nodes on hover

---
 client/app/scripts/charts/node.js        | 14 +++++++++++++-
 client/app/scripts/charts/nodes-chart.js |  7 ++++++-
 client/app/scripts/components/app.js     |  3 ++-
 client/app/scripts/components/nodes.js   |  3 ++-
 client/app/scripts/stores/app-store.js   | 14 +++++++++-----
 client/app/styles/main.less              |  9 +++++++++
 6 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index fa8e46efa3..d09089a10a 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -1,6 +1,7 @@
 const React = require('react');
 const tweenState = require('react-tween-state');
 
+const AppActions = require('../actions/app-actions');
 const NodeColorMixin = require('../mixins/node-color-mixin');
 
 const Node = React.createClass({
@@ -47,7 +48,9 @@ const Node = React.createClass({
     const className = this.props.highlighted ? 'node highlighted' : 'node';
 
     return (
-      <g className={className} transform={transform} onClick={this.props.onClick} id={this.props.id}>
+      <g className={className} transform={transform} id={this.props.id}
+        onClick={this.props.onClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        {this.props.highlighted && <circle r={scale(0.7)} className="highlighted"></circle>}
         <circle r={scale(0.5)} className="border" stroke={color}></circle>
         <circle r={scale(0.45)} className="shadow"></circle>
         <circle r={Math.max(2, scale(0.125))} className="node"></circle>
@@ -55,7 +58,16 @@ const Node = React.createClass({
         <text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>{this.props.subLabel}</text>
       </g>
     );
+  },
+
+  handleMouseEnter: function(ev) {
+    AppActions.enterNode(ev.currentTarget.id);
+  },
+
+  handleMouseLeave: function(ev) {
+    AppActions.leaveNode(ev.currentTarget.id);
   }
+
 });
 
 module.exports = Node;
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 91b1034dd0..0be3b486a3 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -79,7 +79,7 @@ const NodesChart = React.createClass({
 
   getGraphNodes: function(nodes, scale) {
     return _.map(nodes, function(node) {
-      const highlighted = _.includes(this.props.highlightedNodes, node.id);
+      const highlighted = node.id === this.props.mouseOverNodeId || _.includes(node.adjacency, this.props.mouseOverNodeId);
       return (
         <Node
           highlighted={highlighted}
@@ -131,12 +131,17 @@ const NodesChart = React.createClass({
 
     _.each(topology, function(node, id) {
       nodes[id] = prevNodes[id] || {};
+
+      // initialize position for new nodes
       _.defaults(nodes[id], {
         x: centerX,
         y: centerY,
         textAnchor: 'start'
       });
+
+      // copy relevant fields to state nodes
       _.assign(nodes[id], {
+        adjacency: node.adjacency,
         id: id,
         label: node.label_major,
         subLabel: node.label_minor,
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 97cdc112e3..4d6e0d8036 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -19,6 +19,7 @@ function getStateFromStores() {
     currentTopology: AppStore.getCurrentTopology(),
     connectionState: AppStore.getConnectionState(),
     currentGrouping: AppStore.getCurrentGrouping(),
+    mouseOverNodeId: AppStore.getMouseOverNodeId(),
     selectedNodeId: AppStore.getSelectedNodeId(),
     nodeDetails: AppStore.getNodeDetails(),
     nodes: AppStore.getNodes(),
@@ -67,7 +68,7 @@ const App = React.createClass({
           <Status connectionState={this.state.connectionState} />
         </div>
 
-        <Nodes nodes={this.state.nodes} />
+        <Nodes nodes={this.state.nodes} mouseOverNodeId={this.state.mouseOverNodeId} />
       </div>
     );
   }
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js
index 945428b6ae..53d37a2121 100644
--- a/client/app/scripts/components/nodes.js
+++ b/client/app/scripts/components/nodes.js
@@ -31,8 +31,9 @@ const Nodes = React.createClass({
     return (
       <div id="nodes">
         <NodesChart
-          onNodeClick={this.onNodeClick}
+          mouseOverNodeId={this.props.mouseOverNodeId}
           nodes={this.props.nodes}
+          onNodeClick={this.onNodeClick}
           width={this.state.width}
           height={this.state.height}
           context="view"
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 1763c03215..6ed301a0d1 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -16,7 +16,7 @@ function isUrlForTopologyId(url, topologyId) {
 let connectionState = 'disconnected';
 let currentGrouping = 'none';
 let currentTopologyId = 'applications';
-let mouseOverNode = null;
+let mouseOverNodeId = null;
 let nodes = {};
 let nodeDetails = null;
 let selectedNodeId = null;
@@ -58,6 +58,10 @@ const AppStore = assign({}, EventEmitter.prototype, {
     return currentGrouping;
   },
 
+  getMouseOverNodeId: function() {
+    return mouseOverNodeId;
+  },
+
   getNodeDetails: function() {
     return nodeDetails;
   },
@@ -111,7 +115,7 @@ AppStore.registeredCallback = function(payload) {
       break;
 
     case ActionTypes.ENTER_NODE:
-      mouseOverNode = payload.nodeId;
+      mouseOverNodeId = payload.nodeId;
       AppStore.emit(AppStore.CHANGE_EVENT);
       break;
 
@@ -122,7 +126,7 @@ AppStore.registeredCallback = function(payload) {
       break;
 
     case ActionTypes.LEAVE_NODE:
-      mouseOverNode = null;
+      mouseOverNodeId = null;
       AppStore.emit(AppStore.CHANGE_EVENT);
       break;
 
@@ -142,8 +146,8 @@ AppStore.registeredCallback = function(payload) {
       // nodes that no longer exist
       _.each(payload.delta.remove, function(nodeId) {
         // in case node disappears before mouseleave event
-        if (mouseOverNode === nodeId) {
-          mouseOverNode = null;
+        if (mouseOverNodeId === nodeId) {
+          mouseOverNodeId = null;
         }
         delete nodes[nodeId];
       });
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index eb2c193e26..4d09d7948d 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -182,6 +182,15 @@ body {
   circle.node {
     fill: @text-color;
   }
+
+  circle.highlighted {
+    fill: @weave-blue;
+    fill-opacity: 0.1;
+    stroke: @weave-blue;
+    stroke-width: 1px;
+    stroke-opacity: 0.4;
+  }
+
 }
 
 #details {

From 9c3db34d492ec638547db170968ddd7f7ae47104 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 29 May 2015 18:00:35 +0200
Subject: [PATCH 2/3] highlight edges and connected nodes on edge hover

---
 client/app/scripts/actions/app-actions.js    | 14 ++++++
 client/app/scripts/charts/edge.js            | 34 +++++++++++++++
 client/app/scripts/charts/nodes-chart.js     | 24 +++++-----
 client/app/scripts/components/app.js         |  6 ++-
 client/app/scripts/components/nodes.js       |  3 +-
 client/app/scripts/constants/action-types.js |  2 +
 client/app/scripts/constants/naming.js       |  4 ++
 client/app/scripts/stores/app-store.js       | 46 +++++++++++++++++++-
 client/app/styles/main.less                  | 24 +++++++---
 9 files changed, 134 insertions(+), 23 deletions(-)
 create mode 100644 client/app/scripts/charts/edge.js
 create mode 100644 client/app/scripts/constants/naming.js

diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
index 2aa9916284..3a662bbb83 100644
--- a/client/app/scripts/actions/app-actions.js
+++ b/client/app/scripts/actions/app-actions.js
@@ -39,6 +39,13 @@ module.exports = {
     WebapiUtils.getNodesDelta(AppStore.getCurrentTopologyUrl());
   },
 
+  enterEdge: function(edgeId) {
+    AppDispatcher.dispatch({
+      type: ActionTypes.ENTER_EDGE,
+      edgeId: edgeId
+    });
+  },
+
   enterNode: function(nodeId) {
     AppDispatcher.dispatch({
       type: ActionTypes.ENTER_NODE,
@@ -53,6 +60,13 @@ module.exports = {
     RouterUtils.updateRoute();
   },
 
+  leaveEdge: function(edgeId) {
+    AppDispatcher.dispatch({
+      type: ActionTypes.LEAVE_EDGE,
+      edgeId: edgeId
+    });
+  },
+
   leaveNode: function(nodeId) {
     AppDispatcher.dispatch({
       type: ActionTypes.LEAVE_NODE,
diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js
new file mode 100644
index 0000000000..c7bb9f4ccb
--- /dev/null
+++ b/client/app/scripts/charts/edge.js
@@ -0,0 +1,34 @@
+const d3 = require('d3');
+const React = require('react');
+
+const AppActions = require('../actions/app-actions');
+
+const line = d3.svg.line()
+  .interpolate('basis')
+  .x(function(d) { return d.x; })
+  .y(function(d) { return d.y; });
+
+const Edge = React.createClass({
+
+  render: function() {
+    const className = this.props.highlighted ? 'edge highlighted' : 'edge';
+
+    return (
+      <g className={className} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} id={this.props.id}>
+        <path d={line(this.props.points)} className="shadow" />
+        <path d={line(this.props.points)} className="link" />
+      </g>
+    );
+  },
+
+  handleMouseEnter: function(ev) {
+    AppActions.enterEdge(ev.currentTarget.id);
+  },
+
+  handleMouseLeave: function(ev) {
+    AppActions.leaveEdge(ev.currentTarget.id);
+  }
+
+});
+
+module.exports = Edge;
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 0be3b486a3..5a5d8648fa 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -2,6 +2,8 @@ const _ = require('lodash');
 const d3 = require('d3');
 const React = require('react');
 
+const Edge = require('./edge');
+const Naming = require('../constants/naming');
 const NodesLayout = require('./nodes-layout');
 const Node = require('./node');
 
@@ -12,11 +14,6 @@ const MARGINS = {
   bottom: 0
 };
 
-const line = d3.svg.line()
-  .interpolate('basis')
-  .x(function(d) { return d.x; })
-  .y(function(d) { return d.y; });
-
 const NodesChart = React.createClass({
 
   getInitialState: function() {
@@ -77,9 +74,9 @@ const NodesChart = React.createClass({
     return fingerprint.join(';');
   },
 
-  getGraphNodes: function(nodes, scale) {
+  renderGraphNodes: function(nodes, scale) {
     return _.map(nodes, function(node) {
-      const highlighted = node.id === this.props.mouseOverNodeId || _.includes(node.adjacency, this.props.mouseOverNodeId);
+      const highlighted = _.includes(this.props.highlightedNodeIds, node.id);
       return (
         <Node
           highlighted={highlighted}
@@ -96,17 +93,18 @@ const NodesChart = React.createClass({
     }, this);
   },
 
-  getGraphEdges: function(edges) {
+  renderGraphEdges: function(edges) {
     return _.map(edges, function(edge) {
+      const highlighted = _.includes(this.props.highlightedEdgeIds, edge.id);
       return (
-        <path className="link" d={line(edge.points)} key={edge.id} />
+        <Edge key={edge.id} id={edge.id} points={edge.points} highlighted={highlighted} />
       );
-    });
+    }, this);
   },
 
   render: function() {
-    const nodeElements = this.getGraphNodes(this.state.nodes, this.state.nodeScale);
-    const edgeElements = this.getGraphEdges(this.state.edges, this.state.nodeScale);
+    const nodeElements = this.renderGraphNodes(this.state.nodes, this.state.nodeScale);
+    const edgeElements = this.renderGraphEdges(this.state.edges, this.state.nodeScale);
     const transform = 'translate(' + this.state.translate + ')' +
       ' scale(' + this.state.scale + ')';
 
@@ -158,7 +156,7 @@ const NodesChart = React.createClass({
     _.each(topology, function(node) {
       _.each(node.adjacency, function(adjacent) {
         const edge = [node.id, adjacent];
-        const edgeId = edge.join('-');
+        const edgeId = edge.join(Naming.EDGE_ID_SEPARATOR);
 
         if (!edges[edgeId]) {
           const source = nodes[edge[0]];
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 4d6e0d8036..309b56a289 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -19,7 +19,8 @@ function getStateFromStores() {
     currentTopology: AppStore.getCurrentTopology(),
     connectionState: AppStore.getConnectionState(),
     currentGrouping: AppStore.getCurrentGrouping(),
-    mouseOverNodeId: AppStore.getMouseOverNodeId(),
+    highlightedEdgeIds: AppStore.getHighlightedEdgeIds(),
+    highlightedNodeIds: AppStore.getHighlightedNodeIds(),
     selectedNodeId: AppStore.getSelectedNodeId(),
     nodeDetails: AppStore.getNodeDetails(),
     nodes: AppStore.getNodes(),
@@ -68,7 +69,8 @@ const App = React.createClass({
           <Status connectionState={this.state.connectionState} />
         </div>
 
-        <Nodes nodes={this.state.nodes} mouseOverNodeId={this.state.mouseOverNodeId} />
+        <Nodes nodes={this.state.nodes} highlightedNodeIds={this.state.highlightedNodeIds}
+          highlightedEdgeIds={this.state.highlightedEdgeIds} />
       </div>
     );
   }
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js
index 53d37a2121..4d1896d867 100644
--- a/client/app/scripts/components/nodes.js
+++ b/client/app/scripts/components/nodes.js
@@ -31,7 +31,8 @@ const Nodes = React.createClass({
     return (
       <div id="nodes">
         <NodesChart
-          mouseOverNodeId={this.props.mouseOverNodeId}
+          highlightedEdgeIds={this.props.highlightedEdgeIds}
+          highlightedNodeIds={this.props.highlightedNodeIds}
           nodes={this.props.nodes}
           onNodeClick={this.onNodeClick}
           width={this.state.width}
diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js
index 91a3772c54..c54118d43a 100644
--- a/client/app/scripts/constants/action-types.js
+++ b/client/app/scripts/constants/action-types.js
@@ -5,8 +5,10 @@ module.exports = keymirror({
   CLICK_GROUPING: null,
   CLICK_NODE: null,
   CLICK_TOPOLOGY: null,
+  ENTER_EDGE: null,
   ENTER_NODE: null,
   HIT_ESC_KEY: null,
+  LEAVE_EDGE: null,
   LEAVE_NODE: null,
   RECEIVE_NODE_DETAILS: null,
   RECEIVE_NODES: null,
diff --git a/client/app/scripts/constants/naming.js b/client/app/scripts/constants/naming.js
new file mode 100644
index 0000000000..8ed08ebb2f
--- /dev/null
+++ b/client/app/scripts/constants/naming.js
@@ -0,0 +1,4 @@
+
+module.exports = {
+  EDGE_ID_SEPARATOR: '-'
+};
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 6ed301a0d1..9bc1543441 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -4,6 +4,7 @@ const assign = require('object-assign');
 
 const AppDispatcher = require('../dispatcher/app-dispatcher');
 const ActionTypes = require('../constants/action-types');
+const Naming = require('../constants/naming');
 
 // Helpers
 
@@ -16,6 +17,7 @@ function isUrlForTopologyId(url, topologyId) {
 let connectionState = 'disconnected';
 let currentGrouping = 'none';
 let currentTopologyId = 'applications';
+let mouseOverEdgeId = null;
 let mouseOverNodeId = null;
 let nodes = {};
 let nodeDetails = null;
@@ -58,8 +60,34 @@ const AppStore = assign({}, EventEmitter.prototype, {
     return currentGrouping;
   },
 
-  getMouseOverNodeId: function() {
-    return mouseOverNodeId;
+  getHighlightedEdgeIds: function() {
+    if (mouseOverNodeId) {
+      // all neighbour combinations because we dont know which direction exists
+      const node = nodes[mouseOverNodeId];
+      return _.flatten(
+        _.map(node.adjacency, function(nodeId) {
+          return [
+            [nodeId, mouseOverNodeId].join(Naming.EDGE_ID_SEPARATOR),
+            [mouseOverNodeId, nodeId].join(Naming.EDGE_ID_SEPARATOR)
+          ];
+        })
+      );
+    }
+    if (mouseOverEdgeId) {
+      return mouseOverEdgeId;
+    }
+    return null;
+  },
+
+  getHighlightedNodeIds: function() {
+    if (mouseOverNodeId) {
+      const node = nodes[mouseOverNodeId];
+      return _.union(node.adjacency, [mouseOverNodeId]);
+    }
+    if (mouseOverEdgeId) {
+      return mouseOverEdgeId.split(Naming.EDGE_ID_SEPARATOR);
+    }
+    return null;
   },
 
   getNodeDetails: function() {
@@ -114,6 +142,11 @@ AppStore.registeredCallback = function(payload) {
       AppStore.emit(AppStore.CHANGE_EVENT);
       break;
 
+    case ActionTypes.ENTER_EDGE:
+      mouseOverEdgeId = payload.edgeId;
+      AppStore.emit(AppStore.CHANGE_EVENT);
+      break;
+
     case ActionTypes.ENTER_NODE:
       mouseOverNodeId = payload.nodeId;
       AppStore.emit(AppStore.CHANGE_EVENT);
@@ -125,6 +158,12 @@ AppStore.registeredCallback = function(payload) {
       AppStore.emit(AppStore.CHANGE_EVENT);
       break;
 
+    case ActionTypes.LEAVE_EDGE:
+      mouseOverEdgeId = null;
+      console.log('leave');
+      AppStore.emit(AppStore.CHANGE_EVENT);
+      break;
+
     case ActionTypes.LEAVE_NODE:
       mouseOverNodeId = null;
       AppStore.emit(AppStore.CHANGE_EVENT);
@@ -149,6 +188,9 @@ AppStore.registeredCallback = function(payload) {
         if (mouseOverNodeId === nodeId) {
           mouseOverNodeId = null;
         }
+        if (nodes[nodeId] && _.contains(mouseOverEdgeId, nodeId)) {
+          mouseOverEdgeId = null;
+        }
         delete nodes[nodeId];
       });
 
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 4d09d7948d..4757465d0b 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -162,13 +162,27 @@ body {
     cursor: pointer;
   }
 
-  .link {
-    stroke: @text-secondary-color;
-    stroke-width: 1.5px;
-    fill: none;
-    opacity: 0.5;
+  .edge {
+    .link {
+      stroke: @text-secondary-color;
+      stroke-width: 1.5px;
+      fill: none;
+      stroke-opacity: 0.5;
+    }
+    .shadow {
+      stroke: @weave-blue;
+      stroke-width: 10px;
+      fill: none;
+      stroke-opacity: 0;
+    }
+    &.highlighted {
+      .shadow {
+        stroke-opacity: 0.1;
+      }
+    }
   }
 
+
   circle.border {
     stroke-width: 3px;
     fill: none;

From d259be72c2c0e0a41a279c1283bbc5670e0bdbf8 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 29 May 2015 18:08:03 +0200
Subject: [PATCH 3/3] removed console.log

---
 client/app/scripts/stores/app-store.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 9bc1543441..f496ae315c 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -160,7 +160,6 @@ AppStore.registeredCallback = function(payload) {
 
     case ActionTypes.LEAVE_EDGE:
       mouseOverEdgeId = null;
-      console.log('leave');
       AppStore.emit(AppStore.CHANGE_EVENT);
       break;