View markdown source on GitHub

Galaxy Interactive Tours

Contributors

AvatarBérénice Batut AvatarBjörn Grüning

Questions

Objectives

last_modification Last modification: Jul 9, 2021

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?


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


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

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"

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

.footnote[Full reference of the properties]


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.


Want to integrate Interactive Tours in your Galaxy instance?


Want to contribute?


Developing the Tours logic


Key Points

Thank you!

This material is the result of a collaborative work. Thanks to the Galaxy Training Network and all the contributors! Galaxy Training Network This material is licensed under the Creative Commons Attribution 4.0 International License.