Skip to content

Instantly share code, notes, and snippets.

@FredericBGA

FredericBGA/README

Last active November 6, 2019 16:41
Show Gist options
  • Save FredericBGA/ae89fe6018289ffdf78340627190530d to your computer and use it in GitHub Desktop.
Save FredericBGA/ae89fe6018289ffdf78340627190530d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README
# create src/phyd3.js (at least a console.log print...)
# create package.json
# create config/phyd3.xml
# test file
https://github.com/vibbits/phyd3/blob/master/submissions/91162629d258a876ee994e9233b2ad87
# clean
yarn remove phyd3
#prepare phyd3
cd /workspace/tmp
git clone https://github.com/vibbits/phyd3.git
# change phyd3.js by js/phyd3.phyloXML.js
cd phyd3
cat js/phyd3.*.js > phyd3.js
# install
yarn add file:/workspace/tmp/phyd3
# need this
yarn add d3
yarn add underscore
# parcel for build step
yarn global add parcel-bundler
# creation of static/phyd3.js
yarn run build
### WARN? /softs/bioinfo/galaxy-dev/config/plugins/visualizations/phyd3/node_modules/mime/mime.js:52:32: Cannot statically evaluate fs argument
# launch Galaxy (from git clone...)
GALAXY_SKIP_CLIENT_BUILD=1 sh run.sh
# watch client
make client-watch
# the new visualization is displayed (with its logo)
# the new visualization is launched using the barchart icon of the dataset in history
# error in console...
TypeError: jQuery(...).colorpicker is not a function
Raw
package.json
{
"name": "phyd3",
"version": "1.0.0",
"description": "PhyD3 phylogenetic tree viewer",
"keywords": [
"galaxy",
"visualization",
"phylogeny",
"tree"
],
"license": "GPL-3.0",
"dependencies": {
"finalhandler": "^0.5.1",
"node-minify": "^2.0.2",
"phyd3": "https://github.com/vibbits/phyd3.git",
"serve-static": "^1.11.2"
},
"scripts": {
"build": "parcel build src/phyd3.js -d static"
}
}
Raw
phyd3.js
import * as d3 from "d3";
import * as phyd3 from "phyd3";
import * as _ from "underscore";
_.extend(window.bundleEntries || {}, {
load: function(options) {
var opts = {
dynamicHide: true,
height: 800,
invertColors: false,
lineupNodes: true,
showDomains: true,
showDomainNames: false,
showDomainColors: true,
showGraphs: true,
showGraphLegend: true,
showSupportValues: false,
maxDecimalsSupportValues: 1,
showLengthValues: false,
maxDecimalsLengthValues: 3,
showLength: false,
showNodeNames: true,
showNodesType: "all",
showPhylogram: false,
showTaxonomy: true,
showFullTaxonomy: true,
showSequences: false,
showTaxonomyColors: true,
backgroundColor: "#f5f5f5",
foregroundColor: "#000000",
};
function loadTree() {
console.log("loadTree is called");
d3.xml(options.dataset.download_url).then(xml => {
console.log("FRED HERE data ?", xml);
d3.select("body").text(null);
console.log("After d3.select, print phy.phyd3.phyloxml", phyd3.phyloxml);
var tree = phyd3.phyloxml.parse(xml);
console.log("FRED HERE tree?", tree);
phyd3.phylogram.build("body", tree, opts);
});
};
$.ajax( {
url : options.dataset.download_url,
cache: true,
success : function( response ) {
loadTree();
options.chart.state('ok', 'Chart drawn.');
options.process.resolve();
},
error: function() {
options.chart.state('failed', 'Failed to draw phylogram.');
options.process.resolve();
}
});
}
});
Raw
phyd3.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
<visualization name="PhyD3">
<description>A phylogenetic tree viewer based on D3.js</description>
<data_sources>
<data_source>
<model_class>HistoryDatasetAssociation</model_class>
<test test_attr="ext" result_type="datatype">newick</test>
<test test_attr="ext" result_type="datatype">nhx</test>
<test test_attr="ext" result_type="datatype">phyloxml</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="phyd3.js"/>
<settings>
<input>
<label>Dynamic node hiding</label>
<name>dynamicHide</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Invert colors</label>
<name>invertColors</name>
<type>boolean</type>
<value>false</value>
</input>
<input>
<label>Select a background color</label>
<name>backgroundColor</name>
<type>color</type>
<value>#f5f5f5</value>
</input>
<input>
<label>Select a foreground color</label>
<name>foregroundColor</name>
<type>color</type>
<value>#000000</value>
</input>
<input>
<label>Show phylogram</label>
<name>showPhylogram</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Lineup nodes</label>
<name>lineupNodes</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Show branch length values</label>
<name>showLengthValues</name>
<type>boolean</type>
<value>false</value>
</input>
<input>
<label>Decimal</label>
<name>maxDecimalsLengthValues</name>
<type>integer</type>
<min>0</min>
<max>100</max>
<value>3</value>
</input>
<input>
<label>Show support values</label>
<name>showSupportValues</name>
<type>boolean</type>
<value>false</value>
</input>
<input>
<label>Decimal</label>
<name>maxDecimalsSupportValues</name>
<type>integer</type>
<min>0</min>
<max>100</max>
<value>1</value>
</input>
<input>
<label>Show node names</label>
<name>showNodeNames</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>For:</label>
<name>showNodesType</name>
<type>select</type>
<display>radio</display>
<value>all</value>
<data>
<data>
<label>All nodes</label>
<value>all</value>
</data>
<data>
<label>Only leaf nodes</label>
<value>only leaf</value>
</data>
<data>
<label>Only inner nodes</label>
<value>only inner</value>
</data>
</data>
</input>
<input>
<label>Show node labels</label>
<name>nodeLabels</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Show additional node information</label>
<name>showFullTaxonomy</name>
<type>boolean</type>
<value>false</value>
</input>
<input>
<label>Show taxonomy</label>
<name>showTaxonomy</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Node size</label>
<name>node_size</name>
<type>text</type>
<placeholder>10px</placeholder>
<value>10px</value>
</input>
<input>
<label>Show domain architecture</label>
<name>showDomains</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Show domain names</label>
<name>showDomainNames</name>
<type>boolean</type>
<value>false</value>
</input>
<input>
<label>Show domain colorization</label>
<name>showDomainColors</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Domain scale</label>
<name>domainWidth</name>
<type>integer</type>
<min>100</min>
<max>10000</max>
<value>100</value>
</input>
<input>
<label>P value</label>
<name>domainLevel</name>
<type>float</type>
<min>0</min>
<max>100000000000000000</max>
<value>1</value>
</input>
<input>
<label>Show graphs</label>
<name>showGraphs</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Show graphs legend</label>
<name>showGraphLegend</name>
<type>boolean</type>
<value>true</value>
</input>
<input>
<label>Graph scale</label>
<name>graphWidth</name>
<type>integer</type>
<min>0</min>
<max>100000</max>
<value>20</value>
</input>
</settings>
</visualization>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment