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

    
    <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

    
    <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

    
    <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

    
    <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

    
    <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

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

    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.

    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

    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.