2. PDBe Molstar as web component

PDBe Molstar as web component

PDBe Molstar is also available as a web component (custom HTML Element)

• Steps to include PDBe Molstar web component in a web application
• Web-component attributes

Steps to include PDBe Molstar as a web component in a web application

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

<!-- Required for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8"></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js" charset="utf-8"></script>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/build/pdbe-molstar-light.css" /> -->

<!-- JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdbe-molstar-component.js"></script>

* Until web components are natively supported by all browsers, it is necessary to use polyfills

Tip: If you are using light theme, set bgColor option to white (<pdbe-molstar molecule-id="1cbs" bg-color-r="255" bg-color-g="255" bg-color-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-component-3.1.3.js"></script>

2. Include PDBe Molstar as HTML Element

<pdbe-molstar molecule-id="1cbs"></pdbe-molstar>

Click here for an example demonstrating all the steps

Web component attributes

You must provide either molecule-id attribute or custom-data-url and custom-data-format attributes. All other attributes are optional.

Attribute	Details
Data:
molecule-id	PDB ID - Example: '1cbs'
custom-data-url custom-data-format custom-data-binary	Load data from a specific data source. Example: <pdbe-molstar custom-data-url="https://www.ebi.ac.uk/pdbe/model-server/v1/1cbs/full" custom-data-format="cif"></pdbe-molstar> * custom-data-binary is optional.
assembly-id	Display specific assembly of an entry. Example: <pdbe-molstar molecule-id="1cbs" assembly-id="1"></pdbe-molstar> * Use value "preferred" to render the default assembly (i.e. the first assembly). Omit this attribute to load deposited model structure.
default-preset	Set the type of structure to be loaded. Example: <pdbe-molstar molecule-id="1cbs" default-preset="unitcell"></pdbe-molstar> * Accepted values: 'default' | 'unitcell' | 'all-models' | 'supercell'
ligand-label-comp-id ligand-auth-asym-id ligand-struct-asym-id ligand-auth-seq-id ligand-show-all	This option can be used to display the PDBe ligand page 3D view like here (REA). Example: <pdbe-molstar molecule-id="1cbs" ligand-label-comp-id="REA"></pdbe-molstar> * molecule-id is required. At least one of ligand-label-comp-id and ligand-auth-seq-id is required.
alphafold-view	This applies AlphaFold confidence score colouring theme for AlphaFold model (default: false).
Appearance:
visual-style	Set default visual style. Example: <pdbe-molstar molecule-id="1cbs" visual-style="spacefill"></pdbe-molstar> * Accepted values: 'cartoon' | 'ball-and-stick' | 'carbohydrate' | 'distance-restraint' | 'ellipsoid' | 'gaussian-surface' | molecular-surface' | 'point' | 'putty' | 'spacefill' Omit this attribute to use default visual styles for each component type (polymer, ligand etc.).
hide-polymer hide-water hide-het hide-carbs hide-non-standard hide-coarse	Molstar renders multiple visuals (polymer, ligand, water...) visuals by default. These attributes are to exclude any of these default visuals. Example: <pdbe-molstar molecule-id="1cbs" hide-het="true" hide-water="true"></pdbe-molstar> This will not render ligand and water visuals in the 3D view.
load-maps	Load electron density (or EM) maps from the Volume Server. Example: <pdbe-molstar molecule-id="1cbs" load-maps="true"></pdbe-molstar>
bg-color-r bg-color-g bg-color-b	Set canvas background color. Example: <pdbe-molstar molecule-id="1cbs" bg-color-r="255" bg-color-g="255" bg-color-b="255"></pdbe-molstar> This will load structure for '1cbs' and set background color to white.
highlight-color-r highlight-color-g highlight-color-b	Set default color appearing on mouse-over. Example: <pdbe-molstar molecule-id="1cbs" highlight-color-r="255" highlight-color-g="102" highlight-color-b="153"></pdbe-molstar>
select-color-r select-color-g select-color-b	Set default color for marking the selected part of structure (when Selection Mode is active). Example: <pdbe-molstar molecule-id="1cbs" select-color-r="255" select-color-g="102" select-color-b="153"></pdbe-molstar>
lighting	Set default lighting. Example: <pdbe-molstar molecule-id="1cbs" lighting="plastic"></pdbe-molstar> * Accepted values: 'flat' | 'matte' | 'glossy' | 'metallic' | 'plastic'
Behavior:
validation-annotation	Load Validation Report Annotations. Adds 'Annotations' control in the menu. Example: <pdbe-molstar molecule-id="1cbs" validation-annotation="true"></pdbe-molstar>
domain-annotation	Load Domain Annotations. Adds 'Annotations' control in the menu. Example: <pdbe-molstar molecule-id="1cbs" domain-annotation="true"></pdbe-molstar>
symmetry-annotation	Load Assembly Symmetry Annotations. Adds 'Annotations' control in the menu. Example: <pdbe-molstar molecule-id="1cbs" symmetry-annotation="true"></pdbe-molstar>
pdbe-url	This option is to set the default base URL for the data source. Mostly used internally to test the plugin on different environments. Example: <pdbe-molstar molecule-id="1cbs" pdbe-url="https://www.ebi.ac.uk/pdbe/"></pdbe-molstar>
encoding	Preferred encoding of input structural data (default: "bcif"). Example: <pdbe-molstar molecule-id="1cbs" encoding="cif"></pdbe-molstar>
low-precision	Load low precision coordinates from the Model server. Example: <pdbe-molstar molecule-id="1cbs" low-precision="true"></pdbe-molstar>
select-interaction	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. When using ligand view, select-interaction behaves as if "false". Example: <pdbe-molstar molecule-id="1cbs" select-interaction="false"></pdbe-molstar> * Default value is "true"!
subscribe-events	Subscribe to other PDB Web-components custom events. Example: <pdbe-molstar molecule-id="1cbs" subscribe-events="true"></pdbe-molstar>
Interface:
hide-controls	Hide all control panels by default (can be shown by the Toggle Controls Panel button (wrench icon)). Example: <pdbe-molstar molecule-id="1cbs" hide-controls="true"></pdbe-molstar>
hide-expand-icon hide-selection-icon hide-animation-icon hide-control-toggle-icon hide-control-info-icon	Hide individual icon buttons in the top-right corner of the canvas. Example: <pdbe-molstar molecule-id="1cbs" hide-expand-icon="true"></pdbe-molstar> This will hide the expand / fullscreen icon.
sequence-panel	Display Sequence panel.
pdbe-link	Display PDBe entry link in top right corner of the canvas. Example: <pdbe-molstar molecule-id="1cbs" pdbe-link="false"></pdbe-molstar> * Default value is "true"!
loading-overlay	Show overlay with PDBe logo while the initial structure is being loaded. Example: <pdbe-molstar molecule-id="1cbs" loading-overlay="true"></pdbe-molstar>
expanded	Display full-screen by default on load. Example: <pdbe-molstar molecule-id="1cbs" expanded="true"></pdbe-molstar>
landscape	Set landscape layout (control panels on the sides instead of above and under the canvas). Example: <pdbe-molstar molecule-id="1cbs" landscape="true"></pdbe-molstar>
reactive	Set reactive layout (switching between landscape and portrait based on the browser window size). Example: <pdbe-molstar molecule-id="1cbs" reactive="true"></pdbe-molstar>