Class Index | File Index

Classes


Class Biojs.SimpleFeatureViewer


Version 1.0.0.

Extends Biojs.FeatureViewer.

Defined in: Biojs.SimpleFeatureViewer.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
This component generates the JSON structure used by the FeatureViewer.
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: "", showSlider: true, showPrintButton: true, showFeatureTooltipOnMouseOver: true, highlightFeatureOnMouseOver: true, selectFeatureOnMouseClick: true, selectionColor: "#ff8c00" imageWidth: 700, sequenceId: "none" sequenceLength: 0 features: {}
Method Summary
Method Attributes Method Name and Description
<static>  
Biojs.SimpleFeatureViewer.constructor(options)
<static>  
Biojs.SimpleFeatureViewer.exportFeaturesToImage()
Opens a new window/tab in the browser with the graphical representation as a plain image.
Methods borrowed from class Biojs:
addListener, extend, getId, listen, raiseEvent, removeListener, setEventHandlers, setOptions
Events borrowed from class Biojs.FeatureViewer:
onFeatureClick, onFeatureOff, onFeatureOn, onFeatureSelected, onFeatureUnselected
Class Detail
Biojs.SimpleFeatureViewer(options)
This component generates the JSON structure used by the FeatureViewer. It is a simplified version as it only includes a non-overlapping view. Regions are represented as rectangles while one-base/aa are represented as lines. Some few shapes are also supported for one-base/aa features, particularly{"diamond", "triangle", "hexagon", "wave", "circle"}. In proteins, we recommend "diamond" for active sites, "triangle" for PTMs, "hexagon" for glycosylation, "wave" for lipids, and "circle" for metals. Any other shape will be rendered as a rectangle. Bridges can be specified with the type "bridge". The legend is generated based on the first feature of each "typeLabel"; thus, if features with the same "typeLabel" have different colours, only the first one will be used in the legend.
Author: Leyla Jael Garcia Castro.
var myFT = [
        {
            featureId:"UNIPROTKB_Q8LAX3_PROPEP_1_73",
            featureStart:1,featureEnd:73,
            typeLabel:"Propeptide",
            featureLabel:"Propeptide",
			   typeCategory:"Molecule processing",typeCode:"SO:0001062",
            evidenceText:"UniProt",evidenceCode:"none",
            color: "red"
         },
        {
	           featureId:"UNIPROTKB_Q8LAX3_PEPTIDE_54_96",
            featureStart:54,featureEnd:96,
            typeLabel:"Peptide",
            featureLabel:"Elicitor peptide 3",
            typeCategory:"Molecule processing",typeCode:"SO:0001064",
            evidenceText:"UniProt",evidenceCode:"no ECO",
            color: "blue"
        },
        {
	           featureId:"UNIPROTKB_Q8LAX3_PEPTIDE_74_96",
            featureStart:74,featureEnd:96,
            typeLabel:"Active Site",
            featureLabel:"Elicitor peptide 3",
            typeCategory:"Molecule processing",typeCode:"SO:0001064",
            evidenceText:"UniProt",evidenceCode:"no ECO",
            type: "diamond"
        },
        {
	           featureId:"UNIPROTKB_Q8LAX3_DISULFID_75_96",
            featureStart:75,featureEnd:96,
            typeLabel:"Active Site",
            featureLabel:"Elicitor peptide 3",
            typeCategory:"Molecule processing",typeCode:"SO:0001064",
            evidenceText:"UniProt",evidenceCode:"no ECO",
            color: "#33FF66",
            type: "bridge"
        }
    ];
var myPainter = new Biojs.SimpleFeatureViewer({
   target: "YourOwnDivId",
   sequenceId: "a4_human",
   sequenceLength: 770,
   features: myFT
});
Parameters:
{Object} options
An object with the options for SimpleFeatureViewer component.
Options detailed:
{string} target
Identifier of the DIV tag where the component should be displayed.
{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?
{String} [selectionColor=#ff8c00]
Color in hexa format so the features on mouse-over and click will change to it. Make sure you do not use that color for any feature.
{string} sequenceId
Sequence identifier
{string} sequenceLength
Sequence length
{Array} features
A JSON array containing the features to be displayed. type element for a feature is optional and can be either of {"rect", "bridge", "diamond", "triangle", "hexagon", "wave", "circle"} If you want bridges or one-single-position features to be rendered as rectangles, do not specify any type for the feature In proteins, we recommend "diamond" for active sites, "triangle" for PTMs, "hexagon" for glycosylation, "wave" for lipids, and "circle" for metals. Any other shape will be rendered as a rectangle Colours can be specified in hexa, string, or rgb; if no colour is specified, black will be used. features = [ { featureId:"UNIPROTKB_Q8LAX3_PROPEP_1_73", featureStart:1,featureEnd:73, typeLabel:"Propeptide", featureLabel:"Propeptide", typeCategory:"Molecule processing",typeCode:"SO:0001062", evidenceText:"UniProt",evidenceCode:"none", color: "red" }, { featureId:"UNIPROTKB_Q8LAX3_PEPTIDE_54_96", featureStart:54,featureEnd:96, typeLabel:"Peptide", featureLabel:"Elicitor peptide 3", typeCategory:"Molecule processing",typeCode:"SO:0001064", evidenceText:"UniProt",evidenceCode:"no ECO", color: "blue" }, { featureId:"UNIPROTKB_Q8LAX3_PEPTIDE_74_96", featureStart:74,featureEnd:96, typeLabel:"Active Site", featureLabel:"Elicitor peptide 3", typeCategory:"Molecule processing",typeCode:"SO:0001064", evidenceText:"UniProt",evidenceCode:"no ECO", type: "diamond" }, { featureId:"UNIPROTKB_Q8LAX3_DISULFID_75_96", featureStart:75,featureEnd:96, typeLabel:"Active Site", featureLabel:"Elicitor peptide 3", typeCategory:"Molecule processing",typeCode:"SO:0001064", evidenceText:"UniProt",evidenceCode:"no ECO", color: "#33FF66", type: "bridge" } ];
{int} [imageWidth=700]
Image width
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: "", showSlider: true, showPrintButton: true, showFeatureTooltipOnMouseOver: true, highlightFeatureOnMouseOver: true, selectFeatureOnMouseClick: true, selectionColor: "#ff8c00" imageWidth: 700, sequenceId: "none" sequenceLength: 0 features: {}
Method Detail
<static> Biojs.SimpleFeatureViewer.constructor(options)
Parameters:
options

<static> Biojs.SimpleFeatureViewer.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
myPainter.exportFeaturesToImage();

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