diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 0b04767cd5..6eebefec09 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -109,7 +109,7 @@ export default class NodesChart extends React.Component {
// highlighter functions
const setHighlighted = node => {
- const highlighted = _.includes(this.props.highlightedNodeIds, node.get('id'))
+ const highlighted = this.props.highlightedNodeIds.has(node.get('id'))
|| this.props.selectedNodeId === node.get('id');
return node.set('highlighted', highlighted);
};
@@ -164,7 +164,7 @@ export default class NodesChart extends React.Component {
const selectedNodeId = this.props.selectedNodeId;
const hasSelectedNode = selectedNodeId && this.props.nodes.has(selectedNodeId);
- const setHighlighted = edge => edge.set('highlighted', _.includes(this.props.highlightedEdgeIds,
+ const setHighlighted = edge => edge.set('highlighted', this.props.highlightedEdgeIds.has(
edge.get('id')));
const setBlurred = edge => edge.set('blurred', hasSelectedNode
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js
index 42e9aaf169..ed2f295314 100644
--- a/client/app/scripts/components/nodes.js
+++ b/client/app/scripts/components/nodes.js
@@ -25,20 +25,7 @@ export default class Nodes extends React.Component {
}
render() {
- return (
-
- );
+ return ;
}
handleResize() {
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index 55c6e5441a..0f1f493604 100644
--- a/client/app/scripts/stores/app-store.js
+++ b/client/app/scripts/stores/app-store.js
@@ -35,12 +35,13 @@ function makeNode(node) {
// Initial values
let topologyOptions = makeOrderedMap(); // topologyId -> options
-let adjacentNodes = makeSet();
let controlStatus = makeMap();
let currentTopology = null;
let currentTopologyId = 'containers';
let errorUrl = null;
let forceRelayout = false;
+let highlightedEdgeIds = makeSet();
+let highlightedNodeIds = makeSet();
let hostname = '...';
let version = '...';
let mouseOverEdgeId = null;
@@ -145,10 +146,10 @@ export class AppStore extends Store {
}
getAdjacentNodes(nodeId) {
- adjacentNodes = adjacentNodes.clear();
+ let adjacentNodes = makeSet();
if (nodes.has(nodeId)) {
- adjacentNodes = makeSet(nodes.get(nodeId).get('adjacency'));
+ adjacentNodes = makeSet(nodes.getIn([nodeId, 'adjacency']));
// fill up set with reverse edges
nodes.forEach((node, id) => {
if (node.get('adjacency') && node.get('adjacency').includes(nodeId)) {
@@ -193,33 +194,11 @@ export class AppStore extends Store {
}
getHighlightedEdgeIds() {
- if (mouseOverNodeId && nodes.has(mouseOverNodeId)) {
- // all neighbour combinations because we dont know which direction exists
- const adjacency = nodes.get(mouseOverNodeId).get('adjacency');
- if (adjacency) {
- return _.flatten(
- adjacency.map((nodeId) => [
- [nodeId, mouseOverNodeId].join(EDGE_ID_SEPARATOR),
- [mouseOverNodeId, nodeId].join(EDGE_ID_SEPARATOR)
- ]).toJS()
- );
- }
- }
- if (mouseOverEdgeId) {
- return mouseOverEdgeId;
- }
- return null;
+ return highlightedEdgeIds;
}
getHighlightedNodeIds() {
- if (mouseOverNodeId) {
- const adjacency = this.getAdjacentNodes(mouseOverNodeId);
- return _.union(adjacency.toJS(), [mouseOverNodeId]);
- }
- if (mouseOverEdgeId) {
- return mouseOverEdgeId.split(EDGE_ID_SEPARATOR);
- }
- return null;
+ return highlightedNodeIds;
}
getHostname() {
@@ -433,22 +412,52 @@ export class AppStore extends Store {
break;
}
case ActionTypes.ENTER_EDGE: {
- mouseOverEdgeId = payload.edgeId;
+ // clear old highlights
+ highlightedNodeIds = highlightedNodeIds.clear();
+ highlightedEdgeIds = highlightedEdgeIds.clear();
+
+ // highlight edge
+ highlightedEdgeIds = highlightedEdgeIds.add(payload.edgeId);
+
+ // highlight adjacent nodes
+ highlightedNodeIds = highlightedNodeIds.union(payload.edgeId.split(EDGE_ID_SEPARATOR));
+
this.__emitChange();
break;
}
case ActionTypes.ENTER_NODE: {
- mouseOverNodeId = payload.nodeId;
+ const nodeId = payload.nodeId;
+ const adjacentNodes = this.getAdjacentNodes(nodeId);
+
+ // clear old highlights
+ highlightedNodeIds = highlightedNodeIds.clear();
+ highlightedEdgeIds = highlightedEdgeIds.clear();
+
+ // highlight nodes
+ highlightedNodeIds = highlightedNodeIds.add(nodeId);
+ highlightedNodeIds = highlightedNodeIds.union(adjacentNodes);
+
+ // highlight edges
+ if (adjacentNodes.size > 0) {
+ // all neighbour combinations because we dont know which direction exists
+ highlightedEdgeIds = highlightedEdgeIds.union(adjacentNodes.flatMap((adjacentId) => [
+ [adjacentId, nodeId].join(EDGE_ID_SEPARATOR),
+ [nodeId, adjacentId].join(EDGE_ID_SEPARATOR)
+ ]));
+ }
+
this.__emitChange();
break;
}
case ActionTypes.LEAVE_EDGE: {
- mouseOverEdgeId = null;
+ highlightedEdgeIds = highlightedEdgeIds.clear();
+ highlightedNodeIds = highlightedNodeIds.clear();
this.__emitChange();
break;
}
case ActionTypes.LEAVE_NODE: {
- mouseOverNodeId = null;
+ highlightedEdgeIds = highlightedEdgeIds.clear();
+ highlightedNodeIds = highlightedNodeIds.clear();
this.__emitChange();
break;
}