Class Index | File Index

Classes


Class Biojs.FeatureViewer


Version 1.1.0.

Extends Biojs.

Defined in: Biojs.FeatureViewer.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
This component takes a JSON data object and paints it as a Raphael object.
Field Summary
Field Attributes Field Name and Description
<inner>  
Default values for the options
<inner>  
Array containing the supported event names
<inner>  
opt
Default values for the options: target: "", json: {}, showSlider: true, showPrintButton: true, showFeatureTooltipOnMouseOver: true, highlightFeatureOnMouseOver: true, selectFeatureOnMouseClick: true, dragSites: true //beware that dragging implies a click on so the click event will be raised! selectionColor: "#ff8c00"
Method Summary
Method Attributes Method Name and Description
<static>  
Biojs.FeatureViewer.constructor(options)
<static>  
Biojs.FeatureViewer.customize(rdbStyle, chkHorizontal, chkVertical)
Manual customization of vertical and horizontal grid lines as well as style.
<static>  
Biojs.FeatureViewer.exportFeaturesToImage()
Opens a new window/tab in the browser with the graphical representation as a plain image.
<static>  
Biojs.FeatureViewer.paintFeatures(json)
Paint the features according to the values specified in the json object defined when creating the object.
<static>  
Biojs.FeatureViewer.setSelectionColor(newSelectionColor)
<static>  
Biojs.FeatureViewer.zoom(init, end)
Applies a zoom in or zoom out; it should not be used if the slider is available.
Methods borrowed from class Biojs:
addListener, extend, getId, listen, raiseEvent, removeListener, setEventHandlers, setOptions
Event Summary
Event Attributes Event Name and Description
 
onFeatureClick(actionPerformed)
 
onFeatureOff(actionPerformed)
 
onFeatureOn(actionPerformed)
 
onFeatureSelected(actionPerformed)
 
onFeatureUnselected(actionPerformed)
Class Detail
Biojs.FeatureViewer(options)
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/
Author: Leyla Jael Garcia Castro, Guy Yachdav, Pablo Moreno.
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
});
Parameters:
{Object} options
An object with the options for FeatureViewer component.
Options detailed:
{string} target
Identifier of the DIV tag where the component should be displayed.
{string} json
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
                
{boolean} [showSlider=true]
Should the slider for zooming be displayed?
{boolean} [showPrintButton=true]
Should the button for printing/exporting to image be displayed?
{boolean} [showFeatureTooltipOnMouseOver=true]
Should the tooltip for features be displayed?
{boolean} [highlightFeatureOnMouseOver=true]
Should the features be highlighted when mouse over?
{boolean} [selectFeatureOnMouseClick=true]
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?
{boolean} [dragSites=true]
Should the sites be draggable?
{String} [selectionColor=#ff8c00]
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.
Requires:
jQuery Core 1.7.2
jQuery UI 1.8.2
jQuery UI CSS 1.8.2
jQuery.tooltip
jQuery.tooltip CSS
Raphael 2.1.2
canvg
rgbcolor
Image ui-bg_flat_0_aaaaaa_40x100.png (base theme images for jquery-ui-1.8.2)
Image ui-bg_flat_75_ffffff_40x100.png (base theme images for jquery-ui-1.8.2)
Image ui-bg_glass_65_ffffff_1x400.png (base theme images for jquery-ui-1.8.2)
Image ui-bg_glass_75_dadada_1x400.png (base theme images for jquery-ui-1.8.2)
ui-bg_glass_75_e6e6e6_1x400.png (base theme images for jquery-ui-1.8.2)
ui-bg_highlight-soft_75_cccccc_1x100.png (base theme images for jquery-ui-1.8.2)
ui-icons_222222_256x240.png (base theme images for jquery-ui-1.8.2)
ui-icons_454545_256x240.png (base theme images for jquery-ui-1.8.2)
Field Detail
<inner> constructor
Default values for the options

<inner> eventTypes
Array containing the supported event names

<inner> opt
Default values for the options: target: "", json: {}, showSlider: true, showPrintButton: true, showFeatureTooltipOnMouseOver: true, highlightFeatureOnMouseOver: true, selectFeatureOnMouseClick: true, dragSites: true //beware that dragging implies a click on so the click event will be raised! selectionColor: "#ff8c00"
Method Detail
<static> Biojs.FeatureViewer.constructor(options)
Parameters:
options

<static> Biojs.FeatureViewer.customize(rdbStyle, chkHorizontal, chkVertical)
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.
myPainter.customize("centered",true,true);
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.

<static> Biojs.FeatureViewer.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
//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();

<static> Biojs.FeatureViewer.paintFeatures(json)
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.
myPainter.paintFeatures();
Parameters:
{Object} json Optional
The json object describing the configuration, features, and legend to be displayed.

<static> Biojs.FeatureViewer.setSelectionColor(newSelectionColor)
Parameters:
{string} newSelectionColor
New selection color

<static> Biojs.FeatureViewer.zoom(init, end)
Applies a zoom in or zoom out; it should not be used if the slider is available.
myPainter.zoom(2,10);
Parameters:
init
end
Event Detail
onFeatureClick(actionPerformed)
//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 } );
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{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.

onFeatureOff(actionPerformed)
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 } );
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{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.

onFeatureOn(actionPerformed)
// 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 } );
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{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.

onFeatureSelected(actionPerformed)
//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 } );
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{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.

onFeatureUnselected(actionPerformed)
//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 } );
Parameters:
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Event object data:
{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.

Documentation generated by JsDoc Toolkit 2.3.2 on Thu Apr 17 2014 17:42:42 GMT+0100 (BST)