Biojs.DasProteinFeatureViewer 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 uses a DASProtein web service that builds the JSON data object used by FatureViewer component.
Version
1.0.0.
To get the above Biojs.DasProteinFeatureViewer to work on your page, you need to do the following:
- Include the file Biojs.DasProteinFeatureViewer.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.DasProteinFeatureViewer into.
window.onload = function() { var myPainter = new Biojs.DasProteinFeatureViewer({ target: "YourOwnDivId", segment: "a4_human" }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
segment | {string}
Protein identifier or protein accession
-
featureTypes | {string}
In case of more than one source, it is possible to specify only one of them to retrieve a particular feature type. For instance "feature.DOMAIN=http://www.ebi.ac.uk/das-srv/interpro/das/InterPro-matches-overview", for more types just add something like "&feature.XXX=URL" Feature type should be capitalized and can be any of these: DOMAIN, CA_BIND, DNA_BIND, NP_BIND, INTRAMEM, TOPO_DOM, TRANSMEM, ZN_FING, PEPTIDE, PROPEP, SIGNAL, TRANSIT, ACT_SITE, METAL, CARBOHYD, LIPID, MOD_RES, COILED, COMPBIAS, CONSERVED_MOTIF, REGION, REPEAT, CHAIN, INIT_MET, BINDING, SITE, NON_STD, DISULFID, CROSSLINK, VAR_SEQ, VARIANT, MUTAGEN, UNSURE, CONFLICT, NON_CONS, NON_TER, HELIX, TURN, STRAND
-
featureNames | {string}
Feature names are displayed as part of the legend. In case you want to modify the text associated to a feature type, you can use this option. For instance name.DOMAIN=Family domains, for more names just add something like "&name.XXX=any text" Feature type should be capitalized and can be any of these: DOMAIN, CA_BIND, DNA_BIND, NP_BIND, INTRAMEM, TOPO_DOM, TRANSMEM, ZN_FING, PEPTIDE, PROPEP, SIGNAL, TRANSIT, ACT_SITE, METAL, CARBOHYD, LIPID, MOD_RES, COILED, COMPBIAS, CONSERVED_MOTIF, REGION, REPEAT, CHAIN, INIT_MET, BINDING, SITE, NON_STD, DISULFID, CROSSLINK, VAR_SEQ, VARIANT, MUTAGEN, UNSURE, CONFLICT, NON_CONS, NON_TER, HELIX, TURN, STRAND
-
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 accession
Detail 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 style
Detail 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 -
dasSources | {string}
DAS protein sources used to retrieved the features, if another one is needed, just add something like ",URL"
Default: "http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot" -
imageWidth | {int}
Image width
Default: 700 -
imageStyle | {string}
Image style, a value from {nonOverlapping, centered, rows}
Default: "nonOverlapping" -
hgrid | {boolean}
Should horizontal lines be shown?
Default: false -
vgrid | {boolean}
Should vertical lines be shown?
Default: false -
allFeatures | {boolean}
Should all feature types be displayed? or only those defined by default? Default feature types: DOMAIN, CA_BIND, DNA_BIND, NP_BIND, INTRAMEM, TOPO_DOM, TRANSMEM, ZN_FING, PEPTIDE, PROPEP, SIGNAL, TRANSIT, ACT_SITE, METAL, CARBOHYD, LIPID, MOD_RES Other features that will be displayed if allFeatures is true: COILED, COMPBIAS, CONSERVED_MOTIF, REGION, REPEAT, CHAIN, INIT_MET, BINDING, SITE, NON_STD, DISULFID, CROSSLINK, VAR_SEQ, VARIANT, MUTAGEN, UNSURE, CONFLICT, NON_CONS, NON_TER, HELIX, TURN, STRAND
Default: true -
allRectangles | {boolean}
Should all features, including those involving just one amino acid be displayed as rectangles? If not, some predefined features will be use for ACT_SITE, METAL, CARBOHYD, LIPID, MOD_RES
Default: false -
allSameSize | {boolean}
If "centered" is the image style option, should all rectangles have the same size?
Default: false -
proxyUrl | {string}
Server side proxy server.
Default: "../biojs/dependencies/proxy/proxy.php" -
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
applyStyle
Applies a style, either "centered", "nonOverlapping", or "rows".
Parameters:
-
show
Example :
myPainter.applyStyle("centered");
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 :
myPainter.exportFeaturesToImage();
showGeneralLegend
Opens a new window/tab in the browser with the graphical representation for all feature types.
Example :
myPainter.showGeneralLegend();
showHideHorizontalGrid
Shows/hide the horizontal guide lines.
Parameters:
-
show
Example :
myPainter.showHideHorizontalGrid(true);
showHideVerticalGrid
Shows/hide the horizontal guide lines.
Parameters:
-
show
Example :
myPainter.showHideVerticalGrid(true);
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 } );