Last year, William wrote a Proof of Concept to help scientists to write interactive tours for the Galaxy framework. We revamped this work and wrote a web extension for the Chrome, Opera and Firefox web browsers.

The Galaxy Tour Builder web extension

TL;DR: the Galaxy Tour Builder web extension helps you create great interactive tours for the Galaxy framework. It is open source and freely available on Opera add-ons, Chrome Web Store, and on Mozilla Add-ons.

Galaxy is an open source and community-driven framework. As indicated on the main website, it is an open, web-based platform for accessible, reproducible, and transparent computational bio-medical research. For instance, this framework allows to create workflows for computing huge datasets, to run them on clusters or grids, and to collect results.

Why is it useful? Next generation sequencing, for example, has revolutionized genomic research. It became relatively cheap and fast to sequence genomes, which led to massive datasets that must be analyzed. The job of most bioinformaticians is to deal with these data and to extract knowledge from them in collaboration with biologists. Yet, there is a lack of bioinformaticians and biologists still need such information. The Galaxy project aims at making available powerful yet complex tools in a very simple manner, allowing biologists to perform analyses themselves.

Example of the "History Introduction" interactive tour.

Galaxy Interactive Tours are Bootstrap Tour-based online tutorials that guide users through a set of steps to achieve some pre-defined goals. That is a killer-feature to onboard new users and to teach them how to use Galaxy. Talking about teaching, there is an international initiative called the Galaxy Training Network that gathers, develops and maintains resources for teaching/training with Galaxy. William was invited at one of their hackathons last year in Freiburg and prototyped a tool to ease the creation of interactive tours. Last month, we decided to develop an open source web browser extension for the Galaxy community. The idea of a web extension came from Dannon Baker.

The Galaxy Tour Builder

The extension adds a button in Chrome to enable/disable the editor, which is the panel displayed at the bottom of the browser, on top of Galaxy.

The Galaxy Tour Builder web extension is a tool that eases the process of writing interactive tours for the Galaxy framework. Users write tours in YAML, describing each step with a title, some explanation (content) and, sometimes, actions such as pasting text into an input field or clicking a link or button. The extension automates 90% of this process by allowing users to record a tour by clicking any parts of the Galaxy UI, figuring out which HTML element it was and generating the YAML content for the step. Depending on where you click on the UI, it automatically selects the appropriate position for the popup, and adds a post-click trigger whenever you click a link or button.

Your job as a user and interactive tour writer is to fill the contents and make sure your tour is educational. The extension takes care of the rest. In order to know if your tour works well, you can “play” it, i.e. run the tour like if it would have been part of your Galaxy instance, except that you do not need admin rights, it is all in your browser:

The extension auto-formats the YAML content so that it is 100%-compliant, no more time wasted indenting the YAML or debugging it. In case of an error, you will get a message in red below the editor:

For further information, we recorded a demo video at the beginning of the project. The extension has slightly evolved though and we recommend you to try it by yourself!

The Making-of

We decided to write the extension from scratch in order to learn about web extensions. While it was not specified, we also decided to build an extension for different browsers, not only Chrome. That is why we chose this extension-boilerplate from EmailThis. We especially loved the live-reload feature and the ready-to-start bundle.

The JavaScript code has been written in ES6/ES2015, transpiled with Babel and type-checked with Flow. In addition, we used Jest to write and run the tests, and Prettier to auto-format the code. That is TailorDev’s default way of writing JavaScript applications for a few months now.

Having a working extension took a few hours. It was possible to create a tour in YAML, which was the main purpose of this tool. Bootstrap Tour takes element paths à la jQuery selectors to decide where to draw each popup of a step. We wrote a tiny library to get the shortest unique and valid path of any HTML element to ease readability of the generated YAML content. Next, we tried to use the extension in real life and asked other people to do so.

Ha ha! It turned out that it was working but definitely not the best user experience ever. Sometimes the Galaxy UI refreshes the page, sometimes not. Sometimes HTML IDs are not valid, sometimes you click an element but the event is not forwarded (preventDefault() somewhere I guess), and so on. We worked with Bérénice Batut to fix tons of glitches and make things a little more usable.

In parallel, we added other features such as being able to toggle/resize the editor, and also being able to replay any tour based on the YAML content. We have done that because we did not have a Galaxy instance that we could easily configure. We read parts of the Galaxy source code to mimic the Galaxy behaviors used to run a tour, and did some black magic to serialize JavaScript functions in order to inject them into the Galaxy UI. The combination of the record and replay features is great for the user experience :heart:

We started to version and ship the extension early to get feedback. The boilerplate we have used already provided a script to build the different archives for the three different browsers. We simply hooked into the npm script feature to perform the releases (version update + tag). Thanks to this fabulous CLI wrapper around the Web Store Upload module, we are even able to automatically publish releases to the Chrome store :sunglasses: (We still have to perform this action manually on Opera and Mozilla stores…)

We did some more usability testing with other people and discovered that they were constantly copying and pasting the YAML content into another editor. We added an “Export” feature to download YAML files, and also improved the persistence of the content into the extension editor. Special thanks to Ekaterina Polkh! Last but not the least, writing unit tests was useful to fix potential bugs and becoming more confident with the codebase.

What’s next?

You will find the source code of this extension on GitHub and an entry on Zenodo. The extension has been successfully published on Opera and Chrome stores, but it is still under review for Firefox :confused: (Edit: it has since been accepted! :tada:) The Galaxy Tour Builder has already been successfully used but we need you, Galaxy friends, to report errors or suggest new features.

This extension is slightly opinionated, but we tried not to take too many decisions. Yet, we know that by using the tool, you will likely need some usability improvements and we will be happy to work with you on that! There are still opportunities for further enhancements :wink:

We, TailorDev, were happy to provide such a tool to the Galaxy community. It did not take a lot of time (~2.5 days) to build, even though we never created a web extension before. We learnt a few things and dove into the Galaxy project, a super great experience!