Galaxy Interactive Tours

Updated: PURL: gxy.io/GTN:S00049

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

1 / 14

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.

What is a Galaxy Interactive Tour?
How to create a Galaxy Interactive Tour?

2 / 14

Discover what is a Galaxy Interactive Tour
Be able to create a Galaxy Interactive Tour
Be able to add a Galaxy Interactive Tour in a Galaxy instance

3 / 14

What are Galaxy Interactive Tours?

Gif showing an interactive tour. The interface goes through uploading a dataset and several popups show up on the UI to help guide the user in a simple analysis.

An awesome way to learn how to use Galaxy or a specific tool, isn't it?

4 / 14

How does it work?

Screenshot of part of a tour, the tour is written in YAML and has a steps section with the various steps.

A single YAML file: core.galaxy_ui.yaml

5 / 14

id: galaxy_ui
name: Galaxy UI
description: A gentle introduction to the Galaxy User Interface
title_default: "Welcome to Galaxy"

6 / 14

Content of the YAML:
Steps of the Tour

# A tour is made of several steps, each of them beginning with a dash '-'
steps:
    - title: "Welcome to Galaxy"
      content: "This short tour will guide you through Galaxy's user interface.<br>
                You can navigate with your arrow keys and leave the tour at any
                time point with 'Escape' or the 'End tour' button."
      backdrop: true
    - title: "Upload your data"
      element: ".upload-button"
      content: "Galaxy supports many ways to get in your data.<br>
               Use this button to upload your data."
      placement: "right"
      postclick:
        - ".upload-button"

7 / 14

Definition of a step

Argument	Description
`title`	Header of each step-container
`content`	Text that is shown to the user
`element`	JQuery Selector of the element you want to describe / click
`placement`	Placement of the text box relative to the selected element
`preclick` or `postclick`	Elements that receive a click() event before (`preclick`) or after (`postclick`) the step is shown
`textinsert`	Text to insert if element is a text box (e.g. tool search or upload)
`backdrop`	`true/false`: Show a dark backdrop behind the popover and its element, highlighting the current step

Full reference of the properties

8 / 14

How to obtain the JQuery Selector of the element?

A gif showing the 'inspect element' tool in the browser being used to find the ID of an element.

9 / 14

Want to integrate Interactive Tours in your Galaxy instance?

Select a YAML file
- From our community collection of Interactive Tours
- Create one by yourself
Copy it to your tours directory or your Galaxy instance
- default: config/plugins/tours
- configurable via tour_config_dir in galaxy.yml
Restart Galaxy or reload the tour with the API, e.g.:
- curl GALAXY_URL/api/tours/TOUR_FILE_NAME -d key=ADMIN_API_KEY

10 / 14

Want to contribute?

Create Tours and share them with the world!
- on the community collection of Interactive Tours or
- add them to the Galaxy Training Network
Improve the Tours implementation
Improve creating of Tours
- by enhancing the Galaxy Tour Builder web extension

11 / 14

Developing the Tours logic

Tours initialisation: lib/galaxy/tours/__init__.py
JavaScript logic: client/galaxy/scripts/mvc/tours.js
Tour styles: client/galaxy/style/less/tour.less
API: lib/galaxy/webapps/galaxy/api/tours.py
- lib/galaxy/webapps/galaxy/buildapp.py
bootstrap-tour library: client/galaxy/scripts/libs/bootstrap-tour.js

12 / 14

An Interactive Tour is easy to create: just a yaml file to fill
Use the Developper Tools of find the JQuery Selector
Help yourself by using the available web plugins and record an interactive tour

13 / 14

Thank You!

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

Author(s)	Bérénice Batut Björn Grüning
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

Galaxy Interactive Tours

question Questions

objectives Objectives

What are Galaxy Interactive Tours?

How does it work?

At the top of the YAML:Metadata related to the Tour

Content of the YAML:Steps of the Tour