Skip to content

Marvin Live developer guide - real time plugin templates

Basics

Before digging deeper into the available options, you should be familiar with the basics of the current templating framework: AngularJS. If you feel the need for a refresher, please review the tutorial and pay special attention to interpolation (double curly braces), ng-src attribute of an img, ng-hrefattribute of a link, and the ng-repeat, and ng-if constructs.

These templating constructs will be used to render the contents from your plugin's results. Remember, results are available to the template in scope variable called client.

Example

my-plugin.template.html

1
2
3
4
5
<div>
  <p>logD: {{client.data[0].logD.logD}}</p>
  <p># of Ar: {{client.data[0].topologyAnalysis.ring.aromaticRingCount}}</p>
  <p>SFI: {{client.data[0].logD.logD + client.data[0].topologyAnalysis.ring.aromaticRingCount | number:2 }}</p>
</div>

Adding style

Once the content is rendered, you can change its style using plain old CSS definitions in a attribute. To make sure the rules are specific to this template only, you can add classes as needed.

Example

my-plugin.template.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<style>
.my-results p {
  margin-bottom: 9px;
}
</style>
<div class="my-results">
  <p>logD: {{client.data[0].logD.logD}}</p>
  <p># of Ar: {{client.data[0].topologyAnalysis.ring.aromaticRingCount}}</p>
  <p>SFI: {{client.data[0].logD.logD + client.data[0].topologyAnalysis.ring.aromaticRingCount | number:2 }}</p>
</div>

Marvin Live specific components

Besides the basics, several components were developed to support the typical visualizations used by chemists. Below you can find examples and options for each.

Compares 2 numbers and displays an arrow pointing upwards or downwards as appropriate. You can use variables, expressions or fixed values as well to compare.

Usage

1
<diff new="client.logP.newValue" base="client.logP.baseValue"></diff>

Attributes

Parameter Type Description
new number or expression Number to compare.
base number or expression Number to compare against.

Compares 2 numbers and displays an 15x10 pixel blue upwards arrow if new is larger. You can use variables, expressions or fixed values as well to compare.

Example

images/download/attachments/1806101/Screen_Shot_2018-03-19_at_10.09.52.png

Usage

1
<larger new="client.logP.newValue" base="client.logP.baseValue"></larger>

Attributes

Parameter Type Description
new number or expression Number to compare.
base number or expression Number to compare against.

Compares 2 numbers and displays a 15x10 pixel blue downwards arrow if new is smaller. You can use variables, expressions or fixed values as well to compare.

Example

images/download/attachments/1806101/Screen_Shot_2018-03-19_at_10.09.52.png

Usage

1
<smaller new="client.logP.newValue" base="client.logP.baseValue"></smaller>

Attributes

Parameter Type Description
new number or expression Number to compare.
base number or expression Number to compare against.

Provides pagination, i.e. Previous and Next buttons to cycle through longer lists.

Example

images/download/attachments/1806101/Screen_Shot_2018-03-19_at_10.16.32.png

Usage

1
<pager ng-model="page" total="client.molecules.length" items-per-page="2"></pager>

Attributes

Parameter Type Description
ng-model scope variable Assignable variable for the current page number. Will be initialized to 1 and as the user navigates through the pages, it will be automatically updated to the current visible page number (i.e. this is not a 0 indexed page number).
total number Total number of items (i.e. not pages) in the list. This is used to calculate the number of pages available.
items-per-page number Defines the number of items on a page, used while calculating the total number of pages available. Default: 4 Optional

[structure]

Adds right click menu to an HTML element, with options that interact with the chemical editor.

Example

images/download/attachments/1806101/Screen_Shot_2018-03-19_at_10.13.32.png

Usage

1
<img ng-src="{{item.base64image}}" structure="item.molSource" structure-data="{ID: item.id}" structure-menu-options="copy, load, paste, pin, snapshot"/>

Attributes

Parameter Type Description
structure String Plain text source of the chemical structure in any file format supported by MarvinJS.
structure-data Object Additional data to attach to the molecule when saving a Snapshot in label-value format. Optional.
structure-menu-options String Selectively enable or disable options from the right click menu. Available options: copy, load, paste, pin, snapshot. Default: display all available options. Optional.

Creates a WebGL viewer for PDB and SD files with typical visualizations and builtin options. <threedee> is a wrapper element while the <protein> and <ligand> elements below are used to define chemical content.

Example

Usage

1
2
3
4
5
<threedee download-data="client.aligned" download-filename="'Reference.sdf'"> 
  <protein name="client.pdbCode" pdb="client.pdbFile"></protein>
  <ligand name="'Idea'" molecule="client.aligned" color="'cyan'"></ligand>
  <ligand name="client.ligandCode" molecule="client.reference" color="'orange'" zoom-on-change="true"></ligand>
</threedee>

Attributes

Parameter Type Description
download-data string Plain text source of molecule that can be download directly from the viewer. Optional.
download-filename string Filename for the downloadable molecule. Optional.

Configures and loads a PDB formatted biomolecule into the threedee viewer. Must be used within a <threedee> component.

Usage

1
2
3
4
5
<threedee>
  <protein name="client.pdbCode" pdb="client.pdbFile" visible-components="['Cartoon']"></protein>
  <ligand name="'Idea'" molecule="client.aligned" color="'cyan'"></ligand>
  <ligand name="client.ligandCode" molecule="client.reference" color="'orange'" zoom-on-change="true"></ligand>
</threedee>

Attributes

Parameter Type Description
pdb string Plain text source of the protein in PDB format.
name string Human friendly label for the protein. If none provided, a sequential ID is generated. Optional.
visible-components array of strings List of components to render by default. Valid options are: Cartoon, Surface, Pocket, Contact, Key residues, Additives, Lipids, Sugar, Ions, Water. Default: Pocket, Contact, Key residues, Water

Configures and loads an SDF formatted small molecule into the threedee viewer. Must be used within a <threedee> component.

Usage

1
2
3
<threedee>
  <ligand ng-repeat="item in client.molecules" molecule="item.mol" name="item.label" color="item.color" zoom-on-change="$index === 0"></ligand>
</threedee>

Attributes

Parameter Type Description
molecule string Plain text source of the molecule in SDF/MOLV2000 format.
name string Human friendly label for this molecule. If none provided, a sequential ID will be generated. Optional.
color string CSS style color code for the carbon atoms to highlight this molecule. Default: grey.
zoom-on-change boolean Flag whether the scene should zoom to this ligand when its initialized or when its source changes. Default: false.