Generic plugins

Contributors

Authors:

Saskia Hiltemann

Youri Hoogstrate

Questions

How can visualization plugins benefit science?

Objectives

Implement a first Galaxy visualization
Understand the client side vs. server side principle

Requirements

Javascript knowledge

last_modification Last modification: Jul 26, 2021

Why visualizations?

Animated gif cycling through Anscombe's quartet and various variations that all have the same mean, SD, and correlation but look vastly different to someone's eyes.

X mean: 54.26, X SD: 16.76
Y mean: 47.83, Y SD: 26.93
Corr: -0.06

Speaker Notes Anscombes quartet, all these datasets have same mean, standard deviation and correlation, yet when visualizing them it is revealed they have vastly different structures.

Why visualizations?

Bam files - textual

Screenshot of a terminal showing a wall of text with lines from a BAM file

Why visualizations?

Bam files - visualized

Screenshot of IGV with presumably the same bam file from before showing a large gap in the alignment, now clear due to a visualisation.

Types of visualizations in Galaxy

Trackster - built-in genome browser
Display applications
- UCSC Genome Browser
- IGV
Galaxy tools
- JBrowse
- Krona
Visualization plugins
- Charts
- Generic
Interactive Environments
- Jupyter/Rstudio
- IOBIO (bam/vcf visualizations)
- Phinch (metagenomics visualizations)

Which should I use?

Flowchart. Only available on an external website? If yes use a display application. Does it need to be served (e.g. python), if yes use an interactive tool. Is it computationally intensive, then it needs to be a regular tool. Is it written in javascript? Then it shold be a generic plugin. If it passes all these tests it can be a charts plugin.

Plugins

Visualizations button on history items
Different options depending on file type

Screenshot of the history in galaxy with viz dropdown clicked. On one dataset the options are charts and scatterplots for a tabular dataset. On the other is 'visualise in trackster' for a BAM dataset

.enlarge120[

Plugins: Charts

] .pull-left[ Charts selection interface showing a number of chart types that can be selected ]

.pull-right[ Montage of several charts, bar, dot, stacked bar/line, box and whisker, and doughnut charts. ]

Plugins: Charts

Allows exporting screenshots

A screenshot button is clicked providing optinos to save as PNG, SVG, or PDF

For more information, see the charts plugin development slides and tutorial —

Plugins: Generic

Elements of visualization plugin:
- Configuration (name, description, datatype)
- Template
- Static resources (js, css, images)
Project Structure
- located in $GALAXY_ROOT/config/plugins/$PLUGIN_NAME

                myviz
                ├── config
                │   └── myviz.xml
                ├── static
                │   ├── css
                │   ├── img
                │   └── js
                └── templates
                    └── myviz.mako

Plugins: XML file

$ touch $GALAXY_ROOT/config/plugins/$PLUGIN_NAME/config/$PLUGIN_NAME.xml

Hooks visualizations into Galaxy

Screenshot of code with boxes highlighting Draw RNA.js and the datatypes that it can accept. A template drawrnajs.mako is also highlighted

Data types must match with class names in $GALAXY_ROOT/lib/galaxy/datatypes/

Plugins: Mako file

For templates of HTML files:

$ touch $GALAXY_ROOT/config/plugins/$PLUGIN_NAME/templates/$PLUGIN_NAME.mako

Link to data types and HTML template file
- Every invocation of visualization: template compiled

Screenshot of more code showing a mako template being rendered

Plugins: Mako file

Access to the history item (hda) pre template compilation:
- $hda.file_name
- $hda.metadata.dbkey
- Avoid (unnecessary) copies of whole files
Access to hda post template compilation -> via URLs
- Download data file by browser (client side)
  - Inconvenient for large files:
    - Indices and query protocols (e.g. DAS protocol)
- Resolving history uid to hash
- Correction for extended root URLs:

Screenshot of a URL bar reading https://bioinf-galaxian.erasmusmc.nl/galaxy/

Plugins: Mako syntax

Access to hda post template compilation:
- Obtain hash value used in urls hdadict[‘id’]
- Essential Python variables:

A mako template with a python codeblock section highlighting hdadict, root, app_root, file_url

Plugins: Javascript and jQuery

HTML / JS implementation make often use of jQuery
- Galaxy ships with jQuery

<script type="text/javascript" src="${root}/static/scripts/libs/jquery/jquery.js" />

Plugins: Generic template

Another code screenshot showing a generic template that can be used for viz.

Plugins: Static files

External libraries and static files go in ./static dir:

Code screenshot showing a cool_vis_plugin.js being loaded Screenshot of its location in the static directory.

Plugins: Summary

Galaxy visualization plugins:
- Datatype-specific
- Written in HTML5 / JS
- Require minor python / Galaxy ecosystem knowledge
- Have access to the whole Galaxy system
  - pre-compilation: python
  - post-compilation: JS / API
- Can be installed without additional configuration
- Can not be connected to workflows
- Can not (out of the box) save and share

Plugins: More tips and tricks

Galaxy has UI guidelines with corresponding CSS (https://wiki.galaxyproject.org/VisualizationsRegistry/Cookbook)
Look at existing plugins:
- Galaxy mainline
- https://github.com/bgruening/galaxytools/tree/master/visualisations
API is now very extensive, everything is accessible with jQuery!

Key Points

Visualizations require a different way of thinking: server and client side; downloading files rather than system level access
Interactivity is what makes visualizations different from static tools
Requires understanding of both the Galaxy ecosystem as well as HTML5/JS
Performance is more important than for static Galaxy tools

Thank you!

This material is the result of a collaborative work. Thanks to the Galaxy Training Network and all the contributors!

This material is licensed under the Creative Commons Attribution 4.0 International License.