Merge pull request #1647 from Orange-OpenSource/emphasize-edges

ui: Emphasize edges

Author: safchain

statics/js/app.js

@@ -12,7 +12,7 @@ var store = new Vuex.Store({
     history: null,
     currentNode: null,
     currentEdge: null,
-    emphasizedNodes: [],
+    emphasizedIDs: [],
     highlightedNodes: [],
     highlightInprogress: new Map(),
     notifications: [],
@@ -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;
       });
     },

statics/js/components/graph-layout.js

@@ -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");
@@ -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) {
@@ -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) {
@@ -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; });
@@ -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);
@@ -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);
@@ -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;
 
@@ -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;
 

statics/js/components/topology.js

@@ -297,6 +297,7 @@ var TopologyComponent = {
     var emphasizeWatcher = {
       onEdgeAdded: this.emphasize,
       onNodeAdded: this.emphasize,
+      onEdgeDeleted: this.emphasize
     };
     this.graph.addHandler(emphasizeWatcher);
 
@@ -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();
@@ -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;
@@ -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]);
               }
             }
 
@@ -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]);
         }