From: miles <miles@localhost>
Date: Tue, 26 Mar 2013 19:05:58 +0000 (+0000)
Subject: View Ontology Changes:
X-Git-Url: http://gitweb.planteome.org/?a=commitdiff_plain;h=cdfd02b3de0490c0af587235abc374c903d56e80;p=old-jaiswallab-svn%2F.git

View Ontology Changes:
        -random column colors is working
        -columns have a color key

svn path=/; revision=445
---

diff --git a/Personnel/miles/Web Page/viewOntology.php b/Personnel/miles/Web Page/viewOntology.php
index a8a9ffb..e4e069e 100644
--- a/Personnel/miles/Web Page/viewOntology.php	
+++ b/Personnel/miles/Web Page/viewOntology.php	
@@ -84,35 +84,42 @@ for($row = mysql_fetch_row($results); $row != null; $row = mysql_fetch_row($resu
   }
 
 }
-$semiFinalCellData;
-for ($i = 0; $i < sizeof($cellData); $i ++)
-  {
-  for($j = 0; $j < sizeof($cellData[$i]); $j++)
+
+if(empty($cellData)) {
+echo "These genes are not yet annotated in our database.";
+}
+else {
+  $semiFinalCellData;
+  for ($i = 0; $i < sizeof($cellData); $i ++)
     {
-    $semiFinalCellData[$i][$j] = implode(",",$cellData[$i][$j]);
+    for($j = 0; $j < sizeof($cellData[$i]); $j++)
+      {
+      $semiFinalCellData[$i][$j] = implode(",",$cellData[$i][$j]);
+      }
     }
-  }
 
 
-$finalCellData;
-for ($i = 0; $i < sizeof($semiFinalCellData); $i ++)
-  {
-  $finalCellData[$i] = implode(";", $semiFinalCellData[$i]);
+  $finalCellData;
+  for ($i = 0; $i < sizeof($semiFinalCellData); $i ++)
+    {
+    $finalCellData[$i] = implode(";", $semiFinalCellData[$i]);
+    }
+  $printTerms;
+  for($i = 0; $i < sizeof($terms); $i ++) {
+    $printTerms[$i] = $terms[$i][0] . $terms[$i][1];
   }
+}
 
 
 
 $height = 800;
 $width = 1200;
 
-$printTerms;
-for($i = 0; $i < sizeof($terms); $i ++) {
-  $printTerms[$i] = $terms[$i][0] . $terms[$i][1];
-}
 ?>
 <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>
-    The numbers printed inside each cell represent the confidence rating of the ontological assignment; a higher number indicates more confidence.
+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
 </div>
 
 
@@ -159,6 +166,7 @@ var geneCount = genes.length;
 var rawTerms = "<?php echo implode(",",$printTerms) ?>";
 var terms = rawTerms.split(",");
 var termCount = terms.length;
+var termColors = new Array(terms.length);
 
 var canvas = document.getElementById("myCanvas");
 var ontMap = canvas.getContext("2d");
@@ -169,6 +177,7 @@ var maxTermSize = 0;
 for(var i = 0; i < terms.length; i ++) {
   if(terms[i].length > maxTermSize) maxTermSize = terms[i].length;
 }
+maxTermSize = maxTermSize + 2; //This is to account for the legend row
 
 var topOffset = maxTermSize*5;//NOTE the *7 is just my own approximation: characters on average seem to be about 5 pixels wide at the current font size
 var leftOffset = 85;
@@ -179,15 +188,28 @@ var maxCols = Math.floor((<?php echo $width ?>-leftOffset)/cellSize);
 
 var borderWidth = 1;
 
-canvas.addEventListener('mouseup', showInfo, false);
+for(var i = 0; i < terms.length; i ++) {
+    var blue = Math.floor(Math.random() * 200) + 55;
+    var bluecolor = blue.toString(16);
+    var green = Math.floor(Math.random() * 200) + 55;
+    var greencolor = green.toString(16);
+    var red = Math.floor(Math.random() * 200) + 55;
+    var redcolor = red.toString(16);
+
+    var color = "#" + redcolor + greencolor + bluecolor;
+    termColors[i] = color;
+}
 
+canvas.addEventListener('mouseup', showInfo, false);
 function drawTerms(startTerm) {
+
+
   //black for text
   ontMap.fillStyle = "#000000";
 
   //rotating the canvas for labeling the terms
   ontMap.rotate(-90*Math.PI/180);
-  ontMap.translate(-topOffset,0);
+  ontMap.translate(-topOffset+cellSize + 5,0);
 
   //labeling the terms
   var translated = 0;
@@ -200,12 +222,13 @@ function drawTerms(startTerm) {
     }
   //resetting the canvas to start position
   ontMap.translate(0,-translated);
-  ontMap.translate(topOffset,0);
+  ontMap.translate(topOffset-(cellSize+5),0);
   ontMap.rotate(90*Math.PI/180);
 }
 
 function drawGenes(startGene) {
   ontMap.fillStyle = "#000000";
+  ontMap.fillText("Column Color:",0,topOffset-(cellSize));
   for(var c=startGene; (c<geneCount) && (c<=startGene + maxRows); c++) {
     ontMap.fillText(genes[c],5,(c-startGene)*cellSize + topOffset + cellSize/2);
   }
@@ -213,7 +236,6 @@ function drawGenes(startGene) {
 
 drawGenes(0);
 drawTerms(0);
-
 function drawMap(init) {
   scrolledLeft = document.getElementById("sideScrollDiv").scrollLeft;
   scrolledTop = document.getElementById("topScrollDiv").scrollTop;
@@ -236,34 +258,20 @@ function drawMap(init) {
 
     startXCell = Math.floor(scrolledLeft/cellSize);
     startYCell = Math.floor(scrolledTop/cellSize);
-
     for(var t=startXCell; (t<termCount) && ((t-startXCell)<maxCols); t++) {
+      var xCoord = leftOffset+(t-startXCell+.5)*cellSize;
+
+      var color = termColors[t];
+      ontMap.fillStyle=color;
+      ontMap.fillRect(xCoord,topOffset-(cellSize+5),cellSize,cellSize);
+
       for(var g=startYCell; (g<geneCount) && ((g-startYCell)<maxRows); g++) {
-	if(cellData[g][t][0] != 0) {
-	  redcolor = "00";
-	  var greenfrequency = Math.floor((t / termCount) * 255);
-	  greencolor = greenfrequency.toString(16);
-	  var bluefrequency = 255 - greenfrequency;
-	  bluecolor = bluefrequency.toString(16);
-	  if(redcolor.length < 2) {
-	    redcolor = "0" + redcolor;
-	    }
-	  if(bluecolor.length < 2) {
-	    bluecolor = "0" + bluecolor;
-	  }
-	  if(greencolor.length < 2) {
-	    greencolor = "0" + greencolor;
-	  }
-	  ontMap.fillStyle= "#" + redcolor + greencolor + bluecolor;
-	}
-	if(cellData[g][t][0] == 0) {
-	  redcolor = "FF";
-	  greencolor = "FF";
-	  bluecolor = "FF";
-	  ontMap.fillStyle= "#" + redcolor + greencolor + bluecolor;
-	  }
-	var xCoord = leftOffset+(t-startXCell+.5)*cellSize;
+
+	if(cellData[g][t][0] == 0) ontMap.fillStyle= "#FFFFFF";
+	else ontMap.fillStyle=color;
+
 	var yCoord = topOffset+(g-startYCell)*cellSize;
+
 	ontMap.fillRect(xCoord, yCoord, cellSize, cellSize);
 	if(cellData[g][t][0] != 0) {
 	  ontMap.fillStyle="#000000";