Dalliance (Biodalliance)

The Biodalliance rendering system is extensible via Javascript modules. To create a custom renderer, you must export at least two specific functions that the system calls during the rendering lifecycle:

1. renderTier(status, tier): Handles the initialization or state management for a tier.
2. drawTier(tier): Handles the actual drawing logic for the tier.

For a reference implementation, you can examine default-renderer.es6, which maintains the functionality of the original Biodalliance renderer.

// A custom renderer module must export these functions
export function renderTier(status, tier) {
  // implementation
}

export function drawTier(tier) {
  // implementation
}

The renderer test is used to verify that different rendering modules produce identical visual outputs. It works by comparing the effects of two different drawing functions on the same data structure: drawFeatureTier (from feature-draw.js) and drawTier (from default-renderer.es6).

Instead of comparing pixels directly, the test compares the resulting subtiers. Since subtiers contain the glyphs (the objects drawn to the BD canvas), ensuring the subtiers are identical guarantees that the glyphs and the eventual screen output are the same.

Dalliance uses a Gulp-based build system. To build the project from the source repository, you must have Node.js installed. Follow these steps to install dependencies and build the project:

1. Install Gulp globally: npm install -g gulp
2. Install project dependencies: npm install
3. Run the build: gulp

After building, you can test the output by opening any of the HTML files located in the example-browsers directory.

(sudo?) npm install -g gulp
npm install
gulp

To run the renderer test, open the HTML test file in a web browser. The test executes within a BD browser environment containing several tracks.

Note: The test output is logged to the web browser console.

// The test file is located at:
/test/render-test.html

Subtiers are tiers that are rendered inside a parent multi-tier. To configure a subtier, set the renderer property to 'sub' and provide a sub configuration object.

The sub object requires:

• multi_id: The ID of the parent multi-tier it belongs to.

It also supports:

• offset: The vertical pixel offset from the top of the multi-tier canvas.
• z: The z-index for the subtier.

{
 name: 'Genes',
 desc: 'Gene structures from GENCODE M2',
 bwgURI: 'http://www.biodalliance.org/datasets/GRCm38/gencodeM2.bb',
 stylesheet_uri: 'http://localhost:8000/gencode.xml',
 collapseSuperGroups: true,
 trixURI: 'http://www.biodalliance.org/datasets/GRCm38/gencodeM2.ix',
 renderer: 'sub',
 sub: {
     multi_id: "multi_1",
     offset: 100,
     z: 2
 }
}

Multi-tier rendering allows multiple tiers to be drawn on the same canvas, overlapping one another. To use this, set the renderer property to 'multi' and include a multi configuration object.

At minimum, the multi object must contain a multi_id. Other optional properties include:

• grid: Boolean to enable an evenly spaced horizontal grid.
• grid_offset: Starting position for the grid.
• grid_spacing: Spacing between grid lines.
• quant: An object defining a vertical ruler (e.g., { min: 0, max: 100 }).

{
 name: 'Multi-tier',
 tier_type: 'qtl',
 uri: '',
 renderer: 'multi',
 multi: {
     multi_id: "multi_1",
     grid: true,
     grid_offset: 0,
     grid_spacing: 10,
     quant: { min: 0, max: 100 }
 }
}