Contributing to VisBOL - VisBOL/visbol2 GitHub Wiki

VisBOL is an open-source project. Developers can contribute to VisBOL in the following ways:

Identifying and Raising Issues

VisBOL is under continual development; keeping track of issues is essential for VisBOL's improvement. To raise an issue, please use VisBOL's issue tracker.

Adding Glyphs

Until VisBOL subscribes to a Parametric SVG library server (see VisBOL Architecture), new SBOL Visual glyphs will have to be manually added to the VisBOL's Parametric SVG directory. Below are the steps for adding a glyph.

  1. Create a new .js file; try to make the file name reflect the name of the glyph you are adding.
  2. Create a constant variable called default string, and assign its value the Parametric SVG

const defaultString = <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:parametric="https://parametric-svg.github.io/v0.2" width="100" height="100" glyphtype="Protein" parametric:defaults="baseline_offset=0;baseline_x=0;baseline_y=25;pad_after=2;pad_before=2;width=15"> <path id="protein" parametric:d="M{baseline_x+pad_before},{(baseline_y-baseline_offset)} C{baseline_x+pad_before},{(baseline_y-baseline_offset)-(width/1.5)} {baseline_x+pad_before+width},{(baseline_y-baseline_offset)-(width/1.5)} {baseline_x+pad_before+width},{(baseline_y-baseline_offset)} C{baseline_x+pad_before+width},{(baseline_y-baseline_offset)+(width/1.5)} {baseline_x+pad_before},{(baseline_y-baseline_offset)+(width/1.5)} {baseline_x+pad_before},{(baseline_y-baseline_offset)} Z" d="M2,25 C2,11.666666666666666 22,11.666666666666666 22,25 C22,38.333333333333336 2,38.333333333333336 2,25 Z" fill="rgb(241,148,138)" fill-rule="nonzero" stroke="black" stroke-width="1pt" stroke-linejoin="miter" stroke-linecap="butt" /> <circle parametric:cx="{baseline_x + width / 4}" parametric:cy="{baseline_y + width / 2.5}" parametric:r="{width / 7}" fill="rgb(241,148,138)" fill-rule="nonzero" stroke="black" stroke-width="1pt" stroke-linejoin="miter" stroke-linecap="butt" /> <rect fill="rgb(241,148,138)" parametric:x="{baseline_x + width / 4}" parametric:y="{baseline_y - width / 10}" parametric:width="{width / 2}" parametric:height="{width / 2}" /> </svg>;

  1. Create a constant variable called dimensions, which will be an array that represents the x & y dimensions of the Parametric SVG in its default state.

const dimensions = [15, 15];

  1. Create a constant variable called inset, which will represent how much the Parametric SVG should "drop", or "sink" into the backbone.

const inset = 7.5;

  1. Export the three variables you've created from the file.

module.exports = { defaultString, dimensions, inset };

  1. Add your glyph as an export from the GlyphSelector file

'promoter': require('./glyphs/promoter')

Your new glyph will now be used by VisBOL!

Editing VisBOL's Code

To edit VisBOL's code, please clone VisBOL and create a new branch. When you have made your changes, request to merge your branch into the master branch.

⚠️ **GitHub.com Fallback** ⚠️