";
- $("#"+self.opt.target).append(innerCode);
-
-
- $("#"+self.opt.target+" .selector .right").draggable({
- axis: "x",
- start :function(event) {
- self.updateScalers();
- $(this).parent().css('border-right-width',"0px");
- },
- stop :function(event) {
- $("#"+self.opt.target+" .selector").width(self._removePx($(this).css('left'))+5);
- $(this).parent().css('border-right-width',"1px");
- self.updateScalers();
- self.raiseEvent('onRegionChanged', {
- region : self.getCoveredArea()
- });
- }
- });
- $("#"+self.opt.target+" .selector .left").draggable({
- axis: "x",
- start :function(event) {
- self.updateScalers();
- $(this).parent().css('border-left-width',"0px");
- },
- stop :function(event) {
- var delta=$(this).position().left+5;
- $("#"+self.opt.target+" .selector").width($("#"+self.opt.target+" .selector").width()-delta);
- $("#"+self.opt.target+" .selector").css('left',($(this).parent().position().left+delta)+"px");
- $(this).parent().css('border-left-width',"1px");
- self.updateScalers();
- self.raiseEvent('onRegionChanged', {
- region : self.getCoveredArea()
- });
- }
- });
- $("#"+self.opt.target+" .selector .bottom").draggable({
- axis: "y",
- start :function(event) {
- self.updateScalers();
- $(this).parent().css('border-bottom-width',"0px");
- },
- stop :function(event) {
- $("#"+self.opt.target+" .selector").height(self._removePx($(this).css('top'))+5);
- $(this).parent().css('border-bottom-width',"1px");
- self.updateScalers();
- self.raiseEvent('onRegionChanged', {
- region : self.getCoveredArea()
- });
- }
- });
- $("#"+self.opt.target+" .selector .top").draggable({
- axis: "y",
- start :function(event) {
- self.updateScalers();
- $(this).parent().css('border-top-width',"0px");
- },
- stop :function(event) {
- var delta=$(this).position().top+5;
- $("#"+self.opt.target+" .selector").height($("#"+self.opt.target+" .selector").height()-delta);
- $("#"+self.opt.target+" .selector").css('top',($(this).parent().position().top+delta)+"px");
- $(this).parent().css('border-top-width',"1px");
- self.updateScalers();
- self.raiseEvent('onRegionChanged', {
- region : self.getCoveredArea()
- });
- }
- });
-
-
- $("#"+self.opt.target).watch("left,top,width,height,display", function() {
- self.updateScalers();
- }, 100, "_containerMove");
-
- self.updateScalers();
- self.setCoveredArea(self.opt.area);
- },
-
- /**
- * Default values for the options
- * @name Biojs.AreaSelector-opt
- */
- opt: {
- target: "YourOwnDivId",
- resize_left: true,
- resize_right: true,
- resize_top: true,
- resize_bottom: true,
- area: [0,0,50,50]
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.AreaSelector-eventTypes
- */
- eventTypes: [
- /**
- * @name Biojs.AreaSelector#onRegionChanged
- * @event
- * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument.
- * It gets activated when the covered area has changed
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {array} region A 4-element array indicating the current position of the selector.
- * The first two elements indicate the X and Y position of the top-left corner,
- * the last 2 elements indicate the bottom-right position.
- * The position are relative to the target element.
- *
- * @example
- * instance.onRegionChanged(function( objEvent ) {
- * alert("The current area is from the point [" + objEvent.region[0] + "," + objEvent.region[1] + "] to the point [" + objEvent.region[2] + "," + objEvent.region[3] + "] ");
- * });
- */
- "onRegionChanged"
- ],
-
- /**
- * get the current value of the area
- *
- * @example
- * var area = instance.getCoveredArea();
- * alert("The current area is from the point [" + area.region[0] + "," + area.region[1] + "] to the point [" + area.region[2] + "," + area.region[3] + "] ");
- *
- */
- getCoveredArea: function(){
- var self=this;
- return [
- $("#"+self.opt.target+" .selector").position().left,
- $("#"+self.opt.target+" .selector").position().top,
- $("#"+self.opt.target+" .selector").position().left + $("#"+self.opt.target+" .selector").width(),
- $("#"+self.opt.target+" .selector").position().top + $("#"+self.opt.target+" .selector").height()
- ];
- },
- /**
- * set the value of the area
- *
- * @param {string} area A 4-element array indicating the position to locate the selector.
- * The first two elements indicate the X and Y position of the top-left corner,
- * the last 2 elements indicate the bottom-right position.
- * The position are relative to the target element.
- *
- * @example
- * instance.setCoveredArea([ 20,20,50,50]);
- *
- */
- setCoveredArea: function(area){
- var self=this;
- $("#"+self.opt.target+" .selector").css('left',area[0]+"px");
- $("#"+self.opt.target+" .selector").css('top',area[1]+"px");
- $("#"+self.opt.target+" .selector").width(area[2]-area[0]);
- $("#"+self.opt.target+" .selector").height(area[3]-area[1]);
- self.updateScalers();
- self.raiseEvent('onRegionChanged', {
- region : self.getCoveredArea()
- });
- },
-
- /**
- * @private
- * Private: update the positions and the limits of the scalers
- */
- updateScalers: function(){
- var self=this;
- $("#"+self.opt.target+" .selector .left").css("left","-5px");
- $("#"+self.opt.target+" .selector .left").css("top",($("#"+self.opt.target+" .selector").height()/2)-5);
- $("#"+self.opt.target+" .selector .right").css("left",$("#"+self.opt.target+" .selector").width()-5);
- $("#"+self.opt.target+" .selector .right").css("top",($("#"+self.opt.target+" .selector").height()/2)-5);
- $("#"+self.opt.target+" .selector .top").css("left",($("#"+self.opt.target+" .selector").width()/2)-5);
- $("#"+self.opt.target+" .selector .top").css("top","-5px");
- $("#"+self.opt.target+" .selector .bottom").css("left",($("#"+self.opt.target+" .selector").width()/2)-5);
- $("#"+self.opt.target+" .selector .bottom").css("top",$("#"+self.opt.target+" .selector").height()-5);
- $("#"+self.opt.target+" .selector .right").draggable("option","containment",[
- $("#"+self.opt.target+" .selector").offset().left-3,
- $("#"+self.opt.target).offset().top,
- $("#"+self.opt.target).offset().left+$("#"+self.opt.target).width()-4,
- $("#"+self.opt.target).offset().top+$("#"+self.opt.target).height()
- ]);
- $("#"+self.opt.target+" .selector .left").draggable("option","containment",[
- $("#"+self.opt.target).offset().left-4,
- $("#"+self.opt.target).offset().top,
- $("#"+self.opt.target+" .selector").offset().left+$("#"+self.opt.target+" .selector").width()-5,
- $("#"+self.opt.target).offset().top+$("#"+self.opt.target).height()
- ]);
- $("#"+self.opt.target+" .selector .bottom").draggable("option","containment",[
- $("#"+self.opt.target).offset().left,
- $("#"+self.opt.target+" .selector").offset().top-3,
- $("#"+self.opt.target).offset().left+$("#"+self.opt.target).width(),
- $("#"+self.opt.target).offset().top+$("#"+self.opt.target).height()-4
- ]);
- $("#"+self.opt.target+" .selector .top").draggable("option","containment",[
- $("#"+self.opt.target).offset().left,
- $("#"+self.opt.target).offset().top-4,
- $("#"+self.opt.target).offset().left+$("#"+self.opt.target).width()-4,
- $("#"+self.opt.target+" .selector").offset().top+$("#"+self.opt.target+" .selector").height()-5
- ]);
- },
- /**
- * @private
- * Private: remove the last two characters of a string and return its integer value
- */
- _removePx: function(str){
- return 1*str.substr(0,str.length-2);
- }
-});
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.AutocompleteOLS.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.AutocompleteOLS.js
deleted file mode 100755
index 84c82769f5..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.AutocompleteOLS.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * This is a component that provides autocomplete functionality for querying the Ontology Lookup Service (OLS) for any ontology or set of ontologies in this service.
- * It is based on the jquery Autocomplete widget developed for ArrayExpress and was developed with support from the BioMedBridges project.
- *
- *
- * @class
- * @extends Biojs
- *
- * @author Dani Welter, Simon Jupp, Nikolay Kolesnikov
- * @version 0.5.0_beta
- * @category 1
- *
- * @requires jQuery Core 1.8.2
- * @dependency
- *
- * @requires jQuery Caret-Range 1.0
- * @dependency
- *
- * @requires jQuery Autocomplete for OLS
- * @dependency
- *
- * @requires AE Common CSS
- * @dependency
- *
- *
- *
- * @param {Object} options An object with the options for the Autocomplete component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} [ontology="EFO"]
- * The ontology to be queried via the component.
- *
- * @example
- * var instance = new Biojs.AutocompleteOLS({
- * target: "YourOwnDivId",
- * ontology: "EFO"
- * });
- *
- */
-Biojs.AutocompleteOLS = Biojs.extend (
- /** @lends Biojs.AutocompleteOLS# */
- {
- constructor: function (options) {
- var self = this;
-
- this._container = jQuery("#" + self.opt.target);
- this._container.append(jQuery(""));
-
- if ($ == undefined) {
- throw "jQuery not loaded";
- }
- $(function() {
-
- var autoCompleteFixSet = function() {
- $(this).attr('autocomplete', 'off');
- };
- var autoCompleteFixUnset = function() {
- $(this).removeAttr('autocomplete');
- };
-
- $("#local-searchbox").autocomplete(
- "http://www.ebi.ac.uk/ontology-lookup/term.view"
- , { matchContains: false
- , selectFirst: false
- , scroll: true
- , max: 50
- , requestTreeUrl: "http://www.ebi.ac.uk/ontology-lookup/json/termchildren"
- , ontologyId: self.opt.ontology
-// change this to "all" to search all ontologies - dont do this for now!
- }
- ).focus(autoCompleteFixSet).blur(autoCompleteFixUnset).removeAttr('autocomplete');
-
-
- });
-
- },
-
-
- /**
- * Default values for the options
- * @name Biojs.AutocompleteOLS-opt
- */
- opt: {
- target: "",
- ontology: "EFO"
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.AutocompleteOLS-opt
- */
- eventTypes: []
-
- }
-
-);
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.ChEBICompound.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.ChEBICompound.js
deleted file mode 100755
index 1e5cfe49e9..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.ChEBICompound.js
+++ /dev/null
@@ -1,374 +0,0 @@
-/**
- *
- *
- * @class
- * @extends Biojs
- *
- * @author John Gomez-Carvajal
- * @version 1.0.0
- * @category 2
- *
- * @requires Server side proxy
- *
- * @requires ChEBICompound.css
- * @dependency
- *
- * @requires jQuery Core 1.6.4
- * @dependency
- *
- * @param {Object} options An object with the options for the component.
- *
- * @option {string} [imageUrl="http://www.ebi.ac.uk/chebi/displayImage.do"]
- * Url of the web service in order to require the compound image.
- * To get a compound image, 'imageUrl + id' will be used as URI.
- *
- * @option {string} id
- * ChEBI identifier of the compound to be displayed (i.e. '4991').
- *
- * @option {int} [height=undefined]
- * The height in pixels of how big this component should be displayed. If it's not specified, the CSS value will be used instead.
- *
- * @option {int} [width=undefined]
- * The width in pixels of how big this image should be displayed. If it's not specified, the CSS value will be used instead.
- *
- * @example
- * var instance = new Biojs.ChEBICompound({
- * target: 'YourOwnDivId',
- * id: 'CHEBI:2922',
- * width: 700,
- * height: 400
- * });
- *
- */
-Biojs.ChEBICompound = Biojs.extend(
-/** @lends Biojs.ChEBICompound# */
-{
- constructor: function(options){
-
- var self = this;
- var width = this.opt.width;
- var height = this.opt.height;
- var imageWidth, imageHeight;
-
- if ( "string" == (typeof this.opt.target) ) {
- this._container = jQuery( "#" + this.opt.target );
-
- } else {
-
- this.opt.target = "biojs_ChEBICompound_" + this.getId();
- this._container = jQuery('');
- }
-
- this._container.html('').addClass("ChEBICompound");
-
- if ( width == undefined ) {
- width = this._container.css('width');
-
- } else {
- this._container.width( width );
- }
-
- if ( height == undefined ) {
- height = this._container.css('height');
-
- } else {
- this._container.height( height );
- }
-
- this._container.html('');
- this._imageContainer = jQuery('').appendTo(this._container);
- this._tabContainer = jQuery('').appendTo(this._container);
-
- // Build the summary left panel
- this._summaryContainer = this._buildTabPanel(
- this._tabContainer,
- function ( tabVisible, visibleWidth ) {
- // Do nothing on tab visibility change
- }
- );
-
- // Size of the image for the URL request
- imageWidth = this._imageContainer.width();
- imageHeight = this._imageContainer.height();
- this.opt.imageDimension = (imageWidth < imageHeight)? imageWidth: imageHeight;
-
- if (this.opt.id !== undefined) {
- this.setId(this.opt.id);
- }
- },
-
- opt: {
- target: 'YourOwnDivId',
- id: undefined,
- imageUrl: 'http://www.ebi.ac.uk/chebi/displayImage.do',
- chebiDetailsUrl: 'http://www.ebi.ac.uk/webservices/chebi/2.0/test/getCompleteEntity?chebiId=',
- proxyUrl: '../biojs/dependencies/proxy/proxy.php',
-
- height: undefined,
- width: undefined,
- scale: false,
- imageIndex: 0
- },
-
- eventTypes : [
- /**
- * @name Biojs.ChEBICompound#onRequestError
- * @event
- * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} file The name of the loaded file.
- * @eventData {string} result A string with either value 'success' or 'failure'.
- * @eventData {string} message Error message in case of result be 'failure'.
- *
- * @example
- * instance.onRequestError(
- * function( e ) {
- * alert( e.message );
- * }
- * );
- *
- * */
- "onRequestError",
- /**
- * @name Biojs.ChEBICompound#onImageLoaded
- * @event
- * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} id The identifier of the loaded file.
- *
- * @example
- * instance.onImageLoaded(
- * function( e ) {
- * alert( e.id + " loaded." );
- * }
- * );
- *
- * */
- "onImageLoaded"
- ],
-
- /**
- * Set the identifier of the chemical component.
- * Shows both information and image for the new identifier.
- *
- * @param {string} chebiId Chemical EBI's identifier for the compound to be displayed.
- *
- * @example
- * instance.setId('CHEBI:4991');
- *
- * @example
- * // No image available
- * instance.setId('CHEBI:60004');
- *
- */
- setId: function( chebiId ) {
-
- var self = this;
- var url;
- var image;
-
- this._imageContainer.html('');
- this.opt.id = chebiId.replace('CHEBI:','');
- this._requestDetails( this.opt );
-
- var params = {
- defaultImage: true,
- imageIndex: this.opt.imageIndex,
- chebiId: chebiId,
- dimensions: this.opt.imageDimension,
- scaleMolecule: this.opt.scale
- };
-
- url = this.opt.imageUrl + '?' + jQuery.param(params);
- image = jQuery('![]()
')
- .load(function() {
- self._imageContainer.removeClass("noImage");
- self._imageContainer.append(image).css({
- 'width': self.opt.imageDimension,
- 'height': self.opt.imageDimension,
- 'margin': 'auto'
- });
-
- self.raiseEvent( Biojs.ChEBICompound.EVT_ON_IMAGE_LOADED, {
- id: chebiId,
- url: url
- });
- })
- .error(function() {
- self._imageContainer.addClass("noImage");
- self.raiseEvent( Biojs.ChEBICompound.EVT_ON_REQUEST_ERROR, {
- id: chebiId,
- url: url,
- message: "No image available"
- });
- })
- .attr('src', url);
- },
-
- _requestDetails: function( opt ){
- var self = this;
-
- var urlSummary = opt.chebiDetailsUrl + opt.id;
-
- Biojs.console.log( "Requesting summary from: " + urlSummary );
-
- var httpRequest = {
- url: urlSummary,
- method: "GET",
- /**
- * @ignore
- */
- success: function(xml){
- self._dataReceived(xml);
- },
- /**
- * @ignore
- */
- error: function(qXHR, textStatus, errorThrown) {
- Biojs.console.log("ERROR requesting summary. Response: " + textStatus);
- self.raiseEvent( Biojs.ChEBICompound.EVT_ON_REQUEST_ERROR, {
- message: textStatus
- });
- }
- };
-
- // Using proxy?
- // Redirect using the proxy and encode all params as url data
- if ( opt.proxyUrl != undefined ) {
-
- // Redirect to proxy url
- httpRequest.url = opt.proxyUrl;
-
- // Encode both url and parameters under the param url
- httpRequest.data = [{ name: "url", value: urlSummary }];
-
-
- }
- // Data type
- httpRequest.dataType = "text";
- jQuery.ajax(httpRequest);
-
- },
-
-
- // parses the xml file from the request and stores the information in an easy to access way
- _dataReceived: function(xml){
- var data = {};
- var i = 0;
- var self = this;
-
- Biojs.console.log("Data received");
-
- if ( xml.length > 0 ) {
- xmlDoc = jQuery.parseXML( xml );
- xmlResult = jQuery(xmlDoc).find('return');
-
- data.chebiAsciiName = { name: "Name", value: xmlResult.find(' > chebiAsciiName').text() };
- data.chebiId = { name: "Identifier", value: xmlResult.find('> chebiId').text() };
- data.definition = { name: "Definition", value: xmlResult.find('> definition').text() };
- data.SecondaryChEBIIds = { name: "Other Identifiers", value: xmlResult.find(' > SecondaryChEBIIds').text() };
- data.entityStar = { name: "Stars", value: xmlResult.find(' > entityStar').text() };
-
- }
-
- this._setSummary( data );
-
- return data;
- },
-
-
- _setSummary : function ( data ) {
- Biojs.console.log("_setSummary()");
-
- var container = this._summaryContainer;
-
- // Remove all elements in container
- container.children().remove();
-
- if ( Biojs.Utils.isEmpty(data) ) {
- container.append('Not information available');
-
- } else {
- // Add the summary data
- for (key in data) {
- if ( data[key].value.length > 0 ) {
- if ( key == 'entityStar' ) {
- jQuery('
';
-
- jQuery("div#"+this.opt.target).html(
- '
' + details[key] + '
'; - } - } - - controlDiv.css("position","relative") - .css("border", 0) - .css("margin", 0) - .css('background-color', "#000") - .css('color', "#fff" ) - .css('float', 'left') - .css("width", controlsWidth ) - .css("height", controlsHeight) - .css("padding", padding) - .append( detailsHTML ); - - // - // Tab - // - var showHideTab = controlSectionDiv.find('#controlTab'); - - showHideTab.css("border", 0) - .css("margin", 0) - .css("padding", 0) - .css("float", "left") - .css("width", tabWidth) - .css("height", tabHeight) - .css('background-color', "#000"); - - /** - * @private - * @function - */ - // This function will hide/show the control panel - var toggleControls = function (){ - - showHideTab.find("span").toggle(); - - if (self._controlsVisible) { - controlDiv.hide(); - //showHideTab.css('background-color', self.opt.backgroundColor); - self._controlsVisible = false; - } else { - controlDiv.show(); - //showHideTab.css('background-color', "#000"); - self._controlsVisible = true; - } - } - - self._toggleControls = toggleControls; - - showHideTab.find('#hideButton') - .click( self._toggleControls ) - .mouseover(function(){ - jQuery(this).css("color","#27C0FF"); - }) - .mouseout(function(){ - jQuery(this).css("color","#fff"); - }) - .css("color","#fff") - .css("display","none") - .css("cursor","pointer"); - - showHideTab.find('#showButton') - .click( self._toggleControls ) - .mouseover(function(){ - jQuery(this).css("color","#27C0FF"); - }) - .mouseout(function(){ - jQuery(this).css("color","#000"); - }) - .css("color","#000") - .css("cursor","pointer"); - - this._controlsReady = true; - - Biojs.console.log("_buildPanel done"); - } - - - - -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Chromosome.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Chromosome.js deleted file mode 100755 index eef4eb55e7..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Chromosome.js +++ /dev/null @@ -1,413 +0,0 @@ -/** - * This component allow to visualize a chromosome and its bands. - * The bands can be recovered from a DAS source or directly from a javascript model. - * - * @class - * @extends Biojs - * - * @author Gustavo A. Salazar - * @version 1.0.1 - * @category 2 - * - * @requires jQuery Core 1.7.2 - * @dependency - * - * @requires jsdas 0.1.6 - * @dependency - * - * @requires Chromosome CSS - * @dependency - * - * - * @requires Biojs AreaSelector - * @dependency - * - * @requires jQuery UI 1.8.2 - * @dependency - * - * @requires jQuery UI CSS 1.8.2 - * @dependency - * - * @requires jquery.watcher.js - * @dependency - * - * @requires Selector CSS - * @dependency - * - * - * - * - * @param {Object} options An object with the options for the Chromosome component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} dasSource - * URL of the DAS source to obtain the band's information. - * For example Ensembl provides the human chromosome information as a DAS source in the - * URL http://www.ensembl.org/das/Homo_sapiens.NCBI36.karyotype/ - * - * @option {string} dasSegment - * DAS segment to query, in case of chromosomes is the chromosome id (eg. 8). - * Optionally DAS sources can be queried for a spwcific region of the chromosome(eg. 8:43100000,49100001) - * - * @option {Object} model - * Alternatively to DAS, This component can receive directly a javascript object containing the relevant information. - * Here is an example of the object structure using JSON notation: - * { - * "id": "8", - * "start": 1, - * "stop": 199999, - * "bands": [ - * { - * "label": "p11", - * "type": "acen", - * "start": 1, - * "stop": "100000" - * }, - * { - * "label": "q11", - * "type": "gpos75", - * "start": 100001, - * "stop": "199999" - * } - * ] - * } - * - * @option {boolean} [includeSelector] - * Include an area selector that interacts with the coordinate position of the chromosome. default true. - * - * @example - * var instance= new Biojs.Chromosome({ - * target: "YourOwnDivId", - * dasSource: "http://www.ensembl.org/das/Homo_sapiens.NCBI36.karyotype/", - * dasSegment: "8" - * }); - * - */ -Biojs.Chromosome = Biojs.extend ( -/** @lends Biojs.Chromosome# */ -{ - constructor: function (options) { - var self = this; - $("#"+self.opt.target).html(''); - $("#"+self.opt.target+'_chr').css('position','relative'); - if (self.opt.dasSource!=null){ - var client = JSDAS.Simple.getClient(self.opt.dasSource); - client.features({segment: self.opt.dasSegment}, function(res){ - self._modelFromDAS(res,self); - }, self._error_response); - }else if (self.opt.model!=null){ - this._process_model(self.opt.model,self); - } - }, - - /** - * Default values for the options - * @name Biojs.Chromosome-opt - */ - opt: { - target: "chromosome", - model: null, - dasSource: null, - dasSegment: null, - includeSelector: true - }, - - /** - * Array containing the supported event names - * @name Biojs.Chromosome-eventTypes - */ - eventTypes: [ - /** - * @name Biojs.Chromosome#onBandSelection - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} chromosome_id Id of the chromosome that the selected band belongs. - * @eventData {string} band_id Id of the band that has been selected. - * @eventData {integer} band_start Coordinate of the first nucleotide of the selected band - * @eventData {integer} band_stop Coordinate of the last nucleotide of the selected band - * @eventData {string} band_type type of the band selected (eg. acen, gpos50, gneg). - * @example - * instance.onBandSelection(function( objEvent ) { - * alert("The band " + objEvent.band_id + " of the chromosome " + objEvent.chromosome_id + " has been selected\n[" + objEvent.band_start + "," + objEvent.band_stop + "]"); - * }); - */ - "onBandSelection", - /** - * @name Biojs.Chromosome#onSelectorChanged - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. Is triggered when the the coordinates of the selector have been changed. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} chromosome_id Id of the chromosome that the selected band belongs. - * @eventData {integer} selector_start Coordinate of the left side of the selector - * @eventData {integer} selector_stop Coordinate of the right side of the selector - * @example - * instance.onSelectorChanged(function( objEvent ) { - * alert("The selector has move to the region \n[" + objEvent.selector_start + "," + objEvent.selector_stop + "]"); - * }); - */ - "onSelectorChanged", - /** - * @name Biojs.Chromosome#onModelLoaded - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. Triggered when he model has been loaded - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {Object} model The model after been displayed - * @example - * instance.onModelLoaded(function( objEvent ) { - * alert("The model for the chromosome "+objEvent.model.id+" has been loaded"); - * }); - */ - "onModelLoaded", - /** - * @name Biojs.Chromosome#onDASLoadFail - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. Triggered when the model couldn't be loaded - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} dasSource URL of the DAS source queried - * @eventData {string} dasSegment URL of the DAS source queried - * @example - * instance.onDASLoadFail(function( objEvent ) { - * alert("The DAS source "+objEvent.dasSource+" with information of the segment "+objEvent.dasSegment+" couldn't be loaded"); - * }); - */ - "onDASLoadFail" - ], - - /** - * @private - * Private: Callback function in case of an error in the DAS query. - */ - _error_response: function(){ - var self=this; - $("#"+self.opt.target).append("ERROR querying the DAS source."); - self.raiseEvent('onDASLoadFail', { - dasSource: self.opt.dasSource, - dasSegment: self.opt.dasSegment - }); - }, - - /** - * @private - * Private: Callback function when the DAS response is captured. - * It maps the response into the internal model for bands. - */ - _modelFromDAS: function(res,parent){ - if(typeof parent != "undefined") - var self=parent; - var annotations = res.GFF.SEGMENT[0].FEATURE, chr_start=res.GFF.SEGMENT[0].start, chr_stop=res.GFF.SEGMENT[0].stop; - var model = { - id: res.GFF.SEGMENT[0].id, - start: res.GFF.SEGMENT[0].start*1, - stop: res.GFF.SEGMENT[0].stop, - bands:null - }; - var bands=[]; - var first="first",last=""; - for (var i in annotations){ - var ann = annotations[i],type=ann.TYPE.id.substr(5); - if (type=="acen"){ - if (ann.id[0]=="p") type="p_acen"; - else if (ann.id[0]=="q") type="q_acen"; - } - bands.push({start:ann.START.textContent*1,stop:ann.END.textContent*1,label:ann.id,type:type}); - } - model.bands=bands; - self.opt.model=model; - self._process_model(model,self); - }, - - /** - * @private - * Private: Creates a div element for each band in the model; the width of the band is calculated as a percentage - * of the relationship between the number of nucleotides in the band and the number of nucleotides of the chromosome. - */ - _process_model: function(model,self){ - //Sorting the bands by the start coordinate - model.bands.sort( - /** - * @ignore - **/ - function sortfunc(a,b){ - return a.start-b.start; - }); - var first="first",last="",firstid=null,firstW=null; - for (var i in model.bands){ - var band = model.bands[i]; - if (i*1+1==model.bands.length) - last="last"; - var percentage=94*(band.stop-band.start)/model.stop;// no using the 100% of the width, so there is an extra space for the borders - var band_id=model.id+"_"+band.label; - $("#"+self.opt.target+'_chr').append(""); - band_id=band_id.replace(/\./gi, "\\."); - $("#"+band_id).click(function (){ - //Finding the band in the model - var band={} - for (var j in model.bands){ - if ($(this).attr("title")==model.bands[j].label) - band=model.bands[j]; - } - //arising an event with the ban info - self.raiseEvent('onBandSelection', { - chromosome_id : model.id, - band_id: band.label, - band_start: band.start, - band_stop: band.stop, - band_type: band.type - }); - //If the selector is included then its position gets updated to the selected band - if (self.opt.includeSelector){ - self.opt.selector.from=band.start; - self.opt.selector.to=band.stop; - self.raiseEvent('onSelectorChanged', { - chromosome_id : model.id, - selector_start: band.stop, - selector_stop: band.type - }); - self._moveSelectorToDivCoordinates($(this).position().left,$(this).position().left+$(this).width()); - } - }); - if(first!="") { - firstid=band_id; //id of the first band - firstW=band.stop; - } - first=""; - } - //Setting up the selector in case is included - if (self.opt.includeSelector){ - //The selector just allows horizontal interaction and is preseted in the first band - self.opt.selector = new Biojs.AreaSelector({ - target: self.opt.target+'_chr', - resize_top: false, - resize_bottom: false, - area:[0,-5,$('#'+firstid).width(),20] - }); - //Creating two more attributes in the object to save chromosome coordinates where is visible, starting in the first band - self.opt.selector.from = 0; - self.opt.selector.to = firstW; - self.opt.selector.fromWatcher=false; - //When the selector change its position the chromosome coordinates have to be updated - self.opt.selector.onRegionChanged(function( objEvent ) { - if (!self.opt.selector.fromWatcher){ - self.opt.selector.from = self._getCoordinateFromLeft(objEvent.region[0]); - self.opt.selector.to = self._getCoordinateFromLeft(objEvent.region[2]); - self.raiseEvent('onSelectorChanged', { - chromosome_id : self.opt.model.id, - selector_start: self.opt.selector.from, - selector_stop: self.opt.selector.to - }); - } - }); - //if the div containing the chromosome is resized or moved the selector is modified with - $("#"+self.opt.target).watch("left,top,width,height,display", function() { - self.opt.selector.fromWatcher=true; - if (self.opt.selector.from!=null && self.opt.selector.to!=null ) - self.moveSelectorToCoordinates(self.opt.selector.from,self.opt.selector.to); - self.opt.selector.fromWatcher=false; - }, 100, "_containerMove"); - } - self.raiseEvent('onModelLoaded', { - model: model - }); - - }, - /** - * AreaSelector component that allows to interact with the chromosome. - * Optional feature, that can be disable in the options object by setting the feature includeSelector to false - * @private - * @name Biojs.Chromosome-selector - */ - selector:null, - /** - * Move the Selector to a specific place in the chromosome - * - * @param {integer} from initial chromosome coordinate to locate the selector - * @param {integer} to final chromosome coordinate to locate the selector - * - * @example - * instance.moveSelectorToCoordinates(10000000,20000000); - * - */ - moveSelectorToCoordinates: function(from, to){ - var self=this; - if(self.opt.selector!=null){ - self.opt.selector.from=from; - self.opt.selector.to=to; - self._moveSelectorToDivCoordinates(self._getLeftFromCoordinate(from),self._getLeftFromCoordinate(to)); - }else - return false; - }, - - /** - * Gives the corresponding value for left in respect of the parent component from a chromosome coordinate - * @private - * @name Biojs.Chromosome-_getLeftFromCoordinate - */ - _getLeftFromCoordinate: function(coordinate){ - var self=this; - var band=null - for (var j in self.opt.model.bands){ - var b=self.opt.model.bands[j]; - if (coordinate>=b.start && coordinate<=b.stop){ - band=b; - break; - } - } - if (band!=null){ - var band_id=self.opt.model.id+"_"+band.label; - band_id=band_id.replace(/\./gi, "\\."); - var leftDiv = $("#"+band_id).position().left, - widthDiv= $("#"+band_id).width(), - leftBand=band.start, - widthBand=band.stop-band.start; - return leftDiv+ (((coordinate-leftBand)*widthDiv)/widthBand); - }else - return false; - - }, - /** - * Gives the corresponding value for a chromosome coordinate from the left value in respect of the parent component - * @private - * @name Biojs.Chromosome-_getCoordinateFromLeft - */ - _getCoordinateFromLeft: function(left){ - var self=this; - var band=null - for (var j in self.opt.model.bands){ - var b=self.opt.model.bands[j]; - var band_id=self.opt.model.id+"_"+b.label; - band_id=band_id.replace(/\./gi, "\\."); - - if (left>=$("#"+band_id).position().left && left<=$("#"+band_id).position().left + $("#"+band_id).width()){ - var leftDiv = $("#"+band_id).position().left, - widthDiv= $("#"+band_id).width(), - leftBand=b.start, - widthBand=b.stop-b.start; - return leftBand+ (((left-leftDiv)*widthBand)/widthDiv); - } - } - return false; - - }, - - /** - * moves the selector to a position in the div using the div relative coordinates - * @private - * @name Biojs.Chromosome-_moveSelectorToDivCoordinates - */ - _moveSelectorToDivCoordinates: function(from, to){ - var self=this; - if (self.opt.includeSelector && self.opt.selector!=null) - self.opt.selector.setCoveredArea([from,-5,to,20]); - } -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Cytoscape.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Cytoscape.js deleted file mode 100755 index dd2b2340ba..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Cytoscape.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * The Cytoscape.js component is a wrapper that allows you to use Cytoscape.js in BioJS. - * - * @class - * @extends Biojs - * - * @author Max Franz - * @version 1.0.0 - * @category 1 - * - * @requires Cytoscape.js (latest version strongly recommended) - * @dependency - * - * @param {Object} options An object with the options for Cytoscape.js. - * - * @option {string} container - * The ID of the HTML DOM element in which Cytoscape.js will be placed. - * - * - * @example - * var cy; - * var instance = new Biojs.Cytoscape({ - * container: window.document.getElementById('some-div-id'), - * ready: function(){ - * cy = this; // now you can use cytoscape.js as normal - * } - * }); - * - * - */ -Biojs.Cytoscape = Biojs.extend( -/** @lends Biojs.Cytoscape# */ -{ - constructor: function(options){ - cytoscape( options ); - }, - - /** - * Default values for the options - * @name Biojs.Cytoscape-opt - */ - opt: { - container: undefined - }, - - /** - * Array containing the supported event names - * @name Biojs.Cytoscape-eventTypes - */ - eventTypes: [ - ] - -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.DNAContentViewer.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.DNAContentViewer.js deleted file mode 100755 index 7c159a5bbd..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.DNAContentViewer.js +++ /dev/null @@ -1,1024 +0,0 @@ -/** - * This component uses the D3 library to visualise contents of a DNA sequence, with panning and zooming functionality. - * - * @class - * @extends Biojs - * - * @author Anil Thanki, Shabhonam Caim - * @version 1.0.0 - * @category 2 - * - * - * @requires D3 - * @dependency - * - * - * @requires jQuery UI 1.8.2+ - * @dependency - * - * @requires jQuery Core 1.6.4 - * @dependency - * - * @requires biojs.DNAContentViewer.css - * @dependency - * - * - * @requires jQuery UI CSS 1.8.2 - * @dependency - * - * - * @param {Object} options An object with the options for DNAContentViewer component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} [fontFamily='"Andale mono", courier, monospace'] - * Font list to be applied to the component content. - * - * @option {string} [fontColor="white"] - * HTML color code for the font. - * - * @option {string} [backgroundColor="#7BBFE9"] - * Background color for the entire div content. - * - * @option {Object} [selectionFontColor="white"] - * This color will be used to change the font color of selected text. - * - * @option {Object} [selectionBackgroundColor="yellow"] - * This color will be used to change the background of selected text. - * - * @option {string} dataSet - * File in text format including input sequence data in raw format. Example of text file ...
- *' +
- '
' +
- '
'; - return text; - }, - - - /** - * Private: Function to calculate AT/GC content for given positions. - * @param {string} newStart start position. - * @param {string} newStop stop position. - * @ignore - */ - _calculateContent: function (newStart, newStop) { - var sequence = this.track; - if (newStart && newStop) { - if (newStart < 0) { - newStart = 0; - } - if (newStop > this.slider_stop) { - newStop = this.slider_stop; - } - - sequence = sequence.substring(newStart, newStop) - - } else { - newStart = 0; - } - - var DNAContent_content = [] - var seq_len = sequence.length; - var i = 0; - if (seq_len > 100) { - while (i <= seq_len) { - var chunk = sequence.substr(i, Math.floor(seq_len / 100)); - DNAContent_content.push({start: parseInt(newStart) + parseInt(i), gc_value: this._GCforchunk(chunk), at_value: this._ATforchunk(chunk)}); - i += Math.floor(seq_len / 100); - } - if (i < seq_len) { - var chunk = sequence.substr(i); - DNAContent_content.push({start: parseInt(newStart) + parseInt(i), gc_value: this._GCforchunk(chunk), at_value: this._ATforchunk(chunk)}); - } - } else { - while (i <= seq_len) { - var chunk = sequence.substr(i, 10); - DNAContent_content.push({start: parseInt(newStart) + parseInt(i), gc_value: this._GCforchunk(chunk), at_value: this._ATforchunk(chunk)}); - i += 1; - } - } - - this.max = 100; - this.track_bins = DNAContent_content; - }, - - - - /** - * Private: Function to calculate AT/GC stats for chunk.. - * @param {string} chunk sequence. - * Returns: (int) gc - * @ignore - */ - _Statsforchunk: function (chunk) { - var chunk_array = chunk.split(""); - var gc = 0; - var at = 0; - var ot = 0; - var total = 0; - for (var a = 0; a < chunk_array.length; a++) { - if (chunk_array[a].toLocaleLowerCase() == "g" || chunk_array[a].toLocaleLowerCase() == "c") { - gc++; - } - else if (chunk_array[a].toLocaleLowerCase() == "a" || chunk_array[a].toLocaleLowerCase() == "t") { - at++; - } - else { - ot++; - } - total++; - } - return ({total: total, gc: gc, at: at, ot: ot}); - }, - - - /** - * Private: Function to calculate AT % for chunk. - * @param {string} chunk sequence. - * Returns: (int) gc - * @ignore - */ - _GCforchunk: function (chunk) { - var chunk_array = chunk.split(""); - var gc = 0; - var total = 0; - for (var a = 0; a < chunk_array.length; a++) { - if (chunk_array[a].toLocaleLowerCase() == "g" || chunk_array[a].toLocaleLowerCase() == "c") { - gc++; - } - total++; - } - return gc * 100 / total; - }, - - /** - * Private: Function to calculate AT % for chunk. - * @param {string} chunk sequence. - * Returns: (int) at - * @ignore - */ - _ATforchunk: function (chunk) { - var chunk_array = chunk.split(""); - var at = 0; - var total = 0; - - for (var a = 0; a < chunk_array.length; a++) { - if (chunk_array[a].toLocaleLowerCase() == "a" || chunk_array[a].toLocaleLowerCase() == "t") { - at++; - } - total++; - } - return at * 100 / total; - }, - - - /** - * Private: Paints the slider - * Purpose: set up slider buttons - * Returns: - - * @ignore - */ - _paintSlider: function () {//holder size, left and right margins of the holder, and number of amino acids - var sequenceLength = 100;//config.sequenceLength; - if (!document.getElementById("DNAContentPainter-slider")) { - return; - } - - var slider_div = jQuery("#DNAContentPainter-slider"); - slider_div.text(''); - slider_div.append(''); - slider_div.append(''); - var self = this; - var diff = parseInt(self.track.length / 100); - this.zoomSlider = jQuery('').appendTo(slider_div); - - - slider_div.html('Controls:
' + - '' + - '' + - '') - }, - - /** - * Private: Paints the AT/GC Legengd and MArker radio buttons - * Returns: - - * @ignore - */ - _paintLegend: function () {//holder size, left and right margins of the holder, and number of amino acids - var self = this; - - if (!document.getElementById("DNAContentPainter-slider")) { - return; - } - - var slider_div_legend = jQuery("#DNAContentPainter-Legend"); - - slider_div_legend.html('
')
- .dialog({
- autoOpen: true,
- title: 'Exported image',
- modal: true,
- width: config.sizeX+20
- });
- }
- },
-
- /**
- * Applies a style, either "centered", "nonOverlapping", or "rows".
- * @param show
- *
- * @example
- * myPainter.applyStyle("centered");
- */
- applyStyle: function(style) {
- if ((style != undefined) && ((style == "centered") || (style == "nonOverlapping") || (style = "rows"))) {
- var config = this.opt.json.configuration;
- this.customize(style, config.horizontalGrid, config.verticalGrid);
- }
- },
-
- /**
- * Shows/hide the horizontal guide lines.
- * @param show
- *
- * @example
- * myPainter.showHideHorizontalGrid(true);
- */
- showHideHorizontalGrid: function(show) {
- if ((show != undefined) && ((show == true) || (show == false))) {
- var config = this.opt.json.configuration;
- this.customize(config.style, show, config.verticalGrid);
- }
- },
-
- /**
- * Shows/hide the horizontal guide lines.
- * @param show
- *
- * @example
- * myPainter.showHideVerticalGrid(true);
- */
- showHideVerticalGrid: function(show) {
- if ((show != undefined) && ((show == true) || (show == false))) {
- var config = this.opt.json.configuration;
- this.customize(config.style, config.horizontalGrid, show);
- }
- }
- }
-);
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.DetailsFrame.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.DetailsFrame.js
deleted file mode 100755
index f65109707c..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.DetailsFrame.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * This component creates a floating div as a pop-up window to visualize a list of annotations on an entity.
- * Eg. Protein, Interaction, Gene, etc
- *
- * @class
- * @extends Biojs
- *
- * @author Gustavo A. Salazar
- * @version 1.0.0
- * @category 1
- *
- * @requires jQuery Core 1.7.2
- * @dependency
- *
- * @requires jQuery UI 1.8.2
- * @dependency
- *
- * @requires jQuery UI CSS 1.8.2
- * @dependency
- *
- * @requires Details frame CSS
- * @dependency
- *
- * @param {Object} options An object with the options for the Details Frame component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {object} features
- * Object with the features to display, every attribute is displayed as an item in the list.
- * The attribute id, is used for the title of the frame.
- * The attribute description has a different style at the beggining of the list
- *
- * @option {boolean} [minizable=true]
- * to indicate if the window is minizable. default value: true
- *
- * @option {boolean} [draggable=true]
- * to indicate if the window can be draggable. default value: true
- *
- * @example
- * var instance = new Biojs.DetailsFrame({
- * target: "YourOwnDivId",
- * features: {
- * "id":"P64747",
- * "description":"Uncharacterized protein Rv0893c/MT0917","Gene-Name":"Rv0893c",
- * "%GC":" 60.63",
- * "Location":" Unknown",
- * "Chrom-Location":" 946",
- * "Strand-Direction":" -1",
- * "Cordon-Bias":" 0.07692",
- * "Funct-Class":" unknown",
- * "Degree":" 15",
- * "Betweenness":" 784.68",
- * "Closeness":" 0.24790",
- * "Eigen":" 0.00003",
- * "Hub":" N",
- * "Sass-Infect":" 0",
- * "Sass-Growth":" 0",
- * "GO-Growth":" 0",
- * "TDR":" 0",
- * "UniProt":" 0",
- * "DDTRP":" 0",
- * "Gas-Nic":" 0",
- * "#-Paralogs":" 11",
- * "Mtb-cplx":" 11",
- * "Mtb":" 7",
- * "Corynebacterineae":" 0",
- * "Actinomycetales":" 0",
- * "Actinobacteridae":" 0",
- * "Bacteria":"0",
- * "Non-bacteria":"0",
- * "H.sapiens":"0",
- * "in_leprae":"0",
- * "DN/DS":"0.48",
- * "Codon-Volatility":"0.1"
- * }
- * });
- *
- */
-Biojs.DetailsFrame = Biojs.extend (
-/** @lends Biojs.DetailsFrame# */
-{
- constructor: function (options) {
- var self=this;
- var target =self.opt.target;
- var html = '';
- if (self.opt.minizable)
- html += ' ';
- if (self.opt.draggable)
- html += ' ';
- html += ' '+i+':'+self.opt.features[i]+' ';
- }
- else
- for (var i=0; i'+self.opt.features[order[i]]+'';
- }
- $("#"+self.opt.target+" ul").html(html);
- self.raiseEvent('onFeaturesUpdated', {});
- }
-});
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.EbiGlobalSearch.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.EbiGlobalSearch.js
deleted file mode 100755
index ac7a29e79d..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.EbiGlobalSearch.js
+++ /dev/null
@@ -1,399 +0,0 @@
-/**
- * EBI Global Search
- *
- * @class
- * @extends Biojs
- *
- * @author Rafael C Jimenez
- * @version 1.0.0
- * @category 2
- *
- * @requires jQuery Core 1.8.0
- * @dependency
- *
- * @requires ebi-visual.css
- * @dependency
- *
- * @requires EbiGlobalSearch.css
- * @dependency
- *
- * @param {Object} options Component options
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed
- *
- * @option {string} query [query='keratin']
- * Query to retrieve EBI search results
- *
- * @option {string} [searchBaseURL='www.ebi.ac.uk/ebisearch/']
- * Base URL of the REST service which provides the data
- *
- * @option {string} [style='basic']
- * Options to display this component: basic, collapsible or expanded
- *
- * @option {string} [proxyUrl='../biojs/dependencies/proxy/proxy.php']
- * Proxy to bypass the same origin policy ({@link http://en.wikipedia.org/wiki/Same_origin_policy})
- *
- * @example
- * var instance = new Biojs.EbiGlobalSearch({
- * target: 'YourOwnDivId',
- * query: 'p53',
- * searchBaseURL: 'http://www.ebi.ac.uk/ebisearch/',
- * proxyUrl: '../biojs/dependencies/proxy/proxy.php',
- * style: 'expanded' // basic | collapsible | expanded
- * });
- *
- */
-Biojs.EbiGlobalSearch = Biojs.extend(
-/** @lends Biojs.EbiGlobalSearch# */
-{
- constructor: function (options) {
- //Biojs.console.enable();
- this.setQuery(this.opt.query);
- },
-
- /**
- * Default values for the options
- * @name Biojs.EbiGlobalSearch-opt
- */
- opt: {
- target: "YourOwnDivId",
- query: undefined,
- searchBaseURL: 'http://www.ebi.ac.uk/ebisearch/',
- style: 'collapsible',
- proxyUrl: ''
- },
-
- /**
- * Set query for the service.
- * @param {string} query Query.
- * @param {string} style Style: 'basic', 'collapsible' or 'expanded'.
- *
- * @example
- * instance.setQuery("ENSG00000100867");
- *
- * @example
- * instance.setQuery("Q61171");
- *
- * @example
- * instance.setQuery("actin");
- *
- * @example
- * instance.setQuery("keratinnn");
- *
- */
- setQuery: function(query, style){
- this._completedRequest = false;
- if(typeof style != 'undefined'){
- this.opt.style = style;
- }
- if (typeof query != 'undefined') {
- this.opt.query = query;
- this._drawTemplate();
- if(this.opt.style != Biojs.EbiGlobalSearch.VIEW_COLLAPSIBLE){
- this._updateSummary();
- }
- } else {
- var message = "ERROR: Query error: " + Biojs.EbiGlobalSearch.QUERY_ERROR_UNDEFINED;
- Biojs.console.log(message);
- this.raiseEvent( Biojs.EbiGlobalSearch.EVT_ON_ERROR, { message: message} );
- }
- },
-
- /**
- * Test styles for the service.
- * @param {string} style Style: 'basic', 'collapsible' or 'expanded'.
- *
- * @example
- * instance.setStyle('basic');
- *
- * @example
- * instance.setStyle('collapsible');
- *
- * @example
- * instance.setStyle('expanded');
- */
- setStyle: function(style){
- this.setQuery(this.opt.query, style);
- },
-
-
- /*
- * Function: Biojs.EbiGlobalSearch._updateSummary
- * Purpose: It handles the request
- * Returns: -
- * Inputs: -
- */
- _updateSummary: function() {
- var self = this;
- var url = this.opt.searchBaseURL+"globalsearchsummary.ebi?query="+this.opt.query;
- if(self.opt.proxyUrl != ""){
- url = self.opt.proxyUrl + "?url=" + url;
- }
- jQuery.ajax({
- url: url,
- context: this,
- dataType: "json"
- //crossDomain: true //Does not work in IE
- }).done(function( response ) {
- Biojs.console.log("SUCCESS: data received");
- self._completedRequest = true;
- self._drawResults(response)
- }).fail(function(jqXHR, textStatus) {
- var errorMessage = "ERROR: Request failed: " + textStatus;
- if(this.opt.query == ""){
- errorMessage = errorMessage + ": Empty query";
- }
- Biojs.console.log(errorMessage);
- self.raiseEvent(
- Biojs.EbiGlobalSearch.EVT_ON_ERROR,{ "message": errorMessage}
- );
- self._drawResults(errorMessage);
- });
- },
-
-
- /*
- * Function: Biojs.EbiGlobalSearch._updateSummary
- * Purpose: It handles the request
- * Returns: -
- * Inputs: ul -> {object} ul jquery element.
- * end -> {object} One item result.
- */
- _renderItem: function(ul, item) {
- jQuery( "" )
- .append( jQuery( "" ).attr("href", this.opt.searchBaseURL+item.url)
- .text( item.name + " ("+item.numberOfResults+")" )
- ).appendTo( ul );
- },
-
- /*
- * Function: Biojs.EbiGlobalSearch._updateSummary
- * Purpose: It handles the request
- * Returns: -
- * Inputs: response -> {object} Results from the service.
- * ul -> {object} ul jquery element.
- */
- _renderItems: function(response, ul) {
- var self = this;
- var totalNumberOfResults = 0;
- var totalNumberOfServices = 0;
- var totalNumberOfServicesWithResults = 0;
- jQuery.each(response, function(index, item) {
- totalNumberOfServices++;
- if(item.numberOfResults != 0){
- self._renderItem(ul, item);
- totalNumberOfResults += parseInt(item.numberOfResults);
- totalNumberOfServicesWithResults++;
- }
- });
- /* display "No results" */
- if(totalNumberOfResults == 0){
- var noResultsMessage = "No results for \""+this.opt.query+"\"";
- var search_extras = jQuery("#" + Biojs.EbiGlobalSearch.SEARCH_EXTRAS);
- search_extras.find("ul").css("display", "none");
- search_extras.find("p").text(noResultsMessage);
- }
- /* raise event with number of results */
- this.raiseEvent(
- Biojs.EbiGlobalSearch.EVT_ON_RESULTS,
- { "resutls" : totalNumberOfResults, "services" : totalNumberOfServices, "servicesWithResults" : totalNumberOfServicesWithResults, "items" : response }
- );
-
-
- },
-
-
- /*
- * Function: Biojs.EbiGlobalSearch._drawTemplate
- * Purpose: Draw template
- * Returns: -
- * Inputs: -
- */
- _drawTemplate: function(){
- /* BASIC style */
- if(this.opt.style.toLowerCase() == Biojs.EbiGlobalSearch.VIEW_BASIC){
- var thisElem = jQuery("#" + this.opt.target);
- thisElem.html("");
- var search_extras = jQuery("");
- search_extras.appendTo(thisElem);
- search_extras.removeClass("shortcuts");
- search_extras.text("Loading other results");
- search_extras.addClass("loading");
-
- /* COLLAPSIBLE style */
- } else if (this.opt.style.toLowerCase() == Biojs.EbiGlobalSearch.VIEW_COLLAPSIBLE) {
- var self = this;
- var thisElem = jQuery("#" + this.opt.target);
- thisElem.html("");
- var search_extras = jQuery("");
- search_extras.appendTo(thisElem);
- search_extras.addClass("shortcuts expander");
- var ebi_search_results = jQuery("");
- ebi_search_results.appendTo(search_extras);
- var h3 = jQuery("
' + value;
- * };
- *
- * // Formats a decimal value in a percentage value.
- * var numberToPercentageFormat = function (col, dataRow, value) {
- * return ( new Number(value) * 100 ).toFixed(2) + "%";
- * };
- *
- * // Example of instantiation of the Table
- * var myTable = new Biojs.Table({
- * target: "YourOwnDivId",
- * hideColumns: [1],
- * orderBy: [ [0,'asc'], [3,'desc'] ],
- * columns: [
- * "Rank",
- * "Flag",
- * { name: "Country", render: flagRender },
- * "Population",
- * "Date",
- * { name:"% World Population", render: numberToPercentageFormat }
- * ],
- * dataSet: [
- * [ 1, "chi", "China", 1347350000, "December 31, 2011", "0.1925" ],
- * [ 2, "ind", "India", 1210193422, "March 1, 2011", "0.1729" ],
- * [ 3, "usa", "United States", 313149000, "March 9, 2012", "0.0447" ],
- * [ 4, "ino", "Indonesia", 237641326, "May 1, 2010", "0.034" ],
- * [ 5, "bra", "Brazil", 192376496, "July 1, 2011", "0.0275" ],
- * [ 6, "pak", "Pakistan", 178945000, "March 9, 2012", "0.0256" ],
- * [ 7, "nig", "Nigeria", 162471000, "July 1, 2011", "0.0232" ],
- * [ 8, "rus", "Russia", 143030106, "January 1, 2012", "0.0204" ],
- * [ 9, "ban", "Bangladesh", 142319000, "March 15, 2011", "0.0203" ],
- * [ 10, "jap", "Japan", 127770000, "February 1, 2012", "0.0183" ],
- * [ 11, "mex", "Mexico", 112336538, "June 12, 2010", "0.016" ],
- * [ 12, "phi", "Philippines", 94013200, "July 1, 2010", "0.0134" ],
- * [ 13, "vie", "Vietnam", 87840000, "December 31, 2011", "0.0125" ],
- * [ 14, "eth", "Ethiopia", 84320987, "July 1, 2012", "0.012" ],
- * [ 15, "ger", "Germany", 81796000, "August 31, 2011", "0.0117" ]
- * ]
- *
- * });
- */
-Biojs.Table = Biojs.extend (
-/** @lends Biojs.Table# */
-{
- constructor: function (options) {
- var self = this;
-
- //Biojs.console.enable();
-
- // TODO: validate mandatory values
-
- self._tableId = 'biojs_Table_'+self.getId();
- self._tableSelector = '#'+self._tableId;
- self._topControls = jQuery('').appendTo("#"+self.opt.target);
- self._body = jQuery('').appendTo("#"+self.opt.target);
- self._table = jQuery('
').appendTo(self._body);
- self._columnsOffset = (this.opt.rowSelection)? 1 : 0;
-
- self._settings = {};
- self._settings.opt = this.opt;
-
- self._initSettings(self._settings);
- self.setDataSource(self.opt.dataSet);
- self._addEvents();
-
- Biojs.console.log("Biojs.Table constructor has finished");
- },
-
- /**
- * Default values for the options
- * @name Biojs.Table-opt
- */
- opt: {
- target: "YourOwnDivId",
- hideColumns: [],
- columns: [""],
- dataSet: [],
- paginate: true,
- pageLength: 10,
- width: 597,
- height: 400,
- rowSelection: true,
- orderBy: []
- //mapUrlParams: function ( params ) { ; }
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.Table-eventTypes
- */
- eventTypes: [
- /**
- * @name Biojs.Table#onCellClicked
- * @event
- * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which triggered the event.
- * @eventData {int} rowIndex Row selected (0-based index).
- * @eventData {int} colIndex Column number (0-based index).
- * @eventData {HTMLTableCellElement} cell Instance of the DOM HTMLTableCellElement selected.
- * @example
- * myTable.onCellClicked(
- * function( e ) {
- * alert("Cell selected in row "+ e.rowIndex +", column " + e.colIndex + ". Value: " + e.cell.innerText );
- * }
- * );
- *
- **/
- "onCellClicked",
-
- /**
- * @name Biojs.Table#onRowSelected
- * @event
- * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which triggered the event.
- * @eventData {int} rowIndex Row selected (0-based index).
- * @eventData {HTMLTableRowElement} row Instance of the DOM HTMLTableRowElement selected.
- * @example
- * myTable.onRowSelected(
- * function( e ) {
- * alert("Row selected: "+ e.rowIndex );
- * }
- * );
- *
- **/
- "onRowSelected",
-
- /**
- * @name Biojs.Table#onHeaderClicked
- * @event
- * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which triggered the event.
- * @eventData {string} colName Column name.
- * @eventData {int} colIndex Column number (0-based index).
- * @example
- * myTable.onHeaderClicked(
- * function( e ) {
- * alert("Header \""+ e.colName +"\" selected. Column index " + e.colIndex + ". " );
- * }
- * );
- *
- **/
- "onHeaderClicked",
-
- /**
- * @name Biojs.Table#onDataArrived
- * @event
- * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which triggered the event.
- * @eventData {Object} jsonData Data object just arrived.
- * @example
- * myTable.onDataArrived(
- * function( e ) {
- * alert( e.jsonData.aaData.length + " new records has arrived." );
- * }
- * );
- *
- **/
- "onDataArrived"],
-
- /**
- * Rebuild the table
- *
- * @example
- * myTable.setDataSource({
- * url: 'data/tableJSON.js'
- * });
- *
- */
- setDataSource: function ( dataSet ) {
-
- this.opt.dataSet = dataSet;
-
- if ( dataSet instanceof Array ) {
- this._initSettingsForLocalData(this._settings);
- } else {
- this._initSettingsForRemoteData(this._settings);
- }
-
- Biojs.console.log("Drawing..");
- this._settings.bDestroy = true;
- this._table.dataTable( this._settings );
- this._setColumnSelector( this._table.fnSettings() );
- },
-
- /**
- * Shows the columns indicated by the indexes array.
- * @param {int[]} columns Column indexes to be showed.
- * @param {bool} flag The new value.
- *
- * @example
- * myTable.toggleColumns([0,3],true);
- *
- */
- toggleColumns: function (columns, flag) {
- Biojs.console.log("Toggle columns to :"+ flag );
- Biojs.console.log(columns);
-
- var checkbox = jQuery('input[name="multiselect_' + this._tableId + '_columns"]');
-
- for ( i=0; i < columns.length; i++ ) {
- toToggle = jQuery(checkbox[ columns[i] ]);
- if ( toToggle.attr("checked") != flag ) {
- toToggle.click();
- }
- this._table.fnSetColumnVis( columns[i] + this._columnsOffset, flag );
- }
- },
-
- /**
- * Shows the columns indicated by the indexes array.
- * @param {int[]} columns Column indexes to be showed.
- *
- * @example
- * myTable.showColumns([0,3]);
- *
- */
- showColumns: function(columns){
- Biojs.console.log("Showing columns:");
- Biojs.console.log(columns);
-
- this.toggleColumns(columns,true);
- },
-
- /**
- * Hides the columns indicated by the indexes array.
- * @param {int[]} columns Column indexes to be hided.
- *
- * @example
- * myTable.hideColumns([0,3]);
- *
- */
- hideColumns: function(columns){
- Biojs.console.log("Hiding columns:");
- Biojs.console.log(columns);
-
- this.toggleColumns(columns,false);
- },
-
- /**
- * Sorts by column.
- * @param {int} columnIndex Column indexes to be sorted (0-based index).
- * @param {string} direction Sorting direction; 'asc' for ascending, 'desc' for descending.
- *
- * @example
- * myTable.orderBy(1,'desc');
- *
- */
- orderBy: function (columnIndex, direction) {
- this._table.fnSort( [ [columnIndex + this._columnsOffset, direction] ] );
- },
-
- /**
- * Gets the current selected data.
- *
- * @returns {string[][]} data current selection.
- *
- * @example
- * myTable.getSelectedRows();
- *
- */
- getSelectedRows: function(){
- var self = this;
- var selectedRows = [];
-
- jQuery(self._tableSelector + ' tr.selected')
- .each(function(index, e) {
- selectedRows.push(self._table.fnGetData(e));
- });
-
- Biojs.console.log(selectedRows)
- return selectedRows;
- },
-
- /*
- * Function: Biojs.Table._initSettings
- * Purpose: initialize the settings for DataTables plugin in case of using local data
- * Returns: -
- * Inputs: settings -> {Object} where the configuration settings will be added.
- */
- _initSettings: function( settings ) {
- Biojs.console.log("initializing settings...");
-
- settings.aoColumnDefs = [];
-
- this._setColumns(this.opt.columns, settings);
- //this._setData(this.opt.dataSet, settings);
-
- // Hide columns
- if ( this.opt.hideColumns.length > 0 ) {
- settings.aoColumnDefs.push( { "bVisible": false, "aTargets": this.opt.hideColumns } );
- }
-
- // Order by
- if ( this.opt.orderBy.length > 0 ) {
- settings.aaSorting = this.opt.orderBy;
- }
-
- // Row selection column (checkboxes column) is enabled?
- if (this.opt.rowSelection) {
- var columnsToHide = settings.aoColumnDefs[0].aTargets;
-
- // Shift the index of the columns to hide
- for ( i in columnsToHide ) {
- columnsToHide[i] += 1;
- }
-
- // Shift the index of the columns to order
- for ( i in settings.aaSorting ) {
- settings.aaSorting[i][0] += 1;
- }
-
- // Disable the ordering on the column 0 (checkboxes column)
- settings.aoColumnDefs.push( { "bSortable": false, "aTargets": [ 0 ] } );
- }
-
- // pagination
- if ( !this.opt.paginate ) {
- settings.bScrollInfinite = true;
- settings.bScrollCollapse = true;
-
- } else {
- settings.sPaginationType = "full_numbers";
- settings.iDisplayLength = this.opt.pageLength;
- settings.oLanguage = {
- "oPaginate": {
- "sPrevious": "<",
- "sNext": ">",
- "sFirst": "|",
- "sLast": "|"
- }
- };
- }
- settings.bProcessing = true;
- settings.bLengthChange = false;
- settings.sScrollX = this.opt.height;
- settings.sScrollY = "100%";
- },
-
- /*
- * Function: Biojs.Table._initSettingsForLocalData
- * Purpose: initialize the settings for DataTables plugin in case of using local data
- * Returns: -
- * Inputs: settings -> {Object} where the configuration settings will be added.
- */
- _initSettingsForLocalData: function( settings ) {
- Biojs.console.log("Using local data");
- this._setData(this.opt.dataSet, settings);;
- // Don't use data source provided by a server
- settings.bServerSide = false;
- // Set URL of the data source
- settings.sAjaxSource = null;
- // Set the function which manages the Ajax requests
- settings.fnServerData = null;
- // Enable filtering
- settings.bFilter = true;
- },
-
- /*
- * Function: Biojs.Table._initSettingsForRemoteData
- * Purpose: initialize the settings for DataTables plugin in case of using remote data
- * Returns: -
- * Inputs: settings -> {Object} where the configuration settings will be added.
- */
- _initSettingsForRemoteData: function(settings) {
-
- Biojs.console.log("Using data from remote URL: "+ this.opt.dataSet.url);
-
- // Use data source provided by a server
- settings.bServerSide = true;
- // Set URL of the data source
- settings.sAjaxSource = this.opt.dataSet.url;
- // Set the function which manages the Ajax requests
- settings.fnServerData = this._fetchData;
- // Enable/disable filtering depending on the support by the server
- settings.bFilter = this.opt.dataSet.filter;
- },
-
- /*
- * Function: _fetchData
- * Purpose: do the Ajax request to get the data from server. Note that 'this' will not refered to the Biojs.Table instance
- * due to this function will be linked to the internal DataTables object.
- * Returns: -
- * Inputs:
- * sSource -> {string} HTTP source to obtain the data from (defined in option dataSet.url).
- * aoData -> {Object[]} a key/value pair object containing the data to send to the server.
- * fnCallback -> {function} to be called on completion of the data get process that will draw the data on the page.
- * oSettings -> {object} DataTables settings object.
- */
- _fetchData: function ( sSource, aoData, fnCallback, oSettings ) {
-
- var httpRequest = { url: sSource };
- var params = aoData;
-
- // Get the Biojs Table instance
- var biojsId = oSettings.sTableId.substr( "biojs_Table_".length );
- var instance = Biojs.getInstance(biojsId);
-
- // Rename param names using those defined in the options instance.opt.dataSet.mapParams
- instance._mapUrlParams(aoData);
-
- // Set callback function on success
- //httpRequest.success = fnCallback;
-
- // Data type expected
- httpRequest.dataType = 'json';
-
- // Using proxy?
- // Redirect using the proxy and encode all params as url data
- if ( instance.getProxy() != undefined ) {
-
- // Redirect to proxy url
- httpRequest.url = instance.getProxy();
-
- // Encode both url and parameters under the param url
- params = [{ name: "url", value: sSource + '?' + jQuery.param(aoData) }];
-
- // Data type
- httpRequest.dataType = instance.getProxyDataType();
-
- }
-
- // Wrap the callback function
- httpRequest.success =
- /**
- * @ignore
- **/
- function ( data ) {
-
- // Decode data
- jsonData = instance._decodeToJSON( data );
-
- // Set the echo var
- jsonData.sEcho = this.sEcho;
-
- // Add the column of checkboxes in case of using row selection
- instance._setSelectionColumn( jsonData );
-
- // Call the datatables cb function
- fnCallback( jsonData );
-
- // fire event
- instance.raiseEvent( Biojs.Table.EVT_ON_DATA_ARRIVED, {
- "jsonData": jsonData
- });
- }
-
- httpRequest.type = 'GET';
- httpRequest.data = params;
- httpRequest.sEcho = aoData[0].value;
-
- jQuery.ajax( httpRequest );
- },
-
- getProxy: function() {
- return this.opt.dataSet.proxyUrl;
- },
-
- getProxyDataType: function() {
- return this.opt.dataSet.dataType | "text";
- },
-
- /**
- * Returns the total records in the dataset.
- *
- * @example
- * alert("Total records:" + myTable.getTotalRecords());
- *
- */
- getTotalRecords: function() {
- return this.opt.dataSet.totalRecords;
- },
-
- _setSelectionColumn: function( jsonData ) {
- if ( this.opt.rowSelection && jsonData.aaData instanceof Array ) {
- for ( i = 0; i < jsonData.aaData.length; i++ ){
- jsonData.aaData[i].unshift('');
- }
- }
- },
-
- /*
- * Function: Biojs.Table._decodeToJSON
- * Purpose: Decode the received data to suit it into the expected JSON format.
- * Override this method in the Biojs.Table's children to suit any raw data into the expected JSON format.
- * Returns: {Object} formatted in the expected JSON format.
- * Inputs: data -> {*} raw data received from the server.
- */
- _decodeToJSON: function ( data ) {
- var jsonData = data;
-
- if ( Biojs.Utils.isEmpty(data) ) {
- Biojs.console.log("Empty data was received");
-
- } else if ( !(jsonData instanceof Object) || !(jsonData.aaData instanceof Array) ) {
- jsonData = {};
- jsonData.aaData = [];
- jsonData.iTotalRecords = 0;
- jsonData.iTotalDisplayRecords = 0;
- Biojs.console.log("Error: data with unknown format was detected.");
- }
-
- Biojs.console.log(jsonData);
- return jsonData;
- },
-
- /*
- * Function: Biojs.Table._mapUrlParams
- * Purpose: Rename the param names with the customized names declared in the option dataSet.paramsMap
- * Returns: -
- * Inputs: {Object[]} a key/value pair object containing the data to send to the server.
- */
- _mapUrlParams: function ( params ) {
- var map = this.opt.dataSet.paramsMap;
- for ( key in map ) {
- for ( i = 0; i < params.length; i++) {
- // rename the parameter name
- if ( params[i].name == key ) {
- Biojs.console.log("Renaming param <" + key + "> with <" + map[key] + ">" );
- params[i].name = map[key];
- }
- }
- }
- },
-
- /*
- * Function: Biojs.Table._setColumnSelector
- * Purpose: Build the drop down box to hide/show columns by means of the user selection.
- * Returns: -
- * Inputs: oSettings -> {Object} DataTables settings object.
- */
- _setColumnSelector: function( settings ){
-
- var self = this;
- var columns = settings.aoColumns;
- var select = jQuery('');
-
- for ( i = this._columnsOffset ; i< columns.length; i++) {
- select.append('');
- }
-
- // Take selector out of the DOM
- jQuery(self._tableSelector+'_wrapper > ' + self._tableId + '_columns').remove();
-
- // Add selector to the DOM
- select.prependTo(self._tableSelector+'_wrapper');
-
- // Uses the MultiSelect plugin as column selector
- self._columnSelector = select.multiselect({
- header: false,
- click: function(event, ui) {
- self._table.fnSetColumnVis(ui.value, ui.checked);
- }
- });
-
- // Changes the icon for the column selector
- jQuery(self._tableSelector+'_wrapper > button')
- .html('')
- .css("width","auto")
- .addClass('dataTables_settings')
- .attr("title", "Show/hide columns");
-
- // Set the current selection status
- self._columnSelector.multiselect('uncheckAll');
-
- var visibleCols = settings.aiDisplayMaster;
- var checkbox = jQuery('input[name="multiselect_' + this._tableId + '_columns"]');
-
- for ( i = 0 ; i < checkbox.length ; i++ ) {
- jQuery( checkbox[i] ).attr("checked", settings.aoColumns[ i + this._columnsOffset ].bVisible );
- }
- },
-
-
- /**
- * Add a single new row or multiple rows of data to the table.
- * @param {array} data 1D array of data - add a single row with the data provided
- *
- * @example
- * myTable.addDataRow([ 1, "col", "Colombia", 46420000, "March 12, 2012", "0.0066" ]);
- *
- */
- addDataRow: function(row) {
- if (this.opt.rowSelection) {
- row.unshift('');
- }
- this._table.fnAddData(row);
- },
-
- /**
- * Add a single new row or multiple rows of data to the table.
- * @param {array} data 1D array of data - add a single row with the data provided
- *
- * @example
- * myTable.removeDataRow(2);
- *
- */
- removeDataRow: function(i){
- this._table.fnDeleteRow(i)
- },
-
- /*
- * Function: Biojs.Table._setColumns
- * Purpose: Map the columns values defined in the option 'columns' to the columns values for DataTables plugin
- * Returns: -
- * Inputs:
- * columns -> {(string|Object)[]} columns in the format defined in the option 'columns'.
- * oSettings -> {Object} DataTables settings object.
- */
- _setColumns: function ( columns, oSettings ) {
- var self = this;
- var result = [];
-
- // Add a column of checkbox for selection
- if (this.opt.rowSelection) {
- columns.splice(0, 0, { "name": '' } );
- }
-
- for ( j in columns ) {
- if ( typeof columns[j] == "string" ) {
- result[j] = { "sTitle": columns[j] };
- } else {
- result[j] = { "sTitle": columns[j].name };
- if ( columns[j].render && typeof columns[j].render == "function") {
- result[j].fnRender = function ( o, value ) {
- return columns[o.iDataColumn].render(o.iDataColumn, o.aData, value);
- }
- }
- if ( columns[j].width && typeof columns[j].width == "string") {
- result[j].sWidth = columns[j].width;
- }
- }
- }
- oSettings.aoColumns = result;
- },
-
- /*
- * Function: Biojs.Table._setData
- * Purpose: Set the data in case of using local data to initialize the Biojs.Table instance.
- * Returns: -
- * Inputs:
- * data -> {string[][]} data to be displayed.
- * oSettings -> {Object} DataTables settings object.
- */
- _setData: function ( data, oSettings ) {
-
- // Check if row selection is currently activated.
- if (this.opt.rowSelection) {
- // Adds a column for a checkbox for each row
- for ( r in data ) {
- data[r].splice(0, 0, '');
- }
- }
- // Set the data in DataTables object.
- oSettings.aaData = data;
- },
-
- _showEmptyMessage: function(){
- this._body.html("Empty");
- },
-
- /*
- * Function: Biojs.Table._addEvents
- * Purpose: initialize the event triggers for the clicks on the Biojs.Table
- * Returns: -
- * Inputs: -
- */
- _addEvents: function(){
- var self = this;
-
- // Cell clicked
- jQuery(this._tableSelector)
- .click( function (eventData) {
- var cell = eventData.target;
-
- while (cell.tagName != "TD" ) {
- cell = cell.parentNode;
- }
-
- var column = new Number(cell.cellIndex);
- var row = new Number(cell.parentNode.rowIndex-1);
-
- if ( self.opt.rowSelection && column == 0 ) {
- if( cell.children[0].checked ) {
- jQuery(cell).parent().addClass('selected');
- self.raiseEvent( Biojs.Table.EVT_ON_ROW_SELECTED , {
- rowIndex: row,
- row: jQuery(cell).parent()
- });
- } else {
- jQuery(cell).parent().removeClass('selected');
- }
- } else {
- self.raiseEvent( Biojs.Table.EVT_ON_CELL_CLICKED, {
- "cell": cell,
- "rowIndex": row,
- "colIndex": column
- });
- }
- Biojs.console.log(eventData);
- });
-
- // Header clicked
- jQuery(self._tableSelector+'_wrapper table.dataTable thead tr th')
- .click( function (eventData) {
- var cell = eventData.currentTarget;
- var column = cell.cellIndex;
-
- if ( self.opt.rowSelection && column == 0 ) {
- if( cell.children[0].checked ) {
- jQuery(self._tableSelector + ' tr').addClass('selected');
- jQuery(self._tableSelector + ' tr td input').attr('checked',true);
- } else {
- jQuery(self._tableSelector + ' tr').removeClass('selected');
- jQuery(self._tableSelector + ' tr td input').attr('checked',false);
- }
- } else {
- self.raiseEvent( Biojs.Table.EVT_ON_HEADER_CLICKED, {
- "colName": cell.innerHTML,
- "colIndex": column
- });
- }
-
- Biojs.console.log(eventData);
- });
- }
-
-
-
- //TODO: Render functions to format used data types: date, number, ...
-
-},
-/** @static */
-/** @lends Biojs.Table */
-{
- // Indexes to access the event name in this.eventTypes array
- EVT_ON_CELL_CLICKED: "onCellClicked",
- EVT_ON_ROW_SELECTED: "onRowSelected",
- EVT_ON_HEADER_CLICKED: "onHeaderClicked",
- EVT_ON_DATA_ARRIVED: "onDataArrived"
-}
-
-
-);
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Tooltip.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Tooltip.js
deleted file mode 100755
index 194d3469b4..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Tooltip.js
+++ /dev/null
@@ -1,535 +0,0 @@
-/**
- * Tooltip for general purpose.
- *
- * @class
- * @extends Biojs
- *
- * @author John Gomez
- * @version 1.0.0
- * @category 1
- *
- * @requires Tooltip CSS
- * @dependency
- *
- * @requires jQuery Core 1.6.4
- * @dependency
- *
- * @param {Object} options
- * An object with the options for Article component.
- *
- * @param {string} targetSelector
- * A selector string to match the elements in the document. For more
- * information on it, see jQuery selectors.
- *
- *
');j.css({color:c.itemColor,cursor:"default",display:"table","text-align":"center",position:"absolute","text-shadow":"-1px -1px "+c.itemTextShadowColor+", 1px -1px "+c.itemTextShadowColor+", -1px 1px "+c.itemTextShadowColor+", 1px 1px "+c.itemTextShadowColor,left:"50%",top:"50%","min-height":A*0.66,width:A*0.66,height:A*0.66,marginLeft:K-A*0.33,marginTop:-t-A*0.33});var s=a('");s.css({width:A*0.66,height:A*0.66,"vertical-align":"middle",display:"table-cell"});
-D.append(j);j.append(s);E+=z;C+=z}function k(S){S=S!==undefined?S:x;F.globalCompositeOperation="source-over";F.clearRect(0,0,H,H);F.fillStyle=c.fillColor;F.beginPath();F.arc(A+c.activePadding,A+c.activePadding,A,0,Math.PI*2,true);F.closePath();F.fill();F.globalCompositeOperation="destination-out";F.strokeStyle="white";F.lineWidth=c.separatorWidth;var r=c.commands;var T=2*Math.PI/(r.length);var Q=r.length%2!==0?Math.PI/2:0;var P=Q+T;for(var O=0;O' + data[key].name + '
').appendTo( container ); - jQuery('') - .appendTo( container ) - .css({ - 'width': parseInt(data[key].value) * 16, - 'padding': 0 - }); - } else { - container.append( '' + data[key].name + '
' + data[key].value + '
' ); - } - } - } - - this.raiseEvent( Biojs.ChEBICompound.EVT_ON_SUMMARY_LOADED,{ - id: data.Identifier - }); - } - - Biojs.console.log("_setSummary done"); - }, - - _buildTabPanel: function( container, onVisibilityChangeCb ) { - - container.html(''); - - var content = jQuery('').appendTo(container); - var expand = jQuery('').appendTo(container); - var collapse = jQuery('').appendTo(container); - - var buttonsWidth = parseInt( jQuery('.toggle').css('width'), 10 ); - var contentWidth = container.width() - buttonsWidth; - - container.css( 'left', 0 ) - .find('.toggle') - .click( function(){ - // Animate show/hide this tab - container.animate({ - left: ( parseInt( container.css('left'), 10 ) == 0 ? buttonsWidth - container.outerWidth() : 0 ) + "px" - }, - // to call once the animation is complete - function() { - - var visibleWidth = parseInt( container.css('left'), 10 ) == 0 ? container.width() : buttonsWidth; - - container.find('.toggle').toggle(); - - if ( "function" == typeof onVisibilityChangeCb ) { - onVisibilityChangeCb.call( this, collapse.is(':visible'), visibleWidth ); - } - } - ); - }) - .css({ - 'float':'right', - 'position':'relative' - }); - - Biojs.console.log('content width '+ contentWidth); - - content.css({ - 'width': contentWidth + "px", - 'height': container.height() + "px", - 'word-wrap': 'break-word' - }); - - return content; - }, - - getHTML: function () { - return this._container; - } - -},{ - //Events - EVT_ON_IMAGE_LOADED: "onImageLoaded", - EVT_ON_SUMMARY_LOADED: "onSummaryLoaded", - EVT_ON_REQUEST_ERROR: "onRequestError" - -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.ChEMBLCompound.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.ChEMBLCompound.js deleted file mode 100755 index 6b20f71b2d..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.ChEMBLCompound.js +++ /dev/null @@ -1,297 +0,0 @@ -/** - * - * - * @class - * @extends Biojs - * - * @author John Gomez - * @version 1.0.0 - * @category 2 - * - * @requires Server side proxy - * - * @param {Object} options An object with the options for the component. - * - * @option {string} [imageUrl="http://www.ebi.ac.uk/chebi/displayImage.do"] - * Url of the web service in order to require the compound image. - * To get a compound image, 'imageUrl + id' will be used as URI. - * - * @option {string} id - * ChEBI identifier of the compound to be displayed (i.e. '4991'). - * - * @option {int} [height=400] - * The height in pixels of how big this image should be displayed. - * - * @option {int} [width=400] - * The width in pixels of how big this image should be displayed. - * - * @example - * var instance = new Biojs.ChEMBLCompound({ - * target: 'YourOwnDivId', - * id: 'CHEMBL67' - * }); - * - * - */ -Biojs.ChEMBLCompound = Biojs.extend( -/** @lends Biojs.ChEMBLCompound# */ -{ - constructor: function(options){ - Biojs.console.enable(); - //constructor of Biojs.ChEMBLCompound - - jQuery("#"+this.opt.target).css("padding","0px") - .css("width",this.opt.width) - .css("height",this.opt.height) - .css("overflow","hidden"); - - if (this.opt.id !== undefined) { - this.setId(this.opt.id); - } - }, - - opt: { - target: 'YourOwnDivId', - id: undefined, - imageUrl: 'https://www.ebi.ac.uk/chembldb/index.php/compound/displayimage/', - detailsUrl: 'https://www.ebi.ac.uk/chemblws/compounds/', - proxyUrl: '../biojs/dependencies/proxy/proxy.php', - - height: 400, - width: 597, - scale: false, - imageIndex: 0 - }, - - eventTypes : [ - /** - * @name Biojs.ChEMBLCompound#onRequestError - * @event - * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} file The name of the loaded file. - * @eventData {string} result A string with either value 'success' or 'failure'. - * @eventData {string} message Error message in case of result be 'failure'. - * - * @example - * instance.onRequestError( - * function( e ) { - * alert( e.message ); - * } - * ); - * - * */ - "onRequestError", - /** - * @name Biojs.ChEMBLCompound#onLoadedImage - * @event - * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} id The identifier of the loaded file. - * - * @example - * instance.onLoadedImage( - * function( e ) { - * alert( e.id + " loaded." ); - * } - * ); - * - * */ - "onLoadedImage" - ], - - /** - * - * - * @example - * instance.setId('4991'); - * - */ - setId: function(chEMBLId) { - self = this; - self.opt.id = chEMBLId; - - var dimension = Math.round(self.opt.width * 0.7); - var url = self.opt.imageUrl + chEMBLId; - var image = ''+ image +'
'+
- ''
- );
-
- jQuery('#image_' + chEMBLId ).load(function() {
- self.raiseEvent('onLoadedImage', {id: chEMBLId});
- })
- .css('height',self.opt.height)
- .css('width',dimension);
-
- this._requestDetails(chEMBLId);
- },
-
- _requestDetails: function(chEMBLId){
- var self = this;
-
- Biojs.console.log('url=' + self.opt.detailsUrl + chEMBLId + '.json' );
-
- jQuery.ajax({
- url: self.opt.proxyUrl,
- dataType: 'json',
- data: 'url=' + self.opt.detailsUrl + chEMBLId + '.json',
- success: function(json){
- Biojs.console.log("SUCCESS: data received from "+this.data);
- self._buildPanel(json.compounds);
- },
- async: false,
- error: function(qXHR, textStatus, errorThrown){
- Biojs.console.log(textStatus);
- self.raiseEvent('onRequestError', {message: textStatus});
- }
- });
- },
-
-
-// // parses the xml file from the request and stores the information in an easy to access way
-// _parseResponse: function(xml){
-// var data = {};
-// var i = 0;
-// var self = this;
-//
-// xmlDoc = jQuery.parseXML( xml );
-// xmlResult = jQuery(xmlDoc).find('return');
-//
-// data.Identifier = xmlResult.find('> chEMBLId').text();
-// data.Definition = xmlResult.find('> definition').text();
-// data.Name = xmlResult.find(' > chebiAsciiName').text();
-// data.Stars = xmlResult.find(' > entityStar').text();
-// data.SecondaryIds = xmlResult.find(' > SecondaryChEBIIds').text();
-//// data.Synonyms = xmlResult.find(' > Synonyms > data').map(function(){
-//// return jQuery(this).text();
-//// }).get().join(", ");
-//
-// Biojs.console.log("Details decoded:");
-// Biojs.console.log(data);
-// return data;
-// },
-
-
- _buildPanel : function (details) {
-
- this._controlsVisible = false;
-
- Biojs.console.log(details);
-
- var self = this;
- var width = Math.round(self.opt.width * 0.3);
- var height = self.opt.height;
-
- var controlSectionDiv = jQuery("#"+self.opt.target+" > div#controlSection"+self.opt.id);
-
- controlSectionDiv.append(''+
- ''+
- '<<'+
- '>>
')
- .css("border", 0)
- .css("margin", 0)
- .css("width", "auto")
- .css("height", "auto")
- .css('float', 'left')
- .css('font-family','"Heveltica Neue", Arial, "sans serif"')
- .css('font-size','12px');
-
- // Measurements
- //
- var padding = 5;
- var tabWidth = 20, tabHeight = height;
- var controlsWidth = width - (2*padding+tabWidth), controlsHeight = height - (padding*2);
-
- //
- // Panel
- //
- var controlDiv = controlSectionDiv.find("div#controls");
-
- var detailsHTML = '';
- for (key in details) {
- if ( details[key].length > 0 ) {
- detailsHTML += '' + key + ':' + details[key] + '
'; - } - } - - controlDiv.css("position","relative") - .css("border", 0) - .css("margin", 0) - .css('background-color', "#000") - .css('color', "#fff" ) - .css('float', 'left') - .css("width", controlsWidth ) - .css("height", controlsHeight) - .css("padding", padding) - .append( detailsHTML ); - - // - // Tab - // - var showHideTab = controlSectionDiv.find('#controlTab'); - - showHideTab.css("border", 0) - .css("margin", 0) - .css("padding", 0) - .css("float", "left") - .css("width", tabWidth) - .css("height", tabHeight) - .css('background-color', "#000"); - - /** - * @private - * @function - */ - // This function will hide/show the control panel - var toggleControls = function (){ - - showHideTab.find("span").toggle(); - - if (self._controlsVisible) { - controlDiv.hide(); - //showHideTab.css('background-color', self.opt.backgroundColor); - self._controlsVisible = false; - } else { - controlDiv.show(); - //showHideTab.css('background-color', "#000"); - self._controlsVisible = true; - } - } - - self._toggleControls = toggleControls; - - showHideTab.find('#hideButton') - .click( self._toggleControls ) - .mouseover(function(){ - jQuery(this).css("color","#27C0FF"); - }) - .mouseout(function(){ - jQuery(this).css("color","#fff"); - }) - .css("color","#fff") - .css("display","none") - .css("cursor","pointer"); - - showHideTab.find('#showButton') - .click( self._toggleControls ) - .mouseover(function(){ - jQuery(this).css("color","#27C0FF"); - }) - .mouseout(function(){ - jQuery(this).css("color","#000"); - }) - .css("color","#000") - .css("cursor","pointer"); - - this._controlsReady = true; - - Biojs.console.log("_buildPanel done"); - } - - - - -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Chromosome.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Chromosome.js deleted file mode 100755 index eef4eb55e7..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Chromosome.js +++ /dev/null @@ -1,413 +0,0 @@ -/** - * This component allow to visualize a chromosome and its bands. - * The bands can be recovered from a DAS source or directly from a javascript model. - * - * @class - * @extends Biojs - * - * @author Gustavo A. Salazar - * @version 1.0.1 - * @category 2 - * - * @requires jQuery Core 1.7.2 - * @dependency - * - * @requires jsdas 0.1.6 - * @dependency - * - * @requires Chromosome CSS - * @dependency - * - * - * @requires Biojs AreaSelector - * @dependency - * - * @requires jQuery UI 1.8.2 - * @dependency - * - * @requires jQuery UI CSS 1.8.2 - * @dependency - * - * @requires jquery.watcher.js - * @dependency - * - * @requires Selector CSS - * @dependency - * - * - * - * - * @param {Object} options An object with the options for the Chromosome component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} dasSource - * URL of the DAS source to obtain the band's information. - * For example Ensembl provides the human chromosome information as a DAS source in the - * URL http://www.ensembl.org/das/Homo_sapiens.NCBI36.karyotype/ - * - * @option {string} dasSegment - * DAS segment to query, in case of chromosomes is the chromosome id (eg. 8). - * Optionally DAS sources can be queried for a spwcific region of the chromosome(eg. 8:43100000,49100001) - * - * @option {Object} model - * Alternatively to DAS, This component can receive directly a javascript object containing the relevant information. - * Here is an example of the object structure using JSON notation: - * { - * "id": "8", - * "start": 1, - * "stop": 199999, - * "bands": [ - * { - * "label": "p11", - * "type": "acen", - * "start": 1, - * "stop": "100000" - * }, - * { - * "label": "q11", - * "type": "gpos75", - * "start": 100001, - * "stop": "199999" - * } - * ] - * } - * - * @option {boolean} [includeSelector] - * Include an area selector that interacts with the coordinate position of the chromosome. default true. - * - * @example - * var instance= new Biojs.Chromosome({ - * target: "YourOwnDivId", - * dasSource: "http://www.ensembl.org/das/Homo_sapiens.NCBI36.karyotype/", - * dasSegment: "8" - * }); - * - */ -Biojs.Chromosome = Biojs.extend ( -/** @lends Biojs.Chromosome# */ -{ - constructor: function (options) { - var self = this; - $("#"+self.opt.target).html(''); - $("#"+self.opt.target+'_chr').css('position','relative'); - if (self.opt.dasSource!=null){ - var client = JSDAS.Simple.getClient(self.opt.dasSource); - client.features({segment: self.opt.dasSegment}, function(res){ - self._modelFromDAS(res,self); - }, self._error_response); - }else if (self.opt.model!=null){ - this._process_model(self.opt.model,self); - } - }, - - /** - * Default values for the options - * @name Biojs.Chromosome-opt - */ - opt: { - target: "chromosome", - model: null, - dasSource: null, - dasSegment: null, - includeSelector: true - }, - - /** - * Array containing the supported event names - * @name Biojs.Chromosome-eventTypes - */ - eventTypes: [ - /** - * @name Biojs.Chromosome#onBandSelection - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} chromosome_id Id of the chromosome that the selected band belongs. - * @eventData {string} band_id Id of the band that has been selected. - * @eventData {integer} band_start Coordinate of the first nucleotide of the selected band - * @eventData {integer} band_stop Coordinate of the last nucleotide of the selected band - * @eventData {string} band_type type of the band selected (eg. acen, gpos50, gneg). - * @example - * instance.onBandSelection(function( objEvent ) { - * alert("The band " + objEvent.band_id + " of the chromosome " + objEvent.chromosome_id + " has been selected\n[" + objEvent.band_start + "," + objEvent.band_stop + "]"); - * }); - */ - "onBandSelection", - /** - * @name Biojs.Chromosome#onSelectorChanged - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. Is triggered when the the coordinates of the selector have been changed. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} chromosome_id Id of the chromosome that the selected band belongs. - * @eventData {integer} selector_start Coordinate of the left side of the selector - * @eventData {integer} selector_stop Coordinate of the right side of the selector - * @example - * instance.onSelectorChanged(function( objEvent ) { - * alert("The selector has move to the region \n[" + objEvent.selector_start + "," + objEvent.selector_stop + "]"); - * }); - */ - "onSelectorChanged", - /** - * @name Biojs.Chromosome#onModelLoaded - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. Triggered when he model has been loaded - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {Object} model The model after been displayed - * @example - * instance.onModelLoaded(function( objEvent ) { - * alert("The model for the chromosome "+objEvent.model.id+" has been loaded"); - * }); - */ - "onModelLoaded", - /** - * @name Biojs.Chromosome#onDASLoadFail - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} - * object as argument. Triggered when the model couldn't be loaded - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} dasSource URL of the DAS source queried - * @eventData {string} dasSegment URL of the DAS source queried - * @example - * instance.onDASLoadFail(function( objEvent ) { - * alert("The DAS source "+objEvent.dasSource+" with information of the segment "+objEvent.dasSegment+" couldn't be loaded"); - * }); - */ - "onDASLoadFail" - ], - - /** - * @private - * Private: Callback function in case of an error in the DAS query. - */ - _error_response: function(){ - var self=this; - $("#"+self.opt.target).append("ERROR querying the DAS source."); - self.raiseEvent('onDASLoadFail', { - dasSource: self.opt.dasSource, - dasSegment: self.opt.dasSegment - }); - }, - - /** - * @private - * Private: Callback function when the DAS response is captured. - * It maps the response into the internal model for bands. - */ - _modelFromDAS: function(res,parent){ - if(typeof parent != "undefined") - var self=parent; - var annotations = res.GFF.SEGMENT[0].FEATURE, chr_start=res.GFF.SEGMENT[0].start, chr_stop=res.GFF.SEGMENT[0].stop; - var model = { - id: res.GFF.SEGMENT[0].id, - start: res.GFF.SEGMENT[0].start*1, - stop: res.GFF.SEGMENT[0].stop, - bands:null - }; - var bands=[]; - var first="first",last=""; - for (var i in annotations){ - var ann = annotations[i],type=ann.TYPE.id.substr(5); - if (type=="acen"){ - if (ann.id[0]=="p") type="p_acen"; - else if (ann.id[0]=="q") type="q_acen"; - } - bands.push({start:ann.START.textContent*1,stop:ann.END.textContent*1,label:ann.id,type:type}); - } - model.bands=bands; - self.opt.model=model; - self._process_model(model,self); - }, - - /** - * @private - * Private: Creates a div element for each band in the model; the width of the band is calculated as a percentage - * of the relationship between the number of nucleotides in the band and the number of nucleotides of the chromosome. - */ - _process_model: function(model,self){ - //Sorting the bands by the start coordinate - model.bands.sort( - /** - * @ignore - **/ - function sortfunc(a,b){ - return a.start-b.start; - }); - var first="first",last="",firstid=null,firstW=null; - for (var i in model.bands){ - var band = model.bands[i]; - if (i*1+1==model.bands.length) - last="last"; - var percentage=94*(band.stop-band.start)/model.stop;// no using the 100% of the width, so there is an extra space for the borders - var band_id=model.id+"_"+band.label; - $("#"+self.opt.target+'_chr').append(""); - band_id=band_id.replace(/\./gi, "\\."); - $("#"+band_id).click(function (){ - //Finding the band in the model - var band={} - for (var j in model.bands){ - if ($(this).attr("title")==model.bands[j].label) - band=model.bands[j]; - } - //arising an event with the ban info - self.raiseEvent('onBandSelection', { - chromosome_id : model.id, - band_id: band.label, - band_start: band.start, - band_stop: band.stop, - band_type: band.type - }); - //If the selector is included then its position gets updated to the selected band - if (self.opt.includeSelector){ - self.opt.selector.from=band.start; - self.opt.selector.to=band.stop; - self.raiseEvent('onSelectorChanged', { - chromosome_id : model.id, - selector_start: band.stop, - selector_stop: band.type - }); - self._moveSelectorToDivCoordinates($(this).position().left,$(this).position().left+$(this).width()); - } - }); - if(first!="") { - firstid=band_id; //id of the first band - firstW=band.stop; - } - first=""; - } - //Setting up the selector in case is included - if (self.opt.includeSelector){ - //The selector just allows horizontal interaction and is preseted in the first band - self.opt.selector = new Biojs.AreaSelector({ - target: self.opt.target+'_chr', - resize_top: false, - resize_bottom: false, - area:[0,-5,$('#'+firstid).width(),20] - }); - //Creating two more attributes in the object to save chromosome coordinates where is visible, starting in the first band - self.opt.selector.from = 0; - self.opt.selector.to = firstW; - self.opt.selector.fromWatcher=false; - //When the selector change its position the chromosome coordinates have to be updated - self.opt.selector.onRegionChanged(function( objEvent ) { - if (!self.opt.selector.fromWatcher){ - self.opt.selector.from = self._getCoordinateFromLeft(objEvent.region[0]); - self.opt.selector.to = self._getCoordinateFromLeft(objEvent.region[2]); - self.raiseEvent('onSelectorChanged', { - chromosome_id : self.opt.model.id, - selector_start: self.opt.selector.from, - selector_stop: self.opt.selector.to - }); - } - }); - //if the div containing the chromosome is resized or moved the selector is modified with - $("#"+self.opt.target).watch("left,top,width,height,display", function() { - self.opt.selector.fromWatcher=true; - if (self.opt.selector.from!=null && self.opt.selector.to!=null ) - self.moveSelectorToCoordinates(self.opt.selector.from,self.opt.selector.to); - self.opt.selector.fromWatcher=false; - }, 100, "_containerMove"); - } - self.raiseEvent('onModelLoaded', { - model: model - }); - - }, - /** - * AreaSelector component that allows to interact with the chromosome. - * Optional feature, that can be disable in the options object by setting the feature includeSelector to false - * @private - * @name Biojs.Chromosome-selector - */ - selector:null, - /** - * Move the Selector to a specific place in the chromosome - * - * @param {integer} from initial chromosome coordinate to locate the selector - * @param {integer} to final chromosome coordinate to locate the selector - * - * @example - * instance.moveSelectorToCoordinates(10000000,20000000); - * - */ - moveSelectorToCoordinates: function(from, to){ - var self=this; - if(self.opt.selector!=null){ - self.opt.selector.from=from; - self.opt.selector.to=to; - self._moveSelectorToDivCoordinates(self._getLeftFromCoordinate(from),self._getLeftFromCoordinate(to)); - }else - return false; - }, - - /** - * Gives the corresponding value for left in respect of the parent component from a chromosome coordinate - * @private - * @name Biojs.Chromosome-_getLeftFromCoordinate - */ - _getLeftFromCoordinate: function(coordinate){ - var self=this; - var band=null - for (var j in self.opt.model.bands){ - var b=self.opt.model.bands[j]; - if (coordinate>=b.start && coordinate<=b.stop){ - band=b; - break; - } - } - if (band!=null){ - var band_id=self.opt.model.id+"_"+band.label; - band_id=band_id.replace(/\./gi, "\\."); - var leftDiv = $("#"+band_id).position().left, - widthDiv= $("#"+band_id).width(), - leftBand=band.start, - widthBand=band.stop-band.start; - return leftDiv+ (((coordinate-leftBand)*widthDiv)/widthBand); - }else - return false; - - }, - /** - * Gives the corresponding value for a chromosome coordinate from the left value in respect of the parent component - * @private - * @name Biojs.Chromosome-_getCoordinateFromLeft - */ - _getCoordinateFromLeft: function(left){ - var self=this; - var band=null - for (var j in self.opt.model.bands){ - var b=self.opt.model.bands[j]; - var band_id=self.opt.model.id+"_"+b.label; - band_id=band_id.replace(/\./gi, "\\."); - - if (left>=$("#"+band_id).position().left && left<=$("#"+band_id).position().left + $("#"+band_id).width()){ - var leftDiv = $("#"+band_id).position().left, - widthDiv= $("#"+band_id).width(), - leftBand=b.start, - widthBand=b.stop-b.start; - return leftBand+ (((left-leftDiv)*widthBand)/widthDiv); - } - } - return false; - - }, - - /** - * moves the selector to a position in the div using the div relative coordinates - * @private - * @name Biojs.Chromosome-_moveSelectorToDivCoordinates - */ - _moveSelectorToDivCoordinates: function(from, to){ - var self=this; - if (self.opt.includeSelector && self.opt.selector!=null) - self.opt.selector.setCoveredArea([from,-5,to,20]); - } -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Cytoscape.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Cytoscape.js deleted file mode 100755 index dd2b2340ba..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Cytoscape.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * The Cytoscape.js component is a wrapper that allows you to use Cytoscape.js in BioJS. - * - * @class - * @extends Biojs - * - * @author Max Franz - * @version 1.0.0 - * @category 1 - * - * @requires Cytoscape.js (latest version strongly recommended) - * @dependency - * - * @param {Object} options An object with the options for Cytoscape.js. - * - * @option {string} container - * The ID of the HTML DOM element in which Cytoscape.js will be placed. - * - * - * @example - * var cy; - * var instance = new Biojs.Cytoscape({ - * container: window.document.getElementById('some-div-id'), - * ready: function(){ - * cy = this; // now you can use cytoscape.js as normal - * } - * }); - * - * - */ -Biojs.Cytoscape = Biojs.extend( -/** @lends Biojs.Cytoscape# */ -{ - constructor: function(options){ - cytoscape( options ); - }, - - /** - * Default values for the options - * @name Biojs.Cytoscape-opt - */ - opt: { - container: undefined - }, - - /** - * Array containing the supported event names - * @name Biojs.Cytoscape-eventTypes - */ - eventTypes: [ - ] - -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.DNAContentViewer.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.DNAContentViewer.js deleted file mode 100755 index 7c159a5bbd..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.DNAContentViewer.js +++ /dev/null @@ -1,1024 +0,0 @@ -/** - * This component uses the D3 library to visualise contents of a DNA sequence, with panning and zooming functionality. - * - * @class - * @extends Biojs - * - * @author Anil Thanki, Shabhonam Caim - * @version 1.0.0 - * @category 2 - * - * - * @requires D3 - * @dependency - * - * - * @requires jQuery UI 1.8.2+ - * @dependency - * - * @requires jQuery Core 1.6.4 - * @dependency - * - * @requires biojs.DNAContentViewer.css - * @dependency - * - * - * @requires jQuery UI CSS 1.8.2 - * @dependency - * - * - * @param {Object} options An object with the options for DNAContentViewer component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} [fontFamily='"Andale mono", courier, monospace'] - * Font list to be applied to the component content. - * - * @option {string} [fontColor="white"] - * HTML color code for the font. - * - * @option {string} [backgroundColor="#7BBFE9"] - * Background color for the entire div content. - * - * @option {Object} [selectionFontColor="white"] - * This color will be used to change the font color of selected text. - * - * @option {Object} [selectionBackgroundColor="yellow"] - * This color will be used to change the background of selected text. - * - * @option {string} dataSet - * File in text format including input sequence data in raw format. Example of text file ...
- *
ACGACTAGCATCAGCATCGACACGACTAGCACTGGACTGAATCGACATCGACATGC - * ...- * - * @example - * var instance = new Biojs.DNAContentViewer({ - * target: "YourOwnDivId", - * selectionBackgroundColor: '#99FF00', - * dataSet: "../biojs/data/DNAContentViewerData.txt" - * }); - * - */ - - -Biojs.DNAContentViewer = Biojs.extend( - /** @lends Biojs.DNAContentViewer# */ - - - { - zoomSlider: '', - slider_stop: 0, - slider_start: 0, - track: [], - track_bins: [], - width: 1, - height: 1, - data_last_start: 1, - data_first_start: 1, - max: 0, - data: [], - main_data: [], - - - constructor: function (options) { - - var self = this; - self.vis = null; - self.color = null; - self.foci = []; - - - this.track; // data - this.track_bins; // data - - - this._container = $("#DNAContentFeaturePainter-holder"); - $(this._container).addClass("graph"); - - - // Apply options values - this._container.css({ - 'font-family': self.opt.fontFamily, // this is one example of the use of self instead of this - 'background-color': self.opt.backgroundColor, - 'color': self.opt.fontColor, - 'font-size': '36px', - 'text-align': 'center', - 'vertical-align': 'middle', -// 'left':'10px', - 'width': '600px', - 'height': '100px', - 'bottom': '0px' - - }); - - // Disable text selection and - // Change the selection mouse pointer - // from text to hand. - this._container.css({ - '-moz-user-select': 'none', - '-webkit-user-select': 'none', - 'user-select': 'none' - }); - - this.paintDNAContentContent(self.opt.dataSet); - - }, - - /** - * Default values for the options - * @name Biojs.DNAContentViewer-opt - */ - opt: { - target: "YourOwnDivId", - dataSet: "", - fontFamily: '"Andale mono", courier, monospace', - fontColor: "white", - backgroundColor: "#7BBFE9", - selectionFontColor: "black", - selectionBackgroundColor: "yellow", - width: "100%", - height: "130", - radius: 10 - }, - - /** - * Array containing the supported event names - * @name Biojs.DNAContentViewer-eventTypes - */ - eventTypes: [ - /** - * No events added for now but can be added in future - */ - ], - - - /** - * Repaints everything: ruler, shapes, and legend. - * @param {boolean} [withoutZoom=false] When false, it zooms according to the slider values. - * @param {int} [newStart] Zoom from this sequence start value. - * @param {int} [newStop] Zoom to this sequence end value. - * - * @example - * instance._updateDraw(); - * - */ - _updateDraw: function (withoutZoom, newStart, newStop) { - //recalculate start and stop - - if (newStart && newStop) { - - this.slider_start += newStart; - this.slider_stop += newStop; - this._calculateContent(this.slider_start, this.slider_stop); - } - else { - this._calculateContent(); - - } - - if (this.slider_start < this.data_first_start) { - if (newStart == newStop) { - this.slider_stop += this.data_first_start - this.slider_start; - } - this.slider_start = this.data_first_start; - - } - - if (this.slider_stop > this.data_last_start) { - if (newStart == newStop) { - this.slider_start += this.data_last_start - this.slider_stop; - } - this.slider_stop = this.data_last_start; - } - - this._paintDNAContentGraph(undefined, this.slider_start, this.slider_stop); - }, - - /** - * 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. - * - * @example - * instance.paintDNAContentContent("../biojs/data/DNAContentViewerData.txt"); - * - * @param {string} dataSet Location of the file with the input text file in raw sequence format. - *
ACGACTACGACTAGCATCAGCATCAGCACTAGCATCAGCACTAGCACTAGCACTAGCATCAGCACTAGCACTAGCACTGACACT...- */ - paintDNAContentContent: function (dataSet) { - if (dataSet != undefined) { - this._setDataSource(dataSet); - this._init(); - } else { - this.$errorMsg = jQuery('') - .html('There was an unexpected failure, the image cannot be displayed. data is undefined.') - .dialog({ - autoOpen: true, - title: 'Error', - modal: true - }); - throw "Error"; - } - - }, - - /** - * Private: Initializes the component. - */ - _init: function () { - Biojs.DNAContentViewer.myself = this; - //First create the slider, button, and holder - var painter_div = jQuery("#" + this.opt.target); - painter_div.text(''); - painter_div.append(this._withSliderOnly(100)); - - painter_div.append(''); - - var holder = document.getElementById("DNAContentPainter-holder"); - if (!holder) { - this.$errorMsg = jQuery('') - .html('There was an unexpected failure, the image cannot be displayed.') - .dialog({ - autoOpen: true, - title: 'Error', - modal: true - }); - throw "Error"; - } - holder.innerHTML = ""; - holder.style.height = "200px"; - holder.style.width = "700px"; - var self = this; - this.width = $("#DNAContentPainter-holder").width(), - this.height = $("#DNAContentPainter-holder").height(), - this.r = self.opt.radius; - - self.opt.width = self.opt.width.toString(); - if (self.opt.width.indexOf("%") != -1) - this.width = this.width * (self.opt.width.substring(0, self.opt.width.length - 1) * 1) / 100.0; - else - this.width = self.opt.width * 1; - self.opt.width = parseInt(this.width); - - self.opt.height = self.opt.height.toString(); - if (self.opt.height.indexOf("%") != -1) - this.height = this.height * (self.opt.height.substring(0, self.opt.height.length - 1) * 1) / 100.0; - else - this.height = self.opt.height * 1; - self.opt.height = parseInt(this.height); - - - self.color = function () { - return d3.scale.ordinal().range(self.colors); - }(); - - d3.text(self.opt.dataSet, function (data, error) { - self.track = data; - var length = data.length - 1; - self._paintLegend(); - self._updateLegend(self._Statsforchunk(self.track)); - self.slider_start = 0; - self.slider_stop = length; - self.data_last_start = length; - self.data_first_start = 0; - - self._paintSlider(); - self._paintMarkersGraph(); - self._updateDraw(); - }); - - }, - - /** - * Private: Function to create slider only. - * @param {int} sizeX Width. - * @ignore - */ - _withSliderOnly: function (sizeX) { - var text = - '
| ' + - ' | ' + - '' + - ' | ' + - '' + - ' | ' + - '
'; - return text; - }, - - - /** - * Private: Function to calculate AT/GC content for given positions. - * @param {string} newStart start position. - * @param {string} newStop stop position. - * @ignore - */ - _calculateContent: function (newStart, newStop) { - var sequence = this.track; - if (newStart && newStop) { - if (newStart < 0) { - newStart = 0; - } - if (newStop > this.slider_stop) { - newStop = this.slider_stop; - } - - sequence = sequence.substring(newStart, newStop) - - } else { - newStart = 0; - } - - var DNAContent_content = [] - var seq_len = sequence.length; - var i = 0; - if (seq_len > 100) { - while (i <= seq_len) { - var chunk = sequence.substr(i, Math.floor(seq_len / 100)); - DNAContent_content.push({start: parseInt(newStart) + parseInt(i), gc_value: this._GCforchunk(chunk), at_value: this._ATforchunk(chunk)}); - i += Math.floor(seq_len / 100); - } - if (i < seq_len) { - var chunk = sequence.substr(i); - DNAContent_content.push({start: parseInt(newStart) + parseInt(i), gc_value: this._GCforchunk(chunk), at_value: this._ATforchunk(chunk)}); - } - } else { - while (i <= seq_len) { - var chunk = sequence.substr(i, 10); - DNAContent_content.push({start: parseInt(newStart) + parseInt(i), gc_value: this._GCforchunk(chunk), at_value: this._ATforchunk(chunk)}); - i += 1; - } - } - - this.max = 100; - this.track_bins = DNAContent_content; - }, - - - - /** - * Private: Function to calculate AT/GC stats for chunk.. - * @param {string} chunk sequence. - * Returns: (int) gc - * @ignore - */ - _Statsforchunk: function (chunk) { - var chunk_array = chunk.split(""); - var gc = 0; - var at = 0; - var ot = 0; - var total = 0; - for (var a = 0; a < chunk_array.length; a++) { - if (chunk_array[a].toLocaleLowerCase() == "g" || chunk_array[a].toLocaleLowerCase() == "c") { - gc++; - } - else if (chunk_array[a].toLocaleLowerCase() == "a" || chunk_array[a].toLocaleLowerCase() == "t") { - at++; - } - else { - ot++; - } - total++; - } - return ({total: total, gc: gc, at: at, ot: ot}); - }, - - - /** - * Private: Function to calculate AT % for chunk. - * @param {string} chunk sequence. - * Returns: (int) gc - * @ignore - */ - _GCforchunk: function (chunk) { - var chunk_array = chunk.split(""); - var gc = 0; - var total = 0; - for (var a = 0; a < chunk_array.length; a++) { - if (chunk_array[a].toLocaleLowerCase() == "g" || chunk_array[a].toLocaleLowerCase() == "c") { - gc++; - } - total++; - } - return gc * 100 / total; - }, - - /** - * Private: Function to calculate AT % for chunk. - * @param {string} chunk sequence. - * Returns: (int) at - * @ignore - */ - _ATforchunk: function (chunk) { - var chunk_array = chunk.split(""); - var at = 0; - var total = 0; - - for (var a = 0; a < chunk_array.length; a++) { - if (chunk_array[a].toLocaleLowerCase() == "a" || chunk_array[a].toLocaleLowerCase() == "t") { - at++; - } - total++; - } - return at * 100 / total; - }, - - - /** - * Private: Paints the slider - * Purpose: set up slider buttons - * Returns: - - * @ignore - */ - _paintSlider: function () {//holder size, left and right margins of the holder, and number of amino acids - var sequenceLength = 100;//config.sequenceLength; - if (!document.getElementById("DNAContentPainter-slider")) { - return; - } - - var slider_div = jQuery("#DNAContentPainter-slider"); - slider_div.text(''); - slider_div.append(''); - slider_div.append(''); - var self = this; - var diff = parseInt(self.track.length / 100); - this.zoomSlider = jQuery('').appendTo(slider_div); - - - slider_div.html('Controls:
' + - '' + - '' + - '') - }, - - /** - * Private: Paints the AT/GC Legengd and MArker radio buttons - * Returns: - - * @ignore - */ - _paintLegend: function () {//holder size, left and right margins of the holder, and number of amino acids - var self = this; - - if (!document.getElementById("DNAContentPainter-slider")) { - return; - } - - var slider_div_legend = jQuery("#DNAContentPainter-Legend"); - - slider_div_legend.html('
GC Content
' +
- ' AT Content
')
-
- $("#at_checkbox").change(function () {
- self._toggleAT();
- });
-
-
- $("#gc_checkbox").change(function () {
- self._toggleGC();
- });
-
-
- var marker_legend = jQuery("#Marker-Legend");
-
- marker_legend.html(' Marker Position:
Left Centre Right
')
-
- $(".marker-pos").change(function () {
- self._toggleMarker(this);
- });
- },
-
- /**
- * Private: Updates percentage values in AT/GC legends
- * Returns: -
- * @ignore
- */
- _updateLegend: function (stats) {//holder size, left and right margins of the holder, and number of amino acids
-
- if (!document.getElementById("DNAContentPainter-slider")) {
- return;
- }
-
- var at_perc = parseFloat(stats.at * 100 / stats.total).toFixed(2);
- var gc_perc = parseFloat(stats.gc * 100 / stats.total).toFixed(2);
-
-
- var gc_perc_div = jQuery("#gc_perc");
- var at_perc_div = jQuery("#at_perc");
-
-
- gc_perc_div.html(gc_perc + '%')
- at_perc_div.html(at_perc + '%')
- },
-
-
- /**
- * Private: Draws area chart from DNA string using D3.js
- * @param {boolean} [withoutZoom=false] When true, this method recalculates the total for each feature type.
- * @param {int} [start=0] When true, this method recalculates the total for each feature type.
- * @param {int} [end=max] When true, this method recalculates the total for each feature type.
- * @ignore
- */
- _paintDNAContentGraph: function (withoutZoom, start, end) {
- var self = this;
- var left = "50px";
- var top = "0px";
- var filtered_track = this.track_bins;
-
- // filter data if start and end positions are defined
- if (start && end) {
- filtered_track = jQuery.grep(self.track_bins, function (element) {
- return element.start >= start && element.start <= end; // retain appropriate elements
- });
- }
-
-
- var height = this.height;
- var width = this.width;
- var max = Math.ceil(this.max / 100) * 100
- var length = filtered_track.length - 1;
-
- var space = parseInt(width) / (filtered_track[length].start - filtered_track[0].start);
-
- if (length > 0) {
-
- this._clear();
-
- var svg = d3.select("#DNAContentPainter-holder").select("svg")
- .append("g")
- .attr("width", this.width)
- .attr("height", this.height + 30)
- .attr("class", "redrawn-path")
- .attr("transform", "translate(" + left + "," + top + ")");
-
- this._container = jQuery("#DNAContentPainter-holder");
-
- var d3line2 = d3.svg.line()
- .x(function (d) {
- return d.x;
- })
- .y(function (d) {
- return d.y;
- })
- .interpolate("linear");
-
-
- var gc_pathinfo = [];
- var at_pathinfo = [];
-
- var last_start = 0;
- // check for average difference between each positions
- var diff = parseInt(filtered_track[1].start - filtered_track[0].start);
-
-
- // loop through each element and calculate x and y axis for chart
- for (var i = 0; i < filtered_track.length - 1;) {
-
-
- var gc_tempx, at_tempx;
-
- if (start) {
- gc_tempx = (filtered_track[i].start - start) * space;
- at_tempx = (filtered_track[i].start - start) * space;
- } else {
- gc_tempx = (filtered_track[i].start) * space;
- at_tempx = (filtered_track[i].start) * space;
-
- }
- var gc_tempy = height - (filtered_track[i].gc_value * height / max);
- var at_tempy = height - (filtered_track[i].at_value * height / max);
- gc_pathinfo.push({ x: gc_tempx, y: gc_tempy});
- at_pathinfo.push({ x: at_tempx, y: at_tempy});
-
- i++;
-
- last_start = filtered_track[i].start;
-
- }
-
- if (start) {
- gc_tempx = (filtered_track[filtered_track.length - 1].start - start) * space;
- at_tempx = (filtered_track[filtered_track.length - 1].start - start) * space;
- }
-
- var gc_tempy = height - (filtered_track[filtered_track.length - 1].gc_value * height / max);
- var at_tempy = height - (filtered_track[filtered_track.length - 1].at_value * height / max);
-
- gc_pathinfo.push({ x: gc_tempx, y: gc_tempy});
- at_pathinfo.push({ x: at_tempx, y: at_tempy});
-
- var path = svg.selectAll("path")
- .data([1]);
-
- //select 10 positions to be displayed on x axis
- var filter_track_legend = [];
- for (i = 0; i < filtered_track.length;) {
- filter_track_legend.push(filtered_track[i]);
- i += parseInt(length / 10);
- }
-
- //draw selected 10 positions as legend
- var legendtext = svg.selectAll('text.day')
- .data(filter_track_legend);
-
- legendtext.enter().append('svg:text')
- .attr('x', function (d) {
- if (start) {
- return (d.start - start) * space;
-
- } else {
- return (d.start ) * space;
- }
- })
- .attr('y', 160)
- .attr('text-anchor', 'middle')
- .style("font-size", "10px")
- .text(function (d) {
- if (d.start > 1000000) {
- return parseInt(d.start / 1000000) + "M";
- } else if (d.start > 1000) {
- return parseInt(d.start / 1000) + "K";
- } else {
- return d.start;
- }
- });
-
- //select 10 positions to be displayed on x axis
- var marker_legend = [];
-
- for (i = 1; i <= 10; i++) {
- marker_legend.push((max / 10) * i);
-
- }
-
- // lines at bottom of diagram to show the positions
- var line = svg.selectAll("line.bottom")
- .data(filtered_track);
- line.enter().insert("svg:line")
- .attr("class", "line")
- .attr("x1", function (d) {
- if (start) {
- return (d.start - start) * space;
-
- } else {
- return (d.start ) * space;
- }
- })
- .attr("y1", 130)
- .attr("x2",function (d) {
- if (start) {
- return (d.start - start) * space;
-
- } else {
- return (d.start ) * space;
- }
- }).attr("y2", function (d, i) {
- return 140;
- })
- .attr('stroke', function () {
- return "black";
- });
-
- var line = svg.selectAll("line.bottom")
- .data(filter_track_legend);
- line.enter().insert("svg:line")
- .attr("class", "line")
- .attr("x1", function (d) {
- if (start) {
- return (d.start - start) * space;
-
- } else {
- return (d.start ) * space;
- }
- })
- .attr("y1", 130)
- .attr("x2",function (d) {
- if (start) {
- return (d.start - start) * space;
-
- } else {
- return (d.start ) * space;
- }
- }).attr("y2", function (d, i) {
- return 150;
- })
- .attr('stroke', function () {
- return "black";
- });
-
-
- var line_base = svg.selectAll("line.bottom")
- .data([1]);
- line_base.enter().insert("svg:line")
- .attr("class", "line base")
- .attr("x1", function (d) {
-
- return 0;
- })
- .attr("y1", function (d) {
- return height;
- })
- .attr("x2",function (d) {
- return width;
- }).attr("y2", function (d) {
- return height;
- })
- .attr('stroke', function () {
- return "black";
- });
-
-
- //draw path from calculated chart axis
- path.enter().append("svg:path")
- .attr("width", 200)
- .attr("height", 200)
- .attr("class", "path gc-path")
-
- .attr('stroke', function () {
- return "blue";
- })
- .attr('stroke-width', function () {
- return "2px";
- })
- .attr("fill", function () {
- return "transparent";
- })
- .attr("d", d3line2(gc_pathinfo));
-
-
- //draw path from calculated chart axis
- path.enter().append("svg:path")
- .attr("width", 200)
- .attr("height", 200)
- .attr("class", "path at-path")
-
- .attr('stroke', function () {
- return "red";
- })
- .attr('stroke-width', function () {
- return "2px";
- })
- .attr("fill", function () {
- return "transparent";
- })
- .attr("d", d3line2(at_pathinfo));
- }
- },
-
- /**
- * Private: Draws percentage markers using D3.js
- * @ignore
- */
- _paintMarkersGraph: function () {
- var left = "50px";
- var top = "0px";
- var height = this.height;
- var width = this.width;
- var max = 100
-
-
- this._clear();
-
- var svg = d3.select("#DNAContentPainter-holder").append("svg")
- .style("overflow", "visible")
- .append("g")
- .attr("class", "marker-base")
- .attr("width", this.width)
- .attr("height", this.height + 30)
- .attr("transform", "translate(" + left + "," + top + ")");
-
- this._container = jQuery("#DNAContentPainter-holder");
-
-
- //select 10 positions to be displayed on x axis
- var marker_legend = [];
-
- for (var i = 1; i <= 10; i++) {
- marker_legend.push((max / 10) * i);
-
- }
-
-
- var markertext = svg.selectAll('text.marker')
- .data(marker_legend);
-
- markertext.enter().append('svg:text')
- .attr("class", "text marker")
- .attr('x', function (d) {
- return 10;
- })
- .attr('y', function (d) {
- return height - (d * height / max) + parseInt(5);
- })
- .attr('text-anchor', 'begin')
- .style("font-size", "10px")
- .text(function (d, i) {
- return ((i + 1) * 10) + "%";
- });
-
- // lines at bottom of diagram to show the positions
- var marker = svg.selectAll("tick.marker")
- .data(marker_legend);
- marker.enter().insert("svg:line")
- .attr("class", "tick tickmarker")
- .attr("x1", function (d) {
- return 0;
- })
- .attr("y1", function (d) {
- return height - (d * height / max);
- })
- .attr("x2",function (d) {
- return 5;
- }).attr("y2", function (d) {
- return height - (d * height / max);
- })
- .attr('stroke', function () {
- return "black";
- });
-
- var marker_base = svg.selectAll("line.bottom")
- .data([1]);
- marker_base.enter().insert("svg:line")
- .attr("class", "line marker base")
- .attr("x1", function (d) {
- return 1;
- })
- .attr("y1", function (d) {
- return 0;
- })
- .attr("x2",function (d) {
- return 1;
- }).attr("y2", function (d) {
- return height;
- })
- .attr('stroke', function () {
- return "black";
- });
- },
-
- /**
- * Private: Paints the slider
- * Purpose: set up slider buttons
- * Returns: -
- * @ignore
- */
- _toggleAT: function () {//holder size, left and right margins of the holder, and number of amino acids
- if (jQuery(".at-path").css('display') == 'none') {
- jQuery(".at-path").show();
- } else {
- jQuery(".at-path").hide();
- }
- },
-
- /**
- * Private: Paints the slider
- * Purpose: set up slider buttons
- * Returns: -
- * @ignore
- */
- _toggleGC: function () {//holder size, left and right margins of the holder, and number of amino acids
-
- if (jQuery(".gc-path").css('display') == 'none') {
- jQuery(".gc-path").show();
- } else {
- jQuery(".gc-path").hide();
- }
- },
-
- /**
- * Private: Paints the slider
- * Purpose: set up slider buttons
- * Returns: -
- * @ignore
- */
- _toggleMarker: function (self) {//holder size, left and right margins of the holder, and number of amino acids
- console.log(self)
- var svg = d3.select("#DNAContentPainter-holder")
- var width = this.width;
- var marker = svg.selectAll("line.marker");
- var marker_text = svg.selectAll("text.marker");
- var marker_tick = svg.selectAll("line.tick");
-
- if (self.value == "left") {
- marker.transition()
- .duration(500)
- .attr("x1", function (d) {
- return 1;
- })
- .attr("x2", function (d) {
- return 1;
- });
-
- marker_text.transition()
- .duration(500)
- .attr('text-anchor', 'begin')
- .attr('x', function (d) {
- return 10;
- });
-
- marker_tick.transition()
- .duration(500)
- .attr("x1", function (d) {
- return 0;
- })
- .attr("x2", function (d) {
- return 5;
- })
- } else if (self.value == "centre") {
- marker.transition()
- .duration(500)
- .attr("x1", function (d) {
- return width / 2;
- })
- .attr("x2", function (d) {
- return width / 2;
- });
-
- marker_text.transition()
- .duration(500)
- .attr('text-anchor', 'begin')
- .attr('x', function (d) {
- return parseInt(width / 2) + parseInt(10);
- });
-
- marker_tick.transition()
- .duration(500)
- .attr("x1", function (d) {
- return width / 2;
- })
- .attr("x2", function (d) {
- return parseInt(width / 2) + parseInt(5);
- })
- } else {
- marker.transition()
- .duration(500)
- .attr("x1", function (d) {
- return width;
- })
- .attr("x2", function (d) {
- return width;
- });
-
- marker_text.transition()
- .duration(500)
- .attr('text-anchor', 'end')
- .attr('x', function (d) {
- return parseInt(width) - parseInt(10);
- });
-
- marker_tick.transition()
- .duration(500)
- .attr("x1", function (d) {
- return (width - 5);
- })
- .attr("x2", function (d) {
- return width;
- })
- }
- },
-
- /**
- * Private: Clears all divs content.
- * @ignore
- */
- _clear: function () {
- d3.select("#DNAContentPainter-holder").select("svg").select("g.redrawn-path").remove();
- },
-
- /**
- * Private: sets data source.
- * @param {string} [dataset], it sets file path to this.opt.dataset.
- * @ignore
- */
- _setDataSource: function (dataSet) {
- this.opt.dataSet = dataSet;
- },
-
- _addSimpleClickTrigger: function () {
-
- var self = this;
-
- // Add the click event to each character in the content
- this._container.find('span')
- .click(function (e) {
- // A letter was clicked!
- // Let's discover which one was it
- // TIP: e.target contains the clicked DOM node
- var selected = jQuery(e.target).text();
-
- // Create an event object
- var evtObject = { "selected": selected };
-
- // We're ready to raise the event onClick of our component
- self.raiseEvent('onClick', evtObject);
- });
- }
-
-
- }, {
- myself: undefined
- });
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.DasProteinFeatureViewer.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.DasProteinFeatureViewer.js
deleted file mode 100755
index 4923bdbc91..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.DasProteinFeatureViewer.js
+++ /dev/null
@@ -1,341 +0,0 @@
-/**
- * This component uses a DASProtein web service that builds the JSON data object used by FatureViewer component.
- *
- * @class
- * @extends Biojs.FeatureViewer
- *
- * @author Leyla Jael Garcia Castro
- * @version 1.0.0
- * @category 2
- *
- *
- * @param {Object} options An object with the options for DASProteinFeatureViewer component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {boolean} [showSlider=true]
- * Should the slider for zooming be displayed?
- *
- * @option {boolean} [showPrintButton=true]
- * Should the button for printing/exporting to image be displayed?
- *
- * @option {boolean} [showFeatureTooltipOnMouseOver=true]
- * Should the tooltip for features be displayed?
- *
- * @option {boolean} [highlightFeatureOnMouseOver=true]
- * Should the features be highlighted when mouse over?
- *
- * @option {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?
- *
- * @option {boolean} [dragSites=true]
- * Should the sites be draggable?
- *
- * @option {string} segment
- * Protein identifier or protein accession
- *
- * @option {string} [dasSources="http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot"]
- * DAS protein sources used to retrieved the features, if another one is needed, just add something like ",URL"
- *
- * @option {string} featureTypes
- * 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
- *
- * @option {string} featureNames
- * 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
- *
- * @option {int} [imageWidth=700]
- * Image width
- *
- * @option {string} [imageStyle="nonOverlapping"]
- * Image style, a value from {nonOverlapping, centered, rows}
- *
- * @option {boolean} [hgrid=false]
- * Should horizontal lines be shown?
- *
- * @option {boolean} [vgrid=false]
- * Should vertical lines be shown?
- *
- * @option {boolean} [allFeatures=true]
- * 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
- *
- * @option {boolean} [allRectangles=false]
- * 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
- *
- * @option {boolean} [allSameSize=false]
- * If "centered" is the image style option, should all rectangles have the same size?
- *
- * @option {string} [proxyUrl="../biojs/dependencies/proxy/proxy.php"]
- * Server side proxy server.
- *
- * @example
- * var myPainter = new Biojs.DasProteinFeatureViewer({
- * target: "YourOwnDivId",
- * segment: "a4_human"
- * });
- *
- */
-Biojs.DasProteinFeatureViewer = Biojs.FeatureViewer.extend(
- /** @lends Biojs.DasProteinFeatureViewer */
- {
- /*
- * Private variables
- */
- _webservice:"http://wwwdev.ebi.ac.uk/uniprot/featureViewer/image",
- _dasReference:"http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/",
- /**
- * Default values for the options
- * @name Biojs.DasProteinFeatureViewer-constructor
- */
- constructor:function (options) {
- this.base(options);
- var self = this;
- //Biojs.console.enable();
- //create params from options
- var params = "?";
- params = params + "&option=raphael";
- if (!Biojs.Utils.isEmpty(options.segment)) {
- params = params + "&segment=" + options.segment;
- } else {
- throw "A UniProt accession or identifier is mandatory";
- }
- if (!Biojs.Utils.isEmpty(options.dasSources)) {
- params = params + "&dasSources=" + options.dasSources;
- }
- if (!Biojs.Utils.isEmpty(options.featureTypes)) {
- params = params + "&" + options.featureTypes;
- }
- if (!Biojs.Utils.isEmpty(options.featureNames)) {
- params = params + "&" + options.featureNames;
- }
- if ((options.imageWidth != undefined) && (!isNaN(options.imageWidth))) {
- params = params + "&width=" + options.imageWidth;
- }
- if (!Biojs.Utils.isEmpty(options.imageStyle)) {
- params = params + "&style=" + options.imageStyle;
- }
- if ((options.hgrid != undefined) && (options.hgrid == true)) {
- params = params + "&hgrid";
- }
- if ((options.vgrid != undefined) && (options.vgrid == true)) {
- params = params + "&vgrid";
- }
- if ((options.allFeatures != undefined) && (options.allFeatures == true)) {
- params = params + "&allFeatures";
- }
- if ((options.allRectangles != undefined) && (options.allRectangles == true)) {
- params = params + "&allRectangles";
- }
- if ((options.allSameSize != undefined) && (options.allSameSize == true)) {
- params = params + "&allSameSize";
- }
- //complete parent options with defaults defined by the children
- this.opt.json = "";
- //Biojs.console.log("params: " + params);
- //get the json from the web service
- jQuery.ajax({
- //url:this._webservice + params,
- url: self.opt.proxyUrl,
- data: "url=" + this._webservice + params,
- success:function (response, callOptions) {
- json = jQuery.parseJSON(response);
- //Biojs.console.log(response);
- //Biojs.console.log(json);
- try {
- self.opt.json = json;
- //jQuery.noConflict();
- //self.initRaphael();
- if (!Biojs.Utils.isEmpty(self.opt.json)) {
- self.paintFeatures(self.opt.json)
- }
- } catch (err) {
- Biojs.console.log(err);
- document.getElementById(self.opt.target).innerHTML = '';
- document.getElementById(self.opt.target).innerHTML = 'No image available. Did you provide a valid UniProt accession or identifier, and valid limits?';
- }
- },
- error:function (response, callOptions) {
- Biojs.console.log(error);
- document.getElementById(self.opt.target).innerHTML = '';
- document.getElementById(self.opt.target).innerHTML = 'No image available. Did you provide a valid UniProt accession or identifier, and valid limits?';
- }
- });
- },
-
- /**
- * Default values for the options:
- * target: "",
- * segment: "",
- * 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"
- * dasSources: "http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot",
- * featureTypes: "",
- * featureNames: "",
- * imageWidth: 700,
- * imageStyle: "nonOverlapping",
- * optionResponse: "raphael",
- * hgrid: false,
- * vgrid: false,
- * allFeatures: true,
- * allRectangles:false,
- * allSameSize: false,
- * proxyUrl: "../biojs/dependencies/proxy/proxy.php"
- * @name Biojs.DasProteinFeatureViewer-opt
- */
- opt:{
- //Parent
- /* target:"YourOwnDivId",
- //json: {}, //is not an option here, it is fixed to _webservice response
- showSlider:true,
- showPrintButton:true,
- showFeatureTooltipOnMouseOver:true,
- highlightFeatureOnMouseOver:true,
- selectFeatureOnMouseClick:true,
- dragSites:true,
- selectionColor:"#ff8c00", //make sure it does not exist at http://wwwdev.ebi.ac.uk/das-srv/uniprot/das/uniprot/stylesheet
- */
- dasSources:"http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot",
- featureTypes:"",
- featureNames:"",
- imageWidth:700,
- imageStyle:"nonOverlapping",
- optionResponse:"raphael",
- hgrid:false,
- vgrid:false,
- allFeatures:true,
- allRectangles:false,
- allSameSize:false,
- proxyUrl: "../biojs/dependencies/proxy/proxy.php"
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.DasProteinFeatureViewer-eventTypes
- */
- eventTypes : [],
-
- /**
- * Opens a new window/tab in the browser with the graphical representation for all feature types.
- *
- * @example
- * myPainter.showGeneralLegend();
- *
- */
- showGeneralLegend: function() {
- var config = this.opt.json.configuration;
- var dataURL = this._webservice + "?";
- window.open(dataURL); //open generated image in new tab/window
- },
-
- /**
- * 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();
- *
- */
- exportFeaturesToImage: function() {
-// if (typeof FlashCanvas != "undefined") {
-// FlashCanvas.initElement(canvas);
-// }
- var config = this.opt.json.configuration;
- var dataURL = "";
- if (jQuery.browser.msie) { //canvas does not work (not even with IE 9)
- var arguments = "segment=" + this.opt.json.segment;
- if ((config.requestedStart != 0) && (config.requestedStop != 0)) {
- arguments = arguments + ":" + config.requestedStart + "," + config.requestedStop;
- }
- arguments = arguments +
- "&dasReference=" + config.dasReference +
- "&dasSources=" + config.dasSources +
- "&width=" + config.sizeX +
- "&option=image" +
- "&hgrid=" + config.horizontalGrid +
- "&vgrid=" + config.verticalGrid +
- "&style=" + config.style;
- dataURL = this._webservice + "?" + arguments;
- window.open(dataURL); //open generated image in new tab/window
- } else {
- svg = document.getElementById('uniprotFeaturePainter-holder').innerHTML;
- var canvas = document.createElement("canvas");
- canvg(canvas, svg);
- dataURL = canvas.toDataURL();
- this.$imageExported = jQuery('')
- .html('Left Centre Right
'+self.opt.features["description"]+'
Show more data from EMBL-EBI
"); - h3.addClass("slideToggle icon icon-functional"); - h3.appendTo(ebi_search_results); - - jQuery('#ebi_search_results .slideToggle[data-icon="u"]').next().hide(); - jQuery("#ebi_search_results .slideToggle").click(function() { - jQuery(this).attr("data-icon") === 'u' ? jQuery(this).attr("data-icon", "w") : jQuery(this).attr("data-icon", "u"); - if (jQuery(this).attr("data-icon") === 'w') { - if(self._completedRequest != true){ - h3.addClass("loading"); - self._updateSummary(); - } - } - jQuery(this).parent().find("p").slideToggle(300); - jQuery(this).parent().find("ul").slideToggle(300); - }); - - /* EXPANDED style or any other style selected */ - } else { - var thisElem = jQuery("#" + this.opt.target); - thisElem.html(""); - var search_extras = jQuery(""); - search_extras.appendTo(thisElem); - search_extras.addClass("shortcuts"); - var ebi_search_results = jQuery(""); - ebi_search_results.appendTo(search_extras); - var h3 = jQuery("More data from EMBL-EBI
"); - h3.addClass("loading"); - h3.appendTo(ebi_search_results); - } - }, - - - /* - * Function: Biojs.EbiGlobalSearch._drawResults - * Purpose: Draw results - * Returns: - - * Inputs: response -> {object} Results from the service. - */ - _drawResults: function(response){ - var self = this; - - /* BASIC style */ - if(this.opt.style.toLowerCase() == Biojs.EbiGlobalSearch.VIEW_BASIC){ - var search_extras = jQuery("#" + Biojs.EbiGlobalSearch.SEARCH_EXTRAS); - search_extras.html(""); - search_extras.removeClass("loading"); - search_extras.append("EBI global search results
"); - //container.blink({delay: 500}); - if(typeof response != "string"){ - /* Print results */ - var ul = jQuery("- ").appendTo(search_extras);
- self._renderItems(response, ul);
- } else {
- /* Print error response */
- jQuery("
- 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 - *
- *
- * - ' + v + ' ')) - }); - - /* Put everything together */ - jQuery("#"+self.opt.target).append(self._componentDiv); - self._componentDiv.append(self._table); - self._leftColumn.append(self._leftContainer); - self._rightColumn.append(self._contentTitle); - self._rightColumn.append(self._contentNotes); - }, - /** - * Default values for the options - * @name Biojs.HpaSummaryFeature-opt - */ - opt: { - target: '', - title: '', - imageUrl: '', - imageTitle: '', - notes: [], - linkUrl:'', - linkTitle:'', - width: '900px', - imageWidth: '200px' - }, - /** - * Array containing the supported event names - * @name Biojs.HpaSummaryFeature-eventTypes - */ - eventTypes: [ - /** - * @name Biojs.HpaSummaryFeature#onFeatureSelected - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {int} textSelected Selected text. - * @example - * instance.onTextSelected( - * function( objEvent ) { - * alert(objEvent.textSelected); - * } - * ); - * - * */ - "onTextSelected" - ] -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.HpaSummaryFeatures.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.HpaSummaryFeatures.js deleted file mode 100755 index b1ed02b332..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.HpaSummaryFeatures.js +++ /dev/null @@ -1,247 +0,0 @@ -/** - * Component to represent Human Protein Atlas summary protein expression - * information from a DAS XML - * - * @class - * @extends Biojs.HpaSummaryFeature - * - * @author Rafael C Jimenez - * @version 1.0.0 - * @category 2 - * - * @requires Biojs.HpaSummaryFeature.css - * @dependency - * - * - * @param {Object} options An object with the options for this component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} hpaDasUrl - * Url pointing to an XML including HPA infomration in DAS format - * - * @option {string} width [900px] - * List of points including summary information for this feature - * - * @option {string} imageWidth [200px] - * List of points including summary information for this feature - * - * @option {string} [proxyUrl='../biojs/dependencies/proxy/proxy.php'] - * Proxy to bypass the same origin policy ({@link http://en.wikipedia.org/wiki/Same_origin_policy}) - * - * @example - * var instance = new Biojs.HpaSummaryFeatures({ - * target: 'YourOwnDivId', - * hpaDasUrl: 'http://das.proteinatlas.org/das/proteinatlas/features?segment=Q9NTI5', - * width: '585px', - * imageWidth: '150px' - * }); - * - */ - -Biojs.HpaSummaryFeatures = Biojs.HpaSummaryFeature.extend ( - /** @lends Biojs.HpaSummaryFeatures# */ - { - constructor: function (options) { - var self = this; - this.setHpaDasUrl(self.opt.hpaDasUrl); - }, - /* - * Function: Biojs.HpaSummaryFeatures.setHpaDasUrl - * Purpose: Set an URL with HPA DAS XML to start the query and visualization of HPA summary features - * Returns: - - * Inputs: hpaDasUrl -> {String} DAS XML with HPA summary information - */ - - /** - * Set an URL with HPA DAS XML to start the query and visualization of HPA summary features - * @param {string} hpaDasUrl DAS XML with HPA summary information - * - * @example - * instance.setHpaDasUrl("http://www.ebi.ac.uk/~rafael/web/copa/biojs/src/test/data/Q9NTI5_hpa_summary.xml"); - * - * @example - * instance.setHpaDasUrl("http://www.ebi.ac.uk/~rafael/web/copa/biojs/src/test/data/unknownsegment.xml"); - * - */ - setHpaDasUrl: function(hpaDasUrl){ - var self = this; - /* URL where to get DAS XML */ - self._url; - if(self.opt.proxyUrl != ""){ - self._url= self.opt.proxyUrl + "?url=" + hpaDasUrl; - } else { - self._url= hpaDasUrl; - } - - /* get XML */ - jQuery.ajax({ - type: "GET", - url: self._url, - dataType: "xml", - success: function(a){self._processDasHpaXml(a);}, - error: function(a){self._processErrorRequest(a);} - }); - }, - /* - * Function: Biojs.HpaSummaryFeatures._processDasHpaXml - * Purpose: process HPA XML - * Returns: - - * Inputs: xml -> {String} DAS XML with HPA summary information - */ - _processDasHpaXml: function (xml) - { - var self = this; - Biojs.console.log("SUCCESS: data received"); - var antibodies = this._getAntibodiesAccessions(xml); - if(antibodies.length > 0){ - var html = this._createHtmlContainer(antibodies); - jQuery('#'+self.opt.target+'').html(html); - this._displayHpaSummaries(xml,antibodies) - } else { - jQuery('#'+self.opt.target+'').html(Biojs.HpaSummaryFeatures.MESSAGE_NODATA); - } - - }, - /* - * Function: Biojs.HpaSummaryFeatures._processErrorRequest - * Purpose: Process request error - * Returns: - - * Inputs: textStatus -> {String} Text satus - */ - _processErrorRequest: function (textStatus){ - var self = this; - Biojs.console.log("ERROR: " + textStatus ); - self.raiseEvent( Biojs.HpaSummaryFeatures.EVT_ON_REQUEST_ERROR, { message: textStatus } ); - }, - /* - * Function: Biojs.HpaSummaryFeatures._getAntibodiesAccessions - * Purpose: get antibodies accessions - * Returns: - - * Inputs: xml -> {String} DAS XML with HPA summary information - */ - _getAntibodiesAccessions: function (xml){ - var tempSet = new Object(); - jQuery(xml).find("PARENT").each(function(){ - var antibodyTextSplit = jQuery(this).attr("id").split("_"); - if(antibodyTextSplit.length == 2){ - tempSet[antibodyTextSplit[0]] = true; - } - }); - var antibodies = new Array(); - for (var a in tempSet){ - antibodies.push(a); - } - return antibodies; - }, - /* - * Function: Biojs.HpaSummaryFeatures._createHtmlContainer - * Purpose: create HTML container to later populate HPA data - * Returns: - - * Inputs: antibodies -> {Array} List of antibodies - */ - _createHtmlContainer: function(antibodies) { - var self = this; - var html = ''; - jQuery.each(antibodies, function(key, value){ - html += '
- url is string containing the url data source. - *
- paramsMap Customize the name of the following params which will be passed to server:
- *
-
- *
- iDisplayStart: index of the first expected record for paging. - *
- iDisplayLength: size of the fetched data (page size). - *
- sSearch: filter string entered by the user in case of filter is enabled. - *
- * - filter is a boolean to show/hide the search box on the table top. - * The entered string will be passed to the server by means of 'sSearch' parameter. - * Personalize the parameter name using paramsMap. - *
- proxyUrl optional string containing the url of the proxy in case of needing access to server through a proxy. - *
- version either string or integer containing the version of MITAB format as follows:
- *
-
- *
- "MITAB_VERSION_2_5" or 15: to set MITAB format v2.5 - *
- "MITAB_VERSION_2_5_EXT" or 31: to set MITAB format v2.5 extended - *
- "MITAB_VERSION_2_6" or 36: to set MITAB format v2.6 - *
- "MITAB_VERSION_2_7" or 42: to set MITAB format v2.7 - *
- * - totalRecords integer containing the number of total records. MITAB format does not contains this value on the response. - * You must do a request to ask for it. - *
- pdbids: PDB entry ids for which prints are to be rendered. - *
- divid: the id of div in which the prints are to be rendered. - *
- rapha: A Raphael object instead of div to render PDBprints into. - *
- startX: X-coordinate of point where rendering the array of PDBprints will start in the Raphael canvas - *
- startY: Y-coordinate of point point where rendering the array of PDBprints will start in the Raphael canvas - *
- interval: gap between successive PDBprints in a vertical or horizontal array - *
- size: length of an icon logo in PDBprints - *
- orient: vertical or horizontal rendering fo PDBprints - *
- Biojs.Protein3DUniprot.ALIGNMENTS_UNIPROT_MAPPING - *
- Biojs.Protein3DUniprot.ALIGNMENTS_PDBe_MAPPING - *
- ' + label + value + ' '); - }); - }); - }, - - /* - * Function: Biojs.ProteinPortafolio._requestFeatures - * Purpose: Request data to the server - * Returns: - - * Inputs: opt -> {Object} options object. - */ - _requestFeatures: function( accession, action ){ - - var self = this; - - Biojs.console.log("Requesting features for '" + accession + "'" ); - - var httpRequest = { - url: self.opt.proxyUrl, - data: [{ name: "url", value: self.opt.featuresUrl + "?segment=" + accession }], - method: "GET", - dataType: "text", - success: action, - error: function(e) { - Biojs.console.log("Error requesting features for " + accession ); - } - }; - - jQuery.ajax(httpRequest); - - }, - - _adjustContentSize: function() { - - if ( this._beta.children().length > 0 ) { - this._alpha.addClass('alpha'); - this._beta.addClass('beta'); - this._content.height(this._container.height() - this._header.height() - this._toolbar.height()); - - } else { - this._alpha.removeClass('alpha'); - this._beta.removeClass('beta'); - this._content.height('auto'); - } - } - -}); - - - - - - - diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.PsicquicGraph.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.PsicquicGraph.js deleted file mode 100755 index d9be353de4..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.PsicquicGraph.js +++ /dev/null @@ -1,217 +0,0 @@ -/** - * - * Graph display of molecular interactions using PSICQUIC. - * - * @class - * @extends Biojs - * - * @author José Villaveces - * @version 1.0.0_beta - * @category 2 - * - * @requires jQuery 1.7.2 - * @dependency - * - * @requires Cytoscape.js (latest version strongly suggested) - * @dependency - * - * @param {Object} options An object with the options for this component. - * - * @option {string} target - * id of the div where the component should be displayed - * - * @option {string} psicquicUrl - * url of the PSICQUIC server to query. - * - * @option {string} proxyUrl - * url of the proxy to use. - * - * @option {string} query - * MIQL query. - * - * @option {Object} cyoptions - * cytoscapejs inititlization options more info here - * - * @example - * var instance = new Biojs.PsicquicGraph({ - * target: "YourOwnDivId", - * psicquicUrl: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query', - * proxyUrl: '../biojs/dependencies/proxy/proxy.php', - * query: 'species:human?firstResult=0&maxResults=100', - * cyoptions: { - * style: cytoscape.stylesheet().selector('node').css({ - * 'content': 'data(id)', - * 'font-family': 'helvetica', - * 'font-size': 14, - * 'text-outline-width': 3, - * 'text-outline-color': '#888', - * 'text-valign': 'center', - * 'color': '#fff', - * 'width': 'mapData(weight, 30, 80, 20, 50)', - * 'height': 'mapData(height, 0, 200, 10, 45)', - * 'border-color': '#fff' - * }).selector(':selected').css({ - * 'background-color': '#000', - * 'line-color': '#000', - * 'target-arrow-color': '#000', - * 'text-outline-color': '#000' - * }).selector('edge').css({ - * 'width': 2 - * }), - * layout: { - * name: 'circle', - * fit: true, // whether to fit the viewport to the graph - * ready: undefined, // callback on layoutready - * stop: undefined, // callback on layoutstop - * rStepSize: 10, // the step size for increasing the radius if the nodes don't fit on screen - * padding: 30, // the padding on fit - * startAngle: 3/2 * Math.PI, // the position of the first node - * counterclockwise: false // whether the layout should go counterclockwise (true) or clockwise (false) - * }, - * ready:function(){ - * var cy = this; - * cy.nodes().click(function(e){ - * console.log(e.cyTarget.id()); - * }); - * } - * } - * }); - */ - -Biojs.PsicquicGraph = Biojs.extend( -/** @lends Biojs.PsicquicGraph# */ -{ - constructor: function (options) { - //Biojs.console.enable(); - this._query(this.opt); - }, - /** - * Default values for the options - * @name Biojs.PsicquicGraph-opt - */ - opt: { - target: "YourOwnDivId", - psicquicUrl: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query', - proxyUrl: '../biojs/dependencies/proxy/proxy.php', - query: 'species:human?firstResult=0&maxResults=100', - cyoptions: { - //see cytoscapejs inititlization options - style: cytoscape.stylesheet().selector('node').css({ - 'content': 'data(id)', - 'font-family': 'helvetica', - 'font-size': 14, - 'text-outline-width': 3, - 'text-outline-color': '#888', - 'text-valign': 'center', - 'color': '#fff', - 'width': 'mapData(weight, 30, 80, 20, 50)', - 'height': 'mapData(height, 0, 200, 10, 45)', - 'border-color': '#fff' - }).selector(':selected').css({ - 'background-color': '#000', - 'line-color': '#000', - 'target-arrow-color': '#000', - 'text-outline-color': '#000' - }).selector('edge').css({ - 'width': 2 - }), - layout: { - name: 'circle', - fit: true, // whether to fit the viewport to the graph - ready: undefined, // callback on layoutready - stop: undefined, // callback on layoutstop - rStepSize: 10, // the step size for increasing the radius if the nodes don't fit on screen - padding: 30, // the padding on fit - startAngle: 3/2 * Math.PI, // the position of the first node - counterclockwise: false // whether the layout should go counterclockwise (true) or clockwise (false) - }, - ready:function(){ - var cy = this; - cy.nodes().click(function(e){ - console.log(e.cyTarget.id()); - }); - } - } - }, - /** - * Array containing the supported event names - * @name Biojs.PsicquicGraph-eventTypes - */ - eventTypes: [], - /* - * Function: Biojs.PsicquicGraph._query - * Purpose: Queries PSIQUIC using the provided query in MIQL. - * Inputs: dataSet -> {Object} Settings of the data set. - */ - _query: function(dataSet){ - - dataSet.url = dataSet.psicquicUrl + '/' + dataSet.query; - - var instance = this; - jQuery.ajax({ - url: dataSet.proxyUrl, - dataType: "text", - data: [{ name: "url", value: dataSet.url }], - success: function ( data ) { - instance._decodeToJSON(data, instance); - } - }); - }, - /* - * Function: Biojs.PsicquicGraph._decodeToJSON - * Purpose: Transforms MiTab data into JSON and renders the graph. - * Inputs: miTabData -> {Object} interactions in MiTab format. - * instance -> {Object} a reference to this widget instance. - */ - _decodeToJSON: function(miTabData, instance){ - var nodes = [], edges = [], map = {}; - - var lines = miTabData.split('\n'); - for(var i=0; i
'; - var gotRule =!(typeof rule=="undefined"); - var selectedTarget=0; - - if (typeof self.opt.rules.location !='undefined' && self.opt.rules.location.length>0){ - code_rule+= "In"; - code_rule+= self._getSelect('location_'+number,self.opt.rules.location,"", - gotRule?rule.location:rule - ); - } - - if (gotRule) - for (var i in self.opt.rules.target) - if (self.opt.rules.target[i].name==rule.target) - selectedTarget=i; - - code_rule+= ' '+ self._getActionSpan(number,selectedTarget,rule)+''; - code_rule+= ' the '; - code_rule+= self._getSelect('target_'+number,self.opt.rules.target,"name", - gotRule?rule.target:rule - ); - code_rule+= ' with '; - - var visible=gotRule?"none":"inline"; - for (var i in self.opt.rules.target){ - visible=gotRule? - ((self.opt.rules.target[i].name==rule.target)?"inline":"none"): - visible; - code_rule+= self._getConditionsSpan(number,self.opt.rules.target[i],visible,rule); - visible="none"; - } - code_rule+= ' '; - code_rule+= 'APPLY '; - code_rule+= ' ';
- $("#"+target+'_list_to_add').append(code_rule);
-
-
- $( "#"+target+"_apply_rule_"+number ).click(function(){
- self._applyRule($(this));
- });
-
-
- //Visualizing the right inputs for the selected target
- $( "#target_"+number ).change(function(){
- var n= $(this)[0].id.substr($(this)[0].id.lastIndexOf("_")+1);
- for (var i in self.opt.rules.target){
- var target_name =self.opt.rules.target[i].name;
- var target_id = target_name.replace(/ /g,"");
- $("#conditions_"+n+"_"+target_id).css("display","none");
- }
- $("#target_"+n+" option:selected").each(function () {
- $("#conditions_"+n+"_"+$(this).text()).css("display","inline");
- $("#condition_params_"+n+"_"+$(this).text()+"_"+($("#condition_"+n+"_"+$(this).text()).val().replace(/ /g,""))).css("display","inline");
- $('#action_span_'+n).html(self._getActionSpan(n,$(this).parent()[0].selectedIndex));
- self._enableAction(n);
-
- });
- });
-
- self._enableAction(number,rule);
-
- //Visualizing the right attributes for the selected condition
- for (var i in self.opt.rules.target){
- var target_name =self.opt.rules.target[i].name;
- var target_id = target_name.replace(/ /g,"");
- $( "#condition_"+number+"_"+target_id ).change(function(){
- var parts= $(this)[0].id.split("_");
- $("#condition_"+parts[1]+"_"+parts[2]+" option").each(function () {
- $("#condition_params_"+parts[1]+"_"+parts[2]+"_"+($(this).text().replace(/ /g,""))).css("display","none");
- });
- $("#condition_"+parts[1]+"_"+parts[2]+" option:selected").each(function () {
- $("#condition_params_"+parts[1]+"_"+parts[2]+"_"+($(this).text().replace(/ /g,""))).css("display","inline");
- });
- });
- }
- self._number++;
- },
- /**
- * Add a rule to the active rules' set. this method can be invoked from an external script, be careful when using by
- * following the rules' model.
- *
- * @param {object} [rule] A rule with predefined values as an Object that contain the fields: location, action, target, condition, parameters, color
- *
- * @example
- * instance.addActiveRule({location:"protein1", action:"Color", target:"Proteins", condition:"number of interactions", parameters:["==","2"], color:"#F00"});
- */
- addActiveRule: function(rule,n){
- var self =this;
- var target =self.opt.target;
- if (typeof n == "undefined"){
- n=self._number++;
- rule.id =target+'_rule_'+n;
- }
-
- var parameter_span="";
- switch (rule.action.type){
- case "color":
- parameter_span = '_';
- break;
- case "colorRange":
- parameter_span = '_';
- parameter_span += '_';
- break;
- case "select":
- parameter_span = ''+rule.actionParameters[0]+'';
- break;
- }
-
- var locText = (typeof rule.location == 'undefined')?'':'In '+rule.location+' ';
- $("#"+target+'_list').append(''+rule.action.name+' '+parameter_span+' the '+rule.target+' with '+rule.condition+' '+rule.parameters.join(" ")+' remove edit 0 ');
-
- $('#'+target+'_rule_'+n).data("rule",rule);//{location:location,action:action,target:target1,condition:condition,parameters:parameters,id:target+'_rule_'+n, color:color})
- $('#'+target+'_rule_'+n+' span.remove').click(function(){
- var removed = $(this).parent().parent().parent().parent().parent().data("rule");
- $(this).parent().parent().parent().parent().parent().remove();
- self.raiseEvent('onRuleRemoved', {
- rules : self.getActiveRules(),
- removed: removed
- });
- });
- $('#'+target+'_rule_'+n+' span.edit').click(function(){
- var editing = $(this).parent().parent().parent().parent().parent().data("rule");
- $(this).parent().parent().parent().parent().parent().remove();
- self.addRule(editing);
- self.raiseEvent('onRuleEditing', {
- rules : self.getActiveRules(),
- editing: editing
- });
- });
- self.raiseEvent('onRuleCreated', {
- rules : self.getActiveRules(),
- new_rule: $('#'+target+'_rule_'+n).data("rule")
- });
-
- },
- _applyRule: function(clicked){
- var self =this;
- var target =self.opt.target;
- var n= clicked[0].id.substr(clicked[0].id.lastIndexOf("_")+1);
- var location = $('#location_'+n).val();
- var actionName= $('#action_'+n).val();
- var target1= $('#target_'+n).val();
- var action=self._getAction(target1,actionName);
- var condition= $('#condition_'+n+'_'+target1.replace(/ /g,"")).val();
- var parameters= new Array();
- var par=0;
- while (typeof $('#condition_params_'+n+'_'+target1+'_'+condition.replace(/ /g,"")+'_'+par).val() != "undefined"){
- parameters.push($('#condition_params_'+n+'_'+target1+'_'+condition.replace(/ /g,"")+'_'+par).val());
- par++;
- }
- var actionPar=[];
- switch (action.type){
- case "color":
- actionPar.push($("#action_parameters_0_"+n).val());
- break;
- case "colorRange":
- actionPar.push($("#action_parameters_0_"+n).val());
- actionPar.push($("#action_parameters_1_"+n).val());
- break;
- case "select":
- actionPar.push($("#action_parameters_0_"+n).val());
- break
- }
- var rule = {location:location,action:action,actionParameters:actionPar,target:target1,condition:condition,parameters:parameters,id:target+'_rule_'+n};
- self.addActiveRule(rule,n);
- clicked.parent().parent().parent().parent().parent().remove();
-
- },
- _getConditionsSpan: function(n,target,visible,rule){
- var self= this;
- var target_name =target.name;
- var target_id = target_name.replace(/ /g,"");
- var code_rule = ' ';
- var gotRule =!(typeof rule=="undefined");
-
- code_rule+= self._getSelect('condition_'+n+'_'+target_id,target.conditions,"name",
- gotRule?rule.condition:rule
- );
-
- var visible_p=gotRule?"none":"inline";
- for (var j in target.conditions){
- visible_p=gotRule?
- ((target.conditions[j].name==rule.condition)?"inline":"none"):
- visible_p;
- code_rule += self._getConditionSpan(n,target_id,target.conditions[j],visible_p,rule);
- visible_p="none";
- }
- code_rule+= ' ';
- return code_rule;
-
- },
- _getConditionSpan: function(n,target_id,condition,visible_p,rule){
- var self =this;
- var condition_name=condition.name;
- var condition_id = condition_name.replace(/ /g,"");
- var gotRule =!(typeof rule=="undefined");
-
- var code_rule = ' ';
- switch (condition.type){
- case "selects":
- for (var i=0;i<1*condition.amount;i++)
- code_rule+=self._getSelect('condition_params_'+n+'_'+target_id+'_'+condition_id+'_'+i,condition.values,"",
- gotRule?rule.parameters[i]:rule
- );
- break;
-
- case "numeric_comparison":
- code_rule+=self._getSelect('condition_params_'+n+'_'+target_id+'_'+condition_id+'_0',["==",">","<",">=","<="],"",
- gotRule?rule.parameters[0]:rule
- );
- var value = gotRule?rule.parameters[1]:"";
- code_rule += ' ';
- break;
-
- case "text_comparison":
- code_rule+=self._getSelect('condition_params_'+n+'_'+target_id+'_'+condition_id+'_0',["equals","contains","different","not contains"],"",
- gotRule?rule.parameters[0]:rule
- );
- var value = gotRule?rule.parameters[1]:"";
- code_rule += ' ';
- break;
- case "feature_comparison":
- code_rule+=self._getSelect('condition_params_'+n+'_'+target_id+'_'+condition_id+'_0',condition.values,"",
- gotRule?rule.parameters[0]:rule
- );
- code_rule+=self._getSelect('condition_params_'+n+'_'+target_id+'_'+condition_id+'_1',["equals","contains","different","not contains"],"",
- gotRule?rule.parameters[1]:rule
- );
- var value = gotRule?rule.parameters[2]:"";
- code_rule += ' ';
- break;
- case "all":
- break;
- }
- code_rule += ' ';
- return code_rule;
- },
- _getSelect: function(id, options,field,selected){
- var code = ' ';
- return code;
- },
- _getActionSpan: function(number,selectedTarget,rule){
- var self=this;
- var gotRule =!(typeof rule=="undefined");
- var code = self._getSelect('action_'+number,self.opt.rules.target[selectedTarget].action,"name",
- gotRule?rule.action.name:rule
- );
- code+= ' ';
- return code;
- },
- _enableAction: function(number,rule){
- var self=this;
- var gotRule =!(typeof rule=="undefined");
- //Visualizing the right inputs for the selected action
- $( "#action_"+number ).change(function(){
- var n= $(this)[0].id.substr($(this)[0].id.lastIndexOf("_")+1);
- self._enableActionParameters(n);
- });
- self._enableActionParameters(number, rule);
-
- },
- _enableActionParameters: function(number,rule){
- var self=this;
- var gotRule =!(typeof rule=="undefined");
- var action = (gotRule)?self._getAction(rule.target,rule.action.name):self._getAction($('#target_'+number).val(),$('#action_'+number).val());
- $("#action_parameters_"+number).html('');
- switch (action.type){
- case "color":
- self._addColorSelector(number,0,(gotRule)?rule.actionParameters[0]:rule);
- break;
- case "colorRange":
- self._addColorSelector(number,1,(gotRule)?rule.actionParameters[0]:"#F00");
- self._addColorSelector(number,0,(gotRule)?rule.actionParameters[1]:"#0F0");
- break;
- case "select":
- $("#action_parameters_"+number).html(self._getSelect('action_parameters_0_'+number,action.options,"",
- gotRule?rule.actionParameters[0]:rule
- ));
- break
- case "single": default:
- $("#action_parameters_"+number).html('');
- }
- },
- _addColorSelector: function(n,parameter,color){
- color = (typeof color!="undefined")?color:'#56992F';
- $("#action_parameters_"+n).append('')
- $("#action_parameters_"+parameter+"_"+n).miniColors({
- letterCase: 'uppercase'
- }).miniColors('value',color);
- },
- _getAction: function(targetName,actionName){
- var self=this;
- for (var i=0; i< self.opt.rules.target.length; i++){
- var target = self.opt.rules.target[i];
- if (target.name==targetName){
- for (var j=0; j< target.action.length; j++){
- var action=target.action[j];
- if (action.name==actionName)
- return action;
- }
- }
- }
- }
-
-});
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Sequence.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Sequence.js
deleted file mode 100755
index ad36ffb31e..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Sequence.js
+++ /dev/null
@@ -1,1404 +0,0 @@
-/**
- * Sequence component
- *
- * @class
- * @extends Biojs
- *
- * @author John Gomez, Jose Villaveces
- * @version 1.0.0
- * @category 3
- *
- * @requires jQuery Core 1.6.4
- * @dependency
- *
- * @requires jQuery UI 1.8.16
- * @dependency
- *
- * @requires Biojs.Tooltip
- * @dependency
- *
- * @param {Object} options An object with the options for Sequence component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} sequence
- * The sequence to be displayed.
- *
- * @option {string} [id]
- * Sequence identifier if apply.
- *
- * @option {string} [format="FASTA"]
- * The display format for the sequence representation.
- *
- * @option {Object[]} [highlights]
- * For highlighting multiple regions.
- * - name is the unique name for the annotation - *
- html is the message (can be HTML) to be displayed in the tool tip. - *
- color is the default HTML color code for all the regions. - *
- regions array of objects defining the intervals which belongs to the annotation. - *
- regions[i].start is the starting character for the i-th interval. - *
- regions[i].end is the ending character for the i-th interval. - *
- regions[i].color is an optional color for the i-th interval. - *
- url is string containing the url data source. - *
- paramsMap Customize the name of the following params which will be passed to server:
- *
-
- *
- iDisplayStart: index of the first expected record for paging. - *
- iDisplayLength: size of the fetched data (page size). - *
- sSearch: filter string entered by the user in case of filter is enabled. - *
- * - filter is a boolean to show/hide the search box on the table top. - * The entered string will be passed to the server by means of 'sSearch' parameter. - * Personalize the parameter name using paramsMap. - *
- proxyUrl optional string containing the url of the proxy in case of needing access to server through a proxy. - *
- name will be used for the column title, and 'render'. - *
- render is a function to format each row value in that column.
- *
Returns a string containing the new formatted value. - *
Arguments: - *-
- *
- col: index of the column. - *
- dataRow: 1D array containing whole row. - *
- value: current value of the cell. - *
- * - width of the column using either pixels or percentage. - *
"+response+"
").appendTo(search_extras); - } - - - - /* COLLAPSIBLE style */ - } else if (this.opt.style.toLowerCase() == Biojs.EbiGlobalSearch.VIEW_COLLAPSIBLE) { - var self = this; - var ebi_search_results = jQuery("#" + Biojs.EbiGlobalSearch.EBI_SEARCH_RESULTS); - jQuery(ebi_search_results).find("h3").removeClass("loading"); - jQuery(ebi_search_results).find("ul").remove(); - jQuery(ebi_search_results).find("p").remove(); - if(typeof response != "string"){ - /* Print results */ - var p = jQuery("Other results for \"" + this.opt.query + "\"
"); - p.appendTo(ebi_search_results); - var ul = jQuery("- ");
- ul.attr("id", "global-search-results");
- ul.appendTo(ebi_search_results);
- self._renderItems(response, ul);
- } else {
- /* Print error response */
- jQuery("
"+response+"
").appendTo(ebi_search_results); - } - - /* EXPANDED style or any other style selected */ - } else { - var ebi_search_results = jQuery("#" + Biojs.EbiGlobalSearch.EBI_SEARCH_RESULTS); - jQuery(ebi_search_results).find("h3").removeClass("loading"); - if(typeof response != "string"){ - /* Print results */ - var p = jQuery("Other results for \"" + this.opt.query + "\"
"); - p.appendTo(ebi_search_results); - var ul = jQuery("- ");
- ul.attr("id", "global-search-results");
- ul.appendTo(ebi_search_results);
- self._renderItems(response, ul);
- } else {
- /* Print error response */
- jQuery("
"+response+"
").appendTo(ebi_search_results); - } - } - - - - }, - - /** - * Array containing the supported event names - * @name Biojs.EbiGlobalSearch-eventTypes - */ - eventTypes: [ - /** - * @name Biojs.EbiGlobalSearch#onError - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {string} message Error message in case of result be 'failure'. - * - * @example - * instance.onError( - * function( e ) { - * alert( e.message ); - * } - * ); - * - **/ - "onError", - - - /** - * @name Biojs.EbiGlobalSearch#onResults - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {int} resutls Number of total results. - * @eventData {int} items Number of items. - * @example - * instance.onResults( - * function( objEvent ) { - * alert( objEvent.resutls + " results for " + objEvent.servicesWithResults + " services of " + objEvent.services + " services queried" ); - * } - * ); - * - **/ - "onResults" - ] - - - -},{ - // Some static values - - // Query errors - QUERY_ERROR_UNDEFINED: "Query undefined", - QUERY_ERROR_USER_MESSAGE: "Sorry, we could not process your request", - - // Events - EVT_ON_ERROR: "onError", - EVT_ON_RESULTS: "onResults", - - // IDs - EBI_SEARCH_RESULTS: 'ebi_search_results', - SEARCH_EXTRAS: 'search-extras', - - //views - VIEW_BASIC: 'basic', - VIEW_COLLAPSIBLE: 'collapsible', - VIEW_EXPANDED: 'expanded' - - - -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.ExpressionAtlasBaselineSummary.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.ExpressionAtlasBaselineSummary.js deleted file mode 100755 index 07958fb2c9..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.ExpressionAtlasBaselineSummary.js +++ /dev/null @@ -1,231 +0,0 @@ -/** - * This is the ExpressionAtlas component for displaying baseline expression of genes - * based on RNA-seq experiments in the ExpressionAtlas database. - * - * @class - * @extends Biojs - * - * @author ExpressionAtlas Team - * @version 1.0.3 - * @category 3 - * - * @requires jQuery Core 1.9.1 - * @dependency - * - * @param {Object} options An object with the options for ExpressionAtlasBaselineSummary component. - * - * @option {string} [featuresUrl='http://www.ebi.ac.uk/gxa/widgets/heatmap/protein'] - * The query URL pointing to the ExpressionAtlas for retrieving gene page results - * displayed as part of this widget. It is usually composed to include the identifier - * of the gene you are interested in, see example. - * - * @option {string} geneQuery - * ENSEMBL gene ids or UniProt ids. If more than one identifier follow this format "P00846+P99999" - * - * @option {string} [propertyType=''] - * To narrow to search scope of a query term, please provide a type. - * - * @option {string} [geneSetMatch=false] - * If true collapse multiple returned gene profiles into one single line of average expression. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} [rootContext='../biojs/dependencies/proxy/proxy.php?url%3dhttp://www.ebi.ac.uk/gxa'] - * Specifies the root context path to be used by the widget content, - * i.e. this is the location of the content proxy pointing to ExpressionAtlas - * - * @option {string} [proxyUrl='../biojs/dependencies/proxy/proxy.php'] - * This component needs to request data from a web service. To bypass the same origin policy - * (http://en.wikipedia.org/wiki/Same_origin_policy) this component needs a proxy. - * You could use your own proxy by modifying this value or one of the BioJS proxies: - * '../biojs/dependencies/proxy/proxy.php' or '../biojs/dependencies/proxy/proxy.jsp' - * - * @example - * var instance = new Biojs.ExpressionAtlasBaselineSummary({ - * geneQuery:"ENSG00000187003+ENSG00000185264", - * propertyType:"bioentity_identifier", - * geneSetMatch:false, - * target : "YourOwnDivId" - * }); - * - */ - - -Biojs.ExpressionAtlasBaselineSummary = Biojs.extend( - /** @lends Biojs.ExpressionAtlasBaselineSummary# */ - { - - /** - * Constructor to initialize the component - * @name Biojs.ExpressionAtlasBaselineSummary-constructor - */ - constructor:function (options) { - //Biojs.console.enable(); - this._containerDiv = jQuery("#" + this.opt.target); - this.setQuery(this.opt.geneQuery, this.opt.propertyType, this.opt.geneSetMatch); - }, - - /** - * Set ENSEMBL gene ids or UniProt ids. - * @param {string} geneQuery ENSEMBL gene ids or UniProt ids. If more than one identifier follow this format "P00846+P99999". - * @param {string} propertyType Property to narrow to search scope of a query term, please provide a type. - * @param {boolean} geneSetMatch If true collapse multiple returned gene profiles into one single line of average expression. - * - * @example - * instance.setQuery("ENSG00000187003+ENSG00000185264","bioentity_identifier",false); - * - * @example - * instance.setQuery("Q61171","",false); - * - * @example - * instance.setQuery("P37173+Q9UER7+P10600+P35243+Q93074+P16234","",false); - * - * @example - * instance.setQuery("ENSG000000000000","bioentity_identifier",false); - * - */ - setQuery: function(geneQuery, propertyType, geneSetMatch){ - this.opt.geneQuery = geneQuery; - this.opt.propertyType = propertyType; - this.opt.geneSetMatch = geneSetMatch; - this._containerDiv.empty(); - - /* Check if it is Uniprot or Ensembl ID. Correct propertyType if necessary */ - var listOfIds = geneQuery.split("+"); - this._identifierDb = this._checkIdentifier(listOfIds[0]); - if(this._identifierDb == Biojs.ExpressionAtlasBaselineSummary.ID_UNIPROT){ - this.opt.propertyType = ""; - } else if (this._identifierDb == Biojs.ExpressionAtlasBaselineSummary.ID_ENSEMBL){ - this.opt.propertyType = "bioentity_identifier"; - } - - /* Set url */ - var url = this.opt.featuresUrl + "?geneQuery=" + this.opt.geneQuery; - if(this.opt.propertyType != ""){ - url = url + "&propertyType=" + this.opt.propertyType; - } - if(this.opt.geneSetMatch == true){ - url = url + "&geneSetMatch=true"; - } - if (this.opt.proxyUrl != "") { - url = this.opt.proxyUrl + "?url=" + url; - } - - /* Set url and start the request */ - var self = this; - var httpRequest = { - url:url, - data:{rootContext:this.opt.rootContext}, - method:"GET", - /** @ignore No need to document this object */ - beforeSend:function () { - self._containerDiv.html("
");
- },
- /** @ignore No need to document this object */
- success:function (htmlResponse) {
- Biojs.console.log("SUCCESS: data received");
- Biojs.console.log(htmlResponse);
- self._containerDiv.html(htmlResponse);
- },
- /** @ignore No need to document this object */
- error:function (xhr, ajaxOptions, thrownError) {
- Biojs.console.log("ERROR: " + xhr.status);
- self._containerDiv.html("An error occurred while retrieving the data: " + xhr.status + " - " + xhr.statusText);
- self.raiseEvent(
- "onError",
- { "message": "AJAX request failed", "jqXHR":xhr, "textStatus":ajaxOptions, "errorThrown":thrownError }
- );
- }
- };
-
- jQuery.ajax(httpRequest);
- },
-
- /*
- * Function: Biojs.ExpressionAtlasBaselineSummary._checkIdentifier
- * Purpose: Check if the indetifier provided by the user is ENSEMBL or UniProt
- * Returns: Database name (uniprot or ensembl)
- * Inputs: id -> {String} Identifier.
- */
- _checkIdentifier: function(id){
- var self = this;
- self._re = /^([A-N,R-Z][0-9][A-Z][A-Z, 0-9][A-Z, 0-9][0-9])|([O,P,Q][0-9][A-Z, 0-9][A-Z, 0-9][A-Z, 0-9][0-9])$/;
- if (id.search(self._re) != -1){
- return Biojs.ExpressionAtlasBaselineSummary.ID_UNIPROT;
- } else if(id.substring(0,4) == "ENSG"){
- return Biojs.ExpressionAtlasBaselineSummary.ID_ENSEMBL;
- }
- },
-
- /**
- * Default values for the options
- * @name Biojs.ExpressionAtlasBaselineSummary-opt
- */
- opt:{
- /* Features URL
- This consists of service url used to query for a particular
- gene or genes by given their properties. For a single gene query,
- please use a unique accession (e.g. ENSEMBL gene id or UniProt id).
- For example search with UniProt id P00846 returns the gene mt-atp6,
- a search for REACT_6900 returns genes belonging to this pathway.
- To narrow to search scope of a query term, please provide a type:
- &propertyType=bioentity_identifier (here only the identifier property is searched)
- An additional parameter (&geneSetMatch=true) can be appended after
- the query term to collapse multiple returned gene profiles into one
- single line of average expression (this feature is still experimental).
- For multiple identifiers of the same species please use:
- geneQuery=ENSG00000187003+ENSG00000185264&propertyType=bioentity_identifier
- */
- featuresUrl:'http://www.ebi.ac.uk/gxa/widgets/heatmap/protein',
- geneQuery:"",
- propertyType:"",
- geneSetMatch:"",
- /* Target DIV
- This mandatory parameter is the identifier of the DIV tag where the
- component should be displayed. Use this value to draw your
- component into. */
- target:"YourOwnDivId",
- /* Root context
- This is an optional parameter to specify the root context path to
- be used by the widget content, i.e. this is pointing to the
- content proxy where required.
- */
- rootContext:'../biojs/dependencies/proxy/proxy.php?url=http://www.ebi.ac.uk/gxa',
- /* Proxy URL
- To bypass the same origin policy this component needs a proxy, which
- can be set here.
- */
- proxyUrl:"../biojs/dependencies/proxy/proxy.php"
- },
-
-
- /**
- * Array containing the supported event names
- * @name Biojs.ExpressionAtlasBaselineSummary-eventTypes
- */
- eventTypes:[
- /**
- * @name Biojs.ExpressionAtlasBaselineSummary#onError
- * @event
- * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument.
- * @eventData {string} message Error message in case of result be 'failure'.
- * @eventData {Object} jqXHR XMLHttpRequest object
- * @eventData {string} textStatus It describes the type of error that occurred and an optional exception object, if one occurred
- * @eventData {string} errorThrown When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."
- *
- * @example
- * instance.onError(
- * function( error ) {
- * alert( error.message );
- * }
- * );
- *
- **/
- "onError"
- ]
-
- },{
- ID_UNIPROT: "uniprot",
- ID_ENSEMBL: "ensembl"
-});
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.ExpressionLoader.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.ExpressionLoader.js
deleted file mode 100755
index f10050d544..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.ExpressionLoader.js
+++ /dev/null
@@ -1,429 +0,0 @@
-/**
- * This component allows to load a tab-delimited file on the client. it uses HTML5 to load the file into the browser,
- * it does not require a server side.
- *
- * @class
- * @extends Biojs
- *
- * @author Gustavo A. Salazar
- * @version 1.0.0
- * @category 1
- *
- * @requires jQuery Core 1.7.2
- * @dependency
- *
- * @requires jQuery UI 1.8.2
- * @dependency
- *
- * @requires jQuery UI CSS 1.8.2
- * @dependency
- *
- * @requires Expression Loader CSS
- * @dependency
- *
- * @requires Color Selector CSS
- * @dependency
- *
- * @requires Color Selector
- * @dependency
- *
- * @param {Object} options An object with the options for the Expression Loader component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {String} label
- * Text for the link that opens the file chooser dialog.
- *
- * @example
- * var instance = new Biojs.ExpressionLoader({
- * target: "YourOwnDivId"
- * });
- *
- */
-Biojs.ExpressionLoader = Biojs.extend (
- /** @lends Biojs.ExpressionLoader# */
- {
- expressions:null,
- min:99999,
- max:-99999,
- column:-1,
- colorData:null,
-
- constructor: function (options) {
- var self = this;
- if (window.File && window.FileReader && window.FileList && window.Blob) {
- $("#"+self.opt.target).html(''+self.opt.label+'
'); - $("#"+self.opt.target+' .fake-file').click(function(){ - $("#"+self.opt.target+" .button-link").click(); - }); - $("#"+self.opt.target+" .button-link").change(function(evt){ - self._handleFileSelect(evt); - }); - } else { - self.raiseEvent('onError', { - error: 'Expression data can\'t be loaded in your browser.' - }); - } - }, - /** - * Default values for the options - * @name Biojs.ExpressionLoader-opt - */ - opt: { - target: "YourOwnDivId", - label: "Color by Expression File..." - }, - - /** - * Array containing the supported event names - * @name Biojs.ExpressionLoader-eventTypes - */ - eventTypes : [ - /** - * @name Biojs.ExpressionLoader#onFileLoaded - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {Object} expressions a hash array containing the values loaded with the protein id(first column in the file) as the key and an array of numbers(expression data) as the value. - * @example - * instance.onFileLoaded(function( objEvent ) { - alert("File loaded"); - var expression =objEvent.expressions, - color=objEvent.colorData; - var i=0; - $('output').append("
"); - for (var p in expression){ - if (i++==40) break; - var value=1*expression[p][objEvent.column*1]; - $('output').append("
"+p+" ("+value+")"); - } - }); - * - * */ - "onFileLoaded", - /** - * @name Biojs.ExpressionLoader#onFileRemoved - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @example - instance.onFileRemoved(function( objEvent ) { - alert("File removed"); - $('output').html(""); - }); - * - * */ - "onFileRemoved", - /** - * @name Biojs.ExpressionLoader#onError - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {String} error a string describing the type of error. - * @example - * instance.onError( - * function( objEvent ) { - * alert("ERROR: "+ objEvent.error); - * } - * ); - * - * */ - "onError", - - ], - _handleFileSelect: function(evt){ - var self = this; - var files = evt.target.files; // FileList object - - // files is a FileList of File objects. List some properties. - var column = 1; - for (var i = 0, f; f = files[i]; i++) { - if (!f.type.match('text.*')) { - $('#'+self.opt.target+' output').html("The selected file is not text, its type is "+f.type); - self.raiseEvent('onError', { - error: "The selected file is not text, its type is "+f.type - }); - continue; - } - var reader = new FileReader(); - reader.onload = (function(theFile) { - return function(e) { - var exp = self.parseTabDelimitedString(e.target.result); - if (exp!=null){ - self.startWizzard(); - } - }; - })(f); - reader.readAsText(f); - } - - }, - /** - * Parse a String with tab delimited format into a hash, where the first column is treated as the key, - * and the value are all the other columns grouped as an array - * - * @param {string} text the tab delimited string - * - * @example - * instance.parseTabDelimitedString('p1\t0.5\t0.3\t0.2\np2\t0.4\t0.2\t0.9'); - */ - parseTabDelimitedString: function(text){ - var self = this; - self.expressions ={}; - self.min =99999; - self.max = -99999; - self.column=-1; - self.colorData=null; - - var lines = text.split("\n"); - var columns =-1; - for (var i=0; i< lines.length; i++){ - if (lines[i].indexOf("#")==0) - continue; - var line = lines[i].split("\t"); - if (columns==-1){ - columns = line.length; - if (columns<2){ - self.raiseEvent('onError', { - error: "The file at requires at least 2 columns (Id and Expression)" - }); - $('#'+self.opt.target+' output').html("The file at requires at least 2 columns (Id and Expression)"); - self.expressions =null; - break; - } - }else if (columns!=line.length){ - self.raiseEvent('onError', { - error: "The number of columns is different between lines "+i+" and "+(i+1) - }); - $('#'+self.opt.target+' output').html("The number of columns is different between lines "+i+" and "+(i+1)); - self.expressions =null; - columns=-1; - break; - } - var exps =line.splice(1); - self.expressions[line[0]] = exps; - for (var j=0;j
| "+p+" | "+self.expressions[p].join(" | ")+" |
|---|---|---|
| Column to Use: | "; - var col = (self.column!=-1)?self.column:0; - for (var i=0; i< columns; i++){ - var selected=(i==col)?"checked":""; - loadedText += ''; - selected=""; - } - loadedText += " |
'+self.getFormatedTable(5)+'
| Min: | "; - loadedText +=''; - loadedText +=" | |
|---|---|---|
| Center: | "; - loadedText +=''; - loadedText +=" | |
| Max: | "; - loadedText +=''; - loadedText +=" |
'+loadedText+'
-
- *
Type: " + obj.featureTypeLabel + " - " + obj.typeCode + " - " + obj.typeCategory + - * "
Evidence: " + obj.evidenceText + " - " + obj.evidenceCode; - * alert("Clicked: " + tooltip ); - * Biojs.console.log(obj.shape); //rapha�l object - * } - * ); - * - * */ - "onFeatureClick", - /** - * @name Biojs.FeatureViewer#onFeatureOn - * @event - * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which triggered the event. - * @eventData {string} type The name of the event. - * @eventData {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 - * } - * ); - * - * */ - "onFeatureOn", - /** - * @name Biojs.FeatureViewer#onFeatureOff - * @event - * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which triggered the event. - * @eventData {string} type The name of the event. - * @eventData {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 - * } - * ); - * - * */ - "onFeatureOff", - /** - * @name Biojs.FeatureViewer#onFeatureSelected - * @event - * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which triggered the event. - * @eventData {string} type The name of the event. - * @eventData {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 - * } - * ); - * - * */ - "onFeatureSelected", - /** - * @name Biojs.FeatureViewer#onFeatureUnselected - * @event - * @param {function} actionPerformed A function which receives a {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which triggered the event. - * @eventData {string} type The name of the event. - * @eventData {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 - * } - * ); - * - * */ - "onFeatureUnselected" - ], - - /** - * Private: Finds an element within the target div for this component, - * search is expanded to all descendants in the target. - * @param {String} {idToFind} Element id - * */ - _getElementWithinTarget: function(idToFind) { - return jQuery("#"+this.opt.target).find("#"+idToFind); - }, - - /** - * Private: Finds the first child element within the target div; - * this element corresponds to the Raphaël canvas holder. - * */ - _getHolder: function() { - return jQuery('#'+this.opt.target).children("#uniprotFeaturePainter-holder")[0]; - }, - - /** - * - * @param {string} newSelectionColor New selection color - */ - setSelectionColor: function(newSelectionColor) { - this.opt.selectionColor = newSelectionColor; - }, - - /** - * 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. - * - * @example - * myPainter.customize("centered",true,true); - * - * @param {string} rdbStyle Radio buttons grouping styles, possible values: nonOverlapping, rows, centered. - * @param {boolean} chkHorizontal Check button for horizontal grid lines. - * @param {boolean} chkVertical Check button for vertical grid lines. - */ - customize: function(selectedStyle, paintHorizontalGrid, paintVerticalGrid) { - var config = this.opt.json.configuration; - - if ((selectedStyle == "") || - ((selectedStyle != "") && (selectedStyle == config.style)) ) { //Style did not change - if (paintVerticalGrid != config.verticalGrid) { //vertical grid changed - config.verticalGrid = paintVerticalGrid; - if (paintHorizontalGrid != config.horizontalGrid) { //both vertical and horizontal changed - config.horizontalGrid = paintHorizontalGrid; - if (paintVerticalGrid && paintHorizontalGrid) { //both are true now, paint lines - //Draw the vertical grid lines - this._paintVerticalGridLines(config.verticalGridLineLength, config.requestedStop, config.requestedStart, config.rulerLength, config.rulerY, config.pixelsDivision, config.leftMargin, this.raphael); - //Draw the horizontal grid lines - this._paintHorizontalGridLines(config.horizontalGrid, config.horizontalGridNumLines, config.gridLineHeight, config.nonOverlapping, config.leftMargin, config.rightMargin, config.sequenceLineY, config.rulerY, config.sizeX, this.raphael); - } else { //either vertical or horizontal is false, repaint without zoom calculation - this._repaint('withoutZoom'); - } - } else { //only vertical changed - if (paintVerticalGrid) { //vertical is now true, just paint lines - //Draw the vertical grid lines - this._paintVerticalGridLines(config.verticalGridLineLength, config.requestedStop, config.requestedStart, config.rulerLength, config.rulerY, config.pixelsDivision, config.leftMargin, this.raphael); - } else {//vertical in now false, take out the lines --> repaint all without zoom calculations - this._repaint('withoutZoom'); - } - } - } else { //vertical did not change - if (paintHorizontalGrid != config.horizontalGrid) { //only horizontal changed - config.horizontalGrid = paintHorizontalGrid; - if (paintHorizontalGrid) { //both are true now, paint lines - //Draw the horizontal grid lines - this._paintHorizontalGridLines(config.horizontalGrid, config.horizontalGridNumLines, config.gridLineHeight, config.nonOverlapping, config.leftMargin, config.rightMargin, config.sequenceLineY, config.rulerY, config.sizeX, this.raphael); - } else { //horizontal is false, repaint without zoom calculation - this._repaint('withoutZoom'); - } - } //else nothing changed then do nothing - } - } else {//style changed, recalculate features distribution and repaint - config.style = selectedStyle; - config.horizontalGrid = paintHorizontalGrid; - config.verticalGrid = paintVerticalGrid; - this._updateFeaturesToStyle(selectedStyle); - var holder = this._getHolder(); - holder.innerHTML = ""; - holder.style.height = (config.sizeY+config.sizeYKey) + "px"; - holder.style.width = config.sizeX + "px"; - this.raphael = Raphael(holder, config.sizeX, config.sizeY+config.sizeYKey); - this._repaint('withoutZoom'); - } - }, - - /** - * 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. - * - * @example - * myPainter.paintFeatures(); - * - * @param {Object} [json] The json object describing the configuration, features, and legend to be displayed. - */ - paintFeatures: function(json) { - if ( json ) { - this.opt.json = json; - } - this._init(); - this._paintSlider(); - this._repaint(); - }, - - /** - * 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(); - * - */ - exportFeaturesToImage: function() { -// if (typeof FlashCanvas != "undefined") { -// FlashCanvas.initElement(canvas); -// } - var config = this.opt.json.configuration; - var dataURL = ""; - if (jQuery.browser.msie) { //canvas does not work (not even with IE 9) - this.$imageExported = jQuery('') - .html('Image export is not supported for IE') - .dialog({ - autoOpen: true, - title: 'Exported image', - modal: true, - width: config.sizeX+20 - }); - } else { - svg = this._getHolder().innerHTML; - var canvas = document.createElement("canvas"); - canvg(canvas, svg); - dataURL = canvas.toDataURL(); - this.$imageExported = jQuery('') - .html('
'); - painter_div.append(''); - - var holder = this._getHolder(); - if (!holder) { - this.$errorMsg = jQuery('') - .html('There was an unexpected failure, the image cannot be displayed.') - .dialog({ - autoOpen: true, - title: 'Error', - modal: true/*, - buttons: { - Ok: function() { jQuery(this).dialog('close'); } - }*/ - }); - //this.$errorMsg.dialog('open'); - throw "Error"; - } - holder.innerHTML = ""; - holder.style.height = (config.sizeY+config.sizeYKey) + "px"; - holder.style.width = config.sizeX + "px"; - this.raphael = Raphael(holder, config.sizeX, config.sizeY+config.sizeYKey); - }, - - /** - * Private: Clears all divs content. - * @param {boolean} [withoutZoom=false] When true, it sets to 0 the total count for all feature types. - * @ignore - */ - _clear: function(withoutZoom) { - this.raphael.clear(); - this.connections = []; - if (!withoutZoom) { - //console.log(legend.key); - var keyShapes = this.opt.json.legend.key; - if (keyShapes) { - for (var i = 0; i < keyShapes.length; i++) { - keyShapes[i].label.total = 0; - } - } - } - }, - - /** - * Private: Paints the shapes and rectangles. - * @param {boolean} [withoutZoom=false] When true, this method recalculates the total for each feature type. - * @ignore - */ - _paintJson: function(withoutZoom) { - var config = this.opt.json.configuration; - for (var i = 0; i < this.opt.json.featuresArray.length; i++) { - var elem = this.opt.json.featuresArray[i]; - if (!((elem.featureEnd < config.requestedStart) || (elem.featureStart > config.requestedStop))) {//within the range - this._paint(elem, config.sequenceLineY); - if (!withoutZoom) { - this._increaseKeyTotal(elem.typeLabel); - } - } - } - }, - - /** - * Private: Paints the legend (segment and key). - * @ignore - */ - _paintKey: function() { - var legend = this.opt.json.legend; - //console.log(key); - var keySegment = legend.segment - var font = {'text-anchor':'start'}; - var shape = this.raphael.text(keySegment.xPos, keySegment.yPos, keySegment.text).attr(font); - shape.attr({"stroke": "black", "stroke-width": 0.1}); - var keyShapes = legend.key; - for (var i = 0; i < keyShapes.length; i++) { - this._paint(keyShapes[i].shape); - var shapeText = keyShapes[i].label; - var font = {'text-anchor':'start'}; - var shape = this.raphael.text(shapeText.xPos, shapeText.yPos, shapeText.text + ' (' + shapeText.total + ')').attr(font); - shape.attr({"stroke": "black", "stroke-width": 0.1}); - } - }, - - /** - * Private: Paints the ruler. - * @ignore - */ - _paintRuler: function() {//holder size, left and right margins of the holder, and number of amino acids - var config = this.opt.json.configuration; - //console.log(config); - //Draw the ruler - var ruler = this.raphael.path("M" + config.leftMargin + " " + config.rulerY + "L" + (config.sizeX-config.rightMargin) + " " + config.rulerY); - ruler.attr({fill: "black", stroke: "black", "fill": 1, "stroke-width": 1}); - //Draw the divisions - var divisions = 1.0 * config.rulerLength / config.pixelsDivision; //number of divisions with label - var divisionValue = 1.0 * (config.requestedStop-config.requestedStart+1) / divisions; //seed value for labels - var divisionSize = config.rulerLength / (divisions*10); //inter-divisions - divisions = Math.round(divisions); - divisionValue = Math.round(divisionValue); - for (var i = 1; i < divisions*10; i++) { //10 inter-divisions for each division - var posX = Math.round(i*divisionSize + config.leftMargin); - if ((divisionValue*i/10) < config.requestedStop) { - if (i%10 == 0) { - var line = this.raphael.path("M" + posX + " " + (config.rulerY-6) + "L" + posX + " " + (config.rulerY+6)); - line.attr({fill: "black", stroke: "black", "fill": 1, "stroke-width": 1}); - var text = this.raphael.text(posX, config.aboveRuler, "" + ((divisionValue*i/10)+config.requestedStart-1)); - text.attr({fill: "black"}); - if ((config.verticalGrid == 'true') || (config.verticalGrid == true)) { - var line = this.raphael.path("M" + posX + " " + (config.rulerY+6) + "L" + posX + " " + config.verticalGridLineLength); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } - } else if (i%5 == 0) { - var line = this.raphael.path("M" + posX + " " + (config.rulerY-4) + "L" + posX + " " + (config.rulerY+4)); - line.attr({fill: "grey", stroke: "grey", "fill": 1, "stroke-width": 1}); - } /*else { - var line = this.raphael.path("M" + posX + " " + (rulerY-2) + "L" + posX + " " + (rulerY+2)); - line.attr({fill: "grey"}); - } */ - } - } - //always draw the start and the stop - var text = this.raphael.text(config.leftMargin, config.belowRuler, "" + config.requestedStart); - text.attr({fill: "blue"}); - var text = this.raphael.text(config.rulerLength + config.leftMargin, config.belowRuler, "" + config.requestedStop); - text.attr({fill: "blue"}); - if ((config.verticalGrid == 'true') || (config.verticalGrid == true)) { - var line = this.raphael.path("M" + config.leftMargin + " " + (config.rulerY+6) + "L" + config.leftMargin + " " + config.verticalGridLineLength); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - var line = this.raphael.path("M" + (config.rulerLength + config.leftMargin) + " " + (config.rulerY+6) + "L" + (config.rulerLength + config.leftMargin) + " " + config.verticalGridLineLength); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } - //Now create the sequence line - var sequenceLine = this.raphael.path("M" + config.leftMargin + " " + config.sequenceLineY + "L" + (config.sizeX-config.rightMargin) + " " + config.sequenceLineY); - sequenceLine.attr({fill: "blue", stroke: "blue", "fill": 1, "stroke-width": 1}); - //Paint the horizontal grid lines - this._paintHorizontalGridLines(config.horizontalGrid, config.horizontalGridNumLines, config.gridLineHeight, config.nonOverlapping, config.leftMargin, config.rightMargin, config.sequenceLineY, config.rulerY, config.sizeX, this.raphael); - }, - - /** - * Private: Paints the slider - * @ignore - */ - _paintSlider: function() {//holder size, left and right margins of the holder, and number of amino acids - if (this.opt.showSlider == true) { - var config = this.opt.json.configuration; - var start = config.requestedStart; - var stop = config.requestedStop; - var sequenceLength = config.sequenceLength; - var slider_div = this._getElementWithinTarget('uniprotFeaturePainter-slider'); - if (!slider_div) { - return; - } - - this.slider_start = start; - this.slider_stop = stop; - slider_div.text(''); - slider_div.append(''); - slider_div.append(''); - var myself = this; - this.zoomSlider = jQuery('').appendTo(slider_div); - - //console.log(jQuery('#uniprotFeaturePainter-slider-bar' )); - - this._getElementWithinTarget('uniprotFeaturePainter-slider-bar').slider({ - range: true, - min: 1, - max: sequenceLength, - values: [start, stop], - slide: function(event, ui) { - myself._getElementWithinTarget('uniprotFeaturePainter-slider-values').html('Zoom - Start: '+ui.values[0] + ', End: ' + ui.values[1]); - slider_start = ui.values[0]; - slider_stop = ui.values[1]; - }, - change: function(event, ui) { - myself._repaint(undefined, ui.values[0], ui.values[1]); - } - }); - - this._getElementWithinTarget('uniprotFeaturePainter-slider-values').html('Zoom - Start:' + start + ', End:' + stop); - } - }, - - /** - * Private: Repaints everything: ruler, shapes, and legend. - * @param {boolean} [withoutZoom=false] When false, it zooms according to the slider values. - * @param {int} [newStart] Zoom from this sequence start value. - * @param {int} [newStop] Zoom to this sequence end value. - * @ignore - */ - _repaint: function(withoutZoom, newStart, newStop) { - //recalculate start and stop - var config = this.opt.json.configuration; - if (newStart && newStop){ - this.slider_start = newStart; - this.slider_stop = newStop; - } - if ((this.slider_start != 0) && (this.slider_stop != 0)){ - config.requestedStart = this.slider_start; - config.requestedStop = this.slider_stop; - } - config.unitSize = config.rulerLength / (config.requestedStop-config.requestedStart+1); - this._clear(withoutZoom); - this._paintRuler(); - //recalculate cx, x, and width for features within the ranges - if (!withoutZoom) { - for (var i = 0; i < this.opt.json.featuresArray.length; i++) { - var elem = this.opt.json.featuresArray[i]; - if (!((elem.featureEnd < config.requestedStart) || (elem.featureStart > config.requestedStop))) {//within the range - this._applyZoomToFeature(elem); - } - } - } - this._paintJson(withoutZoom); - this._paintKey(); - }, - - /** - * Private: Function to create slider and print button. - * @param {int} sizeX Width. - * @param {int} sizeY Height for the features holder. - * @param {int} sizeYKey Height for the legend. - * @ignore - */ - _withSliderAndButton: function (sizeX, sizeY, sizeYKey) { - var text = - '
| ' + - '' + - ' | ' + - '' +
- ' ' +
- '' +
- ' ' +
- ' | ' +
- '
' + - '' + - ''; - return text; - }, - /** - * Private: Function to create slider only. - * @param {int} sizeX Width. - * @ignore - */ - _withSliderOnly: function(sizeX) { - var text = - '
| ' + - '' + - ' | ' + - '
'; - return text; - }, - /** - * Private: Function to create print button only. - * @param {int} sizeX Width. - * @param {int} sizeY Height for the features holder. - * @param {int} sizeYKey Height for the legend. - * @ignore - */ - _withButtonOnly: function (sizeX, sizeY, sizeYKey) { - var text = - '
| ' +
- ' ' +
- '' +
- ' ' +
- ' | ' +
- '
' + - '' + - ''; - return text; - }, - - /** - * Private: click only rectangle event - * @param myself this object is raising the event. - * @param shapeRectangle Container for shapes, or the shape itself for rectangles. - * @param obj feature object. - * @param eventName Name of the event to be raised. - * @ignore - */ - _raiseEvent: function(myself, shapeRectangle, obj, eventName) { - connection = myself.connections[shapeRectangle.connectionIndex-1]; - if (connection) {//will not enter if undefined in chrome and firefox - try { - shapeRectangle = connection.from; - } catch (error) {} //will be catched in IE - } - myself.raiseEvent(eventName, { - featureId: obj.featureId, - featureLabel: obj.featureLabel, - featureStart: obj.featureStart, - featureEnd: obj.featureEnd, - featureTypeLabel: obj.featureTypeLabel, - typeCode: obj.typeCode, - typeCategory: obj.typeCategory, - evidenceText: obj.evidenceText, - evidenceCode: obj.evidenceCode, - shape: shapeRectangle - }); - }, - - _featureClick: function(onlySelect, myself, raphaelObj, featureObj) { - myself._clickCounter = myself._clickCounter + 1; - if (onlySelect) { - myself._originalColor = raphaelObj.attrs.stroke; - myself._originalFillColor = raphaelObj.attrs.fill; - } else {//both highlight and select - if (myself._clickCounter > 1) {//mouse has not leave the feature (it is down now but up is true already - myself._originalColor = raphaelObj.attrs.stroke; - myself._originalFillColor = raphaelObj.attrs.fill; - } - } - raphaelObj.animate({"fill-opacity": 1.0}, 500); - if (raphaelObj == myself._previousClickedShape) {//the second click will deselect - if (myself._originalColor == myself.opt.selectionColor) { //it is selected, will be deselected - myself._originalColor = myself._previousClickedColor; - myself._originalFillColor = myself._previousClickedFillColor; - raphaelObj.attr({stroke: myself._previousClickedColor, fill: myself._previousClickedFillColor}); - //only select this.animate({"fill-opacity": 1.0}, 500); - featureObj.isSelected = false; - myself._raiseEvent(myself, raphaelObj, featureObj, 'onFeatureUnselected'); - } else { //it is deselected (even counter), will be selected - if (onlySelect || (myself._clickCounter%2 != 0)) { - raphaelObj.attr({stroke: myself.opt.selectionColor, fill: myself.opt.selectionColor}); - raphaelObj.animate({"fill-opacity": 1.0}, 500); - } - featureObj.isSelected = true; - myself._raiseEvent(myself, raphaelObj, featureObj, 'onFeatureSelected'); - } - } else { - //deselect the previous feature - if (myself._previousClickedShape && (myself._previousClickedShape != "")) { - try { - myself._previousClickedShape.attr({stroke: myself._previousClickedColor, fill: myself._previousClickedFillColor}); - myself._previousClickedShape.animate({"fill-opacity": .5}, 500); - myself._previousClickedFeature.isSelected = false; - myself._raiseEvent(myself, myself._previousClickedShape, featureObj, 'onFeatureUnselected'); - } catch (error) {Biojs.console.log(error);} - } - //keep the last clicked shape info - myself._previousClickedColor = myself._originalColor; - myself._previousClickedFillColor = myself._originalFillColor; - myself._previousClickedShape = raphaelObj; - myself._previousClickedFeature = featureObj; - //change colour to highlight colour - if (onlySelect) { - raphaelObj.attr({stroke: myself.opt.selectionColor, fill: myself.opt.selectionColor}); - raphaelObj.animate({"fill-opacity": 1.0}, 500); - } //else : it was already done by the hover function - featureObj.isSelected = true; - myself._raiseEvent(myself, raphaelObj, featureObj, 'onFeatureSelected'); - } - //raise CLICK event - myself._raiseEvent(myself, raphaelObj, featureObj, 'onFeatureClick'); - }, - - /** - * Private: Gets a JSON element representing SVG-features and creates a Rapha�l object and paints features; - * it also adds tooltip and move, mousein, mouseout, and drag events for features. - * @param {Object} obj SVG representation for features. - * @param {int} sequenceLineY Y position for the sequence line. - * @ignore - */ - _paint: function(obj, sequenceLineY) { - var dotRadius = 1; - var shape; - if (obj.type == "path") { - if (obj.featureId || !sequenceLineY) { //feature, must be connected - shape = this.raphael.path(obj.path); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } else { //line - var path = this.raphael.path(obj.path); - path.attr({"fill": obj.fill, "stroke": obj.stroke, "stroke-width": obj.strokeWidth}); - } - } else if (obj.type == "text") { - if (obj.featureId || !sequenceLineY) { - shape = this.raphael.text(obj.x, obj.y, obj.text); - shape.attr({"stroke": obj.stroke, "fill-opacity": obj.fillOpacity, "stroke-width": 2}); - } else { - var text = this.raphael.text(obj.x, obj.y, obj.text); - text.attr({"fill": obj.fill}); - } - } else if (obj.type == "circle") { - shape = this.raphael.circle(obj.cx, obj.cy, obj.r); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } else if (obj.type == "rect") { - if (obj.width == 0) { //For some really long sequences make sure the rectangle has width. - obj.width = 1; - } - shape = this.raphael.rect(obj.x, obj.y, obj.width, obj.height); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } else if (obj.type == "diamond") { - shape = this.raphael.uniprotFeaturePainter_diamond(obj.cx, obj.cy, obj.r); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } else if (obj.type == "bridge") { - shape = this.raphael.uniprotFeaturePainter_bridge(obj.cx, obj.cy, obj.width, obj.height); - obj.fill = "none"; - shape.attr({ - "fill": obj.fill, - "stroke": obj.stroke, - "fill-opacity": 0.0 - }); - } else if (obj.type == "triangle") { - shape = this.raphael.uniprotFeaturePainter_triangle(obj.cx, obj.cy, obj.r); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } else if (obj.type == "conPath") { //deprecated - var rad = 4; - var vert = 8; - if (obj.text == "N") { - shape = this.raphael.uniprotFeaturePainter_NPath(obj.x, obj.y, rad, vert); - } else if (obj.text == "O") { - shape = this.raphael.uniprotFeaturePainter_OPath(obj.x, obj.y, rad, vert); - } else if (obj.text == "C") { - shape = this.raphael.uniprotFeaturePainter_CPath(obj.x, obj.y, rad, vert); - } else {//C-O-N - //C - rad = 2; - vert = 6; - var space = 4; - shape = this.raphael.uniprotFeaturePainter_CONPath(obj.x, obj.y, rad, vert, space); - } - shape.attr({"stroke": obj.stroke, "fill-opacity": obj.fillOpacity, "stroke-width": 2}); - } else if (obj.type == "wave") { - shape = this.raphael.uniprotFeaturePainter_wave(obj.cx, obj.cy, obj.r); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } else if (obj.type == "hexagon") { - shape = this.raphael.uniprotFeaturePainter_hexagon(obj.cx, obj.cy, obj.r); - shape.attr({"fill": obj.fill, "stroke": obj.stroke, "fill-opacity": obj.fillOpacity}); - } - if (obj.isSelected) { - this._previousClickedShape = shape; - this._previousClickedColor = shape.attrs.stroke; - this._previousClickedFeature = obj; - shape.attr({"fill": this.opt.selectionColor, "stroke": this.opt.selectionColor, "fill-opacity": this.opt.selectionColor}); - } - if (sequenceLineY) { - var myself = this; - if (this.opt.selectFeatureOnMouseClick) {//events are the same for both shapes and rectangles - if (this.opt.highlightFeatureOnMouseOver) { //highlight, select, and raise both over and click events - _clickedShape = false; - shape.click( - function() { - _clickedShape = true; - myself._featureClick(false, myself, this, obj); - } - ); - shape.hover( - function() {//on - myself._originalColor = shape.attrs.stroke; - myself._originalFillColor = shape.attrs.fill; - this.attr({stroke: myself.opt.selectionColor, fill: myself.opt.selectionColor}); - this.animate({"fill-opacity": 1.0}, 500); - //raise ON event - myself._raiseEvent(myself, this, obj, 'onFeatureOn'); - }, - function() {//off - if (!_clickedShape) { //return to the original colour - this.attr({stroke: myself._originalColor, fill: myself._originalFillColor}); - } - _clickedShape = false; - myself._clickCounter = 0; - this.animate({"fill-opacity": .5}, 500); - //raise OFF event - myself._raiseEvent(myself, this, obj, 'onFeatureOff'); - } - ); - } else { //only select, and raise both over and click events - shape.click( - function() { - myself._featureClick(true, myself, this, obj); - } - ); - shape.hover( - function() {//on - //raise ON event - myself._raiseEvent(myself, this, obj, 'onFeatureOn'); - }, - function() {//off - this.animate({"fill-opacity": .5}, 500); - //raise OFF event - myself._raiseEvent(myself, this, obj, 'onFeatureOff'); - } - ); - } - } else { - if (this.opt.highlightFeatureOnMouseOver) { //only highlight, and raise both over and click events - shape.click( - function() { - //raise CLICK event - myself._raiseEvent(myself, this, obj, 'onFeatureClick'); - } - ); - shape.hover( - function() {//on - myself._originalColor = this.attrs.stroke; - myself._originalFillColor = shape.attrs.fill; - this.attr({stroke: myself.opt.selectionColor, fill: myself.opt.selectionColor}); - this.animate({"fill-opacity": 1.0}, 500); - //raise ON event - myself._raiseEvent(myself, this, obj, 'onFeatureOn'); - }, - function() {//off - this.attr({stroke: myself._originalColor, fill: myself._originalFillColor}); - this.animate({"fill-opacity": .5}, 500); - //raise OFF event - myself._raiseEvent(myself, this, obj, 'onFeatureOff'); - } - ); - } else { //raise both over and click events - shape.click( - function() { - //raise CLICK event - myself._raiseEvent(myself, this, obj, 'onFeatureClick'); - } - ); - shape.hover( - function() {//on - //raise ON event - myself._raiseEvent(myself, this, obj, 'onFeatureOn'); - }, - function() {//off - //raise OFF event - myself._raiseEvent(myself, this, obj, 'onFeatureOff'); - } - ); - } - } - if ((obj.type != "rect") && ((obj.type != "bridge"))){ //shapes are movable and have a link to the sequence line - //dragging - if (this.opt.dragSites) { - shape.drag( - function (dx, dy) { //move - if (!this.attr("cx") && !this.attr("x")) {//path (http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js) - var trans_x = dx-this.ox; - var trans_y = dy-this.oy; - this.translate(trans_x,trans_y); - this.ox = dx; - this.oy = dy; - } else { - var att = this.type == "rect" || this.type == "text" - ? {x: this.ox + dx, y: this.oy + dy} - : {cx: this.ox + dx, cy: this.oy + dy}; - this.attr(att); - } - //Repaints all connections - myself.raphael.uniprotFeaturePainter_connection(myself.connections[this.connectionIndex-1]); - myself.raphael.safari(); - }, - function () { //dragger - if (!this.attr("cx") && !this.attr("x")) { //path (http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js) - this.ox = 0; - this.oy = 0; - } else { - this.ox = this.type == "rect" || this.type == "text" ? this.attr("x") : this.attr("cx"); - this.oy = this.type == "rect" || this.type == "text" ? this.attr("y") : this.attr("cy"); - } - this.animate({"fill-opacity": 1.0}, 500); - }, - function () { //up - this.animate({"fill-opacity": .5}, 500); - } - ); - } - //dot - var dot = this.raphael.circle(obj.x, sequenceLineY, dotRadius); - dot.attr({"fill": 1, stroke: obj.stroke, "stroke-width": 1}); - //connection - try { - //console.log(obj); - var connectionLine = this.raphael.uniprotFeaturePainter_connection(dot, shape, "#000"); - //console.log(connectionLine); - this.connections.push(connectionLine); - shape.connectionIndex = this.connections.length; - } catch (err) {Biojs.console.log(err);} - } - } - //tooltip - if (this.opt.showFeatureTooltipOnMouseOver == true) { - if (obj.featureId) {//only features in the sequence have tooltips - //console.log(obj); - //console.log(shape); - obj.featureId = obj.featureId.replace(/:|\./g, "_"); - shape.node.id = "uniprotFeaturePainter_" + obj.featureId; - //shape.id = shape.node.id; - 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; - var myFeatureObj = myself._getElementWithinTarget("uniprotFeaturePainter_" + obj.featureId); - //This one works fine: xph.tooltip.v0.7b - //myFeatureObj.tooltip({text: tooltip}); - //This one works fine: bassistance.de - myFeatureObj.tooltip({ - track: true, - delay: 0, - showURL: false, - bodyHandler: function() { - return tooltip; - } - }); - } - } - this.raphael.safari(); - }, - - /** - * Private: Counts the features per type so they will be correctly displayed on the legend. - * @param {string} keyName Feature type. - * @ignore - */ - _increaseKeyTotal: function(keyName) { - //console.log(key); - var keyShapes = this.opt.json.legend.key; - for (var i = 0; i < keyShapes.length; i++) { - if (keyShapes[i].label.text == keyName) { - keyShapes[i].label.total = keyShapes[i].label.total + 1; - return; - } - } - }, - - /** - * Private: Recalculates (x,y) positions for a particular feature, used when a zoom has been called. - * @param {Object} el Element whose x, y, and width needs to be recalculated according to the new zoom. - * @ignore - */ - _applyZoomToFeature: function(el) { - config = this.opt.json.configuration; - if (config.requestedStart != 1) { - fstart = el.featureStart - config.requestedStart; - fstop = el.featureEnd - config.requestedStart; - } else { - fstart = el.featureStart; - fstop = el.featureEnd; - } - xInit = Math.round(fstart*config.unitSize + config.leftMargin); - xEnd = Math.round(fstop*config.unitSize + config.leftMargin); - width = xEnd - xInit; - if (el.type == 'hexagon') { //typeName == 'Glycosilation' - xInit = xInit - (el.r/2); - } - el.cx = xInit; - el.x = xInit; - el.width = width; - }, - - /** - * Private: Paints the horizontal grid lines. - * @param {boolean} horizontalGrid Should horizontal lines be painted? - * @param {int} horizontalGridNumLines Number of horizontal grid lines to be painted. - * @param {int} gridLineHeight Pixels separation between lines. - * @param {boolean} nonOverlapping Is nonOverlapping style selected? - * @param {int} leftMargin Pixels to left margin. - * @param {int} rightMargin Pixels to right margin. - * @param {int} sequenceLineY Y position for the sequence line. - * @param {int} rulerY Y position for the ruler. - * @param {int} sizeX Width. - * @param {Object} raphael SVG features representation. - * @ignore - */ - _paintHorizontalGridLines: function(horizontalGrid, horizontalGridNumLines, gridLineHeight, nonOverlapping, leftMargin, rightMargin, sequenceLineY, rulerY, sizeX, raphael) { - //Draw the grid lines - if ((horizontalGrid == 'true') || (horizontalGrid == true)) { - for (i = 1; i <= horizontalGridNumLines; i++) { - if (!nonOverlapping) { - var line = raphael.path("M" + leftMargin + " " + (sequenceLineY + i*gridLineHeight) - + "L" + (sizeX-rightMargin) + " " + (sequenceLineY + i*gridLineHeight)); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - var lineUp = raphael.path("M" + leftMargin + " " + (sequenceLineY - i*gridLineHeight) - + "L" + (sizeX-rightMargin) + " " + (sequenceLineY - i*gridLineHeight)); - lineUp.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } else { - var lineUp = raphael.path("M" + leftMargin + " " + (rulerY + (i+1)*gridLineHeight) - + "L" + (sizeX-rightMargin) + " " + (rulerY + (i+1)*gridLineHeight)); - lineUp.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } - } - if (!nonOverlapping && (horizontalGridNumLines != 0)) { //we need an extra horizontal grid line at the bottom - var line = raphael.path("M" + leftMargin + " " + (sequenceLineY + (horizontalGridNumLines+1)*gridLineHeight) - + "L" + (sizeX-rightMargin) + " " + (sequenceLineY + (horizontalGridNumLines+1)*gridLineHeight)); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } - if (nonOverlapping && (horizontalGridNumLines != 0)) { //we need an extra horizontal grid line at the bottom - var line = raphael.path("M" + leftMargin + " " + (rulerY + (horizontalGridNumLines+2)*gridLineHeight) - + "L" + (sizeX-rightMargin) + " " + (rulerY + (horizontalGridNumLines+2)*gridLineHeight)); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } - } - }, - - /** - * Private: Paints the vertical grid lines. - * @param {int} verticalGridLineLength Vertical grid line length. - * @param {int} stop Requested stop for the sequence. - * @param {int} start Requested start for the sequence. - * @param {int} rulerLength Ruler length. - * @param {int} rulerY Y position for the ruler. - * @param {int} pixelsDivision Pixels between amino acids. - * @param {int} leftMargin Pixels to left margin. - * @param {Object} raphael SVG features representation. - * @ignore - */ - _paintVerticalGridLines: function(verticalGridLineLength, stop, start, rulerLength, rulerY, pixelsDivision, leftMargin, raphael) { - //Draw the vertical grid lines - var divisions = 1.0 * rulerLength / pixelsDivision; //number of divisions with label - var divisionValue = 1.0 * (stop-start+1) / divisions; //seed value for labels - var divisionSize = rulerLength / (divisions*10); //inter-divisions - divisions = Math.round(divisions); - divisionValue = Math.round(divisionValue); - for (var i = 1; i < divisions*10; i++) { //10 inter-divisions for each division - var posX = Math.round(i*divisionSize + leftMargin); - if ((divisionValue*i/10) < stop) { - if (i%10 == 0) { - var line = raphael.path("M" + posX + " " + (rulerY+6) + "L" + posX + " " + verticalGridLineLength); - line.attr({stroke: "black", "stroke-width": 0.7, "stroke-opacity": this._GRID_OPACITY}); - } - } - } - }, - - /** - * Modifies the variables in the configuration JSON element related to the style according to the new style to be applied; it also modifies the (x,y) - * positions for all features and the legend. - * @param {string} newStyle New style to be applied - * @ignore - */ - _updateFeaturesToStyle: function (newStyle) { - if (newStyle == this._ROWS) { - this.opt.json.configuration.sequenceLineY = this.opt.json.configuration.sequenceLineYRows; - this.opt.json.configuration.sizeY = this.opt.json.configuration.sizeYRows; - this.opt.json.configuration.verticalGridLineLength = this.opt.json.configuration.verticalGridLineLengthRows; - this.opt.json.configuration.horizontalGridNumLines = this.opt.json.configuration.horizontalGridNumLinesRows; - this.opt.json.legend.segment.yPos = this.opt.json.legend.segment.yPosRows; - this.opt.json.configuration.nonOverlapping = false; - } else if (newStyle == this._NON_OVERLAPPING) { - this.opt.json.configuration.sequenceLineY = this.opt.json.configuration.sequenceLineYNonOverlapping; - this.opt.json.configuration.sizeY = this.opt.json.configuration.sizeYNonOverlapping; - this.opt.json.configuration.verticalGridLineLength = this.opt.json.configuration.verticalGridLineLengthNonOverlapping; - this.opt.json.configuration.horizontalGridNumLines = this.opt.json.configuration.horizontalGridNumLinesNonOverlapping; - this.opt.json.legend.segment.yPos = this.opt.json.legend.segment.yPosNonOverlapping; - this.opt.json.configuration.nonOverlapping = true; - } else { //this._CENTERED - this.opt.json.configuration.sequenceLineY = this.opt.json.configuration.sequenceLineYCentered; - this.opt.json.configuration.sizeY = this.opt.json.configuration.sizeYCentered; - this.opt.json.configuration.verticalGridLineLength = this.opt.json.configuration.verticalGridLineLengthCentered; - this.opt.json.configuration.horizontalGridNumLines = this.opt.json.configuration.horizontalGridNumLinesCentered; - this.opt.json.legend.segment.yPos = this.opt.json.legend.segment.yPosCentered; - this.opt.json.configuration.nonOverlapping = false; - } - for (var i = 0; i < this.opt.json.featuresArray.length; i++) { - var elem = this.opt.json.featuresArray[i]; - if (newStyle == this._ROWS) { - elem.cy = elem.rowsStyle.y; - elem.y = elem.rowsStyle.y; - elem.height = elem.rowsStyle.heightOrRadius; - elem.r = elem.rowsStyle.heightOrRadius; - } else if (newStyle == this._NON_OVERLAPPING) { - elem.cy = elem.nonOverlappingStyle.y; - elem.y = elem.nonOverlappingStyle.y; - elem.height = elem.nonOverlappingStyle.heightOrRadius; - elem.r = elem.nonOverlappingStyle.heightOrRadius; - } else { //this._CENTERED - elem.cy = elem.centeredStyle.y; - elem.y = elem.centeredStyle.y; - elem.height = elem.centeredStyle.heightOrRadius; - elem.r = elem.centeredStyle.heightOrRadius; - } - } - for (var i = 0; i < this.opt.json.legend.key.length; i++) { - var elem = this.opt.json.legend.key[i].shape; - if (newStyle == this._ROWS) { - this.opt.json.legend.key[i].label.yPos = this.opt.json.legend.key[i].label.yPosRows; - elem.cy = elem.rowsStyle.y; - elem.y = elem.rowsStyle.y; - elem.height = elem.rowsStyle.heightOrRadius; - elem.r = elem.rowsStyle.heightOrRadius; - } else if (newStyle == this._NON_OVERLAPPING) { - this.opt.json.legend.key[i].label.yPos = this.opt.json.legend.key[i].label.yPosNonOverlapping; - elem.cy = elem.nonOverlappingStyle.y; - elem.y = elem.nonOverlappingStyle.y; - elem.height = elem.nonOverlappingStyle.heightOrRadius; - elem.r = elem.nonOverlappingStyle.heightOrRadius; - } else { //this._CENTERED - this.opt.json.legend.key[i].label.yPos = this.opt.json.legend.key[i].label.yPosCentered; - elem.cy = elem.centeredStyle.y; - elem.y = elem.centeredStyle.y; - elem.height = elem.centeredStyle.heightOrRadius; - elem.r = elem.centeredStyle.heightOrRadius; - } - } - }, - - /** - * @ignore - **/ - initRaphael: function(){ - //var uniprotFeaturePainter_el; - - /* - * Creates an hexagon <_> (from top to bottom) - * x, y: coordinates of the top vertex - * size: size of the internal square - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_hexagon = function(x, y, size) { - x = x - (size/2); - var path = ["M", x, y]; - path = path.concat(["L", x-size, y+(size/2)]); - path = path.concat(["L", x, y+size]); - path = path.concat(["L", x+size, y+size]); - path = path.concat(["L", x+size+size, y+(size/2)]); - path = path.concat(["L", x+size, y]); - return this.path(path.concat(["Z"]).join(" ")); - }; - /* - * Creates a triangle /_\ (fro top to bottom) - * x, y: coordinates of the top vertex - * size: size of the bottom edge - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_triangle = function(x, y, size) { - var path = ["M", x, y]; - path = path.concat(["L", (x + size / 2), (y + size)]); - path = path.concat(["L", (x - size / 2), (y + size)]); - return this.path(path.concat(["Z"]).join(" ")); - }; - /* - * Creates a wave (from top to bottom) - * /\/\ - * |/\/\| - * x, y: coordinates of the lowest top centered vertex /\./\ - * size: size of the bottom edge of the sub-triangles /_\ - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_wave = function(x, y, size) { - var path = ["M", x, y]; - path = path.concat(["L", x-(size/2), y-size]); // \ - path = path.concat(["L", x-size, y]); // / - path = path.concat(["L", x-size, y+size]); // | - path = path.concat(["L", x-(size/2), y+(size/2)]); // / - path = path.concat(["L", x, y+size]); // \ first wave - path = path.concat(["L", x+(size/2), y+(size/2)]); // / - path = path.concat(["L", x+size, y+size]); // \ - path = path.concat(["L", x+size, y]); // | - path = path.concat(["L", x+(size/2), y-size]); // \ - return this.path(path.concat(["Z"]).join(" ")); - } - /* - * Creates a diamond (from top to bottom) - * x, y: coordinates of the top vertex - * r: radius from the center - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_diamond = function(x, y, r) { - var path = ["M", x, y]; - path = path.concat(["L", x-r, y+r]); - path = path.concat(["L", x, y+(r*2)]); - path = path.concat(["L", x+r, y+r]); - return (this.path(path.concat(["Z"].join(" ")))); - } - /** - * Creates a bridge - * @param x coordinate - * @param y coordinate - * @param width - * @param height - * @returns {*|Array} - */ - Raphael.fn.uniprotFeaturePainter_bridge = function (x, y, width, height) { - //console.log(x,y,width, height); - var path = ["M", x, y-1]; - path = path.concat(["L", x , y - 1 - height]); - path = path.concat(["L", x + width , y - 1 - height ]); - path = path.concat(["L", x+ width, y - 1 ]); - return (this.path(path)); - } - /* - * Creates an N path - * x, y: coordinates of the letter (as it would be painted as a String) - * width - * height - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_NPath = function(x, y, width, height) { - var path = ["M", (x-width),(y+height)]; - path = path.concat(["L", (x-width), y]); - path = path.concat(["L", (x+width), (y+height-1)]); - path = path.concat(["L", (x+width),(y-1)]); - return (this.path(path)); - } - /* - * Creates an O path - * x, y: coordinates of the letter (as it would be painted as a String) - * width - * height - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_OPath = function(x, y, width, height) { - var path = ["M", (x), (y)]; - path = path.concat(["C", (x-width), (y), (x-width), (y+height), (x), (y+height)]); - path = path.concat(["M", (x), (y)]); - path = path.concat(["C", (x+width), (y), (x+width), (y+height), (x), (y+height)]); - return (this.path(path)); - } - /* - * Creates a C path - * x, y: coordinates of the letter (as it would be painted as a String) - * width - * height - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_CPath = function(x, y, width, height) { - var path = ["M", (x+width), (y)]; - path = path.concat(["C", (x-width), (y), (x-width), (y+height), (x+width), (y+height)]); - return (this.path(path)); - } - /* - * Creates a C-O-N path - * x, y: coordinates of the letter (as it would be painted as a String) - * width - * height - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_CONPath = function(x, y, width, height, space) { - //C - var path = ["M", (x-width-space), (y)]; - path = path.concat(["C", (x-width-space-(width*2)), (y), (x-width-space-(width*2)), (y+height), (x-width-space), (y+height)]); - //- - path = path.concat(["M", (x-width-space+1), (y+height/2)]); - path = path.concat(["L", (x-width-1), (y+height/2)]); - //O - path = path.concat(["M", (x), (y)]); - path = path.concat(["C", (x-width), (y), (x-width), (y+height), (x), (y+height)]); - path = path.concat(["M", (x), (y)]); - path = path.concat(["C", (x+width), (y), (x+width), (y+height), (x), (y+height)]); - //- - path = path.concat(["M", (x+width+1), (y+height/2)]); - path = path.concat(["L", (x+width+space-1), (y+height/2)]); - //N - path = path.concat(["M", (x+width+space), (y+height)]); - path = path.concat(["L", (x+width+space), y-2]); - path = path.concat(["L", (x+width*3+space), (y+height)]); - path = path.concat(["L", (x+width*3+space), (y-2)]); - return (this.path(path)); - } - /* - * Creates a dynamic connection (from http://raphaeljs.com/graffle.html) - */ - /** - * @ignore - **/ - Raphael.fn.uniprotFeaturePainter_connection = function (obj1, obj2, line, bg) { - //console.log('connection'); - //console.log(obj1); - //console.log(obj2); - if (obj1.line && obj1.from && obj1.to) { - //console.log('if'); - line = obj1; - obj1 = line.from; - obj2 = line.to; - } - var bb1 = obj1.getBBox(); //console.log('bb1'); console.log(bb1); - if ((!bb1.x) && (obj1.type == "circle")) { //it should not be necessary but it fails to get the BBox the first time the widget is called by ajax - //console.log('!bb1 and circle'); - bb1 = {height: obj1.attrs.r*2, width: obj1.attrs.r*2, x: obj1.attrs.cx-obj1.attrs.r, y:obj1.attrs.cy-obj1.attrs.r}; - //console.log(bb1); - } - var bb2 = obj2.getBBox(); //console.log('bb2'); //console.log(bb2); - if ((!bb2.x) && (obj2.type == "circle")) { //it should not be necessary but it fails to get the BBox the first time the widget is called by ajax - //console.log('!bb2 and circle'); - bb2 = {height: obj2.attrs.r*2, width: obj2.attrs.r*2, x: obj2.attrs.cx-obj2.attrs.r, y:obj2.attrs.cy-obj2.attrs.r}; - //console.log(bb1); - } - var p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1}, - {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1}, - {x: bb1.x - 1, y: bb1.y + bb1.height / 2}, - {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2}, - {x: bb2.x + bb2.width / 2, y: bb2.y - 1}, - {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1}, - {x: bb2.x - 1, y: bb2.y + bb2.height / 2}, - {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}], - d = {}, dis = []; - //console.log('p'); console.log(p); - for (var i = 0; i < 4; i++) { - for (var j = 4; j < 8; j++) { - var dx = Math.abs(p[i].x - p[j].x), - dy = Math.abs(p[i].y - p[j].y); - if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) { - dis.push(dx + dy); - d[dis[dis.length - 1]] = [i, j]; - } - } - } - if (dis.length == 0) { - var res = [0, 4]; - } else { - res = d[Math.min.apply(Math, dis)]; - } - var x1 = p[res[0]].x, - y1 = p[res[0]].y, - x4 = p[res[1]].x, - y4 = p[res[1]].y; - dx = Math.max(Math.abs(x1 - x4) / 2, 10); - dy = Math.max(Math.abs(y1 - y4) / 2, 10); - var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3), - y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3), - x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3), - y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3); - var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(","); - if (line && line.line) { - line.bg && line.bg.attr({path: path}); - line.line.attr({path: path}); - } else { - var color = typeof line == "string" ? line : "#000"; - return { - bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}), - line: this.path(path).attr({stroke: color, fill: "none"}), - from: obj1, - to: obj2 - }; - } - }; - } - }); - -var Biojs_FeatureViewer_array = new Array(); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.GeneExpressionSummary.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.GeneExpressionSummary.js deleted file mode 100755 index aee7783390..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.GeneExpressionSummary.js +++ /dev/null @@ -1,434 +0,0 @@ -/** - * Gene expression summary - * - * @class - * @extends Biojs - * - * @author John Gomez-Carvajal, Rafael Jimenez - * @version 1.0.0 - * @category 3 - * - * @requires jQuery Core 1.6.4 - * @dependency - * - * @requires GeneExpressionSummary.css - * @dependency - * - * @param {Object} options An object with the options for Sequence component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} identifier - * ENSEMBL gene identifier or UniProt Acc needed as input to fetch the Gene expression summary data - * - * @option {string} [featuresUrl='http://www-test.ebi.ac.uk/gxa/das/s4/features'] - * Url of the REST service which provides the summary data. - * - * @option {string} [legend=true] - * Option to display the provenance legend. - * - * @option {string} [proxyUrl='../biojs/dependencies/proxy/proxy.php'] - * This component needs to request data from a web service. To bypass the same origin policy - * (http://en.wikipedia.org/wiki/Same_origin_policy) this component needs a proxy. - * You could use your own proxy by modifying this value or one of the BioJS proxies: - * '../biojs/dependencies/proxy/proxy.php' or '../biojs/dependencies/proxy/proxy.jsp' - * - * @example - * var instance = new Biojs.GeneExpressionSummary({ - * target: 'YourOwnDivId', - * identifier: 'ENSG00000066279' - * }); - * - */ -Biojs.GeneExpressionSummary = Biojs.extend( -/** @lends Biojs.GeneExpressionSummary# */ -{ - constructor: function (options) { - //Biojs.console.enable(); - this.setIdentifier(this.opt.identifier); - }, - - /** - * Default values for the options - * @name Biojs.GeneExpressionSummary-opt - */ - opt: { - target: "YourOwnDivId", - identifier: undefined, - featuresUrl: 'http://www-test.ebi.ac.uk/gxa/das/s4/features', - legend: true, - proxyUrl: '../biojs/dependencies/proxy/proxy.php' - }, - - /** - * Array containing the supported event names - * @name Biojs.GeneExpressionSummary-eventTypes - */ - eventTypes: [ - /** - * @name Biojs.GeneExpressionSummary#onRequestError - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} file The name of the loaded file. - * @eventData {string} result A string with either value 'success' or 'failure'. - * @eventData {string} message Error message in case of result be 'failure'. - * - * @example - * instance.onRequestError( - * function( e ) { - * alert( e.message ); - * } - * ); - * - **/ - "onRequestError", - /** - * @name Biojs.GeneExpressionSummary#onDbError - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} file The name of the loaded file. - * @eventData {string} result A string with either value 'success' or 'failure'. - * @eventData {string} message Error message in case of result be 'failure'. - * - * @example - * instance.onDbError( - * function( e ) { - * alert( e.message ); - * } - * ); - * - **/ - "onDbError" - ], - /** - * Fetch the data by means of identifier. - * @param {string} identifier The segment identifier. - * - * @example - * instance.setIdentifier("ENSG00000100867"); - * - * @example - * instance.setIdentifier("Q61171"); - * - * @example - * instance.setIdentifier("ENSG000000000000"); - * - * @example - * instance.setIdentifier("P00000"); - * - */ - setIdentifier: function(id){ - this._drawTemplate(); - /* Uniprot or Ensembl ID? */ - this._identifierDb = this._checkIdentifier(id); - if(this._identifierDb == Biojs.GeneExpressionSummary.ID_UNIPROT){ - this._requestFeaturesFromUniprotAcc(id); - } else if (this._identifierDb == Biojs.GeneExpressionSummary.ID_ENSEMBL){ - this._requestFeatures(id); - } else { - this._processDbError(id); - } - }, - /* - * Function: Biojs.GeneExpressionSummary._drawTemplate - * Purpose: Draw HTML template used for placing the data afterwards - * Returns: - - * Inputs: - - */ - _drawTemplate: function(){ - this._selector = "#" + this.opt.target; - this._container = jQuery(this._selector); - this._container.html(""); - - this._container.addClass("GeneExpressionSummary"); - this._title = jQuery('').appendTo(this._container); - - this._table = jQuery('
'+ feature.LINK.text; - this._imageContainer.append(caption); - } else if ( Biojs.GeneExpressionSummary.TYPE_PROVENANCE == feature.TYPE.id && self.opt.legend == true) { - var footer = ''; - for ( n in feature.NOTE ) { - footer += feature.NOTE[n].text + ' '; - } - footer += ''+ feature.LINK.href + ''; - this._footerContainer.append(footer); - - } else { - var summary = '
' + feature.label + '
';
- summary += '' + feature.NOTE[0].text;
- if(typeof feature.LINK != 'undefined'){
- summary += ' view all
';
- }
- this._summaryContainer.append(summary);
- }
-
- }
- },
- /*
- * Function: Biojs.GeneExpressionSummary._requestFeaturesFromUniprotAcc
- * Purpose: Start a request using a UniProt identifier
- * Returns: -
- * Inputs: id -> {String} UniProt identifier.
- */
- _requestFeaturesFromUniprotAcc: function(id){
- var self = this;
- /* URL where to get the mapping to an EMSEMBL id */
- self._serviceUrl = "http://www.ebi.ac.uk/uniprot/biomart/martservice?query=%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%3C!DOCTYPE%20Query%3E%3CQuery%20%20virtualSchemaName%20=%20%22default%22%20formatter%20=%20%22TSV%22%20header%20=%20%220%22%20uniqueRows%20=%20%221%22%20count%20=%20%22%22%20datasetConfigVersion%20=%20%220.6%22%20%3E%3CDataset%20name%20=%20%22uniprot%22%20interface%20=%20%22default%22%20%3E%3CFilter%20name%20=%20%22accession%22%20value%20=%20%22"
- self._serviceUrl += id;
- self._serviceUrl += "%22/%3E%3CAttribute%20name%20=%20%22ensembl_id%22%20/%3E%3C/Dataset%3E%3C/Query%3E";
- self._url = "";
- if(self.opt.proxyUrl != ""){
- self._url= self.opt.proxyUrl + "?url=" + self._serviceUrl;
- } else {
- self._url= self._serviceUrl;
- }
-
- /* process service */
- jQuery.ajax({
- type: "GET",
- url: self._url,
- dataType: "text",
- success: function(a){self._requestFeatures(a);},
- error: function(a){self._processErrorRequest(a);}
- });
- },
- /*
- * Function: Biojs.GeneExpressionSummary._processErrorRequest
- * Purpose: Process request error
- * Returns: -
- * Inputs: textStatus -> {String} Text status
- */
- _processErrorRequest: function (textStatus){
- Biojs.console.log("ERROR: " + textStatus );
- self.raiseEvent( Biojs.GeneExpressionSummary.EVT_ON_REQUEST_ERROR, { message: textStatus } );
- },
- /*
- * Function: Biojs.GeneExpressionSummary._processDbError
- * Purpose: Process DB error
- * Returns: -
- * Inputs: id -> {String} Identifier.
- */
- _processDbError: function (id){
- var self = this;
- self._message = "Not recognize identifier: " + id;
- Biojs.console.log("ERROR: " + self._message );
- self.raiseEvent( Biojs.GeneExpressionSummary.EVT_ON_DB_ERROR, { message: self._message } );
- }
-
-},{
- // Some static values
-
- // Events
- EVT_ON_REQUEST_ERROR: "onRequestError",
- EVT_ON_DB_ERROR: "onDbError",
-
- ID_UNIPROT: "uniprot",
- ID_ENSEMBL: "ensembl",
- MESSAGE_NODATA: "Sorry, we could not find summary data for your request",
-
- // Feature types
- TYPE_IMAGE: "image",
- TYPE_SUMMARY: "summary",
- TYPE_DESCRIPTION: "description",
- TYPE_PROVENANCE: "atlas-provenance"
-
-});
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.HeatmapViewer.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.HeatmapViewer.js
deleted file mode 100755
index f7a4d997d7..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.HeatmapViewer.js
+++ /dev/null
@@ -1,652 +0,0 @@
-/**
- *
- * This component takes a JSON data object and draws a D3 object
- * The expected JSON format is specified under the option 'json' of the HeatmapViewer options.
- *
- * Please remember to use jQuery in compatibility mode, particularly a good idea if you use other libraries.
- *
- * @class
- * @extends Biojs
- *
- * @author Guy Yachdav
- * @version 1.0.0
- * @category 2
- *
- * @requires jQuery Core 1.9.1
- * @dependency
- *
- * @requires D3 Version 3
- * @dependency
- *
- * @param {Object} options An object with the options for HeatmapViewer component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} jsonData
- * The jsonData object contains the data to be displayed
- * The jsonData object must follow this format:
- *
- * [{
- * col: int, // columns position
- * row: int, // row position
- * label: string, // column label
- * score: float, // cell's score
- * row_label: string // row label
- * }]
- *
- * Example 4 items grid
- *
- * [{
- * "col": 0,
- * "row": 0,
- * "label": "M",
- * "score": 27,
- * "row_label": "A"
- * }, {
- * "col": 0,
- * "row": 1,
- * "label": "M",
- * "score": 5,
- * "row_label": "C"
- * }, {
- * "col": 1,
- * "row": 0,
- * "label": "M",
- * "score": 43,
- * "row_label": "D"
- * }, {
- * "col": 1,
- * "row": 1,
- * "label": "M",
- * "score": 58,
- * "row_label": "E"
- * }]
- *
- *
- * @option {Onject} [user_defined_config={colorLow: 'blue', colorMed: 'white', colorHigh: 'red'}]
- * Configuration options for the component
- *
- * @option {Onject} [show_zoom_panel=true]
- * Display the zoom panel. default: true
- *
- * @option {Onject} [showScale=true]
- * Display the scale object. default: true
- *
- * @example
- * var painter = new Biojs.HeatmapViewer({
- * jsonData:
- * [{
- * "col": 0,
- * "row": 0,
- * "label": "M",
- * "score": 27,
- * "row_label": "A"
- * }, {
- * "col": 0,
- * "row": 1,
- * "label": "M",
- * "score": 5,
- * "row_label": "C"
- * }, {
- * "col": 1,
- * "row": 0,
- * "label": "M",
- * "score": 43,
- * "row_label": "D"
- * }, {
- * "col": 1,
- * "row": 1,
- * "label": "M",
- * "score": 58,
- * "row_label": "E"
- * }],
- * user_defined_config: {
- * colorLow: 'blue',
- * colorMed: 'white',
- * colorHigh: 'red'
- * },
- * target: 'YourOwnDivId'
- * });
- *
- */
-
-Biojs.HeatmapViewer = Biojs.extend(
- /** @lends Biojs.HeatmapViewer */
- {
-
- /**
- * public variables
- */
- target: undefined,
-
- /**
- * private variables
- */
- _MAIN_HEAT_MAP_DIV: 'main_heatmap_div',
- _ZOOM_HEAT_MAP_DIV: 'zoom_heatmap_div',
- _SLIDER_DIV: 'slider_heatmap_div',
- _SCALE_DIV: 'scale_div',
-
- _origData: undefined,
- _zoomedData: undefined,
-
- viewer_config: {
- dimensions: {},
- displayDiv: '',
- colorLow: 'green',
- colorMed: 'white',
- colorHigh: 'red',
- scoreLow: -100,
- scoreMed: 0,
- scoreHigh: 100,
- offset: 0,
- x_axis: [],
- y_axis: [],
- canvas_margin: {
- top: 30,
- right: 30,
- bottom: 30,
- left: 30
- },
- labels: {
- max_font_size: 20,
- min_font_size: 11
- },
- main_heatmap: {
- min_cell_width: 2,
- max_cell_width: 100,
- orig_cell_width: 0
- },
- zoom_area: {
- cell_width: 20
- },
- slider: {
- start_value: 0,
- increments: 50
- }
-
- },
-
- constructor: function(options) {
- this._origData = this.opt.jsonData;
- this.target = this.opt.target;
- this._init();
- this._draw();
-
- },
-
- opt: {
- /**
- * Default values for the options:
- * target: "YourOwnDivId",
- * jsonData: {},
- * showScale: true,
- * showExportToImageButton: false,
- * @name Biojs.HeatmapViewer-opt
- */
- target: 'YourOwnDivId',
- jsonData: {},
- showScale: true,
- showExportToImageButton: false,
- show_zoom_panel: true
- },
-
- eventTypes: [
-
- /* Event Names
- The parent class Biojs build the event handlers automatically
- with the names defined here. Use this.raiseEvent(')
- .attr('id', entry)
- .css('width', '75%')
- .css('margin', '25px'));
- });
- this.HEATMAP.init(this.viewer_config, this._origData, this._MAIN_HEAT_MAP_DIV).draw();
-
-
- if (this.opt.showScale)
- this.SCALE.init({
- colorLow: this.viewer_config.colorLow,
- colorMid: this.viewer_config.colorMed,
- colorHigh: this.viewer_config.colorHigh,
- scoreLow: this.viewer_config.scoreLow,
- scoreMid: this.viewer_config.scoreMed,
- scoreHigh: this.viewer_config.scoreHigh,
- target: this._SCALE_DIV
-
- })
-
- if (this.viewer_config.dimensions.cell_width < this.viewer_config.labels.min_font_size) {
- this.viewer_config.main_heatmap.orig_cell_width = this.viewer_config.dimensions.cell_width;
-
- if (this.opt.show_zoom_panel) {
- this._show_sliding_window({
- dimensions: {
- cell_width: this.viewer_config.dimensions.cell_width,
- cell_count: this.viewer_config.dimensions.cell_count,
- frame_width: 60 * this.viewer_config.dimensions.cell_width,
- height: this.viewer_config.dimensions.row_count * this.viewer_config.dimensions.cell_width
- },
- svg: d3.select("#" + this._MAIN_HEAT_MAP_DIV + "_svg > g")
- });
- this._drawZoomDiv();
- }
-
- }
- },
- /**
- * Private: intialize the viewer. overrides defaults with user defined options
- * @ignore
- */
- _init: function() {
- var tmpData = this._origData;
- var tmpCfg = this.viewer_config;
-
- // read in user defined _config
- if (this.opt.user_defined_config != 'undefined') {
- var _tmpUserCfg = this.opt.user_defined_config;
- ['colorLow', 'colorHigh', 'colorMed'].forEach(function(entry) {
- if (tmpCfg[entry])
- tmpCfg[entry] = _tmpUserCfg[entry];
- });
- }
- this._calcHeatMap({
- start: 0,
- end: (tmpData.length / 20) // TODO get number of rows autormatically!
- });
- },
- /**
- * Private: renders a secondary heatmap for a selected region in the data
- * @param {Object} d {x:, y: } defines the data range to display
- * @ignore
- */
- _drawZoomDiv: function(d) {
- var start = 0;
-
- if (typeof d !== 'undefined')
- start = Math.floor(d.x / this.viewer_config.main_heatmap.orig_cell_width);
- var end = start + this.viewer_config.slider.increments;
- this.viewer_config.offset = start;
-
- this._calcHeatMap({
- start: start,
- end: end
- });
- var $zoom_div = jQuery('#' + this._ZOOM_HEAT_MAP_DIV);
- if ($zoom_div) {
- $zoom_div.empty();
- this.HEATMAP.init(this.viewer_config, this._zoomedData, this._ZOOM_HEAT_MAP_DIV).draw();
- }
- },
- /**
- * Private: Determines cell's size, grid size,
- * if rangeObj provided it determines the above only for the data within that range
- * populated the x and y axis
- * @param {[Object]} rangeObj {start: , end: }} defines the data range to dislpay (optional)
- * @ignore
- */
- _calcHeatMap: function(rangeObj) {
- var dimensions = {};
- var x_axis = [];
- var y_axis = [];
-
- var jsonData, tmpStart;
- tmpStart = 0;
-
- var $hmDiv = jQuery("#" + this.target);
- dimensions.canvas_width = $hmDiv.width();
- if (this._origData) {
- if (typeof this.opt.jsonData != 'undefined') {
- jsonData = this._origData.slice(rangeObj.start * 20, rangeObj.end * 20);
- tmpStart = rangeObj.start;
- }
- var tmpCol = 0,
- tmpRow = 0,
- i = 0;
- jQuery.each(jsonData, function(k, v) {
- if (v.row == 0) {
- x_axis.push(v.label);
- if (v.col > tmpCol)
- tmpCol = v.col;
- }
- if ((v.col - tmpStart) == 0)
- y_axis.push(v.row_label);
-
- if (v.row > tmpRow)
- tmpRow = v.row;
- });
- dimensions.cell_count = tmpCol - this.viewer_config.offset;
- dimensions.row_count = tmpRow;
- var tmpCellSize = Math.max(Math.min(((dimensions.canvas_width - this.viewer_config.canvas_margin.right - this.viewer_config.canvas_margin.left) / (dimensions.cell_count + 1)),
- this.viewer_config.main_heatmap.max_cell_width), this.viewer_config.main_heatmap.min_cell_width);
-
- dimensions.cell_height = dimensions.cell_width = tmpCellSize;
- dimensions.canvas_height = (dimensions.row_count + 1) * dimensions.cell_height;
- this._zoomedData = jsonData;
- }
- this.viewer_config.dimensions = jQuery.extend(true, {}, dimensions);
- this.viewer_config.x_axis = x_axis;
- this.viewer_config.y_axis = y_axis;
- this.viewer_config.slider.increments = Math.floor((dimensions.canvas_width / this.viewer_config.zoom_area.cell_width) - 1);
- }
-});
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.HelloWorld.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.HelloWorld.js
deleted file mode 100755
index da59a880f2..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.HelloWorld.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * This is the description of the HelloWorld component. Here you can set any HTML text
- * for putting on the generated documentation.
- *
- * @class
- * @extends Biojs
- *
- * @author John Gomez
- * @version 1.0.0
- * @category 1
- *
- * @requires jQuery Core 1.6.4
- * @dependency
- *
- * @param {Object} options An object with the options for HelloWorld component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} [fontFamily='"Andale mono", courier, monospace']
- * Font list to be applied to the component content.
- *
- * @option {string} [fontColor="white"]
- * HTML color code for the font.
- *
- * @option {string} [backgroundColor="#7BBFE9"]
- * Background color for the entire div content.
- *
- * @option {Object} [selectionFontColor="white"]
- * This color will be used to change the font color of selected text.
- *
- * @option {Object} [ selectionBackgroundColor="yellow"]
- * This color will be used to change the background of selected text.
- *
- * @example
- * var instance = new Biojs.HelloWorld({
- * target : "YourOwnDivId",
- * selectionBackgroundColor : '#99FF00'
- * });
- *
- */
-Biojs.HelloWorld = Biojs.extend (
-/** @lends Biojs.HelloWorld# */
-{
- constructor: function (options) {
- // In JavaScript ŇthisÓ always refers to the ŇownerÓ of the function we're executing (http://www.quirksmode.org/js/this.html)
- // Let's preserve the reference to 'this' through the variable self. In this way, we can invoke/execute
- // our component instead of the object where 'this' is being invoked/executed.
- var self = this;
-
- // For practical use, create an object with the main DIV container
- // to be used in all of the code of our component
- this._container = jQuery("#"+self.opt.target);
-
- // Apply options values
- this._container.css({
- 'font-family': self.opt.fontFamily, // this is one example of the use of self instead of this
- 'background-color': self.opt.backgroundColor,
- 'color': self.opt.fontColor,
- 'font-size': '36px',
- 'text-align': 'center',
- 'vertical-align':'middle',
- 'display': 'table-cell',
- 'width': '597px',
- 'height': '300px'
- });
-
- // Disable text selection and
- // Change the selection mouse pointer
- // from text to hand.
- this._container.css({
- '-moz-user-select':'none',
- '-webkit-user-select':'none',
- 'user-select':'none'
- });
-
- // Set the content
- text = 'Hello World!';
-
- for( i=0; i< text.length; i++ ) {
- this._container.append('' + text[i] + '');
- }
-
- // Internal method to initialize the event of select 'Hello'
- this._addSelectionTrigger();
-
- // Internal method to set the onClick event
- this._addSimpleClickTrigger();
- },
-
- /**
- * Default values for the options
- * @name Biojs.HelloWorld-opt
- */
- opt: {
- target: "YourOwnDivId",
- fontFamily: '"Andale mono", courier, monospace',
- fontColor: "white",
- backgroundColor: "#7BBFE9",
- selectionFontColor: "black",
- selectionBackgroundColor: "yellow"
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.HelloWorld-eventTypes
- */
- eventTypes : [
- /**
- * @name Biojs.HelloWorld#onClick
- * @event
- * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {int} selected Selected character.
- * @example
- * instance.onClick(
- * function( objEvent ) {
- * alert("The character " + objEvent.selected + " was clicked.");
- * }
- * );
- *
- * */
- "onClick",
-
- /**
- * @name Biojs.HelloWorld#onHelloSelected
- * @event
- * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {int} textSelected Selected text, will be 'Hello' obviously.
- * @example
- * instance.onHelloSelected(
- * function( objEvent ) {
- * alert("The word " + objEvent.textSelected + " was selected.");
- * }
- * );
- *
- * */
- "onHelloSelected"
- ],
-
- /**
- * Change the font size. Do nothing it no value is provided.
- *
- * @param {string} [size] The new font size in pixels.
- *
- * @example
- * instance.setSize("72px");
- */
- setSize: function(size) {
- if ( size != undefined ){
- jQuery("#"+this.opt.target).css('font-size', size);
- }
- },
-
- _addSelectionTrigger: function() {
-
- var self = this;
- var isMouseDown = false;
-
- // Create the CSS class called selected to change both background and color
-
- jQuery(''
- ).appendTo('head');
-
- //
- // Add the click event to each character in the content
- // But remember, we must to figure out when 'Hello' is selected only
- this._container.find('span')
- .mousedown(function() {
-
- // Turn on the flag
- isMouseDown = true;
-
- // A new selection is starting
- // Reset all by removing the CSS "selected" class if already applied
- self._container.children('span').removeClass('selected')
-
- // Apply the class for this span/character
- // NOTE: "this" refers to the internal object 'span'
- // NOT to the component's instance
- jQuery(this).addClass('selected');
-
- }).mouseover(function() {
- // Check if the mouse is being dragged
- if (isMouseDown) {
- jQuery(this).addClass('selected');
- }
- })
- .mouseup(function() {
-
- /// Turn off the flag
- isMouseDown = false;
-
- var textSelected = '';
-
- // Get the entire selected word
- self._container.children('span.selected')
- .each(function(){
- textSelected += jQuery(this).text();
- });
-
- // Since requirements, only "Hello" word should be selected
- // to raise the event
- if (textSelected == 'Hello') {
- self.raiseEvent('onHelloSelected', {
- textSelected : textSelected
- })
- }
- });
- },
-
- _addSimpleClickTrigger: function () {
-
- var self = this;
-
- // Add the click event to each character in the content
- this._container.find('span')
- .click( function(e) {
- // A letter was clicked!
- // Let's discover which one was it
- // TIP: e.target contains the clicked DOM node
- var selected = jQuery(e.target).text();
-
- // Create an event object
- var evtObject = { "selected": selected };
-
- // We're ready to raise the event onClick of our component
- self.raiseEvent('onClick', evtObject);
- });
- }
-
-});
-
-
-
-
-
-
-
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.HelloWorldYUI.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.HelloWorldYUI.js
deleted file mode 100755
index 13571bdd3c..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.HelloWorldYUI.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * This is the description of the HelloWorldYUI component. Here you can set any HTML text
- * for putting on the generated documentation.
- *
- * @class
- * @extends Biojs
- *
- * @author John Gomez
- * @version 1.0.0
- * @category 1
- *
- * @requires YUI Core 3.3.0
- * @dependency
- *
- * @requires jQuery Core 1.6.4
- * @dependency
- *
- * @param {Object} options An object with the options for HelloWorldYUI component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} [fontFamily=ÔŇAndale monoÓ, courier, monospaceŐ]
- * Font list to be applied to the component content.
- *
- * @option {string} [fontColor="white"]
- * HTML color code for the font.
- *
- * @option {string} [backgroundColor="#7BBFE9"]
- * Background color for the entire div content.
- *
- * @option {Object} [selectionFontColor="white"]
- * This color will be used to change the font color of selected text.
- *
- * @option {Object} [ selectionBackgroundColor="yellow"]
- * This color will be used to change the background of selected text.
- *
- * @example
- * var instance = new Biojs.HelloWorldYUI({
- * target : "YourOwnDivId",
- * selectionBackgroundColor : '#FFFF00'
- * });
- *
- */
-Biojs.HelloWorldYUI = Biojs.extend (
-/** @lends Biojs.HelloWorldYUI# */
-{
- constructor: function (options) {
- var self = this;
-// var toggleClass = function (span) {
-// span.toggleClass( 'selected' );
-// if ( span.hasClass('selected') ) {
-// span.css('color', self.opt.selectionFontColor)
-// .css("background-color", self.opt.selectionBackgroundColor);
-// } else {
-// span.css('color', self.opt.fontColor)
-// .css("background-color", self.opt.backgroundColor);
-// }
-// };
-//
-
- // Apply options values
- $("#"+self.opt.target).css({
- 'font-family': self.opt.fontFamily,
- 'background-color': self.opt.backgroundColor,
- 'color': self.opt.fontColor,
- 'font-size': '36px',
- 'text-align': 'center',
- 'vertical-align':'middle',
- 'display': 'table-cell',
- 'width': '597px',
- 'height': '300px'
- });
-
- // Disable text selection and
- // Change the selection mouse pointer
- // from text to hand.
- $("#"+self.opt.target).css({
- '-moz-user-select':'none',
- '-webkit-user-select':'none',
- 'user-select':'none'
- });
-
- // Set the content
- text = 'Hello World with YUI+jQuery!';
- contentHTML = '';
- for( i=0; i< text.length; i++ ) {
- contentHTML += '' + text[i] + '';
- }
- $( contentHTML ).appendTo( "#"+self.opt.target );
-
- // Internal method to initialize mouse events
- self._addSelectionTrigger();
- },
-
- /**
- * Default values for the options
- * @name Biojs.HelloWorldYUI-opt
- */
- opt: {
- target: "YourOwnDivId",
- fontFamily: '"Andale mono", courier, monospace',
- fontColor: "white",
- backgroundColor: "#7BBFE9",
- selectionFontColor: "black",
- selectionBackgroundColor: "yellow"
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.HelloWorldYUI-eventTypes
- */
- eventTypes : [
- /**
- * @name Biojs.HelloWorldYUI#onHelloSelected
- * @event
- * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {int} textSelected Selected text, will be 'Hello' obviously.
- * @example
- * instance.onHelloSelected(
- * function( objEvent ) {
- * alert("The word " + objEvent.textSelected + " was selected.");
- * }
- * );
- *
- * */
- "onHelloSelected"
- ],
-
- /**
- * Change the font size. Do nothing it no value is provided.
- *
- * @param {string} [size] The new font size in pixels.
- *
- * @example
- * instance.setSize("72px");
- */
- setSize: function(size) {
- if ( size != undefined ){
- $("#"+this.opt.target).css('font-size', size);
- }
- },
-
- /**
- * Set text 'Hi there! who are you?'
- *
- * @example
- * instance.sayHello();
- */
- sayHello: function() {
- var self = this;
- // Set the content
- text = 'Hi there! who are you?';
- contentHTML = '';
- for( i=0; i< text.length; i++ ) {
- contentHTML += '' + text[i] + '';
- }
- $( "#"+self.opt.target ).html( contentHTML );
- },
-
-
-
- _addSelectionTrigger: function() {
-
- var self = this;
- var isMouseDown = false;
-
- /**
- * @private
- * @function
- */
- var toggleClass = function (span) {
- if ( span.hasClass('selected') ) {
- span.removeClass('selected');
- span.setStyle('color', self.opt.fontColor);
- span.setStyle("background-color", self.opt.backgroundColor);
- } else {
- span.addClass('selected');
- span.setStyle('color', self.opt.selectionFontColor);
- span.setStyle("background-color", self.opt.selectionBackgroundColor);
- }
- };
-
- YUI().use('node', function (Y) {
-
-
- Y.all('#' + self.opt.target + ' span').on("mousedown", function( e ) {
- isMouseDown = true;
-
- var allSpan = Y.all('#' + self.opt.target + ' span');
-
- allSpan.removeClass('selected');
- allSpan.setStyle('color', self.opt.fontColor);
- allSpan.setStyle("background-color", self.opt.backgroundColor);
-
- toggleClass( e.currentTarget );
- });
-
-
- Y.all('#' + self.opt.target + ' span').on("mouseover", function(e) {
- if (isMouseDown) {
- toggleClass( e.currentTarget );
- }
- });
-
-
- Y.all('#' + self.opt.target + ' span').on("mouseup", function() {
- isMouseDown = false;
- var textSelected = '';
-
- $('#' + self.opt.target + ' span.selected' )
- .each(function(){
- textSelected += $(this).text();
- });
-
- if (textSelected == 'Hello') {
- self.raiseEvent('onHelloSelected', {
- textSelected : textSelected
- })
- }
- });
-
-
- });
- }
-
-});
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.HpaSummaryFeature.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.HpaSummaryFeature.js
deleted file mode 100755
index ddd100de54..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.HpaSummaryFeature.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Component to represent one summary feature. Originally design to display protein expression information from the Human Protein Atlas (HPA)
- *
- * @class
- * @extends Biojs
- *
- * @author Rafael C Jimenez
- * @version 1.0.0
- * @category 1
- *
- * @requires jQuery Core 1.6.4
- * @dependency
- *
- * @requires Biojs.HpaSummaryFeature.css
- * @dependency
- *
- * @param {Object} options An object with the options for this component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} title
- * Title of the summary
- *
- * @option {string} imageUrl
- * URL of an image file with expression data
- *
- * @option {string} imageTitle
- * Title or description of an image file with expression data
- *
- * @option {string} notes
- * List of point including summary information for this feature
- *
- * @option {string} linkUrl
- * List of points including summary information for this feature
- *
- * @option {string} linkTitle
- * List of points including summary information for this feature
- *
- * @option {string} width [900px]
- * List of points including summary information for this feature
- *
- * @option {string} imageWidth [200px]
- * List of points including summary information for this feature
- *
- * @example
- * var instance = new Biojs.HpaSummaryFeature({
- * target: 'YourOwnDivId',
- * title: 'HPA001012 Normal Tissue immunohistochemistry summary',
- * imageUrl: 'http://www.proteinatlas.org/images/1012/ihc_selected_medium.jpg',
- * imageTitle: 'Immunohistochemical staining of human lymph node shows strong cytoplasmic positivity in lymphoid cells outside reaction centra',
- * notes: ["Lymphoid tissues showed moderate to strong cytoplasmic positivity. Remaining normal cells were generally negative","Two (or more) antibodies yielding similar staining patterns which are consistent with available gene/protein characterization data","Expression summary: Selective cytoplasmic expression in lymphoid cells","Reliable score: High","Validation score: Supportive","67 normal tissues by immunohistochemistry"],
- * linkUrl:'http://www.proteinatlas.org/ENSG00000089820/normal',
- * linkTitle:'HPA original source',
- * width: '585px',
- * imageWidth: '150px'
- * });
- *
- */
-
-Biojs.HpaSummaryFeature = Biojs.extend (
- /** @lends Biojs.HpaSummaryFeature# */
- {
- constructor: function (options) {
- this._draw();
- },
- /*
- * Function: Biojs.GeneExpressionSummary._draw
- * Purpose: Draw HPA summary feature
- * Returns: -
- * Inputs: opt -> {Object} options object.
- */
- _draw: function(){
- var self = this;
- self._componentPrefix = "hpaSummaryFeature_";
-
- /* Create a component container */
- self._componentDiv = jQuery('');
- self._componentDiv.css('width',self.opt.width);
-
- /* Create table */
- self._leftColumn = jQuery('
');
- self._table.append(self._mainRow);
- self._table.css('width', '100%');
-
- /* Create container for left column */
- self._leftContainer = jQuery('');
-
- /* Create image title */
- if (self.opt.imageTitle != "") {
- self._imageTitle = jQuery('
');
- self._image.css({
- 'width': '100%'
- });
- if(self.opt.imageTitle != ""){
- self._image.attr({
- 'alt': 'HPA image',
- 'title': self.opt.imageTitle
- });
- }
- }
-
- /* Create link icon */
- self._linkImage = jQuery('');
-
- /* Create link in left column including: image, link icon and image title */
- if (self.opt.linkUrl != "") {
- self._link = jQuery('');
- if(self.opt.linkTitle != ""){
- self._link.attr({
- 'title': self.opt.linkTitle
- });
- }
- if (self.opt.imageUrl != "") {
- self._link.append(self._image);
- }
- self._link.append(self._linkImage);
- self._leftContainer.append(self._link);
- if (self.opt.imageTitle != "" && self.opt.imageUrl != "") {
- /* Include image legend in left column */
- self._leftContainer.append(self._imageTitle);
- }
- } else {
- /* Still print image if there is no link */
- self._leftContainer.append(self._image);
- if (self.opt.imageTitle != "" && self.opt.imageUrl != "") {
- /* Include image legend in left column */
- self._leftContainer.appenf(self._imageTitle);
- }
- }
-
- /* Create title in right column */
- self._contentTitle = jQuery('b[1]){
- return -1;
- }else
- return 1;
- return 0;
- });
- },
- _paintLegend:function(legend,type){
- var self = this;
- legend.filter(function(d) { return d[0]== "label" && d[1]==type; }).append("text")
- .attr("x", self.opt.width/2 - 6)
- .attr("y", 7-self.opt.height/2)
- .attr("dy", ".35em")
- .style("text-anchor", "end")
- .style("font-size", "1.2em")
- .text(type+":");
- if (type.indexOf("Resize By")==0){
-
- legend.filter(function(d) { return d[0]!="label" && d[1]==type; }).append("path")
- .attr("class", "figure")
- .attr("d", function(d) {
- var h=2*self.opt.radius*Math.sqrt(d[0][2]);
- return "M0,0L0,10M0,5L"+h+",5M"+h+",0L"+h+",10 ";
- })
- .attr("transform", function(d) {
- return "translate(" + (self.opt.width/2 - 18 - 2*self.opt.radius*Math.sqrt(d[0][2])) + ", -" + self.opt.height/2 + ")";
- })
- .style("fill", "transparent")
- .style("stroke", "black");
- legend.filter(function(d) { return d[0]!="label" && d[1]== type; }).append("text")
- .attr("x", function(d) {
- return (self.opt.width/2 - 22 - 5*self.opt.radius);
- })
- .attr("y", 7-self.opt.height/2 )
- .attr("dy", ".35em")
- .style("text-anchor", "end")
- .text(function(d) { return (d[0][1]*1.0).toFixed(2); });
-
- }else{
-
- legend.filter(function(d) { return d[0]!="label" && d[1]==type; }).append("rect")
- .attr("x", self.opt.width/2 - 18)
- .attr("y", -self.opt.height/2)
- .attr("width", 13)
- .attr("height", 13)
- .style("fill", function(d,i) {
- if (typeof d[2]== "undefined")
- return self.color(i);
- return d[2];
- });
- legend.filter(function(d) { return d[0]!="label" && d[1]== type; }).append("text")
- .attr("x", self.opt.width/2 - 24)
- .attr("y", 7-self.opt.height/2)
- .attr("dy", ".35em")
- .style("text-anchor", "end")
- .text(function(d) { return d[0]; });
- }
- },
- _paintLegends: function(){
- var self = this;
- var w=18 + self.longestLegend*7 + 10;
- var legendBlock = self.svg.insert("g",".link")
- .attr("class", "legendBlock");
- self._sortLegends();
- legendBlock.append("rect")
- .attr("x", self.opt.width/2 -w)
- .attr("y", -self.opt.height/2)
- .attr("height", 6 + self.legends.length *16)
- .attr("width", w)
- .style("fill", "#ddd")
- .style("fill-opacity","0.4");
-
- var legend = legendBlock.selectAll(".mainLegend")
- .data(self.legends)
- .enter().insert("g")
- .attr("class", "mainLegend")
- .attr("transform", function(d, i) { return "translate(0," + (3 + i * 16) + ")"; });
- for (var i=0; i< self.legendTypes.length; i++)
- self._paintLegend(legend,self.legendTypes[i]);
-
- },
- longestLegend:4,
- legendTypes:[],
- /**
- * Adds a legend to the graphic
- *
- * @example
- * instance.addLegends(["Legend red"],"Color","#FF0000");
- * instance.restart();
- */
- addLegends:function(legends,type,color){
- var self = this;
- if (self.legends==null) self.legends=[],self.legendTypes=[];
-
- if (legends==null) {
- self.legends = null;
- self.legendTypes=[];
- self.longestLegend=4;
- return;
- }
- if (type=="Resize By")
- type = type+ " "+legends[0];
- if (self.legendTypes.indexOf(type)==-1) {
- self.legends.push(["label",type]);
- self.legendTypes.push(type);
- if (type.length>self.longestLegend)
- self.longestLegend=type.length;
- }
-
- if (type.indexOf("Resize By")==0){ //is a size label
- self.legends.push([legends,type]);
- } else //is a color label
- for (var i=0;iself.longestLegend)
- self.longestLegend=legends[i].length;
- }
- },
-
- /**
- * Hides the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- *
- * @example
- * instance.hide('[id *="node-p1"]');
- */
- hide: function(selector){
- var self=this;
- self.vis.selectAll(selector).attr("visibility", 'hidden');
- self.vis.selectAll(selector).selectAll(" .legend").attr("visibility", 'hidden');
- },
- /**
- * Shows the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- *
- * @example
- * instance.show('[id *="node-p1"]');
- */
- show: function(selector){
- var self=this;
- self.vis.selectAll(selector).attr("visibility", 'visible');
- self.vis.selectAll(selector).selectAll(" .legend").attr("visibility",function(d) { return (d.showLegend)?"visible":"hidden";});
- },
- /**
- * Highlight the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- *
- * @example
- * instance.highlight(".figure");
- */
- highlight: function(selector){
- var self=this;
- self.vis.selectAll(selector).style("stroke", '#0f0');
- },
- /**
- * Set the fill's color of the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- * @param {string} color a color in web format eg. #FF0000
- *
- * @example
- * instance.setFillColor(".figure","#FF0000");
- */
- setFillColor: function(selector,color){
- var self=this;
- self.vis.selectAll(selector).style("fill", color);
- },
- /**
- * Set the stroke's color of the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- * @param {string} color a color in web format eg. #FF0000
- *
- * @example
- * instance.setColor(".figure","#FF0000");
- */
- setColor: function(selector,color){
- var self=this;
- self.vis.selectAll(selector).style("stroke", color);
- },
- /**
- * Shows/Hide the legend(id) of the protein
- *
- * @param {string} protein the id of the protein to swap the visibility of the legend
- *
- * @example
- * instance.swapShowLegend("#node-p"+(pid-1)+" .legend");
- */
- showLegend: function(selector,typeLegend){
- var self=this;
- self.vis.selectAll(selector).selectAll(".legend").attr("visibility", "visible").text(function(d) {
- d.typeLegend=typeLegend;
- if (d.typeLegend=="id")
- return d.id;
-// else if (d.typeLegend.indexOf("features.")==0)
-// return d.features[d.typeLegend.substr(9)];
- else
- return d.features[d.typeLegend];
- });
- },
-
- /**
- * Scales the area of a protein
- *
- * @param {string} protein the id of the protein to scale
- * @param {integer} scale value to scale a node
- *
- * @example
- * instance.setSizeScale("#figure_p188",4);
- */
- setSizeScale: function(selector,scale){
- var self=this;
-
-
- self.vis.selectAll(selector).attr("r", function(d) {
- d.size=scale;
- return self.opt.radius*Math.sqrt(d.size);
- });
- },
- /**
- * Scales the size of the proteins which value has been modify by other means
- *
- * @param {string} selector a CSS3 selector to choose the nodes to resize
- *
- * @example
- * var j=0;
- * for (var i in instance.proteins)
- * instance.proteins[i].size=1+(j++)%4;
- * instance.refreshSizeScale(".figure");
- */
- refreshSizeScale: function(selector){
- var self=this;
- self.vis.selectAll(selector).attr("r", function(d) {
- return self.opt.radius*Math.sqrt(d.size);
- });
- },
-
-
- /**
- * Shows/Hide the legend(id) of the protein
- *
- * @param {string} protein the id of the protein to swap the visibility of the legend
- *
- * @example
- * instance.swapShowLegend("#node-p"+(pid-1)+" .legend");
- */
- hideLegend: function(selector){
- var self=this;
- self.vis.selectAll(selector).selectAll(".legend").attr("visibility", "hidden");
- },
- /**
- * Shows/Hide the legend(id) of the protein
- *
- * @param {string} protein the id of the protein to swap the visibility of the legend
- *
- * @example
- * instance.swapShowLegend("#node-p"+(pid-1)+" .legend");
- */
- swapShowLegend: function(selector){
- var self=this;
- self.vis.selectAll(selector).attr("visibility", function(d) {
- d.showLegend = !d.showLegend;
- return (d.showLegend)?"visible":"hidden";
- });
- },
- /**
- *
- * Resizing the graph depending on the size of the window.
- *
- * @param self
- */
- _resize: function (self) {
- var width = window.innerWidth, height = window.innerHeight;
- self.vis.attr("width", width).attr("height", height);
- self.force.size([width, height]).resume();
- },
- colors: [ "#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5",
- "#0077b4", "#11c7e8", "#227f0e", "#33bb78", "#44a02c", "#55df8a", "#662728", "#779896", "#8867bd", "#99b0d5", "#AA564b", "#BB9c94", "#CC77c2", "#DDb6d2", "#EE7f7f", "#FFc7c7", "#00bd22", "#11db8d", "#22becf", "#33dae5",
- "#1f00b4", "#ae11e8", "#ff220e", "#ff3378", "#2c442c", "#98558a", "#d66628", "#ff7796", "#9488bd", "#c599d5", "#8cAA4b", "#c4BB94", "#e3CCc2", "#f7DDd2", "#7fEE7f", "#c7FFc7", "#bc0022", "#db118d", "#1722cf", "#9e33e5",
- "#1f7700", "#aec711", "#ff7f22", "#ffbb33", "#2ca044", "#98df55", "#d62766", "#ff9877", "#946788", "#c5b099", "#8c56AA", "#c49cBB", "#e377FC", "#f7b6FD", "#7f7fEE", "#c7c7FF", "#bcbd00", "#dbdb11", "#17be22", "#9eda33"
- ]
- });
-
-
-
-
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsD3.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsD3.js
deleted file mode 100755
index 94da99b4c6..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsD3.js
+++ /dev/null
@@ -1,1085 +0,0 @@
-/**
- * This component uses the D3 library and specifically its implementation of the force algorithm to
- * represent a network of protein interactions.
- *
- * @class
- * @extends Biojs
- *
- * @author Gustavo A. Salazar
- * @version 0.9.1_beta
- * @category 1
- *
- * @requires jQuery Core 1.7.2
- * @dependency
- *
- * @requires D3
- * @dependency
- *
- * @requires InteractionsD3 CSS
- * @dependency
- *
- * @param {Object} options An object with the options for the InteractionsD3 component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- * @option {string} width
- * Width of the SVG element, if given in percentage it will use it on proportion of the container
- * @option {string} height
- * Height of the SVG element, if given in percentage it will use it on proportion of the container
- * @option {string} radius
- * Radius of the nodes representing the proteins
- * @option {string} enableEdges
- * Force the proteins to stay in the defined area of the SVG
- *
- * @example
- * var instance = new Biojs.InteractionsD3({
- * target: "YourOwnDivId",
- * });
- * for (var pid=1;pid<=15;pid++)
- * instance.addProtein({ "id":pid,"name":pid,"showLegend":false,"typeLegend":"id","organism":"human"+pid%3,"features":{"f1":"val1","f2":"val2","f3":"val3"}});
- *
- * for (var pid=1;pid<=30;pid++)
- * instance.addInteraction(Math.floor((Math.random()*15)+1),Math.floor((Math.random()*15)+1) ,{score:Math.random()});
- * instance.restart();
- */
-Biojs.InteractionsD3 = Biojs.extend (
- /** @lends Biojs.InteractionsD3# */
- {
- force:null,
- vis:null,
- interactions:[],
- interactionsA:{},
- proteins:[],
- proteinsA:{},
- node_drag:null,
- color: null,
- foci: [],
- organisms: {},
-
- //Transformation values
- tTranslate:null,
- tScale:null,
-
- constructor: function (options) {
- var self = this;
- self.force =null;
- self.vis =null;
- self.interactions=[];
- self.interactionsA={};
- self.proteins=[];
- self.proteinsA={};
- self.node_drag=null;
- self.color= null;
- self.foci=[];
- self.organisms={};
-
- this._container = $("#"+self.opt.target);
- this._container.empty();
- $(this._container).addClass("graphNetwork");
-
- var width = $(this._container).width(),
- height = $(this._container).height();
-
- if (self.opt.width.indexOf("%")!=-1)
- width = width*(self.opt.width.substring(0, self.opt.width.length-1)*1)/100.0;
- else
- width=self.opt.width*1;
- self.opt.width=width;
-
- if (self.opt.height.indexOf("%")!=-1)
- height = height*(self.opt.height.substring(0, self.opt.height.length-1)*1)/100.0;
- else
- height=self.opt.height*1;
- self.opt.height=height;
-
- this._container.width(width);
- this._container.height(height);
-
- self.color = function() {
- return d3.scale.ordinal().range(self.colors);
- }();
-
- self.zoom=d3.behavior.zoom().
- scaleExtent([(self.opt.enableEdges)?1:0.1, 10])
- .on("zoom", redraw);
- self.vis = d3.select("#"+self.opt.target).append("svg")
- .attr("width", width)
- .attr("height", height)
- .attr("pointer-events", "all")
- .call(self.zoom)
- .append('svg:g');
-
- self.vis.append('svg:rect')
- .attr('width', width*20)
- .attr('height', height*20)
- .attr('x', -width*10)
- .attr('y', -height*10)
- .attr('fill', 'white')
- .attr('stroke','white');
-
- self.rect= self.vis.append('svg:rect')
- .attr("class", "frame")
- .attr('width', width)
- .attr('height', height)
- .attr('fill', 'white')
- .attr('stroke','white')
- .attr("stroke-dasharray","5,5");
-
-
- self.perspective=d3.select("#"+self.opt.target + " svg").append('svg:g');
-
-
-
- function redraw(x,y,scaleP) {
- var trans=null,scale=null;
- if (typeof x!="undefined" && typeof y!="undefined"){
- trans=[x,y];
- scale = scaleP;
- }else{
- trans=d3.event.translate;
- scale = d3.event.scale;
- }
- self.tTranslate=trans;
- self.tScale=scale;
- if (self.opt.enableEdges) {
- if(scale<1)scale=1;
- d3.behavior.zoom().scaleExtent([1, Infinity]);
- if (trans[0]>0)trans[0]=0;
- if (trans[1]>0)trans[1]=0;
-
- var W = self.rect[0][0].width.animVal.value, H= self.rect[0][0].height.animVal.value;
- var Ws = W*scale, Hs = H*scale;
- if (Wsb[1]){
- return -1;
- }else
- return 1;
- return 0;
- });
- },
- _paintLegend:function(legend,type){
- var self = this;
- legend.filter(function(d) { return d[0]== "label" && d[1]==type; }).append("text")
- .attr("x", self.opt.width - 6)
- .attr("y", 7)
- .attr("dy", ".35em")
- .style("text-anchor", "end")
- .style("font-size", "1.2em")
- .text(type+":");
- if (type.indexOf("Resize By")==0){
-
- legend.filter(function(d) { return d[0]!="label" && d[1]==type; }).append("path")
- .attr("class", "figure")
- .attr("d", function(d) {
- var h=2*self.opt.radius*Math.sqrt(d[0][2]);
- return "M0,0L0,10M0,5L"+h+",5M"+h+",0L"+h+",10 ";
- })
- .attr("transform", function(d) {
- return "translate(" + (self.opt.width - 18 - 2*self.opt.radius*Math.sqrt(d[0][2])) + "," + 0 + ")";
- })
- .style("fill", "transparent")
- .style("stroke", "black");
- legend.filter(function(d) { return d[0]!="label" && d[1]== type; }).append("text")
- .attr("x", function(d) {
- return (self.opt.width - 22 - 5*self.opt.radius);
- })
- .attr("y", 7)
- .attr("dy", ".35em")
- .style("text-anchor", "end")
- .text(function(d) { return (d[0][1]*1.0).toFixed(2); });
-
- }else{
- legend.filter(function(d) { return d[0]!="label" && d[1]==type; }).append("rect")
- .attr("x", self.opt.width - 18)
- .attr("width", 13)
- .attr("height", 13)
- .style("fill", function(d,i) {
- if (typeof d[2]== "undefined")
- return self.color(i);
- return d[2];
- });
- legend.filter(function(d) { return d[0]!="label" && d[1]== type; }).append("text")
- .attr("x", self.opt.width - 24)
- .attr("y", 7)
- .attr("dy", ".35em")
- .style("text-anchor", "end")
- .text(function(d) { return d[0]; });
- }
- },
- _paintLegends: function(){
- var self = this;
- var w=18 + self.longestLegend*7 + 10;
- var legendBlock = self.perspective.insert("g",".link")
- .attr("class", "legendBlock");
- self._sortLegends();
- legendBlock.append("rect")
- .attr("x", self.opt.width -w)
- .attr("height", 6 + self.legends.length *16)
- .attr("width", w)
- .style("fill", "#ddd")
- .style("fill-opacity","0.4");
-
- var legend = legendBlock.selectAll(".mainLegend")
- .data(self.legends)
- .enter().insert("g")
- .attr("class", "mainLegend")
- .attr("transform", function(d, i) {
- return "translate(0," + (3 + i * 16) + ")";
- });
- for (var i=0; i< self.legendTypes.length; i++)
- self._paintLegend(legend,self.legendTypes[i]);
-
- },
- longestLegend:4,
- legendTypes:[],
- /**
- * Adds a legend to the graphic
- *
- * @example
- * instance.addLegends(["Legend red"],"Color","#FF0000");
- * instance.restart();
- */
- addLegends:function(legends,type,color){
- var self = this;
- if (self.legends==null) self.legends=[],self.legendTypes=[];
-
- if (legends==null) {
- self.legends = null;
- self.legendTypes=[];
- self.longestLegend=4;
- return;
- }
- if (type=="Resize By")
- type = type+ " "+legends[0];
- if (self.legendTypes.indexOf(type)==-1) {
- self.legends.push(["label",type]);
- self.legendTypes.push(type);
- if (type.length>self.longestLegend)
- self.longestLegend=type.length;
- }
-
- if (type.indexOf("Resize By")==0){ //is a size label
- self.legends.push([legends,type]);
- } else //is a color label
- for (var i=0;iself.longestLegend)
- self.longestLegend=legends[i].length;
- }
- },
- /**
- * Hides the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- *
- * @example
- * instance.hide("[id = node_10]");
- */
- hide: function(selector){
- var self=this;
- self.vis.selectAll(selector).attr("visibility", 'hidden');
- self.vis.selectAll(selector).selectAll(" .legend").attr("visibility", 'hidden');
- },
- /**
- * Shows the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- *
- * @example
- * instance.show("[id = node_10]");
- */
- show: function(selector){
- var self=this;
- self.vis.selectAll(selector).attr("visibility", 'visible');
- self.vis.selectAll(selector).selectAll(" .legend").attr("visibility",function(d) { return (d.showLegend)?"visible":"hidden";});
- },
- /**
- * Highlight the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- *
- * @example
- * instance.highlight("[id *= node_1]");
- */
- highlight: function(selector){
- var self=this;
- self.vis.selectAll(selector).style("stroke", '#3d6');
- },
- /**
- * Set the fill's color of the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- * @param {string} color a color in web format eg. #FF0000
- *
- * @example
- * instance.setFillColor(".figure","#FF0000");
- */
- setFillColor: function(selector,color){
- var self=this;
- self.vis.selectAll(selector).style("fill", color);
- },
- /**
- * Set the stroke's color of the elements on the graphic that match the selector.
- * Check the CSS3 selectors documentation to build a selector string
- *
- * @param {string} selector a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
- * @param {string} color a color in web format eg. #FF0000
- *
- * @example
- * instance.setColor("[id *= node_2]","#FF0000");
- */
- setColor: function(selector,color){
- var self=this;
- self.vis.selectAll(selector).style("stroke", color);
- },
- /**
- * If the protein has a fixed position in the graphic it gets released, or viceversa other wise
- *
- * @param {string} protein the id of the protein to swap is position on the graphic
- *
- * @example
- * instance.swapFixed("3");
- */
- swapFixed: function(protein){
- var self=this;
- var nodes=self.force.nodes();
- nodes.forEach(function(d, i) {
- if (d.id==protein)
- d.fixed = !d.fixed;
- });
- },
- /**
- * Shows the legend(id) of the protein
- *
- * @param {string} protein the id of the protein to swap the visibility of the legend
- *
- * @example
- * instance.swapShowLegend("#node_5 .legend");
- */
- showLegend: function(selector,typeLegend){
- var self=this;
- self.vis.selectAll(selector).selectAll(".legend").attr("visibility", "visible").text(function(d) {
- d.typeLegend=typeLegend;
- if (d.typeLegend=="id")
- return d.id;
- else //if (d.typeLegend.indexOf("features.")==0)
- return d.features[d.typeLegend];
-// else
-// return d[d.typeLegend];
- });
-// self.restart();
- },
- /**
- * Scales the area of a protein
- *
- * @param {string} protein the id of the protein to scale
- * @param {integer} scale value to scale a node
- *
- * @example
- * instance.setSizeScale("#figure_1",4);
- */
- setSizeScale: function(selector,scale){
- var self=this;
- self.vis.selectAll(selector).attr("d", d3.svg.symbol()
- .size(function(d) {
- d.size=scale;
- return (2*self.opt.radius)*(2*self.opt.radius)*scale;
- })
- .type(function(d) {
- return d3.svg.symbolTypes[self._figuresOrder[self.organisms[d.organism]]];
- })
- );
- },
- /**
- * Scales the size of the proteins which value has been modify by other means
- *
- * @param {string} selector a CSS3 selector to choose the nodes to resize
- *
- * @example
- * for (var i=0;iNOTE: The selection
- * radio button options will just work if the instance of your object is globlal. Example:
- * "var instance; window.onload = function() {instance = new Biojs.InteractionsFilterGraph(...)};"
- *
- * @class
- * @extends Biojs
- *
- * @author Rafael Jimenez
- * @version 1.0.0
- * @category 2
- *
- * @requires Biojs.InteractionsFilterGraph.css
- * @dependency
- *
- * @requires jQuery 1.7.2
- * @dependency
- *
- * @requires Cytoscape.js (latest version strongly suggested)
- * @dependency
- *
- * @requires Arbor JS (included with Cytoscape.js)
- * @dependency
- *
- * @param {Object} options An object with the options for this component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- * @option {string} instanceName
- * Instance name of the object
- *
- * @option {string} interactions
- * Object with binary interactions including interactors
- *
- * @option {string} filters
- * Filtering options use to highlight interactions in the graph
- *
- * @option {string} graphHeight [400]
- * Graph height
- *
- * @option {string} graphWidth [400]
- * Graph width
- *
- * @example
- * var instance = new Biojs.InteractionsFilterGraph({
- * target: "YourOwnDivId",
- * instanceName: "instance",
- * graphHeight: '350px',
- * graphWidth: '100%',
- * interactions: {
- * "i1": ["P1","P2"],
- * "i2": ["P3","P4"],
- * "i3": ["P5","P6"],
- * "i4": ["P2","P6"],
- * "i5": ["P2","P4"],
- * "i6": ["P6","P1"],
- * "i7": ["P2","P6"]
- * },
- * filters:{
- * timeSeries: {
- * title: "Time after Sendai viral infection (hours)",
- * presentation: "radio",
- * active: true,
- * dataType: "edges",
- * data: {
- * "2":["i2","i3","i4"],
- * "6":["i2","i5","i6","i7"],
- * "12":["i1","i2","i3","i4","i6","i7"]
- * }
- * }
- * }
- * });
- */
-
-
-Biojs.InteractionsFilterGraph = Biojs.extend(
-/** @lends Biojs.InteractionsFilterGraph# */
-{
- constructor: function (options) {
- //Biojs.console.enable();
- //this._setExample();
- if(this._getObjectSize(this.opt.interactions)){
- this._setHtmlTemplate();
- this._createFilterOptions();
- this._setCytoscapeHeight();
- this._startCytoscape();
- }
- },
- /**
- * Default values for the options
- * @name Biojs.InteractionsFilterGraph-opt
- */
- opt: {
- target: "YourOwnDivId",
- instanceName: "instance",
- graphHeight: 500,
- graphWidth: 500,
- interactions: {},
- filters:{}
- },
- /**
- * Array containing the supported event names
- * @name Biojs.InteractionsFilterGraph-eventTypes
- */
- eventTypes: [],
-
- _setExample: function(){
- this.opt.interactions = {
- "i1": ["P1","P2"],
- "i2": ["P3","P4"],
- "i3": ["P5","P6"],
- "i4": ["P2","P6"],
- "i5": ["P2","P4"],
- "i6": ["P6","P1"],
- "i7": ["P2","P6"]
- };
- this.opt.filters = {
- timeSeries: {
- title: "Time after Sendai viral infection (hours)",
- presentation: "radio",
- active: true,
- dataType: "edges",
- data: {
- "2":["i2","i3","i4"],
- "6":["i2","i5","i6","i7"],
- "12":["i1","i2","i3","i4","i6","i7"]
- }
- },
- interactionTypes: {
- title: "Interaction types",
- presentation: "radio",
- active: true,
- dataType: "edges",
- data: {
- "association":["i3","i4"],
- "physical association":["i2","i5","i6","i7"],
- "colocalization":["i1","i2"]
- }
- },
- publications: {
- title: "Publications",
- presentation: "checkbox",
- active: false,
- dataType: "edges",
- data: {
- "pumned01":["i1","i2","i3","i4","i5","i6","i7"],
- "pumned02":["i1","i2","i3","i4","i5","i6"],
- "pumned03":["i1","i2","i3","i6"],
- "pumned04":["i1","i3"],
- "pumned05":["i3"]
- }
- }
- };
-
- },
-
- _getObjectSize: function(object){
- var count = 0;
- for (i in object) {
- if (object.hasOwnProperty(i)) {
- count++;
- }
- }
- return count;
- },
-
- _setCytoscapeHeight: function(){
- this.opt.graphHeight = this.opt.graphHeight.toString();
- var height = this.opt.graphHeight;
- if(this.opt.graphHeight.indexOf("px") != -1){
- height = this.opt.graphHeight.substring(0,this.opt.graphHeight.length - 2);
- }
- var filterHeight = jQuery("#"+this._filtersTarget).height();
- var cytoscapeHeight = parseInt(this.opt.graphHeight) - parseInt(filterHeight) - 5;
- var cytoscape = jQuery("#"+this._cytoscapeTarget);
- cytoscape.height(cytoscapeHeight);
- //cytoscape.width(parseInt(cytoscape.width())-1);
- },
-
- /*
- * Function: Biojs.HpaSummaryFeatures._getCytoscapeElements
- * Purpose: Get an elements object defining the data structure of the graph
- * Returns: {Object} elements object used by cytoscape
- * Inputs: -
- */
- _getCytoscapeElements: function(){
- var self = this;
- var nodes = [];
- var edges = [];
- var elements = new Object();
- var nodeExists = {}; // id => true
- var addNode = function(id){
- if( !nodeExists[id] ){
- nodes.push({ data: { id: id, weight: self.opt.nodeWeight }, classes: "allnodes" });
-
- nodeExists[id] = true;
- }
- };
-
- for(interactionId in self.opt.interactions){
- var interactors = self.opt.interactions[interactionId];
-
- edges.push({ data: { id: interactionId, source: interactors[0], target: interactors[1]},classes: "alledges"});
-
- addNode( interactors[0] );
- addNode( interactors[1] );
- }
- elements = {"nodes": nodes, "edges": edges};
- return elements;
- },
-
-
- /*
- * Function: Biojs.HpaSummaryFeatures._startCytoscape
- * Purpose: Start cytoscape and draw the network
- * Returns: -
- * Inputs: -
- */
- _startCytoscape: function(){
-
- var elements = this._getCytoscapeElements();
-
- jQuery("#"+this._cytoscapeTarget).cytoscape({
-
- // define the elements in the graph
- elements: elements,
-
- // define the layout to use
- layout: {
- name:"arbor"
- },
-
- // define the visual style (like css) of the graph
- style: [
- {
- selector: "node",
- css: {
- shape: "ellipse",
- backgroundColor: "#888",
- height: "mapData(weight, 0, 100, 15, 30)",
- width: "mapData(weight, 0, 100, 15, 30)",
- content: "data(id)"
- }
- },
-
- {
- selector: ".unselect",
- css: {
- backgroundColor: "#888",
- borderColor: "#ccc"
- }
-
- },
-
- {
- selector: "edge",
- css: {
- lineColor: "#ccc",
- targetArrowColor: "#ccc",
- width: "mapData(weight, 0, 100, 2, 5)"
- }
- },
-
- {
- selector: "node:selected",
- css: {
- backgroundColor: "#cc0000"
- }
- },
-
- {
- selector: "edge:selected",
- css: {
- lineColor: "#ff9999"
- }
- }
-
- ],
-
- // define the callback for when cytoscape web is ready
- ready: function(){
- window.cy = this;
- }
- });
-
-
- },
-
-
- /**
- * The idea would be to load some stuff once cytoscape is ready.
- * However it seems this cannot be done since the cy.ready or cy.done
- * events of cytoscape do not work on this version.
- */
- _onCytoscapeReady: function(){
- alert("asdasdaa");
- },
-
-
- /*
- * Function: Biojs.HpaSummaryFeatures._printInteractionDetails
- * Purpose: Print node and edges information
- * Returns: -
- * Inputs: nodes -> {String} String of interactors.
- * edges -> {String} String of interactions.
- */
- _printInteractionDetails: function(nodes, edges){
- var edgesMsg = jQuery('Interactions: '+edges+'');
- var nodesMsg = jQuery('Interactors: '+nodes+'');
- jQuery("#"+this._informationTarget).append(edgesMsg);
- jQuery("#"+this._informationTarget).append(nodesMsg);
- },
-
-
- /**
- * Highlight a filter option in the graph
- * @param {string} [dataElement] Data element of one filter option.
- * @param {string} [filterName] Filter name of one filter option.
- *
- * @example
- * instance.highlightFilterOption("6","timeSeries");
- *
- * @example
- * instance.highlightFilterOption("2","timeSeries");
- */
- highlightFilterOption: function(dataElement,filterName){
- jQuery(".miRadioBtn").not('.'+filterName+'RadioBtn').prop('checked', false);
- //jQuery(".miRadioBtn").attr('checked', false);
- if(typeof filterName != undefined){
- if(typeof dataElement != undefined){
- if(dataElement == 'none'){
- this.unselect();
- }
- else if(typeof this.opt.filters[filterName].data[dataElement] != undefined){
- var edgeIds = "";
- var nodeIds = "";
- // SELECT EDGES - interactions
- for (key in this.opt.filters[filterName].data[dataElement]) {
- if (this.opt.filters[filterName].data[dataElement].hasOwnProperty(key)){
- var edgeId = this.opt.filters[filterName].data[dataElement][key];
- if(typeof edgeId != 'function'){
- edgeIds += "#" + edgeId + ", ";
- // SELECT NODES - interactors
- if(this.opt.interactions[edgeId] != undefined){
- for (i=0; i
');
- var filterTitle = jQuery(''+self.opt.imageTitle+'
');
- }
-
- /* Create image */
- if (self.opt.imageUrl != "") {
- /* HPA image */
- self._image = jQuery(''+self.opt.title+'
');
-
- /* Create notes in right column */
- self._contentNotes = jQuery('Antibody '+value+'
'
- html += '';
- html += '';
- html += '';
- html += '';
- html += '';
- });
- return html;
- },
- /*
- * Function: Biojs.HpaSummaryFeatures._displayHpaSummaries
- * Purpose: Disaply HPA summaries inside the HTML container
- * Returns: -
- * Inputs: xml -> {String} DAS XML with HPA summary information
- */
- _displayHpaSummaries: function(xml){
- var self = this;
- jQuery(xml).find("FEATURE").each(function(){
- if (jQuery(this).attr("id").indexOf("_summary") != -1) {
- /* Get notes */
- var notes = new Array();
- var xmlNotes = jQuery(this).find("NOTE");
- xmlNotes.each(function(){
- notes.push(jQuery(this).text());
- });
- /* Get links */
- var imageUrl = "";
- var imageTitle = "";
- var linkUrl = "";
- var linkTitle = "";
- var xmlLinks = jQuery(this).find("LINK");
- xmlLinks.each(function(){
- if (jQuery(this).attr("href").indexOf(".jpg") != -1 || jQuery(this).attr("href").indexOf(".png") != -1) {
- imageUrl = jQuery(this).attr("href");
- imageTitle = jQuery(this).text();
- }
- else
- if (jQuery(this).text().indexOf("original source") != -1) {
- linkUrl = jQuery(this).attr("href");
- linkTitle = jQuery(this).text();
- }
- });
- new Biojs.HpaSummaryFeature({
- target: jQuery(this).attr("id"),
- title: jQuery(this).attr("label"),
- imageUrl: imageUrl,
- imageTitle: imageTitle,
- notes: notes,
- linkUrl: linkUrl,
- linkTitle: linkTitle,
- width: self.opt.width,
- imageWidth: self.opt.imageWidth
- });
- }
- });
-
- },
-
- /**
- * Default values for the options
- * @name Biojs.HpaSummaryFeatures-opt
- */
- opt: {
- target: 'hpaSummaryFeatues',
- hpaDasUrl: '',
- proxyUrl: '../biojs/dependencies/proxy/proxy.php',
- width: '900px',
- imageWidth: '200px'
- },
- /**
- * Array containing the supported event names
- * @name Biojs.HpaSummaryFeatures-eventTypes
- */
- eventTypes: [
- /**
- * @name Biojs.HpaSummaryFeatures#onRequestError
- * @event
- * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} file The name of the loaded file.
- * @eventData {string} result A string with either value 'success' or 'failure'.
- * @eventData {string} message Error message in case of result be 'failure'.
- *
- * @example
- * instance.onRequestError(
- * function( e ) {
- * alert( e.message );
- * }
- * );
- *
- **/
- "onRequestError"
- ]
-},{
- // Some static values
- COMPONENT_PREFIX: "hpaSummaryFeatures_",
- MESSAGE_NODATA: "Sorry, we could not find summary data for your request",
- // Events
- EVT_ON_REQUEST_ERROR: "onRequestError",
-});
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsBundleD3.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsBundleD3.js
deleted file mode 100755
index 701d857bff..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsBundleD3.js
+++ /dev/null
@@ -1,1021 +0,0 @@
-/**
- * This component uses the D3 library and specifically its implementation of the bundle algorithm to
- * represent a network of protein interactions.
- *
- * @class
- * @extends Biojs
- *
- * @author Gustavo A. Salazar
- * @version 0.9.0_alpha
- * @category 1
- *
- * @requires jQuery Core 1.7.2
- * @dependency
- *
- * @requires D3
- * @dependency
- *
- * @requires InteractionsD3 CSS
- * @dependency
- *
- * @param {Object} options An object with the options for the InteractionsD3 component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- * @option {string} width
- * Width of the SVG element, if given in percentage, it will use it on proportion of the container
- * @option {string} height
- * Height of the SVG element, if given in percentage, it will use it on proportion of the container
- * @option {string} radius
- * Radius of the nodes representing the proteins
- * @option {string} textLength
- * Space in pixels to be reserved for the labels around the circle
- *
- * @example
- * var instance = new Biojs.InteractionsBundleD3({
- * target: "YourOwnDivId",
- * });
- * var pid=1;
- * for (var i=0;i<100;i++)
- * instance.addProtein({id:'p'+pid++,group:1,organism:"human"});
- * for (var i=0;i<100;i++)
- * instance.addProtein({id:'p'+pid++,group:1,organism:"TB"});
- * for (var i=1;i<200;i++){
- * instance.addInteraction("p"+(i),"p"+(100+i),{id:"p"+(i)+"_p"+(100+i),feature1:"value"});
- * instance.addInteraction("p"+(i),"p"+(i%17),{id:"p"+(i)+"_p"+(i%17),feature1:"value"});
- * }
- * instance.restart();
- */
-Biojs.InteractionsBundleD3 = Biojs.extend (
- /** @lends Biojs.InteractionsBundleD3# */
- {
- cluster:null,
- bundle:null,
- vis:null,
- splines:[],
- model:{},
- organisms:{},
- proteins:[],
- interactions:[],
- interactionsA:{},
- svg:null,
-
- //Transformation values
- tTranslate:null,
- tScale:null,
-
- constructor: function (options) {
- var self = this;
- self.cluster=null;
- self.bundle=null;
- self.vis=null;
- self.splines=[];
- self.model={"name":"", "children":[] };
- self.organisms={};
- self.proteins=[];
- self.interactions=[];
- self.svg=null;
- self.interactionsA={};
-
- this._container = $("#"+self.opt.target);
- this._container.empty();
- $(this._container).addClass("graphCircle");
-
- var w = $(this._container).width(),
- h = $(this._container).height();
-
- w = (self.opt.width.indexOf("%")!=-1)?w*(self.opt.width.substring(0, self.opt.width.length-1)*1)/100.0:self.opt.width*1;
- self.opt.width=w;
-
- h = (self.opt.height.indexOf("%")!=-1)?h*(self.opt.height.substring(0, self.opt.height.length-1)*1)/100.0:self.opt.height*1;
- self.opt.height=h;
-
- var rx = w / 2,
- ry = h / 2;
-
- var tmpR=(rx'+this.opt.filters[key].title+'
');
- var filterOptions = jQuery('');
- filterContainer.append(filterTitle);
- filterContainer.append(filterOptions);
- jQuery("#"+this._filtersTarget).append(filterContainer);
- if(this.opt.filters[key].presentation == "radio"){
- this._createRadioButtons(this.opt.filters[key].data, key, '#'+key+'Options');
- } else if (this.opt.filters[key].presentation == "checkbox"){
- // todo
- } else {
- Biojs.console.log("ERROR: " + "filter presentation value unknown for filter " + key);
- }
- }
- }
- }
- },
-
- /*
- * Function: Biojs.HpaSummaryFeatures._createCheckBox
- * Purpose: Create checkbox options
- * Returns: -
- * Inputs: -
- */
- _createCheckBox: function(data, filterName, target){
- },
- /*
- * Function: Biojs.HpaSummaryFeatures._createRadioButtons
- * Purpose: Create radio button options
- * Returns: -
- * Inputs: data -> {Object} Data for one filter.
- * filterName -> {String} Filter name.
- * target -> {String} HTML tag where to draw.
- */
- _createRadioButtons: function(data, filterName, target){
- for (key in data) {
- if (data.hasOwnProperty(key)){
- var br = jQuery(''); - var radioBtnContainer = jQuery(''); - var radioBtn = jQuery(''); - var radioBtnName = jQuery(''+key+''); - radioBtnContainer.append(radioBtn); - radioBtnContainer.append(radioBtnName); - radioBtnContainer.appendTo(target); - //br.appendTo('#timeSeriesRadioButtons'); - } - } - var nondeRadioBtn = jQuery(''); //checked="checked" - var noneRadioBtnName = jQuery('None'); - nondeRadioBtn.appendTo(target); - noneRadioBtnName.appendTo(target); - }, - - - /* - * Function: Biojs.HpaSummaryFeatures._setHtmlTemplate - * Purpose: Create an HTML template to later on populate with information - * Returns: - - * Inputs: - - */ - _setHtmlTemplate: function(){ - this.opt.graphWidth = this.opt.graphWidth.toString(); - var width = this.opt.graphWidth + "px"; - if(this.opt.graphWidth.indexOf("%") != -1 || this.opt.graphWidth.indexOf("px") != -1){ - width = this.opt.graphWidth; - } - var interactionFilters = jQuery(''); - var cytoscape = jQuery(''); - var information = jQuery(''); - jQuery("#"+this.opt.target).append(interactionFilters); - jQuery("#"+this.opt.target).append(cytoscape); - jQuery("#"+this.opt.target).append(information); - }, - - /* - * Variable: Biojs.HpaSummaryFeatures._setHtmlTemplate - * Purpose: Create an HTML template to later on populate with information - * Returns: - - * Inputs: - - */ - _cytoscapeTarget: "miCy", - _filtersTarget: "miInteractionFilters", - _informationTarget: "miInformation" - - - - - -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsTable.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsTable.js deleted file mode 100755 index dda7668fc5..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.InteractionsTable.js +++ /dev/null @@ -1,668 +0,0 @@ -/** - * Table to show binary molecular interactions. - * - * @class - * @extends Biojs.Table - * - * @author John Gomez - * @version 1.0.0 - * @category 3 - * - * @param {Object} options - * An object with the options for InteractionTable' component. - * - * @option {string[][]|Object} dataSet - * Either 2D string array containing the whole data to be displayed or a plain object defining the data source. - * - *
- * {
- * url: <url>,
- * proxyUrl: <proxy>,
- * paramsMap: { "iDisplayStart": <newName1>, "iDisplayLength": <newName2>, ... },
- * filter: <flag>,
- * version: <MITAB_VERSION>,
- * totalRecords:<number>
- * }
- *
- * where:
- * -
- *
- * {
- * psiquicUrl: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query',
- * proxyUrl: '../biojs/dependencies/proxy/proxy.php',
- * version: "MITAB_VERSION_2_5_EXT",
- * query: "species:human",
- * filter: false
- * }
- *
- *
- * - * ...soon - *- * - * @example - * var myTable = new Biojs.InteractionsTable({ - * target: "YourOwnDivId", - * dataSet: { - * psicquicUrl: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query', - * proxyUrl: '../biojs/dependencies/proxy/proxy.php', - * query: "brca2", - * version: "MITAB_VERSION_2_5", - * filter: false - * }, - * rowSelection: true - * }); - * - */ -Biojs.InteractionsTable = Biojs.Table.extend( -/** @lends Biojs.InteractionsTable# */ -{ - constructor: function (options) { - //Biojs.console.enable(); - - options.dataSet.version = (options.dataSet.version != undefined) ? options.dataSet.version : Biojs.InteractionsTable.MITAB_VERSION_2_5 - - this._useVersion ( options.dataSet.version ); - - // Calling super's constructor - this.base(options); - - }, - - /** - * Default values for the options - * @name Biojs.InteractionsTable-opt - */ - opt: { - target: "YourOwnDivId", - rowSelection: false, - version: "MITAB_VERSION_2_5", - psiquicUrl: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query', - proxyUrl: '../biojs/dependencies/proxy/proxy.php' - }, - - /** - * Array containing the supported event names - * @name Biojs.InteractionsTable-eventTypes - */ - eventTypes: [], - - /** - * Do a query to PSICQUIC server by using the provided query in MIQL. - * Uses the structure of the URL to fetch data from PSICQUIC. - * @param {string} columns Column indexes to be hided. - * - * @example - * myTable.setQuery("species:human"); - * - */ - setQuery: function ( query ) { - - // remove this properties to set a new query - delete this.opt.dataSet.url; - delete this.opt.totalRecords; - - // set the new query - this.opt.dataSet.query = query; - - // request data - this.setDataSource(this.opt.dataSet); - }, - - /** - * Get the actual query. - * Uses the structure of the URL to fetch data from PSICQUIC. - * - * @return {string} Current query. - * - * @example - * alert( "The query is " + myTable.getQuery() ); - */ - getQuery: function () { - return unescape(this.opt.dataSet.query); - }, - - /* - * Function: Biojs.InteractionTable._requestQueryCount - * Purpose: Request total rows counting with the provided query for pagination purposes. - * Since the PSIQUIC service does not provides the total row count with retrieved data, - * it's necessary to do another request in order to get it. - * Inputs: dataSet -> {Object} Settings of the data set. - * action -> {function} Callback function having the dataSet as argument. - */ - _requestQueryCount: function ( dataSet, action ) { - var self = this; - - dataSet.url = dataSet.psicquicUrl + '/' + dataSet.query; - dataSet.paramsMap = { "iDisplayStart": "firstResult", "iDisplayLength": "maxResults" }; - - jQuery.ajax({ - url: dataSet.proxyUrl, - dataType: "text", - data: [{ name: "url", value: dataSet.url + '?format=count' }], - success: function ( data ) { - dataSet.totalRecords = parseInt(data) | 0; - action.call( self, dataSet ); - } - }); - }, - - /** - * Rebuild the table - * - * @example - * myTable.setDataSource({ - * psicquicUrl: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query', - * proxyUrl: '../biojs/dependencies/proxy/proxy.php', - * query: "pubid:(10837477 OR 12029088)", - * version: "MITAB_VERSION_2_5", - * filter: false - * }); - * - */ - setDataSource: function ( dataSet ) { - - if ( dataSet instanceof Array ) { - // Local data - // invoke parent's setDataSource - this.base( dataSet ); - - } else { - // Remote data - if ( dataSet.hasOwnProperty("totalRecords") && dataSet.hasOwnProperty("url") ) { - // Already have the number of records for pagination - // then, invoke parent's setDataSource - this.base( dataSet ); - - } else { - // Set the new query - this.opt.dataSet = {}; - this.opt.dataSet.psicquicUrl = dataSet.psicquicUrl; - this.opt.dataSet.proxyUrl = dataSet.proxyUrl; - this.opt.dataSet.version = dataSet.version; - this.opt.dataSet.filter = dataSet.filter; - this.opt.dataSet.query = escape(dataSet.query); - this.opt.dataSet.url = dataSet.psicquicUrl + '/' + dataSet.query; - this.opt.dataSet.paramsMap = { "iDisplayStart": "firstResult", "iDisplayLength": "maxResults" }; - // Request query counting rows and apply setDataSource then - this._requestQueryCount( this.opt.dataSet, this.base ); - } - } - }, - /* - * Function: Biojs.InteractionTable._decodeToJSON - * Purpose: Overrides the parent method to decode the received MITAB data into the expected JSON format. - * Returns: {Object} formatted in the expected JSON. - * Inputs: data -> {*} MITAB data received from the PSIQUIC server or another one. - */ - _decodeToJSON: function ( mitabData ) { - Biojs.console.log("DATA DECODING FROM MITAB to JSON"); - - var jsonData = {}; - var decoder = new Biojs.InteractionsTable.MITabTxtDecoder(mitabData); - - jsonData.aaData = decoder.decodeData(); - jsonData.iTotalRecords = this.getTotalRecords(); - jsonData.iTotalDisplayRecords = this.getTotalRecords(); - - delete decoder; - return jsonData; - }, - - /* - * Function: Biojs.InteractionTable._useVersion - * Purpose: Set the columns depending on the MITAB format version. - * Returns: - * Inputs: {string|int} Either the name or the number of columns of the MITAB version. - * Use values defined in the static members of Biojs.InteractionsTable declared at the end of this class. - */ - _useVersion: function (version) { - - var length = ( (typeof version) == "string" ) ? Biojs.InteractionsTable[version] : version; - - var columnsToHide = []; - - switch (length) { - - case Biojs.InteractionsTable.MITAB_VERSION_2_7: - for ( var i = 36; i < 42; i++ ) { - this.opt.columns[i] = Biojs.InteractionsTable.MITAB_COLUMNS[i]; - } - columnsToHide = [36,37,38,39,40,41]; - - case Biojs.InteractionsTable.MITAB_VERSION_2_6: - for ( var i = 31; i < 36; i++ ) { - this.opt.columns[i] = Biojs.InteractionsTable.MITAB_COLUMNS[i]; - } - columnsToHide = columnsToHide.concat([31,32,33,34,35]); - - case Biojs.InteractionsTable.MITAB_VERSION_2_5_EXT: - for ( var i = 15; i < 31; i++ ) { - this.opt.columns[i] = Biojs.InteractionsTable.MITAB_COLUMNS[i]; - } - columnsToHide = columnsToHide.concat([15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]); - - // Complex expansion - this.opt.columns[15].render = this._columnRender.showDescXRef; - - // Biological Role A - this.opt.columns[16].render = this._columnRender.showDescXRef; - - // Biological Role B - this.opt.columns[17].render = this._columnRender.showDescXRef; - - // Experimental Role A - this.opt.columns[18].render = this._columnRender.showRowDescXRef; - - // Experimental Role B - this.opt.columns[19].render = this._columnRender.showRowDescXRef; - - // Interactor Type A - this.opt.columns[20].render = this._columnRender.showDescXRef; - - // Interactor Type B - this.opt.columns[21].render = this._columnRender.showDescXRef; - - // XRef Interactor Type A - this.opt.columns[22].render = this._columnRender.showDescXRef; - - // Xref Interactor Type B - this.opt.columns[23].render = this._columnRender.showDescXRef; - - // XRef Interaction - this.opt.columns[24].render = this._columnRender.showDescXRef; - - // Annotation Interactor A - this.opt.columns[25].render = this._columnRender.showRowDescXRef; - - // Annotations Interactor B - this.opt.columns[26].render = this._columnRender.showRowDescXRef; - - // Annotations Interaction - this.opt.columns[27].render = this._columnRender.showRowDescXRef; - - // NCBI Taxonomy - this.opt.columns[28].render = this._columnRender.showDescXRef; - - // Parameters - this.opt.columns[29].render = this._columnRender.showRowDescXRef; - - // Creation Date - this.opt.columns[30].render = this._columnRender.showRowDescXRef; - - case Biojs.InteractionsTable.MITAB_VERSION_2_5: - - for ( var i = 0; i < 15; i++ ) { - this.opt.columns[i] = Biojs.InteractionsTable.MITAB_COLUMNS[i]; - } - columnsToHide = columnsToHide.concat([2,3,7,8,11,12,13]); - - this.opt.columns[0].render = this._columnRender.showProteinXRef; - this.opt.columns[1].render = this._columnRender.showProteinXRef; - this.opt.columns[2].render = this._columnRender.showValueXRef; - this.opt.columns[3].render = this._columnRender.showValueXRef; - this.opt.columns[4].render = this._columnRender.showValueXRef; - this.opt.columns[5].render = this._columnRender.showValueXRef; - - this.opt.columns[6].render = this._columnRender.showDescXRef; - - // NCBI Taxon - this.opt.columns[9].render = this._columnRender.showDescXRef; - this.opt.columns[10].render = this._columnRender.showDescXRef; - - // Interaction type - this.opt.columns[11].render = this._columnRender.showDescXRef; - - // source - this.opt.columns[12].render = this._columnRender.showDescXRef; - - // Interaction AC - this.opt.columns[13].render = this._columnRender.showInteractionXRef; - - // Confidence Score - this.opt.columns[14].render = this._columnRender.showRawValueXRef; - - break; - - default : - Biojs.console.log("Wrong version <"+length+"> "); - } - - - this.opt.hideColumns = columnsToHide; - - }, - - /* - * Object: Biojs.InteractionTable._columnRender.showProteinXRef - * Purpose: Store the render functions to format values on the table cells. - */ - _columnRender: { - - /** - * @ignore - * - * Function: Biojs.InteractionTable._columnRender - * Purpose: Format the string
'; - } - delete tk; - return newValue; - }, - /** - * @ignore - * - * Function: Biojs.InteractionTable._columnRender.showInteractionXRef - * Purpose: Format the string
'; - } - delete tk; - return newValue; - }, - /** - * @ignore - * - * Function: Biojs.InteractionTable._columnRender.showValueXRef - * Purpose: Format the string
'; - } - delete tk; - return newValue; - }, - /** - * @ignore - * - * Function: Biojs.InteractionTable._columnRender.showDescXRef - * Purpose: Format the string
').appendTo('#'+opt.target);
-
- $( "#play" ).button({
- text: false,
- icons: {
- primary: "ui-icon-play"
- }
- }).click(function() {
- var options;
- if ( $(this).text() === "play" ) {
- options = {
- label: "stop",
- icons: {
- primary: "ui-icon-stop"
- }
- };
- $("#refresh").button("disable");
-
- self._conditions = $("#condition > option");
- self._interval = setInterval(function(){
-
- var conditions = self._conditions;
- var selected = $('#condition').val();
-
- var index;
- for(var i=0; i
' ); - self.pdbid = options.pdbid; - self.catable = null; - jQuery.ajax({ - url: 'http://puck.ebi.ac.uk:4000/mmcif/'+self.pdbid+'/categories', - data: {'varname':'catlist'}, - dataType: 'script', - crossDomain: 'true', - type: 'GET', - success: function(response, callOptions) { self.showCategoriesList(catlist); } - }); - }, - - showCategoriesList: function(catlist) { - var self = this; - for(var ci=0; ci < catlist.length; ci++) catlist[ci] = [catlist[ci]]; - var dtable = jQuery('#catlistTable').dataTable( { - "aaData": catlist, - "aoColumns": [ { "sTitle": "Categories" } ] - } ); - dtable.$('td').click( function () { - var sData = dtable.fnGetData( this ); - self.showAcategory(sData); - } ); - }, - standardizeVals: function(vals) { - if(vals instanceof Array) return vals; - return [vals]; - }, - showAcategory: function(catname) { - var self = this; - console.log( 'Start showing category '+catname ); - jQuery.ajax({ - url: 'http://puck.ebi.ac.uk:4000/mmcif/'+self.pdbid+'/'+catname, - data: {'varname':'catinfo'}, - dataType: 'script', - crossDomain: 'true', - type: 'GET', - success: function(response, callOptions) { self.showCategoryTable(catinfo); } - }); - //var dtable = jQuery('#catlistTable').dataTable( { - // "aaData": catlist, - // "aoColumns": [ { "sTitle": "Categories" } ] - //} ); - }, - - showCategoryTable: function(catinfo) { - var self = this; - var colinfo = [], rows = []; - for(var item in catinfo) { - colinfo.push( {"sTitle":item} ); - var vals = self.standardizeVals(catinfo[item]); - if(rows.length == 0) { - for(ri=0; ri < vals.length; ri++) rows.push([]); - } - for(ri=0; ri < vals.length; ri++) - rows[ri].push(vals[ri]); - } - if(self.catable!=null) { self.catable.fnDestroy(); jQuery("#categoryTable").html(""); } - //self.catable = null; - self.catable = jQuery('#categoryTable').dataTable( { - "aaData": rows, "aoColumns": colinfo, bDestroy:true //, "bRetrieve": true, "bDestroy": true - } ); - }, - - /** - * Array containing the supported event names - * @name Biojs.MmcifViewer-eventTypes - */ - eventTypes : [ - /** - * @name Biojs.MmcifViewer#onClick - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {int} selected Selected character. - * @example - * instance.onClick( - * function( objEvent ) { - * alert("The character " + objEvent.selected + " was clicked."); - * } - * ); - * - * */ - "onClick", - - /** - * @name Biojs.MmcifViewer#onHelloSelected - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {int} textSelected Selected text, will be 'Hello' obviously. - * @example - * instance.onHelloSelected( - * function( objEvent ) { - * alert("The word " + objEvent.textSelected + " was selected."); - * } - * ); - * - * */ - "onHelloSelected" - ] -}); - diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.PDBLogos.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.PDBLogos.js deleted file mode 100755 index ac0dd21d3d..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.PDBLogos.js +++ /dev/null @@ -1,261 +0,0 @@ -/** - * PDBLogos shows a set of icons to give a quick summary of salient features of a PDB entry. - * See more info on PDBLogos at http://pdbe.org/prints - * - * @class - * @extends Biojs - * - * @author John Gomez-Carvajal - * @version 1.0.0 - * @category 2 - * - * @requires Raphael 2.1.0 - * @dependency - * - * @requires jQuery Core 1.6.4 - * @dependency - * - * @param {Object} options An object with the options for PDBLogos component. - * - * @option {string} target - * Identifier/HTMLElement of the div container where the component should be rendered. - * - * @option {string} identifier - * PDB entry id for which prints will be rendered. - * - * @option {Object} raphael - * A Raphael object instead of div to render PDBprints into. - * - * @option {int} startX - * X-coordinate of point where rendering the array of PDBprints will start in the Raphael canvas - * - * @option {int} startY - * Y-coordinate of point point where rendering the array of PDBprints will start in the Raphael canvas - * - * @option {int} interval - * Gap size between successive PDBprints in a vertical or horizontal array - * - * @option {int} size - * Length of an icon logo - * - * @option {string} [color="#588FE5"] - * Color for background as HTML color code. - * - * @option {char} orient - * Rendering orientation either vertical or horizontal - * - * @option {string} [pdb3DIcon='biojs/css/images/3d.png'] - * Image URL to be used as 3D structure's icon - * - * @example - * var instance = new Biojs.PDBLogos({ - * target: "YourOwnDivId", - * identifier: "1cbs" - * }); - * - */ -Biojs.PDBLogos = Biojs.extend ( -/** @lends Biojs.PDBLogos# */ -{ - /** - * Default values for the options - * @name Biojs.PDBLogos-opt - */ - opt: { - target: "YourOwnDivId", - raphael: null, - identifier:"", - startX: 10, - startY: 10, - interval: 10, - size: 40, - orient: 'h', - logosURL: 'http://www.ebi.ac.uk/pdbe-apps/widgets/pdbprints', - logos: [], - color: "#588FE5", - pdb3DIcon: 'biojs/css/images/3d.png' - }, - - /** - * Array containing the supported event names - * @name Biojs.PDBLogos-eventTypes - */ - eventTypes : [ - /** - * @name Biojs.PDBLogos#onClick - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} identifier PDB actual entry. - * @eventData {string} category Name of the PDBLogo category clicked. - * @eventData {string} printsUrl Url of the PDB general information. - * @example - * instance.onClick( - * function( e ) { - * alert("Logo " + e.category + " of PDB " + e.identifier + " was clicked."); - * } - * ); - * - * */ - "onClick" - ], - - constructor: function (options) { - this._initCanvas(); - if( !Biojs.Utils.isEmpty(this.opt.identifier) ) { - this._doRequest(this.opt.identifier); - } - }, - - _initCanvas: function() { - var config = this.opt; - - // Make Raphael object if not provided already - if ( !Biojs.Utils.isEmpty( config.raphael ) ){ - config.raphael.remove(); - config.raphael = null; - } - - var sizex = config.startX + config.size * Biojs.PDBLogos.CATEGORY.lenght; - var sizey = config.startY + (config.interval+config.size); - - if(config.orient == Biojs.PDBLogos.VERTICAL) { - sizey = config.startY + config.size * Biojs.PDBLogos.CATEGORY.lenght; - sizex = config.startX + (config.interval+config.size); - } - config.raphael = Raphael(config.target, sizex, sizey); - }, - - /** - * Sets the pdb identifier generating a new request of logos. - * - * @param {string} value PDB entry. - * - * @example - * instance.setIdentifier("1j3s"); - * - */ - setIdentifier: function ( value ) { - this.opt.identifier = value; - this._initCanvas(); - this._doRequest(value); - }, - - _doRequest: function(identifier){ - - var self = this; - - jQuery.ajax({ - url: 'http://www.ebi.ac.uk/pdbe-apps/widgets/pdbprints', - data: { 'varname':'printsdata', 'pdbid': identifier, color: "transparent" }, - dataType: 'script', - crossDomain: 'true', - type: 'GET', - success: function(response, callOptions) { self._printsLayout(printsdata); } - }); - }, - - - _printsLayout: function(data) { - var self = this; - var config = this.opt; - var ix = config.startX; - var iy = config.startY; - var i=0; - - config.logos = []; - - data[config.identifier].PDBStructure = [ config.pdb3DIcon, 'structure']; - - for( category in Biojs.PDBLogos.CATEGORY ) { - - var isizeY = config.size, isizeX = config.size; - var imgUrl = data[config.identifier][category][0]; - var printsURL = "http://www.pdbe.org"; - - ix = config.startX; - iy = config.startY; - - if( config.orient == Biojs.PDBLogos.VERTICAL ) { - iy += config.size * (i++); - } else { - ix += config.size * (i++); - } - - if(category == "PDBeLogo") { - config.logos.push( - config.raphael.text(ix, iy + self.opt.size/4, config.identifier) - .attr({ - 'font-family':'Mono', - 'text-anchor':'start', - 'font-size': self.opt.size/3, - 'cursor':'pointer', - 'title':'View all about PDB ' + config.identifier - }) - .data("identifier", config.identifier) - .mouseup( function() { - window.open( "http://www.pdbe.org/" + this.data("identifier") ); - }) - ); - - imgUrl = "http://www.ebi.ac.uk/pdbe-apps/widgets/html/PDBeWatermark_horizontal_128.png"; - isizeX = config.size * 0.9; - isizeY = config.size/2; - iy += config.size/2; - - } else { - - printsURL += "/"+config.identifier+"/" + Biojs.PDBLogos.CATEGORY[category]; - - if ( category == "PDBStructure" ) { - printsURL = "http://www.ebi.ac.uk/pdbe-srv/view/entry/" + config.identifier + "/openastex"; - } - - // Add icon background - config.raphael.rect(ix, iy, isizeX, isizeY, 7).attr({'fill':self.opt.color}); - } - - config.logos.push( - config.raphael.image(imgUrl, ix, iy, isizeX, isizeY) - .attr({ - 'cursor':'pointer', - 'title':'View '+category - }) - .data({ - "printsURL": printsURL, - "category": category - }) - .mouseup( function() { - self.raiseEvent( Biojs.PDBLogos.EVT_ON_CLICK, { - printsURL: this.data("printsURL"), - identifier: config.identifier, - category: this.data("category") - }); - }) - .mouseover( function() { } ) - ); - - } - - } - -},{ - HORIZONTAL: 'h', - VERTICAL: 'v', - - CATEGORY: { - "PDBeLogo": "", - "PrimaryCitation": "citation", - "Taxonomy": "taxonomy", - "Expressed": "taxonomy", - "Experimental": "experimental", - "Protein": "primary", - "NucleicAcid": "primary", - "Ligands": "ligands", - "PDBStructure": "PDBStructure" - }, - - EVT_ON_CLICK: "onClick" - -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.PDBprints.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.PDBprints.js deleted file mode 100755 index 5b38cc36dd..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.PDBprints.js +++ /dev/null @@ -1,187 +0,0 @@ -/** - * This is the description of the PDBprints component. This component renders a set of icons to give a quick summary of salient features of a PDB entry. - * See more info on PDBprints at http://pdbe.org/prints - * - * @class - * @extends Biojs - * - * @author Swanand Gore - * @version 1.0.0 - * @category 0 - * - * @requires Raphael 2.1.0 - * @dependency - * - * @requires jQuery Core 1.6.4 - * @dependency - * - * @param {Object} options An object with the options for PDBprints component. - * - * @option {list} targets - * This is a list of configuration options, each corresponding to PDBprints to be rendered in a div. - * Each config consists of following: - *
-
- *
Display:
' + - ' Hydrophylic residues' + - ' Hydrophobic residues
' + - ' Basic(+) residues
' + - ' Acidic(-) residues
' + - ' Antialias
'+ - ' Black background
'+ - ' Rotation'+ - - '
Style:
'+ - - 'Color:
'+ - - 'Surface:
'+ - - 'Show selection using:
' + - ' Translucent ' + - ' Halos') - - .change( function ( e ) { - - var targetId = jQuery(e.target).attr('id'); - - switch ( targetId ) { - case "polarCheck": - self.displayPolar( undefined, e.target.checked ); - break; - case "unpolarCheck": - self.displayUnPolar( undefined, e.target.checked ); - break; - case "positiveCheck": - self.displayPositive( undefined, e.target.checked ); - break; - case "negativeCheck": - self.displayNegative( undefined, e.target.checked ); - break; - case "antialiasCheck": - self.displayAntialias( event.target.checked ); - break; - case "rotationCheck": - self.rotate( event.target.checked ); - break; - case "backgroundCheck": - self.changeBackgroundColor( "black", e.target ); - break; - case "styleSelect": - self.displayStyle( e.target.value ); - break; - case "colorSelect": - self.displayColorScheme( e.target.value ); - break; - case "surfaceSelect": - self.displaySurface( e.target.value ); - break; - case "translucentRadio": - self.setHalosVisible(false); - break; - case "halosRadio": - self.setHalosVisible(true); - break; - default: - ; - } - - }); - - this._controlsReady = true; - - Biojs.console.log("_buildControls done"); - }, - - _controlsAreVisible: function () { - return this._controlsContainer.find('.toggle.collapse').is(':visible'); - }, - - _toggleControls: function(){ - - if ( this._controlsAreVisible() ) { - this._controlsContainer.find('.toggle.collapse').click(); - } else { - this._controlsContainer.find('.toggle.expand').click(); - } - }, - - _addControl: function(html){ - this._controlsDiv.append( html ); - }, - - _getDisplayStyle: function ( text ) { - if (text == Biojs.Protein3D.STYLE_CARTOON ) { - - return "hide null; select all; spacefill off; wireframe off; backbone off;" + - " cartoon on; " + - " select ligand; wireframe 0.16;spacefill 0.5; color cpk; " + - " select *.FE; spacefill 0.7; color cpk ; " + - " select *.CU; spacefill 0.7; color cpk ; " + - " select *.ZN; spacefill 0.7; color cpk ; " + - " select all; "; - } - else if (text == Biojs.Protein3D.STYLE_BACKBONE ) { - - return "hide null; select all; spacefill off; wireframe off; backbone 0.4;" + - " cartoon off; " + - " select ligand; wireframe 0.16;spacefill 0.5; color cpk; " + - " select *.FE; spacefill 0.7; color cpk ; " + - " select *.CU; spacefill 0.7; color cpk ; " + - " select *.ZN; spacefill 0.7; color cpk ; " + - " select all; "; - - } else if (text == Biojs.Protein3D.STYLE_CPK ) { - - return "hide null; select all; spacefill off; wireframe off; backbone off;" + - " cartoon off; cpk on;" + - " select ligand; wireframe 0.16;spacefill 0.5; color cpk; " + - " select *.FE; spacefill 0.7; color cpk ; " + - " select *.CU; spacefill 0.7; color cpk ; " + - " select *.ZN; spacefill 0.7; color cpk ; " + - " select all; "; - - } - else if (text == Biojs.Protein3D.STYLE_LIGANDS ) { - return "restrict ligand; cartoon off; wireframe on; display selected;"+ - " select *.FE; spacefill 0.7; color cpk ; " + - " select *.CU; spacefill 0.7; color cpk ; " + - " select *.ZN; spacefill 0.7; color cpk ; " + - " select all; "; - } - - else if (text == Biojs.Protein3D.STYLE_LIGANDS_POCKET ) { - return " select within (6.0, true, ligand); cartoon off; wireframe on; backbone off; display selected; " + - " select *.FE; spacefill 0.7; color cpk ; " + - " select *.CU; spacefill 0.7; color cpk ; " + - " select *.ZN; spacefill 0.7; color cpk ; " + - " select all; "; - } - else if (text == Biojs.Protein3D.STYLE_BALL_STICK ) { - - return "hide null; restrict not water; wireframe 0.2; spacefill 25%;" + - " cartoon off; backbone off; " + - " select ligand; wireframe 0.16; spacefill 0.5; color cpk; " + - " select *.FE; spacefill 0.7; color cpk ; " + - " select *.CU; spacefill 0.7; color cpk ; " + - " select *.ZN; spacefill 0.7; color cpk ; " + - " select all; "; - - } else { - return undefined; - } - }, - - _getDisplayColor: function ( text ) { - if ( text == Biojs.Protein3D.COLOR_BY_CHAIN ) { - return "hide null; select all; cartoon on; wireframe off; spacefill off; color chain; select ligand; wireframe 0.16; spacefill 0.5; color chain ; select all; "; - } - else if ( text == Biojs.Protein3D.COLOR_BY_TEMPERATURE ) { - return "hide null; select all;spacefill off; wireframe off; backbone 0.4; cartoon off; set defaultColors Jmol; color relativeTemperature; color cartoon relateiveTemperature select ligand;wireframe 0.16;spacefill 0.5; color cpk ;; select all; " ; - } - else if ( text == Biojs.Protein3D.COLOR_RAINBOW ){ - return "hide null; select all; set defaultColors Jmol; color group; color cartoon group; select ligand;wireframe 0.16;spacefill 0.5; color cpk ; select all; " ; - } - else if ( text == Biojs.Protein3D.COLOR_SECONDARY_STRUCTURE ){ - return "hide null; select all; set defaultColors Jmol; color structure; color cartoon structure;select ligand;wireframe 0.16;spacefill 0.5; color cpk ;; select all; " ; - } - else if ( text == Biojs.Protein3D.COLOR_BY_ELEMENT ){ - return "hide null; select all; set defaultColors Jmol; color cpk; color cartoon cpk; select ligand;wireframe 0.16; spacefill 0.5; color cpk ; select all; " ; - } - else if ( text == Biojs.Protein3D.COLOR_BY_AMINO_ACID ){ - return "hide null; select all; set defaultColors Jmol; color amino; color cartoon amino; select ligand;wireframe 0.16;spacefill 0.5; color cpk ;; select all; " ; - } - else if ( text == Biojs.Protein3D.COLOR_HIDROPHOBICITY ){ - return "hide null; set defaultColors Jmol; select hydrophobic; color red; color cartoon red; select not hydrophobic ; color blue ; color cartoon blue; select ligand;wireframe 0.16;spacefill 0.5; color cpk ;; select all; " ; - } else { - return undefined; - } - }, - - _getDisplaySurface: function ( text ) { - if ( text == Biojs.Protein3D.SURFACE_NONE ){ - return "select all; isosurface off; select none;"; - } - else if ( text == Biojs.Protein3D.SURFACE_ACCESSIBLE ){ - return "select all; isosurface sasurface 1.2; color isoSurface translucent 0.8; select none;"; - } - else if ( text == Biojs.Protein3D.SURFACE_EXCLUDED ){ - return "select all; isosurface solvent 1.2; color isoSurface translucent 0.8; select none;"; - } - else if ( text == Biojs.Protein3D.SURFACE_CAVITIES ){ - return "select all; isosurface cavity 1.2 10; color isoSurface translucent 0.8; select none;"; - } else { - return undefined; - } - }, - - toString: function() { - return "Biojs.Protein3D"; - }, - /* - * Function: Biojs.Protein3D._functionCbName - * Purpose: enable controls an triggers the loading pdb file event. - * It is invoked by JmolApplet. - * Returns: - - * Inputs: - * appletId -> {string} Applet identifier. - * url -> {string} URL of the loaded file (full path+filename). - * file -> {string} the filename of the loaded file (without the path). - * title -> {string} the internal title of the model in the loaded file. - * message -> {string} any error messages generated. - * code -> {int} A numeric code: - * 3 when the file loaded successfully, - * 0 when the model was zapped, - * -1 when the loading failed. - * formerFrame -> {string} a text string with the frame - * number prior to loading the current model, in file.model syntax - * (for example, "3.1" or "1.1 - 3.31" if a whole range of models was framed). - * frame -> {string} A text string with the last frame number after loading the current model, - * in file.model syntax. - */ - _loadStructCallback: function ( appletId, url, file, title, message, code, formerFrame, frame ) { - - Biojs.console.log("executing _loadStructCallback for " + appletId); - - switch (code) { - case 3 : result = 'success'; break; - case 0 : result = 'zapped'; break; - case -1 : result = 'failure'; break; - default : result = 'undefined'; break; - } - - // Ignore the execution of the callback on replacing pdb file. - if ( "zapped" != result ) { - var instanceId = parseInt( appletId.replace("jmolApplet",'') ); - var instance = Biojs.getInstance(instanceId); - - if ( "success" == result ) { - instance.showControls(); - instance.displayAntialias(instance.opt.antialias); - instance.rotate(instance.opt.rotate); - } - - instance.raiseEvent(Biojs.Protein3D.EVT_ON_PDB_LOADED, { - "file": title, - "result": result, - "message": message - }); - - } - - } - - -},{ - // - // Coloring Schemes - // - COLOR_BY_CHAIN: "By Chain", - COLOR_SECONDARY_STRUCTURE: "Secondary Structure", - COLOR_RAINBOW: "Rainbow", - COLOR_BY_ELEMENT: "By Element", - COLOR_BY_AMINO_ACID: "By Amino Acid", - COLOR_BY_TEMPERATURE: "By Temperature", - COLOR_HIDROPHOBICITY: "Hidrophobicity", - // - // Surfaces - // - SURFACE_NONE: "None", - SURFACE_ACCESSIBLE: "Solvent Accessible", - SURFACE_EXCLUDED: "Solvent Excluded", - SURFACE_CAVITIES: "Cavities", - // - // Drawing Style - // - STYLE_CARTOON: "Cartoon", - STYLE_BACKBONE: "Backbone", - STYLE_CPK: "CPK", - STYLE_BALL_STICK: "Ball and Stick", - STYLE_LIGANDS: "Ligands", - STYLE_LIGANDS_POCKET: "Ligands and Pocket", - // - // Events - // - EVT_ON_PDB_LOADED: "onPdbLoaded", - EVT_ON_SELECTION: "onSelection" -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DCanvas.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DCanvas.js deleted file mode 100755 index 0a2b4ac465..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DCanvas.js +++ /dev/null @@ -1,289 +0,0 @@ -/** - * Pdb file 3D viewer component using JSMol and Canvas HTML5 technology if available (downgrade to Applet technology otherwise). - * - * - * @class - * @extends Biojs.Protein3D - * - * @author Francesco Talo - * @version 1.0.0 - * @category 3 - * - * @requires jQuery Core 1.8.2 (not necessaty if you import the JSmol.min.js) - * @dependency - * - * @requires jsMol 14.0.2 - * @dependency - * - * @requires jsMol 14.0.2 (use this if you import separately jQuery) - * @dependency - - * - * - * @requires jsMol 14.0.2 (use this if you don't import already jQuery in your application) - * @dependency - * - * - * - * @requires Protein3D CSS - * @dependency - * - * @param {Object} options An object with the options for Biojs.Protein3DCanvas component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {int} [width=597] - * Width in pixels. - * - * @option {int} [height=400] - * Height in pixels. - * - * @option {string} [jsmolFolder="{BIOJS_HOME}/dependencies/jmol-12.0.48"] - * Relative path of the jSMol library. - - * @option {string} [use="HTML5 JAVA"] - * This string determines the various options to be tried (HTML5, Java Applet and surrogates) and the order in which to try them. - * The default setting is HTML5 CANVAS and then Java if Canvas is not available. - * - * @option {string} [urlProxy="{BIOJS_HOME}/dependencies/jsmol-14.0.2/jsmol/proxy/jsmol.jsp"] - * Path of the proxy to use for transformation of the gzip file in base64 files for MSIE and CHROME. - * - * @option {string} [loadingStatusImage="{BIOJS_HOME}/css/images/ajax-loader-1.gif"] - * Relative path of the image to be displayed on loading status. - * - * @option {string} [unpolarColor="salmon"] - * This value is used by displayUnpolar() method for coloring hydrophobic residues. - * - * @option {string} [negativeColor="red"] - * This value is used by displayNegative() method for coloring acidic(-) residues. - * - * @option {string} [positiveColor="blue"] - * This value is used by displayNegative() method for coloring basic(+) residues. - * - * @option {string} [polarColor="yellow"] - * This value is used by displayNegative() method for coloring hydrophylic residues. - * - * @option {string} [backgroundColor="white"] - * Background color of the jMol applet - * - * @option {bool} [enableControls=true] - * Enable for showing the control panel. If value is 'false', it disables both methods showControls and hideControls. - - @option {bool} [viewControls=true] - * Show/Hide controls panel after the loading of the PDB structure. - * - * - * @example - * // Example of loading a pdb file by means of an HTTP request to get the zip file - * // 'http://www.rcsb.org/pdb/files/"+pdb+".pdb.gz' containing the structure of the protein. - * //The file id downloaded form the server as a zipped file and then it's unzipped on the client - * var instance = new Biojs.Protein3DCanvas({ - * target: "YourOwnDivId", - * jsmolFolder: '/bioJs/dependencies/jsmol-14.0.2/jsmol', - * height: 440, - * width: 440, - * style: Biojs.Protein3D.STYLE_CARTOON, - * use:"HTML5 JAVA", - * urlProxy:"/bioJs/dependencies/jsmol-14.0.2/jsmol/proxy/jsmol.jsp", - * viewControls: true - * }); - * instance.onPdbLoaded( - * function( objEvent ) { - * alert('PDB LOADED'); - * } - * ); - * //trigger to download the zip file containing the pdb structure from the server and unzip the file on the client - * instance.setPdb('2al6'); - * - * - */ -Biojs.Protein3DCanvas = Biojs.Protein3D.extend( -/** @lends Biojs.Protein3DCanvas# */ -{ - constructor: function (options) { - - this.opt.jmolFolder= this.opt.jsmolFolder; - Biojs.Protein3D.call(this, options); - - //JMol configuraion - if ( this.opt.use == undefined ) { - Jmol.Info["use"] = "HTML5 JAVA"; - - }else{ - Jmol.Info["use"] = this.opt.use; - } - - - if ( this.opt.proxyUrl != undefined ) { - Jmol.Info["serverURL"] = this.opt.proxyUrl; - } - - Jmol.Info["jarPath"] = this.opt.jsmolFolder+"/java", - Jmol.Info["jarFile"] = this.opt.jsmolFolder+"/java/JmolApplet0.jar", - Jmol.Info["j2sPath"] = this.opt.jsmolFolder+"/j2s"; - - Jmol.Info["addSelectionOptions"]= false; - Jmol.Info["color"]= "#ffffff"; - Jmol.Info["debug"]= false; - Jmol.Info["memoryLimit"]= 512; // Java only - Jmol.Info["readyFunction"]= null; - Jmol.Info["src"]= null; - Jmol.Info["disableInitialConsole"]=true; - Jmol.Info["disableJ2SLoadMonitor"]= true; - Jmol.Info["deferUncover"]=true; - Jmol.Info["deferApplet"]= false; - }, - - /** - * Default options (and its values) for the Protein3DCanvas component. - * @name Biojs.Protein3DCanvas-opt - * @type Object - */ - opt: - { - use: "HTML5 JAVA", - jsmolFolder: "../biojs/dependencies/jsmol-14.0.2/jsmol", - viewControls: true - }, - - /** - * Array containing the supported event names - * @name Biojs.Protein3DCanvas-eventTypes - */ - eventTypes : [], - - /** - * Sets the pdb file to be displayed. - * Also triggers the event whenever a new pdb file is loaded. - * It demands entirely to JSMol the download from the server and unzip of of the PDB file on the browser - * - * @param The pdb id to use to download the gz file from the server http://www.rcsb.org/pdb/files/"+pdb+".pdb.gz. - * - * @example - * var instance = new Biojs.Protein3DCanvas({ - * target: "YourOwnDivId", - * jsmolFolder: '/bioJs/dependencies/jsmol-14.0.2/jsmol', - * height: 440, - * width: 440, - * style: Biojs.Protein3D.STYLE_CARTOON, - * use:"HTML5 JAVA", - urlProxy:"/bioJs/dependencies/jsmol-14.0.2/jsmol/proxy/jsmol.jsp", - viewControls: true - * }); - * - * instance.onPdbLoaded( - * function( objEvent ) { - * alert('PDB LOADED'); - * } - * ); - * - * //trigger the downloading of the zip containing the pdb file from the server and unzip the file on the client - * instance.setPdb('2al6'); - * - * - */ - setPdb: function( pdb ){ - Biojs.console.log("LOADING pdb content"); - - var self = this; - - var surfaceCmd = this._getDisplaySurface( this.opt.surface ); - var styleCmd = this._getDisplayStyle( this.opt.style ); - var colorSchemeCmd = this._getDisplayColor( this.opt.colorScheme ); - - var scr = colorSchemeCmd + styleCmd + surfaceCmd + this._getSelectionScript( this._selection ); - - this.showLoadingImage(true); - - if ( this._jmolAppletInitialized ) { - this.reset(); - } - Jmol.setDocument(0); - htmlContent = jmolApplet([self._appletContainer.width(), self._appletContainer.height()], " load 'http://www.rcsb.org/pdb/files/"+pdb+".pdb.gz';"+ scr, self.getId()); - - this._appletContainer.html(Jmol.getAppletHtml(eval(htmlContent._id))); - - this._jmolAppletInitialized = true; - - Biojs.console.log("setPdb() ending"); - }, - - toString: function() { - return "Biojs.Protein3DCanvas"; - }, - - /* - * Function: Biojs.Protein3D._functionCbName - * Purpose: enable controls an triggers the loading pdb file event. - * It is invoked by JmolApplet. - * Returns: - - * Inputs: - * appletId -> {string} Applet identifier. - * url -> {string} URL of the loaded file (full path+filename). - * file -> {string} the filename of the loaded file (without the path). - * title -> {string} the internal title of the model in the loaded file. - * message -> {string} any error messages generated. - * code -> {int} A numeric code: - * 3 when the file loaded successfully, - * 0 when the model was zapped, - * -1 when the loading failed. - * formerFrame -> {string} a text string with the frame - * number prior to loading the current model, in file.model syntax - * (for example, "3.1" or "1.1 - 3.31" if a whole range of models was framed). - * frame -> {string} A text string with the last frame number after loading the current model, - * in file.model syntax. - */ - - _loadStructCallback: function ( appletId, url, file, title, message, code, formerFrame, frame ) { - -Biojs.console.log("executing _loadStructCallback for " + appletId); - - switch (code) { - case 3 : result = 'success'; break; - case 0 : result = 'zapped'; break; - case -1 : result = 'failure'; break; - default : result = 'undefined'; break; - } - - // Ignore the execution of the callback on replacing pdb file. - - if ( "zapped" != result ) { - //uncover the loading image - var instanceId = parseInt( appletId.replace("jmolApplet",'') ); - var instance = Biojs.getInstance(instanceId); - - if ( "success" == result ) { - instance.displayAntialias(instance.opt.antialias); - instance.rotate(instance.opt.rotate); - } - - instance.showLoadingImage(false); - if (instance.opt.viewControls){ - instance.showControls(); - instance._controlsContainer.css('display','block'); - jmolResizeApplet([ instance._container.width() - instance._controlsContainer.outerWidth(), instance._container.height()], instance.getId()); - instance._appletContainer.css('float','right'); - - }else{ - instance.hideControls(); - instance._controlsContainer.css('display','none'); - jmolResizeApplet([ instance._container.width(), instance._container.height()], instance.getId()); - instance._appletContainer.css('float','left'); - } - - instance.raiseEvent(Biojs.Protein3D.EVT_ON_PDB_LOADED, { - "file": title, - "result": result, - "message": message - }); - - instance._appletContainer.css('display','block'); - - - } - - - } - -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DUniprot.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DUniprot.js deleted file mode 100755 index 5a261c5035..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DUniprot.js +++ /dev/null @@ -1,582 +0,0 @@ -/** - * - * Protein viewer to show the pdb files aligned to an Uniprot Accession - * - * @class - * @extends Biojs.Protein3DWS - * - * @author John Gomez - * @version 1.0.0 - * @category 2 - * - * @param {Object} options An object with the options for the component. - * - * @option {string} [proteinId] - * Uniprot identifier of the protein. - * - * @option {string} [mapping=Biojs.Protein3DUniprot.ALIGNMENTS_UNIPROT_MAPPING] - * Mapping function to obtain the protein's alignments: - *-
- *
Structures for ' + self.opt.proteinId + '
' + ''); - jQuery('#' + self.opt.target + ' #pdbFile_select').val(pdb); - jQuery('#' + self.opt.target + ' #pdbFile_select').change(function() { - self._onAlignmentSelectionChange(); - }); - jQuery('#' + self.opt.target).find('#pdbStructures').show(); - var alignmentId = pdb; - var pdbId = alignmentId.substring(0, pdb.indexOf('.')).toLowerCase(); - var alignment = self.getAlignmentsByPdb(alignmentId); - if (alignment.hasOwnProperty(alignmentId)) { - var start = alignment[alignmentId][1].start; - var end = alignment[alignmentId][1].end; - self.raiseEvent('onPdbSelected', {"pdbId": pdbId,"alignmentId": alignmentId,"start": start,"end": end}); - } - self._alignmentsJustArrived = false; - } - }); - - if (this.opt.proteinId != undefined) { - var proteinId = this.opt.proteinId; - this.opt.proteinId = ''; - this.setProtein(proteinId); - } - }, - - opt: { - proteinId: undefined, - mapping: 'http://www.ebi.ac.uk/pdbe-apps/widgets/unipdb?uniprot=', - proxyUrl: '../biojs/dependencies/proxy/proxy.php' - }, - - eventTypes : [ - /** - * @name Biojs.Protein3DUniprot#onPdbSelected - * @event - * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} pdbId The name of the loaded file. - * @eventData {string} alignmentId Alignment identifier. - * @eventData {string} start Starting base index. - * @eventData {string} end Ending base index. - * - * @example - * instance.onPdbSelected( - * function( e ) { - * alert( "Alignment " + e.alignmentId + " selected. Start: " + e.start + " End: " + e.end ); - * } - * ); - * - * */ - "onPdbSelected" - ], - - _aligments: undefined, - - - /** - * Get all pdb files for a given uniprot id. - * Also triggers the event that a new pdb file was loaded. - * - * @option {string} proteinId Uniprot identifier of the protein. - * - * @example - * instance.setProtein("P99999"); - * - */ - setProtein: function(proteinId){ - if (proteinId != this.opt.proteinId) { - this.opt.proteinId = proteinId; - this._selection = undefined; - this._minStart = Number.MAX_VALUE; - this._maxEnd = 0; - this._alignments = undefined; - - if ( this.opt.mapping == Biojs.Protein3DUniprot.ALIGNMENTS_UNIPROT_MAPPING ) { - this._requestAligmentsFromUniprot(); - } else if ( this.opt.mapping == Biojs.Protein3DUniprot.ALIGNMENTS_PDBe_MAPPING ) { - this._requestAligmentsFromPdbe(); - } else { - throw "Error in mapping function. this.opt.mapping="+this.opt.mapping; - } - } - }, - - // makes an ajax request to get the pdb files for the given uniprot id - _requestAligmentsFromUniprot: function(){ - var self = this; - jQuery.ajax({ - url: self.opt.mapping + self.opt.proteinId, - data: {biojsmapping:'1', varname:'pdbmappings'}, - dataType: "script", - crossDomain: true, - success: function(){ - Biojs.console.log("SUCCESS: data received"); - self._alignments = pdbmappings; - //change proteinId to the one retrieved from pdbmappings (in case it is a protein id rather than an accession) - //Warning: Here we suppose that position [0] always give the info for the pdb and position [1] always give the info for the accession - for (obj in pdbmappings) { - if ( pdbmappings[obj][1].intObjectId != self.opt.proteinId ) { - self.opt.proteinId = pdbmappings[obj][1].intObjectId; - } - break; - } - self._aligmentsArrived(); - }, - async: false, - error: function(qXHR, textStatus, errorThrown){ - Biojs.console.log("ERROR: requesting "+this.data); - self.raiseEvent('onRequestError', {message: textStatus}); - } - }); - }, - - // makes an ajax request to get the pdb files for the given uniprot id - _requestAligmentsFromPdbe: function(){ - var self = this; - - jQuery.ajax({ - url: self.opt.proxyUrl, - dataType: "text", - data: { url: self.opt.mapping + self.opt.proteinId + '/'}, - success: function(data){ - Biojs.console.log("SUCCESS: data received"); - self._parseResponse(data); - }, - async: false, - error: function(qXHR, textStatus, errorThrown){ - Biojs.console.log("ERROR: requesting "+this.data); - self.raiseEvent('onRequestError', { message: textStatus}); - } - }); - }, - - // parses the xml file from the request and stores the information in an easy to access way - _parseResponse: function (text) { - this._alignments = {}; - var i = 0; - var self = this; - var data; - - Biojs.console.log("Decoding " + text); - - if ( !Biojs.Utils.isEmpty(text) ) { - - try { - data = jQuery.parseJSON(text); - - } catch (e) { - Biojs.console.log("Error decoding response: " + e.message ); - } - - for ( var i in data ) { - - try { - var segments = []; - - segments.push({ - "start": data[i].pdb_range[0], - "end": data[i].pdb_range[1], - "intObjectId": data[i].pdbid + '.' + data[i].chain } ); - - segments.push({ - "start": data[i].uniprot_range[0], - "end": data[i].uniprot_range[1], - "intObjectId": data[i].uniprot_acc } ); - - self._alignments[ segments[0].intObjectId ] = segments; - - if (self._minStart > segment[1].start) { - self._minStart = segment[1].start; - } - - if (self._maxEnd < segment[1].end) { - self._maxEnd = segment[1].end; - } - - } catch (e) { - Biojs.console.log("Error decoding alignment: " + e.message ); - } - } - } - - Biojs.console.log("Alignments decoded:"); - Biojs.console.log(self._alignments); - this._aligmentsArrived(); - }, - - // adds all available pdb files to a dropdown box - // or displays the fact that there are no pdb files for the given id - _aligmentsArrived: function(){ - - this._alignmentsJustArrived = true; - - var alignments = this._filterAligmentsBySelection(this._selection); - - if (!Biojs.Utils.isEmpty(alignments)) { - var pdb = undefined; - for (pdb in alignments) { - break; - } - - Biojs.console.log("Requesting pdb " + pdb); - this.requestPdb(pdb.substring(0, pdb.indexOf('.')).toLowerCase()); - - } else { - this._container.html("No structural information for " + this.opt.proteinId ); - this.raiseEvent('onRequestError', { message: "No structural information available for " + this.opt.proteinId }); - } - }, - - _onAlignmentSelectionChange: function(){ - var pdb = jQuery('#pdbFile_select').val(); - - if ( pdb != undefined ) { - - var alignmentId = pdb.substring(0, pdb.indexOf(' ')); - var pdbId = alignmentId.substring(0, pdb.indexOf('.')).toLowerCase(); - - var alignment = this.getAlignmentsByPdb(alignmentId); - - if ( alignment.hasOwnProperty( alignmentId ) ) { - var start = alignment[alignmentId][1].start; - var end = alignment[alignmentId][1].end; - - this.raiseEvent('onPdbSelected', { - "pdbId": pdbId, - "alignmentId": alignmentId, - "start": start, - "end": end - }); - } - - this.requestPdb(pdbId); - - } else { - Biojs.console.log("No structural information available for "+this.opt.proteinId); - } - }, - - /** - * Request and display a pdb file by means of its identifier. - * - * @param {string} pdbId Pdb file identifier. - * - * @example - * instance.requestPdb('3t6f'); - * - */ - requestPdb: function(pdbId) { - var self = this; - - self.showLoadingImage(); - self.opt.id = pdbId; - - jQuery.ajax({ - url: self.opt.proxyUrl, - data: 'url='+self.opt.pdbUrl+'/pdb'+pdbId+'.ent', - dataType: 'text', - success: function (pdbContent) { - Biojs.console.log("DATA ARRIVED"); - //reset the PDB selected area if a uniprot selection has been made already - if (self._uniprotSelection != undefined) { - self._selection = self._translateSelection(self._uniprotSelection); - } - self.setPdb(pdbContent); - }, - error: function(qXHR, textStatus, errorThrown){ - self.raiseEvent('onRequestError', {message: textStatus}); - } - }); - }, - - - /** - * Get the available alignments for the current protein filtered by selection (PDB files containing a part of the requested region). - * - * @example - * // Selection of the region in the interval [100,150]. - * instance.setSelection({start: 120, end: 150}); - * - * @example - * // Get the alignments matching with bases 4, 8 and 100. - * alert ( instance.filterAlignments([4,8,100]) ); - * - * @param {Object|Array} selection Can be either a plain object or an array. - * If object, it must have the fields start and end; Where "start" is greater than or equal to "end". - * If array, it must contain numbers representing the positions to be selected. - */ - getAlignmentsBySelection: function ( selection ) { - - var alignments = this._alignments; - - if ( selection != undefined ) { - this._filterAligmentsBySelection(selection); - } - - return alignments; - }, - - /** - * Get the available alignments for the current protein filtered by selection (PDB files containing a part of the requested region). - * - * @example - * // Get the alignments matching with bases 4, 8 and 100. - * alert ( instance.getAlignmentsByPdb("2F73") ); - * - * @param {string} pdb identifier. - * @returns {Object} . - * - */ - getAlignmentsByPdb: function ( pdbId ) { - - var alignments = {}; - - for (al in this._alignments) { - if ( this._alignments[al][0].intObjectId.indexOf( pdbId ) != -1 ) { - alignments[this._alignments[al][0].intObjectId] = this._alignments[al]; - } - } - - Biojs.console.log("Alignments for pdb " + pdbId ); - Biojs.console.log(alignments); - - return alignments; - }, - - /** - * Filters the alignments available for the current protein: Only PDB files containing a part of the requested region - * are selectable. The specified region is highlighted in the displayed PDB file. - * - * @example - * // Selection of the region in the interval [100,150]. - * instance.filterAlignments({start: 120, end: 150}); - * - * @param {Object|Array} selection Can be either a plain object or an array. - * If object, it must have the fields start and end; Where "start" is greater than or equal to "end". - * If array, it must contain numbers representing the positions to be selected. - */ - filterAlignments: function ( selection ) { - - var alignments = this._filterAligmentsBySelection(selection); - var selectedAlignment = jQuery('#pdbFile_select').val(); - - // Update the drop-down box showing the filtered alignments - jQuery('#pdbFile_select').html(this._createOptions(alignments)); - - // Select an alignment - if ( alignments.hasOwnProperty( selectedAlignment.slice(0,selectedAlignment.indexOf(' '))) ) { - // Select current alignment if it belongs to filtered alignments - jQuery('#pdbFile_select').val(selectedAlignment); - - } else { - // Select any alignment - for ( a in alignments ){ - jQuery('#pdbFile_select').val(a); - break; - } - this._onAlignmentSelectionChange(); - } - - // invoke setSelection on the parent - this.base(selection); - }, - - _createOptions: function(alignments) { - var pdbOptions = ""; - for (pdb in alignments) { - text = pdb + " (" + alignments[pdb][1].start + ".." + alignments[pdb][1].end + ")"; - pdbOptions += ''; - } - Biojs.console.log("_createOptions: " + pdbOptions); - return pdbOptions; - }, - - _filterAligmentsBySelection: function(selection) { - var alignments = undefined; - if (selection instanceof Array) { - alignments = {}; - for (al in this._alignments) { - var uniprot = this._alignments[al][1]; - for (i in selection) { - if (selection[i] >= uniprot.start && selection[i] <= uniprot.end) { - alignments[this._alignments[al][0].intObjectId] = this._alignments[al]; - break; - } - } - } - } else if (selection instanceof Object) { - alignments = {}; - var i = 0; - for (al in this._alignments) { - var uniprot = this._alignments[al][1]; - if ((selection.start >= uniprot.start && selection.start <= uniprot.end) || (selection.end >= uniprot.start && selection.end <= uniprot.end) || (selection.start < uniprot.start && selection.end > uniprot.end)) { - alignments[this._alignments[al][0].intObjectId] = this._alignments[al]; - i++; - } - } - } else { - alignments = this._alignments; - } - Biojs.console.log("Filtered alignments:"); - Biojs.console.log(alignments); - return alignments; - }, - - /** - * Selection of a region using the uniprot positions. - * - * @example - * // Selection of the region in the interval [100,150]. - * instance.setSelection({start: 100, end: 150}); - * - * @example - * // Selection of the positions 4, 8 and 100. - * instance.setSelection([4,8,100]); - * - * @param {Object|Array} selection Can be either a plain object or an array. - * If object, it must have the fields start and end; Where "start" is greater than or equal to "end". - * If array, it must contain numbers representing the positions to be selected. - */ - setSelection: function ( s ) { - this._uniprotSelection = Biojs.Utils.clone(s); - var selection = this._translateSelection(s); - this.base(selection); - }, - - _translateSelection: function (s) { - //Selection in Uniprot regions needs to be translated into PDB regions - var selection = Biojs.Utils.clone(s); - var alignmentId = this.getCurrentAlignmentId(); - var proteinId = this.getCurrentProteinId(); - var segment = this.getAlignmentsByPdb(alignmentId)[alignmentId]; - var offset = 0; - for ( i in segment ) { - if ( segment[i].intObjectId == alignmentId ) { - pdbSegment = segment[i]; - } else if ( segment[i].intObjectId == proteinId ) { - uniprotSegment = segment[i]; - } - } - offset = uniprotSegment.start - pdbSegment.start; - if ( selection instanceof Array ) { - var toDelete = new Array(selection.length); - for ( i in selection ) { - if (selection[i] instanceof Object) {//a range - if ( (selection[i].start > uniprotSegment.end) || (selection[i].end < uniprotSegment.start) ){ - //we first check whether it is completely out of the range - selection[i].start = 0; - selection[i].end = 0; - toDelete[i] = true; - } else if ( (selection[i].start >= uniprotSegment.start) && (selection[i].end <= uniprotSegment.end) ){ - selection.start -= offset; - selection.end -= offset; - toDelete[i] = false; - } else if ( (selection[i].start < uniprotSegment.start) && (selection[i].end <= uniprotSegment.end) ){ - selection[i].start = pdbSegment.start - 0; - selection[i].end -= offset; - toDelete[i] = false; - } else if ( (selection[i].start >= uniprotSegment.start) && (selection[i].end > uniprotSegment.end) ){ - selection[i].start -= offset; - selection[i].end = pdbSegment.end - 0; - toDelete[i] = false; - } else if ( (selection[i].start < uniprotSegment.start) && (selection[i].end > uniprotSegment.end) ){ - selection[i].start = pdbSegment.start - 0 - selection[i].end = pdbSegment.end - 0; - toDelete[i] = false; - } - } else { //a position - if ( (uniprotSegment.start <= selection[i]) && (selection[i] <= uniprotSegment.end) ) { - selection[i] -= offset; - toDelete[i] = false; - } else { - toDelete[i] = true; - } - } - } - var deleted = 0; - for (j in toDelete) { - if (toDelete[j] == true) { - selection.splice(j-deleted,j-deleted); - deleted += 1; - } - } - } else if ( selection instanceof Object && selection.start <= selection.end ){ - if ( (selection.start > uniprotSegment.end) || (selection.end < uniprotSegment.start) ){ - //we first check whether it is completely out of the range - selection.start = 0; - selection.end = 0; - this.removeSelection(); - } else if ( (selection.start >= uniprotSegment.start) && (selection.end <= uniprotSegment.end) ){ - selection.start -= offset; - selection.end -= offset; - } else if ( (selection.start < uniprotSegment.start) && (selection.end <= uniprotSegment.end) ){ - selection.start = pdbSegment.start - 0; - selection.end -= offset; - } else if ( (selection.start >= uniprotSegment.start) && (selection.end > uniprotSegment.end) ){ - selection.start -= offset; - selection.end = pdbSegment.end - 0; - } else if ( (selection.start < uniprotSegment.start) && (selection.end > uniprotSegment.end) ){ - selection.start = pdbSegment.start - 0 - selection.end = pdbSegment.end - 0; - } - } - return (selection); - }, - - getCurrentAlignmentId: function () { - var selectedValue = jQuery('#pdbFile_select').val(); - var alignmentId = selectedValue.substring(0, selectedValue.indexOf(' ')); - //var pdbId = alignmentId.substring(0, pdb.indexOf('.')).toLowerCase(); - return alignmentId; - }, - - getCurrentProteinId: function () { - return this.opt.proteinId; - }, - - /** - * Removes selection in the current displayed structure. - * - * @example - * instance.removeSelection(); - */ - removeSelection: function() { - this.base(); - } -}, { - - // Mapping services - ALIGNMENTS_UNIPROT_MAPPING: 'http://www.ebi.ac.uk/pdbe-apps/widgets/unipdb?uniprot=', - ALIGNMENTS_PDBe_MAPPING: 'http://wwwdev.ebi.ac.uk/pdbe-apps/jsonizer/mappings/best/all/' - -}); diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DWS.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DWS.js deleted file mode 100755 index 48746b433c..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Protein3DWS.js +++ /dev/null @@ -1,106 +0,0 @@ -/** - * - * Extension of the pdb file viewer getting data from a web service - * - * @class - * @extends Biojs.Protein3D - * - * @author John Gomez - * @version 1.0.0 - * @category 2 - * - * @requires Server side proxy - * - * @param {Object} options An object with the options for the component. - * - * @option {string} [pdbUrl="http://www.ebi.ac.uk/pdbe/entry-files"] - * Url of the web service in order to require the pdb file. - * - * @option {string} [id] - * Identifier of the pdb to be displayed (i.e. '3nuc' to require 3nuc.pdb file). You can load another pbd by using requestPdb method. - * - * @option {string} [proxyUrl="../biojs/dependencies/proxy/proxy.php"] - * Server side proxy server. - * - * @example - * - * var instance = new Biojs.Protein3DWS({ - * target: 'YourOwnDivId', - * id: '3nuc' - * }); - * - * - */ -Biojs.Protein3DWS = Biojs.Protein3D.extend( -/** @lends Biojs.Protein3DWS# */ -{ - constructor: function(options){ - this.base(options); - //constructor of Biojs.Protein3DWS - if (this.opt.id !== undefined) { - this.requestPdb(this.opt.id); - } - }, - - opt: { - id: undefined, - pdbUrl: 'http://www.ebi.ac.uk/pdbe/entry-files', - proxyUrl: '../biojs/dependencies/proxy/proxy.php' - }, - - eventTypes : [ - /** - * @name Biojs.Protein3DWS#onRequestError - * @event - * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} file The name of the loaded file. - * @eventData {string} result A string with either value 'success' or 'failure'. - * @eventData {string} message Error message in case of result be 'failure'. - * - * @example - * instance.onRequestError( - * function( e ) { - * alert( e.message ); - * } - * ); - * - * */ - "onRequestError" - ], - - /** - * Request and display a pdb file by means of its identifier. - * - * @param {string} pdbId Pdb file identifier. - * - * @example - * instance.requestPdb('3t6f'); - * - */ - requestPdb: function(pdbId) { - var self = this; - - self.showLoadingImage(); - self.opt.id = pdbId; - - jQuery.ajax({ - url: self.opt.proxyUrl, - data: 'url='+self.opt.pdbUrl+'/pdb'+pdbId+'.ent', - dataType: 'text', - success: function (pdbContent) { - Biojs.console.log("DATA ARRIVED"); - self.setPdb(pdbContent); - }, - error: function(qXHR, textStatus, errorThrown){ - self.raiseEvent('onRequestError', {message: textStatus}); - } - }); - }, - - getPdbId: function(pdb) { - return opt.id; - } - - -}); \ No newline at end of file diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.ProteinPortafolio.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.ProteinPortafolio.js deleted file mode 100755 index 1d7e978ff9..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.ProteinPortafolio.js +++ /dev/null @@ -1,522 +0,0 @@ -/** - * ProteinPortafolio component shows the description of a protein as well as its PDB alignments if there is any. - * Component shows the PDBLogos of the selected alignment and ables to play with the sequence and - * the 3D draw of the alignment. - * - * @class - * @extends Biojs - * - * @author John Gomez - * @version 1.0.0 - * @category 3 - * - * @requires jQuery Core 1.6.4 - * @dependency - * - * @requires Raphael 2.1.0 - * @dependency - * - * @requires PDBLogos - * @dependency - * - * @requires Sequence - * @dependency - * - * @requires Protein3DWS - * @dependency - * @dependency - * - * @requires jMol 12.0.48 - * @dependency - * - * @requires Protein3D CSS - * @dependency - * - * @requires ProteinPortafolio CSS - * @dependency - * - * @param {Object} options An object with the options for ProteinPortafolio component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} [fontFamily='"Andale mono", courier, monospace'] - * Font list to be applied to the component content. - * - * @option {string} [fontColor="white"] - * HTML color code for the font. - * - * @option {string} [backgroundColor="#7BBFE9"] - * Background color for the entire div content. - * - * @option {Object} [selectionFontColor="white"] - * This color will be used to change the font color of selected text. - * - * @option {Object} [ selectionBackgroundColor="yellow"] - * This color will be used to change the background of selected text. - * - * @option {string} [pdb3DIcon='../biojs/css/images/3d.png'] - * The only PDB icon is able to defines the 3D structure. - * Set source URL for 3D icon - * - * @example - * var instance = new Biojs.ProteinPortafolio({ - * target : "YourOwnDivId", - * accession : 'P99999' - * }); - * - */ -Biojs.ProteinPortafolio = Biojs.extend ( -/** @lends Biojs.ProteinPortafolio# */ -{ - constructor: function (options) { - // In JavaScript "this" always refers to the owner of the function we're executing (http://www.quirksmode.org/js/this.html) - // Let's preserve the reference to 'this' through the variable self. In this way, we can invoke/execute - // our component instead of the object where 'this' is being invoked/executed. - var self = this; - - Biojs.console.enable(); - - // For practical use, create an object with the main DIV container - // to be used in all of the code of our component - this._container = jQuery("#"+self.opt.target); - - this._initialize(); - - if ( !Biojs.Utils.isEmpty( options.accession ) ) { - this.setProtein(options.accession); - } - - }, - - /** - * Default values for the options - * @name Biojs.ProteinPortafolio-opt - */ - opt: { - target: "YourOwnDivId", - accession: "", - mappingUrl: 'http://www.ebi.ac.uk/pdbe-apps/widgets/unipdb?uniprot=', - featuresUrl: 'http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot-summary/features', - proxyUrl: '../biojs/dependencies/proxy/proxy.php', - jmolFolder: '../biojs/dependencies/jmol-12.0.48', - pdb3DIcon: '../biojs/css/images/3d.png', - pdbIconSize: 40 - }, - - /** - * Array containing the supported event names - * @name Biojs.ProteinPortafolio-eventTypes - */ - eventTypes : [ - /** - * @name Biojs.ProteinPortafolio#onClick - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {int} selected Selected character. - * @example - * instance.onClick( - * function( objEvent ) { - * alert("The character " + objEvent.selected + " was clicked."); - * } - * ); - * - * */ - "onClick", - - /** - * @name Biojs.ProteinPortafolio#onPdbSelected - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} alignmentId Identifier . - * @eventData {string} pdbId Selected pdb entry. - * @eventData {int} start Start position of the alignment. - * @eventData {int} end End position of the alignment. - * @example - * instance.onPdbSelected( - * function( e ) { - * alert("Selected " + e.alignmentId + " alignment."); - * } - * ); - * - * */ - "onPdbSelected" - ], - - /** - * Change the font size. Do nothing it no value is provided. - * - * @param {string} [size] The new font size in pixels. - * - * @example - * instance.setSize("72px"); - */ - setSize: function(size) { - - }, - - _initialize: function() { - - this._alpha = jQuery('').appendTo( this._container ); - this._beta = jQuery('').appendTo( this._container ); - - this._header = jQuery('').appendTo( this._alpha ); - this._toolbar = jQuery('').appendTo( this._alpha ); - this._content = jQuery('').appendTo( this._alpha ); - - this._content.attr('id', 'ProteinPortafolio_content_' + this.getId() ); - - this._container.addClass('ProteinPortafolio'); - }, - - _clearAll: function () { - this._header.children().remove(); - this._toolbar.children().remove(); - this._content.children().remove(); - }, - - /** - * Sets the protein accession which changes everything to reflect the new protein information - * - * @param {string} accession The new protein identifier - * - * @example - * instance.setProtein("P07148"); - * - * @example - * instance.setProtein("P12345"); - */ - setProtein: function( accession ) { - - this.opt.accession = accession; - - this._requestAligments(accession, function(alignments){ - - this._alignments = alignments; - - this._container.removeClass('loading'); - - if (!Biojs.Utils.isEmpty(alignments)) { - // Alignments found - this._setHeader( this.opt.accession, this._createPDBSelect(alignments) ); - - } else { - // none alignment found - this._setHeader( this.opt.accession ); - } - }); - - this._showFeatures(accession); - }, - - _requestAligments: function( accession, action ){ - var self = this; - - this._clearAll(); - this._container.addClass('loading'); - - var xhr = jQuery.ajax({ - url: self.opt.mappingUrl + accession, - data: {biojsmapping:'1', varname:'pdbmappings'}, - dataType: "script", - crossDomain: true, - timeout: 5000, - success: function(){ - Biojs.console.log("SUCCESS: data received"); - self._alignments = pdbmappings; - action.call(self,pdbmappings); - }, - async: true, - error: function(qXHR, textStatus, errorThrown){ - Biojs.console.log("ERROR: " + textStatus ); - self.raiseEvent('onRequestError', {message: textStatus}); - action.call(self,{}); - } - }); - }, - - _createPDBSelect: function(alignments) { - var pdbOptions = ""; - for (pdb in alignments) { - text = pdb + " (" + alignments[pdb][1].start + ".." + alignments[pdb][1].end + ")"; - pdbOptions += ''; - } - Biojs.console.log("_createOptions: " + pdbOptions); - return pdbOptions; - }, - - _setHeader: function( accession, mappingsSelector ) { - var self = this; - - if ( mappingsSelector !== undefined ) { - this._header.html("Accession: "+ accession + ", PDB Alignments: " ); - this._onAlignmentSelectionChange(); - this._header.children('select').change( function(){ self._onAlignmentSelectionChange() }); - } else { - this._header.html("Accession: "+ accession + ", No PDB alignments found." ); - } - - this._adjustContentSize(); - - }, - - _onAlignmentSelectionChange: function(){ - - var alignment = this.getCurrentAlignment(); - - if ( !Biojs.Utils.isEmpty(alignment) ) { - - this.raiseEvent('onPdbSelected', { - "pdbId": alignment.pdbId, - "alignmentId": alignment.alignmentId, - "start": alignment.start, - "end": alignment.end - }); - - this._showPDBPrints(alignment.pdbId); - this._showImage(alignment.pdbId); - this._showFeatures(this.opt.accession); - - } else { - Biojs.console.log("No structural information available for " + this.opt.accession ); - } - }, - - _showPDBPrints: function(pdbId) { - - var self = this; - this._toolbar.children().remove(); - this._toolbar.attr('id', 'PDBLogos_toolbar_' + this.getId() ); - - var myprints = new Biojs.PDBLogos({ - target: this._toolbar.attr('id'), - identifier: pdbId, - size: self.opt.pdbIconSize, - pdb3DIcon: self.opt.pdb3DIcon - }); - - myprints.onClick( function(e) { - if ( e.category == "PDBStructure" ) { - self._showProtein3D(); - } else { - window.open( e.printsURL ); - } - }); - - this._adjustContentSize(); - }, - - /** - * Get the available alignments for the current protein filtered by selection (PDB files containing a part of the requested region). - * - * @example - * // Get the alignments matching with bases 4, 8 and 100. - * alert ( instance.getAlignmentsByPdb("2F73") ); - * - * @param {string} pdb identifier. - * @returns {Object} . - * - */ - getAlignmentsByPdb: function ( pdbId ) { - - var alignments = {}; - - for (al in this._alignments) { - if ( this._alignments[al][0].intObjectId.indexOf( pdbId ) != -1 ) { - alignments[this._alignments[al][0].intObjectId] = this._alignments[al]; - } - } - - Biojs.console.log("Alignments for pdb " + pdbId ); - Biojs.console.log(alignments); - - return alignments; - }, - - getCurrentAlignment: function(){ - - var result = {}; - var pdbSelectedValue = this._header.find('select').val(); - - if ( pdbSelectedValue != undefined ) { - - result.accession = this.opt.accession; - result.alignmentId = pdbSelectedValue.substring(0, pdbSelectedValue.indexOf(' ')); - result.pdbId = pdbSelectedValue.substring(0, pdbSelectedValue.indexOf('.')).toLowerCase(); - - - var alignment = this.getAlignmentsByPdb(result.alignmentId); - - result.start = alignment[result.alignmentId][1].start; - result.end = alignment[result.alignmentId][1].end; - result.offset = 0; - - if ( alignment.hasOwnProperty( result.alignmentId ) ) { - result.offset = result.start - alignment[result.alignmentId][0].start; - } - - result.alignment = alignment; - } - - Biojs.console.log("Current alignment"); - Biojs.console.log(result); - - return result; - }, - - _showProtein3D: function( ){ - - var self = this; - var alignment = this.getCurrentAlignment(); - var height = this._container.height() - this._header.height() - this._toolbar.height(); - - self._content.children().remove(); - self._beta.children().remove(); - - self._beta.attr('id','biojs_protein3D_' + self._content.attr('id') ); - - // Calculate character width - var test = jQuery("X").appendTo(self._content); - var columns = Math.round( self._content.width() * (1/test.width()) ); - test.remove(); - - var sequence = new Biojs.Sequence({ - target : self._content.attr('id'), - format : 'FASTA', - id : alignment.accession, - formatSelectorVisible: false, - columns: { size: columns, spacedEach: 10 } - }); - - var proteinStructure = new Biojs.Protein3DWS({ - id: alignment.pdbId, - target: self._beta.attr('id'), - width: Math.round( self._beta.width() ), - height: self._container.height(), - proxyUrl: self.opt.proxyUrl, - jmolFolder: self.opt.jmolFolder - }); - - sequence.onSelectionChange( function (e) { - // [e.start, e.end] from the event data corresponds to the protein sequence positions - // which need to be aligned with PDB structure - var selection = {start: e.start, end: e.end}; - - selection.start -= alignment.offset; - selection.end -= alignment.offset; - - proteinStructure.setSelection( selection ); - }); - - }, - - _showSequence: function( accession ){ - - var self = this; - - this._content.children().remove(); - - var sequence = new Biojs.Sequence({ - target : this._content.attr('id'), - format : 'FASTA', - id : accession, - formatSelectorVisible: false, - columns: { size: Math.round( self._content.width()/20 ), spacedEach: 10 } - }); - }, - - _showImage: function( pdbId ){ - - this._beta.children().remove(); - - var img = jQuery('
')
- .appendTo(this._beta)
- .addClass('crop');
-
- },
-
- _showFeatures: function( accession ) {
-
- var self = this;
-
- this._content.children().remove();
- this._adjustContentSize();
-
- this._requestFeatures( accession, function(xml){
-
- Biojs.console.log("Features received " + xml );
-
- var xmlDoc = "";
-
- try {
- xmlDoc = jQuery.parseXML( xml );
- } catch (e) {
- Biojs.console.log("XML parser error" + e);
- }
-
- var features = jQuery('')); - var imgUrl = this.opt.chebiImgUrl + chebiId - + '&dimensions=' + this.opt.dimensions; - $('#'+compDivId).append(jQuery('
{
- "location": [ "Some part of the page" ],
- "action": ["Action 1", "Action 2", "Action 3" ],
- "target": [ {
- "name": "First Target",
- "conditions": [ {
- "name": "Select from",
- "type": "selects",
- "amount": 1,
- "values": ["An Option","another option" ]
- }, {
- "name": "number",
- "type": "numeric_comparison"
- }, {
- "name": "some text",
- "type": "text_comparison"
- } ]
- } ]
-}
- *
- * @example
- * var instance = new Biojs.Ruler({
- * target: "YourOwnDivId",
- * allowOrdering:true,
- * rules:{
- * "location": [
- * "all proteins",
- * "protein1",
- * "protein2",
- * "protein3",
- * "protein4"
- * ],
- * "target": [
- * {
- * "name": "Proteins",
- * "action": [
- * {name:"Show",type:"single"},
- * {name:"Hide",type:"single"},
- * {name:"Highlight",type:"single"},
- * {name:"Color",type:"color"},
- * {name:"Color Range",type:"colorRange"},
- * {name:"Show Label",type:"select",options:["ID","Functional Class","Organism","Gene Name"]}
- * ],
- * "conditions": [
- * {
- * "name": "interactions with",
- * "type": "selects",
- * "amount": 1,
- * "values": [
- * "protein1",
- * "protein2",
- * "protein3",
- * "protein4"
- * ]
- * },
- * {
- * "name": "number of interactions",
- * "type": "numeric_comparison"
- * },
- * {
- * "name": "accession number",
- * "type": "text_comparison"
- * }
- * ]
- * },
- * {
- * "name": "Interactions",
- * "action": [
- * {name:"Show",type:"single"},
- * {name:"Hide",type:"single"},
- * {name:"Highlight",type:"single"},
- * {name:"Color",type:"color"},
- * ],
- * "conditions": [
- * {
- * "name": "protein",
- * "type": "selects",
- * "amount": 1,
- * "values": [
- * "protein1",
- * "protein2",
- * "protein3",
- * "protein4"
- * ]
- * },
- * {
- * "name": "proteins",
- * "type": "selects",
- * "amount": 2,
- * "values": [
- * "protein1",
- * "protein2",
- * "protein3",
- * "protein4"
- * ]
- * },
- * {
- * "name": "score",
- * "type": "numeric_comparison"
- * }
- * ]
- * }
- * ]
- * }
- * });
- *
- */
-Biojs.Ruler = Biojs.extend (
-/** @lends Biojs.Ruler# */
-{
- _number: 1,
- constructor: function (options) {
- var self=this;
- var target =self.opt.target;
- var innerCode = ' - ';
- innerCode +='
- ';
- innerCode +='
- * [
- * // Highlight aminoacids from 'start' to 'end' of the current strand using the specified 'color' (optional) and 'background' (optional).
- * { start: <startVal1>, end: <endVal1> [, id:<idVal1>] [, color: <HTMLColor>] [, background: <HTMLColor>]},
- * //
- * // Any others highlights
- * ...,
- * //
- * { start: <startValN>, end: <endValN> [, id:<idValN>] [, color: <HTMLColor>] [, background: <HTMLColor>]}
- * ]
- *
- *
- * highlights : [
- * { start:30, end:42, color:"white", background:"green", id:"spin1" },
- * { start:139, end:140 },
- * { start:631, end:633, color:"white", background:"blue" }
- * ]
- *
- *
- * @option {Object} [columns={size:40,spacedEach:10}]
- * Options for displaying the columns. Syntax: { size: <numCols>, spacedEach: <numCols>}
- *
- * @option {Object} [selection]
- * Positions for the current selected region. Syntax: { start: <startValue>, end: <endValue>}
- *
- * @option {Object[]} [annotations]
- * Set of overlapping annotations. Must be an array of objects following the syntax:
- *
- * [
- * // An annotation:
- * { name: <name>,
- * html: <message>,
- * color: <color_code>,
- * regions: [{ start: <startVal1>, end: <endVal1> color: <HTMLColor>}, ...,{ start: <startValN>, end: <endValN>, color: <HTMLColor>}]
- * },
- *
- * // ...
- * // more annotations here
- * // ...
- * ]
- *
- * where:
- * -
- *
- * formatOptions : {
- * title:false,
- * footer:false
- * }
- *
- *
- * @example
- * var theSequence = "METLCQRLNVCQDKILTHYENDSTDLRDHIDYWKHMRLECAIYYKAREMGFKHINHQVVPTLAVSKNKALQAIELQLTLETIYNSQYSNEKWTLQDVSLEVYLTAPTGCIKKHGYTVEVQFDGDICNTMHYTNWTHIYICEEAojs SVTVVEGQVDYYGLYYVHEGIRTYFVQFKDDAEKYSKNKVWEVHAGGQVILCPTSVFSSNEVSSPEIIRQHLANHPAATHTKAVALGTEETQTTIQRPRSEPDTGNPCHTTKLLHRDSVDSAPILTAFNSSHKGRINCNSNTTPIVHLKGDANTLKCLRYRFKKHCTLYTAVSSTWHWTGHNVKHKSAIVTLTYDSEWQRDQFLSQVKIPKTITVSTGFMSI";
- * var mySequence = new Biojs.Sequence({
- * sequence : theSequence,
- * target : "YourOwnDivId",
- * format : 'CODATA',
- * id : 'P918283',
- * annotations: [
- * { name:"CATH",
- * color:"#F0F020",
- * html: "Using color code #F0F020 ",
- * regions: [{start: 122, end: 135}]
- * },
- * { name:"TEST",
- * html:"<br> Example of <b>HTML</b>",
- * color:"green",
- * regions: [
- * {start: 285, end: 292},
- * {start: 293, end: 314, color: "#2E4988"}]
- * }
- * ],
- * highlights : [
- * { start:30, end:42, color:"white", background:"green", id:"spin1" },
- * { start:139, end:140 },
- * { start:631, end:633, color:"white", background:"blue" }
- * ]
- * });
- *
- */
-
-Biojs.Sequence = Biojs.extend(
-/** @lends Biojs.Sequence# */
-{
- constructor: function (options) {
- var self = this;
-
- this._container = jQuery( "#" + this.opt.target );
-
- // Lazy initialization
- this._container.ready(function() {
- self._initialize();
- });
- },
-
- /**
- * Default values for the options
- * @name Biojs.Sequence-opt
- */
- opt : {
-
- sequence : "",
- id : "",
- target : "",
- format : "FASTA",
- selection: { start: 0, end: 0 },
- columns: { size: 35, spacedEach: 10 },
- highlights : [],
- annotations: [],
- sequenceUrl: 'http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/sequence',
-
- // Styles
- selectionColor : 'Yellow',
- selectionFontColor : 'black',
- highlightFontColor : 'red',
- highlightBackgroundColor : 'white',
- fontFamily: '"Andale mono", courier, monospace',
- fontSize: '12px',
- fontColor : 'inherit',
- backgroundColor : 'inherit',
- width: undefined,
- height: undefined,
- formatSelectorVisible: true
- },
-
- /**
- * Array containing the supported event names
- * @name Biojs.Sequence-eventTypes
- */
- eventTypes : [
- /**
- * @name Biojs.Sequence#onSelectionChanged
- * @event
- * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {int} start A number indicating the start of the selection.
- * @eventData {int} end A number indicating the ending of selection.
- * @example
- * mySequence.onSelectionChanged(
- * function( objEvent ) {
- * alert("Selected: " + objEvent.start + ", " + objEvent.end );
- * }
- * );
- *
- * */
- "onSelectionChanged",
-
- /**
- * @name Biojs.Sequence#onSelectionChange
- * @event
- * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {int} start A number indicating the start of the selection.
- * @eventData {int} end A number indicating the ending of selection.
- * @example
- * mySequence.onSelectionChange(
- * function( objEvent ) {
- * alert("Selection in progress: " + objEvent.start + ", " + objEvent.end );
- * }
- * );
- *
- *
- * */
- "onSelectionChange",
-
- /**
- * @name Biojs.Sequence#onAnnotationClicked
- * @event
- * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.
- * @eventData {Object} source The component which did triggered the event.
- * @eventData {string} type The name of the event.
- * @eventData {string} name The name of the selected annotation.
- * @eventData {int} pos A number indicating the position of the selected amino acid.
- * @example
- * mySequence.onAnnotationClicked(
- * function( objEvent ) {
- * alert("Clicked " + objEvent.name + " on position " + objEvent.pos );
- * }
- * );
- *
- * */
- "onAnnotationClicked"
- ],
-
- // internal members
- _headerDiv : null,
- _contentDiv : null,
-
- // Methods
-
- _initialize: function () {
-
- if ( this.opt.width !== undefined ) {
- this._container.width( this.opt.width );
- }
-
- if ( this.opt.height !== undefined ) {
- this._container.height( this.opt.height );
- }
-
- // Disable text selection
-
- this._container.css({
- '-moz-user-select':'none',
- '-webkit-user-select':'none',
- 'user-select':'none'
- });
-
- // DIV for the format selector
- this._buildFormatSelector();
-
- // DIV for the sequence
- this._contentDiv = jQuery('').appendTo(this._container);
- this._contentDiv.css({
- 'font-family': this.opt.fontFamily,
- 'font-size': this.opt.fontSize,
- 'text-align': 'left'
- });
-
- // Initialize highlighting
- this._highlights = this.opt.highlights;
-
- // Initialize annotations
- this._annotations = this.opt.annotations;
-
- //Initialize tooltip
- jQuery('')
- .css({
- 'position': "absolute",
- 'z-index': "999999",
- 'color': "#fff",
- 'font-size': "12px",
- 'width': "auto",
- 'display': 'none'
- })
- .addClass("tooltip")
- .appendTo("body")
- .hide();
-
- if ( ! Biojs.Utils.isEmpty(this.opt.sequence) ) {
- this._redraw();
-
- } else if ( ! Biojs.Utils.isEmpty(this.opt.id) ) {
- this._requestSequence( this.opt.id );
-
- } else {
- this.clearSequence("No sequence available", "../biojs/css/images/warning_icon.png");
- }
-
- },
-
-
- /**
- * Shows the columns indicated by the indexes array.
- * @param {string} seq The sequence strand.
- * @param {string} [identifier] Sequence identifier.
- *
- * @example
- * mySequence.setSequence("P99999");
- *
- */
- setSequence: function ( seq, identifier ) {
-
- if ( seq.match(/^([A-N,R-Z][0-9][A-Z][A-Z, 0-9][A-Z, 0-9][0-9])|([O,P,Q][0-9][A-Z, 0-9][A-Z, 0-9][A-Z, 0-9][0-9])(\.\d+)?$/i) ) {
- this._requestSequence( arguments[0] );
-
- } else {
- this.opt.sequence = seq;
- this.opt.id = identifier;
- this._highlights = [];
- this._highlightsCount = 0;
- this.opt.selection = { start: 0, end: 0 };
- this._annotations = [];
-
- this._contentDiv.children().remove();
- this._redraw();
- }
- },
-
- _requestSequence: function ( accession ) {
- var self = this;
-
- Biojs.console.log("Requesting sequence for: " + accession );
-
- jQuery.ajax({
- url: self.opt.sequenceUrl,
- dataType: "xml",
- data: { segment: accession },
- success: function ( xml ) {
- try {
-
- var sequenceNode = jQuery(xml).find('SEQUENCE:first');
- self.setSequence( sequenceNode.text(), sequenceNode.attr("id"), sequenceNode.attr("label") );
-
- } catch (e) {
- Biojs.console.log("Error decoding response data: " + e.message );
- self.clearSequence("No sequence available", "../biojs/css/images/warning_icon.png");
- }
-
- },
- error: function (jqXHR, textStatus, errorThrown) {
- Biojs.console.log("Error decoding response data: " + textStatus );
- self.clearSequence("Error requesting the sequence to the server " + this.url , "../biojs/css/images/warning_icon.png");
- }
- });
- },
-
- /**
- * Shows the columns indicated by the indexes array.
- * @param {string} [showMessage] Message to be showed.
- * @param {string} [icon] Icon to be showed a side of the message
- *
- * @example
- * mySequence.clearSequence("No sequence available", "../biojs/css/images/warning_icon.png");
- *
- */
- clearSequence: function ( showMessage, icon ) {
-
- var message = undefined;
-
- this.opt.sequence = "";
- this.opt.id = "";
- this._highlights = [];
- this._highlightsCount = 0;
- this.opt.selection = { start: 0, end: 0 };
- this._annotations = [];
- this._contentDiv.children().remove();
-
- this._headerDiv.hide();
-
- if ( undefined !== showMessage ) {
- message = jQuery('' + showMessage + '
')
- .appendTo(this._contentDiv)
- .addClass("message");
-
- if ( undefined !== icon ) {
- message.css({
- 'background': 'transparent url("' + icon + '") no-repeat center left',
- 'padding-left': '20px'
- });
- }
- }
- },
-
- /**
- * Set the current selection in the sequence causing the event {@link Biojs.Sequence#onSelectionChanged}
- *
- * @example
- * // set selection from the position 100 to 150
- * mySequence.setSelection(100, 150);
- *
- * @param {int} start The starting character of the selection.
- * @param {int} end The ending character of the selection
- */
- setSelection : function(start, end) {
- if(start > end) {
- var aux = end;
- end = start;
- start = aux;
-
- }
-
- if(start != this.opt.selection.start || end != this.opt.selection.end) {
- this._setSelection(start, end);
- this.raiseEvent(
- Biojs.Sequence.EVT_ON_SELECTION_CHANGED,
- { "start" : start, "end" : end }
- );
- }
- },
-
- _buildFormatSelector: function () {
- var self = this;
-
- this._headerDiv = jQuery('').appendTo(this._container);
- this._headerDiv.css({
- 'font-family': '"Heveltica Neue", Arial, "sans serif"',
- 'font-size': '14px'
- }).append('Format: ');
-
- this._formatSelector = jQuery('').appendTo(self._headerDiv);
-
- this._formatSelector.change(function(e) {
- self.opt.format = jQuery(this).val();
- self._redraw();
- });
-
- this._formatSelector.val(self.opt.format);
-
- this.formatSelectorVisible( this.opt.formatSelectorVisible );
- },
-
- /**
- * Highlights a region using the font color defined in {Biojs.Protein3D#highlightFontColor} by default is red.
- *
- * @deprecated use addHighlight instead.
- *
- * @param {int} start The starting character of the highlighting.
- * @param {int} end The ending character of the highlighting.
- * @param {string} [color] HTML color code.
- * @param {string} [background] HTML color code.
- * @param {string} [id] Custom identifier.
- *
- * @return {int} representing the id of the highlight on the internal array. Returns -1 on failure
- */
- highlight : function (start, end, color, background, id ) {
- return this.addHighlight({ "start": start, "end": end, "color": color, "background": background, "id": id });
- },
-
- /**
- * Highlights a region using the font color defined in {Biojs.Sequence#highlightFontColor} by default is red.
- *
- * @example
- * // highlight the characters within the position 100 to 150, included.
- * mySequence.addHighlight( { "start": 100, "end": 150, "color": "white", "background": "red", "id": "aaa" } );
- *
- * @param {Object} h The highlight defined as follows:
- *
- *
- * @return {int} representing the id of the highlight on the internal array. Returns -1 on failure
- */
- addHighlight : function ( h ) {
- var id = '-1';
- var color = "";
- var background = "";
- var highlight = {};
-
- if ( h instanceof Object && h.start <= h.end ) {
-
- color = ( "string" == typeof h.color )? h.color : this.opt.highlightFontColor;
- background = ( "string" == typeof h.background )? h.background : this.opt.highlightBackgroundColor;
- id = ( "string" == typeof h.id )? h.id : (new Number(this._highlightsCount++)).toString();
-
- highlight = { "start": h.start, "end": h.end, "color": color, "background": background, "id": id };
-
- this._highlights.push(highlight);
- this._applyHighlight(highlight);
- this._restoreSelection(h.start,h.end);
- }
-
- return id;
- },
- /*
- * Function: Biojs.Sequence._applyHighlight
- * Purpose: Apply the specified color and background to a region between 'start' and 'end'.
- * Returns: -
- * Inputs: highlight -> {Object} An object containing the fields start (int), end (int),
- * color (HTML color string) and background (HTML color string).
- */
- _applyHighlight: function ( highlight ) {
- var seq = this._contentDiv.find('.sequence');
- for ( var i = highlight.start - 1; i < highlight.end; i++ ){
- zindex = jQuery(seq[i]).css("z-index");
- if (zindex=="auto"){
- z = 1;
- o = 1;
- }
- else{
- z = 0;
- o = 0.5;
- }
- jQuery(seq[i])
- .css({
- "color": highlight.color,
- "background-color": highlight.background,
- "z-index": z,
- "opacity": o
- })
- .addClass("highlighted");
- }
- },
- /*
- * Function: Biojs.Sequence._applyHighlights
- * Purpose: Apply the specified highlights.
- * Returns: -
- * Inputs: highlights -> {Object[]} An array containing the highlights to be applied.
- */
- _applyHighlights: function ( highlights ) {
- for ( var i in highlights ) {
- this._applyHighlight(highlights[i]);
- }
- },
- /*
- * Function: Biojs.Sequence._restoreHighlights
- * Purpose: Repaint the highlights in the specified region.
- * Returns: -
- * Inputs: start -> {int} Start of the region to be restored.
- * end -> {int} End of the region to be restored.
- */
- _restoreHighlights: function ( start, end ) {
- var h = this._highlights;
- // paint the region using default blank settings
- this._applyHighlight({
- "start": start,
- "end": end,
- "color": this.opt.fontColor,
- "background": this.opt.backgroundColor
- });
- // restore highlights in that region
- for ( var i in h ) {
- // interval intersects with highlight i ?
- if ( !( h[i].start > end || h[i].end < start ) ) {
- a = ( h[i].start < start ) ? start : h[i].start;
- b = ( h[i].end > end ) ? end : h[i].end;
- this._applyHighlight({
- "start": a,
- "end": b,
- "color": h[i].color,
- "background": h[i].background
- });
- }
- }
- },
- /*
- * Function: Biojs.Sequence._restoreSelection
- * Purpose: Repaint the current selection in the specified region.
- * It is used in the case of any highlight do overriding of the current selection.
- * Returns: -
- * Inputs: start -> {int} Start of the region to be restored.
- * end -> {int} End of the region to be restored.
- */
- _restoreSelection: function ( start, end ) {
- var sel = this.opt.selection;
- // interval intersects with current selection ?
- // restore selection
- if ( !( start > sel.end || end < sel.start ) ) {
- a = ( start < sel.start ) ? sel.start : start;
- b = ( end > sel.end ) ? sel.end : end;
-
- this._applyHighlight({
- "start": a,
- "end": b,
- "color": this.opt.selectionFontColor,
- "background": this.opt.selectionColor,
- });
- }
- },
-
- /**
- * Clear a highlighted region using.
- *
- * @deprecated use removeHighlight instead.
- *
- * @param {int} id The id of the highlight on the internal array. This value is returned by method highlight.
- */
- unHighlight : function (id) {
- this.removeHighlight(id);
- },
-
- /**
- * Remove a highlight.
- *
- * @example
- * // Clear the highlighted characters within the position 100 to 150, included.
- * mySequence.removeHighlight("spin1");
- *
- * @param {string} id The id of the highlight on the internal array. This value is returned by method highlight.
- */
- removeHighlight : function (id) {
- var h = this._highlights;
- for ( i in h ) {
- if ( h[i].id == id ) {
- start = h[i].start;
- end = h[i].end;
- h.splice(i,1);
-
- this._restoreHighlights(start,end);
- this._restoreSelection(start,end);
-
- break;
- }
- }
- },
-
- /**
- * Clear the highlights of whole sequence.
- * @deprecated use removeAllHighlights instead.
- */
- unHighlightAll : function () {
- this.removeAllHighlights();
- },
-
- /**
- * Remove all the highlights of whole sequence.
- *
- * @example
- * mySequence.removeAllHighlights();
- */
- removeAllHighlights : function () {
- this._highlights = [];
- this._restoreHighlights(1,this.opt.sequence.length);
- this._restoreSelection(1,this.opt.sequence.length);
- },
-
- /**
- * Changes the current displaying format of the sequence.
- *
- * @example
- * // Set format to 'FASTA'.
- * mySequence.setFormat('FASTA');
- *
- * @param {string} format The format for the sequence to be displayed.
- */
- setFormat : function(format) {
- if ( this.opt.format != format.toUpperCase() ) {
- this.opt.format = format.toUpperCase();
- this._redraw();
- }
-
- var self = this;
- // Changes the option in the combo box
- this._headerDiv.find('option').each(function() {
- if(jQuery(this).val() == self.opt.format.toUpperCase()) {
- jQuery(this).attr('selected', 'selected');
- }
- });
- },
-
- /**
- * Changes the current number of columns in the displayed sequence.
- *
- * @example
- * // Set the number of columns to 70.
- * mySequence.setNumCols(70);
- *
- * @param {int} numCols The number of columns.
- */
- setNumCols : function(numCols) {
- this.opt.columns.size = numCols;
- this._redraw();
- },
-
- /**
- * Set the visibility of the drop-down list of formats.
- *
- * @param {boolean} visible true: show; false: hide.
- */
- formatSelectorVisible : function (visible){
- if (visible) {
- this._headerDiv.show();
- } else {
- this._headerDiv.hide();
- }
- },
-
- /**
- * This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'true' argument.
- *
- * @example
- * // Shows the format selector.
- * mySequence.showFormatSelector();
- *
- */
- showFormatSelector : function() {
- this._headerDiv.show();
- },
-
- /**
- * This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'false' argument.
- *
- * @example
- * // Hides the format selector.
- * mySequence.hideFormatSelector();
- *
- */
- hideFormatSelector : function() {
- this._headerDiv.hide();
- },
-
- /**
- * Hides the whole component.
- *
- */
- hide : function () {
- this._headerDiv.hide();
- this._contentDiv.hide();
- },
-
- /**
- * Shows the whole component.
- *
- */
- show : function () {
- this._headerDiv.show();
- this._contentDiv.show();
- },
- /*
- * Function: Biojs.Sequence._setSelection
- * Purpose: Update the current selection.
- * Returns: -
- * Inputs: start -> {int} Start of the region to be selected.
- * end -> {int} End of the region to be selected.
- */
- _setSelection : function(start, end) {
- //alert("adsas");
-
- var current = this.opt.selection;
- var change = {};
-
- // Which is the change on selection?
- if ( current.start == start ) {
- // forward?
- if ( current.end < end ) {
- change.start = current.end;
- change.end = end;
- } else {
- this._restoreHighlights(end+1, current.end);
- }
- } else if ( current.end == end ) {
- // forward?
- if ( current.start > start ) {
- change.start = start;
- change.end = current.start;
- } else {
- this._restoreHighlights(current.start, start-1);
- }
- } else {
- this._restoreHighlights(current.start, current.end);
- change.start = start;
- change.end = end;
- }
-
- current.start = start;
- current.end = end;
-
- if ( change.start != undefined ) {
- this._applyHighlight({
- "start": change.start,
- "end": change.end,
- "color": this.opt.selectionFontColor,
- "background": this.opt.selectionColor
- });
- }
-
- },
-
- /*
- * Function: Biojs.Sequence._repaintSelection
- * Purpose: Repaint the whole current selection.
- * Returns: -
- * Inputs: -
- */
- _repaintSelection: function(){
- var s = Biojs.Utils.clone(this.opt.selection);
- this._setSelection(0,0);
- this._setSelection(s.start,s.end);
- },
-
- /*
- * Function: Biojs.Sequence._redraw
- * Purpose: Repaint the current sequence.
- * Returns: -
- * Inputs: -
- */
- _redraw : function() {
- var i = 0;
- var self = this;
-
- // Reset the content
- //this._contentDiv.text('');
- this._contentDiv.children().remove();
-
- // Rebuild the spans of the sequence
- // according to format
- if(this.opt.format == 'RAW') {
- this._drawRaw();
- } else if(this.opt.format == 'CODATA') {
- this._drawCodata();
- } else if (this.opt.format == 'FASTA'){
- this._drawFasta();
- } else {
- this.opt.format = 'PRIDE';
- this._drawPride();
- }
-
- // Restore the highlighted regions
- this._applyHighlights(this._highlights);
- this._repaintSelection();
- this._addSpanEvents();
- },
- /*
- * Function: Biojs.Sequence._drawFasta
- * Purpose: Repaint the current sequence using FASTA format.
- * Returns: -
- * Inputs: -
- */
- _drawFasta : function() {
- var self = this;
- var a = this.opt.sequence.toUpperCase().split('');
- var pre = jQuery('').appendTo(this._contentDiv);
-
- var i = 1;
- var arr = [];
- var str = '>' + this.opt.id + ' ' + a.length + ' bp'; - - /* Correct column size in case the sequence is as small peptide */ - var numCols = this.opt.columns.size; - if ( this.opt.sequence.length < this.opt.columns.size ) { - numCols = this.opt.sequence.length; - } - - var opt = { - numCols: numCols, - numColsForSpace: 0 - }; - - str += this._drawSequence(a, opt); - pre.html(str); - - this._drawAnnotations(opt); - }, - /* - * Function: Biojs.Sequence._drawCodata - * Purpose: Repaint the current sequence using CODATA format. - * Returns: - - * Inputs: - - */ - _drawCodata : function() { - - var self = this; - var a = this.opt.sequence.toUpperCase().split(''); - var pre = jQuery('').appendTo(this._contentDiv); - - var i = 0; - var str = 'ENTRY ' + this.opt.id + '
'; - str += 'SEQUENCE
'; - if ( this.opt.formatOptions !== undefined ){ - if(this.opt.formatOptions.title !== undefined ){ - if (this.opt.formatOptions.title == false) { - str = ''; - } - } - } - - /* Correct column size in case the sequence is as small peptide */ - var numCols = this.opt.columns.size; - if ( this.opt.sequence.length < this.opt.columns.size ) { - numCols = this.opt.sequence.length; - } - - var opt = { - numLeft: true, - numLeftSize: 7, - numLeftPad:' ', - numTop: true, - numTopEach: 5, - numCols: numCols, - numColsForSpace: 0, - spaceBetweenChars: true - }; - - str += this._drawSequence(a, opt); - - var footer = '
///'; - if (this.opt.formatOptions !== undefined) { - if (this.opt.formatOptions.footer !== undefined) { - if (this.opt.formatOptions.footer == false) { - footer = ''; - } - } - } - str += footer; - pre.html(str); - - this._drawAnnotations(opt); - }, - /* - * Function: Biojs.Sequence._drawAnnotations - * Purpose: Paint the annotations on the sequence. - * Returns: - - * Inputs: settings -> {object} - */ - _drawAnnotations: function ( settings ){ - - var self = this; - var a = this.opt.sequence.toLowerCase().split(''); - var annotations = this._annotations; - var leftSpaces = ''; - var row = ''; - var annot = ''; - - // Index at the left? - if ( settings.numLeft ) { - leftSpaces += this._formatIndex(' ', settings.numLeftSize+2, ' '); - } - - for ( var i = 0; i < a.length; i += settings.numCols ){ - row = ''; - for ( var key in annotations ){ - annotations[key].id = this.getId() + "_" + key; - annot = this._getHTMLRowAnnot(i+1, annotations[key], settings); - if (annot.length > 0) { - row += '
'; - row += leftSpaces; - row += annot; - row += '
'; - } - } - - var numCols = settings.numCols; - var charRemaining = a.length-i; - if(charRemaining < numCols){ - numCols = charRemaining; - } - - if ( settings.numRight ) { - jQuery(row).insertAfter('div#'+self.opt.target+' div pre span#numRight_' + this.getId() + '_' + (i + numCols) ); - } else { - jQuery(row).insertAfter('div#'+self.opt.target+' div pre span#'+ this.getId() + '_' + (i + numCols) ); - } - } - - // add tool tips and background' coloring effect - jQuery(this._contentDiv).find('.annotation').each( function(){ - self._addToolTip( this, function() { - return self._getAnnotationString( jQuery(this).attr("id") ); - }); - - jQuery(this).mouseover(function(e) { - jQuery('.annotation.'+jQuery(e.target).attr("id")).each(function(){ - jQuery(this).css("background-color", jQuery(this).attr("color") ); - }); - }).mouseout(function() { - jQuery('.annotation').css("background-color", "transparent"); - - }).click(function(e) { - self.raiseEvent( Biojs.Sequence.EVT_ON_ANNOTATION_CLICKED, { - "name": self._annotations[ jQuery(e.target).attr("id") ].name, - "pos": parseInt( jQuery(e.target).attr("pos") ) - }); - }); - - }); - - }, - /* - * Function: Biojs.Sequence._getAnnotationString - * Purpose: Get the annotation text message for the tooltip - * Returns: {string} Annotation text for the annotation - * Inputs: id -> {int} index of the internal annotation array - */ - _getAnnotationString: function ( id ) { - var annotation = this._annotations[id.substr(id.indexOf("_") + 1)]; - return annotation.name + "
" + ((annotation.html)? annotation.html : ''); - }, - - /* - * Function: Biojs.Sequence._getHTMLRowAnnot - * Purpose: Build an annotation - * Returns: HTML of the annotation - * Inputs: currentPos -> {int} - * annotation -> {Object} - * settings -> {Object} - */ - _getHTMLRowAnnot : function (currentPos, annotation, settings) { - var styleBegin = 'border-left:1px solid; border-bottom:1px solid; border-color:'; - var styleOn = 'border-bottom:1px solid; border-color:'; - var styleEnd = 'border-bottom:1px solid; border-right:1px solid; border-color:'; - var styleBeginAndEnd = 'border-left:1px solid; border-right:1px solid; border-bottom:1px solid; border-color:'; - - var row = []; - var end = (currentPos + settings.numCols); - var spaceBetweenChars = (settings.spaceBetweenChars)? ' ' : ''; - var defaultColor = annotation.color; - var id = annotation.id; - for ( var pos=currentPos; pos < end ; pos++ ) { - // regions - for ( var r in annotation.regions ) { - region = annotation.regions[r]; - - spaceAfter = ''; - spaceAfter += (pos % settings.numColsForSpace == 0 )? ' ' : ''; - spaceAfter += spaceBetweenChars; - - color = ((region.color)? region.color : defaultColor); - data = 'class="annotation '+id+'" id="'+id+'" color="'+color+'" pos="'+pos+'"'; - - if ( pos == region.start && pos == region.end) { - row[pos] = ' '; - row[pos] += spaceAfter; - row[pos] += ''; - } else if ( pos == region.start ) { - row[pos] = ' '; - row[pos] += spaceAfter; - row[pos] += ''; - } else if ( pos == region.end ) { - row[pos] = ' '; - //row[pos] += spaceAfter; - row[pos] += ''; - } else if ( pos > region.start && pos < region.end ) { - row[pos] = ' '; - row[pos] += spaceAfter; - row[pos] += ''; - } else if (!row[pos]) { - row[pos] = ' '; - row[pos] += spaceAfter; - } - } - } - - var str = row.join(""); - - return ( str.indexOf("span") == -1 )? "" : str; - }, - /* - * Function: Biojs.Sequence._drawRaw - * Purpose: Repaint the current sequence using RAW format. - * Returns: - - * Inputs: - - */ - _drawRaw : function() { - var self = this; - var a = this.opt.sequence.toLowerCase().split(''); - var i = 0; - var arr = []; - var pre = jQuery('').appendTo(this._contentDiv); - - /* Correct column size in case the sequence is as small peptide */ - var numCols = this.opt.columns.size; - if ( this.opt.sequence.length < this.opt.columns.size ) { - numCols = this.opt.sequence.length; - } - - var opt = { - numCols: numCols - }; - - pre.html( - this._drawSequence(a, opt) - ); - - this._drawAnnotations(opt); - }, - /* - * Function: Biojs.Sequence._drawPride - * Purpose: Repaint the current sequence using PRIDE format. - * Returns: - - * Inputs: - - */ - _drawPride : function() { - var self = this; - var a = this.opt.sequence.toUpperCase().split(''); - var pre = jQuery('').appendTo(this._contentDiv); - - /* Correct column size in case the sequence is as small peptide */ - var numCols = this.opt.columns.size; - if ( this.opt.sequence.length < this.opt.columns.size ) { - numCols = this.opt.sequence.length; - } - - opt = { - numLeft: true, - numLeftSize: 5, - numLeftPad:'0', - numRight: true, - numRightSize: 5, - numRightPad: '0', - numCols: numCols, - numColsForSpace: self.opt.columns.spacedEach - }; - - pre.html( - this._drawSequence(a, opt) - ); - - this._drawAnnotations(opt); - }, - /* - * Function: Biojs.Sequence._drawSequence - * Purpose: Repaint the current sequence using CUSTOM format. - * Returns: - - * Inputs: a -> {char[]} a The sequence strand. - * opt -> {Object} opt The CUSTOM format. - */ - _drawSequence : function(a, opt) { - var str = ''; - - var spaceStyle = "white-space: pre;"; - - // Index at top? - if( opt.numTop ) - { - str += '' - var size = (opt.spaceBetweenChars)? opt.numTopEach*2: opt.numTopEach; - - if (opt.numLeft) { - str += this._formatIndex(' ', opt.numLeftSize, ' '); - } - - str += this._formatIndex(' ', size, ' '); - - for(var x = opt.numTopEach; x < opt.numCols; x += opt.numTopEach) { - str += this._formatIndex(x, size, ' ', true); - } - str += '
' - } - - - // Index at the left? - if (opt.numLeft) { - str += this._formatIndex(1, opt.numLeftSize, opt.numLeftPad); - str += ' '; - } - - var j=1; - for (var i=1; i <= a.length; i++) { - - if( i % opt.numCols == 0) { - str += '' + a[i-1] + ''; - - if (opt.numRight) { - str += ''; - str += ' '; - str += this._formatIndex(i, opt.numRightSize, opt.numRightPad); - str += ''; - } - - str += '
'; - - var aaRemaining = a.length - i; - if (opt.numLeft && aaRemaining > 0) { - str += ''; - str += this._formatIndex(i+1, opt.numLeftSize, opt.numLeftPad); - str += ' '; - str += ''; - } - - j = 1; - - } else { - str += '' + a[i-1]; - str += ( j % opt.numColsForSpace == 0)? ' ' : ''; - str += (opt.spaceBetweenChars)? ' ' : ''; - str += ''; - j++; - } - } - - str += '
' - - if (jQuery.browser.msie) { - str = "
" + str + ""; - } - - return str; - }, - /* - * Function: Biojs.Sequence._formatIndex - * Purpose: Build the HTML corresponding to counting numbers (top, left, right) in the strand. - * Returns: - - * Inputs: number -> {int} The number - * size -> {int} Number of bins to suit the number. - * fillingChar -> {char} Character to be used for filling out blank bins. - * alignLeft -> {bool} Tell if aligned to the left. - */ - _formatIndex : function( number, size, fillingChar, alignLeft) { - var str = number.toString(); - var filling = ''; - var padding = size - str.length; - if ( padding > 0 ) { - while ( padding-- > 0 ) { - filling += (""+fillingChar+""); - } - if (alignLeft){ - str = number+filling; - } else { - str = filling+number; - } - } - return str; - }, - /* - * Function: Biojs.Sequence._addSpanEvents - * Purpose: Add the event handlers to the strand. - * Returns: - - * Inputs: - - */ - _addSpanEvents : function() { - var self = this; - var isMouseDown = false; - var currentPos; - - self._contentDiv.find('.sequence').each( function () { - - // Register the starting position - jQuery(this).mousedown(function() { - var id = jQuery(this).attr('id'); - currentPos = parseInt(id.substr(id.indexOf("_") + 1)); - clickPos = currentPos; - self._setSelection(clickPos,currentPos); - isMouseDown = true; - - // Selection is happening, raise an event - self.raiseEvent( - Biojs.Sequence.EVT_ON_SELECTION_CHANGE, - { - "start" : self.opt.selection.start, - "end" : self.opt.selection.end - } - ); - - }).mouseover(function() { - // Update selection - // Show tooltip containing the position - var id = jQuery(this).attr('id'); - currentPos = parseInt(id.substr(id.indexOf("_") + 1)); - - if(isMouseDown) { - if( currentPos > clickPos ) { - self._setSelection(clickPos, currentPos); - } else { - self._setSelection(currentPos, clickPos); - } - - // Selection is happening, raise an event - self.raiseEvent( Biojs.Sequence.EVT_ON_SELECTION_CHANGE, { - "start" : self.opt.selection.start, - "end" : self.opt.selection.end - }); - } - - }).mouseup(function() { - isMouseDown = false; - // Selection is done, raise an event - self.raiseEvent( Biojs.Sequence.EVT_ON_SELECTION_CHANGED, { - "start" : self.opt.selection.start, - "end" : self.opt.selection.end - }); - }); - - // Add a tooltip for this sequence base. - self._addToolTip.call( self, this, function( ) { - if (isMouseDown) { - return "[" + self.opt.selection.start +", " + self.opt.selection.end + "]"; - } else { - return currentPos; - } - }); - - }) - .css('cursor', 'pointer'); - }, - /* - * Function: Biojs.Sequence._addTooltip - * Purpose: Add a tooltip around the target DOM element provided as argument - * Returns: - - * Inputs: target -> {Element} DOM element wich is the targeted focus for the tooltip. - * cbGetMessageFunction -> {function} A callback function wich returns the message to be displayed in the tip. - */ - _addToolTip : function ( target, cbGetMessageFunction ) { - - var tipId = '#sequenceTip' + this.getId(); - - jQuery(target).mouseover(function(e) { - - var offset = jQuery(e.target).offset(); - - if ( ! jQuery( tipId ).is(':visible') ) { - jQuery( tipId ) - .css({ - 'background-color': "#000", - 'padding': "3px 10px 3px 10px", - 'top': offset.top + jQuery(e.target).height() + "px", - 'left': offset.left + jQuery(e.target).width() + "px" - }) - .animate( {opacity: '0.85'}, 10) - .html( cbGetMessageFunction.call( target ) ) - .show(); - } - - }).mouseout(function() { - //Remove the appended tooltip template - jQuery( tipId ).hide(); - }); - }, - - /** - * Annotate a set of intervals provided in the argument. - * - * @deprecated Use addAnnotation() instead. - * - * @param {Object} annotation The intervals belonging to the same annotation. - * Syntax: { name: <value>, color: <HTMLColorCode>, html: <HTMLString>, regions: [{ start: <startVal1>, end: <endVal1>}, ..., { start: <startValN>, end: <endValN>}] } - */ - setAnnotation: function ( annotation ) { - this.addAnnotation(annotation); - }, - - /** - * Annotate a set of intervals provided in the argument. - * - * @example - * // Annotations using regions with different colors. - * mySequence.addAnnotation({ - * name:"UNIPROT", - * html:"<br> Example of <b>HTML</b>", - * color:"green", - * regions: [ - * {start: 540, end: 560}, - * {start: 561, end:580, color: "#FFA010"}, - * {start: 581, end:590, color: "red"}, - * {start: 690, end:710}] - * }); - * - * - * @param {Object} annotation The intervals belonging to the same annotation. - * Syntax: { name: <value>, color: <HTMLColorCode>, html: <HTMLString>, regions: [{ start: <startVal1>, end: <endVal1>}, ..., { start: <startValN>, end: <endValN>}] } - */ - addAnnotation: function ( annotation ) { - this._annotations.push(annotation); - this._redraw(); - }, - - /** - * Removes an annotation by means of its name. - * - * @example - * // Remove the UNIPROT annotation. - * mySequence.removeAnnotation('UNIPROT'); - * - * @param {string} name The name of the annotation to be removed. - * - */ - removeAnnotation: function ( name ) { - for (var i=0; i < this._annotations.length ; i++ ){ - if(name != this._annotations[i].name){ - this._annotations.splice(i,1); - this._redraw(); - break; - } - } - }, - /** - * Removes all the current annotations. - * - * @example - * mySequence.removeAllAnnotations(); - * - */ - removeAllAnnotations: function () { - this._annotations = []; - this._redraw(); - } - -}, -{ - EVT_ON_SELECTION_CHANGE: "onSelectionChange", - EVT_ON_SELECTION_CHANGED: "onSelectionChanged", - EVT_ON_ANNOTATION_CLICKED: "onAnnotationClicked" - -}); - - diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.SimpleFeatureViewer.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.SimpleFeatureViewer.js deleted file mode 100755 index d7a03dbf88..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.SimpleFeatureViewer.js +++ /dev/null @@ -1,649 +0,0 @@ -/** - * 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. - * - * @class - * @extends Biojs.FeatureViewer - * - * @author Leyla Jael Garcia Castro - * @version 1.0.0 - * @category 2 - * - * - * @param {Object} options An object with the options for SimpleFeatureViewer component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {boolean} [showSlider=true] - * Should the slider for zooming be displayed? - * - * @option {boolean} [showPrintButton=true] - * Should the button for printing/exporting to image be displayed? - * - * @option {boolean} [showFeatureTooltipOnMouseOver=true] - * Should the tooltip for features be displayed? - * - * @option {boolean} [highlightFeatureOnMouseOver=true] - * Should the features be highlighted when mouse over? - * - * @option {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? - * - * @option {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. - * - * @option {string} sequenceId - * Sequence identifier - * - * @option {string} sequenceLength - * Sequence length - * - * @option {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" - * } - * ]; - * - * @option {int} [imageWidth=700] - * Image width - * - * @example - * 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 - * }); - * - */ -Biojs.SimpleFeatureViewer = Biojs.FeatureViewer.extend( - /** @lends Biojs.SimpleFeatureViewer */ - { - /** - * Default values for the options - * @name Biojs.SimpleFeatureViewer-constructor - */ - constructor:function (options) { - this.base(options); - //Biojs.console.enable(); - this._generatesJSON(); - this.paintFeatures(this.opt.json); - }, - - /** - * 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: {} - * - * @name Biojs.SimpleFeatureViewer-opt - */ - opt:{ - //Parent - /* target:"YourOwnDivId", - json: {}, //will be created by this component - showSlider:true, - showPrintButton:true, - showFeatureTooltipOnMouseOver:true, - highlightFeatureOnMouseOver:true, - selectFeatureOnMouseClick:true, - selectionColor:"#ff8c00", - */ - dragSites: false, - imageWidth:700 - }, - - /** - * Array containing the supported event names - * @name Biojs.SimpleFeatureViewer-eventTypes - */ - eventTypes : [], - - /** - * 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(); - * - */ - exportFeaturesToImage: function() { - var config = this.opt.json.configuration; - var dataURL = ""; - if (jQuery.browser.msie) { //canvas does not work (not even with IE 9) - alert("Operation not supported for IE, please try from a different browser"); - } else { - svg = document.getElementById('uniprotFeaturePainter-holder').innerHTML; - var canvas = document.createElement("canvas"); - canvg(canvas, svg); - dataURL = canvas.toDataURL(); - this.$imageExported = jQuery('') - .html('
- * {
- * url: <url>,
- * proxyUrl: <proxy>,
- * paramsMap: { "iDisplayStart": <newName1>, "iDisplayLength": <newName2>, ... },
- * filter: <flag>
- * }
- *
- * where:
- * -
- *
- * {
- * url: 'http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query/species:human',
- * paramsMap: { "iDisplayStart": "firstResult", "iDisplayLength": "maxResults" },
- * filter: false
- * }
- *
- *
- * - * [ - * [ 1, "chi", "China", 1347350000, "December 31, 2011", "0.1925" ], - * [ 2, "ind", "India", 1210193422, "March 1, 2011", "0.1729" ], - * [ 3, "usa", "United States", 313149000, "March 9, 2012", "0.0447" ], - * [ 4, "ino", "Indonesia", 237641326, "May 1, 2010", "0.034" ], - * [ 5, "bra", "Brazil", 192376496, "July 1, 2011", "0.0275" ], - * [ 6, "pak", "Pakistan", 178945000, "March 9, 2012", "0.0256" ], - * [ 7, "nig", "Nigeria", 162471000, "July 1, 2011", "0.0232" ], - * [ 8, "rus", "Russia", 143030106, "January 1, 2012", "0.0204" ], - * [ 9, "ban", "Bangladesh", 142319000, "March 15, 2011", "0.0203" ], - * [ 10, "jap", "Japan", 127770000, "February 1, 2012", "0.0183" ], - * [ 11, "mex", "Mexico", 112336538, "June 12, 2010", "0.016" ], - * [ 12, "phi", "Philippines", 94013200, "July 1, 2010", "0.0134" ], - * [ 13, "vie", "Vietnam", 87840000, "December 31, 2011", "0.0125" ], - * [ 14, "eth", "Ethiopia", 84320987, "July 1, 2012", "0.012" ], - * [ 15, "ger", "Germany", 81796000, "August 31, 2011", "0.0117" ] - * ] - *- * - * @option {(string|Object)[]} columns - *
Array containing the column descriptors. A descriptor can be either a string or an object. - * Use a string to define column name only. Use an object to define column name, rendering function and fixed width. - *
- *
- * {
- * name: <string>,
- * render: <function>,
- * width: <string>
- * }
- *
- * where:
- * -
- *
- * // Formats a decimal value in a percentage value.
- * var numberToPercentageFormat = function (col, dataRow, value) {
- * return ( new Number(value) * 100 ).toFixed(2) + "%";
- * };
- *
- *
- * // Three columns: Identifier, Name and Location.
- * // Custom rendering function will apply bold to Identifier values.
- * columns: [
- * "Name",
- * "Location",
- * { name: "Population %", render: numberToPercentageFormat }
- * ]
- *
- *
- * @option {int[]} [hideColumns=[]]
- * Indexes (0-based) of the columns to be hided.
- *
- * @option {array[][int,string]} [orderBy=[]]
- * A 2D array to tell how to order the columns. Each 1D array must contains both column index and ordering direction.
- *
- * - * // order column 0 in ascending direction and column 3 in descending direction - * orderBy: [ [0,'asc'], [3,'desc'] ] - *- * - * @option {int} [pageLength=10] - * Number of rows per page. - * - * @option {bool} [rowSelection=true] - * Show/hide the first check boxes column used for selecting rows. - * - * @option {bool} [paginate=true] - * Enable/disable the pagination, so whole the data will be displayed. - * - * @option {int} [width=597] - * Horizontal size of the general container. - * - * @option {int} [height=400] - * Vertical size of the general container. - * - * @example - * // Adds a flag to the cell value. - * var flagRender = function (col, dataRow, value) { - * return '
' + value;
- * };
- *
- * // Formats a decimal value in a percentage value.
- * var numberToPercentageFormat = function (col, dataRow, value) {
- * return ( new Number(value) * 100 ).toFixed(2) + "%";
- * };
- *
- * // Example of instantiation of the Table
- * var myTable = new Biojs.Table({
- * target: "YourOwnDivId",
- * hideColumns: [1],
- * orderBy: [ [0,'asc'], [3,'desc'] ],
- * columns: [
- * "Rank",
- * "Flag",
- * { name: "Country", render: flagRender },
- * "Population",
- * "Date",
- * { name:"% World Population", render: numberToPercentageFormat }
- * ],
- * dataSet: [
- * [ 1, "chi", "China", 1347350000, "December 31, 2011", "0.1925" ],
- * [ 2, "ind", "India", 1210193422, "March 1, 2011", "0.1729" ],
- * [ 3, "usa", "United States", 313149000, "March 9, 2012", "0.0447" ],
- * [ 4, "ino", "Indonesia", 237641326, "May 1, 2010", "0.034" ],
- * [ 5, "bra", "Brazil", 192376496, "July 1, 2011", "0.0275" ],
- * [ 6, "pak", "Pakistan", 178945000, "March 9, 2012", "0.0256" ],
- * [ 7, "nig", "Nigeria", 162471000, "July 1, 2011", "0.0232" ],
- * [ 8, "rus", "Russia", 143030106, "January 1, 2012", "0.0204" ],
- * [ 9, "ban", "Bangladesh", 142319000, "March 15, 2011", "0.0203" ],
- * [ 10, "jap", "Japan", 127770000, "February 1, 2012", "0.0183" ],
- * [ 11, "mex", "Mexico", 112336538, "June 12, 2010", "0.016" ],
- * [ 12, "phi", "Philippines", 94013200, "July 1, 2010", "0.0134" ],
- * [ 13, "vie", "Vietnam", 87840000, "December 31, 2011", "0.0125" ],
- * [ 14, "eth", "Ethiopia", 84320987, "July 1, 2012", "0.012" ],
- * [ 15, "ger", "Germany", 81796000, "August 31, 2011", "0.0117" ]
- * ]
- *
- * });
- */
-Biojs.Table = Biojs.extend (
-/** @lends Biojs.Table# */
-{
- constructor: function (options) {
- var self = this;
-
- //Biojs.console.enable();
-
- // TODO: validate mandatory values
-
- self._tableId = 'biojs_Table_'+self.getId();
- self._tableSelector = '#'+self._tableId;
- self._topControls = jQuery('').appendTo("#"+self.opt.target);
- self._body = jQuery('').appendTo("#"+self.opt.target);
- self._table = jQuery('- * // Select all the links - * targetSelector: "a" - * - * // Select the element with the id 'target' - * targetSelector: "#target" - * - * // Select all elements whose belong to the class 'here' - * targetSelector: ".here" - * - * // Select all list elements whose belong to the class 'here' - * targetSelector: "li.here" - *- * - * @param {function} [cbRender] - * By default, BiojsTooltip uses the 'title' attribute to render the content. - * Set this option to customize the content rendering instead of using the default value. - * - *
- * cbRender: function( element ) {
- * return "This is my personalized content for element " + element.tagName;
- * }
- *
- *
- * @param {static} [arrowType=Biojs.Tooltip.ARROW_LEFT_TOP]
- * Automatic positioning of the tooltip depends on the arrow direction.
- * Possible arrow types are:
- * -
- *
- Biojs.Tooltip.ARROW_LEFT_TOP - *
- Biojs.Tooltip.ARROW_LEFT_MIDDLE - *
- Biojs.Tooltip.ARROW_LEFT_BOTTOM - *
- Biojs.Tooltip.ARROW_TOP_LEFT - *
- Biojs.Tooltip.ARROW_TOP_MIDDLE - *
- Biojs.Tooltip.ARROW_TOP_RIGHT - *
- Biojs.Tooltip.ARROW_RIGHT_TOP - *
- Biojs.Tooltip.ARROW_RIGHT_MIDDLE - *
- Biojs.Tooltip.ARROW_RIGHT_BOTTOM - *
- Biojs.Tooltip.ARROW_BOTTOM_LEFT - *
- Biojs.Tooltip.ARROW_BOTTOM_MIDDLE - *
- Biojs.Tooltip.ARROW_BOTTOM_RIGHT - *
- Biojs.Tooltip.ARROW_LEFT_TOP - *
- Biojs.Tooltip.ARROW_LEFT_MIDDLE - *
- Biojs.Tooltip.ARROW_LEFT_BOTTOM - *
- Biojs.Tooltip.ARROW_TOP_LEFT - *
- Biojs.Tooltip.ARROW_TOP_MIDDLE - *
- Biojs.Tooltip.ARROW_TOP_RIGHT - *
- Biojs.Tooltip.ARROW_RIGHT_TOP - *
- Biojs.Tooltip.ARROW_RIGHT_MIDDLE - *
- Biojs.Tooltip.ARROW_RIGHT_BOTTOM - *
- Biojs.Tooltip.ARROW_BOTTOM_LEFT - *
- Biojs.Tooltip.ARROW_BOTTOM_MIDDLE - *
- Biojs.Tooltip.ARROW_BOTTOM_RIGHT - *
- name is the unique name corresponding to an id in the tree - *
- species_name the species the annotation belong to. - *
- alignment_length the length of the alignment sequence - *
- seq_length the length of the sequence - *
- domains array of objects defining the intervals which belongs to the annotation. - *
- domains[i].domain_start domain's start position - *
- domains[i].domain_end domain's stop position. - *
- domains[i].name name of the domain, e.g. BRCA-2_OB1 . - *
- domains[i].id the domain's id in the source database. Here, e.g. PF09103.5 - *
- domains[i].evalue the domains evalue - *
-
- *
- * @param {static} [position=Biojs.Tooltip.ELEMENT_POSITION]
- * Position is calculated through either mouse position or element position.
- * Allowed values are: Biojs.Tooltip.ELEMENT_POSITION or Biojs.Tooltip.MOUSE_POSITION
- *
- * @param {int} [delay=200]
- * Time interval in milliseconds starting on mouse exiting from element/Tooltip until the Tooltip hides itself.
- *
- * @example
- * // These examples use the component's example div 'YourOwnDivId' to draw the links only.
- * jQuery('#YourOwnDivId')
- * .append('Pass the mouse over here.')
- * .css({
- * 'display': 'table-cell',
- * 'vertical-align': 'middle',
- * 'text-align': 'center',
- * 'width': '730px',
- * 'height': '400px'
- * });
- *
- * // Tooltip will come out whenever mouse enter to any anchor 'a' with class 'example'
- * var simpleTip = new Biojs.Tooltip({
- * targetSelector: "a.example"
- * });
- *
- * //
- * // Another example using rendering function instead of 'title' attribute
- * //
- * jQuery('#YourOwnDivId')
- * .append('
This example change the tooltip direction
for each mouse entry.'); - * - * // Tooltip will come out whenever mouse enter to any anchor 'a' with class 'example' - * var tipRendered = new Biojs.Tooltip({ - * targetSelector: "a.example.render", - * cbRender: function( element ) { - * return "Tooltip type Biojs.Tooltip.ARROW_" + this.getArrowType().toUpperCase() + " using rendering function to build up content dynamically" - * } - * }); - * - * // Changes the tooltip's direction - * var counter = 0; - * var arrowTypes = [ - * Biojs.Tooltip.ARROW_LEFT_TOP, - * Biojs.Tooltip.ARROW_LEFT_MIDDLE, - * Biojs.Tooltip.ARROW_LEFT_BOTTOM, - * Biojs.Tooltip.ARROW_TOP_LEFT, - * Biojs.Tooltip.ARROW_TOP_MIDDLE, - * Biojs.Tooltip.ARROW_TOP_RIGHT, - * Biojs.Tooltip.ARROW_RIGHT_TOP, - * Biojs.Tooltip.ARROW_RIGHT_MIDDLE, - * Biojs.Tooltip.ARROW_RIGHT_BOTTOM, - * Biojs.Tooltip.ARROW_BOTTOM_LEFT, - * Biojs.Tooltip.ARROW_BOTTOM_MIDDLE, - * Biojs.Tooltip.ARROW_BOTTOM_RIGHT - * ]; - * - * // Changes the Tooltip arrow type dynamically - * jQuery('#YourOwnDivId a.example.render').mouseover( function() { - * var arrowType = arrowTypes[ counter++ % 12 ]; - * tipRendered.setArrowType( arrowType ); - * }); - * - * // - * // Another example using rich content - * // - * jQuery('#YourOwnDivId') - * .append('
Rich content'); - * - * var richContent = - * '
'+
- * '
'+
- * '
';
- *
- * var tipRich = new Biojs.Tooltip({
- * targetSelector: "a.example.rich",
- * cbRender: function( element ) {
- * return richContent;
- * },
- * arrowType: Biojs.Tooltip.ARROW_BOTTOM_MIDDLE
- * });
- *
- * //
- * // Last example using mouse position instead of element's
- * //
- * jQuery('#YourOwnDivId')
- * .append('Santiago de Cali
' + - * ''+
- * ''+ - * 'Simply referred to as Cali, is a city located in western Colombia '+ - * 'It is the capital of the Valle del Cauca Department. With a population of 2.5 million, '+ - * 'Cali is the third largest city in the country, after Bogota and Medellin. The city '+ - * 'was founded on 25 July 1536.
Tooltip changes with mouse positioning.'); - * - * var tipPosition = new Biojs.Tooltip({ - * targetSelector: "a.example.position", - * position: Biojs.Tooltip.MOUSE_POSITION - * }); - * - **/ -Biojs.Tooltip = Biojs.extend ( -/** @lends Biojs.Tooltip# */ -{ - constructor: function (options) { - - var self = this; - var arrowType = this.opt.arrowType; - - this._container = jQuery('').addClass("Tooltip"); - - this._arrow = jQuery('').appendTo( self._container ); - this._body = jQuery('').appendTo( self._container ); - - this._container.appendTo('body'); - - this._initialize(); - }, - - /** - * Default values for the options - * @name Biojs.Tooltip-opt - */ - opt: { - targetSelector: "a", - cbRender: undefined, - arrowType: "left_top", - position: 2, // ELEMENT_POSITION - delay: 200 - }, - - /** - * Array containing the supported event names - * @name Biojs.Tooltip-eventTypes - */ - eventTypes: [ - /** - * @name Biojs.Tooltip#onShowUp - * @event - * @param {function} actionPerformed A function which receives an {@link Biojs.Event} object as argument. - * @eventData {Object} source The component which did triggered the event. - * @eventData {string} type The name of the event. - * @eventData {string} target Target element. - * - * @example - * simpleTip.onShowUp( - * function( e ) { - * alert("Mouse has passed over the first example."); - * } - * ); - * - */ - "onShowUp" - ], - - _initialize: function( ) { - - var self = this; - var timer = 0; - var targetSelector = this.opt.targetSelector; - var cbRender = this.opt.cbRender; - var refPos = this.opt.position; - var target; - - // Get the text from the title attribute by default - if ( "function" != typeof cbRender ) { - cbRender = function( element ) { - return jQuery( element ).attr('title'); - } - } - - // Add the class to the arrow - //arrow.addClass( self.opt.arrowType.match(/^(left|top|right|bottom)/g)[0] ); - this.setArrowType( this.opt.arrowType ); - - // Positioning - this._arrow.css({ - "position": "absolute", - "z-index": "99999" - }); - - this._body.css({ - 'position': 'absolute', - 'z-index': '99998', - 'margin': '0px' - }); - - if ( refPos == Biojs.Tooltip.MOUSE_POSITION ) { - jQuery( targetSelector ).mousemove( function (e) { - - target = jQuery(e.target); - - if (timer) { - clearTimeout(timer); - } - timer = 0; - - // Set the content - content = cbRender.call( self, e.target ); - - self._body.html( content ); - - // Show up - self._show(); - - // Positioning - self._setPosition( - { left: e.pageX - 10, top: e.pageY - 10 }, - { width: 20, height: 20 } - ); - - // Event triggering - self.raiseEvent( Biojs.Tooltip.EVT_ON_SHOW_UP, { 'target': target }); - - }).mouseout( function() { - timer = setTimeout( 'Biojs.getInstance(' + self.getId() + ')._hide()' , self.opt.delay ); - }); - - } else { - jQuery( targetSelector ).mouseover( function (e) { - - target = jQuery(e.target); - - if (timer) { - clearTimeout(timer); - } - timer = 0; - - // Set the content - content = cbRender.call( self, e.target ); - - self._body.html( content ); - - // Show up - self._show(); - - // Positioning - self._setPosition( - target.offset(), - { width: target.width(), height: target.height() } - ); - - // Event triggering - self.raiseEvent( Biojs.Tooltip.EVT_ON_SHOW_UP, { 'target': target }); - - }).mouseout( function() { - timer = setTimeout( 'Biojs.getInstance(' + self.getId() + ')._hide()' , self.opt.delay ); - }); - } - - self._container.mouseover( function(){ - clearTimeout(timer); - timer = 0; - self._show(); - - }).mouseout( function() { - timer = setTimeout( 'Biojs.getInstance(' + self.getId() + ')._hide()' , self.opt.delay ); - }); - - this._hide(); - }, - - _hide: function() { - this._container.hide(); - }, - - _show: function() { - this._container.show(); - }, - - _setPosition: function ( offset, dim ) { - - var arrow = this._arrow; - var arrowType = this.opt.arrowType; - var arrowPos = { top: offset.top, left: offset.left }; - - var body = this._body; - var bodyPos = {}; - - arrow.removeClass(); - arrow.addClass( 'arrow ' + arrowType.match(/^(left|top|right|bottom)/g)[0] ); - - if ( arrowType == Biojs.Tooltip.ARROW_LEFT_TOP ) { - - arrowPos.top += Math.floor(dim.height/2) - Math.floor(arrow.height()/2); - arrowPos.left += arrow.width() + dim.width ; - - bodyPos.left = arrowPos.left + arrow.width() - 1; - bodyPos.top = arrowPos.top + Math.floor(arrow.height()/2) - Math.floor(body.height()/4); - - } else if ( arrowType == Biojs.Tooltip.ARROW_LEFT_MIDDLE ) { - - arrowPos.top += Math.floor(dim.height/2) - Math.floor(arrow.height()/2); - arrowPos.left += arrow.width() + dim.width ; - - bodyPos.left = arrowPos.left + arrow.width() - 1; - bodyPos.top = arrowPos.top + Math.floor(arrow.height()/2) - Math.floor(body.height()/2); - - } else if ( arrowType == Biojs.Tooltip.ARROW_LEFT_BOTTOM ) { - - arrowPos.top += Math.floor(dim.height/2) - Math.floor(arrow.height()/2); - arrowPos.left += arrow.width() + dim.width ; - - bodyPos.left = arrowPos.left + arrow.width() - 1; - bodyPos.top = arrowPos.top + Math.floor(arrow.height()/2) - Math.floor(body.height()*(3/4)); - - } else if ( arrowType == Biojs.Tooltip.ARROW_TOP_LEFT ) { - - arrowPos.top += dim.height; - arrowPos.left += Math.floor(dim.width/2) - Math.floor(arrow.width()/2); - - bodyPos.left = arrowPos.left + Math.floor(arrow.height()/2) - Math.floor(body.width()/4); - bodyPos.top = arrowPos.top + arrow.height() -1; - - } else if ( arrowType == Biojs.Tooltip.ARROW_TOP_MIDDLE ) { - - arrowPos.top += dim.height; - arrowPos.left += Math.floor(dim.width/2) - Math.floor(arrow.width()/2); - - bodyPos.left = arrowPos.left + Math.floor(arrow.height()/2) - Math.floor(body.width()/2); - bodyPos.top = arrowPos.top + arrow.height() -1; - - } else if ( arrowType == Biojs.Tooltip.ARROW_TOP_RIGHT ) { - - arrowPos.top += dim.height; - arrowPos.left += Math.floor(dim.width/2) - Math.floor(arrow.width()/2); - - bodyPos.left = arrowPos.left + Math.floor(arrow.height()/2) - Math.floor( body.width()*(3/4) ); - bodyPos.top = arrowPos.top + arrow.height() -1; - - } else if ( arrowType == Biojs.Tooltip.ARROW_RIGHT_TOP ) { - - arrowPos.top += Math.floor(dim.height/2) - Math.floor(arrow.height()/2); - arrowPos.left -= arrow.width(); - - bodyPos.left = arrowPos.left - body.outerWidth() +1; - bodyPos.top = arrowPos.top + Math.floor(arrow.height()/2) - Math.floor(body.height()/4); - - } else if ( arrowType == Biojs.Tooltip.ARROW_RIGHT_MIDDLE ) { - - arrowPos.top += Math.floor(dim.height/2) - Math.floor(arrow.height()/2); - arrowPos.left -= arrow.width(); - - bodyPos.left = arrowPos.left - body.outerWidth() +1; - bodyPos.top = arrowPos.top + Math.floor(arrow.height()/2) - Math.floor(body.height()/2); - - } else if ( arrowType == Biojs.Tooltip.ARROW_RIGHT_BOTTOM ) { - - arrowPos.top += Math.floor(dim.height/2) - Math.floor(arrow.height()/2); - arrowPos.left -= arrow.width(); - - bodyPos.left = arrowPos.left - body.outerWidth() +1; - bodyPos.top = arrowPos.top + Math.floor(arrow.height()/2) - Math.floor(body.height()*(3/4)); - - } else if ( arrowType == Biojs.Tooltip.ARROW_BOTTOM_LEFT ) { - - arrowPos.top -= arrow.height(); - arrowPos.left += Math.floor(dim.width/2) + Math.floor(arrow.width()/2); - - bodyPos.left = arrowPos.left + Math.floor(arrow.width()/2) - Math.floor(body.width()/4); - bodyPos.top = arrowPos.top - body.outerHeight() +1; - - } else if ( arrowType == Biojs.Tooltip.ARROW_BOTTOM_MIDDLE ) { - - arrowPos.top -= arrow.height(); - arrowPos.left += Math.floor(dim.width/2) - Math.floor(arrow.width()/2); - - bodyPos.left = arrowPos.left + Math.floor(arrow.width()/2) - Math.floor(body.width()/2); - bodyPos.top = arrowPos.top - body.outerHeight() +1; - - } else if ( arrowType == Biojs.Tooltip.ARROW_BOTTOM_RIGHT ) { - - arrowPos.top -= arrow.height(); - arrowPos.left += Math.floor(dim.width/2) - Math.floor(arrow.width()/2); - - bodyPos.left = arrowPos.left + Math.floor(arrow.width()/2) - Math.floor(body.width()*(3/4)); - bodyPos.top = arrowPos.top - body.outerHeight() +1; - } - - this._arrow.css( arrowPos ); - this._body.css( bodyPos ); - }, - - /** - * Changes the Tooltip direction. The point of reference is the arrow's type. - * Choose one of the following available types: - *
-
- *
-
- *
- * @param {static} arrowType Static Biojs.Tooltip.ARROW_[TYPE] value.
- *
- * @example
- * simpleTip.setArrowType(Biojs.Tooltip.ARROW_BOTTOM_RIGHT);
- *
- */
- setArrowType: function( arrowType ) {
-
- var newClass = arrowType.match(/^(left|top|right|bottom)/g)[0];
-
- if ( newClass !== undefined ) {
- this.opt.arrowType = arrowType;
- }
- },
- /**
- * Returns the actual arrow type.
- * @returns {static} Static Biojs.Tooltip.ARROW_[TYPE] value.
- *
- * @example
- * alert ( "First example is using " + simpleTip.getArrowType() + " arrow." );
- *
- */
- getArrowType: function( arrowType ) {
- return this.opt.arrowType;
- },
-
- /**
- * Returns the actual id attribute value.
- * @returns {string} DOM element identifier of this component.
- *
- * @example
- * alert ( "Identifier of the second example is " + tipRendered.getIdentifier() + "." );
- *
- */
- getIdentifier: function( ) {
- return this._container.attr('id');
- },
-
- /**
- * Sets the id attribute value.
- * @param {string} DOM element identifier for this component.
- *
- * @example
- * tipRendered.setIdentifier("MyIdentifier");
- *
- */
- setIdentifier: function( value ) {
- return this._container.attr( 'id', value );
- }
-
-
-},{
- // Arrows height: 12px width: 7px;
- ARROW_LEFT_TOP: "left_top",
- ARROW_LEFT_MIDDLE: "left_middle",
- ARROW_LEFT_BOTTOM: "left_bottom",
- ARROW_TOP_LEFT: "top_left",
- ARROW_TOP_MIDDLE: "top_middle",
- ARROW_TOP_RIGHT: "top_right",
- ARROW_RIGHT_TOP: "right_top",
- ARROW_RIGHT_MIDDLE: "right_middle",
- ARROW_RIGHT_BOTTOM: "right_bottom",
- ARROW_BOTTOM_LEFT: "bottom_left",
- ARROW_BOTTOM_MIDDLE: "bottom_middle",
- ARROW_BOTTOM_RIGHT: "bottom_right",
-
- // Events
- EVT_ON_SHOW_UP: "onShowUp",
-
- MOUSE_POSITION: 1,
- ELEMENT_POSITION: 2
-
-});
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.Tree.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.Tree.js
deleted file mode 100755
index fbe64772ad..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.Tree.js
+++ /dev/null
@@ -1,3113 +0,0 @@
-/**
- * Tree component
- *
- * @class
- * @extends Biojs
- *
- * @author Fabian Schreiber
- * @version 1.0.0
- * @category 3
- *
- * @requires jQuery Core 1.9.2
- * @dependency
- *
- * @requires jQuery Tipsy
- * @dependency
- *
- * @requires D3
- * @dependency
- * @requires Additional tree functions
- * @dependency
-
- * @requires BioJS Tree css
- * @dependency
-
- * @requires jQuery Tipsy
- * @dependency
- *
- *
- * @param {Object} options An object with the options for Tree component.
- *
- * @option {string} target
- * Identifier of the DIV tag where the component should be displayed.
- *
- *
- * @option {file} tree
- * JSON that contains the tree information.
- *
- * [
- * //
- * { name: <name>,
- * display_label: <display_label>,
- * duplication: <duplication>,
- * branch_length: <endVal1>,
- * common_name: <common_name>,
- * seq_length: <seq_length>,
- * type: <type>,
- * uniprot_name: <uniprot_name>,
- *
- * children: []},
- * //
- * // Any others nodes
- * ...,
- * //
- * ]
- *
- *
- * tree : [
- * {"name":"Amniota_1","branch_length":"0.2212","binary_alignment":"N/A","children": [..]
- * ,"common_name":"Chicken","seq_length":3397,"swissprot_gene_name":"N/A","display_label":"BRCA2"}
- * ]
- *
- *
- * @option {file} domains_file
- * Set of annotations for the leaves of the tree. Must be an array of objects following the syntax:
- *
- * [
- * // An annotation:
- * { name: <name>,
- * species_name: <message>,
- * alignment_length: <message>,
- * seq_length: <message>,
- * cigar_string: <color_code>,
- * domains: [{ name: name; domain_start: <startVal1>, domain_end: <endVal1> id: <HTMLColor> name : name}, ...,{ start: <startValN>, end: <endValN>, color: <HTMLColor>}]
- * },
- *
- * // ...
- * // more annotations here
- * // ...
- * ]
- *
- *
- * tree : [
- * {
- * "cigar_string" : "4D22MD23M3D10MD13M2D44M2D23M3D7MD13M11D16MD57M5D27MD26M2D3M9D8MD9M2D3MD12MD11M2D10M3D3MD2MDMD9MD19M4D2MD17MD10MD24M5D7MD3MD24MD19MD10M3D6M10D26M6D5M2D17M12D11M2D10M2D52M2D7M2D12MD7M5D22M2D4M2D10M3D46MD20MD6M4D4M2D3M3DM2D11M4D4MDM2D4MDMD3MD5M4D5MD9M5D5M2DM7D18M3D5MD2MD6MD21MD5MDM2D6MDMD2MD23MD9M5D19M7D3M2D19MD2MD7M7D14M5D13MD9MD7M3D45MD7M2D4M3D7M8D3M13D2M12D3M5D4MD35MD44M3D2M2D18M15D17MD18M8D4M8DMD21MD36MD17MD2MD25M2D19MD6MD2MD3MD12M6D12MD21M4D11MD17MD18M2D79MD55M2D18M2D30M4D5MD5MD8MD11MD23MD42M8D26M4DMD25MD6M5D7M2D6M2D3MD15M6DMD14MD32M10D3MD6M5D43M3D13MD21MD6MD6M3D3MD8MD10M7D11M4D23M10D44MD12M5D4MDM3D19M13D34MD4MD15MD2MD6MD53M4D2MD10MD38MD13MD25MD104M3D62M2D15M5D5M6D37M2D6MDMD234MD3MD162MD11M2D30M2D45MD20MD2MD100M13D25M4D20M4D78M8D62MD38MD2MD8MD3MD4MD5MD41MD3MD4M16D11M2DM3D38M2D",
- * "species_name" : "Ailuropoda_melanoleuca",
- * "alignment_length" : 4010,
- * "domains" : [ ..]
- * "seq_length" : 3460,
- * "name" : "ENSAMEP00000009909"}
- * ]
- *
- *
- * where:
- * -
- *
Loading tree data...Loading annotation data...| "+d.xref.protein_id+" | "} - else {table_html += ""} - if(d.xref.sf_name){table_html += " | "+d.xref.sf_name+" | "} - else {table_html += ""} - if(d.xref.definition){table_html += " | "+d.xref.definition+" | "} - else {table_html += ""} - if(d.xref.gene_id){table_html += " | "+d.xref.gene_id+" | "} - else {table_html += ""} - if(d.xref.molecular_function){table_html += " | "+d.xref.molecular_function+" | "} - else {table_html += ""} - if(d.xref.biological_process){table_html += " | "+d.xref.biological_process+" | "} - else {table_html += ""} - if(d.xref.cellular_component){table_html += " | "+d.xref.cellular_component+" | "} - else {table_html += ""} - if(d.xref.protein_class){table_html += " | "+d.xref.protein_class+" | "} - else {table_html += ""} - - } - table_html += " |
'+
- // ' '+
- // ' | '+
-
- //''+
- ' internal nodes: '+
- ''+
- ' '+
- ''+
- //' | '+
- //''+
- ''+
- ' '+
- ''+
- //' | '+
- //''+
- ''+
- ' '+
- ''+
- //' | '+
-
- //''+
- ''+
- ' '+
- ''+
- //' | '+
-
- // ''+
- // ' '+
- // ' | '+
- // ''+
- // ' '+
- // ' | '+
-
- // ''+
- // ''+
- // ' '+
-// ''+
-// ' | '+
-// ''+
-// ''+
-// ' '+
-// ''+
-// ' | '+
-
-
- //''+
- // ''+
- // ' '+
- // ''+
- //' | '+
- //''+
- 'leaves: '+
- ''+
- ' '+
- ''+
- //' | '+
-
- //''+
- // ''+
- // ''+
- // ''+
- //' | '+
- //''+
- ''+
- ''+
- ''+
- //' | '+
- //''+
- ''+
- ' '+
- ''
- //' | '+
- // ''+
- // ''+
- // ' '+
- // ''+
- // ' | '+
- // ''+
- // ''+
- // ' '+
- // ''+
- // ' | '+
-
-
-
-
-
-
-
- //'
Lappen
').appendTo('#tv_controls'); - Biojs.console.enable("finished building div"); - //jQuery('').appentTo(jQuery("#tv_controls")); - - - // font size - jQuery('img.increase_font').click(function() { - self.opt.fontSize = parseInt(self.opt.fontSize) + 1 + "px"; - d3.select("svg").selectAll(".text").attr("font-size", function(d){ return self.opt.fontSize; }); - }); - - jQuery('img.decrease_font').click(function() { - self.opt.fontSize = parseInt(self.opt.fontSize) - 1 + "px"; - d3.select("svg").selectAll(".text").attr("font-size", function(d){ return self.opt.fontSize; }); - }); - - - - }, - /* - * Shows the columns indicated by the indexes array. - * @param {string} seq The sequence strand. - * @param {string} [identifier] Sequence identifier. - * - * @example - * myTree.__setModelOrganisms(); - * - */ - _setTaxaToShow: function (){ - - var show_taxa = new Object(); - show_taxa['Metazoa'] = 1; - show_taxa['Bilateria'] = 1; - show_taxa['Mammalia'] = 1; - show_taxa['Dipteria'] = 1; - show_taxa['Primates'] = 1; - show_taxa['Arabidopsis_thaliana'] = 1; - - - this.opt.show_taxa = show_taxa; - }, - __drawProteinDomains: function (){ - Biojs.console.enable("drawing protein domains"); - // Sequences - var rects = draw_sequences({nodeEnter: this.nodeEnter, - domainScale : this.opt.domainScale , - leaf_group_x : this.opt.leaf_group_x, - sequence_start_y : this.opt.sequence_start_y, - visibility : ""}); - // Domains - var domains = rects.selectAll(".domain").data(function(d) { return d.domains; }) - var all_domains = draw_domains({domains : domains, - sequence_start_y : this.opt.sequence_start_y, - domainScale: this.opt.domainScale, - sequence_rect_width : this.opt.sequence_rect_width, - leaf_group_x : this.opt.leaf_group_x, - domain_colors : this.opt.domain_colors, - visibility: "" }); - - } -}, -{ - EVT_ON_SELECTION_CHANGE: "onSelectionChange", - EVT_ON_SELECTION_CHANGED: "onSelectionChanged", - EVT_ON_ANNOTATION_CLICKED: "onAnnotationClicked" - -}); - - diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.UniProtDiseaseSummary.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.UniProtDiseaseSummary.js deleted file mode 100755 index eb8d0934d5..0000000000 --- a/src/lib/biojs-1.0/src/main/javascript/Biojs.UniProtDiseaseSummary.js +++ /dev/null @@ -1,375 +0,0 @@ -/** - * Component to present UniProt disease information. - * - * @class - * @extends Biojs - * - * @author Rafael C Jimenez - * @version 1.0.0 - * @category 2 - * - * @requires jQuery 1.7.2 - * @dependency - * - * - * @requires Biojs.UniProtDiseaseSummary.css - * @dependency - * - * - * @param {Object} options An object with the options for this component. - * - * @option {string} target - * Identifier of the DIV tag where the component should be displayed. - * - * @option {string} uniProtDasUrl - * Url pointing to an XML including UniProt infomration in DAS format - * - * @option {string} keywordFiltereing [['cancer','brain']] - * List of keywords to filter disease information - * - * @option {string} [proxyUrl='../biojs/dependencies/proxy/proxy.php'] - * Since the same origin policy ({@link http://en.wikipedia.org/wiki/Same_origin_policy}) in the browsers - * Biojs include a proxy script in PHP which redirects Ajax requests from local to any other domain. - * You can use tour own proxy script by modifying this value. - * - * @option {string} width [100%] - * Defines the width of the component - * - * @option {string} referencesColumnWidth [200px] - * Defines the width of the columns with reference links - * - * @option {boolean} tableHeader - * Boolean value to control the display of the table header - * - * @option {boolean} componentTitle - * Boolean value to control the display of the title of the component - * - * @example - * var instance = new Biojs.UniProtDiseaseSummary({ - * target: 'YourOwnDivId', - * uniProtDasUrl: 'http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/features?segment=P08123;type=BS:01019', - * keywordFiltereing: ['osteogenesis','lipoblastoma'], - * proxyUrl: '../biojs/dependencies/proxy/proxy.php', - * width: '100%', - * referencesColumnWidth: '150px', - * tableHeader: false, - * componentTitle: false - * }); - * - */ - - -Biojs.UniProtDiseaseSummary = Biojs.extend ( - /** @lends Biojs.UniProtDiseaseSummary# */ - { - constructor: function (options) { - //Biojs.console.enable(); - this.setUniProtDasUrl(this.opt.uniProtDasUrl); - this._component_wrapper_id = "UDS_component_wrapper"; - }, - - /** - * Set an URL to start the query and visualization - * @param {string} uniProtDasUrl DAS XML - * - * @example - * instance.setUniProtDasUrl("http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/features?segment=P37173;type=BS:01019"); - * - * @example - * instance.setUniProtDasUrl("http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/features?segment=P08123;type=BS:01019"); - * - */ - - setUniProtDasUrl: function(uniProtDasUrl){ - var self = this; - self._clearHtmlTemplate(); - /* URL where to get DAS XML */ - self._url; - if(self.opt.proxyUrl != ""){ - self._url= self.opt.proxyUrl + "?url=" + uniProtDasUrl; - } else { - self._url= uniProtDasUrl; - } - - /* get XML */ - jQuery.ajax({ - type: "GET", - url: self._url, - dataType: "xml", - success: function(a){self._processDasUniProtXml(a);}, - error: function(a){self._processErrorRequest(a);} - }); - }, - /* - * Function: Biojs.UniProtDiseaseSummary._processErrorRequest - * Purpose: Process request error - * Returns: - - * Inputs: textStatus -> {String} Text satus - */ - _processErrorRequest: function (textStatus){ - var self = this; - Biojs.console.log("ERROR: " + textStatus ); - self.raiseEvent( Biojs.UniProtDiseaseSummary.EVT_ON_REQUEST_ERROR, { message: textStatus } ); - }, - /* - * Function: Biojs.UniProtDiseaseSummary._drawHtmlTemplate - * Purpose: Create HTML template - * Returns: - - * Inputs: - - */ - _drawHtmlTemplate: function (){ - var _selector = "#" + this.opt.target; - var _container = jQuery(_selector); - var _tableTitle = jQuery('').appendTo(_container); - jQuery("").appendTo(_tableTitle); - jQuery("").appendTo(_tableTitle); - }, - /* - * Function: Biojs.UniProtDiseaseSummary._clearHtmlTemplate - * Purpose: Remove component content - * Returns: - - * Inputs: - - */ - _clearHtmlTemplate: function (){ - var _selector = "#" + this.opt.target; - var _container = jQuery(_selector).html(''); - }, - /* - * Function: Biojs.UniProtDiseaseSummary._drawComponentTitle - * Purpose: Draw component title - * Returns: - - * Inputs: - - */ - _drawComponentTitle: function (){ - if(this.opt.componentTitle){ - var _selector = "#" + this._component_wrapper_id; - var _container = jQuery(_selector); - var _tableTitle = jQuery("Involvement in disease
").appendTo(_container);
- }
- },
- /*
- * Function: Biojs.UniProtDiseaseSummary._drawComments
- * Purpose: Draw disease main summary using UniProt disease comments
- * Returns: -
- * Inputs: -
- */
- _drawComments: function (){
- var _container = jQuery("#UDS_info");
- var _tableWrapper = jQuery("");
- var _table = jQuery('" + omimAccs + "
";
-
- }
- /* Display Pubmed */
- for (k = 0; k < this._comments[i].pubmedAccs.length; k++) {
- pubmedAccs += '' + this._comments[i].pubmedAccs[k] + ', ';
- }
- if (pubmedAccs.length > 0) {
- pubmedAccs = pubmedAccs.substring(0, pubmedAccs.length - 2);
- pubmedAccs = "Links to Pubmed:" + pubmedAccs + "
";
-
- }
- jQuery("Keywords: " + links + "
";
- jQuery(links).appendTo(_container);
- } else {
- var _info = jQuery("#UDS_info").html();
- if(_info.length > 0){
- jQuery("#UDS_warnings").html("No disease keywords or notes found for this query");
- } else {
- jQuery("#UDS_warnings").html("No disease keywords found for this query");
- }
- }
-
- },
-
-
- /*
- * Function: Biojs.UniProtDiseaseSummary._processUniProtXml
- * Purpose: process XML
- * Returns: -
- * Inputs: xml -> {String} DAS XML
- */
- _processDasUniProtXml: function (xml){
- Biojs.console.log("SUCCESS: data received");
- this._keywords = new Array();
- this._comments = new Array();
- var self = this;
- jQuery(xml).find("FEATURE").each(function(){
- var xmlType = jQuery(this).find("TYPE")[0];
- var featureCategory = jQuery(xmlType).attr("category");
- if(featureCategory.toLowerCase() == "keyword"){
- self._setKeyword(this);
- } else if (featureCategory.toLowerCase() == "comment"){
- self._setComment(this);
- }
-
- });
- this._drawHtmlTemplate();
- this._drawComponentTitle()
- this._drawComments();
- this._drawKeywords();
- },
- /*
- * Function: Biojs.UniProtDiseaseSummary._setKeyword
- * Purpose: parse keyword information
- * Returns: -
- * Inputs: featureXml -> {String} DAS XML
- */
- _setKeyword: function (featureXml){
- var keyword = new Object();
- keyword.label = jQuery(featureXml).attr("label");
- keyword.link = "http://www.uniprot.org/keywords/?query=" + jQuery(featureXml).attr("label");
- this._keywords.push(keyword);
- },
- /*
- * Function: Biojs.UniProtDiseaseSummary._setComment
- * Purpose: parse comment information
- * Returns: -
- * Inputs: featureXml -> {String} DAS XML
- */
- _setComment: function (featureXml){
- /* Find OMIM accs and notes */
- var diseaseHeader = "DISEASE: ";
- var comment = new Object();
- comment.omimAccs = new Array();
- comment.pubmedAccs = new Array();
- comment.notes = new Array();
- jQuery(featureXml).find("NOTE").each(function(){
- var omimPatern = /\[MIM\:[0-9]*\]/i; //[MIM:166200]
- var note = jQuery(this).text();
- if (note.indexOf(diseaseHeader) == 0) {
- note = note.substring(diseaseHeader.length,note.length);
- }
- if(note.match(omimPatern) != null){
- var omim = note.match(omimPatern)[0];
- var omimIndexStart = note.indexOf(omim);
- var omimIndexEnd = parseInt(omimIndexStart) + omim.length;
- note = note.substring(0,omimIndexStart-1) + note.substring(omimIndexEnd,note.length);
- comment.omimAccs.push(omim.substring(5,omim.length-1));
- }
- comment.notes.push(note);
- });
- /* Find Pubmed accs */
- jQuery(featureXml).find("LINK").each(function(){
- var linkHref = jQuery(this).attr("href");
- pubmedAcc ="";
- var pubmedUrl = "http://www.ncbi.nlm.nih.gov/pubmed/";
- var pubmedUrlIndex = linkHref.indexOf(pubmedUrl);
- if(pubmedUrlIndex == 0){
- pubmedAcc = linkHref.substring(pubmedUrl.length,linkHref.length);
- comment.pubmedAccs.push(pubmedAcc);
- }
- });
- this._comments.push(comment);
- Biojs.console.log(comment.omimAccs);
- Biojs.console.log(comment.pubmedAccs);
- Biojs.console.log(comment.notes);
- },
-
-
-
- /**
- * Default values for the options
- * @name Biojs.UniProtDiseaseSummary-opt
- */
- opt: {
- target: 'uniprotDiseaseSummary',
- uniProtDasUrl: 'http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/features?segment=P08123;type=BS:01019',
- keywordFiltereing: [],
- proxyUrl: '../biojs/dependencies/proxy/proxy.php',
- width: '100%',
- referencesColumnWidth: '150px',
- tableHeader: false,
- componentTitle: false
- },
- /**
- * Array containing the supported event names
- * @name Biojs.UniProtDiseaseSummary-eventTypes
- */
- eventTypes: []
-});
\ No newline at end of file
diff --git a/src/lib/biojs-1.0/src/main/javascript/Biojs.js b/src/lib/biojs-1.0/src/main/javascript/Biojs.js
deleted file mode 100755
index b09b92ccb2..0000000000
--- a/src/lib/biojs-1.0/src/main/javascript/Biojs.js
+++ /dev/null
@@ -1,727 +0,0 @@
-/**
- * Main container of the BioJS library. It is the parent class for all the components.
- *
- * @namespace
- *
- */
-var Biojs = function() {
- // dummy
-};
-
-/**
- * @class
- * @param {string} eventType The name of the event.
- */
-Biojs.EventHandler = function(eventType) {
- /**
- * The name of the event.
- * @type {string}
- */
- this.eventType = eventType;
- /**
- * Array of the registered listeners.
- * @type {function[]}
- */
- this.listeners = [];
- /**
- * Register action listeners for the event.
- * @param {function} actionPerformed The action listener to be registered.
- */
- this.addListener = function ( actionPerformed ) {
- if ( (typeof actionPerformed) == "function" ) {
- this.listeners.push(actionPerformed);
- }
- };
- /**
- * Removes an action listener for the event.
- * @param {function} actionPerformed The action listener to be removed.
- */
- this.removeListener = function ( actionPerformed ) {
- if ( (typeof actionPerformed) == "function" ) {
- var pos = Biojs.Utils.indexOf(this.listeners,actionPerformed);
- if (pos!=-1)
- this.listeners.splice(pos,1);
- }
- };
- /**
- * Executes all listener actions registered in the listeners field.
- * @param {Object} eventObject The event' object to be passed as argument to the listeners.
- */
- this.triggerEvent = function( eventObject ) {
- for ( var i in this.listeners ) {
- this.listeners[i](eventObject);
- }
- }
-};
-
-/**
- * @class
- * @param {string} type The name of the event.
- * @param {Object} data An object containing the data for copying it in this event.
- * @param {Biojs} source The component source of the event.
- */
-Biojs.Event = function ( type, data, source ) {
-
- /**
- * The component which did triggered the event.
- * @type {Biojs}
- */
- this.source = source;
- /**
- * The name of the event.
- * @type {string}
- */
- this.type = type;
-
- for ( var key in data ) {
- this[key] = data[key];
- }
-};
-
-/**
- * @class
- *
- */
-Biojs.Utils = {
- /**
- * Clone all members from an object.
- * @param {object} object The object to be cloned.
- * @returns {object} A Clone of the object passed as argument.
- *
- */
- clone: function(obj) {
- var newObj = (obj instanceof Array) ? [] : {};
- for (i in obj) {
- if (obj[i] && typeof obj[i] == "object") {
- newObj[i] = Biojs.Utils.clone(obj[i]);
- } else {
- newObj[i] = obj[i];
- }
- }
- return newObj;
- },
-
- /**
- * Determine if an onject or array is empty.
- * @param {object|array} o Either object or array to figure out if empty or not.
- * @returns {bool} true if empty, false if don't
- */
- isEmpty: function(o){
- if (o instanceof Array) {
- return (o.length<=0);
- } else {
- for (var i in o) {
- if (o.hasOwnProperty(i)) {
- return false;
- }
- }
- return true;
- }
- },
-
- /**
- * Searches the array for the specified item, and returns its position.
- * The search will start at the specified position, or at the beginning if no start position is specified,
- * and end the search at the end of the array.
- *
- * Returns -1 if the item is not found.
- * If the item is present more than once, the indexOf method returns the position of the first occurence.
- *
- * indexOf is not supported in IE < v9
- *
- * @param {array} The array containing the element to look for.
- * @param {object} Required. The item to search for.
- * @param {int} Optional. Where to start the search.
- */
- indexOf : function(elem, arr, i){
- var len;
-
- if ( arr ) {
- if ( indexOf ) {
- return indexOf.call( arr, elem, i );
- }
-
- len = arr.length;
- i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
-
- for ( ; i < len; i++ ) {
- // Skip accessing in sparse arrays
- if ( i in arr && arr[ i ] === elem ) {
- return i;
- }
- }
- }
-
- return -1;
- },
-
- /**
- * Cross-browser console for debugging.
- * The console is disabled by default. That means, all messages written by means Biojs.console.log("My Message") will be ignored.
- * Use Biojs.console.enable() to enable it.
- *
- * @example
- * // Enabling loggin messages
- * Biojs.console.enable();
- * ...
- * // Writing a log
- * Biojs.console.log("My Message");
- *
- * @type {Object}
- */
- console: {
- enable: function() {
- // Define a cross-browser window.console.log method.
- // For IE and FF without Firebug, fallback to using an alert.
- if (window.console) {
- /**
- * @ignore
- */
- // In this case, there are a console, perfect!
- this.log = function (msg) { console.log(msg) };
- } else {
- // We have not window.console, but it is Opera browser?
- if (window.opera) {
- /**
- * @ignore
- */
- // Right! then lets use window.opera.postError
- this.log = function (msg) { window.opera.postError(msg) };
- } else {
- // None console found!
- // Try to write the logs somewhere
- // That's it! in a new window, identified by 'Biojs.console'
- var consoleWin = window.open('','myconsole',
- 'width=350,height=250'
- +',menubar=0'
- +',toolbar=0'
- +',status=0'
- +',scrollbars=1'
- +',resizable=1');
-
- // We got it?
- if (consoleWin) {
- // Good, build a blank document into with a DIV 'Biojs.console'
- consoleWin.document.writeln(
- '- *
variableStep chrom=chr2 span=5 - * 10 34 - * 20 41 - * 30 46 - * 40 49 - * 50 52 - * - * ... - * - * or - * - * fixedStep chrom=chr2 start=10 step=10 span=5 - * 34 - * 41 - * 46 - * 49 - * 52 - * - * ...- * - * @option {string} [selectionBackgroundColor] - * Name of the colour to be set as background for area chart - * - */ - - -Biojs.wigExplorer = Biojs.extend( - /** @lends Biojs.wigExplorer# */ - - - { - zoomSlider: '', - slider_stop: 0, - slider_start: 0, - track: [], - width: 1, - height: 1, - data_last_start: 1, - data_first_start: 1, - max: 0, - span: null, - chrom: [], - data: [], - main_data: [], - - - constructor: function (options) { - - var self = this; - self.vis = null; - self.color = null; - self.foci = []; - - - this.track; // data - - - this._container = $("#wigFeaturePainter-holder"); - $(this._container).addClass("graph"); - - - // Apply options values - this._container.css({ - 'font-family': self.opt.fontFamily, // this is one example of the use of self instead of this - 'background-color': self.opt.selectionBackgroundColor, - 'color': self.opt.fontColor, - 'font-size': '36px', - 'text-align': 'center', - 'vertical-align': 'middle', - 'width': '700px', - 'height': '100px', - 'bottom': '0px' - }); - - // Disable text selection and - // Change the selection mouse pointer - // from text to hand. - this._container.css({ - '-moz-user-select': 'none', - '-webkit-user-select': 'none', - 'user-select': 'none' - }); - - this.color = self.opt.selectionBackgroundColor; - this.paintFeatures(self.opt.dataSet); - - }, - - /** - * Default values for the options - * @name Biojs.wigExplorer-opt - */ - opt: { - target: "YourOwnDivId", - dataSet: "", - fontFamily: '"Andale mono", courier, monospace', - fontColor: "white", - backgroundColor: "", - selectionFontColor: "black", - selectionBackgroundColor: "yellow", - width: "100%", - height: "130", - radius: 10, - reference: null - }, - - /** - * Array containing the supported event names - * @name Biojs.wigExplorer-eventTypes - */ - eventTypes: [ - /** - * No events added for now but can be added in future - */ - ], - - - /** - * Repaints everything: ruler, shapes, and legend. - * @param {int} [newStart] Zoom from this sequence start value. - * @param {int} [newStop] Zoom to this sequence end value. - * - * @example - * instance._updateDraw(); - * - */ - _updateDraw: function (newStart, newStop, target) { - var self = this; - //recalculate start and stop - if (newStart && newStop) { - this.slider_start += newStart; - this.slider_stop += newStop; - } - - if (target) { - } else { - target = self.opt.target; - } - if (this.slider_start < this.data_first_start) { - if (newStart == newStop) { - this.slider_stop += this.data_first_start - this.slider_start; - } - this.slider_start = this.data_first_start; - - } - - if (this.slider_stop > this.data_last_start) { - - if (newStart == newStop) { - this.slider_start += this.data_last_start - this.slider_stop; - } - this.slider_stop = this.data_last_start; - } - //recalculate start and stop - if ((parseFloat(this.slider_start) < parseFloat(this.slider_stop))) { - this.paintWig(this.slider_start, this.slider_stop, target); - } - }, - - /** - * 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. - * - * @example - * instance.paintFeatures("path-to-wig.txt"); - * - * @param {string} dataSet Location of the file with the input data in text format. - *
variableStep chrom=chr2 span=5 - * 10 34 - * 20 41 - * 30 46 - * 40 49 - * 50 52 - * - * ... - * - * or - * - * fixedStep chrom=chr2 start=10 step=10 span=5 - * 34 - * 41 - * 46 - * 49 - * 52 - * - * ...- * - */ - paintFeatures: function (dataSet) { - if (dataSet != undefined) { - this._setDataSource(dataSet); - this._init(); - } else { - alert('Dataset not defined '); - } - - }, - - /** - * Private: Initializes the component. - */ - _init: function () { - Biojs.wigExplorer.myself = this; - var self = this; - var painter_div = jQuery("#" + this.opt.target); - painter_div.text(''); - painter_div.append(this._withSliderOnly(100)); - - painter_div.append(''); - var holder = document.getElementById(this.opt.target + '_wigFeaturePainter-holder'); - if (!holder) { - this.$errorMsg = jQuery('') - .html('There was an unexpected failure, the image cannot be displayed.') - .dialog({ - autoOpen: true, - title: 'Error', - modal: true - }); - throw "Error"; - } - - - holder.innerHTML = ""; - holder.style.height = "250px"; - holder.style.width = "700px"; - this.width = $('#' + self.opt.target + '_wigFeaturePainter-holder').width(), - this.height = $('#' + self.opt.target + '_wigFeaturePainter-holder').height(), - this.r = self.opt.radius; - - self.opt.width = self.opt.width.toString(); - - if (self.opt.width.indexOf("%") >= 1) - self.opt.width = self.opt.width.toString(); - else - self.opt.width = parseInt(this.width); - - //had similar problem before so I used contains and it should works - self.opt.height = self.opt.height.toString(); - if (self.opt.height.indexOf("%") >= 1) - self.opt.height = self.opt.height.toString(); - if (self.opt.height.indexOf("%") != -1) - this.height = this.height * (self.opt.height.substring(0, self.opt.height.length - 1) * 1) / 100.0; - else - this.height = self.opt.height * 1; - self.opt.height = parseInt(this.height); - - self.color = function () { - return d3.scale.ordinal().range(self.colors); - }(); - - jQuery.ajax({ - type: "GET", - url: self.opt.dataSet, - dataType: "text", - success: function (data) { - var wig = []; - var max = 0 - var data_split = data.split("\n") - var data_len = data_split.length; - if (data.indexOf("variableStep") >= 0 || data.indexOf("fixedStep") >= 0) { - self.chrom = [] - for (var i = 0; i < data_len; i++) { - if (data_split[i].indexOf("chrom") >= 0) { - var chr = data_split[i].split(/\s+/)[1].split("=")[1]; - if (self.chrom.indexOf(chr) < 0) { - self.chrom.push(chr); - } - } - } - self._buildReferenceSelector(); - } else { - alert("Unknown format detected") - } - - }, - error: function (qXHR, textStatus, errorThrown) { - alert(textStatus); - } - }); - }, - - - /** - * Private: Function to create reference dropdown. - * @ignore - */ - _buildReferenceSelector: function () { - var self = this; - - this._headerDiv = jQuery('#' + self.opt.target + '_selectorMenu'); - this._headerDiv.css({ - 'font-family': '"Heveltica Neue", Arial, "sans serif"', - 'font-size': '14px' - }).append('Reference: '); - - var selector_html = "
'+m+'
'); };
-
- r.registerBinding(window, "touchmove", function(e) {
-
- var select = r.data.select;
- var capture = r.touchData.capture; //if (!capture) { return; };
- capture && e.preventDefault();
-
- var cy = r.data.cy;
- var nodes = r.getCachedNodes(); var edges = r.getCachedEdges();
- var now = r.touchData.now; var earlier = r.touchData.earlier;
-
- if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY); now[0] = pos[0]; now[1] = pos[1]; }
- if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].pageX, e.touches[1].pageY); now[2] = pos[0]; now[3] = pos[1]; }
- if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].pageX, e.touches[2].pageY); now[4] = pos[0]; now[5] = pos[1]; }
- var disp = []; for (var j=0;j'+m+'
'); };
-
- r.registerBinding(window, "touchmove", function(e) {
-
- var select = r.data.select;
- var capture = r.touchData.capture; //if (!capture) { return; };
- capture && e.preventDefault();
-
- var cy = r.data.cy;
- var nodes = r.getCachedNodes(); var edges = r.getCachedEdges();
- var now = r.touchData.now; var earlier = r.touchData.earlier;
-
- if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY); now[0] = pos[0]; now[1] = pos[1]; }
- if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].pageX, e.touches[1].pageY); now[2] = pos[0]; now[3] = pos[1]; }
- if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].pageX, e.touches[2].pageY); now[4] = pos[0]; now[5] = pos[1]; }
- var disp = []; for (var j=0;j