Skip to content

1. PDBe Molstar as JS plugin_v0.1.0

Jump to bottom
Mandar Deshpande edited this page May 26, 2020 · 1 revision

PDBe Molstar as JS plugin (v0.1.0)

Steps to include PDBe Molstar as a JavaScript plugin in a web application

1. Include the library style and script files in your web page

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-0.1.0.css">

<!-- For Light Theme include this css file instead of above -->
<!--<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-0.1.0.css">-->
<!--
Tip: Set `bgColor` option to white ({r:255,g:255,b:255}) for light theme
-->


<!-- JS -->
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-0.1.0.js"></script>

2. Instantiate plugin and provide parameters (options) to render

<script>
    //Create plugin instance
    var viewerInstance = new PDBeMolstarPlugin();

    //Set options (** All the available options are listed below in the documentation)
    var options = {
	moleculeId: '1cbs'
    }
    
    //Get element from HTML/Template to place the viewer 
    var viewerContainer = document.getElementById('myViewer');

    //Call render method to display the 3D view
    viewerInstance.render(viewerContainer, options);
</script>

Check here the example demonstrating all the steps

Plugin parameters (options)

No. Option Value Details
01 moleculeId string ** PDB ID - Example: '1cbs'
02 customData json
{ url: string, format: string}** 		Load data from a specific data source
Example: { url: 'https://www.ebi.ac.uk/pdbe/coordinates/1cbs/chains?entityId=1&asymId=A&encoding=bcif', format: 'cif'}
03 ligandView json
{ label_comp_id: string, auth_seq_id: number, auth_asym_id: string, hydrogens: boolean } 		This option can be used to display the PDBe ligand page 3D view like here (REA).
Example: {label_comp_id: "REA", auth_asym_Id: "A", auth_seq_id: "200", hydrogens: true}
*** auth_asym_Id and hydrogens are optional and atleast one is required of label_comp_id and auth_seq_id
04 assemblyId string Display specific Assembly ID of an entry
Example: '1'
05 visualStyle string Set default visual style.
Accepted values - 'cartoon' | 'ball-and-stick' | 'carbohydrate' | 'distance-restraint' | 'ellipsoid' | 'gaussian-surface' | molecular-surface' | 'point' | 'putty' | 'spacefill'
06 bgColor json
{r:number, g:number, b:number}
Default {r:0, g:0, b:0} 		Set canvas background color.
Example: {r:255, g:255, b:255}
07 highlightColor json
{r:number, g:number, b:number}
Default {r:255, g:102, b:153} 		Set default color appearing on mouse-over.
Example: {r:255, g:255, b:102}
08 selectColor json
{r:number, g:number, b:number}
Default {r:12, g:13, b:17} 		Set default color appearing on shift key + mouse-click.
Example: {r:255, g:255, b:102}
09 hideStructure string[] Molstar renders Polymer, HET, Water and Carbohydrates visuals by default. This option is to exclude any of these default visuals. Expected value is an array with 'polymer', 'het', 'water','carbs' keywords. For example hideStructure: ['water'] will not render water visual in the 3D view
10 pdbeUrl string
Default https://www.ebi.ac.uk/pdbe/ 		This option is to set the default base url for the data source. Mostly used internally to test the plugin on different environments
11 loadMaps boolean
Default false 		Load Electron Density Maps from the Volume Server if value is set to true
12 validationAnnotation boolean
Default false 		Load Validation Report Annotation. Adds 'Annotations' control in the menu
13 domainAnnotation boolean
Default false 		Load Domain Annotation. Adds 'Annotations' control in the menu
14 lowPrecisionCoords boolean
Default true 		Load low precision coordinates from the Model server
15 expanded boolean
Default false 		Display full-screen by default on load
16 hideControls boolean
Default false 		Hide controls menu
17 landscape boolean
Default false 		Set landscape view. The controls will similar to the full-screen view
18 loadCartoonsOnly boolean
Default false 		Load only cartoon coordinates from the Model server
19 selectInteraction boolean
Default true 		Switch off the default selection interaction behaviour. This option is used while rendering the 'ligandView'
20 pdbeLink boolean
Default true 		Display PDBe entry link in top right corner of the canvas
21 subscribeEvents boolean
Default true 		Subscribe to other PDB Web-components custom events

** Value for either option 01 or 02 is mandatory. If both are provided then option 02 is preferred over 01 ↩

Clone this wiki locally