biojs-vis-sequence

v0.1.9

Published

2 years ago

Display a protein/nucleotide sequence

Downloads

0High
0Medium
0Low

greenify

ljgarcia

biojs sequence galaxy-vis

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

The Sequence Component

Instantiation

Options

Required Parameters

Optional Parameters

Methods

Events