Class Biojs.Sequence

Version 1.0.0.

Extends Biojs.

Defined in: Biojs.Sequence.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Biojs.Sequence(options) Sequence component

Field Summary
Field Attributes	Field Name and Description
<inner>	eventTypes Array containing the supported event names
<inner>	opt Default values for the options

Method Summary
Method Attributes	Method Name and Description
	addAnnotation(annotation) Annotate a set of intervals provided in the argument.
	addHighlight(h) Highlights a region using the font color defined in {Biojs.Sequence#highlightFontColor} by default is red.
	clearSequence(showMessage, icon) Shows the columns indicated by the indexes array.
	constructor(options)
	formatSelectorVisible(visible) Set the visibility of the drop-down list of formats.
	hide() Hides the whole component.
	hideFormatSelector() This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'false' argument.
	highlight(start, end, color, background, id) Highlights a region using the font color defined in {Biojs.Protein3D#highlightFontColor} by default is red.
	removeAllAnnotations() Removes all the current annotations.
	removeAllHighlights() Remove all the highlights of whole sequence.
	removeAnnotation(name) Removes an annotation by means of its name.
	removeHighlight(id) Remove a highlight.
	setAnnotation(annotation) Annotate a set of intervals provided in the argument.
	setFormat(format) Changes the current displaying format of the sequence.
	setNumCols(numCols) Changes the current number of columns in the displayed sequence.
	setSelection(start, end) Set the current selection in the sequence causing the event Biojs.Sequence#onSelectionChanged
	setSequence(seq, identifier) Shows the columns indicated by the indexes array.
	show() Shows the whole component.
	showFormatSelector() This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'true' argument.
	unHighlight(id) Clear a highlighted region using.
	unHighlightAll() Clear the highlights of whole sequence.

Methods borrowed from class Biojs:: addListener, extend, getId, listen, raiseEvent, setEventHandlers, setOptions

Event Summary
Event Attributes	Event Name and Description
	onAnnotationClicked(actionPerformed)
	onSelectionChange(actionPerformed)
	onSelectionChanged(actionPerformed)

Class Detail

Biojs.Sequence(options)

Sequence component
Author: John Gomez, Jose Villaveces.

var theSequence = "METLCQRLNVCQDKILTHYENDSTDLRDHIDYWKHMRLECAIYYKAREMGFKHINHQVVPTLAVSKNKALQAIELQLTLETIYNSQYSNEKWTLQDVSLEVYLTAPTGCIKKHGYTVEVQFDGDICNTMHYTNWTHIYICEEAojs SVTVVEGQVDYYGLYYVHEGIRTYFVQFKDDAEKYSKNKVWEVHAGGQVILCPTSVFSSNEVSSPEIIRQHLANHPAATHTKAVALGTEETQTTIQRPRSEPDTGNPCHTTKLLHRDSVDSAPILTAFNSSHKGRINCNSNTTPIVHLKGDANTLKCLRYRFKKHCTLYTAVSSTWHWTGHNVKHKSAIVTLTYDSEWQRDQFLSQVKIPKTITVSTGFMSI";
var mySequence = new Biojs.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" }
     ]
});

Parameters:
{Object} options: An object with the options for Sequence component.

Options detailed:

{string} target

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

{string} sequence

The sequence to be displayed.

{string} [id]

Sequence identifier if apply.

{string} [format="FASTA"]

The display format for the sequence representation.

{Object[]} [highlights]

For highlighting multiple regions.

 
   [
   	// 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>]}
   ]

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

{Object} [columns={size:40,spacedEach:10}]

Options for displaying the columns. Syntax: { size: <numCols>, spacedEach: <numCols>}

{Object} [selection]

Positions for the current selected region. Syntax: { start: <startValue>, end: <endValue>}

{Object[]} [annotations]

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.

{Object} [formatOptions={title:true,

footer:true}] Options for displaying the title. by now just affecting the CODATA format.

 
		formatOptions : {
			title:false,
			footer:false
		}

Requires:: jQuery Core 1.6.4; jQuery UI 1.8.16; Biojs.Tooltip

Field Detail

<inner> eventTypes

Array containing the supported event names

<inner> opt

Default values for the options

Method Detail

addAnnotation(annotation)

Annotate a set of intervals provided in the argument.

// 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}]
});

Parameters:
{Object} annotation: The intervals belonging to the same annotation. Syntax: { name: <value>, color: <HTMLColorCode>, html: <HTMLString>, regions: [{ start: <startVal1>, end: <endVal1>}, ..., { start: <startValN>, end: <endValN>}] }

{int} addHighlight(h)

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

// highlight the characters within the position 100 to 150, included.
mySequence.addHighlight( { "start": 100, "end": 150, "color": "white", "background": "red", "id": "aaa" } );

Parameters:
{Object} h: The highlight defined as follows:

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

clearSequence(showMessage, icon)

Shows the columns indicated by the indexes array.

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

Parameters:
{string} showMessage Optional: Message to be showed.
{string} icon Optional: Icon to be showed a side of the message

constructor(options)

Parameters:
options

formatSelectorVisible(visible)

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.

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

{int} highlight(start, end, color, background, id)

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.

Deprecated:
use addHighlight instead.

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

removeAllAnnotations()

Removes all the current annotations.

mySequence.removeAllAnnotations();

removeAllHighlights()

Remove all the highlights of whole sequence.

mySequence.removeAllHighlights();

removeAnnotation(name)

Removes an annotation by means of its name.

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

Parameters:
{string} name: The name of the annotation to be removed.

removeHighlight(id)

Remove a highlight.

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

Parameters:
{string} id: The id of the highlight on the internal array. This value is returned by method highlight.

setAnnotation(annotation)

Annotate a set of intervals provided in the argument.

Parameters:
{Object} annotation: The intervals belonging to the same annotation. Syntax: { name: <value>, color: <HTMLColorCode>, html: <HTMLString>, regions: [{ start: <startVal1>, end: <endVal1>}, ..., { start: <startValN>, end: <endValN>}] }

Deprecated:
Use addAnnotation() instead.

setFormat(format)

Changes the current displaying format of the sequence.

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

Parameters:
{string} format: The format for the sequence to be displayed.

setNumCols(numCols)

Changes the current number of columns in the displayed sequence.

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

Parameters:
{int} numCols: The number of columns.

setSelection(start, end)

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

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

Parameters:
{int} start: The starting character of the selection.
{int} end: The ending character of the selection

setSequence(seq, identifier)

Shows the columns indicated by the indexes array.

mySequence.setSequence("P99999");

Parameters:
{string} seq: The sequence strand.
{string} identifier Optional: Sequence identifier.

show()

Shows the whole component.

showFormatSelector()

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

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

unHighlight(id)

Clear a highlighted region using.

Parameters:
{int} id: The id of the highlight on the internal array. This value is returned by method highlight.

Deprecated:
use removeHighlight instead.

unHighlightAll()

Clear the highlights of whole sequence.

Deprecated:
use removeAllHighlights instead.

Event Detail

onAnnotationClicked(actionPerformed)

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

Parameters:
{function} actionPerformed: An function which receives an Biojs.Event object as argument.

Event object data:
{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.

onSelectionChange(actionPerformed)

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

Parameters:
{function} actionPerformed: An function which receives an Biojs.Event object as argument.

Event object data:
{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.

onSelectionChanged(actionPerformed)

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

Parameters:
{function} actionPerformed: An function which receives an Biojs.Event object as argument.

Event object data:
{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.

Classes

Class Biojs.Sequence