GSoC - New renderers in BD

Posted on July 26, 2016 by Christian Fischer
Tags: gsoc2016

As detailed in the previous blog post I have been rewriting the renderer used by BioDalliance. The reasons for doing this were related to wanting to add further functionality to the tiers, which the old code didn’t really support. In this post I will explain the new rendering system in greater depth.

This rewrite has consisted of rearranging the BD code to support modular renderers, followed by writing several renderer modules. Tests were also written to make sure that the new default renderer module worked the same way as the old system.

A renderer module is a Javascript module that exposes two functions, renderTier(status, tier) and drawTier(tier), where status is a string and tier is a BD tier. The functions are called by the browser when appropriate, for example when new data has been fetched in a tier, and it needs to be refreshed and drawn again.

There’s nothing dictating what drawTier() actually does, though it should probably draw something to the tier’s canvas. There are reasons not to actually draw anything, which I will come to later. In any case, drawTier is what you want to focus on if writing your own renderer.

The browser now has a renderers property, which is a map of names to renderer modules. If you’ve written a new module and wish to use it, you need to import the module in cbrowser.js and add it to this list:

if (typeof(require) !== 'undefined') {
    var MultiRenderer = require('./multi-renderer.es6');
    var SubRenderer = require('./sub-renderer.es6');


function Browser(opts) {
    this.renderers =
        { 'default': DefaultRenderer,
          'dummy': DummyRenderer,
          'multi': MultiRenderer,
          'sub': SubRenderer,
          'old': OldRenderer,
          'test': TestRenderer

Then make sure you configure your browser or tier to use it:

var b = new Browser ({
    sources: [{name: 'Multi',
              renderer: 'multi'

    renderer: 'sub'

There are two renderer modules included, old-renderer and default-renderer, that provide the same rendering functionality that BD used to. Indeed, old-renderer is simply a wrapper around the original BD code. Default-renderer is a reimplementation of the original drawing code, using ES6. It has been tested, and should work fine, but old-renderer is provided just in case. The default-renderer also exposes several functions that can be of use in other renderers.

As an example of what a renderer might look like that doesn’t simply draw a tier to the canvas, let’s look at multi-renderer and sub-renderer. These are renderers that, when used together, make it possible for several tiers to be drawn to the same track and canvas, and allow the user to translate them vertically, providing further control over what the result looks like. See the figure below for an example of what this can look like.

First, the sub-renderer. This is a module that actually doesn’t draw anything to its canvas - a tier that uses the sub-renderer doesn’t actually have a canvas. Instead, it uses the fact that drawTier is called after the tier data has been loaded, to tell the browser to refresh and redraw the corresponding multi-tier.

The multi-renderer, on the other hand, has a canvas but doesn’t have any data of its own (and ignores it if it does have any). When its drawTier is called, it picks out all tiers in the browser that are configured to be drawn in the multi-tier, and uses the default-renderer’s functions to draw them all to the same canvas.

The source code for these renderers can be found here and here, and further documentation on how to use them can be found here.