mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Adding shapes for leaves of phylogenetic tree
This commit is contained in:
anuprulez
@@ -59,19 +59,22 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
|
||||
node_size = 20,
|
||||
text_size = 20,
|
||||
line_width = 2;
|
||||
|
||||
// Set different properties of the tree
|
||||
tree.setTreeType( settings.get( 'tree_type' ) );
|
||||
tree.branchColour = settings.get( 'edge_color' );
|
||||
// Set properties related to labels
|
||||
tree.showLabels = settings.get( 'show_labels' ) === "true" ? true : false;
|
||||
tree.alignLabels = settings.get( 'align_labels' ) === "true" ? true : false;
|
||||
// Set properties related to colors
|
||||
tree.branchColour = settings.get( 'edge_color' );
|
||||
tree.highlightColour = settings.get( 'highlighted_color' );
|
||||
tree.selectedColour = settings.get( 'selected_color' );
|
||||
// Set properties related to size
|
||||
tree.setNodeSize( node_size );
|
||||
tree.setTextSize( text_size );
|
||||
tree.lineWidth = line_width;
|
||||
|
||||
// Register click event on tree
|
||||
tree.on('click', function (e) {
|
||||
tree.on( 'click', function ( e ) {
|
||||
var node = tree.getNodeAtMousePosition( e );
|
||||
// Here collapse action is taking preference.
|
||||
// Whenver collapse and prune both are selected true,
|
||||
@@ -88,6 +91,11 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
|
||||
});
|
||||
// Draw the phylogenetic tree
|
||||
tree.load( content );
|
||||
// Set node shape
|
||||
for(var j = 0, length = tree.leaves.length; j < length; j++) {
|
||||
tree.leaves[ j ].nodeShape = settings.get( 'node_shape' );
|
||||
}
|
||||
tree.draw();
|
||||
chart.state( 'ok', 'Done.' );
|
||||
options.process.resolve();
|
||||
// Adjust the size of tree on window resize
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -718,11 +718,11 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function() {
|
||||
return {
|
||||
title : 'Phylogenetic tree visualization',
|
||||
title : 'Phylogenetic Tree Visualization',
|
||||
library : 'BioJS',
|
||||
datatypes : [ 'txt', 'nwk' ],
|
||||
keywords : 'biojs phylogenetic tree',
|
||||
description : 'A performant, reusable, and extensible tree visualisation library for the web at: http://biojs.io/d/phylocanvas',
|
||||
description : 'A performant, reusable, and extensible tree visualisation library for the web hosted at: http://biojs.io/d/phylocanvas',
|
||||
settings : {
|
||||
tree_type : {
|
||||
label : 'Tree types',
|
||||
@@ -744,7 +744,7 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
|
||||
highlighted_color: {
|
||||
label : 'Select a color for the highlighted branch of tree',
|
||||
type : 'color',
|
||||
value : '#ff0000'
|
||||
value : '#548DB8'
|
||||
},
|
||||
selected_color: {
|
||||
label : 'Select a color for the selected branch of tree',
|
||||
@@ -787,6 +787,17 @@ define(function() { return /******/ (function(modules) { // webpackBootstrap
|
||||
data : [ { label : 'True', value : 'true' },
|
||||
{ label : 'False', value : 'false' } ]
|
||||
},
|
||||
node_shape : {
|
||||
label : 'Node shapes for leaves',
|
||||
help : 'Select a node shape for leaves.',
|
||||
type : 'select',
|
||||
display : 'radio',
|
||||
value : 'circle',
|
||||
data : [ { label : 'Circle', value : 'circle' },
|
||||
{ label : 'Square', value: 'square' },
|
||||
{ label : 'Star', value : 'star' },
|
||||
{ label : 'Triangle', value : 'triangle' } ]
|
||||
}
|
||||
}
|
||||
}
|
||||
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
File diff suppressed because one or more lines are too long
+14
-3
@@ -1,10 +1,10 @@
|
||||
define( [], function() {
|
||||
return {
|
||||
title : 'Phylogenetic tree visualization',
|
||||
title : 'Phylogenetic Tree Visualization',
|
||||
library : 'BioJS',
|
||||
datatypes : [ 'txt', 'nwk' ],
|
||||
keywords : 'biojs phylogenetic tree',
|
||||
description : 'A performant, reusable, and extensible tree visualisation library for the web at: http://biojs.io/d/phylocanvas',
|
||||
description : 'A performant, reusable, and extensible tree visualisation library for the web hosted at: http://biojs.io/d/phylocanvas',
|
||||
settings : {
|
||||
tree_type : {
|
||||
label : 'Tree types',
|
||||
@@ -26,7 +26,7 @@ define( [], function() {
|
||||
highlighted_color: {
|
||||
label : 'Select a color for the highlighted branch of tree',
|
||||
type : 'color',
|
||||
value : '#ff0000'
|
||||
value : '#548DB8'
|
||||
},
|
||||
selected_color: {
|
||||
label : 'Select a color for the selected branch of tree',
|
||||
@@ -69,6 +69,17 @@ define( [], function() {
|
||||
data : [ { label : 'True', value : 'true' },
|
||||
{ label : 'False', value : 'false' } ]
|
||||
},
|
||||
node_shape : {
|
||||
label : 'Node shapes for leaves',
|
||||
help : 'Select a node shape for leaves.',
|
||||
type : 'select',
|
||||
display : 'radio',
|
||||
value : 'circle',
|
||||
data : [ { label : 'Circle', value : 'circle' },
|
||||
{ label : 'Square', value: 'square' },
|
||||
{ label : 'Star', value : 'star' },
|
||||
{ label : 'Triangle', value : 'triangle' } ]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+11
-3
@@ -13,19 +13,22 @@ define( [ 'utilities/utils', 'plugins/biojs/phylocanvas/phylocanvas' ], function
|
||||
node_size = 20,
|
||||
text_size = 20,
|
||||
line_width = 2;
|
||||
|
||||
// Set different properties of the tree
|
||||
tree.setTreeType( settings.get( 'tree_type' ) );
|
||||
tree.branchColour = settings.get( 'edge_color' );
|
||||
// Set properties related to labels
|
||||
tree.showLabels = settings.get( 'show_labels' ) === "true" ? true : false;
|
||||
tree.alignLabels = settings.get( 'align_labels' ) === "true" ? true : false;
|
||||
// Set properties related to colors
|
||||
tree.branchColour = settings.get( 'edge_color' );
|
||||
tree.highlightColour = settings.get( 'highlighted_color' );
|
||||
tree.selectedColour = settings.get( 'selected_color' );
|
||||
// Set properties related to size
|
||||
tree.setNodeSize( node_size );
|
||||
tree.setTextSize( text_size );
|
||||
tree.lineWidth = line_width;
|
||||
|
||||
// Register click event on tree
|
||||
tree.on('click', function (e) {
|
||||
tree.on( 'click', function ( e ) {
|
||||
var node = tree.getNodeAtMousePosition( e );
|
||||
// Here collapse action is taking preference.
|
||||
// Whenver collapse and prune both are selected true,
|
||||
@@ -42,6 +45,11 @@ define( [ 'utilities/utils', 'plugins/biojs/phylocanvas/phylocanvas' ], function
|
||||
});
|
||||
// Draw the phylogenetic tree
|
||||
tree.load( content );
|
||||
// Set node shape
|
||||
for(var j = 0, length = tree.leaves.length; j < length; j++) {
|
||||
tree.leaves[ j ].nodeShape = settings.get( 'node_shape' );
|
||||
}
|
||||
tree.draw();
|
||||
chart.state( 'ok', 'Done.' );
|
||||
options.process.resolve();
|
||||
// Adjust the size of tree on window resize
|
||||
|
||||
Reference in New Issue
Block a user