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-href attribute 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

<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 <style></style> attribute. To make sure the rules are specific to this template only, you can add classes as needed.

Example

my-plugin.template.html

<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.

<diff>

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

<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.

<larger>

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

<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.

<smaller>

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

<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.

<pager>

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

<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

<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.

<threedee>

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

<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.

<protein>

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

Usage

<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

<ligand>

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

Usage

<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.