npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

biojs-vis-sequence

v0.1.9

Published

Display a protein/nucleotide sequence

Downloads

53

Readme

The Sequence Component

For a working example, please go to JSBin

Instantiation

1 Get the main JS file from npm

2 Remember to add the required JS files, i.e., the Sequence Component, jQuery, and jQuery browser plugin. Something like:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    jQuery = $;
    </script>
    <script src="../js/biojs-vis-sequence.js"></script>
    <script src="../js/jquery-browser-plugin.js"></script>

3 Create a div tag which holds an unique identifier.

    <body>
    ...
    	<div id="YourOwnDivId" />
    ...
    </body>

4 Create a code snippet within a script tag and create and instance of biojs-vis-sequence.

var Sequence = require("biojs-vis-sequence");
window.onload = function() {
var theSequence = "METLCQRLNVCQDKILTHYENDSTDLRDHIDYWKHMRLECAIYYKAREMGFKHINHQVVPTLAVSKNKALQAIELQLTLETIYNSQYSNEKWTLQDVSLEVYLTAPTGCIKKHGYTVEVQFDGDICNTMHYTNWTHIYICEEAojs SVTVVEGQVDYYGLYYVHEGIRTYFVQFKDDAEKYSKNKVWEVHAGGQVILCPTSVFSSNEVSSPEIIRQHLANHPAATHTKAVALGTEETQTTIQRPRSEPDTGNPCHTTKLLHRDSVDSAPILTAFNSSHKGRINCNSNTTPIVHLKGDANTLKCLRYRFKKHCTLYTAVSSTWHWTGHNVKHKSAIVTLTYDSEWQRDQFLSQVKIPKTITVSTGFMSI";
var mySequence = new Sequence({
        sequence : theSequence,
        target : "YourOwnDivId",
        format : 'CODATA',
        id : 'P918283',
        annotations: [
       		{ 
				name:"CATH",
            	color:"#F0F020",
            	html: "Using color code #F0F020 ",
            	regions: [{start: 122, end: 135}]
          	},{ 
				name:"TEST",
         		html:"<br> Example of <b>HTML</b>",
         		color:"green",
         		regions: [
           			{start: 285, end: 292},
           			{start: 293, end: 314, color: "#2E4988"}
				]
       		}
     	],
     	highlights : [
        	{ start:30, end:42, color:"white", background:"green", id:"spin1" },
	        { start:139, end:140 },
    	    { start:631, end:633, color:"white", background:"blue" }
     	]
	});
};

Options

Required Parameters

  • target | {string}

Identifier of the DIV tag where the component should be displayed.

  • sequence | {string}

The sequence to be displayed.

Optional Parameters

  • id | {string}

Sequence identifier if apply.

  • format | {string}

The display format for the sequence representation. Default: "FASTA"

  • highlights | {Object[]}

For highlighting multiple regions. Syntax:

[
 // Highlight aminoacids from 'start' to 'end' of the current strand using the specified 'color' (optional) and 'background' (optional).
 { start: <startVal1>, end: <endVal1> [, id:<idVal1>] [, color: <HTMLColor>] [, background: <HTMLColor>]},
 //
 // Any others highlights
 ..., 
 //
 { start: <startValN>, end: <endValN> [, id:<idValN>] [, color: <HTMLColor>] [, background: <HTMLColor>]}
]

-- **Example : **

highlights : [
        { start:30, end:42, color:"white", background:"green", id:"spin1" },
        { start:139, end:140 },
        { start:631, end:633, color:"white", background:"blue" }
    ]
  • columns | {Object}

Options for displaying the columns. Syntax:

{ size: <numCols>, spacedEach: <numCols>}
Default: {size:40,spacedEach:10}
  • selection | {Object}

Positions for the current selected region. Syntax:

{ start: <startValue>, end: <endValue>}
  • annotations | {Object[]}

Set of overlapping annotations. Must be an array of objects following the syntax:

[
  // An annotation:
  { name: <name>,
    html: <message>,
    color: <color_code>,
    regions: [{ start: <startVal1>, end: <endVal1> color: <HTMLColor>}, ...,{ start: <startValN>, end: <endValN>, color: <HTMLColor>}]
  },
   
  // ...
  // more annotations here
  // ...
]

where:

-- name is the unique name for the annotation -- html is the message (can be HTML) to be displayed in the tool tip. -- color is the default HTML color code for all the regions. -- regions array of objects defining the intervals which belongs to the annotation. -- regions[i].start is the starting character for the i-th interval. -- regions[i].end is the ending character for the i-th interval. -- regions[i].color is an optional color for the i-th interval.

  • formatOptions | {Object}

Options for displaying the title. by now just affecting the CODATA format. Syntax:

formatOptions : {
    title:false,
    footer:false
}

Default
formatOptions : {
    title:true,
    footer:true
}

Methods

  • addAnnotation

Annotate a set of intervals provided in the argument.

-- **Parameters : **

{Object} annotation

The intervals belonging to the same annotation. Syntax: { name: , color: , html: , regions: [{ start: , end: }, ..., { start: , end: }] }

-- **Example : **

// Annotations using regions with different colors.
mySequence.addAnnotation({
   name:"UNIPROT",
   html:"<br> Example of <b>HTML</b>",
   color:"green",
   regions: [
      {start: 540, end: 560},
      {start: 561, end:580, color: "#FFA010"},
      {start: 581, end:590, color: "red"},
      {start: 690, end:710}]
});
  • addHighlight

Highlights a region using the font color defined in {Biojs.Sequence#highlightFontColor} by default is red.

-- **Parameters : **

{Object} h

The highlight defined as follows:

-- **Example : **

// highlight the characters within the position 100 to 150, included.

mySequence.addHighlight( { "start": 100, "end": 150, "color": "white", "background": "red", "id": "aaa" } );

Returns:

    {int} representing the id of the highlight on the internal array. Returns -1 on failure
  • clearSequence

Shows the columns indicated by the indexes array.

-- **Parameters : **

{string} showMessage Optional

Message to be showed.

{string} icon Optional

Icon to be showed a side of the message

-- **Example : **

mySequence.clearSequence("No sequence available", "../biojs/css/images/warning_icon.png");
  • formatSelectorVisible

Set the visibility of the drop-down list of formats.

-- **Parameters : **

{boolean} visible

true: show; false: hide.

  • hide

Hides the whole component.

  • hideFormatSelector

This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'false' argument.

-- **Example : **

// Hides the format selector.
mySequence.hideFormatSelector();
  • highlight

Highlights a region using the font color defined in {Biojs.Protein3D#highlightFontColor} by default is red.

-- **Parameters : **

{int} start

The starting character of the highlighting.

{int} end

The ending character of the highlighting.

{string} color Optional

HTML color code.

{string} background Optional

HTML color code.

{string} id Optional

Custom identifier.

Returns:

{int} representing the id of the highlight on the internal array. Returns -1 on failure

  • removeAllAnnotations

Removes all the current annotations.

-- **Example : **

mySequence.removeAllAnnotations();
  • removeAllHighlights

Remove all the highlights of whole sequence.

-- **Example : **

mySequence.removeAllHighlights();
  • removeAnnotation

Removes an annotation by means of its name.

-- **Parameters : **

{string} name

The name of the annotation to be removed.

-- **Example : **

// Remove the UNIPROT annotation.
mySequence.removeAnnotation('UNIPROT');
  • removeHighlight

Remove a highlight.

-- **Parameters : **

{string} id

The id of the highlight on the internal array. This value is returned by method highlight.

-- **Example : **

// Clear the highlighted characters within the position 100 to 150, included.
mySequence.removeHighlight("spin1");
  • setAnnotation

Annotate a set of intervals provided in the argument.

-- **Parameters : **

{Object} annotation

The intervals belonging to the same annotation. Syntax:

{ name: , color: , html: , regions: [{ start: , end: }, ..., { start: , end: }] }

  • setFormat

Changes the current displaying format of the sequence.

-- **Parameters : **

{string} format

The format for the sequence to be displayed.

-- **Example : **

// Set format to 'FASTA'.
mySequence.setFormat('FASTA');
  • setNumCols

Changes the current number of columns in the displayed sequence.

-- **Parameters : **

{int} numCols

The number of columns.

-- **Example : **

// Set the number of columns to 70.
mySequence.setNumCols(70);
  • setSelection

Set the current selection in the sequence causing the event Biojs.Sequence#onSelectionChanged

-- **Parameters : **

{int} start

The starting character of the selection.

{int} end

The ending character of the selection

-- **Example : **

// set selection from the position 100 to 150
mySequence.setSelection(100, 150);
  • setSequence

Shows the columns indicated by the indexes array.

-- **Parameters : **

{string} seq

The sequence strand.

{string} identifier Optional

Sequence identifier.

-- **Example : **

mySequence.setSequence("P99999");
  • show

Shows the whole component.

  • showFormatSelector

This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'true' argument.

-- **Example : **

// Shows the format selector.
mySequence.showFormatSelector();
  • unHighlight

Clear a highlighted region using.

-- **Parameters : **

{int} id

The id of the highlight on the internal array. This value is returned by method highlight.

  • unHighlightAll

Clear the highlights of whole sequence.

Events

  • onAnnotationClicked

-- **Parameters : **

{function} actionPerformed

An function which receives an Biojs.Event object as argument.

Returned data in the Biojs.Event object:

{Object} source

The component which did triggered the event.

{string} type

The name of the event.

{string} name

The name of the selected annotation.

{int} pos

A number indicating the position of the selected amino acid.

-- **Example : **

mySequence.onAnnotationClicked(
   function( objEvent ) {
      alert("Clicked " + objEvent.name + " on position " + objEvent.pos );
   }
);
  • onSelectionChange

-- **Parameters : **

{function} actionPerformed

An function which receives an Biojs.Event object as argument.

Returned data in the Biojs.Event object:

{Object} source

The component which did triggered the event.

{string} type

The name of the event.

{int} start

A number indicating the start of the selection.

{int} end

A number indicating the ending of selection.

-- **Example : **

mySequence.onSelectionChange(
   function( objEvent ) {
      alert("Selection in progress: " + objEvent.start + ", " + objEvent.end );
   }
);
  • onSelectionChanged

-- **Parameters : **

{function} actionPerformed

An function which receives an Biojs.Event object as argument.

Returned data in the Biojs.Event object:

{Object} source

The component which did triggered the event.

{string} type

The name of the event.

{int} start

A number indicating the start of the selection.

{int} end

A number indicating the ending of selection.

-- **Example : **

mySequence.onSelectionChanged(
   function( objEvent ) {
      alert("Selected: " + objEvent.start + ", " + objEvent.end );
   }
);