![](\"/entitylevelview/icons/whiteclose.png\"){kind=icon}
";
tip.className = 'cplxcompstip cplxcompstipid';
tip.id = "cplxcompstipid";
cplxNameDiv.className = 'cplxcompstip';
cplxNameDiv.id = 'cplxnamedivid';
newlyCreated = true;
}else{
tip = tip[0];
cplxNameDiv = document.getElementById('cplxnamedivid');
closetip = document.getElementById('cplxclosetip');
}
var node = this.currentCplxNode;
var components = this.complexnodes[node.userObject.id];
var cc = 3; // column count
// : how many
// cells to
// display in a
// single row
var compCount = components.length;
var rc = Math
.ceil(compCount
/ cc); // row
// count
var cellWidth = 50;
var height = (cellWidth * Math.min(3, rc))+2;
var width = (cc * cellWidth)+10;
var y = node.y;
var x = node.x;
var borderWidth = 10;
var rBlue = "rgb(176,196,222)"; // Reactome blue
// use unscaled coords for tooltip as displayTooltip
// function
// applies zoom
var unscaledLeft = ((x - (width / 2) + this.miCanvasMargin));
var unscaledTop = ((y - (height / 2) + this.miCanvasMargin));
var left = ((x - (width / 2) + this.miCanvasMargin)) * this.zoomFactor;
var top = ((y - (height / 2) + this.miCanvasMargin)) * this.zoomFactor;
tip.setStyle( {
left : left
+ "px",
top : top
+ "px",
height : height
+ "px",
width : width
+ "px",
background : this.cpbg,
visibility : "visible",
border: borderWidth + "px",
borderColor: rBlue,
zIndex : this.complexpopupZ,
borderStyle:"solid"
});
var compsTable = "";
compsTable += "";
var ieOffset = 0;
var ieNameDivMod = 0;
if(navigator.appName == "Microsoft Internet Explorer"){
if(rc <= 3){
compsTable = compsTable.replace("mvxx", "-10px");
ieOffset = 10;
}
else{
compsTable = compsTable.replace("mvxx", "0px");
ieNameDivMod = 10;
}
}
closetip
.setStyle( {
position:"absolute",
left : (left+width+9-(ieOffset*2))
+ "px",
top : (top)
+ "px",
zIndex : this.complexpopupZ,
height :12
+ "px",
width : 12
+ "px"
});
cplxNameDiv.setStyle({
left : left
+ "px",
top : (top+height+borderWidth-ieOffset)
+ "px",
width : (width + (ieNameDivMod*2))
+ "px",
background : rBlue,
zIndex : this.complexpopupZ,
border: borderWidth + "px",
borderColor: rBlue,
borderStyle:"solid",
overflow:'hidden',
textAlign : 'center',
color : 'black'
});
cplxNameDiv.innerHTML = node.userObject.name;
var cinc=0;
for ( var ri = 0; ri < rc; ri++) { // row index
compsTable += "
";
compsTable += "
";
tip.innerHTML = compsTable;
if(newlyCreated == true){
$("ficanvas")
.appendChild(tip);
$("ficanvas")
.appendChild(closetip);
$("ficanvas").appendChild(cplxNameDiv);
YAHOO.util.Event.addListener("cplxclosetip",
"mousedown", this.closetipHandler, this, true);
YAHOO.util.Event.addListener('cplxcompstipid', 'mouseout',
this.cplxmouseout, this, true);
YAHOO.util.Event.addListener('cplxcompstipid', 'mouseover',
this.cplxmouseover, this, true);
}else{
tip.setStyle({visibility: "visible", display:""});
closetip.setStyle({visibility: "visible", display : ""});
cplxNameDiv.setStyle({visibility: "visible", display:""});
}
this.cplxpopupdisplayed = true;
},
displayComplexPopupForSpeciesComparison : function(){
var tip = $("ficanvas").getElementsBySelector('div.cplxcompstip');
var cplxNameDiv = null;
var closeTip = null;
var newlyCreated = false;
// Check if cplx tip has already been created. If not, create new one.
if( tip.length == 0){
tip = Element
.extend(document
.createElement('div'));
cplxNameDiv = Element.extend(document.createElement('div'));
closetip = Element.extend(document.createElement('div'));
closetip.className = 'cplxcompstip';
closetip.id = "cplxclosetip";
closetip.title = "Close Window";
closetip.style.cursor = "pointer";
closetip.innerHTML = "| "; compsTable += " | "; break; } var p = components[cinc]; cinc++; var colour = this.expressionPainter.refIdMapping[p.refdbid]; if(!colour){ colour = this.noHitBG; }else{ var rgb = colour.dataColours.data[this.currentExperiment]; colour = 'rgb(' + this.expressionPainter.colourSpectrum[rgb].rgb[0] + ',' + this.expressionPainter.colourSpectrum[rgb].rgb[1] + ',' + this.expressionPainter.colourSpectrum[rgb].rgb[2] + ')'; } compsTable += ""; // p.name; compsTable += " | "; } compsTable += "
";
tip.className = 'cplxcompstip cplxcompstipid';
tip.id = "cplxcompstipid";
cplxNameDiv.className = 'cplxcompstip';
cplxNameDiv.id = 'cplxnamedivid';
newlyCreated = true;
}else{
tip = tip[0];
cplxNameDiv = document.getElementById('cplxnamedivid');
closetip = document.getElementById('cplxclosetip');
}
var node = this.currentCplxNode;
var components = this.complexnodes[node.userObject.id];
var cc = 3; // column count
// : how many
// cells to
// display in a
// single row
var compCount = components.length;
var rc = Math
.ceil(compCount
/ cc); // row
// count
var cellWidth = 50;
var height = (cellWidth * Math.min(3, rc))+2;
var width = (cc * cellWidth)+10;
var y = node.y;
var x = node.x;
var borderWidth = 10;
var rBlue = "rgb(176,196,222)"; // Reactome blue
// use unscaled coords for tooltip as displayTooltip
// function
// applies zoom
var unscaledLeft = ((x - (width / 2) + this.miCanvasMargin));
var unscaledTop = ((y - (height / 2) + this.miCanvasMargin));
var left = ((x - (width / 2) + this.miCanvasMargin)) * this.zoomFactor;
var top = ((y - (height / 2) + this.miCanvasMargin)) * this.zoomFactor;
tip.setStyle( {
left : left
+ "px",
top : top
+ "px",
height : height
+ "px",
width : width
+ "px",
background : this.cpbg,
visibility : "visible",
border: borderWidth + "px",
borderColor: rBlue,
zIndex : this.complexpopupZ,
borderStyle:"solid"
});
var compsTable = "";
compsTable += "";
var ieOffset = 0;
var ieNameDivMod = 0;
if(navigator.appName == "Microsoft Internet Explorer"){
if(rc <= 3){
compsTable = compsTable.replace("mvxx", "-10px");
ieOffset = 10;
}
else{
compsTable = compsTable.replace("mvxx", "0px");
ieNameDivMod = 10;
}
}
closetip
.setStyle( {
position:"absolute",
left : (left+width+9-(ieOffset*2))
+ "px",
top : (top)
+ "px",
zIndex : this.complexpopupZ,
height :12
+ "px",
width : 12
+ "px"
});
cplxNameDiv.setStyle({
left : left
+ "px",
top : (top+height+borderWidth-ieOffset)
+ "px",
width : (width + (ieNameDivMod*2))
+ "px",
background : rBlue,
zIndex : this.complexpopupZ,
border: borderWidth + "px",
borderColor: rBlue,
borderStyle:"solid",
overflow:'hidden',
textAlign : 'center',
color : 'black'
});
cplxNameDiv.innerHTML = node.userObject.name;
var cinc=0;
for ( var ri = 0; ri < rc; ri++) { // row index
compsTable += "
";
compsTable += "
";
tip.innerHTML = compsTable;
if(newlyCreated == true){
$("ficanvas")
.appendChild(tip);
$("ficanvas")
.appendChild(closetip);
$("ficanvas").appendChild(cplxNameDiv);
YAHOO.util.Event.addListener("cplxclosetip",
"mousedown", this.closetipHandler, this, true);
YAHOO.util.Event.addListener('cplxcompstipid', 'mouseout',
this.cplxmouseout, this, true);
YAHOO.util.Event.addListener('cplxcompstipid', 'mouseover',
this.cplxmouseover, this, true);
}else{
tip.setStyle({visibility: "visible", display:""});
closetip.setStyle({visibility: "visible", display : ""});
cplxNameDiv.setStyle({visibility: "visible", display:""});
}
this.cplxpopupdisplayed = true;
},
cplxmouseover : function(e){
YAHOO.util.Event.removeListener('clipwindow', 'mousemove');
},
cplxmouseout : function(e){
YAHOO.util.Event.addListener('clipwindow', 'mousemove',
this.handleMoveOverCanvas, this, true);
},
// Called by left/right arrows of experiment browser in order
// to update cells of table if displayed.
updateComplexPopup: function(){
var overlay = $("canvasoverlay");
var table = $("ficanvas").getElementsBySelector('div.cplxcompstip');
if(table.length > 0 && table[0].style.visibility == "visible"){
this.displayComplexPopup();
}
},
displayComplexTableTip : function(e, x , y, cellWidth){
if(e.target){
}else if(e.srcElement){
e.target = e.srcElement;
}
var data = e.target.id.split(":");
var dbid = data[0];
var name = data[1];
var refdbid = data[2];
var cellIndex = e.target.cellIndex;
var rowIndex = e.target.parentNode.rowIndex;
var scrollbar = document.getElementById('cplxtablediv');
// calc position of tooltip by using cell/row indexes.
// add to x,y pos of
// complex popup.
var xTip = x;
var offsetX = ((cellIndex * cellWidth) - (cellWidth/2));
// Use scroll position to adjust position of tooltip to
// account for scrolling
// down through list.
var yTip = y;
// 3 is a 'magic' number that lines the tooltips up over
// the cells in the complex
// popup table.
var offsetY = (((rowIndex* cellWidth)) - scrollbar.scrollTop) + (cellWidth/3);
// if there is no name then most likely an empty cell
// has been moused over.
if(name){
this.displayTip(dbid, cellWidth * 1.3, cellWidth * 1.3, name, xTip, yTip, offsetX, offsetY, refdbid);
}
},
closetipHandler : function(e){
document.getElementById('cplxcompstipid').setStyle({visibility: "hidden"});
document.getElementById('cplxclosetip').setStyle({visibility: "hidden"});
document.getElementById('cplxnamedivid').setStyle({visibility: "hidden"});
},
onCtxMenuItemClick : function(type, args, me) {
if(args[1] == "participatingmols"){
var refdbid = args[0];
// Hard code db for use with manually drawn diagram. Replace with
// this.db
window.open("http://www.reactome.org/cgi-bin/eventbrowser?DB="
+ this.db + "&ID=" + refdbid);
}else if(args[1] == "displayinteractors"){
var node = args[0];
this.displayInteractors(node);
}else if(args[1] == "hideinteractors"){
var node = args[0];
this.fiDisplay.hideInteractors(node);
var colour = "white";
this.controlPanel.colourRows(node.userObject.id, node.id, colour);
} else if(args[1] == "displaycomponents"){
var node = args[0];
if (this.paintExpressionData == 1) {
if(node.userObject.cls == "Complex" ){
var components = this
.complexHasComponents(
node.userObject.id,
"check");
if (components.length > 0) {
this.currentCplxNode = node;
this.displayComplexPopup();
} // components.length > 0
} // cls==complex
} // expressiondata == 1
else if(this.displayComparison == 1){
if(node.userObject.cls == "Complex" ){
this.currentCplxNode = node;
this.displayComplexPopupForSpeciesComparison();
} // cls==complex
}//displaycomparison==1
}
else{
this.menuItemClickedEvent.fire(args[0], args[1]);
}
},
displayTip : function(dbid, w, h, name, x,y, offsetX, offsetY, refdbid){
>>>>>>> 1.41
var id = "tip_" + dbid;
// For some reason Safari often ignores the request
// to remove the popups on mouseout.
// Hence the need to "manually" remove them here.
$("ficanvas").getElementsBySelector('div.tip')
.invoke('remove');
var tip = Element.extend(document
.createElement('div'));
tip.className = 'tip';
tip.id = id;
var nw, nh;
nw = 2.5 * w;
nh = 2 * h;
tip.innerHTML = name;
if (this.paintExpressionData == 1){
var matchedEntity = this.expressionPainter.refIdMapping[refdbid];
if(matchedEntity){
tip.innerHTML += ". Id : " + matchedEntity.id + ". Level: " + matchedEntity.data[this.currentExperiment];
}
}
tip.setStyle( {
width : nw + "px",
display : 'none'
});
Event.observe(tip, 'mousedown', function(event) {
//Event.stop(event);
//window.open("http://www.reactome.org");
var tokens = event.target.id.split("_",2);
var localid = tokens[1];
// Hard coded db for use with manual diagrams. Replace test_reactome_31_pathway_diagram with 'this.db'
window.open("http://www.reactome.org/cgi-bin/eventbrowser?DB="
+ this.db + "&ID=" + localid);
}.bind(this));
$("ficanvas").appendChild(tip);
// FIX:this was 5
var border_w = 10;
nh = tip.getHeight();
x = (x*this.zoomFactor) + offsetX - (w/2);
y = (y*this.zoomFactor) + offsetY;
tip.setStyle( {
left : x + "px",
top : y + "px",
opacity : 0.85,
height : nh + "px",
border : border_w + "px solid #DCDCDC",
background : "#DCDCDC",
zIndex:this.complexpopupZ+1
});
new Effect.Appear(tip, {
duration : 0.5,
to : 0.85
});
},
<<<<<<< PathwayDiagramPane.js
=======
placeExperimentBrowser : function(){
var availableWidth = $("clipwindow").getWidth();
var browserWidth = $("experimentbrowser").getWidth();
$("experimentbrowser").style.left = ((availableWidth/2) - (browserWidth/2))+"px";
$("experimentbrowser").style.visibility = "visible";
},
displayExpressionLevels : function(scale) {
document.body.style.cursor = "wait";
try{
var i = 0;
var colourIndex = 0;
this.paintExpressionData = 1;
if (this.focus_pathway_id != null) {
$("canvasoverlay").getElementsBySelector(
'div.expressiontips').invoke('remove');
this.placeExperimentBrowser();
if (scale) {
this.expressionPainter.displayKey(scale);
} else {
this.expressionPainter.displayKey(1);
}
for ( var nodeitem in this.nodes) {
if (nodeitem && nodeitem != "undefined") {
var tip = Element.extend(document
.createElement('div'));
tip.className = 'expressiontips';
tip.id = "expressiontip_" + nodeitem;
var node = this.nodes[nodeitem];
if (node.cls != "ReactionVertex") {
var w = node.w;
var h = node.h;
var nw, nh = 5;
nw = w +1;
nh = h +1;
if (this.zoomFactor == 1) {
tip.innerHTML = node.userObject.name;
tip.innerHTML = tip.innerHTML
.replace(/\[.*/, "");
tip.innerHTML = tip.innerHTML.replace(/\:/g,": ");
}
nw = nw * this.zoomFactor;
nh = nh * this.zoomFactor;
tip.setStyle( {
width : nw + "px",
height : nh + "px",
fontSize : "10px",
textAlign : "center"
});
$("canvasoverlay").appendChild(tip);
var border_w = 5;
nh = tip.getHeight();
var nodex = this.nodes[nodeitem].x;
var nodey = this.nodes[nodeitem].y;
nodex = nodex * this.zoomFactor
- border_w
- (nw - w * this.zoomFactor)
/ 2;
nodey = nodey * this.zoomFactor
- border_w
- (nh - h * this.zoomFactor)
/ 2;
colourIndex++;
if(node.userObject.cls == "SimpleEntity"){
// 8 is the multiplier for firefox on linux.
var dimAdjustment = 8 * this.zoomFactor;
tip.innerHTML = "| "; compsTable += " | "; break; } var p = components[cinc]; cinc++; /* Start of species comparison specific code */ colour = "blue"; for(var speciesEntityIndex =0; speciesEntityIndex < this.speciesdata.comparisons.length; speciesEntityIndex++){ if(this.speciesdata.comparisons[speciesEntityIndex].refid == p.refdbid && this.speciesdata.comparisons[speciesEntityIndex].other == 1){ colour = "yellow"; break; } } /* End of species comparison specific code */ compsTable += ""; compsTable += " | "; } compsTable += "
![](\"/entitylevelview/icons/circle.png\"){kind=icon}
";
if(this.zoomFactor == 1){
tip.innerHTML = tip.innerHTML + ""+
node.userObject.name.replace(/\[.*/, "") + "
";
}
// 3 is the ideal location adjustment for linux firefox.
var locadjustment = 3;
locadjustment += (1* (1 - this.zoomFactor ));
if(this.zoomFactor == 1){
// 2 is the ideal location adjustment modifier for
// linux firefox at maximum zoom
locadjustment -=2;
}
tip
.setStyle( {
left : nodex + locadjustment
+ "px",
top : nodey +locadjustment
+ "px",
height : (nh) + "px"
});
}else
if (node.userObject.cls != "Complex") {
// Check if we have this entity matches something in the input data.
var matchedEntity = this.expressionPainter.refIdMapping[node.userObject.refid];
if (matchedEntity) {
//var rgb = this.expressionPainter.dataColours[colourIndex];
if(this.zoomFactor ==1){
tip.innerHTML += ". Id : " + matchedEntity.id + ". Level: " + matchedEntity.data[this.currentExperiment];
}
tip.className = tip.className + " proteinexpressiontip"
var rgb = matchedEntity.dataColours.data[this.currentExperiment];
tip
.setStyle( {
left : nodex + 5
+ "px",
top : nodey + 5
+ "px",
height : nh + "px",
background : 'rgb('
+ this.expressionPainter.colourSpectrum[rgb].rgb[0]
+ ','
+ this.expressionPainter.colourSpectrum[rgb].rgb[1]
+ ','
+ this.expressionPainter.colourSpectrum[rgb].rgb[2]
+ ')'
});
// check if queryterminal overlay exists.
this.processFITerminal(node, tip);
} else {
// No match so set to grey.
tip
.setStyle( {
left : nodex + 5
+ "px",
top : nodey + 5
+ "px",
height : nh + "px",
background : this.noHitBG
});
tip.style.color="white";
}
} else { // its a complex
var components = this
.complexHasComponents(
this.nodes[nodeitem].userObject.id,
"check");
if (components.length > 0) {
//tip.style.backgroundImage = "url(/icons/complex.png)";
tip.setStyle( {
background : 'rgb(0,0,0)'
});
} else {
tip
.setStyle( {
background : this.noHitBG
});
}
tip.setStyle( {
left : nodex + 5 + "px",
top : nodey + 5 + "px",
height : nh + "px"
});
tip.style.color = "white";
}
$("experimentname").innerHTML="Experiment: " + this.expressionPainter.columnNames[this.currentExperiment];
}
tip.style.zIndex=20;
}
}
} // end if(focus pathway != null)
}catch(ex){
// alert("There was a problem overlaying expression data: " + ex.description);
}
document.body.style.cursor = "default";
},
/*
* if a queryterminal (from mi overlay) exists for this node, modify its appearance
* and hide expression tip.
*/
processFITerminal : function(node, expressiontip){
var queryTerminal = $("queryterminal_" + node.id);
if(queryTerminal){
queryTerminal.className = 'proteincolour queryTerminal queryComponents'+node.id + " expressiontips";
queryTerminal.style.background = expressiontip.style.background;
queryTerminal.innerHTML = expressiontip.innerHTML;
expressiontip.style.display = "none";
}
},
complexHasComponents : function(index, check) {
var complex = this.complexnodes[index];
var components = new Array();
if(complex){
for ( var cptI = 0; cptI < complex.length; cptI++) {
var cpt = this.expressionPainter.refIdMapping[complex[cptI].refdbid];
// set = null if no hit in refIdMapping?
if (cpt) {
components[cptI] = complex[cptI];
// if check is defined we just want to see if
// the complex has any hits in the input data.
// Dont spend more time collecting components.
// Used to determine the colour of a complex.
if (check)
return components;
}
}
}
return components;
},
getComplexComponents : function(scale) {
var idstring = "complexidlist=";
for ( var nodeitem in this.dbnodes) {
if (nodeitem) {
var currentnode = this.nodes[this.dbnodes[nodeitem]];
if (currentnode.userObject.cls == "Complex") {
idstring = idstring + "," + nodeitem;
}
}
}
idstring = idstring.replace(/^complexidlist=,/,
"complexidlist=");
idstring = idstring.replace(/,$/, "");
var callback = {
scope : this,
customevents : {
onSuccess : function(eventType, args) {
var o = eval('(' + args[0].responseText + ')');
this.complexnodes = new Object();
for ( var nodeitem = 0; nodeitem < o.clxs.length; nodeitem++) {
this.complexnodes[o.clxs[nodeitem].dbid] = o.clxs[nodeitem].cpts;
}
this.displayExpressionLevels(scale);
},
onFailure : function(eventType, args) {
document.body.style.cursor = "default";
}
}
};
YAHOO.util.Connect.asyncRequest('POST',
"/ReactomeGWT/entrypoint/elv/ComplexComponentsServlet",
callback, idstring
+ "&class=EntityWithAccessionedSequence");
},
getComplexComponentsForSpeciesComparison : function(speciesdata) {
var idstring = "complexidlist=";
for ( var nodeitem in this.dbnodes) {
if (nodeitem) {
var currentnode = this.nodes[this.dbnodes[nodeitem]];
if (currentnode.userObject.cls == "Complex") {
idstring = idstring + "," + nodeitem;
}
}
}
idstring = idstring.replace(/^complexidlist=,/,
"complexidlist=");
idstring = idstring.replace(/,$/, "");
var callback = {
scope : this,
customevents : {
onSuccess : function(eventType, args) {
var o = eval('(' + args[0].responseText + ')');
this.complexnodes = new Object();
for ( var nodeitem = 0; nodeitem < o.clxs.length; nodeitem++) {
if(o.clxs[nodeitem].cpts.size && o.clxs[nodeitem].cpts.size() > 1){
this.complexnodes[o.clxs[nodeitem].dbid] = o.clxs[nodeitem].cpts;
}else{
this.complexnodes[o.clxs[nodeitem].dbid] = new Array();
this.complexnodes[o.clxs[nodeitem].dbid][0] = o.clxs[nodeitem].cpts;
}
}
this.paintSpeciesComparison(speciesdata);
},
onFailure : function(eventType, args) {
}
}
};
YAHOO.util.Connect.asyncRequest('POST',
"/ReactomeGWT/entrypoint/elv/ComplexComponentsServlet",
callback, idstring
+ "&class=EntityWithAccessionedSequence");
},
<<<<<<< PathwayDiagramPane.js
>>>>>>> 1.41
=======
>>>>>>> 1.66
getParticipatingMolecules : function(complexId){
var idstring = "complexidlist=";
for ( var nodeitem in this.dbnodes) {
if (nodeitem) {
var currentnode = this.nodes[this.dbnodes[nodeitem]];
if (currentnode.userObject.cls == "Complex") {
idstring = idstring + "," + nodeitem;
}
}
}
idstring = idstring.replace(/^complexidlist=,/,
"complexidlist=");
idstring = idstring.replace(/,$/, "");
var callback = {
scope : this,
customevents : {
onSuccess : function(eventType, args) {
var o = eval('(' + args[0].responseText + ')');
this.complexnodes = new Object();
for ( var nodeitem = 0; nodeitem < o.clxs.length; nodeitem++) {
this.complexnodes[o.clxs[nodeitem].dbid] = o.clxs[nodeitem].cpts;
}
this.displayExpressionLevels(scale);
},
onFailure : function(eventType, args) {
}
}
};
YAHOO.util.Connect.asyncRequest('POST',
"/ReactomeGWT/entrypoint/elv/ComplexComponentsServlet",
callback, idstring
+ "&class=EntityWithAccessionedSequence");
},
bringElementIntoViewPort : function(el) {
el = $(el);
var dims = Element.getDimensions(el);
var ex = parseInt(el.getStyle('left'));
var ey = parseInt(el.getStyle('top'));
var canvas = $('canvas');
var cx = parseInt(canvas.getStyle('left'));
var cy = parseInt(canvas.getStyle('top'));
var dx = 0;
if (ex < -cx) {
dx = -cx - ex;
} else if ((ex + dims.width) > (-cx + this.iClipWidth())) {
dx = (-cx + this.iClipWidth()) - (ex + dims.width);
}
var dy = 0;
if (ey < -cy) {
dy = -cy - ey;
} else if ((ey + dims.height) > (-cy + this
.iClipHeight())) {
dy = (-cy + this.iClipHeight())
- (ey + dims.height);
dy -= 10;
}
if ((dx != 0) || (dy != 0)) {
this.animatedReposition(dx, dy);
}
},
handleHighliteMouseout : function(event, dbid) {
},
animatedReposition : function(x, y) {
if(isNaN(x) || isNaN(y)){
return;
}
new Effect.Move2($("canvas"), {
x : x,
y : y,
obj : this
});
},
processHighlites : function(highlites) {
if (highlites) {
if (highlites.length > 1000) {
this
.highliteNodesWithIdsWithPeriodicalExecutioner(highlites);
} else {
this
.highliteNodesForRepresentedInstanceIds(highlites);
if (((highlites.length == 1) || (this.highlitedCoordinates.length == 1))
&& this.highlitedCoordinates.length > 0) {
this.centreOnCoordinate(
this.highlitedCoordinates[0].x,
this.highlitedCoordinates[0].y);
}
}
} else {
this.clearHighlites();
}
},
showDiagramsForVisibleComplexAndSetNodesIfNecessary : function() {
if ($("entitydiagrams")
&& $("entitydiagrams").visible()) {
this.showDiagramsForVisibleComplexAndSetNodes();
}
},
showDiagramsForVisibleComplexAndSetNodes : function() {
var coords = this.findVisibleComplexAndSetNodes();
coords.each( function(n) {
showDiagramForNode(n);
});
},
showDiagramForNode : function(node) {
var id = "diagram_" + node.userObject.id + "_" + node.x
+ "_" + node.y;
if (!$(id)) {
var x = this.zoomFactor * node.x;
var y = this.zoomFactor * node.y;
/*
* For some reason, have to make images a bit wider
* in order to cover the underlying node completely.
*/
var w = this.zoomFactor * node.w + 1;
var h = this.zoomFactor * node.h + 1;
var imgsrc = this.imgdir + '/entitydiagrams/'
+ node.userObject.id + '.png';
var img = Element.extend(document
.createElement('img'));
img.id = id;
img.setStyle( {
position : "absolute",
top : y + "px",
left : x + "px",
width : w + "px",
height : h + "px"
});
img.src = imgsrc;
$("entitydiagrams").appendChild(img);
}
},
findVisibleComplexAndSetNodes : function() {
var canvas = $('canvas');
var x1 = -parseInt(canvas.getStyle('left'))
/ this.zoomFactor;
var y1 = -parseInt(canvas.getStyle('top'))
/ this.zoomFactor;
var x2 = (-parseInt(canvas.getStyle('left')) + this
.iClipWidth())
/ this.zoomFactor;
var y2 = (-parseInt(canvas.getStyle('top')) + this
.iClipHeight())
/ this.zoomFactor;
return this
.findNodesInArea(x1, y1, x2, y2)
.findAll(
function(n) {
return ((n.userObject.cls == "Complex")
|| (n.userObject.cls == "DefinedSet") || (n.userObject.cls == "CandidateSet"));
});
},
resetExpressionKey : function(scale) {
if (this.expressionPainter != null
&& this.paintExpressionData == 1
&& this.focus_pathway_id != null) {
this.expressionPainter.clearSpectrum();
this.expressionPainter.displayKey(scale);
}
},
findNodesInArea : function(x1, y1, x2, y2) {
var out = new Array();
for ( var j = 0, l = this.orderedRepresentedInstances.length; j < l; ++j) {
var coords = this.orderedRepresentedInstances[j].coords;
for ( var i = 0; i < coords.length; i++) {
if ((x2 > coords[i].x)
&& (x1 < coords[i].x + coords[i].w)
&& (y2 > coords[i].y)
&& (y1 < coords[i].y + coords[i].h)) {
out.push(coords[i]);
}
}
}
return out;
},
getVisibleArea : function() {
var canvas = $('canvas');
var x = -parseInt(canvas.getStyle('left'))
/ this.zoomFactor;
var y = -parseInt(canvas.getStyle('top'))
/ this.zoomFactor;
var w = this.iClipWidth() / this.zoomFactor;
var h = this.iClipHeight() / this.zoomFactor;
return {
"x" : x,
"y" : y,
"w" : w,
"h" : h
};
},
isAnyNodeVisible : function(nodeArray) {
var r = getVisibleArea();
var x1 = r.x;
var x2 = r.x + r.w;
var y1 = r.y;
var y2 = r.y + r.h;
for ( var i = 0, l = nodeArray.length; i < l; ++i) {
var n = nodeArray[i];
if ((x2 > n.x) && (x1 < n.x + n.w) && (y2 > n.y)
&& (y1 < n.y + n.h)) {
return true;
}
}
return false;
},
transientlyHighliteNode : function(node) {
//log("transientlyHighliteNode x = " + node.x + ", y = " + node.y);
var x = this.zoomFactor * node.x;
var y = this.zoomFactor * node.y;
var w = this.zoomFactor * node.w;
var h = this.zoomFactor * node.h;
if (YAHOO.env.ua.ie > 0) {
w += 2 * this.highliteBorderThickness;
h += 2 * this.highliteBorderThickness;
}
x -= this.highliteBorderThickness;
y -= this.highliteBorderThickness;
var thl = Element.extend(document.createElement('div'));
thl.innerHTML = " ";
thl.id = "thl_" + node.id;
thl.className = "transienthighlite";
thl.setStyle( {
position : "absolute",
top : y + "px",
left : x + "px",
width : w + "px",
height : h + "px"
});
$("canvasoverlay").appendChild(thl);
// Thumb
x = node.x / this.imgw * this.thumbnailw - 1;
y = node.y / this.imgh * this.thumbnailh - 1;
var t_thl = Element.extend(document
.createElement('div'));
t_thl.innerHTML = " ";
t_thl.id = "t_thl_" + node.id;
t_thl.className = "thumbtransienthighlite";
t_thl.setStyle( {
position : "absolute",
top : (y - 1) + "px",
left : (x - 1) + "px",
width : "3px",
height : "3px"
});
$("thumbnailoverlay").appendChild(t_thl);
},
removeTransientHighlites : function() {
this.dbidOfNodeBeingHighlited = null;
if ($("canvasoverlay") != null) {
$A(
$("canvasoverlay").getElementsByClassName(
"transienthighlite")).map(
function(e) {
e.remove();
});
$A(
$("thumbnailoverlay")
.getElementsByClassName(
"thumbtransienthighlite"))
.map( function(e) {
e.remove();
});
}
},
removeTransientHighliteFromNode : function(node) {
this.removeTransientHighliteFromNodeWithId(node.id);
},
removeTransientHighliteFromNodeWithId : function(id) {
var thl = $("thl_" + id);
if (thl) {
thl.remove();
}
var t_thl = $("t_thl_" + id);
if (t_thl) {
t_thl.remove();
}
},
transientlyHighliteNodesForRepresentedInstance : function(i) {
var t = this;
i.coords.map( function(n) {
t.transientlyHighliteNode(n);
});
},
removeTransientlyHighliteFromNodesForRepresentedInstance : function(
i) {
var t = this;
i.coords.map( function(n) {
t.removeTransientHighliteFromNode(n);
});
},
transientlyHighliteNodesForRepresentedInstanceId : function(
id) {
this.removeTransientHighlites();
if (this.current_instance_id == id)
return;
if (this.representedInstances == null)
return;
var i = this.representedInstances[id];
if (i) {
this
.transientlyHighliteNodesForRepresentedInstance(i);
// centreOnCoordinate(i.coords[0].x, i.coords[0].y);
} else if (this.transientHighliteIdCache[id]) {
this
.transientlyHighliteNodesWithIds(this.transientHighliteIdCache[id]);
// if (this.transientHighliteIdCache[id][0])
// centreOnNodeWithId(this.transientHighliteIdCache[id][0]);
} else {
this.loadTransientHighlites(id);
}
},
removeTransientlyHighliteFromNodesForRepresentedInstanceId : function(
id) {
var i = this.representedInstances[id];
if (i) {
this
.removeTransientlyHighliteFromNodesForRepresentedInstance(i);
} else if (this.transientHighliteIdCache[id]) {
//log(this.transientHighliteIdCache[id]);
this
.removeTransientHighlitesFromNodesWithIds(this.transientHighliteIdCache[id]);
}
},
highliteNodesForRepresentedInstance : function(i,
keepPrevious) {
if (!keepPrevious)
clearHighlites();
var t = this;
i.coords.map( function(n) {
t.highliteInViewportAndCache(n, true);
});
},
highliteNodesForRepresentedInstanceId : function(id,
keepPrevious) {
var i = this.representedInstances[id];
if (i)
this.highliteNodesForRepresentedInstance(i,
keepPrevious);
},
highliteNodesForRepresentedInstanceIds : function(ids,
keepPrevious) {
if (!keepPrevious)
this.clearHighlites();
for ( var j = 0, l = ids.length; j < l; ++j) {
var i = this.representedInstances[ids[j]];
if (i) {
this.highliteNodesForRepresentedInstance(i,
true);
} else {
//log("No representedInstance with id "+ids[j]);
}
}
},
transientlyHighliteNodesWithIds : function(ids) {
var t = this;
ids.map( function(id) {
var n = t.nodes[id];
if (n != null)
t.transientlyHighliteNode(n)
});
},
removeTransientHighlitesFromNodesWithIds : function(ids) {
var t = this;
ids.map( function(id) {
t.removeTransientHighliteFromNodeWithId(id)
});
},
isInViewPort : function(n) {
//log(this.viewportRight+">"+n.x+","+this.viewportLeft +"<"+(n.x+n.w)+","+this.viewportBottom+">"+n.y+","+this.viewportTop+"<"+(n.y+n.h));
return ((this.viewportRight > n.x)
&& (this.viewportLeft < n.x + n.w)
&& (this.viewportBottom > n.y) && (this.viewportTop < n.y
+ n.h));
},
anyInViewPort : function(nodes) {
for ( var i = 0, l = nodes.length; i < l; ++i) {
if (this.isInViewPort(nodes[i]))
return true;
}
return false;
},
/*
* The point of this is to do the highliting is small chunks so that the browser
* doesn't get "tired" with the process and suggest to kill it.
*/
highliteWithPeriodicalExecutioner : function(nodeArray) {
var c = 0;
var step = 500;
var t = this;
new PeriodicalExecuter( function(pe) {
var t1 = new Date().getTime();
for ( var i = c; i < c + step; ++i) {
if (i >= nodeArray.length) {
pe.stop();
break;
} else {
var node = nodeArray[i];
t.highliteInViewportAndCache(node, true);
}
}
var t2 = new Date().getTime();
// log("PeriodicalExecuter "+c+" ran for "+(t2 -
// t1)/1000 + "s");
c += step;
}, 1);
},
/*
* The point of this is to do the highliting is small chunks so that the browser
* doesn't get "tired" with the process and suggest to kill it.
*/
highliteNodesWithIdsWithPeriodicalExecutioner : function(
idArray) {
this.clearHighlites();
var c = 0;
var step = 1000;
var t = this;
new PeriodicalExecuter(
function(pe) {
var t1 = new Date().getTime();
for ( var i = c; i < c + step; ++i) {
if (i >= idArray.length) {
pe.stop();
break;
} else {
var node = t.representedInstances[idArray[i]];
if (node != null) {
t
.highliteNodesForRepresentedInstance(
node, true);
} else {
//log("No node: Idx: " + i + ", DB_ID:" + idArray[i]);
}
}
}
var t2 = new Date().getTime();
// log("PeriodicalExecuter "+c+" ran for
// "+(t2 - t1)/1000 + "s");
c += step;
}, 1);
},
centreOnNodeWithId : function(node_id) {
var node = this.nodes[node_id];
if (node) {
this.centreOnCoordinate(node.x, node.y);
} else {
log("No node with id " + node_id);
}
},
getNodesWithIds : function(ids) {
var out = [];
for ( var i = 0, l = ids.length; i < l; ++i) {
var n = this.nodes[ids[i]];
if (n != null) {
out.push(n);
}
}
return (out);
},
/* not used */
getNodesWithRepresentedInstanceIds : function(ids) {
var out = [];
for ( var i = 0, l = ids.length; i < l; ++i) {
var n = this.representedInstances[ids[i]];
if (n != null) {
var coords = n.coords;
for ( var j = 0, m = coords.length; j < m; ++j) {
out.push(coords[j]);
}
}
}
return (out);
},
loadTransientHighlites : function(dbid) {
if (!this.inLoadTransientHighlites) {
this.dbidOfNodeBeingHighlited = dbid;
this.inLoadTransientHighlites = true;
var t = this;
new Ajax.Request(
this.diagramhighlitesurl + '?DB=' + this.db
+ '&FOCUS_SPECIES_ID='
+ this.focus_species_id + '&ID='
+ dbid,
{
method : 'get',
onSuccess : function(transport) {
var rtxt = transport.responseText;
var o = eval(rtxt);
t.transientHighliteIdCache[dbid] = o.highlites;
if (t.dbidOfNodeBeingHighlited == dbid)
t
.transientlyHighliteNodesWithIds(o.highlites);
},
onComplete : function() {
t.inLoadTransientHighlites = false;
}
});
}
},
removeImageTiles : function() {
//log("removeImageTiles()");
var tiles = $("tiles");
if (tiles) {
//for ( var i = 0, l = tiles.childNodes.length; i < l; ++i) {
for ( var i = tiles.childNodes.length -1 ; i >-1; i--) {
/*
* Some more black magic - have to remove the tiles from the end in order to be
* able to remove them all (or most of them). Ones which have become 'undefined'
* nevertheless show up on screen so that zoomed-out diagram contains tiles from
* previous zoom level.
*/
var c = tiles.childNodes[i];
if (typeof (c) != 'undefined') {
$(c).remove();
}
}
}
},
setImgDir : function() {
this.imgdir = this.basedir + this.db + "/"
+ this.focus_species_id + "/"
+ this.focus_pathway_id;
},
changeFocusPathway : function(pathway_id) {
if (this.focus_species_id != null) {
<<<<<<< PathwayDiagramPane.js
=======
// Clear the mi overlay when changing pathways.
// An alternative would be to check if new pathway shares proteins with
// old pathway that the user has overlayed interactors for and overlay
// these interactors in new pathway.
if(this.fiDisplay != null){
this.fiDisplay.cleanUp();
this.fiDisplay = new FIDisplay();
this.fiDisplay.init(this.intactSearchUrl, this.miCanvasMargin);
}
if(this.controlPanel != null){
this.controlPanel.hideTable();
}
>>>>>>> 1.41
this.removeImageTiles();
this.focus_pathway_id = pathway_id;
this.setImgDir();
this.loadOrderedCoordinates();
<<<<<<< PathwayDiagramPane.js
}
=======
}
>>>>>>> 1.41
},
onTransientHighliteRequest : function(type, args) {
//log("onTransientHighliteRequest " + args);
this.transientlyHighliteNodesForRepresentedInstanceId(args[0]);
},
onTransientHighliteRemovalRequest : function(type) {
//log("onTransientHighliteRemovalRequest");
this.removeTransientHighlites();
}
});
/*
* Extend scriptaculous' Effect.Move so that the tiles get created/populated
* upon move. This is what the reposition(0,0) is for. OK, undoubtedly things
* could be done more efficiently.
*/
Effect.Move2 = Class.create();
Object.extend(Object.extend(Effect.Move2.prototype, Effect.Move.prototype), {
update : function(position) {
this.element
.setStyle( {
left : Math.floor(this.options.x * position
+ this.originalLeft) + 'px',
top : Math.floor(this.options.y * position
+ this.originalTop) + 'px'
});
this.options.obj.reposition(0, 0);
}
});
/*
* Overload diagram highlighting related methods if the browser is old IE which
* doesn't support transparency.
*/
if ((YAHOO.env.ua.ie > 0) && (YAHOO.env.ua.ie < 7)) {
Object.extend(PathwayDiagramPane.prototype, {
highliteNode : function(node) {
var oCO = $("canvasoverlay");
var x = this.zoomFactor * node.x;
var y = this.zoomFactor * node.y;
var w = this.zoomFactor * node.w;
var h = this.zoomFactor * node.h;
if (YAHOO.env.ua.ie > 0) {
w += 2 * this.highliteBorderThickness;
h += 2 * this.highliteBorderThickness;
}
x -= this.highliteBorderThickness;
y -= this.highliteBorderThickness;
var node_id = 'hl_' + node.id;
var hl = Element.extend(document.createElement('div'));
hl.innerHTML = " ";
hl.id = node_id;
hl.className = "highlite";
hl.setStyle( {
position : "absolute",
top : y + "px",
left : x + "px",
width : w + "px",
height : h + "px"
});
Event.observe(hl, 'mouseover', this.handleHighliteMouseover
.bindAsEventListener(this, node.id));
Event.observe(hl, 'mouseout', this.handleHighliteMouseout
.bindAsEventListener(this, node.id));
Event.observe(hl, 'mousemove', this.handleHighliteMouseover
.bindAsEventListener(this, node.id));
$("canvasoverlay").appendChild(hl);
node.isHighlited = true;
return hl;
},
highliteCoordinate : function(x, y, w, h, keepPrevious) {
//log("EntityLevelView.highliteCoordinate()");
x *= this.zoomFactor;
y *= this.zoomFactor;
w *= this.zoomFactor;
h *= this.zoomFactor;
var oCO = $("canvasoverlay");
if (YAHOO.env.ua.ie > 0) {
w += 2 * this.highliteBorderThickness;
h += 2 * this.highliteBorderThickness;
}
x -= this.highliteBorderThickness;
y -= this.highliteBorderThickness;
var tmp = '';
if (keepPrevious) {
oCO.innerHTML += tmp;
} else {
oCO.innerHTML = tmp;
}
},
highliteNodeIfInViewPort : function(node) {
if (this.isInViewPort(node)) {
var oCO = $("canvasoverlay");
var x = this.zoomFactor * node.x;
var y = this.zoomFactor * node.y;
var w = this.zoomFactor * node.w;
var h = this.zoomFactor * node.h;
if (YAHOO.env.ua.ie > 0) {
w += 2 * this.highliteBorderThickness;
h += 2 * this.highliteBorderThickness;
}
x -= this.highliteBorderThickness;
y -= this.highliteBorderThickness;
var node_id = 'hl_' + node.id;
var hl = $(node_id);
if (hl == null) {
var hl = Element.extend(document.createElement('div'));
hl.innerHTML = " ";
hl.id = node_id;
hl.className = "highlite";
Event.observe(hl, 'mouseover', this.handleHighliteMouseover
.bindAsEventListener(this, node.id));
Event.observe(hl, 'mouseout', this.handleHighliteMouseout
.bindAsEventListener(this, node.id));
Event.observe(hl, 'mousemove', this.handleHighliteMouseover
.bindAsEventListener(this, node.id));
$("canvasoverlay").appendChild(hl);
}
hl.setStyle( {
position : "absolute",
top : y + "px",
left : x + "px",
width : w + "px",
height : h + "px"
});
return hl;
}
},
clearHighlites : function() {
this.highlitedCoordinates.map( function(n) {
n.isHighlited = false;
});
this.highlitedCoordinates.length = 0;
var oCO = $("canvasoverlay");
if (oCO) {
oCO.innerHTML = '';
var to = $("thumbnailoverlay");
to.innerHTML = '';
}
}
});
YAHOO.util.Event
.onDOMReady( function() {
if ($('iedialogcontainer') != null) {
var iedialog = new YAHOO.widget.SimpleDialog(
"iedialog",
{
width : "300px",
fixedcenter : true,
visible : false,
draggable : false,
close : true,
text : "This page works better with Internet Explorer 7, Firefox or Safari.",
constraintoviewport : true
});
iedialog.setHeader("Note");
iedialog.render("iedialogcontainer");
iedialog.show();
}
});
}
/*
* Global functions
*/
function log(msg) {
var oLog = $("log");
if (oLog != null) {
//oLog.innerHTML += msg + "\n"; oLog.innerHTML = msg + "
\n" + oLog.innerHTML; } } function clearLog() { var oLog = $("log"); if (oLog != null) { oLog.innerHTML = ""; } }