https://github.com/pdbeurope/pdb-uniprot-viewer
PDB UniProt Viewer
https://github.com/pdbeurope/pdb-uniprot-viewer
Last synced: 8 months ago
JSON representation
PDB UniProt Viewer
- Host: GitHub
- URL: https://github.com/pdbeurope/pdb-uniprot-viewer
- Owner: PDBeurope
- License: apache-2.0
- Created: 2016-09-19T12:19:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-19T12:20:55.000Z (about 9 years ago)
- Last Synced: 2024-12-28T03:42:01.800Z (10 months ago)
- Language: JavaScript
- Homepage: http://pdbe.org
- Size: 224 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PDB UniProt Viewer
[](https://www.npmjs.org/package/pdb-uniprot-viewer)
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).
It is a PDB Component Library component.
## Getting Started
It takes only 3 easy steps to get started with PDB Components.
* Include module files and required dependencies
* Install the component
* Use component as custom element anywhere in the page
>*If you have installed the PDB Component Library in your application then you can directly start using the component as custom element (refer step 3).*
#### **1.** Include module files and dependencies
Download the module javascript and stylesheet files (pdb.uniprot.viewer.min.js and pdb.uniprot.viewer.min.css) stored in the 'build' folder. Include the files in your page <head> section.
You'll also need to include the D3.js, AngularJS library files and pdb-prints component files (please refer *'bower.json'* file for complete dependency details).
```html
```
#### **2.** Installation
As soon as you've got the dependencies and library files included in your application page you just need to include following installation script :
***I)*** If you are developing an AngularJs Application
```html
angular.module('myModule', ['pdb.uniprot.viewer']);
```
***II)*** For other Applications
```html
(function () {
'use strict';
angular.element(document).ready(function () {
angular.bootstrap(document, ['pdb.uniprot.viewer']);
});
}());
```
#### **3.** Using component as custom element anywhere in the page
The component can be used as custom element, attribute or class anywhere in the page.
```html
```
## Documentation
### Attributes
| Sr. No. | Attribute | Values | Description |
|:-------------:|:-------------|:-----|:-----|
| 1 | entry-id | _UniProt ID_
**Mandatory attribute!** | Example : entry-id="P07550" |
| 2 | hide-pdb-prints |_Boolean (true/false)_
*(Optional Attribute)*
Default : 'false' |Removes the PDB Prints component from the viewer.
Example : hide-pdb-prints="true" |
| 3 | height | _Number_
*(Optional Attribute)* |Example : height="370" |
| 4 | width | _Number_
*(Optional Attribute)* |Example : width="750" |
| 5 | subscribe-events | _Boolean (true/false)_
*(Optional Attribute)*
Default : 'true' |Subscribes to custom events of other PDB Components.
Example : subscribe-events="true" |
### Custom Events
Use this to subscript/bind events of this component. Event data (available in key = 'eventData') contains information about the residue number, chain, entry and entity, etc.
| Sr. No. | Event | Description |
|:-------------:|:-------------|:-----|
| 1 | PDB.uniprotViewer.click | use this to bind to click event
Example:
document.addEventListener('PDB.uniprotViewer.click', function(e){ /\/do something on event }) |
| 2 | PDB.uniprotViewer.mouseover | use this to bind to mouseover event
Example:
document.addEventListener('PDB.uniprotViewer.mouseover', function(e){ /\/do something on event }) |
| 3 | PDB.uniprotViewer.mouseout | use this to bind to mouseout event
Example:
document.addEventListener('PDB.uniprotViewer.mouseout', function(e){ /\/do something on event }) |
*Please refer this link for more documentation, demo and parameters details.*
## Contact
Please use github to report **bugs**, discuss potential **new features** or **ask questions** in general. Also you can contact us here for support, feedback or to report any issues.
## License
The plugin is released under the Apache License Version 2.0. You can find out more about it at http://www.apache.org/licenses/LICENSE-2.0 or within the license file of the repository.
## If you are interested in this plugin...
...you might also want to have a look at the PDB Component Library.
"# pdb-uniprot-viewer"