client: highlight user selected nodes (aka root selection); Fixes #341

3 files changed, 57 insertions, 17 deletions

diff --git a/res/client/css/by-view/graph-view.scss b/res/client/css/by-view/graph-view.scss
index aad43167..f7729906 100644
--- a/res/client/css/by-view/graph-view.scss
+++ b/res/client/css/by-view/graph-view.scss
@@ -148,6 +148,20 @@
   -webkit-filter: blur(10px);
 }
 
+.node.first-selected .circle {
+    stroke: $yellow;
+    stroke-opacity: 1;
+    stroke-width: 3px;
+    z-index: 1;
+}
+
+.node.root-selected .circle {
+    stroke: $cyan;
+    stroke-opacity: 1;
+    stroke-width: 2px;
+    z-index: 1;
+}
+
 .graph.link.temp_and {
   stroke-dasharray: 3,3;
 }
@@ -157,7 +171,7 @@
   stroke: $cyan;
   stroke-opacity: 0.5;
   stroke-width: 2px;
-  z-index:1;
+  z-index: 1;
 }
 
 .link.enter, .link.exit, .link.selected {
@@ -165,7 +179,7 @@
   stroke: $cyan;
   stroke-opacity: 0.5;
   stroke-width: 2px;
-  z-index:1;
+  z-index: 1;
 }
 
 #editbox input{
diff --git a/res/client/css/style.css b/res/client/css/style.css
index a6e3555e..efc0d8b5 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -49,9 +49,6 @@ a:hover {
 a:active {
   color: #919095; }
 
-button {
-  border: none; }
-
 input {
   background-color: white;
   color: #363636;
@@ -370,7 +367,7 @@ body.debug .debug-ui-right {
   border-top: 6px solid #363636; }
 
 .info.type-project {
-  border-top: 6px solid #40C200; }
+  border-top: 6px solid #40c200; }
 
 .info .info-card-attr {
   display: block;
@@ -517,8 +514,8 @@ body.debug .debug-ui-right {
   width: 100%;
   min-height: 48px;
   text-align: center;
-  background-color: #D3F2F8;
-  color: #1D6E7F;
+  background-color: #d3f2f8;
+  color: #1d6e7f;
   border-top: 1px solid #8eb6bf;
   border-bottom: 1px solid #8eb6bf; }
 
@@ -785,7 +782,7 @@ p {
   fill: #8b3ab0; }
 
 .circle.project {
-  fill: #40C200; }
+  fill: #40c200; }
 
 .circle.third-internship-proposal {
   fill: #33c2e0; }
@@ -804,6 +801,18 @@ p {
   opacity: 0.2;
   -webkit-filter: blur(10px); }
 
+.node.first-selected .circle {
+  stroke: #fad900;
+  stroke-opacity: 1;
+  stroke-width: 3px;
+  z-index: 1; }
+
+.node.root-selected .circle {
+  stroke: #33c2e0;
+  stroke-opacity: 1;
+  stroke-width: 2px;
+  z-index: 1; }
+
 .graph.link.temp_and {
   stroke-dasharray: 3,3; }
 
@@ -1090,5 +1099,3 @@ p {
 
 svg text::selection {
   background: none; }
-
-/*# sourceMappingURL=style.css.map */
diff --git a/src/client/view/selection.js b/src/client/view/selection.js
index 8f05f12d..f6082d8b 100644
--- a/src/client/view/selection.js
+++ b/src/client/view/selection.js
@@ -48,6 +48,7 @@ function get_main_graph()
 var root_nodes = [], // these are the nodes that are requested via update
     selected_nodes = [],      // these are the nodes that are highlighted, generally the neighbours of selection_request
     selected_nodes__by_id = {},
+    root_nodes__by_id = {},
     selectionChangedBus = new Bacon.Bus();
 
 function listen_on_diff_bus(diffBus)
@@ -88,14 +89,19 @@ function sortedArrayDiff(a, b, a_cmp_b)
     return ret;
 }
 
+function nodes_to_id_dict(nodes)
+{
+    return nodes.reduce(
+            function(d, v) {
+                d[v.id] = v;
+                return d;
+            }, {});
+}
+
 function updateSelectedNodesBus(new_selected_nodes)
 {
     selected_nodes = new_selected_nodes;
-    selected_nodes__by_id = selected_nodes.reduce(
-        function(d, v) {
-            d[v.id] = v;
-            return d;
-        }, {});
+    selected_nodes__by_id = nodes_to_id_dict(selected_nodes);
     selectionChangedBus.push(new_selection(selected_nodes, root_nodes));
 }
 
@@ -145,12 +151,23 @@ var node_selected = function(node) {
     return selected_nodes__by_id[node.id] !== undefined;
 }
 
+var node_root_selected = function(node) {
+    return root_nodes__by_id[node.id] !== undefined;
+}
+
+var node_first_selected = function(node) {
+    return node.id === root_nodes[0].id;
+}
+
 var link_selected = function(link) {
     return node_selected(link.__src) && node_selected(link.__dst);
 }
 
 var selected_class__node = function(node, temporary) {
-    return !temporary && selected_nodes.length > 0 ? (node_selected(node) ? "selected" : "notselected") : "";
+    return !temporary && selected_nodes.length > 0 ?
+        (node_first_selected(node) ? 'first-selected' :
+            (node_root_selected(node) ? 'root-selected' :
+                (node_selected(node) ? "selected" : "notselected"))) : "";
 }
 
 var selected_class__link = function(link, temporary) {
@@ -159,6 +176,7 @@ var selected_class__link = function(link, temporary) {
 
 var clear = function() {
     root_nodes = [];
+    root_nodes__by_id = {};
     updateSelectedNodesBus([]);
 }
 
@@ -179,6 +197,7 @@ var inner_update = function(nodes)
 {
     clear();
     root_nodes = nodes;
+    root_nodes__by_id = nodes_to_id_dict(nodes);
     connectedComponent(nodes);
 }