Skip to content

Commit

Permalink
Add ngl viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Feb 11, 2018
1 parent 83467ca commit 1014b5d
Show file tree
Hide file tree
Showing 7 changed files with 393 additions and 2 deletions.
1 change: 1 addition & 0 deletions client/galaxy/scripts/mvc/visualization/chart/chart-client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default Backbone.View.extend({
this.dataset = dataset;
this.chart = new Chart({}, options);
this.chart.plugin = options.visualization_plugin;
this.chart.plugin.specs = this.chart.plugin.specs || {};
this.chart_func = options.chart_func;
this.deferred = new Deferred();
this.viewer = new Viewer(this);
Expand Down
11 changes: 9 additions & 2 deletions config/plugins/visualizations/common/templates/chart_entry_point.mako
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
<%def name="stylesheets()">
${h.css('jquery-ui/smoothness/jquery-ui')}
${h.css('base')}
<link rel="stylesheet" href="${script_attributes.get("css")}">
<%css = script_attributes.get("css") %>
%if css is not None:
<link rel="stylesheet" href="${css}">
%endif
</%def>
<%def name="javascripts()">
<script type="text/javascript">
Expand All @@ -23,13 +26,17 @@
<script type="text/javascript">
$(function() {
var config = ${h.dumps(config)};
var func = "${script_attributes.get("func")}";
if (!bundleEntries[func]) {
alert("Entry function '" + func + "' not found.");
}
var app = bundleEntries.chart({
visualization_id: ${h.dumps(visualization_id)} || undefined,
visualization_name: ${h.dumps(visualization_name)},
visualization_plugin: ${h.dumps(visualization_plugin)},
dataset_id: config.dataset_id,
chart_dict: config.chart_dict,
chart_func: bundleEntries["${script_attributes.get("func")}"]
chart_func: bundleEntries[func]
});
$('body').append(app.$el);
});
Expand Down
313 changes: 313 additions & 0 deletions config/plugins/visualizations/ngl/config/ngl.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,313 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
<visualization name="NGL Viewer">
<description>NGL Viewer is a WebGL based molecular visualization hosted at http://arose.github.io/ngl/.</description>
<data_sources>
<data_source>
<model_class>HistoryDatasetAssociation</model_class>
<test type="isinstance" test_attr="datatype" result_type="datatype">molecules.PDB</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/ngl.js" func="ngl_load"/>
<settings>
<input>
<label>Quality</label>
<name>quality</name>
<help>Select the rendering quality</help>
<type>select</type>
<display>radio</display>
<value>medium</value>
<data>
<data>
<label>High</label>
<value>high</value>
</data>
<data>
<label>Medium</label>
<value>medium</value>
</data>
<data>
<label>Low</label>
<value>low</value>
</data>
</data>
</input>
<input>
<name>mode</name>
<label>Display mode</label>
<help>Select the rendering mode</help>
<type>select</type>
<display>radio</display>
<value>cartoon</value>
<data>
<data>
<label>Axes</label>
<value>axes</value>
</data>
<data>
<label>Base</label>
<value>base</value>
</data>
<data>
<label>Backbone</label>
<value>backbone</value>
</data>
<data>
<label>Ball+Stick</label>
<value>ball+stick</value>
</data>
<data>
<label>Cartoon</label>
<value>cartoon</value>
</data>
<data>
<label>Contact</label>
<value>contact</value>
</data>
<data>
<label>Helixorient</label>
<value>helixorient</value>
</data>
<data>
<label>Hyperball</label>
<value>hyperball</value>
</data>
<data>
<label>Label</label>
<value>label</value>
</data>
<data>
<label>Licorice</label>
<value>licorice</value>
</data>
<data>
<label>Line</label>
<value>line</value>
</data>
<data>
<label>Point</label>
<value>point</value>
</data>
<data>
<label>Ribbon</label>
<value>ribbon</value>
</data>
<data>
<label>Rocket</label>
<value>rocket</value>
</data>
<data>
<label>Rope</label>
<value>rope</value>
</data>
<data>
<label>Spacefill</label>
<value>spacefill</value>
</data>
<data>
<label>Surface</label>
<value>surface</value>
</data>
<data>
<label>Trace</label>
<value>trace</value>
</data>
<data>
<label>Tube</label>
<value>tube</value>
</data>
<data>
<label>Unitcell</label>
<value>unitcell</value>
</data>
</data>
</input>
<input>
<name>radius</name>
<label>Radius</label>
<help>Select a number providing a fixed radius used for rendering the representation.</help>
<type>float</type>
<min>0.001</min>
<max>10.0</max>
<value>0.05</value>
</input>
<input>
<name>scale</name>
<label>Scale</label>
<help>Select a number that scales the value defined by the *radius* parameter.</help>
<type>float</type>
<min>0.001</min>
<max>10.0</max>
<value>0.7</value>
</input>
<input>
<name>colorscheme</name>
<label>Color Scheme</label>
<help>Select color scheme of the molecule scene.</help>
<type>select</type>
<display>radio</display>
<value>atomindex</value>
<data>
<data>
<label>Element</label>
<value>element</value>
</data>
<data>
<label>Picking</label>
<value>picking</value>
</data>
<data>
<label>Random</label>
<value>random</value>
</data>
<data>
<label>Uniform</label>
<value>uniform</value>
</data>
<data>
<label>Atomindex</label>
<value>atomindex</value>
</data>
<data>
<label>Residue Index</label>
<value>residueindex</value>
</data>
<data>
<label>Chain Index</label>
<value>chainindex</value>
</data>
<data>
<label>Chain Name</label>
<value>chainname</value>
</data>
<data>
<label>Chain Id</label>
<value>chainid</value>
</data>
<data>
<label>Polymer</label>
<value>polymer</value>
</data>
<data>
<label>Model Index</label>
<value>modelindex</value>
</data>
<data>
<label>Entity Type</label>
<value>entitytype</value>
</data>
<data>
<label>Molecule Type</label>
<value>moleculetype</value>
</data>
<data>
<label>Secondary Structure</label>
<value>sstruc</value>
</data>
<data>
<label>Bfactor</label>
<value>bfactor</value>
</data>
<data>
<label>Resname</label>
<value>resname</value>
</data>
<data>
<label>Hydrophobicity</label>
<value>hydrophobicity</value>
</data>
<data>
<label>Value</label>
<value>value</value>
</data>
<data>
<label>Volume</label>
<value>volume</value>
</data>
<data>
<label>Occupancy</label>
<value>occupancy</value>
</data>
</data>
</input>
<input>
<name>backcolor</name>
<label>Background Color</label>
<help>Select background color of the viewer.</help>
<type>select</type>
<display>radio</display>
<value>white</value>
<data>
<data>
<label>Light</label>
<value>white</value>
</data>
<data>
<label>Dark</label>
<value>black</value>
</data>
</data>
</input>
<input>
<name>spin</name>
<label>Spin</label>
<help>Spin the molecule view.</help>
<type>select</type>
<display>radio</display>
<value>false</value>
<data>
<data>
<label>On</label>
<value>true</value>
</data>
<data>
<label>Off</label>
<value>false</value>
</data>
</data>
</input>
<input>
<name>assembly</name>
<label>Assembly</label>
<help>Select a name of an assembly object.</help>
<type>select</type>
<display>radio</display>
<value>default</value>
<data>
<data>
<label>Default</label>
<value>default</value>
</data>
<data>
<label>AU</label>
<value></value>
</data>
<data>
<label>BU1</label>
<value>BU1</value>
</data>
<data>
<label>UNITCELL</label>
<value>UNITCELL</value>
</data>
<data>
<label>SUPERCELL</label>
<value>SUPERCELL</value>
</data>
</data>
</input>
<input>
<name>opacity</name>
<label>Opacity</label>
<help>Select opacity for the molecule scene.</help>
<type>float</type>
<min>0.0</min>
<max>1.0</max>
<value>1.0</value>
</input>
</settings>
</visualization>
35 changes: 35 additions & 0 deletions config/plugins/visualizations/ngl/src/ngl.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as ngl from "./viewer";
_.extend(window.bundleEntries || {}, {
ngl_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.');
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()});
}
});
30 changes: 30 additions & 0 deletions config/plugins/visualizations/ngl/src/viewer.js
View file

Large diffs are not rendered by default.

Binary file added config/plugins/visualizations/ngl/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/ngl/static/ngl.js
View file

Large diffs are not rendered by default.

0 comments on commit 1014b5d

Please sign in to comment.