2. PDBe Molstar as Web component_v0.1.0

PDBe Molstar as Web-component (v0.1.0)

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 library style and script files 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://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-0.1.0.css">

<!-- For Light Theme include this css file instead of above -->
<!--<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-0.1.0.css">-->
<!--
Tip: Set background color to white for light theme
-->

<!-- JS -->
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-component-0.1.0.js"></script>

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

2. Include PDBe Molstar as HTML Element

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

Check here the example demonstrating all the steps

Web-component attributes

No.	Attribute	Details
01	molecule-id	Load PDB Data Example: <pdbe-molstar molecule-id="1cbs"></pdbe-molstar>
02	custom-data-url custom-data-format	Load Custom Data Example: <pdbe-molstar custom-data-url="https://www.ebi.ac.uk/pdbe/coordinates/1cbs/cartoon" custom-data-format="pdb"></pdbe-molstar>
03	ligand-label-comp-id ligand-auth-asym-Id ligand-auth-seq-id ligand-hydrogens	Load PDBe Ligand view Example (REA) Example: <pdbe-molstar ligand-label-comp-id="REA" ligand-auth-asym-Id="A" ligand-auth-seq-id="200" ligand-hydrogens="true"></pdbe-molstar> *** ligand-auth-asym-Id and ligand-hydrogens are optional and atleast one is required of ligand-label-comp-id and ligand-auth-seq-id
04	assembly-id	Specify Assembly Example: <pdbe-molstar molecule-id="1cbs" assembly-id="1"></pdbe-molstar>
05	bg-color-r bg-color-g bg-color-b	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
06	highlight-color-r highlight-color-g highlight-color-b	Highlight color Example: <pdbe-molstar molecule-id="1cbs" highlight-color-r="255" highlight-color-g="102" highlight-color-b="153"></pdbe-molstar> This will set the default color appearing on mouse-over
07	select-color-r select-color-g select-color-b	Selection color Example: <pdbe-molstar molecule-id="1cbs" select-color-r="255" select-color-g="102" select-color-b="153"></pdbe-molstar> This will set the default selection appearing on Shift key + mouse-click
08	visual-style	Visual styling 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'
09	hide-polymer hide-water hide-het hide-carbs	Hide visuals Example: <pdbe-molstar molecule-id="1cbs" hide-water="true" hide-het="true"></pdbe-molstar> ***will not render HET and water visual in the 3D view
10	pdbe-url	Url for PDB data Example: <pdbe-molstar molecule-id="1cbs" pdbe-url="https://www.ebi.ac.uk/pdbe/"></pdbe-molstar> ***This option is to set the default base url for the data source. Mostly used internally to test the plugin on different environments
11	load-maps	Load Electron Density Maps from the Volume Server Example: <pdbe-molstar molecule-id="1cbs" load-maps="true"></pdbe-molstar> **default - false
12	validation-annotation	Load Validation Report Annotation Example: <pdbe-molstar molecule-id="1cbs" validation-annotation="true"></pdbe-molstar> This will add 'Annotations' control in the menu. **default - false
13	domain-annotation	Load Domain Annotation Example: <pdbe-molstar molecule-id="1cbs" domain-annotation="true"></pdbe-molstar> This will add 'Annotations' control in the menu. **default - false
14	low-precision	Load low precision coordinates from the Model server Example: <pdbe-molstar molecule-id="1cbs" low-precision="true"></pdbe-molstar> **default - true
15	expanded	Display full-screen by default on load Example: <pdbe-molstar molecule-id="1cbs" expanded="true"></pdbe-molstar> **default - false
16	hide-controls	Hide controls menu Example: <pdbe-molstar molecule-id="1cbs" hide-controls="true"></pdbe-molstar> **default - false
17	landscape	Set landscape view. The controls will similar to the full-screen view. Example: <pdbe-molstar molecule-id="1cbs" landscape="true"></pdbe-molstar> **default - false
18	load-cartoons-only	Load only cartoon coordinates from the Model server Example: <pdbe-molstar molecule-id="1cbs" load-cartoons-only="true"></pdbe-molstar> **default - false
19	select-interaction	Switch off the default selection interaction behaviour. This option is used while rendering the 'ligandView' Example: <pdbe-molstar molecule-id="1cbs" select-interaction="false"></pdbe-molstar> **default - true
20	pdbe-logo	Display PDBe entry link in top right corner of the canvas Example: <pdbe-molstar molecule-id="1cbs" pdbe-link="false"></pdbe-molstar> **default - true
21	subscribe-events	Display PDBe entry link in top right corner of the canvas Example: <pdbe-molstar molecule-id="1cbs" subscribe-events="false"></pdbe-molstar> **default - true