From 2ce5a39d451e87fbe0e6864c60b71c7b08e6723d Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Wed, 16 Mar 2016 11:29:40 +0100 Subject: [PATCH 1/3] Make node/edge highlighter objects immutable in app store * refactor, no functionality changed --- client/app/scripts/charts/nodes-chart.js | 4 +- client/app/scripts/components/nodes.js | 15 +---- client/app/scripts/stores/app-store.js | 72 ++++++++++++++---------- 3 files changed, 44 insertions(+), 47 deletions(-) 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..1098eea62b 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,53 @@ 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; + + // clear old highlights + highlightedNodeIds = highlightedNodeIds.clear(); + highlightedEdgeIds = highlightedEdgeIds.clear(); + + // highlight nodes + highlightedNodeIds = highlightedNodeIds.add(nodeId); + const adjacencNodes = this.getAdjacentNodes(nodeId); + highlightedNodeIds = highlightedNodeIds.union(adjacencNodes); + + // highlight edges + const adjacency = nodes.getIn([nodeId, 'adjacency']); + if (adjacency) { + // all neighbour combinations because we dont know which direction exists + highlightedEdgeIds = highlightedEdgeIds.union(adjacency.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; } From 9fa086d4b61c294b8e2b3ad15709460b6527b42b Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Wed, 16 Mar 2016 13:09:37 +0100 Subject: [PATCH 2/3] Getting both directions in edge highlighting --- client/app/scripts/stores/app-store.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js index 1098eea62b..84138772ad 100644 --- a/client/app/scripts/stores/app-store.js +++ b/client/app/scripts/stores/app-store.js @@ -427,6 +427,7 @@ export class AppStore extends Store { } case ActionTypes.ENTER_NODE: { const nodeId = payload.nodeId; + let adjacentNodes = this.getAdjacentNodes(nodeId); // clear old highlights highlightedNodeIds = highlightedNodeIds.clear(); @@ -434,14 +435,16 @@ export class AppStore extends Store { // highlight nodes highlightedNodeIds = highlightedNodeIds.add(nodeId); - const adjacencNodes = this.getAdjacentNodes(nodeId); - highlightedNodeIds = highlightedNodeIds.union(adjacencNodes); + highlightedNodeIds = highlightedNodeIds.union(adjacentNodes); // highlight edges - const adjacency = nodes.getIn([nodeId, 'adjacency']); - if (adjacency) { + const ownAdjacency = nodes.getIn([nodeId, 'adjacency']); + if (ownAdjacency) { + adjacentNodes = adjacentNodes.union(ownAdjacency); + } + if (adjacentNodes.size > 0) { // all neighbour combinations because we dont know which direction exists - highlightedEdgeIds = highlightedEdgeIds.union(adjacency.flatMap((adjacentId) => [ + highlightedEdgeIds = highlightedEdgeIds.union(adjacentNodes.flatMap((adjacentId) => [ [adjacentId, nodeId].join(EDGE_ID_SEPARATOR), [nodeId, adjacentId].join(EDGE_ID_SEPARATOR) ])); From f7ff70f9137b973a4d51a55cc5270ae101507fb9 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Wed, 16 Mar 2016 13:15:04 +0100 Subject: [PATCH 3/3] Own adjacency was already included --- client/app/scripts/stores/app-store.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js index 84138772ad..0f1f493604 100644 --- a/client/app/scripts/stores/app-store.js +++ b/client/app/scripts/stores/app-store.js @@ -427,7 +427,7 @@ export class AppStore extends Store { } case ActionTypes.ENTER_NODE: { const nodeId = payload.nodeId; - let adjacentNodes = this.getAdjacentNodes(nodeId); + const adjacentNodes = this.getAdjacentNodes(nodeId); // clear old highlights highlightedNodeIds = highlightedNodeIds.clear(); @@ -438,10 +438,6 @@ export class AppStore extends Store { highlightedNodeIds = highlightedNodeIds.union(adjacentNodes); // highlight edges - const ownAdjacency = nodes.getIn([nodeId, 'adjacency']); - if (ownAdjacency) { - adjacentNodes = adjacentNodes.union(ownAdjacency); - } if (adjacentNodes.size > 0) { // all neighbour combinations because we dont know which direction exists highlightedEdgeIds = highlightedEdgeIds.union(adjacentNodes.flatMap((adjacentId) => [