Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make node/edge highlighter objects immutable in app store #1173

Merged
merged 3 commits into from
Mar 16, 2016
Merged

Make node/edge highlighter objects immutable in app store #1173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ce5a39
Make node/edge highlighter objects immutable in app store
davkal Mar 16, 2016
9fa086d
Getting both directions in edge highlighting
davkal Mar 16, 2016
f7ff70f
Own adjacency was already included
davkal Mar 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/app/scripts/charts/nodes-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down Expand Up @@ -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
Expand Down
15 changes: 1 addition & 14 deletions client/app/scripts/components/nodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,7 @@ export default class Nodes extends React.Component {
}

render() {
return (
<NodesChart
highlightedEdgeIds={this.props.highlightedEdgeIds}
highlightedNodeIds={this.props.highlightedNodeIds}
selectedNodeId={this.props.selectedNodeId}
nodes={this.props.nodes}
width={this.state.width}
height={this.state.height}
forceRelayout={this.props.forceRelayout}
topologyId={this.props.topologyId}
detailsWidth={this.props.detailsWidth}
topMargin={this.props.topMargin}
/>
);
return <NodesChart {...this.props} {...this.state} />;
}

handleResize() {
Expand Down
71 changes: 40 additions & 31 deletions client/app/scripts/stores/app-store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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;
}
Expand Down