ncats-protvista-viewer

This component combines various custom and
ProtVista Nightingale components
to provide the user with a interactive view of aligned protein sequences. An example is shown on
Pharos
where the sequence variant data and protein annotations come from ProKinO.

$3


npm install ncats-protvista-viewer


$3

Check out ./test.html for an example of how to set the appropriate attributes to visualize your data.
$3

sequence

: Nested arrays with calculated values for the degree of conservation (in bits) 
for each residue, where each residue is an array of objects representing the proportion of
each amino acid. Amino acids are represented in single letter abbreviations, and bits are floating point numbers. 
Totals for all amino acids at each residue maxes out at log_2 20 = 4.322 bits.

`sequence = [[{aa: Amino_Acid_Abbreviation, bits: Float}]]`

annotations: An array of features to show on the lower protvista-tracks. startResidue and endResidueare the start and end residues.name is the name that will show on hover. typeis one of the following values that will determine the style in which the feature is display.`alpha-helix alphaC-beta4 Loop beta-strand Activation Loop Activation Segment Catalytic Loop Glycine Loop Subdomain Linker KeyAA R-Spine C-Spine R-Spine Shell N-Lobe C-Lobe Gatekeeper CMGC Insert Motif`

`$3`


* see mapIO in common.js to change the display for each type
* see typeToTrack in viewer.js to change how different annotation types are sorted into tracks
$3

* The component only runs in the browser, so load it only in the browser.
* Set your attributes then too, this is an example for the .js file

        
if (isPlatformBrowser(this.platformID)) {
    import("ncats-protvista-viewer").then(() => {
        if (this.hasVariants()) {
            this.weblogo.nativeElement.setAttribute('sequence', JSON.stringify(this.target.sequence_variants.residue_info));
        }
        if (this.hasAnnotations()) {
            this.weblogo.nativeElement.setAttribute('annotations', JSON.stringify(this.target.sequence_annotations));
        }
    });
}


* while the html is like this

$3

* Author: Keith Kelleher
* Issues: Please post bugs and comments to the Issues tab

ncats-protvista-viewer

$3


npm install ncats-protvista-viewer


$3

Check out ./test.html for an example of how to set the appropriate attributes to visualize your data.
$3

sequence

: Nested arrays with calculated values for the degree of conservation (in bits) 
for each residue, where each residue is an array of objects representing the proportion of
each amino acid. Amino acids are represented in single letter abbreviations, and bits are floating point numbers. 
Totals for all amino acids at each residue maxes out at log_2 20 = 4.322 bits.

`sequence = [[{aa: Amino_Acid_Abbreviation, bits: Float}]]`

`$3`


* see mapIO in common.js to change the display for each type
* see typeToTrack in viewer.js to change how different annotation types are sorted into tracks
$3

* The component only runs in the browser, so load it only in the browser.
* Set your attributes then too, this is an example for the .js file

        
if (isPlatformBrowser(this.platformID)) {
    import("ncats-protvista-viewer").then(() => {
        if (this.hasVariants()) {
            this.weblogo.nativeElement.setAttribute('sequence', JSON.stringify(this.target.sequence_variants.residue_info));
        }
        if (this.hasAnnotations()) {
            this.weblogo.nativeElement.setAttribute('annotations', JSON.stringify(this.target.sequence_annotations));
        }
    });
}


* while the html is like this

$3

* Author: Keith Kelleher
* Issues: Please post bugs and comments to the Issues tab