Design Hub 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

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

Design Hub 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

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

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

Usage

<pager ng-model="page" total="client.molecules.length" items-per-page="2" label="page"></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
`label`	string	Defines the name of discrete pages on the UI. This is used to override the word "page" to something more appropriate for a given problem, e.g. set or molecules. Default: page Optional

[structure]

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

Example

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 Marvin JS.
`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.

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