opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10287 from dannon/viz-fixes

Browse Source 
[20.09] Plugin watchBuilding, and fixes for several older visualization builds
This commit is contained in:
Marius van den Beek
2020-09-30 13:18:53 +02:00
committed by GitHub
parent b7f6259b4c 79e5395824
commit 456f58bbee
18 changed files with 183 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/gulpfile.js
+17 -9
View File
@@ -1,7 +1,7 @@
const path = require("path");
const fs = require("fs");
const del = require("del");
const { src, dest, series, parallel } = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");
const child_process = require("child_process");
const glob = require("glob");
@@ -10,14 +10,17 @@ const glob = require("glob");
* un-built visualizations in the repository; for performance and
* simplicity just add them one at a time until we upgrade older viz's.
*/
const PLUGIN_BUILD_DIRS = [
const PLUGIN_BUILD_IDS = [
"annotate_image",
"chiraviz",
"editor",
"heatmap/heatmap_default",
"hyphyvision",
"media_player",
"mvpapp",
"ngl",
"openlayers",
"pv",
];
const paths = {
@@ -26,7 +29,7 @@ const paths = {
"../config/plugins/{visualizations,interactive_environments}/*/static/**/*",
"../config/plugins/{visualizations,interactive_environments}/*/*/static/**/*",
],
plugin_build_dirs: [`../config/plugins/visualizations/{${PLUGIN_BUILD_DIRS.join(",")}}/package.json`],
plugin_build_modules: [`../config/plugins/visualizations/{${PLUGIN_BUILD_IDS.join(",")}}/package.json`],
lib_locs: {
// This is a stepping stone towards having all this staged
// automatically. Eventually, this dictionary and staging step will
@@ -73,10 +76,10 @@ function stagePlugins() {
function buildPlugins(callback) {
/*
* Walk plugin_build_dirs glob and attempt to build modules.
* Walk plugin_build_modules glob and attempt to build modules.
* */
paths.plugin_build_dirs.map((build_dir) => {
glob(build_dir, {}, (er, files) => {
paths.plugin_build_modules.map((build_module) => {
glob(build_module, {}, (er, files) => {
files.map((file) => {
let skip_build = false;
const f = path.join(process.cwd(), file).slice(0, -12);
@@ -120,10 +123,15 @@ function cleanPlugins() {
return del(["../static/plugins/{visualizations,interactive_environments}/*"], { force: true });
}
client = parallel(fonts, stageLibs);
plugins = series(buildPlugins, cleanPlugins, stagePlugins);
const client = parallel(fonts, stageLibs);
const plugins = series(buildPlugins, cleanPlugins, stagePlugins);
function watchPlugins() {
const BUILD_PLUGIN_WATCH_GLOB = [`../config/plugins/visualizations/{${PLUGIN_BUILD_IDS.join(",")}}/**/*`];
watch(BUILD_PLUGIN_WATCH_GLOB, { queue: false }, plugins);
}
module.exports.client = client;
module.exports.plugins = plugins;
module.exports.watchPlugins = watchPlugins;
module.exports.default = parallel(client, plugins);
client/package.json
+1 -1
View File
@@ -110,7 +110,7 @@
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"eslint": "^7.7.0",
"eslint-plugin-vue": "^6.2.2",
"expose-loader": "^0.7.5",
"expose-loader": "^1.0.0",
"file-loader": "^6.0.0",
"gulp": "^4.0.2",
"ignore-loader": "^0.1.2",
client/src/bundleEntries.js
+3 -1
View File
@@ -7,8 +7,10 @@
* will handle initializations for components individually.
*/
/* jquery and _ are exposed via expose-loader while several external plugins rely on these */
import $ from "jquery";
import "bootstrap";
import _ from "expose-loader?exposes[]=_&exposes[]=underscore!underscore"; // eslint-disable-line no-unused-vars
export { getGalaxyInstance, setGalaxyInstance } from "app";
import { TracksterUIView } from "viz/trackster";
export { TracksterUI } from "viz/trackster";
client/webpack.config.js
+10 -12
View File
@@ -88,11 +88,9 @@ module.exports = (env = {}, argv = {}) => {
use: [
{
loader: "expose-loader",
options: "jQuery",
},
{
loader: "expose-loader",
options: "$",
options: {
exposes: ["jQuery", "$"],
},
},
],
},
@@ -101,11 +99,9 @@ module.exports = (env = {}, argv = {}) => {
use: [
{
loader: "expose-loader",
options: "_",
},
{
loader: "expose-loader",
options: "underscore",
options: {
exposes: ["underscore", "_"],
},
},
],
},
@@ -128,7 +124,9 @@ module.exports = (env = {}, argv = {}) => {
use: [
{
loader: "expose-loader",
options: "bundleEntries",
options: {
exposes: "bundleEntries",
},
},
],
},
@@ -137,7 +135,7 @@ module.exports = (env = {}, argv = {}) => {
use: [
{
loader: "expose-loader",
options: "config",
options: { exposes: "config" },
},
],
},
client/yarn.lock
+7 -4
View File
@@ -5655,10 +5655,13 @@ expect@^26.4.2:
jest-message-util "^26.3.0"
jest-regex-util "^26.0.0"
expose-loader@^0.7.5:
version "0.7.5"
resolved "https://registry.yarnpkg.com/expose-loader/-/expose-loader-0.7.5.tgz#e29ea2d9aeeed3254a3faa1b35f502db9f9c3f6f"
integrity sha512-iPowgKUZkTPX5PznYsmifVj9Bob0w2wTHVkt/eYNPSzyebkUgIedmskf/kcfEIWpiWjg3JRjnW+a17XypySMuw==
expose-loader@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/expose-loader/-/expose-loader-1.0.0.tgz#1676dde8fce6662584e17f8531e24d2afe8dae11"
integrity sha512-xgt47+pEQrlCyCoO09cMKWf5qiurK6qMtvjUPm8+Uso5WwkNHeD47P0Zb3R9Kvk5zUcJWLax95xaaXDJCmoNjw==
dependencies:
loader-utils "^2.0.0"
schema-utils "^2.6.6"
express@^4.17.1:
version "4.17.1"
config/plugins/visualizations/heatmap/heatmap_cluster/config/heatmap_cluster.xml
+1 -1
View File
@@ -5,7 +5,7 @@
<import>../../heatmap_default/config/heatmap_shared.xml</import>
</macros>
<description>Applies hierarchical clustering to a matrix using R. The data has to be provided in 3-column format. The result is displayed as clustered heatmap.</description>
<entry_point entry_point_type="chart" src="../../heatmap_default/static/script.js" load="heatmap_cluster"/>
<entry_point entry_point_type="chart" src="../../heatmap_default/static/dist/script.js" load="heatmap_cluster"/>
<expand macro="shared"/>
<specs>
<tag>svg</tag>
config/plugins/visualizations/heatmap/heatmap_default/config/heatmap_default.xml
+1 -1
View File
@@ -5,7 +5,7 @@
<import>heatmap_shared.xml</import>
</macros>
<description>Renders a heatmap from matrix data provided in 3-column format (x, y, observation).</description>
<entry_point entry_point_type="chart" src="script.js" load="heatmap_default"/>
<entry_point entry_point_type="chart" src="dist/script.js" load="heatmap_default"/>
<expand macro="shared"/>
<specs>
<tag>svg</tag>
config/plugins/visualizations/heatmap/heatmap_default/package.json
+5 -4
View File
@@ -8,13 +8,14 @@
"license": "AFL-3.0",
"dependencies": {
"babel-preset-env": "^1.6.1",
"backbone": "^1.3.3",
"backbone": "^1.4.0",
"bootstrap": "^3.3.7",
"d3": "3",
"jquery": "^3.1.1",
"parcel-bundler": "^1.4.1"
"jquery": "^3.5.1",
"parcel-bundler": "^1.4.1",
"underscore": "^1.11.0"
},
"scripts": {
"build": "parcel build src/script.js -d static"
"build": "parcel build src/script.js -d static/dist"
}
}
config/plugins/visualizations/heatmap/heatmap_default/src/script.js
+63 -87
View File
@@ -1,10 +1,9 @@
import _ from "underscore";
import $ from "jquery";
import * as d3 from "d3";
import Backbone from "backbone";
import Colors from "./colorsets";
/* global Backbone */
/* global _ */
/* global $ */
var Series = window.bundleEntries.chartUtilities.Series;
var Datasets = window.bundleEntries.chartUtilities.Datasets;
var Jobs = window.bundleEntries.chartUtilities.Jobs;
@@ -15,12 +14,12 @@ var CommonWrapper = Backbone.View.extend({
top: 40,
right: 70,
bottom: 70,
left: 70
left: 70,
},
style: {
"font-weight": "normal",
"font-family": "Verdana",
"font-size": 12
"font-size": 12,
},
legend: {
width: 15,
@@ -28,15 +27,15 @@ var CommonWrapper = Backbone.View.extend({
style: {
"font-weight": "normal",
"font-family": "Verdana",
"font-size": 11
"font-size": 11,
},
limit: 7
limit: 7,
},
background_color: "#FFFFFF",
debug_color: "#FFFFFF"
debug_color: "#FFFFFF",
},
initialize: function(options) {
initialize: function (options) {
var self = this;
this.chart = options.chart;
this.canvas_id = options.canvas_id;
@@ -55,26 +54,17 @@ var CommonWrapper = Backbone.View.extend({
this.yScale = d3.scale.linear().domain([0, this.categories.array.y.length]);
// color scale
this.zMin = d3.min(this.data, function(d) {
this.zMin = d3.min(this.data, function (d) {
return d.z;
});
this.zMax = d3.max(this.data, function(d) {
this.zMax = d3.max(this.data, function (d) {
return d.z;
});
this.zScale = d3.scale
.quantize()
.domain([this.zMin, this.zMax])
.range(this.color_set);
this.zScale = d3.scale.quantize().domain([this.zMin, this.zMax]).range(this.color_set);
// create axis
this.xAxis = d3.svg
.axis()
.scale(this.xScale)
.orient("bottom");
this.yAxis = d3.svg
.axis()
.scale(this.yScale)
.orient("left");
this.xAxis = d3.svg.axis().scale(this.xScale).orient("bottom");
this.yAxis = d3.svg.axis().scale(this.yScale).orient("left");
// make categories
this._makeTickFormat("x");
@@ -89,22 +79,22 @@ var CommonWrapper = Backbone.View.extend({
.style("opacity", 0);
// refresh on window resize
$(window).on("resize", function() {
$(window).on("resize", function () {
self.redraw();
});
this.redraw();
Series.addZoom({
xAxis: this.xAxis,
yAxis: this.yAxis,
redraw: function() {
redraw: function () {
self.redraw();
},
svg: d3.select("#" + this.canvas_id)
svg: d3.select("#" + this.canvas_id),
});
},
/** Redraw */
redraw: function() {
redraw: function () {
// get/reset container
var container = $("#" + this.canvas_id);
container.empty();
@@ -157,7 +147,7 @@ var CommonWrapper = Backbone.View.extend({
},
/** Build boxes */
_buildBoxes: function() {
_buildBoxes: function () {
var self = this;
var height = this.height;
var width = this.width;
@@ -172,15 +162,10 @@ var CommonWrapper = Backbone.View.extend({
}
// set background color
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", this.options.background_color);
svg.append("rect").attr("width", width).attr("height", height).attr("fill", this.options.background_color);
// clip path
svg
.append("clipPath")
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("x", 0)
@@ -192,13 +177,10 @@ var CommonWrapper = Backbone.View.extend({
var chartBody = svg.append("g").attr("clip-path", "url(#clip)");
// add boxes to chart area
var boxes = chartBody.selectAll("box-group").data(this.data, function(d, i) {
var boxes = chartBody.selectAll("box-group").data(this.data, function (d, i) {
return d.x + "\0" + d.y;
});
var gEnter = boxes
.enter()
.append("g")
.attr("class", "box-group");
var gEnter = boxes.enter().append("g").attr("class", "box-group");
gEnter.append("rect").attr("class", "heat-box");
boxes
.selectAll("rect")
@@ -212,7 +194,7 @@ var CommonWrapper = Backbone.View.extend({
// add tooltip events
boxes
.selectAll("rect")
.on("dblclick", function(d) {
.on("dblclick", function (d) {
var url = self.chart.settings.get("url_template").trim();
if (url) {
d3.event.stopPropagation();
@@ -222,7 +204,7 @@ var CommonWrapper = Backbone.View.extend({
window.open(url.replace("__LABEL__", yLabel));
}
})
.on("mouseover", function(d) {
.on("mouseover", function (d) {
var matrix = this.getScreenCTM().translate(+this.getAttribute("cx"), +this.getAttribute("cy"));
self.tooltip.style("opacity", 0.9);
self.tooltip
@@ -230,7 +212,7 @@ var CommonWrapper = Backbone.View.extend({
.style("left", window.pageXOffset + matrix.e + 15 + "px")
.style("top", window.pageYOffset + matrix.f - 30 + "px");
})
.on("mouseout", function(d) {
.on("mouseout", function (d) {
self.tooltip.style("opacity", 0);
});
@@ -242,7 +224,7 @@ var CommonWrapper = Backbone.View.extend({
},
/** Build x axis */
_buildX: function() {
_buildX: function () {
var height = this.height;
var width = this.width;
var margin = this.options.margin;
@@ -264,15 +246,14 @@ var CommonWrapper = Backbone.View.extend({
.selectAll("text")
.style(this.options.style)
.style({ "font-size": xFontSize + "px" })
.attr("transform", function(d) {
.attr("transform", function (d) {
var y = -this.getBBox().height - 15;
var x = -xFontSize + boxWidth / 2;
return "rotate(-90)translate(" + y + "," + x + ")";
});
// set background color
svg
.append("rect")
svg.append("rect")
.attr("width", width)
.attr("height", font_size + 3)
.attr("y", height + margin.bottom - font_size - 3)
@@ -285,7 +266,7 @@ var CommonWrapper = Backbone.View.extend({
.attr("class", "x label")
.style(this.options.style)
.text(this.chart.settings.get("x_axis_label"))
.attr("transform", function(d) {
.attr("transform", function (d) {
var y = height + margin.bottom - font_size / 3;
var x = (width - this.getBBox().width) / 2;
return "translate(" + x + "," + y + ")";
@@ -298,7 +279,7 @@ var CommonWrapper = Backbone.View.extend({
.style(this.options.style)
.style({ "font-size": 1.1 * font_size })
.text(this.group.key)
.attr("transform", function(d) {
.attr("transform", function (d) {
var y = -margin.top / 2;
var x = (width - this.getBBox().width) / 2;
return "translate(" + x + "," + y + ")";
@@ -306,7 +287,7 @@ var CommonWrapper = Backbone.View.extend({
},
/** Build y axis */
_buildY: function() {
_buildY: function () {
var height = this.height;
var margin = this.options.margin;
var svg = this.svg;
@@ -314,11 +295,7 @@ var CommonWrapper = Backbone.View.extend({
var boxHeight = this.boxHeight;
// draw y axis
this.gyAxis = svg
.append("g")
.attr("class", "y axis")
.style("stroke-width", 1)
.call(this.yAxis);
this.gyAxis = svg.append("g").attr("class", "y axis").style("stroke-width", 1).call(this.yAxis);
// fix text
var yFontSize = Math.min(boxHeight, font_size);
@@ -329,8 +306,7 @@ var CommonWrapper = Backbone.View.extend({
.attr("y", -boxHeight / 2);
// set background color
svg
.append("rect")
svg.append("rect")
.attr("width", font_size)
.attr("height", height)
.attr("x", -margin.left)
@@ -343,7 +319,7 @@ var CommonWrapper = Backbone.View.extend({
.attr("class", "y label")
.style(this.options.style)
.text(this.chart.settings.get("y_axis_label"))
.attr("transform", function(d) {
.attr("transform", function (d) {
var x = -margin.left + font_size - 2;
var y = -(height + this.getBBox().width) / 2;
return "rotate(-90)translate(" + y + "," + x + ")";
@@ -351,7 +327,7 @@ var CommonWrapper = Backbone.View.extend({
},
/** Build legend */
_buildLegend: function() {
_buildLegend: function () {
var self = this;
var height = this.height;
var width = this.width;
@@ -361,9 +337,9 @@ var CommonWrapper = Backbone.View.extend({
var legendSize = this.options.legend.size;
var legendWidth = this.options.legend.width;
var legendElements = this.zScale.range().length;
var legendElementHeight = Math.max(legendSize * height / legendElements, font_size);
var legendHeight = legendElements * legendElementHeight / 2;
var data = d3.range(this.zMin, this.zMax, 2 * (this.zMax - this.zMin) / legendElements).reverse();
var legendElementHeight = Math.max((legendSize * height) / legendElements, font_size);
var legendHeight = (legendElements * legendElementHeight) / 2;
var data = d3.range(this.zMin, this.zMax, (2 * (this.zMax - this.zMin)) / legendElements).reverse();
if (data.length < 2) {
return;
}
@@ -373,7 +349,7 @@ var CommonWrapper = Backbone.View.extend({
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
.attr("transform", function (d, i) {
var x = width + 10;
var y = (height - legendHeight) / 2 + i * legendElementHeight;
return "translate(" + x + "," + y + ")";
@@ -382,17 +358,17 @@ var CommonWrapper = Backbone.View.extend({
.append("rect")
.attr("width", legendWidth)
.attr("height", legendElementHeight)
.style("fill", function(z) {
.style("fill", function (z) {
return self.zScale(z);
});
legend
.append("text")
.attr("x", legendWidth + 4)
.attr("y", function() {
.attr("y", function () {
return (legendElementHeight + this.getBBox().height) / 2;
})
.style(this.options.legend.style)
.text(function(d) {
.text(function (d) {
return String(d).length > limit ? String(d).substr(0, limit - 2) + ".." : String(d);
});
this.svg
@@ -400,7 +376,7 @@ var CommonWrapper = Backbone.View.extend({
.style(this.options.legend.style)
.style({ "font-size": 9, "font-weight": "bold" })
.text("Legend")
.attr("transform", function(d, i) {
.attr("transform", function (d, i) {
var x = width + (margin.right - this.getBBox().width) / 2;
var y = (height - legendHeight) / 2 - 10;
return "translate(" + x + "," + y + ")";
@@ -408,30 +384,30 @@ var CommonWrapper = Backbone.View.extend({
},
/** Create axes formatting */
_makeTickFormat: function(id) {
_makeTickFormat: function (id) {
var settings = this.chart.settings;
var self = this;
Series.makeTickFormat({
categories: self.categories.array[id],
type: settings.get(id + "_axis_type|type"),
precision: settings.get(id + "_axis_type|precision"),
formatter: function(formatter) {
formatter: function (formatter) {
if (formatter) {
self[id + "Axis"].tickFormat(function(value) {
self[id + "Axis"].tickFormat(function (value) {
return formatter(value);
});
}
}
},
});
},
/** Handle error */
_handleError: function(err) {
_handleError: function (err) {
this.chart.state("failed", err);
},
/** Main template */
_templateTooltip: function(d) {
_templateTooltip: function (d) {
var x = this.categories.array.x[d.x];
var y = this.categories.array.y[d.y];
var z = d.z;
@@ -457,55 +433,55 @@ var CommonWrapper = Backbone.View.extend({
"</tr>" +
"</table>"
);
}
},
});
_.extend(window.bundleEntries || {}, {
heatmap_default: function(options) {
options.render = function(canvas_id, groups) {
heatmap_default: function (options) {
options.render = function (canvas_id, groups) {
new CommonWrapper({
chart: options.chart,
canvas_id: canvas_id,
groups: groups
groups: groups,
});
return true;
};
Datasets.requestPanels(options);
},
heatmap_cluster: function(options) {
heatmap_cluster: function (options) {
Jobs.request(
options.chart,
Jobs.requestCharts(options.chart, "heatmap"),
function(dataset) {
function (dataset) {
var dataset_groups = new Backbone.Collection();
options.chart.groups.each(function(group, index) {
options.chart.groups.each(function (group, index) {
dataset_groups.add({
__data_columns: {
x: { is_label: true },
y: { is_label: true },
z: { is_numeric: true }
z: { is_numeric: true },
},
x: index++,
y: index++,
z: index++,
key: group.get("key")
key: group.get("key"),
});
});
options.dataset_id = dataset.id;
options.dataset_groups = dataset_groups;
options.render = function(canvas_id, groups) {
options.render = function (canvas_id, groups) {
new CommonWrapper({
chart: options.chart,
canvas_id: canvas_id,
groups: groups
groups: groups,
});
return true;
};
Datasets.requestPanels(options);
},
function() {
function () {
options.process.reject();
}
);
}
},
});
config/plugins/visualizations/heatmap/heatmap_default/static/script.js
-8
View File
File diff suppressed because one or more lines are too long
config/plugins/visualizations/ngl/config/ngl.xml
+1 -1
View File
@@ -12,7 +12,7 @@
<params>
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
</params>
<entry_point entry_point_type="chart" src="ngl.js"/>
<entry_point entry_point_type="chart" src="dist/ngl.js"/>
<settings>
<input>
<label>Quality</label>
config/plugins/visualizations/ngl/package.json
+1 -1
View File
@@ -16,6 +16,6 @@
"ngl": "^0.10.4"
},
"scripts": {
"build": "parcel build src/ngl.js -d static"
"build": "parcel build src/ngl.js -d static/dist"
}
}
config/plugins/visualizations/ngl/src/ngl.js
+34 -32
View File
@@ -1,35 +1,37 @@
import * as ngl from "./viewer";
_.extend(window.bundleEntries || {}, {
load: function(options) {
var dataset = options.dataset,
settings = options.chart.settings,
stage = new ngl.Stage(options.targets[0], {backgroundColor: settings.get('backcolor')}),
viewer_options = {},
representation_parameters = {},
stage_parameters = {};
representation_parameters = {
radius: settings.get('radius'),
scale: settings.get('scale'),
assembly: settings.get('assembly'),
color: settings.get('colorscheme'),
opacity: settings.get('opacity')
};
stage_parameters = {ext: dataset.extension, defaultRepresentation: true};
try {
stage.loadFile(dataset.download_url, stage_parameters).then(function(component) {
component.addRepresentation(settings.get('mode'), representation_parameters);
options.chart.state('ok', 'Chart drawn.');
options.process.resolve();
} );
} catch(e) {
options.chart.state('failed', 'Could not load PDB file.');
window.bundleEntries = window.bundleEntries || {};
window.bundleEntries.load = function (options) {
var dataset = options.dataset,
settings = options.chart.settings,
stage = new ngl.Stage(options.targets[0], { backgroundColor: settings.get("backcolor") }),
viewer_options = {},
representation_parameters = {},
stage_parameters = {};
representation_parameters = {
radius: settings.get("radius"),
scale: settings.get("scale"),
assembly: settings.get("assembly"),
color: settings.get("colorscheme"),
opacity: settings.get("opacity"),
};
stage_parameters = { ext: dataset.extension, defaultRepresentation: true };
try {
stage.loadFile(dataset.download_url, stage_parameters).then(function (component) {
component.addRepresentation(settings.get("mode"), representation_parameters);
options.chart.state("ok", "Chart drawn.");
options.process.resolve();
}
stage.setQuality(settings.get('quality' ) );
if (settings.get('spin') === true || settings.get('spin') === 'true') {
stage.setSpin([0, 1, 0], 0.01);
}
// Re-renders the molecule view when window is resized
$(window).resize(function() {stage.viewer.handleResize()});
});
} catch (e) {
options.chart.state("failed", "Could not load PDB file.");
options.process.resolve();
}
});
stage.setQuality(settings.get("quality"));
if (settings.get("spin") === true || settings.get("spin") === "true") {
stage.setSpin([0, 1, 0], 0.01);
}
// Re-renders the molecule view when window is resized
window.onresize = function () {
viewer.fitParent();
};
};
config/plugins/visualizations/ngl/static/ngl.js
-5
View File
File diff suppressed because one or more lines are too long
config/plugins/visualizations/pv/config/pv.xml
+1 -1
View File
@@ -12,7 +12,7 @@
<params>
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
</params>
<entry_point entry_point_type="chart" src="pv.js"/>
<entry_point entry_point_type="chart" src="dist/pv.js"/>
<settings>
<input>
<label>Quality</label>
config/plugins/visualizations/pv/package.json
+3 -7
View File
@@ -8,14 +8,10 @@
],
"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",
"bio-pv": "^1.8.1"
"bio-pv": "^1.8.1",
"parcel-bundler": "^1.12.4"
},
"scripts": {
"build": "parcel build src/pv.js -d static"
"build": "parcel build src/pv.js -d static/dist"
}
}
config/plugins/visualizations/pv/src/pv.js
+35 -33
View File
@@ -1,35 +1,37 @@
import * as pv from "bio-pv";
_.extend(window.bundleEntries || {}, {
load: function(options) {
var settings = options.chart.settings;
var viewer = pv.Viewer(document.getElementById(options.targets[0]), {
quality: settings.get('quality'),
width: 'auto',
height: 'auto',
antialias: true,
outline: true
});
$.ajax( {
url: options.dataset.download_url,
cache: true,
success: function(response) {
var structure = pv.io.pdb(response);
var viewer_options = {};
_.each(settings.attributes, function(value, key) {
viewer_options[key.replace('viewer|', '')] = value;
});
viewer.clear();
viewer.renderAs('protein', structure, viewer_options.mode, viewer_options);
viewer.centerOn(structure);
viewer.autoZoom();
options.chart.state('ok', 'Chart drawn.');
options.process.resolve();
},
error: function() {
options.chart.state('ok', 'Failed to load pdb file.');
options.process.resolve();
window.bundleEntries = window.bundleEntries || {};
window.bundleEntries.load = function (options) {
var settings = options.chart.settings;
var viewer = pv.Viewer(document.getElementById(options.targets[0]), {
quality: settings.get("quality"),
width: "auto",
height: "auto",
antialias: true,
outline: true,
});
var xhr = new XMLHttpRequest();
xhr.open("GET", options.dataset.download_url);
xhr.onload = function () {
if (xhr.status === 200) {
var structure = pv.io.pdb(xhr.response);
var viewer_options = {};
for (const [key, value] of Object.entries(settings.attributes)) {
viewer_options[key.replace("viewer|", "")] = value;
}
});
$(window).resize(function() { viewer.fitParent() });
}
});
viewer.clear();
viewer.renderAs("protein", structure, viewer_options.mode, viewer_options);
viewer.centerOn(structure);
viewer.autoZoom();
options.chart.state("ok", "Chart drawn.");
options.process.resolve();
} else {
options.chart.state("ok", "Failed to load pdb file.");
options.process.resolve();
}
};
xhr.send();
window.onresize = function () {
viewer.fitParent();
};
};
config/plugins/visualizations/pv/static/pv.js
-5
View File
File diff suppressed because one or more lines are too long