WebLogo in the browser

TL;DR

You can run Python-based WebLogo natively in the browser with Pyodide and WebAssembly. Check out the demo here 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

Go here to try out the in-browser sequence logo generator.

See also

• Sequence Logo Generator - Create sequence logos from FASTA alignments.
• BLAST WASM - Compiling the BLAST sequence search/alignment tool to WASM.
• DESeq2 in the browser - Running DESeq2 in the browser.
• Sequence Alignment Viewer - Open FASTA files in the browser.
• GenBank to FASTA - Convert GenBank flat files to FASTA format.
• ABI to FASTA - Convert AB1 files (Applied Biosystems/ABI trace files) to FASTA format.
• What is FASTA and how is it used? - Learn about the FASTA format and its applications.
• FASTA Editor - A FASTA editor for creating and editing FASTA files.
• FASTA Parse Tree Viewer - Visualize the parse tree of FASTA files.
• FASTQ to FASTA Converter - Convert FASTQ files to FASTA format.
• PDB to FASTA - Extract protein/nucleotide sequences from PDB files.
• Genome Browser - Explore the human genome.
• Phylogenetic Tree Editor - An online visual editor for phylogenetic trees (WIP).
• Phylogenetic Tree Builder - Reconstruct phylogenetic trees from protein or DNA/RNA sequence alignments.
• Plasmid Map Generator - A tool to generate plasmid maps from GenBank files.
• WikiPathways: A Wikipedia for biological pathways - An overview of the collaboratively edited structured pathway encyclopedia.
• The RDF model of the Gene Ontology, demystified - An outline of the structure of the Gene Ontology RDF graph and ways to query it.
• The ambitious challenge of finishing the human genome - Generating a complete human genome sequence, chromosome by chromosome.
• Scalable genomic alignment with Progressive Cactus - How progressive alignment makes it possible to efficiently align hundreds to thousands of large genomes.
• Awesome bioinformatics - A curated list of awesome resources on bioinformatics.
• NCBI Taxonomy Browser - A simple tool for viewing the NCBI taxonomy tree.
• FASTQ Editor - A FASTQ editor for creating and editing FASTQ files.
• Newick Editor - An online editor for phylogenetic trees in the Newick format.
• Newick Parse Tree Viewer - View the parse trees of Newick strings.
• PDB Editor - Edit PDB files online.
• Bioinformatics Crossword - A daily crossword puzzle for bioinformatics terms.
• Bioinformatics pronunciation guide - A pronunciation guide for bioinformatics terms.
• RDKit WASM - Running RDKit in the browser with WebAssembly.
• Phonetic Analyzer - A web-based phonetic analyzer built on top of Praat.
• Font Parser - An online tool for parsing font files.
• FreeType WASM - A WASM port of the FreeType library.
• WASM WAT Editor - A simple editor for the WebAssembly Text Format (WAT).
• WASM ports - A list of software compiled to/ported to WebAssembly/JavaScript.
• Awesome WebAssembly - A curated list of awesome resources on WebAssembly (WASM).
• Erlang/OTP WASM (Erlang in the browser) - Execute Erlang code in the browser.