Class Biojs.FeatureViewer

Version 1.1.0.

Extends Biojs.

Defined in: Biojs.FeatureViewer.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Biojs.FeatureViewer(options) This component takes a JSON data object and paints it as a Raphael object.

Field Summary
Field Attributes	Field Name and Description
<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 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.getHolder() Private: Finds the first child element within the target div; this element corresponds to the Raphaël canvas holder.
<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, 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, 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; 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.getHolder()

Private: Finds the first child element within the target div; this element corresponds to the Raphaël canvas holder.

<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.

Classes

Class Biojs.FeatureViewer