Overview Documentation

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 npm and GitHub.

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="https://www.ebi.ac.uk/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.
Hide attribute / parameter details Show attribute / parameter details


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:

  1. Primary citation: has the PDB entry been published?
  2. Taxonomy: what is the source organism of the biomacromolecule(s) in the entry?
  3. Sample-production technique: how was the sample of the biomacromolecule(s) obtained?
  4. Structure-determination method: which experimental technique(s) was used to determine the structure and was the experimental data deposited?
  5. Protein content: does the entry contain any protein molecules?
  6. Nucleic acid content: does the entry contain any nucleic acid molecules (DNA, RNA or a hybrid)?
  7. Heterogen content: does the entry contain any ligands (such as inhibitors, cofactors, ions, metals, etc.)?

This component is also available as individual plugin on npm and GitHub.



<pdb-prints pdb-ids="['1cbs']" settings='{"size": 48 }'></pdb-prints>
Hide attribute / parameter details Show attribute / parameter details


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 npm and GitHub.

Demo


<pdb-topology-viewer entry-id="1aqd" entity-id="1"></pdb-topology-viewer>
Hide attribute / parameter details Show attribute / parameter details


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 GitHub.

Demo


<pdb-seq-viewer entry-id="1aqd" entity-id="1" height="370"></pdb-seq-viewer>
Hide attribute / parameter details Show attribute / parameter details


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 GitHub.

Demo


<pdb-uniprot-viewer entry-id="P07550" height="320"></pdb-uniprot-viewer>
Hide attribute / parameter details Show attribute / parameter details


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.

Demo


<pdb-redo pdb-id="1cbs"></pdb-redo>
Hide attribute / parameter details Show attribute / parameter details


This is a component based on the residue contacts viewer in Rajini. 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>
Hide attribute / parameter details Show attribute / parameter details


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>
Hide attribute / parameter details Show attribute / parameter details


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 npm and GitHub.



<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