Biojs.FeatureViewer 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 takes a JSON data object and paints it as a Raphael object.
The expected JSON format is specified under the option 'json' of the FeatureViewer options.
Please remember to use jQuery in compatibility mode, particularly a good idea if you use other libraries.
If you are using JQuery 1.9.x please make sure you also include the jQuery Migrate plugin
as tooltips are not compatible with 1.9.x versions, see http://jquery.com/upgrade-guide/1.9/
Version
1.1.0.
To get the above Biojs.FeatureViewer to work on your page, you need to do the following:
- Include the file Biojs.FeatureViewer.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/dependencies/jquery/jquery-ui-1.8.2.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.FeatureViewer into.
window.onload = function() { var json = { "featuresArray":[ { "nonOverlappingStyle":{"heightOrRadius":10,"y":56},"type":"rect","featureEnd":73,"fillOpacity":0.5 ,"evidenceText":"UniProt","stroke":"#9B7057","height":10,"path":"","typeLabel":"Propeptide" ,"featureLabel":"Propeptide","featureStart":1,"strokeWidth":1,"text":"" ,"centeredStyle":{"heightOrRadius":44,"y":73},"fill":"#9B7057","width":495 ,"typeCategory":"Molecule processing","typeCode":"SO:0001062","cy":56,"cx":27,"evidenceCode":"" ,"r":10,"featureId":"UNIPROTKB_Q8LAX3_PROPEP_1_73","rowsStyle":{"heightOrRadius":10,"y":169} ,"featureTypeLabel":"propeptide","y":56,"x":27 } ,{ "nonOverlappingStyle":{"heightOrRadius":10,"y":56},"type":"rect","featureEnd":96,"fillOpacity":0.5 ,"evidenceText":"UniProt","stroke":"#7DBAA4","height":10,"path":"","typeLabel":"Peptide" ,"featureLabel":"Elicitor peptide 3","featureStart":74,"strokeWidth":1,"text":"" ,"centeredStyle":{"heightOrRadius":40,"y":75},"fill":"#7DBAA4","width":151 ,"typeCategory":"Molecule processing","typeCode":"SO:0001064","cy":56,"cx":529,"evidenceCode":"" ,"r":10,"featureId":"UNIPROTKB_Q8LAX3_PEPTIDE_74_96","rowsStyle":{"heightOrRadius":10,"y":157} ,"featureTypeLabel":"active_peptide","y":56,"x":529 } ] ,"segment":"Q8LAx3" ,"legend":{ "segment":{"yPosCentered":190,"text":"Q8LAX3","yPos":106,"xPos":15,"yPosNonOverlapping":106,"yPosRows":290} ,"key":[ { "label":{ "total":"1","yPosCentered":210,"text":"Peptide","yPos":126,"xPos":50 ,"yPosNonOverlapping":126,"yPosRows":310 } ,"shape":{ "centeredStyle":{"heightOrRadius":5,"y":208},"text":"" ,"nonOverlappingStyle":{"heightOrRadius":5,"y":121},"width":30,"fill":"#7DBAA4" ,"cy":121,"cx":15,"type":"rect","fillOpacity":0.5,"stroke":"#7DBAA4","height":5,"r":10 ,"path":"","rowsStyle":{"heightOrRadius":5,"y":305},"typeLabel":"Peptide","y":121 ,"strokeWidth":1,"x":15 } } ,{ "label":{ "total":"1","yPosCentered":210,"text":"Propeptide","yPos":126,"xPos":205 ,"yPosNonOverlapping":126,"yPosRows":310 } ,"shape":{ "centeredStyle":{"heightOrRadius":5,"y":208},"text":"" ,"nonOverlappingStyle":{"heightOrRadius":5,"y":121},"width":30,"fill":"#9B7057" ,"cy":121,"cx":170,"type":"rect","fillOpacity":0.5,"stroke":"#9B7057","height":5,"r":10 ,"path":"","rowsStyle":{"heightOrRadius":5,"y":305},"typeLabel":"Propeptide","y":121 ,"strokeWidth":1,"x":170 } } ] } ,"configuration":{ "requestedStop":96,"horizontalGridNumLines":2,"sequenceLineYCentered":95,"requestedStart":1 ,"gridLineHeight":12,"rightMargin":20,"belowRuler":30,"sequenceLength":96 ,"horizontalGridNumLinesNonOverlapping":2,"horizontalGridNumLinesCentered":6 ,"verticalGridLineLengthRows":284,"unitSize":6.875,"sizeYNonOverlapping":76,"style":"nonOverlapping" ,"sequenceLineYRows":155,"sequenceLineY":54,"verticalGrid":false,"rulerY":20 ,"dasSources":"http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot","horizontalGrid":false ,"pixelsDivision":50,"sizeY":76,"sizeX":700 ,"dasReference":"http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot","sizeYRows":260,"aboveRuler":10 ,"rulerLength":660,"verticalGridLineLengthNonOverlapping":66,"sizeYKey":210,"sizeYCentered":160 ,"sequenceLineYNonOverlapping":54,"verticalGridLineLength":66,"horizontalGridNumLinesRows":8 ,"leftMargin":20,"nonOverlapping":true,"verticalGridLineLengthCentered":172 } }; var myPainter = new Biojs.FeatureViewer({ target: "YourOwnDivId", json: json }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
json | {string}
The JSON object describing the configuration, features, and legend to be displayed. It must have the following members:
- segment | {string}
Segment, accession or identification.
- configuration | {object}
General configuration used mainly to paint the ruler, grid lines, and slider. Elements such as XXXNonOverlapping, XXXCentered, and XXXRows are necessary only it you want to enable changing styles without retrieving the data from the server again.
aboveRuler: <int>, //pixels above the ruler belowRuler: <int>, //pixels below the ruler dasReference: <String>, //das reference URL dasSources: <String>, //das annotations URLs separated by commas gridLineHeight: <int>, //row height (used for rows and nonOverlapping styles) horizontalGrid: <boolean>, //should horizontal grid lines be displayed? horizontalGridNumLines: <int>, //number of horizontal grid lines leftMargin: <int>, //pixels for the holder's left margin nonOverlapping: <boolean>, //is nonOverlapping style requested? pixelsDivision: <int>, //number of pixels between every main division in the ruler requestedStart: <int>, //requested start position requestedStop: <int>, //requested stop position rightMargin: <int>, //pixels for the holder's right margin rulerLength: <int>, //ruler length in pixels rulerY: <int>, //ruler y position in pixels sequenceLength: <int>, //sequence length (number of amino acids) sequenceLineY: <int>, //sequence line y position (blue line representing the sequence) sizeX: <int>, //holder's width in pixels sizeY: <int>, //holder's height in pixels sizeYKey: <int>, //key holder's height in pixels start: <int>, //first amino acid to show stop: <int>, //last amino acid to show style: <String>, // style in use from centered, rows, or nonOverlapping unitSize: <int>, //number of pixels used to represent one amino acid verticalGrid: <boolean> //are vertical grid lines displayed? verticalGridLineLength: <int> //vertical grid lines' length horizontalGridNumLinesCentered: <int>, //number of horizontal grid line for the centered style horizontalGridNumLinesNonOverlapping: <int>, //number of horizontal grid line for the nonOverlapping style horizontalGridNumLinesRows: <int>, //number of horizontal grid line for the rows style sequenceLineYCentered: <int>, //sequence line y position for centered style (blue line representing the sequence) sequenceLineYNonOverlapping: <int>, //sequence line y position for nonOverlapping style (blue line representing the sequence) sequenceLineYRows: <int>, //sequence line y position for rows style (blue line representing the sequence) sizeYCentered: <int>, //holder's height in pixels for the centered style sizeYNonOverlapping: <int>, //holder's height in pixels for the nonOverlapping style sizeYRows: <int>, //holder's height in pixels for the rows style verticalGridLineLengthCentered: <int> //vertical grid lines' length for the centered style verticalGridLineLengthNonOverlapping: <int> //vertical grid lines' length for the nonOverlapping style verticalGridLineLengthRows: <int> //vertical grid lines' length for the rows style - featuresArray | {Array}
Each element corresponds to an annotation, it includes elements representing the annotation itself as well as elements representing the SVG properties, i.e. those related to the shape. Elements such as XXXNonOverlapping, XXXCentered, and XXXRows are necessary only it you want to enable changing styles without retrieving the data from the server again
cx: <int> //shape x position (for all shapes but rectangles) cy: <int> //shape y position (for all shapes but rectangles) evidenceCode: <String>, //annotation evidence code, e.g. "ECO:0000001" evidenceText: <String>, //annotation evidence text, e.g. "inferred by curator" featureEnd: <int> //annotation stop featureId: <String> //annotation id, e.g. "UNIPROTKB_P05067_SIGNAL_1_17" featureLabel: <String> //annotation label, e.g. "Signal" featureStart: <int> //annotation start featureTypeLabel: <String> //annotation type label, e.g. "signal_peptide" fill: <hexa color> //e.g. "#AA8CF0" fillOpacity: <float> //transparency, e.g. 0.5 height: <int> //shape's height in pixels (for rectangles) path: <String> //shape path (empty if it is not a path) r: <radius> //shape's radius in pixels (all but rectangles) stroke: <hexa color> //e.g. #AA8CF0" strokeWidth: <int> //stroke width text: <String> //for shapes corresponding to text type: <String> //shape type (one of: rect, triangle, circle, diamond, wave, hexagon) typeCategory: <String>, //type category, e.g. domain typeCode: <String> //annotation controlled vocabulary id, e.g. "SO:0000418" typeLabel: <String> //annotation label to be displayed in the tool tip width: <int> //shape's width in pixels x: <int> //shape x position in pixels y: <int> //shape y position in pixels centeredStyle: <Object>, //{"heightOrRadius":<int>,"y":<int>} height and y position for the centered style nonOverlappingStyle: <Object>, //{"heightOrRadius":<int>,"y":<int>} height and y position for the nonOverlapping style rowsStyle: <Object>, //{"heightOrRadius":<int>,"y":<int>} height and y position for the rows style - legend | {object}
Information to be displayed in the keyElements such as XXXNonOverlapping, XXXCentered, and XXXRows are necessary only it you want to enable changing styles without retrieving the data from the server again.
key: <Array{label object, shape object}> //annotation types with the number of features showed in the segment segment: <Object> //requested segment without the limits, just the identifier or accessionDetail for elements in the key array
label: <Object>, // text: <String> //annotation type name total: <int> //total annotations displayed for that type xPos: <int> //x position in pixels yPos: <int> //y position in pixels yPosCentered: <int> //y position in pixels for the centered style yPosNonOverlapping: <int> //y position in pixels for the nonOverlapping style yPosRows: <int> //y position in pixels for the rows style shape: <Object> //corresponding shape cx: <int> //shape x position (for all shapes but rectangles) cy: <int> //shape y position (for all shapes but rectangles) fill: <hexa color> //e.g. "#AA8CF0" fillOpacity: <float> //transparency, e.g. 0.5 height: <int> //shape's height in pixels (for rectangles) path: <String> //shape path (empty if it is not a path) r: <radius> //shape's radius height in pixels (all but rectangles) stroke: <hexa color> //e.g. #AA8CF0" strokeWidth: <int> //stroke width text: <String> //for shapes corresponding to text type: <String> //shape type (one of: rect, triangle, circle, diamond, wave, hexagon) typeLabel: <String> //annotation type name width: <int> //shape's width in pixels x: <int> //shape x position in pixels (it is probably a good idea to keep both cx and x, even for non-rectangles) y: <int> //shape y position in pixels (it is probably a good idea to keep both cy and y, even for non-rectangles) centeredStyle: <Object>, //{"heightOrRadius":<int>,"y":<int>} height and y position for the centered style nonOverlappingStyle: <Object>, //{"heightOrRadius":<int>,"y":<int>} height and y position for the nonOverlapping style rowsStyle: <Object>, //{"heightOrRadius":<int>,"y":<int>} height and y position for the rows styleDetail for the segment element
text: <String>, //Accession or identifier, e.g. A4_HUMAN xPos: <int>, //x position in pixels yPos: <int>, //y position in pixels yPosCentered:<int>, //y position in pixels for the centered style yPosNonOverlapping:<int>, //y position in pixels for the nonOverlapping style yPosRows:<int>, //y position in pixels for the rows style
- segment | {string}
Optional Parameters
-
showSlider | {boolean}
Should the slider for zooming be displayed?
Default: true -
showPrintButton | {boolean}
Should the button for printing/exporting to image be displayed?
Default: true -
showFeatureTooltipOnMouseOver | {boolean}
Should the tooltip for features be displayed?
Default: true -
highlightFeatureOnMouseOver | {boolean}
Should the features be highlighted when mouse over?
Default: true -
selectFeatureOnMouseClick | {boolean}
Should the features remain highlighted, i.e. being selected, after a mouse click, and deselected after a second click or whenever other feature is selected?
Default: true -
dragSites | {boolean}
Should the sites be draggable?
Default: true -
selectionColor | {String}
Color in hexa format so the features on mouse-over and click will change to it. Make sure it does not exist at http://wwwdev.ebi.ac.uk/das-srv/uniprot/das/uniprot/stylesheet as those are the reference colours for protein features.
Default: #ff8c00
customize
Manual customization of vertical and horizontal grid lines as well as style. Depending on the selected values for the style radio buttons and the vertical and horizontal check buttons, this method changes the current style and adds/removes the gridlines.
Parameters:
-
{string} rdbStyle
Radio buttons grouping styles, possible values: nonOverlapping, rows, centered. -
{boolean} chkHorizontal
Check button for horizontal grid lines. -
{boolean} chkVertical
Check button for vertical grid lines.
Example :
myPainter.customize("centered",true,true);
exportFeaturesToImage
Opens a new window/tab in the browser with the graphical representation as a plain image. Note: For IE it does not reflect the drags/drops on sites
Example :
//It only works in Firefox or Chrome, IE may require a web service to handle this (which is not supported in this component). myPainter.exportFeaturesToImage();
paintFeatures
Paint the features according to the values specified in the json object defined when creating the object. This method initializes the holder, paints the slider and print button depending on the options, and paints the features and legend.
Parameters:
-
{Object} json
Optional
The json object describing the configuration, features, and legend to be displayed.
Example :
myPainter.paintFeatures();
setSelectionColor
Parameters:
-
{string} newSelectionColor
New selection color
zoom
Applies a zoom in or zoom out; it should not be used if the slider is available.
Parameters:
-
init
-
end
Example :
myPainter.zoom(2,10);
onFeatureClick
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{string}
type
The name of the event. -
{Object}
featureInfo
A json object with the information for the selected feature, including id.
Example :
//It is not recommended to use this event to highlight and sustain that highlight after a click on a
//feature, instead set to ture the options selectFeatureOnMouseClick.
myPainter.onFeatureClick(
function( obj ) {
var tooltip = obj.featureLabel +
" (" + obj.featureStart + ", " + obj.featureEnd + "; length " + (obj.featureEnd-obj.featureStart+1) + ")" +
"
Type: " + obj.featureTypeLabel + " - " + obj.typeCode + " - " + obj.typeCategory +
"
Evidence: " + obj.evidenceText + " - " + obj.evidenceCode;
alert("Clicked: " + tooltip );
Biojs.console.log(obj.shape); //rapha�l object
}
);
onFeatureOff
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{string}
type
The name of the event. -
{Object}
featureInfo
A json object with the information for the selected feature, including id.
Example :
myPainter.onFeatureOff(
function( obj ) {
var tooltip = obj.featureLabel +
" (" + obj.featureStart + ", " + obj.featureEnd + "; length " + (obj.featureEnd-obj.featureStart+1) + ")" +
"
Type: " + obj.featureTypeLabel + " - " + obj.typeCode + " - " + obj.typeCategory +
"
Evidence: " + obj.evidenceText + " - " + obj.evidenceCode;
alert("Off feature: " + tooltip );
Biojs.console.log(obj.shape); //rapha�l object
}
);
onFeatureOn
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{string}
type
The name of the event. -
{Object}
featureInfo
A json object with the information for the selected feature, including id.
Example :
// It is not recommended to use this event to display a tooltip or highlight the features on mouse over,
// instead set to true the options showFeatureTooltipOnMouseOver and highlightFeatureOnMouseOver
myPainter.onFeatureOn(
function( obj ) {
var tooltip = obj.featureLabel +
" (" + obj.featureStart + ", " + obj.featureEnd + "; length " + (obj.featureEnd-obj.featureStart+1) + ")" +
"
Type: " + obj.featureTypeLabel + " - " + obj.typeCode + " - " + obj.typeCategory +
"
Evidence: " + obj.evidenceText + " - " + obj.evidenceCode;
alert("On feature: " + tooltip );
Biojs.console.log(obj.shape); //rapha�l object
}
);
onFeatureSelected
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{string}
type
The name of the event. -
{Object}
featureInfo
A json object with the information for the selected feature, including id.
Example :
//Will only be raised if selectFeatureOnMouseClick is true
myPainter.onFeatureSelected(
function( obj ) {
var tooltip = obj.featureLabel +
" (" + obj.featureStart + ", " + obj.featureEnd + "; length " + (obj.featureEnd-obj.featureStart+1) + ")" +
"
Type: " + obj.featureTypeLabel + " - " + obj.typeCode + " - " + obj.typeCategory +
"
Evidence: " + obj.evidenceText + " - " + obj.evidenceCode;
alert("Selected feature: " + tooltip );
Biojs.console.log(obj.shape); //rapha�l object
}
);
onFeatureUnselected
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which triggered the event. -
{string}
type
The name of the event. -
{Object}
featureInfo
A json object with the information for the selected feature, including id.
Example :
//Will only be raised if selectFeatureOnMouseClick is true
myPainter.onFeatureUnselected(
function( obj ) {
var tooltip = obj.featureLabel +
" (" + obj.featureStart + ", " + obj.featureEnd + "; length " + (obj.featureEnd-obj.featureStart+1) + ")" +
"
Type: " + obj.featureTypeLabel + " - " + obj.typeCode + " - " + obj.typeCategory +
"
Evidence: " + obj.evidenceText + " - " + obj.evidenceCode;
alert("Unselected feature: " + tooltip );
Biojs.console.log(obj.shape); //rapha�l object
}
);