chg: [clusterRelations:networkGraphs] Improved UI by highlighting root

nodes

app/Controller/EventsController.php

@@ -4803,9 +4803,10 @@ class EventsController extends AppController
                 }
             }
         }
+        $rootNodeIds = $clusterIds; 
         $this->loadModel('GalaxyCluster');
         $clusters = $this->GalaxyCluster->fetchGalaxyClusters($this->Auth->user(), array('conditions' => array('GalaxyCluster.id' => $clusterIds)), $full=true);
-        $relations = $this->GalaxyCluster->GalaxyClusterRelation->generateRelationsGraph($this->Auth->user(), $clusters, $keepNotLinkedClusters=true);
+        $relations = $this->GalaxyCluster->GalaxyClusterRelation->generateRelationsGraph($this->Auth->user(), $clusters, $rootNodeIds=$rootNodeIds, $keepNotLinkedClusters=true);
         if ($this->_isRest()) {
             return $this->RestResponse->viewData($relations, $this->response->type());
         }

app/Controller/GalaxiesController.php

@@ -536,7 +536,8 @@ class GalaxiesController extends AppController
             'recursive' => -1,
             'conditions' => array('Galaxy.id' => $galaxyId)
         ));
-        $relations = $this->Galaxy->GalaxyCluster->GalaxyClusterRelation->generateRelationsGraph($this->Auth->user(), $clusters); // moved this to Lib/Tool
+        $rootNodeIds = Hash::combine($clusters, '{n}.GalaxyCluster.id', '{n}.GalaxyCluster.id');
+        $relations = $this->Galaxy->GalaxyCluster->GalaxyClusterRelation->generateRelationsGraph($this->Auth->user(), $clusters, $rootNodeIds=$rootNodeIds); // moved this to Lib/Tool
         if ($this->_isRest()) {
             return $this->RestResponse->viewData($relations, $this->response->type());
         }

app/Model/GalaxyClusterRelation.php

@@ -275,7 +275,7 @@ class GalaxyClusterRelation extends AppModel
         return $errors;
     }
 
-    function generateRelationsGraph($user, $clusters, $keepNotLinkedClusters=false)
+    function generateRelationsGraph($user, $clusters, $rootNodeIds=array(), $keepNotLinkedClusters=false)
     {
         $nodes = array();
         $links = array();
@@ -301,6 +301,9 @@ class GalaxyClusterRelation extends AppModel
                         $nodes[$referencedClusterId]['group'] = $referencedCluster['GalaxyCluster']['type'];
                         $nodes[$relation['galaxy_cluster_id']] = $cluster['GalaxyCluster'];
                         $nodes[$relation['galaxy_cluster_id']]['group'] = $cluster['GalaxyCluster']['type'];
+                        if (isset($rootNodeIds[$relation['galaxy_cluster_id']])) {
+                            $nodes[$relation['galaxy_cluster_id']]['isRoot'] = true;
+                        }
                         if (true) {
                             $links[] = array(
                                 'source' => $relation['galaxy_cluster_id'],
@@ -323,6 +326,9 @@ class GalaxyClusterRelation extends AppModel
                 if (!isset($nodes[$cluster['GalaxyCluster']['id']])) {
                     $nodes[$cluster['GalaxyCluster']['id']] = $cluster['GalaxyCluster'];
                     $nodes[$cluster['GalaxyCluster']['id']]['group'] = $cluster['GalaxyCluster']['type'];
+                    if (isset($rootNodeIds[$cluster['GalaxyCluster']['id']])) {
+                        $nodes[$cluster['GalaxyCluster']['id']]['isRoot'] = true;
+                    }
                 }
             }
         }

app/View/Elements/GalaxyClusters/relations_graph.ctp

@@ -10,6 +10,9 @@ echo $this->element('genericElements/assetLoader', array(
 ?>
 
 <script>
+var hexagonPoints = '30,15 22.5,28 7.5,28 0,15 7.5,2.0 22.5,2'
+var hexagonPointsSmaller = '21,10.5 15.75,19.6 5.25,19.6 0,10.5 5.25,1.4 15.75,1.4'
+var hexagonTranslate = -10.5;
 var graph = <?= json_encode($relations) ?>;
 var nodes, links, edgepaths;
 var width, height, margin;
@@ -192,13 +195,19 @@ function update() {
         .call(drag(force))
         .on('click', clickHandlerNode);
 
-    nodesEnter.append("circle")
+    nodesEnter.filter(function(node) { return !node.isRoot }).append("circle")
         .attr("r", 5)
         .style("fill", function(d) { return colors(d.group); })
         .style("stroke", "black")
         .style("stroke-width", "1px");
+    nodesEnter.filter(function(node) { return node.isRoot }).append('polygon')
+        .attr('points', hexagonPointsSmaller)
+        .attr("transform", 'translate(' + hexagonTranslate + ', ' + hexagonTranslate + ')')
+        .style("fill", function(d) { return colors(d.group); })
+        .style("stroke", "black")
+        .style("stroke-width", "2px");
     nodesEnter.append("text")
-        .attr("dy", "20px")
+        .attr("dy", "25px")
         .attr("dx", "")
         .attr("x", "")
         .attr("y", "")
@@ -308,6 +317,7 @@ function generateTooltip(d, type) {
         }
     } else if (type == 'hide') {
         $div.hide();
+        unselectAll();
         return;
     }
     $div.append($('<button></button>').css({'margin-right': '2px'}).addClass('close').text('×').click(function() { generateTooltip(null, 'hide') }));

app/View/Elements/GalaxyClusters/view_relations.ctp

@@ -51,6 +51,8 @@ echo $this->element('genericElements/assetLoader', array(
 </div>
 
 <script>
+    var hexagonPoints = '21,10.5 15.75,19.6 5.25,19.6 0,10.5 5.25,1.4 15.75,1.4'
+    var hexagonTranslate = -10.5;
     var treeData = <?= json_encode($tree) ?>;
     var margin = {top: 10, right: 10, bottom: 10, left: 20};
     var treeWidth, treeHeight;
@@ -342,11 +344,17 @@ echo $this->element('genericElements/assetLoader', array(
             var url = "<?= sprintf('%s/galaxy_clusters/view/', $baseurl) ?>"
             window.open(url + d.GalaxyCluster.id, '_blank');
         })
-        gEnter.append("circle")
+        gEnter.filter(function(node) {return !node.isRoot; }).append("circle")
             .attr("r", function(d) { return d.isRoot ? 10 : 5; })
             .style("fill", function(d) { return colors(d.GalaxyCluster.type); })
             .style("stroke", "#000")
             .style("stroke-width", "2px");
+        gEnter.filter(function(node) {return node.isRoot; }).append('polygon')
+            .attr('points', hexagonPoints)
+            .attr("transform", 'translate(' + hexagonTranslate + ', ' + hexagonTranslate + ')')
+            .style("fill", function(d) { return colors(d.GalaxyCluster.type); })
+            .style("stroke", "#000")
+            .style("stroke-width", "2px");
 
         drawLabel(gEnter, {
             text: [function(d) { return d.GalaxyCluster.value }, function(d) { return d.GalaxyCluster.type }],