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

nodes
pull/6120/head
mokaddem 2020-05-11 15:13:38 +02:00
parent 3daa88832d
commit 3acf2bd4cf
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
5 changed files with 32 additions and 6 deletions

View File

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

View File

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

View File

@ -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;
}
}
}
}

View File

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

View File

@ -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 }],