Skip to content

Commit

Permalink
Merge pull request #1647 from Orange-OpenSource/emphasize-edges
Browse files Browse the repository at this point in the history 
ui: Emphasize edges
  • Loading branch information
@safchain
safchain authored Feb 8, 2019
2 parents 77598ca + a71bb19 commit d8e8b8a
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 22 deletions.
6 changes: 3 additions & 3 deletions statics/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ var store = new Vuex.Store({
history: null,
currentNode: null,
currentEdge: null,
emphasizedNodes: [],
emphasizedIDs: [],
highlightedNodes: [],
highlightInprogress: new Map(),
notifications: [],
Expand Down Expand Up @@ -96,11 +96,11 @@ var store = new Vuex.Store({
},

emphasize: function(state, id) {
if (state.emphasizedNodes.indexOf(id) < 0) state.emphasizedNodes.push(id);
if (state.emphasizedIDs.indexOf(id) < 0) state.emphasizedIDs.push(id);
},

deemphasize: function(state, id) {
state.emphasizedNodes = state.emphasizedNodes.filter(function(_id) {
state.emphasizedIDs = state.emphasizedIDs.filter(function(_id) {
return id !== _id;
});
},
Expand Down
56 changes: 46 additions & 10 deletions statics/js/components/graph-layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ var TopologyGraphLayout = function(vm, selector) {
let id = "arrowhead-"+label;
defsMarker(id, marker_refX, marker_refY, marker_black, marker_arrow);
}

networkpolicyMarker("ingress", "deny", "begin");
networkpolicyMarker("ingress", "deny", "end");
networkpolicyMarker("ingress", "allow", "begin");
Expand Down Expand Up @@ -812,7 +812,7 @@ TopologyGraphLayout.prototype = {
}
}

if (node.metadata.Capture && node.metadata.Capture.State === "active" &&
if (node.metadata.Capture && node.metadata.Capture.State === "active" &&
(!node._metadata.Capture || node._metadata.Capture.State !== "active")) {
this.captureStarted(node);
} else if (!node.metadata.Capture && node._metadata.Capture) {
Expand Down Expand Up @@ -1518,19 +1518,15 @@ TopologyGraphLayout.prototype = {
.classed("link-label-alert", function(d) { return d.alert; })
.text(function(d) { return d.text; });

this.linkLabel.each(function(d) {
enter.each(function(d) {
self.g.select("#link-" + d.link.id)
.classed("link-label-active", d.active)
.classed("link-label-warning", d.warning)
.classed("link-label-alert", d.alert)
.style("stroke-dasharray", self.styleStrokeDasharray(d))
.style("stroke-dashoffset", self.styleStrokeDashoffset(d))
.style("animation", self.styleAnimation(d))
.style("stroke", self.styleStroke(d));
});

// force a tick
this.tick();
},

delLinkLabel: function(link) {
Expand Down Expand Up @@ -1656,6 +1652,9 @@ TopologyGraphLayout.prototype = {
.attr("class", this.linkWrapClass)
.attr("marker-end", function(d) { return self.arrowhead(d.link); });

linkWrapEnter.filter(function(d) { return d._emphasized; })
.each(this.emphasizeEdge.bind(this));

this.linkWrap = linkWrapEnter.merge(this.linkWrap);

this.group = this.group.data(this.groups, function(d) { return d.id; });
Expand All @@ -1674,7 +1673,7 @@ TopologyGraphLayout.prototype = {
},

highlightLink: function(d) {
if(d.collapse) return;
if(d.collapse || d._emphasized) return;
var t = d3.transition()
.duration(300)
.ease(d3.easeLinear);
Expand All @@ -1683,7 +1682,7 @@ TopologyGraphLayout.prototype = {
},

unhighlightLink: function(d) {
if(d.collapse) return;
if(d.collapse || d._emphasized) return;
var t = d3.transition()
.duration(300)
.ease(d3.easeLinear);
Expand Down Expand Up @@ -1724,6 +1723,8 @@ TopologyGraphLayout.prototype = {
emphasizeNodeID: function(id) {
var self = this;

if (!(id in this.nodes) && !(id in this._nodes)) return;

if (id in this.nodes) this.nodes[id]._emphasized = true;
if (id in this._nodes) this._nodes[id]._emphasized = true;

Expand All @@ -1741,17 +1742,52 @@ TopologyGraphLayout.prototype = {
.attr("r", function(d) { return self.nodeSize(d) + 8; });
},

deemphasizeNodeID: function(id) {
emphasizeEdgeID: function(id) {
var self = this;

if (!(id in this.links) && !(id in this._links)) return;

if (id in this.links) this.links[id]._emphasized = true;
if (id in this._links) this._links[id]._emphasized = true;

var t = d3.transition()
.duration(300)
.ease(d3.easeLinear);

this.g.select("#link-wrap-" + id).transition(t).style("stroke", "rgba(25, 251, 104, 0.50)");
this.g.select("#link-" + id).transition(t).style("stroke-width", 2);
},

emphasizeID: function(id) {
this.emphasizeNodeID(id);
this.emphasizeEdgeID(id);
},

deemphasizeID: function(id) {
if (id in this.nodes) this.nodes[id]._emphasized = false;
if (id in this._nodes) this._nodes[id]._emphasized = false;

if (id in this.links) this.links[id]._emphasized = false;
if (id in this._links) this._links[id]._emphasized = false;

this.g.select("#node-emphasize-" + id).remove();

var t = d3.transition()
.duration(300)
.ease(d3.easeLinear);

this.g.select("#link-wrap-" + id).transition(t).style("stroke", null);
this.g.select("#link-" + id).transition(t).style("stroke-width", null);
},

emphasizeNode: function(d) {
this.emphasizeNodeID(d.id);
},

emphasizeEdge: function(d) {
this.emphasizeEdgeID(d.id);
},

nodeClass: function(d) {
var clazz = "node " + d.metadata.Type;

Expand Down
32 changes: 23 additions & 9 deletions statics/js/components/topology.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ var TopologyComponent = {
var emphasizeWatcher = {
onEdgeAdded: this.emphasize,
onNodeAdded: this.emphasize,
onEdgeDeleted: this.emphasize
};
this.graph.addHandler(emphasizeWatcher);

Expand Down Expand Up @@ -325,9 +326,9 @@ var TopologyComponent = {
else if (mutation.type === "unhighlight")
self.layout.unhighlightNodeID(mutation.payload);
else if (mutation.type === "emphasize")
self.layout.emphasizeNodeID(mutation.payload);
self.layout.emphasizeID(mutation.payload);
else if (mutation.type === "deemphasize")
self.layout.deemphasizeNodeID(mutation.payload);
self.layout.deemphasizeID(mutation.payload);
});

this.setGremlinFavoritesFromConfig();
Expand Down Expand Up @@ -439,7 +440,7 @@ var TopologyComponent = {
if (!this.currentNodeMetadata || !this.currentNode.metadata.K8s || !this.currentNode.metadata.K8s.Extra) return null;
return this.currentNode.metadata.K8s.Extra;
},

currentNodeFeatures: function() {
if (!this.currentNodeMetadata || !this.currentNode.metadata.Features) return null;
return this.currentNode.metadata.Features;
Expand Down Expand Up @@ -779,28 +780,41 @@ var TopologyComponent = {
this.isTopologyOptionsVisible = false;
},

emphasizeNodes: function(gremlinExpr) {
emphasizeSubgraph: function(gremlinExpr) {
var self = this;
var i;

this.$topologyQuery(gremlinExpr)
.then(function(data) {
data.forEach(function(sg) {
// nodes
for (i in sg.Nodes) {
self.$store.commit('emphasize', sg.Nodes[i].ID);
}

// edges
for (i in sg.Edges) {
self.$store.commit('emphasize', sg.Edges[i].ID);
}

var toDel = [];
for (i in self.$store.state.emphasizedNodes) {

for (i in self.$store.state.emphasizedIDs) {
var found = false;
for (var j in sg.Nodes) {
if (self.$store.state.emphasizedNodes[i] === sg.Nodes[j].ID) {
if (self.$store.state.emphasizedIDs[i] === sg.Nodes[j].ID) {
found = true;
break;
}
}
for (var j in sg.Edges) {
if (self.$store.state.emphasizedIDs[i] === sg.Edges[j].ID) {
found = true;
break;
}
}
if (!found) {
toDel.push(self.$store.state.emphasizedNodes[i]);
toDel.push(self.$store.state.emphasizedIDs[i]);
}
}

Expand All @@ -819,9 +833,9 @@ var TopologyComponent = {
}

var newGremlinExpr = expr + ".SubGraph()";
this.emphasizeNodes(newGremlinExpr);
this.emphasizeSubgraph(newGremlinExpr);
} else {
var ids = this.$store.state.emphasizedNodes.slice();
var ids = this.$store.state.emphasizedIDs.slice();
for (var i in ids) {
this.$store.commit('deemphasize', ids[i]);
}
Expand Down

0 comments on commit d8e8b8a

Please sign in to comment.