https://github.com/pdbeurope/pdb-sequence-viewer
PDB Sequence-feature Viewer
https://github.com/pdbeurope/pdb-sequence-viewer
Last synced: 6 months ago
JSON representation
PDB Sequence-feature Viewer
- Host: GitHub
- URL: https://github.com/pdbeurope/pdb-sequence-viewer
- Owner: PDBeurope
- License: apache-2.0
- Created: 2016-09-14T13:03:15.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T10:47:35.000Z (over 2 years ago)
- Last Synced: 2024-10-03T03:29:39.166Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://pdbe.org
- Size: 205 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PDB Sequence-feature Viewer
[](https://www.npmjs.org/package/pdb-sequence-viewer)
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.
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.sequence.viewer.min.js and pdb.sequence.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 and AngularJS library file (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.sequence.viewer']);
```
***II)*** For other Applications
```html
(function () {
'use strict';
angular.element(document).ready(function () {
angular.bootstrap(document, ['pdb.sequence.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 | _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" |
| 4 | 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.seqViewer.click | use this to bind to click event
Example:
document.addEventListener('PDB.seqViewer.click', function(e){ /\/do something on event }) |
| 2 | PDB.seqViewer.mouseover | use this to bind to mouseover event
Example:
document.addEventListener('PDB.seqViewer.mouseover', function(e){ /\/do something on event }) |
| 3 | PDB.seqViewer.mouseout | use this to bind to mouseout event
Example:
document.addEventListener('PDB.seqViewer.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-sequence-viewer"