ui: change node selection behaviour

The mouseover feels a but clumsy to select a node, also the selected node cannot be identified in the topology. This commit changes the current behaviour to: - simple click to show node details, also the selected node is clearly identified in the topology - double click to collapse group - shift+click to pin a node Change-Id: Idb7bc3068c5f19a1e05b1bb4e721450c6715ac29 Reviewed-on: http://softwarefactory-project.io/r/5297 Reviewed-by: Sylvain Afchain <[email protected]> Tested-by: Sylvain Afchain <[email protected]> Workflow: Sylvain Afchain <[email protected]> Tested-by: Jenkins CI <[email protected]>
skydive-project · Nov 8, 2016 · d61349a · d61349a
1 parent 9c70dd3
commit d61349a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 36 deletions.
diff --git a/statics/bindata.go b/statics/bindata.go
diff --git a/statics/css/skydive.css b/statics/css/skydive.css
@@ -111,6 +111,11 @@ text {
   fill: yellow;
 }
 
+.active circle {
+  stroke: white;
+  stroke-width: 3;
+}
+
 .link {
   fill: none;
 }

diff --git a/statics/js/skydive.js b/statics/js/skydive.js
@@ -37,7 +37,6 @@ var trashImg = 'statics/img/trash.png';
 var alerts = {};
 
 var CurrentNodeDetails;
-var NodeDetailsTmID;
 var FlowGrid;
 var FlowDataView;
 var FlowDataGrid;
@@ -851,15 +850,6 @@ Layout.prototype.GetNodeText = function(d) {
   return name;
 };
 
-Layout.prototype.MouseOverNode = function(d) {
-  var _this = this;
-  NodeDetailsTmID = setTimeout(function(){ _this.NodeDetails(d); }, 300);
-};
-
-Layout.prototype.MouseOutNode = function(d) {
-  clearTimeout(NodeDetailsTmID);
-};
-
 Layout.prototype.CollapseNetNS = function(node) {
   for (var i in node.Edges) {
     var edge = node.Edges[i];
@@ -924,34 +914,28 @@ Layout.prototype.Redraw = function() {
         nodeSelectedCallback(d);
         return;
       }
-      return _this.CollapseNode(d);
-    })
-    .on("mouseover", function(d) {
-      if (nodeSelectedCallback) {
-        if (!d.IsCaptureAllowed())
-          $(".topology-d3").addClass('node-invalid-selection');
-      }
 
-      d3.select(this).select("circle").transition()
-        .duration(400)
-        .attr("r", _this.CircleSize(d) * 1.2);
-      _this.MouseOverNode(d);
-    })
-    .on("mouseout", function(d) {
-      $(".topology-d3").removeClass('node-invalid-selection');
+      if (d3.event.shiftKey) {
+        if (d.fixed)
+          d.fixed = false;
+        else
+          d.fixed = true;
+        _this.Redraw();
+        return;
+      }
 
-      d3.select(this).select("circle").transition()
-        .duration(400)
-        .attr("r", _this.CircleSize(d));
-      _this.MouseOutNode(d);
+      if (CurrentNodeDetails) {
+        var old = d3.select('#node-' + CurrentNodeDetails.ID);
+        old.classed('active', false);
+        old.select('circle').attr('r', parseInt(old.select('circle').attr('r')) - 3);
+      }
+      _this.NodeDetails(d);
+      var current = d3.select(this);
+      current.classed('active', true);
+      current.select('circle').attr('r', parseInt(current.select('circle').attr('r')) + 3);
     })
     .on("dblclick", function(d) {
-      if (d.fixed)
-        d.fixed = false;
-      else
-        d.fixed = true;
-
-      _this.Redraw();
+      return _this.CollapseNode(d);
     })
     .call(this.drag);