Generic plugins

Updated: PURL: gxy.io/GTN:S00054

Tip: press P to view the presenter notes | Use arrow keys to move between slides

1 / 24

Presenter notes contain extra information which might be useful if you intend to use these slides for teaching.

Press P again to switch presenter notes off

Press C to create a new window where the same presentation will be displayed. This window is linked to the main window. Changing slides on one will cause the slide to change on the other.

Useful when presenting.

Requirements

Before diving into this slide deck, we recommend you to have a look at:

Javascript knowledge

2 / 24

How can visualization plugins benefit science?

3 / 24

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

4 / 24

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

5 / 24

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

6 / 24

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.

7 / 24

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)

8 / 24

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.

9 / 24

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

10 / 24

Plugins: Charts

Charts selection interface showing a number of chart types that can be selected

Montage of several charts, bar, dot, stacked bar/line, box and whisker, and doughnut charts.

11 / 24

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

12 / 24

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

13 / 24

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/

14 / 24

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

15 / 24

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/

16 / 24

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

17 / 24

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" />

18 / 24

Plugins: Generic template

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

19 / 24

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.

20 / 24

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

21 / 24

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!

22 / 24

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

23 / 24

Thank You!

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

Author(s)	Saskia Hiltemann Youri Hoogstrate
Reviewers

Tutorial Content is licensed under Creative Commons Attribution 4.0 International License.

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Generic plugins

Requirements

question Questions

objectives Objectives

Why visualizations?

Why visualizations?

Why visualizations?

Types of visualizations in Galaxy

Which should I use?

Plugins

Plugins: Charts

Plugins: Charts

Plugins: Generic

Plugins: XML file

Plugins: Mako file

Plugins: Mako file

Plugins: Mako syntax

Plugins: Javascript and jQuery

Plugins: Generic template

Plugins: Static files

Plugins: Summary

Plugins: More tips and tricks

keypoints Key points

Thank You!

Requirements

Help