VisBOL Architecture - VisBOL/visbol2 GitHub Wiki

VisBOL's codebase practices a strict separation between the back-end and the front-end. The back-end parses SBOL files and extracts relevant data needed to visualize the genetic circuit. The front-end is a React component that uses the data produced by the back-end to render a visualization of the circuit in the form of an SVG.

Back-end

Exported Functions

There are two major functions exported from the back-end - createDisplay and prepareDisplay. To see how these functions are used, visit this documentation on how to use VisBOL in a project.

createDisplay

createDisplay is a Javascript function which takes in SBOL (in the form of a string) and generates a Javascript Promise object. If the SBOL is able to be parsed without any errors, this Promise will resolve as a "display list". This display list is an array of Javascript objects that represent the components (and the parts) of the genetic circuit represented by the SBOL.

prepareDisplay

prepareDisplay is a Javascript function which takes in a display list (see createDisplay explanation above) and generates a Javascript object that VisBOL's front-end uses to generate a visualization (see Front-end section below).

Parametric SVGs

In the process of preparing the display (see prepareDisplay method description above), VisBOL's back-end maps parts in the genetic circuit to their corresponding Parametric SVGs. The library of these Parametric SVGs can be found here. As development continues, we plan to phase out this hard-coded library by subscribing to a "Parametric SVG server" that will supply genetic parts that adhere to the latest SBOL Visual specifications.

Front-end

VisBOL's front-end was built using React. It utilizes a number of custom React components to generate a visualization of a genetic circuit in the form of an SVG.

React Components

Rendering

This is the top-level React component for VisBOL's front-end. It assembles all of the part, interaction, and backbone glyphs together.

GlyphRenderer

This component renders glyphs in their correct location based on the svg and coordinates provided as props.

HookRenderer

This component renders interaction arrows in their corresponding locations.

Backbone

This component renders the backbone (or multiple backbones) for the circuit(s).

Navigator

This component renders the "VisBOL Navigator", which allows users to adjust the scale of the visualization.

Rendering Properties

"Properties" of the rendering, such as the font-size and font of part labels, the distance between interactions, the length of part links along the backbone, and the maximum length of labels, are set in the properties.js file.