1. PDBe Molstar as JS plugin

PDBe Molstar as JS plugin

• Steps to include PDBe Molstar in a web application
• Plugin parameters

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

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

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

<!-- For Light Theme include this css file instead of the above -->
<!--<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-3.1.3.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-3.1.3.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>

Click here for an example demonstrating all the steps

Plugin parameters (options)

Value for either moleculeId or customData is required (if both are provided then customData is preferred). All other options are optional.

Option	Value type	Details
moleculeId	string	PDB ID - Example: '1cbs' (or UniProt ID if superposition is true)
customData	{ url: string, format: string, binary?: boolean}	Load data from a specific data source Example: { url: 'https://www.ebi.ac.uk/pdbe/model-server/v1/1cbs/atoms?label_entity_id=1&auth_asym_id=A&encoding=bcif', format: 'cif', binary:true }
ligandView	{ auth_asym_id?: string, struct_asym_id?: string, label_comp_id?: string, auth_seq_id?: number, show_all?: boolean }	This option can be used to display the PDBe ligand page 3D view like here (REA). Example: { label_comp_id: 'REA' } *** At least one of label_comp_id and auth_seq_id is required.
alphafoldView	boolean Default false	This applies AlphaFold confidence score coloring theme for AlphaFold model
assemblyId	string	Display specific assembly of an entry Example: '1' *** Use value 'preferred' to render the default assembly (i.e. the first assembly). Leave undefined to load deposited model structure.
visualStyle	string	Set default visual style. Accepted values: 'cartoon' | 'ball-and-stick' | 'carbohydrate' | 'ellipsoid' | 'gaussian-surface' | 'molecular-surface' | 'point' | 'putty' | 'spacefill' Leave undefined to use default visual styles for each component type (polymer, ligand etc.)
bgColor	{r:number, g:number, b:number} Default {r:0, g:0, b:0}	Set canvas background color. Example: {r:255, g:255, b:255}
highlightColor	{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}
selectColor	{r:number, g:number, b:number} Default {r:51, g:255, b:25}	Set default color for marking the selected part of structure (when Selection Mode is active). Example: {r:255, g:255, b:102}
hideStructure	string[]	Molstar renders multiple visuals (polymer, ligand, water...) visuals by default. This option is to exclude any of these default visuals. Expected value is an array with 'polymer', 'het', 'water', 'carbs', 'nonStandard', 'coarse' keywords. For example hideStructure: ['water'] will not render water visual in the 3D view
hideControls	boolean Default false	Hide all control panels by default (can be shown by the Toggle Controls Panel button (wrench icon))
hideCanvasControls	string[]	Hide individual icon buttons in the top-right corner of the canvas. Expected value is an array with 'expand', 'selection', 'animation', 'controlToggle', 'controlInfo' keywords.
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
loadMaps	boolean Default false	Load electron density (or EM) maps from the Volume Server if value is set to true
validationAnnotation	boolean Default false	Load Validation Report Annotations. Adds 'Annotations' control in the menu
domainAnnotation	boolean Default false	Load Domain Annotations. Adds 'Annotations' control in the menu
symmetryAnnotation	boolean Default false	Load Assembly Symmetry Annotations. Adds 'Annotations' control in the menu
lowPrecisionCoords	boolean Default false	Load low precision coordinates from Model Server
expanded	boolean Default false	Display full-screen by default on load
landscape	boolean Default false	Set landscape view (control panels on the sides instead of above and under the canvas)
selectInteraction	boolean Default true	Controls the action performed when clicking a residue. true (default) will zoom the residue and show ball-and-stick visual for its surroundings, false will only zoom the residue. If ligandView or superposition option is set, selectInteraction behaves as if false.
sequencePanel	boolean Default false	Display Sequence panel
lighting	string	Set default lighting. Expected value is 'flat', 'matte', 'glossy', 'metallic', 'plastic'
defaultPreset	string	Set default Preset view. Expected value is 'default', 'unitcell', 'all-models', 'supercell'
selectBindings	object DefaultSelectLociBindings	Override mouse selection behavior
focusBindings	object DefaultFocusLociBindings	Override mouse click focus behavior
pdbeLink	boolean Default true	Display PDBe entry link in top right corner of the canvas
subscribeEvents	boolean Default false	Subscribe to other PDB Web-components custom events
superposition	boolean Default false	Display the superposed structures view like the one on the PDBe-KB pages
superpositionParams	{ matrixAccession?: string, segment?: number, cluster?: number[], superposeCompleteCluster?: boolean, ligandView?: boolean, superposeAll?: boolean, ligandColor?: { r: number, g: number, b: number } }	Customize the superposed structures view. Example: { matrixAccession: 'P08684', segment: 1, ligandView: true, ligandColor: { r: 255, g: 255, b: 50 } }
selection	{ data: QueryParam[], nonSelectedColor?: any, clearPrevious?: boolean } where QueryParam	Specify parts of the structure to highlight with different colors
encoding	string Default 'bcif'	Preferred encoding of input structural data. Accepted values: 'bcif' | 'cif'
granularity	string Default 'residue'	Structure granularity level for interactions like highlight, focus, select. Accepted values: 'element' | 'residue' | 'chain' | 'entity' | 'model' | 'operator' | 'structure' | 'elementInstances' | 'residueInstances' | 'chainInstances'. (Granularity levels ending with Instances treat multiple copies of the same element/residue/chain in an assembly as one object).
reactive	boolean Default false	Set reactive layout (switching between landscape and portrait based on the browser window size). Overrides landscape.