Skip to content

Commit

Permalink
Add phylocanvas, using npm module
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Feb 11, 2018
1 parent 820d0b4 commit c4ca8ab
Show file tree
Hide file tree
Showing 6 changed files with 325 additions and 42 deletions.
84 changes: 42 additions & 42 deletions config/plugins/visualizations/drawrna/static/script.js
View file

Large diffs are not rendered by default.

182 changes: 182 additions & 0 deletions config/plugins/visualizations/phylocanvas/config/phylocanvas.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
<visualization name="Phylogenetic Tree Visualization">
<description>A performant, reusable, and extensible tree visualisation library for the web hosted at: http://biojs.io/d/phylocanvas.</description>
<data_sources>
<data_source>
<model_class>HistoryDatasetAssociation</model_class>
<test test_attr="ext" result_type="datatype">nhx</test>
<to_param param_attr="id">dataset_id</to_param>
</data_source>
</data_sources>
<params>
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
</params>
<entry_point entry_point_type="chart" src="static/script.js" func="func"/>
<settings>
<input>
<label>Tree types</label>
<name>tree_type</name>
<help>Select a tree type.</help>
<type>select</type>
<display>radio</display>
<value>rectangular</value>
<data>
<data>
<label>Circular</label>
<value>circular</value>
</data>
<data>
<label>Diagonal</label>
<value>diagonal</value>
</data>
<data>
<label>Hierarchical</label>
<value>hierarchical</value>
</data>
<data>
<label>Radial</label>
<value>radial</value>
</data>
<data>
<label>Rectangular</label>
<value>rectangular</value>
</data>
</data>
</input>
<input>
<name>edge_color</name>
<label>Select a color for the tree</label>
<type>color</type>
<value>#548DB8</value>
</input>
<input>
<name>highlighted_color</name>
<label>Select a color for the highlighted branch of tree</label>
<type>color</type>
<value>#548DB8</value>
</input>
<input>
<name>selected_color</name>
<label>Select a color for the selected branch of tree</label>
<type>color</type>
<value>#00b050</value>
</input>
<input>
<label>Collapse the selected branch</label>
<name>collapse_branch</name>
<help>Select true to collapse the selected branch.</help>
<type>select</type>
<display>radio</display>
<value>false</value>
<data>
<data>
<label>True</label>
<value>true</value>
</data>
<data>
<label>False</label>
<value>false</value>
</data>
</data>
</input>
<input>
<label>Prune the selected branch</label>
<name>prune_branch</name>
<help>Select true to prune the selected branch.</help>
<type>select</type>
<display>radio</display>
<value>false</value>
<data>
<data>
<label>True</label>
<value>true</value>
</data>
<data>
<label>False</label>
<value>false</value>
</data>
</data>
</input>
<input>
<label>Show/Hide labels</label>
<name>show_labels</name>
<help>Select false to hide labels.</help>
<type>select</type>
<display>radio</display>
<value>true</value>
<data>
<data>
<label>True</label>
<value>true</value>
</data>
<data>
<label>False</label>
<value>false</value>
</data>
</data>
</input>
<input>
<label>Align labels</label>
<name>align_labels</name>
<help>Select to align the labels of tree. Supported with rectangular, circular, and hierarchical tree types.</help>
<type>select</type>
<display>radio</display>
<value>true</value>
<data>
<data>
<label>True</label>
<value>true</value>
</data>
<data>
<label>False</label>
<value>false</value>
</data>
</data>
</input>
<input>
<label>Show bootstrap confidence values</label>
<name>show_bootstrap</name>
<help>Select true to show bootstrap confidence values.</help>
<type>select</type>
<display>radio</display>
<value>false</value>
<data>
<data>
<label>True</label>
<value>true</value>
</data>
<data>
<label>False</label>
<value>false</value>
</data>
</data>
</input>
<input>
<label>Node shapes for leaves</label>
<name>node_shape</name>
<help>Select a node shape for leaves.</help>
<type>select</type>
<display>radio</display>
<value>circle</value>
<data>
<data>
<label>Circle</label>
<value>circle</value>
</data>
<data>
<label>Square</label>
<value>square</value>
</data>
<data>
<label>Star</label>
<value>star</value>
</data>
<data>
<label>Triangle</label>
<value>triangle</value>
</data>
</data>
</input>
</settings>
</visualization>
20 changes: 20 additions & 0 deletions config/plugins/visualizations/phylocanvas/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "visualization",
"version": "0.1.0",
"keywords": [
"galaxy",
"visualization"
],
"license": "AFL-3.0",
"dependencies": {
"babel-preset-env": "^1.6.1",
"backbone": "^1.3.3",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"parcel-bundler": "^1.4.1",
"phylocanvas": "^2.8.1"
},
"scripts": {
"build": "parcel build src/script.js -d static"
}
}
76 changes: 76 additions & 0 deletions config/plugins/visualizations/phylocanvas/src/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import * as Phylocanvas from "phylocanvas";
_.extend(window.bundleEntries || {}, {
func: function(options) {
var chart = options.chart;
var dataset = options.dataset;
var settings = options.chart.settings;
$.ajax( {
url : dataset.download_url,
success : function( content ) {
try {
var tree = Phylocanvas.default.createTree( options.targets[ 0 ] ),
node_size = 20,
text_size = 20,
line_width = 2;

// Set different properties of the tree
tree.setTreeType( settings.get( 'tree_type' ) );
// 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;
// Show bootstrap confidence levels
tree.showBootstrap = settings.get( 'show_bootstrap' ) === "true" ? true : false;
tree.showInternalNodeLabels = tree.showBootstrap;
// Update font and color for internal nodel labels
tree.internalLabelStyle.colour = tree.branchColour;
tree.internalLabelStyle.font = tree.font;
tree.internalLabelStyle.textSize = tree.textSize;

// Register click event on tree
tree.on( 'click', function ( e ) {
var node = tree.getNodeAtMousePosition( e );
// Here collapse action is taking preference.
// Whenver collapse and prune both are selected true,
// collapse action will be performed
// Collapse the selected branch
if( settings.get( 'collapse_branch' ) === "true" ) {
tree.branches[ node.id ].collapsed = true;
tree.draw();
}// Prune the selected branch
else if( settings.get( 'prune_branch' ) === "true" ) {
tree.branches[ node.id ].pruned = true;
tree.draw();
}
});
// 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
$( window ).resize( function() {
tree.fitInPanel( tree.leaves ); tree.draw();
} );
} catch( err ) {
chart.state( 'failed', err );
}
},
error: function() {
chart.state( 'failed', 'Failed to access dataset.' );
options.process.resolve();
}
});
}
});
Binary file added config/plugins/visualizations/phylocanvas/static/logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions config/plugins/visualizations/phylocanvas/static/script.js
View file

Large diffs are not rendered by default.

0 comments on commit c4ca8ab

Please sign in to comment.