-
Notifications
You must be signed in to change notification settings - Fork 31
1. PDBe Molstar as JS plugin
midlik edited this page May 2, 2024
·
61 revisions
<!-- 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>
<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
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 . |
-
Previous versions