Migrate phylocanvas to script tag

This commit is contained in:
guerler
2024-11-24 11:11:44 +03:00
parent 1d99e6ddff
commit ad667fb284
5 changed files with 37 additions and 145 deletions
+1 -2
View File
@@ -30,13 +30,12 @@ const STATIC_PLUGIN_BUILD_IDS = [
"nvd3/nvd3_bar",
"openseadragon",
"PCA_3Dplot",
"phylocanvas",
"pv",
"scatterplot",
"tiffviewer",
"ts_visjs",
];
const INSTALL_PLUGIN_BUILD_IDS = ["cytoscape", "ngl", "msa", "openlayers", "venn", "vizarr"]; // todo: derive from XML
const INSTALL_PLUGIN_BUILD_IDS = ["cytoscape", "ngl", "msa", "openlayers", "phylocanvas", "venn", "vizarr"]; // todo: derive from XML
const DIST_PLUGIN_BUILD_IDS = ["new_user"];
const PLUGIN_BUILD_IDS = Array.prototype.concat(DIST_PLUGIN_BUILD_IDS, STATIC_PLUGIN_BUILD_IDS);
@@ -13,7 +13,10 @@
<params>
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
</params>
<entry_point entry_point_type="chart" src="script.js"/>
<requirements>
<requirement type="npm" version="0.0.2" package="@galaxyproject/phylocanvas"/>
</requirements>
<entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
<settings>
<input>
<label>Tree types</label>
@@ -45,78 +48,6 @@
</data>
</data>
</input>
<input>
<name>edge_color</name>
<label>Select a color for the tree</label>
<type>color</type>
<value>#222222</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>node_color</name>
<label>Select a color for the nodes of the tree</label>
<type>color</type>
<value>#333333</value>
</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>
@@ -143,5 +74,37 @@
</data>
</data>
</input>
<input>
<name>edge_color</name>
<label>Select a color for the tree</label>
<type>color</type>
<value>#222222</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>node_color</name>
<label>Select a color for the nodes of the tree</label>
<type>color</type>
<value>#333333</value>
</input>
<input>
<label>Show labels</label>
<name>show_labels</name>
<help>Select false to hide labels.</help>
<type>boolean</type>
<value>true</value>
</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>boolean</type>
<value>false</value>
</input>
</settings>
</visualization>
@@ -1,22 +0,0 @@
{
"name": "visualization",
"version": "0.1.0",
"keywords": [
"galaxy",
"visualization"
],
"license": "AFL-3.0",
"dependencies": {
"@phylocanvas/phylocanvas.gl": "^1.48.0",
"babel-preset-env": "^1.6.1",
"deck.gl": "^8.8.23"
},
"scripts": {
"build": "parcel build src/script.js --dist-dir static"
},
"devDependencies": {
"buffer": "^6.0.3",
"parcel": "^2.12.0",
"process": "^0.11.10"
}
}
@@ -1,48 +0,0 @@
import * as phylocanvas from "@phylocanvas/phylocanvas.gl";
/* This will be part of the charts/viz standard lib in 23.1 */
const slashCleanup = /(\/)+/g;
function prefixedDownloadUrl(root, path) {
return `${root}/${path}`.replace(slashCleanup, "/");
}
window.bundleEntries = window.bundleEntries || {};
window.bundleEntries.load = function (options) {
const chart = options.chart;
const dataset = options.dataset;
const settings = options.chart.settings;
fetch(prefixedDownloadUrl(options.root, dataset.download_url)).then((response) => {
if (response.ok) {
response.text().then((content) => {
const container = document.getElementById(options.target);
const tree = new phylocanvas.PhylocanvasGL(
container,
{
source: content,
showLabels: settings.get("show_labels") === "true" ? true : false,
showLeafLabels: settings.get("show_labels") === "true" ? true : false,
interactive: true,
nodeShape: settings.get("node_shape"),
type: settings.get("tree_type"),
alignLabels: settings.get("align_labels") === "true" ? true : false,
strokeColour: settings.get("edge_color"),
highlightColour: settings.get("highlighted_color"),
fillColour: settings.get("node_color"),
showInternalNodeLabels: settings.get("show_bootstrap") === "true" ? true : false,
},
[phylocanvas.plugins.scalebar]
);
tree.resize(container.parentElement.clientWidth, container.parentElement.clientHeight);
chart.state("ok", "Done.");
options.process.resolve();
// resize tree on window resize
window.addEventListener("resize", () => {
tree.resize(container.parentElement.clientWidth, container.parentElement.clientHeight);
});
});
} else {
chart.state("failed", "Failed to access dataset.");
options.process.resolve();
}
});
};
Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB