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.2.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.2.0/build/pdbe-molstar-light.css" /> -->

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

Tip: If you are using light theme, set bgColor option to white (bgColor: { r: 255, g: 255, b: 255 })

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?: { 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?: { r: number, g: number, b: number } }` (`QueryParam` defined here)	Specify parts of the structure to highlight with different colors and/or extra representations.
Appearance:
`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.).
`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`	`{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}`
`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', 'selection', 'animation', 'controlToggle', 'controlInfo'` keywords.
`sequencePanel`	`boolean` Default `false`	Display Sequence 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`.

Provide feedback

Saved searches