Home

ProtVista PDB

PDBe implementation of ProtVista (Nightingale)

Steps to include ProtVista PDB as a web component in a web application

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

<!-- Polyfills -->
<!-- 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" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css"  type="text/css" media="all"/>

<!-- JS -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/protvista-pdb-2.0.0.js"></script>

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

2. Include ProtVista PDB as HTML Element

<protvista-pdb accession="P05067"></protvista-pdb>

Web component attributes

No.	Attribute	Details
01	accession	UniProt accession Example: <protvista-pdb accession="P05067"></protvista-pdb>
02	entry-id entity-id	PDB Entry and Entity ID Example: <protvista-pdb entry-id="1cbs" entity-id="1"></protvista-pdb> *** both entry-id and entity-id are mandatory
03	custom-data	This attribute is required to display custom data in the ProtVista view. Please refer this working example for custom data structure details and how to use it.
04	subscribe-events	Control subscription to other PDB Web-components custom events Example: <protvista-pdb accession="P05067" subscribe-events="false"></protvista-pdb> **default - true

Helper Methods

Helper functions are useful for programmatically controlling the visualization.

Layout methods

No.	Function	Parameters	Description
1	resetZoom	Type: json {start:number, end:number, highlight:boolean}	Set scale / zoom to a given range Examples:Instance.layoutHelper.resetZoom({start: 10, end: 200, highlight: false}); will set scale to 10-200 range
2	resetView	-	Reset to initial default view Examples:Instance.layoutHelper.resetView();

Custom Events

Event listeners can be used to bind the ProtVista PDB custom events

No.	Event	Description
1	protvista-click	Binds to click event. Event data (available in key = 'details') contains information of the section clicked Example:document.addEventListener('protvista-click', (e) => { //do something on event });
2	protvista-mouseover	Binds to mouseover event. Example:document.addEventListener('protvista-mouseover', (e) => { //do something on event });
3	protvista-mouseout	Binds to mouseout event. Example:document.addEventListener('protvista-mouseout', () => { //do something on event });

Working Example

• ProtVista PDB demo
• ProtVista PDB custom data demo