Biojs.Chromosome showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
This component allow to visualize a chromosome and its bands.
The bands can be recovered from a DAS source or directly from a javascript model.
Version
1.0.1.
To get the above Biojs.Chromosome to work on your page, you need to do the following:
- Include the file Biojs.Chromosome.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.7.2.min.js">
CSS stylesheet(s)
<link rel="stylesheet" href="../biojs/css/biojs.chromosome.css" />
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.Chromosome into.
window.onload = function() { var instance= new Biojs.Chromosome({ target: "YourOwnDivId", dasSource: "http://www.ensembl.org/das/Homo_sapiens.NCBI36.karyotype/", dasSegment: "8" }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
dasSource | {string}
URL of the DAS source to obtain the band's information. For example Ensembl provides the human chromosome information as a DAS source in the URL http://www.ensembl.org/das/Homo_sapiens.NCBI36.karyotype/
-
dasSegment | {string}
DAS segment to query, in case of chromosomes is the chromosome id (eg. 8). Optionally DAS sources can be queried for a spwcific region of the chromosome(eg. 8:43100000,49100001)
-
model | {Object}
Alternatively to DAS, This component can receive directly a javascript object containing the relevant information. Here is an example of the object structure using JSON notation: { "id": "8", "start": 1, "stop": 199999, "bands": [ { "label": "p11", "type": "acen", "start": 1, "stop": "100000" }, { "label": "q11", "type": "gpos75", "start": 100001, "stop": "199999" } ] }
Optional Parameters
-
includeSelector | {boolean}
Include an area selector that interacts with the coordinate position of the chromosome. default true.
moveSelectorToCoordinates
Move the Selector to a specific place in the chromosome
Parameters:
-
{integer} from
initial chromosome coordinate to locate the selector -
{integer} to
final chromosome coordinate to locate the selector
Example :
instance.moveSelectorToCoordinates(10000000,20000000);
onBandSelection
Parameters:
-
{function} actionPerformed
A 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}
chromosome_id
Id of the chromosome that the selected band belongs. -
{string}
band_id
Id of the band that has been selected. -
{integer}
band_start
Coordinate of the first nucleotide of the selected band -
{integer}
band_stop
Coordinate of the last nucleotide of the selected band -
{string}
band_type
type of the band selected (eg. acen, gpos50, gneg).
Example :
instance.onBandSelection(function( objEvent ) {
alert("The band " + objEvent.band_id + " of the chromosome " + objEvent.chromosome_id + " has been selected\n[" + objEvent.band_start + "," + objEvent.band_stop + "]");
});
onDASLoadFail
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument. Triggered when the model couldn't be loaded
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{string}
dasSource
URL of the DAS source queried -
{string}
dasSegment
URL of the DAS source queried
Example :
instance.onDASLoadFail(function( objEvent ) {
alert("The DAS source "+objEvent.dasSource+" with information of the segment "+objEvent.dasSegment+" couldn't be loaded");
});
onModelLoaded
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument. Triggered when he model has been loaded
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{Object}
model
The model after been displayed
Example :
instance.onModelLoaded(function( objEvent ) {
alert("The model for the chromosome "+objEvent.model.id+" has been loaded");
});
onSelectorChanged
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument. Is triggered when the the coordinates of the selector have been changed.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{string}
chromosome_id
Id of the chromosome that the selected band belongs. -
{integer}
selector_start
Coordinate of the left side of the selector -
{integer}
selector_stop
Coordinate of the right side of the selector
Example :
instance.onSelectorChanged(function( objEvent ) {
alert("The selector has move to the region \n[" + objEvent.selector_start + "," + objEvent.selector_stop + "]");
});