biojs-vis-sequence v0.1.9
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. -- regionsi.start is the starting character for the i-th interval. -- regionsi.end is the ending character for the i-th interval. -- regionsi.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 );
}
);
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago