WebLogo in the browser

TL;DR

You can run Python-based WebLogo natively in the browser with Pyodide and WebAssembly. Check out the demo below and create pretty sequence logo diagrams from your sequence alignments.

Introduction

Sequence logos are very popular in bioinformatics, where they are used to visualize conserved patterns within DNA, RNA, and protein sequences. They are created from multiple sequence alignments and graphically represent the consensus sequence for the alignments.

Every bioinformatician has probably tried to implement a sequence logo generator at least once in their career. You may have picked Python, R, JavaScript, or any other programming language to do this, but soon realized that it's not as easy as it seems. Think calculating information content, dealing with glyphs and colors, and finally laying out the resulting diagram with the right proportions and dimensions. Besides, any new implementation would have to be thoroughly tested and validated against different datasets to ensure that its output is correct and reliable.

When working with real data or preparing a publication, you eventually turn to WebLogo to create your sequence logos.

WebLogo, the king of sequence logo generators

An established tool for creating sequence logos, WebLogo was first written in Perl and later rewritten in Python. It's a great tool, and like many bioinformaticians, I've used it many times to create pretty sequence logo diagrams.

The beauty of pure client side and Pyodide

I'm a big fan of the web platform, and I find it really cool when things run fully in the browser environment. These browser-native tools are usually more interactive, responsive, and user-friendly, and because they don't depend on any server-side processing, they are also more private and secure.

When developing client-side apps (or any kind of software for that matter), you usually want to use the existing libraries and not reinvent the wheel. Much of this has been enabled by Pyodide—a port of the Python runtime to WebAssembly that makes it possible to run Python code in the browser. This allows everyone to bring pure-Python libraries to the browser and run them at near-native speeds.

With this in mind, I started working on a prototype of a pure-client-side sequence logo generator that reuses the code from WebLogo virtually as-is, using Pyodide/WebAssembly.

Bringing WebLogo to the browser

With Pyodide, I was able to quickly implement the WebLogo-in-the-browser prototype and start generating sequence logos... as EPS. Interestingly, EPS (Encapsulated PostScript) is the native output format of the WebLogo library (not SVG or PDF). To generate the PDFs or SVGs of sequence logos, WebLogo calls out to Ghostscript and pdf2svg to convert the generated EPS to the desired format.

To make it possible to generate PDFs and SVGs in the browser, I had to compile both Ghostscript and pdf2svg to WebAssembly using Emscripten which was a bit of a challenge. Eventually, I managed to get it working and created a fully functional demo (see below) of the sequence logo generator. In the demo, all the processing is done in web workers to avoid blocking the main thread and to keep the UI responsive.

Demo

Paste the alignment in the FASTA format.
Formatting options
You can save the result as EPS, PDF, or SVG.
Loading Pyodide, WebLogo ...
Loading Ghostscript ...
Loading pdf2svg ...

See also

Made by Anton Vasetenkov.

If you want to say hi, you can reach me on LinkedIn or via email. If you like my work, you can support me by buying me a coffee.