<!DOCTYPE html>
<html>
<body>
+
+<div id="Legend" style="float: right; height: 200px; width: 400px;">
+Note: The colors have no relevance to the data, they simply serve to distinguish rows visually. <br> <br>
+ The numbers printed inside each cell represent the confidence rating of the ontological assignment; a higher number indicates more confidence.<br><br>
+ An "A" after the term name signifies that it relates to anatomy, a "G" signifies that it relates to growth, development, or structure <br><br>
+ Click on a gene or term for detailed annotations from Plant Ontology. <br><br>
+ Select or deselect terms to be downloaded using the boxes underneath the term names.
+
+<form name="downloadImage" action="VOdownload.php" method="post">
+<input type="button" value="Download Tab Delimited File" onClick="downloadTabDem()"/>
+<input type="hidden" value="" name="genes">
+<input type="hidden" value="" name="terms">
+<input type="hidden" value="" name="cellData"/>
+</form>
+
+
+
+
+
<?php
//select term_id from gene_product inner join association on association.gene_product_id=gene_product.id where gene_product.full_name='AT1G32960';
$ontologies = explode(",",$_POST["ontologies"]);
+
+ echo "<form name=\"redraw\">\n";
+ echo "<p> Include Ontologies: <br>";
+
+
for($i = 0; $i < sizeof($ontologies); $i++) {
- if($ontologies[$i] == "Anatomy") $ontologies[$i] = "plant_anatomy";
+ echo "<input type=\"checkbox\" name=\"" . $ontologies[$i] . "\" ";
+
+ //NOTE THIS is the list of ontologies that must be kept updated
+ if($ontologies[$i] == "Anatomy") {
+ $ontologies[$i] = "plant_anatomy";
+ }
if($ontologies[$i] == "Growth") $ontologies[$i] = "plant_structure_development_stage";
+
+ echo "value=\"" . $ontologies[$i] . "\">";
+ echo $ontologies[$i] . " <br>";
}
+ echo "<input type=\"button\" name=\"Redraw\" value=\"Redraw Ontologies\" onClick=\"redrawOntologies()\">";
+ echo "</form>";
+ echo "<br> <br>\n";
+ echo "</div>";
//get rid of any of those messy .somethings after the gene ID
$tmp = explode(",",$_POST['param']);
$i = 0;
for($row = mysql_fetch_row($results); $row != null; $row = mysql_fetch_row($results)) {
$add = "";
- if($row[1]=="plant_anatomy") $add= " (A)";
- if($row[1]=="plant_structure_development_stage") $add= " (G)";
$terms[$i][0] = $row[0];
- $terms[$i][1] = $add;
+ $terms[$i][1] = $row[1];
$i++;
}
}
$printTerms;
for($i = 0; $i < sizeof($terms); $i ++) {
- $printTerms[$i] = $terms[$i][0] . $terms[$i][1];
+ $printTerms[$i] = implode(";",$terms[$i]);
}
}
}
?>
-<div id="Legend" style="float: right; height: 200px; width: 400px;">
-Note: The colors have no relevance to the data, they simply serve to distinguish rows visually. <br> <br>
- The numbers printed inside each cell represent the confidence rating of the ontological assignment; a higher number indicates more confidence.<br><br>
- An "A" after the term name signifies that it relates to anatomy, a "G" signifies that it relates to growth, development, or structure <br><br>
- Click on a gene or term for detailed annotations from Plant Ontology. <br><br>
- Select or deselect terms to be downloaded using the boxes underneath the term names.
-
-<form name="downloadImage" action="VOdownload.php" method="post">
-<input type="button" value="Download Tab Delimited File" onClick="downloadTabDem()"/>
-<input type="hidden" value="" name="genes">
-<input type="hidden" value="" name="terms">
-<input type="hidden" value="" name="cellData"/>
-</form>
-
-
-
-</div>
<div id="canvasDiv" style="overflow: hidden; float: left; height: <?php echo $height ?>px; width: <?php echo $width ?>px;">
-
-
-
-
<script type="text/javascript">
var rawCellData = "<?php echo implode(".",$finalCellData); ?>";
var geneCount = genes.length;
var rawTerms = "<?php echo implode(",",$printTerms) ?>";
-var terms = rawTerms.split(",");
+var rareTerms = rawTerms.split(",");
+var terms = new Array(rareTerms.length);
+for(var i=0;i<rareTerms.length;i++) {
+ terms[i] = new Array(2);
+ var temp = rareTerms[i].split(";");
+ terms[i][0] = temp[0];
+ terms[i][1] = temp[1];
+}
var termCount = terms.length;
+
var termColors = new Array(terms.length);
var checkBoxes = new Array(terms.length);
//to find out what our top offset should be:
var maxTermSize = 0;
for(var i = 0; i < terms.length; i ++) {
- if(terms[i].length > maxTermSize) maxTermSize = terms[i].length;
+ if(terms[i][0].length > maxTermSize) maxTermSize = terms[i][0].length;
}
+//to create a method for coloring each ontology differently
+var ontCount;
+var ontologies = new Array();
+ontologies[0] = terms[0][1];
+var j = 1;
+for(var i = 0; i < terms.length; i ++) {
+ var newOnt = !isIn(terms[i][1],ontologies);
+ if(newOnt) {
+ ontologies[j] = terms[i][1];
+ j++;
+ }
+}
+var legalOntologies = ontologies;
+
+//find whether an element is already included in an array
+function isIn(element, array) {
+ for(var i = 0; i < array.length; i ++) {
+ if(element == array[i]) {
+ return true;
+ }
+ }
+ return false;
+}
+
+function findIndex(element,array) {
+ for(var i = 0; i < array.length; i ++) {
+ if(element == array[i]) {
+ return i;
+ }
+ }
+ return -1;
+}
+
var cellSize = 15; //NOTE if this is changed, the size of the topScrollDiv must also be changed by the same factor!
var leftOffset = 85;
var maxRows = Math.floor((<?php echo $height ?>-topOffset-15)/cellSize);
-var maxCols = Math.floor((<?php echo $width ?>-leftOffset-30)/cellSize);
+var maxCols = Math.floor((<?php echo $width ?>-leftOffset-300)/cellSize); //NOTE the -300 accounts for the key
var borderWidth = 1;
+// This is in order to set the random coloring of each column, and have it remain constant throughout each viewing session
for(var i = 0; i < terms.length; i ++) {
var blue = Math.floor(Math.random() * 200) + 55;
}
canvas.addEventListener('mouseup', showInfo, false);
+
+function drawKey() {
+ ontMap.fillStyle="#000000";
+ ontMap.fillText("Ontology Color Key:",<?php echo $width ?>-250,topOffset+cellSize);
+ for(var i=0;i<legalOntologies.length;i++) {
+ // 0-255, 0-175, 255
+ var redfrequency = Math.floor((255/legalOntologies.length) * (legalOntologies.length-i));
+ var greenfrequency = Math.floor((1-redfrequency/255)*175);
+
+ var bluecolor = "ff";
+ var redcolor = redfrequency.toString(16);
+ var greencolor = greenfrequency.toString(16);
+ if(redcolor.length < 2) {
+ redcolor = "0" + redcolor;
+ }
+ if(greencolor.length < 2) {
+ bluecolor = "0" + bluecolor;
+ }
+ var color = "#" + redcolor + greencolor + bluecolor;
+ ontMap.fillStyle = color;
+ ontMap.fillText(legalOntologies[i],<?php echo $width ?>-250,topOffset+cellSize*(2+i))
+ }
+
+
+
+
+}
+var tempTerms = new Array();
function drawTerms(startTerm) {
//black for text
- ontMap.fillStyle = "#000000";
//rotating the canvas for labeling the terms
ontMap.rotate(-90*Math.PI/180);
//labeling the terms
var translated = 0;
- for (var s=startTerm; (s<termCount) && (s<=startTerm+maxCols); s++) {
- term=terms[s];
- finalTerm = term.replace("_", " ");
- ontMap.fillText(finalTerm,4, leftOffset + 15);
- ontMap.translate(0,cellSize);
- translated = translated + cellSize;
+ var t=startTerm
+ var i=0;
+ for (var j=startTerm; (j<termCount) && (t<=startTerm+maxCols); j++) {
+ if(isIn(terms[j][1],legalOntologies)) {
+ tempTerms[i] = terms[j];
+ i++
+ term=terms[j][0];
+ finalTerm = term.replace("_", " ");
+
+ // 0-255, 0-175, 255
+ var redfrequency = Math.floor((255/legalOntologies.length) * (legalOntologies.length-findIndex(terms[j][1],legalOntologies)));
+ var greenfrequency = Math.floor((1-redfrequency/255)*175);
+
+ var bluecolor = "ff";
+ var redcolor = redfrequency.toString(16);
+ var greencolor = greenfrequency.toString(16);
+ if(redcolor.length < 2) {
+ redcolor = "0" + redcolor;
+ }
+ if(greencolor.length < 2) {
+ bluecolor = "0" + bluecolor;
+ }
+ var color = "#" + redcolor + greencolor + bluecolor;
+ ontMap.fillStyle = color;
+
+ ontMap.fillText(finalTerm,4, leftOffset + 15);
+ ontMap.translate(0,cellSize);
+ translated = translated + cellSize;
+ t++;
+ }
}
//resetting the canvas to start position
ontMap.translate(0,-translated);
startXCell = Math.floor(scrolledLeft/cellSize);
startYCell = Math.floor(scrolledTop/cellSize);
ontMap.strokeStyle="#0000FF";
- for(var t=startXCell; (t<termCount) && ((t-startXCell)<=maxCols); t++) {
- var xCoord = leftOffset+(t-startXCell)*cellSize+5;
-
- var color = termColors[t];
- ontMap.fillStyle=color;
- ontMap.fillRect(xCoord,topOffset-(cellSize+10),cellSize,cellSize);
- ontMap.fillStyle="#000000";
- if(checkBoxes[t]) {
- ontMap.font="14px Arial";
- ontMap.fillText("X",xCoord+3,topOffset-(cellSize*2+3));
- ontMap.font="10px Arial";
- }
- ontMap.strokeRect(xCoord,topOffset-(cellSize*3),cellSize,cellSize);
+ var t=startXCell;
+ for(var j=startXCell; (j<termCount) && ((t-startXCell)<=maxCols); j++) {
+ if(isIn(terms[j][1],legalOntologies)) {
+ var xCoord = leftOffset+(t-startXCell)*cellSize+5;
+
+ var color = termColors[j];
+ ontMap.fillStyle=color;
+ ontMap.fillRect(xCoord,topOffset-(cellSize+10),cellSize,cellSize);
+ ontMap.fillStyle="#000000";
+ if(checkBoxes[j]) {
+ ontMap.font="14px Arial";
+ ontMap.fillText("X",xCoord+3,topOffset-(cellSize*2+3));
+ ontMap.font="10px Arial";
+ }
+ ontMap.strokeRect(xCoord,topOffset-(cellSize*3),cellSize,cellSize);
- for(var g=startYCell; (g<geneCount) && ((g-startYCell)<maxRows); g++) {
+ for(var g=startYCell; (g<geneCount) && ((g-startYCell)<maxRows); g++) {
- if(cellData[g][t][0] == 0) ontMap.fillStyle= "#FFFFFF";
- else ontMap.fillStyle=color;
+ if(cellData[g][j][0] == 0) ontMap.fillStyle= "#FFFFFF";
+ else ontMap.fillStyle=color;
- var yCoord = topOffset+(g-startYCell)*cellSize;
+ var yCoord = topOffset+(g-startYCell)*cellSize;
- ontMap.fillRect(xCoord, yCoord, cellSize, cellSize);
- if(cellData[g][t][0] != 0) {
- ontMap.fillStyle="#000000";
- ontMap.fillText(cellData[g][t][1],xCoord,yCoord+cellSize);
+ ontMap.fillRect(xCoord, yCoord, cellSize, cellSize);
+ if(cellData[g][j][0] != 0) {
+ ontMap.fillStyle="#000000";
+ ontMap.fillText(cellData[g][j][1],xCoord,yCoord+cellSize);
+ }
}
+ t++;
}
}
drawTerms(startXCell);
drawGenes(startYCell);
+ drawKey();
}
}
}
if((y<(topOffset-cellSize*3)) && (x>leftOffset)) { //for getting terms
var index = Math.floor((x-leftOffset)/cellSize) + Math.floor(scrolledLeft/cellSize);
- var term = terms[index].split("-")[0];
+ var term = tempTerms[index][0].split("-")[0];
getTermInfo(term);
}
if(y<(topOffset-cellSize*2) && y>(topOffset-cellSize*3) && x>leftOffset) { //for checkBoxes
var index = Math.floor((x-leftOffset-7)/cellSize) + Math.floor(scrolledLeft/cellSize); //NOTE the -7 is to account for funky mouse mapping.
- checkBoxes[index] = !checkBoxes[index];
+ var term=tempTerms[index];
+ var chIndex = findIndex(term,terms);
+ checkBoxes[chIndex] = !checkBoxes[chIndex];
drawMap(true);
}
// if((y>topOffset) && ((y+scrolledTop)<(topOffset + cellSize*clusterCount)) && (x>leftOffset) && ((x+scrolledLeft)<leftOffset + speciesCount*cellSize)) {
if(checkBoxes[i]) size++;
}
if(size == 0) {
- alert ("No terms were selected!");
return;
}
j = 0;
for(var i = 0; i < terms.length; i ++) {
if(checkBoxes[i]) {
- sendTerms[j]=terms[i];
+ sendTerms[j]=terms[i][0];
j++;
}
}
document.downloadImage.submit();
}
+function redrawOntologies() {
+ var cb = document.getElementsByTagName('input');
+ var j=0;
+ legalOntologies = new Array();
+ for (var i=0; i<cb.length; i++) {
+ if (cb[i].getAttribute('type') == "checkbox") {
+ if (cb[i].checked==true) {
+ legalOntologies[j] = cb[i].value;
+ j++;
+ }
+ }
+ }
+ drawMap(true);
+}
+
</script>
</body>
projects / old-jaiswallab-svn / .git / commitdiff