Working copy, made some optimization changes to heatMap.php: these may

need to be debugged as time goes on. Nothing jumps out at me however.
No more funky scrollLeftOffset or scrollRightOffset

svn path=/; revision=438

diff --git a/Personnel/miles/Web Page/heatMap.php b/Personnel/miles/Web Page/heatMap.php
index 17c32e8cca4421d55ab280a9b467ea8ffcf863df..01e8dbf2c1cab52a5131132170321be7c3481868 100644 (file)
--- a/Personnel/miles/Web Page/heatMap.php
+++ b/Personnel/miles/Web Page/heatMap.php
@@ -87,8 +87,7 @@ for ($i = 0; $i < sizeof($heatMapData); $i ++)
   $finalHeatMapData[$i] = implode(",", $heatMapData[$i]);
   }
 
-$width = 25*$speciesCount + 100;
-$height = 25 * $clusterCount + 200;
+
 ?>
 
 
@@ -128,7 +127,7 @@ Your browser does not support the canvas element.
 </canvas> </div>
 
 <div id="scrollDiv" style="overflow: auto; float: left; height: 515px; width: 15px;" onscroll="drawMap();">
-<canvas id="nothing" width="1" height="<?php echo 250 + sizeof($allClusterIDs)*25 ?>"> </canvas>
+<canvas id="nothing" width="1" height="<?php echo 200 + sizeof($allClusterIDs)*25 ?>"> </canvas>
 </div>
 
 <form id="downloadImage" action="download.php" method="post">
@@ -139,7 +138,6 @@ Your browser does not support the canvas element.
 </body>
 
 <script type="text/javascript">
-var width = <?php echo $width; ?>;
 
 
 var rawHeatMapData = "<?php echo implode(";",$finalHeatMapData); ?>";
@@ -176,14 +174,11 @@ var lastY;
 var cellSize = 25; // NOTE don't make this less than 10. The font won't fit.
 var borderWidth = 2;
 
-var leftScrollOffset = 25;
-var topScrollOffset = 50;
-
-var leftOffset = 25+leftScrollOffset;
-var topOffset = 200 + topScrollOffset;
+var leftOffset = 50;
+var topOffset = 200;
 
-var maxRows = Math.floor((500-(topOffset - topScrollOffset))/cellSize);
-var maxCols = Math.floor((1000-(leftOffset-leftScrollOffset))/cellSize);
+var maxRows = Math.floor((500-topOffset)/cellSize);
+var maxCols = Math.floor((1000-leftOffset)/cellSize);
 
 function drawSpecies(startSpecies) {
   //black for text
@@ -211,15 +206,13 @@ function drawSpecies(startSpecies) {
 function drawClusters(startCluster) {
   heatMap.fillStyle = "#000000";
   for(var c=startCluster; (c<clusterCount) && (c<=startCluster + maxRows); c++) {
-    heatMap.fillText((c+1),(leftOffset-leftScrollOffset)+5,(c-startCluster)*cellSize + topOffset + cellSize/2);
+    heatMap.fillText((c+1),leftOffset-20,(c-startCluster)*cellSize + topOffset + cellSize/2);
   }
 }
 
 function drawMap(init) {
-  document.getElementById("canvasDiv").scrollLeft = leftScrollOffset;
-  document.getElementById("canvasDiv").scrollTop = topScrollOffset;
-  scrolledLeft = document.getElementById("scrollDiv").scrollLeft - leftScrollOffset;
-  scrolledTop = document.getElementById("scrollDiv").scrollTop - topScrollOffset +25; // NOTE the 25 accounts for the scrollbar offset allowing for scrolling up/left
+  scrolledLeft = document.getElementById("scrollDiv").scrollLeft;
+  scrolledTop = document.getElementById("scrollDiv").scrollTop;
   if(scrolledLeft > speciesCount*cellSize - maxCols*cellSize) {
     scrolledLeft = speciesCount*cellSize - maxCols*cellSize;
   } //TODO examine this ^
@@ -235,13 +228,11 @@ function drawMap(init) {
     drawnRows = Math.floor(scrolledTop/cellSize);
     
     heatMap.fillStyle = "#FFFFFF";
-    heatMap.fillRect(0,0,1100,500);
-//    heatMap.fillRect(maxCols*cellSize+leftOffset,0,1500-(maxCols*cellSize+leftOffset),1000);
-//    heatMap.fillRect(0,maxRows*cellSize+topOffset,1500,1000-(maxRows*cellSize+topOffset));
+    heatMap.fillRect(0,0,1500,500);
     startXCell = Math.floor(scrolledLeft/cellSize);
     startYCell = Math.floor(scrolledTop/cellSize);
     for(var s=startXCell; (s<heatMapData.length) && ((s-startXCell)<maxCols); s++) {
-      for(var c=startYCell; (c<clusterCount) && ((c-startYCell)<maxRows); c++) {
+      for(var c=startYCell; (c<clusterCount) && ((c-startYCell)<=maxRows); c++) {
        var count = parseInt(heatMapData[s][c]);
        var redcolor = "00";
        var bluecolor = "00";
@@ -299,17 +290,17 @@ function drawKey() {
   //drawing the key
   //0
   heatMap.fillStyle="#5C5C5C";
-  heatMap.fillRect(keyStart + 30,(topOffset-topScrollOffset),cellSize,cellSize);
+  heatMap.fillRect(keyStart + 30,(topOffset),cellSize,cellSize);
   heatMap.fillStyle="#000000";
-  heatMap.fillText("= 0",keyStart + 60,13 + (topOffset-topScrollOffset));
-  heatMap.strokeRect(keyStart + 30 - borderWidth/2,(topOffset-topScrollOffset)-borderWidth/2,cellSize,cellSize);
+  heatMap.fillText("= 0",keyStart + 60,13 + (topOffset));
+  heatMap.strokeRect(keyStart + 30 - borderWidth/2,(topOffset)-borderWidth/2,cellSize,cellSize);
 
   //1
   heatMap.fillStyle="#CFB52B";
-  heatMap.fillRect(keyStart + 30,cellSize+5+(topOffset-topScrollOffset),cellSize,cellSize);
+  heatMap.fillRect(keyStart + 30,cellSize+5+(topOffset),cellSize,cellSize);
   heatMap.fillStyle="#000000";
-  heatMap.fillText("= 1",keyStart + 60,5+(3/2)*cellSize + (topOffset-topScrollOffset));
-  heatMap.strokeRect(keyStart + 30-borderWidth/2,(topOffset-topScrollOffset) + 5+cellSize - borderWidth/2,cellSize,cellSize);
+  heatMap.fillText("= 1",keyStart + 60,5+(3/2)*cellSize+topOffset);
+  heatMap.strokeRect(keyStart + 30-borderWidth/2,topOffset+5+cellSize - borderWidth/2,cellSize,cellSize);
 
   //2
   if(maxCount == 2) {
@@ -318,10 +309,10 @@ function drawKey() {
   else {
   heatMap.fillStyle="#0000FF";
   }
-  heatMap.fillRect(keyStart + 30,2*(cellSize+5)+(topOffset-topScrollOffset),cellSize,cellSize);
+  heatMap.fillRect(keyStart + 30,2*(cellSize+5)+topOffset,cellSize,cellSize);
   heatMap.fillStyle="#000000";
-  heatMap.fillText("= 2",keyStart + 60,10+(5/2)*cellSize+(topOffset-topScrollOffset));
-  heatMap.strokeRect(keyStart + 30-borderWidth/2,(topOffset-topScrollOffset)+2*(cellSize+5)-borderWidth/2,cellSize,cellSize);
+  heatMap.fillText("= 2",keyStart + 60,10+(5/2)*cellSize+topOffset);
+  heatMap.strokeRect(keyStart + 30-borderWidth/2,topOffset+2*(cellSize+5)-borderWidth/2,cellSize,cellSize);
 
   //3+
   var i=7;
@@ -341,36 +332,36 @@ function drawKey() {
       bluecolor = "0" + bluecolor;
       }
     heatMap.fillStyle="#" + redcolor + "00" + bluecolor;
-    heatMap.fillRect(keyStart + 30, 5+cellSize+(k-1)*(cellSize+5) + (topOffset-topScrollOffset),cellSize,cellSize);
+    heatMap.fillRect(keyStart + 30, 5+cellSize+(k-1)*(cellSize+5) +topOffset,cellSize,cellSize);
     heatMap.fillStyle="#000000";
     var key = Math.floor((k-2)*((maxCount-2)/(i-3)) + 2);
   //  var key = Math.floor((k+1)*(maxCount-2)/i);
     var txt = "= " + key;
-    heatMap.fillText(txt,keyStart + 60,5+(3/2*cellSize)+(k-1)*(cellSize+5) + (topOffset-topScrollOffset));
-    heatMap.strokeRect(keyStart+30-borderWidth/2, 5+cellSize+(k-1)*(cellSize+5)  + (topOffset-topScrollOffset) - borderWidth/2,cellSize,cellSize);
+    heatMap.fillText(txt,keyStart + 60,5+(3/2*cellSize)+(k-1)*(cellSize+5) + topOffset);
+    heatMap.strokeRect(keyStart+30-borderWidth/2, 5+cellSize+(k-1)*(cellSize+5)  + topOffset - borderWidth/2,cellSize,cellSize);
     }
 
 }
 
 
 function showInfo(event) {
-  var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft;
-  var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop;
+  var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft + 25; //TODO WHY??? Why must I add 25? I dont know. And it kills me.
+  var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop + 50; //TODO WHY??? Why must I add 50? I dont know. And it kills me.
 
-  if((x<leftOffset-leftScrollOffset) && (y>topOffset-topScrollOffset) && ((y+scrolledTop)<(topOffset + cellSize*clusterCount))) {
-    var index = Math.floor(((y+topScrollOffset)-topOffset)/cellSize) + Math.floor(scrolledTop/25);
+  if((x<leftOffset) && (y>topOffset)) {
+    var index = Math.floor((y-topOffset)/cellSize) + Math.floor(scrolledTop/25);
     var cluster = allClusterIDs[index];
     getClusterInfo(cluster, index);
   }
-  if((y<topOffset-topScrollOffset) && (x>leftOffset-leftScrollOffset)) {
-    var index = Math.floor(((x+leftScrollOffset)-leftOffset)/cellSize) + Math.floor(scrolledLeft/25);
+  if((y<topOffset) && (x>leftOffset) && (y<leftOffset+maxCols*cellSize)) {
+    var index = Math.floor((x-leftOffset)/cellSize) + Math.floor(scrolledLeft/25);
     var species = allSpecies[index];
     getSpeciesInfo(species);
   }
-  if((y>topOffset-topScrollOffset) && ((y+scrolledTop)<(topOffset + cellSize*clusterCount)) && (x>leftOffset-leftScrollOffset) && ((x+scrolledLeft)<leftOffset + speciesCount*cellSize)) {
-    var clusterIndex = Math.floor(((y+topScrollOffset)-topOffset)/cellSize) + Math.floor(scrolledTop/25);
+  if((y>topOffset) && ((y+scrolledTop)<(topOffset + cellSize*clusterCount)) && (x>leftOffset) && ((x+scrolledLeft)<leftOffset + speciesCount*cellSize)) {
+    var clusterIndex = Math.floor((y-topOffset)/cellSize) + Math.floor(scrolledTop/25);
     var cluster = allClusterIDs[clusterIndex];
-    var index = Math.floor(((x+leftScrollOffset)-leftOffset)/cellSize) + Math.floor(scrolledLeft/25);
+    var index = Math.floor((x-leftOffset)/cellSize) + Math.floor(scrolledLeft/25);
     var species = allSpecies[index];
     getBoxInfo(cluster, species, clusterIndex, index);
   }
@@ -407,8 +398,7 @@ function jumpToCluster() {
   alert("No such cluster exists for this result set!");
   return;
   }
-  if(cluster > clusterCount - maxCols) document.getElementById("scrollDiv").scrollTop = clusterCount*25 - maxCols*25;
-  document.getElementById("scrollDiv").scrollTop = cluster*25;
+  document.getElementById("scrollDiv").scrollTop = (cluster-1)*25;
   drawMap();
 }
 

diff --git a/Personnel/miles/Web Page/viewOntology.php b/Personnel/miles/Web Page/viewOntology.php
index 1919e93929caf0de78210bcb70d28cfbe3048c20..77fbbe8043211051806980864688b99c403e03d3 100644 (file)
--- a/Personnel/miles/Web Page/viewOntology.php
+++ b/Personnel/miles/Web Page/viewOntology.php
@@ -127,7 +127,7 @@ Your browser does not support the canvas element.
 </canvas> </div>
 
 <div id="scrollDiv" style="overflow: auto; float: left; height: 515px; width: 15px;" onscroll="drawMap();">
-<canvas id="nothing" width="1" height="<?php echo 250 + sizeof($genes)*15 ?>"> </canvas>
+<canvas id="nothing" width="1" height="<?php echo 210 + sizeof($genes)*15 ?>"> </canvas>
 </div>
 
 
@@ -152,7 +152,7 @@ var canvas = document.getElementById("myCanvas");
 var ontMap = canvas.getContext("2d");
 var startTerm = 0;
 
-var topOffset = 210;
+var topOffset = 200;
 var leftOffset = 85;
 
 var cellSize = 15; //NOTE if this is changed, the size of the canvasDiv must also be changed by the same factor!