Documentation :
Once you boostrap the Component Library you can use/add any component like in-built html element. Individual component mark-up/definition and attributes are explained below in detail:
PDB Links component adds a popup containing links to all the wwPDB resources for a given PDB entry. The popup is displayed when user clicks on a hyperlink to which the component is applied. To apply this component to a hyperlink, the component name is added to the class attribute of the anchor tag and the corresponding PDB ID is provided as a value to custom attribute pdb-id. Check out the demo to see the implementation.
This component is also available as individual plugin on and .
Demo
<a class='pdb-links' pdb-id='1cbs' href='javascript:void(0);'>1cbs</a>
To better index the links for search engines please add the component as shown below :
<-- Component -->
<a class='pdb-links' pdb-id='1cbs' href='javascript:void(0);'>1cbs</a>
<-- HTML for SEO -->
<span style="display:none;">
<a href="/pdbe/entry/pdb/1cbs">1cbs structure in PDBe</a>
<a href="https://pdbj.org/mine/summary/1cbs">1cbs structure in PDBj</a>
<a href="https://www.rcsb.org/pdb/explore.do?structureId=1cbs">1cbs structure in RCSB</a>
</span>
Note: The 'PDB ID' in the SEO HTML should be same as in the component.
A PDBprint for a PDB entry is a collection of PDBlogos displayed in a specific order, where each icon represents a well-defined category of information.
In PDBprints following categories are included:
- Primary citation: has the PDB entry been published?
- Taxonomy: what is the source organism of the biomacromolecule(s) in the entry?
- Sample-production technique: how was the sample of the biomacromolecule(s) obtained?
- Structure-determination method: which experimental technique(s) was used to determine the structure and was the experimental data deposited?
- Protein content: does the entry contain any protein molecules?
- Nucleic acid content: does the entry contain any nucleic acid molecules (DNA, RNA or a hybrid)?
- Heterogen content: does the entry contain any ligands (such as inhibitors, cofactors, ions, metals, etc.)?
This component is also available as individual plugin on and .
Demo
<pdb-prints pdb-ids="['1cbs']" settings='{"size": 48 }'></pdb-prints>
Hide attribute / parameter details
Show attribute / parameter details
| Sr. No. |
Attribute |
Values |
Description |
| 1 |
pdb-ids |
Array of pdb ids
Mandatory attribute! |
Example : pdb-ids="['1cbs','1tqn']"
Refer the Plunker demo to understand different ways of using this attribute |
| 2 |
settings |
Object containing custom settings
(Optional attribute)
Available options/settings -
- orientation : vertical / horizontal(default)
- size : 48 / 64 / 128 / 36(default)
- color : transparent / embl_green(default)
- hideLogo : (array) : ["PDBeLogo","PrimaryCitation", "Taxonomy", "Expressed", "Experimental", "Protein", "NucleicAcid", "Ligands"]
|
Example : settings='{"orientation": "vertical", "size": 36, "color": "embl_green", "hideLogo": ["PDBeLogo","PrimaryCitation"] }' |
The topology viewer depicts the secondary structure of a protein in a 2D representation, taking into account the interactions of these secondary structure elements. This leads to a consistent display of sheets and domains in the structure. For PDB entries with multiple copies of a protein, the best chain is used. The topology viewer also depicts value-added annotation from SIFTS including residue-level mapping to UniProt, sequence families (Pfam), structure domains (SCOP, CATH) and structure quality from wwPDB validation reports.
This component is also available as individual plugin on and .
Demo
<pdb-topology-viewer entry-id="1aqd" entity-id="1"></pdb-topology-viewer>
Hide attribute / parameter details
Show attribute / parameter details
| Sr. No. |
Attribute |
Values |
Description |
| 1 |
entry-id |
PDB ID
Mandatory attribute! |
Example : entry-id="1cbs" |
| 2 |
entity-id |
Entity ID
Mandatory attribute! |
Example : entity-id="1" |
| 3 |
height |
Number (Optional attribute)
|
Example : height="300" |
| 4 |
width |
Number (Optional attribute)
|
Example : width="400" |
| 5 |
subscribe-events |
true/false (Optional attribute)
Default : 'true' |
Subscribes to other PDB Components custom events.
Example : subscribe-events="true" |
| Custom Events |
| 1 |
PDB.topologyViewer.click |
Use this to bind to the click event of this component elements.
Event data (available in key = 'eventData') contains information
about the residue number, chain, entry and entity, etc
Example: document.addEventListener('PDB.topologyViewer.click', function(e){ //do something on event })
|
2 |
PDB.topologyViewer.mouseover |
Use this to bind to the mouseover event of this component elements.
Example: document.addEventListener('PDB.topologyViewer.mouseover', function(e){ //do something on event })
|
| 3 |
PDB.topologyViewer.mouseout |
Use this to bind to the mouseout event of this component elements.
Example: document.addEventListener('PDB.topologyViewer.mouseout', function(e){ //do something on event })
|
The sequence-feature view shows a linear representation of the sequence of the protein in a PDB entry and depicts value-added annotation from SIFTS. This including residue-level mapping to UniProt, sequence families (Pfam), structure domains (SCOP, CATH), mutations, binding-site residues, structure quality and secondary structure. By default the sequence-feature view shows the chain that has the maximum number of observed residues.
This component is also available as individual plugin on .
Demo
<pdb-seq-viewer entry-id="1aqd" entity-id="1" height="370"></pdb-seq-viewer>
Hide attribute / parameter details
Show attribute / parameter details
| Sr. No. |
Attribute |
Values |
Description |
| 1 |
entry-id |
PDB ID
Mandatory attribute! |
Example : entry-id="1cbs" |
| 2 |
entity-id |
Entity ID
Mandatory attribute! |
Example : entity-id="1" |
| 3 |
height |
Number
(Optional attribute) |
Example : height="370" |
| 4 |
width |
Number
(Optional attribute) |
Example : width="750" |
| 5 |
subscribe-events |
true/false (Optional attribute)
Default : 'true' |
Subscribes to other PDB Components custom events.
Example : subscribe-events="true" |
| Custom Events |
| 1 |
PDB.seqViewer.click |
Use this to bind to the click event of this component elements.
Event data (available in key = 'eventData') contains information
about the clicked element type (Chain, Uniprot, CATH, SCOP, binding site, etc), residue number, chain, entry and entity, etc
Example: document.addEventListener('PDB.seqViewer.click', function(e){ //do something on event })
|
2 |
PDB.seqViewer.mouseover |
Use this to bind to the mouseover event of this component elements.
Example: document.addEventListener('PDB.seqViewer.mouseover', function(e){ //do something on event })
|
| 3 |
PDB.seqViewer.mouseout |
Use this to bind to the mouseout event of this component elements.
Example: document.addEventListener('PDB.seqViewer.mouseout', function(e){ //do something on event })
|
The PDB UniProt viewer displays a summary of PDB entries contains a sequence mapped to a particular UniProt code. The mapping indicates what coverage of a UnipProt accession is available in the PDB archive. Graphics also indicate whether the sequence in a given PDB entry differs from that in Uniprot (for instance, it contains engineered mutations or expression tags)
This component is also available as individual plugin on .
Demo
<pdb-uniprot-viewer entry-id="Q5M4H8" height="320"></pdb-uniprot-viewer>
Hide attribute / parameter details
Show attribute / parameter details
| Sr. No. |
Attribute |
Values |
Description |
| 1 |
entry-id |
UniProt ID
Mandatory attribute! |
Example : entry-id="P07550" |
| 2 |
viewer-type |
Viewer Type - pdbViewer / unipdbViewer
Mandatory attribute! |
Example : viewer-type="unipdbViewer"
UniPDB view is denoted by type 'unipdbViewer' |
| 3 |
height |
Number
(Optional attribute) |
Example : height="370" |
| 4 |
width |
Number
(Optional attribute) |
Example : width="750" |
| 5 |
subscribe-events |
true/false (Optional attribute)
Default : 'true' |
Subscribes to other PDB Components custom events.
Example : subscribe-events="true" |
| Custom Events |
| 1 |
PDB.seqViewer.click |
Use this to bind to the click event of this component elements.
Event data (available in key = 'eventData') contains information
about the clicked element type (Chain, Uniprot, CATH, SCOP, binding site, etc), residue number, chain, entry and entity, etc
Example: document.addEventListener('PDB.seqViewer.click', function(e){ //do something on event })
|
2 |
PDB.seqViewer.mouseover |
Use this to bind to the mouseover event of this component elements.
Example: document.addEventListener('PDB.seqViewer.mouseover', function(e){ //do something on event })
|
| 3 |
PDB.seqViewer.mouseout |
Use this to bind to the mouseout event of this component elements.
Example: document.addEventListener('PDB.seqViewer.mouseout', function(e){ //do something on event })
|
The PDB-REDO component shows the change in geometric quality (a combined score for Ramachandran plot, side-chain rotamer, and atomic packing quality) and fit to the experimental data between original PDB entry and its re-refined and rebuilt PDB-REDO counterpart.
![](/pdbe/pdb-component-library/images/west-Life-logo.png")
Demo
<pdb-redo pdb-id="1cbs"></pdb-redo>
Hide attribute / parameter details
Show attribute / parameter details
| Sr. No. |
Attribute |
Values |
Description |
| 1 |
pdb-id |
PDB ID
Mandatory attribute! |
Example : pdb-id="1cbs" |
| 2 |
heading-text |
String (Optional attribute)
Default : 'PDB-REDO model quality changes' |
Example : heading-text="PDB-REDO Component"
If set blank (heading-text="") it removes the heading. |
| 3 |
subheading-text |
String (Optional attribute)
Default : '' (blank) |
It can be used to add explanatory details between heading and sliders
Example : subheading-text="The sliders below show the change in geometric quality and fit to data between original PDB entry and the re-refined PDB-REDO entry" |
| 4 |
error-text |
String (Optional attribute)
Default : 'Error:'(internal error) |
Example : error-text="Error loading PDB-REDO"
If set blank (error-text="") it shows no message on error. |
This is a component based on the residue contacts viewer in Protein Contacts Atlas. It displays, in graphical form, the atomic contacts between each of the secondary structural elements (helices and sheets) in a protein. The broader the connection between each of the secondary structural elements, the more atomic contacts are involved in the interface. Hovering over these connections will display the exact number of atomic contacts in this interaction.
Demo
<pdb-residue-interactions pdb-id="1cbs"></pdb-residue-interactions>
The PDB 3D complex is a server that analyses the complexes in crystal structures. This component gives a compact summary of the results for a particular PDB code and assembly. Selecting ‘more details� gives further information based on the 3D Complex prediction and clicking on the ‘Evidence� text links out to the server for further information.
Demo
<pdb-3d-complex pdb-id="1lec" assembly-id="1"></pdb-3d-complex>
LiteMol is a streamlined structure viewer which enables a PDB structure to be explored within a browser rather than requiring pre-installed molecular graphics software. Navigation is simple, with rotation of the camera using the left mouse button, zooming controlled with the right mouse button and clicking on a residue or atom to center the view to this point. For structures determined by X-ray crystallography, there is also the option to view electron density of the structure where structure factors have been deposited to the PDB. Litemol also displays validation and domain information for the structure.
This component is also available as individual plugin on and .
Demo
<pdb-lite-mol pdb-id="'1cbs'" hide-controls="true" load-ed-maps="true"></pdb-lite-mol>
Note: The viewer is responsive and takes the dimensions of its parent element. In order to set fixed dimensions please wrap it in a '<div>' element with desired 'height' and 'width' values.
Example :
<div style="position:relative;height:600px;width:400px;">
<pdb-lite-mol pdb-id="'1cbs'" load-ed-maps="true"></pdb-lite-mol>
</div>
Hide attribute / parameter details
Show attribute / parameter details
| Sr. No. |
Attribute |
Values |
Description |
| 1 |
pdb-id |
PDB ID
Mandatory attribute! |
Example : pdb-id='1cbs' |
| 2 |
load-ed-maps |
true / false (default)
(Optional attribute) |
Load Electron Density Maps if value is set to true
Example : load-ed-maps="true" |
| 3 |
hide-controls |
true / false (default)
(Optional attribute) |
Hide controls menu if value is set to true
Example : hideControls="true" |
| 4 |
custom-query |
refer : |
load specific part of the structure
Example: custom-query="ligandInteraction?name=REA&radius=4" |
| 5 |
show-logs |
true/false (Optional attribute)
Default : 'true' |
Display logs panel |
| 6 |
tree-menu |
true/false (Optional attribute)
Default : 'false' |
Display Menu in Tree/CCP4 format |
| 7 |
is-expanded |
true/false (Optional attribute)
Default : 'false' |
Display full screen |
| 8 |
validation-annotation |
true/false (Optional attribute)
Default : 'false' |
Load Validation Report Annotation (works only when tree-menu='false') |
| 9 |
domain-annotation |
true/false (Optional attribute)
Default : 'false' |
Load Domain Annotation (works only when tree-menu='false') |
| 10 |
source-url |
Absolute url to downlaod structure data (Optional attribute) |
load specific data from a given url. Note - you have to specific 'source-format' attribute to load data using this option.
Example: source-url="http://ftp.ebi.ac.uk/pub/databases/msd/pdbechem/files/sdf/ATP.sdf" |
| 11 |
source-format |
supported format : mmcif, bcif (binarycif) , pdb, sdf - (Optional attribute)
Default : 'mmcif' |
This attribute is mandatory to load data using 'source-url' attribute.
Example: source-format="sdf" |
| 12 |
display-full-map-onload |
true/false (Optional attribute)
Default : 'false' |
Display full density map onload |
| 13 |
subscribe-events |
true/false (Optional attribute)
Default : 'true' |
Subscribes to other PDB Components custom events.
Example : subscribe-events="true" |
| Custom Events |
| 1 |
PDB.litemol.click |
Use this to bind to the click event of this component elements.
Event data (available in key = 'eventData') contains information structure residue clicked
Example: document.addEventListener('PDB.litemol.click', function(e){ //do something on event })
|
2 |
PDB.litemol.mouseover |
Use this to bind to the mouseover event of this component elements.
Example: document.addEventListener('PDB.seqViewer.mouseover', function(e){ //do something on event })
|
| 3 |
PDB.litemol.mouseout |
Use this to bind to the mouseout event of this component elements.
Example: document.addEventListener('PDB.seqViewer.mouseout', function(e){ //do something on event })
|