Using VisBOL in a Project - VisBOL/visbol2 GitHub Wiki

There are three main steps to use VisBOL in your web-based project.

Important Note: VisBOL is implemented in JavaScript. Thus, for the following three steps, we will assume that the developer is developing in JavaScript.

Pass an SBOL file in the form of a string to the back-end's createDisplay function. This function returns a JavaScript Promise, which will resolve as a "display list" (the backing data structure) that will be used to render the SBOL file.
import { createDisplay } from 'visbol'
const getDisplayListPromise = createDisplay(<SBOL string here>);

Pass the display list obtained from the promise returned by VisBOL's createDisplay function (see step 1 above) to VisBOL's prepareDisplay function. This function will return a JSON object that we will pass to VisBOL's front-end renderer component:
import { prepareDisplay } from 'visbol'
var preparedDisplay = {};
getDisplayListPromise.then(displayList => {preparedDisplay = prepareDisplay(displayList)});

VisBOL 2's front-end is a React component.

If your project is React-based, simply pass the JSON object created in step 2 as the display prop to the component:
import FrontEnd from 'visbol-react'
In the React component where VisBOL rendering should be placed:
<FrontEnd display={preparedDisplay} />
Note: preparedDisplay is the JSON object we created in step 2.

If your project is not React-based, you can use VisBOL's front-end React component by following these steps:

1. Install React and ReactDOM using npm
   npm i react
npm i react-dom
   You can also use yarn to install these two packages.
   yarn add react
yarn add react-dom
   
2. Import these two packages, along with VisBOL's front-end React component. Use these packages to render VisBOL's front-end React component.
   import React from 'react'
import ReactDOM from 'react-dom'
import FrontEnd from 'visbol-react'
ReactDOM.render(<FrontEnd display={preparedDisplay}/>, document.getElementById("<ID of div you want the front-end to be placed in>"))
   Note: preparedDisplay is the JSON object we created in step 2.

For more general information on using React components in non-React web-applications, visit this documentation.

To view an example of VisBOL 2 being used, one can look at VisBOL 2's website. This documentation details VisBOL 2's use on the website.