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.

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