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; }