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://cdn.jsdelivr.net/npm/pdbe-molstar@3.3.0/build/pdbe-molstar.css" />
<!-- For Light Theme include this CSS file instead of the above -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.3.0/build/pdbe-molstar-light.css" /> -->

<!-- JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.3.0/build/pdbe-molstar-plugin.js"></script>

Tip: If you are using light theme, set bgColor option to white (bgColor: 'white')

For PDBe Molstar versions 3.1.3 and older use these URLs instead:

<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.3.css">
<!-- <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-3.1.3.css"> -->
<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
    const viewerInstance = new PDBeMolstarPlugin();

    // Set options (All the available options are listed below in the documentation)
    const options = {
        moleculeId: '1cbs',
    };
    
    // Get element from HTML/Template to place the viewer 
    const 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
Data:
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 }
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.
defaultPreset	string	Set the type of structure to be loaded. Accepted values: 'default' | 'unitcell' | 'all-models' | 'supercell'
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.
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?: AnyColor } (AnyColor defined here)	Customize the superposed structures view. Example: { matrixAccession: 'P08684', segment: 1, ligandView: true, ligandColor: '#ffff32' }
selection	{ data: QueryParam[], nonSelectedColor?: AnyColor } (QueryParam defined here, AnyColor here)	Specify parts of the structure to highlight with different colors and/or extra representations.
galleryView	boolean Default false	Display 3D State Gallery.
Appearance:
visualStyle	string | VisualStylesSpec (VisualStylesSpec defined here)	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.). Use a VisualStylesSpec object to define more detailed visual styles for individual component types, e.g. {polymer: {type: 'putty', size: 'uniform'}, ligand: 'ball-and-stick'}
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.
loadMaps	boolean Default false	Load electron density (or EM) maps from the Volume Server if value is set to true.
mapSettings	{ 'em'?: MapStyle, '2fo-fc'?: MapStyle, 'fo-fc(+ve)'?: MapStyle, 'fo-fc(-ve)'?: MapStyle } where MapStyle = { opacity?: number, wireframe?: boolean }	Customize map style (opacity and solid/wireframe). Only applicable when loadMaps is set to true. Example: { em: { opacity: 0.4, wireframe: false } }
bgColor	AnyColor (defined here) Default '#000000'	Set canvas background color. Example: {r:255, g:255, b:255}, '#ffffff', 'white'
highlightColor	AnyColor (defined here) Default '#ff6699'	Set default color appearing on mouse-over. Example: {r:255, g:255, b:102}, '#ffff66'
selectColor	AnyColor (defined here) Default '#33ff19'	Set default color for marking the selected part of structure (when Selection Mode is active). Example: {r:255, g:255, b:102}, '#ffff66'
lighting	string	Set default lighting. Accepted values: 'flat' | 'matte' | 'glossy' | 'metallic' | 'plastic'
Behavior:
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.
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.
encoding	string Default 'bcif'	Preferred encoding of input structural data. Accepted values: 'bcif' | 'cif'.
lowPrecisionCoords	boolean Default false	Load low precision coordinates from Model Server.
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.
selectBindings	object DefaultSelectLociBindings	Override mouse selection behavior.
focusBindings	object DefaultFocusLociBindings	Override mouse click focus behavior.
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).
subscribeEvents	boolean Default false	Subscribe to other PDB Web-components custom events.
Interface:
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', 'controlToggle', 'controlInfo', 'selection', 'animation', 'trajectory' keywords.
sequencePanel	boolean Default false	Display Sequence panel.
leftPanel	boolean Default true	Display Left control panel.
rightPanel	boolean Default true	Display Right control panel.
logPanel	boolean Default false	Display Log panel.
pdbeLink	boolean Default true	Display PDBe entry link in top right corner of the canvas.
loadingOverlay	boolean Default false	Show overlay with PDBe logo while the initial structure is being loaded.
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).
reactive	boolean Default false	Set reactive layout (switching between landscape and portrait based on the browser window size). Overrides landscape.

Footnotes

* AnyColor can be either color name (e.g. 'yellow') or hexcode (e.g. '#ffff00') or RGB color object (e.g. { r: 255, g: 255, b: 0 })