From d857ad32c019b84f051853c2a9ca230670ea28e3 Mon Sep 17 00:00:00 2001
From: miles <miles@localhost>
Date: Wed, 27 Mar 2013 21:40:41 +0000
Subject: [PATCH] minor visual enhancements to view ontology and heatmap,
 mostly to do with scrolling

svn path=/; revision=454
---
 Personnel/miles/Web Page/heatMap.php      | 26 ++++++++++-------------
 Personnel/miles/Web Page/viewOntology.php | 20 +++++------------
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/Personnel/miles/Web Page/heatMap.php b/Personnel/miles/Web Page/heatMap.php
index 4360f22..1ad201b 100644
--- a/Personnel/miles/Web Page/heatMap.php	
+++ b/Personnel/miles/Web Page/heatMap.php	
@@ -126,10 +126,15 @@ Click on a species name, cluster number, or cell for more information.
 Your browser does not support the canvas element.
 </canvas> </div>
 
-<div id="scrollDiv" style="overflow: auto; float: left; height: 515px; width: 15px;" onscroll="drawMap();">
+<div id="topScrollDiv" style="overflow: auto; float: left; height: 515px; width: 15px;" onscroll="drawMap();">
 <canvas id="nothing" width="1" height="<?php echo 200 + sizeof($allClusterIDs)*25 ?>"> </canvas>
 </div>
 
+<div id="sideScrollDiv" style="overflow: auto; float: left; height: 15px; width: <?php echo (1100-200 + 15) ?>px;" onscroll="drawMap();">
+<canvas id="nothing" width="<?php echo 50 + sizeof($includedSpecies)*25 ?>" height="1"> </canvas>
+</div>
+
+
 <form id="downloadImage" action="HMdownload.php" method="post">
 <input type="hidden" name="param" value = "unset DISPLAY && java -Djava.awt.headless=true -jar Heatmap.jar &#34;image&#34; <?php echo implode(" ",$includedSpecies)?>;<?php echo $input; ?>">
 <input type="button" value="Download as JPG" onClick="downloadImage()"/>
@@ -150,7 +155,7 @@ for(var i=0; i<rareHeatMapData.length; i++) {
 var rawSpecies = "<?php echo implode(",",$includedSpecies); ?>";
 var allSpecies = rawSpecies.split(",");
 var speciesCount = allSpecies.length;
-
+alert(speciesCount*25 + 50);
 var rawClusterIDs = "<?php echo implode(",", $allClusterIDs); ?>";
 var allClusterIDs = rawClusterIDs.split(",");
 var maxCount = <?php echo $maxCount; ?>;
@@ -178,7 +183,7 @@ var leftOffset = 50;
 var topOffset = 200;
 
 var maxRows = Math.floor((500-topOffset)/cellSize);
-var maxCols = Math.floor((1000-leftOffset)/cellSize);
+var maxCols = Math.floor((950-leftOffset)/cellSize);
 
 function drawSpecies(startSpecies) {
   //black for text
@@ -211,17 +216,8 @@ function drawClusters(startCluster) {
 }
 
 function drawMap(init) {
-  scrolledLeft = document.getElementById("scrollDiv").scrollLeft;
-  scrolledTop = document.getElementById("scrollDiv").scrollTop;
-  if(scrolledLeft > speciesCount*cellSize - maxCols*cellSize) {
-    scrolledLeft = speciesCount*cellSize - maxCols*cellSize;
-  } //TODO examine this ^
-  if(scrolledLeft < 0) {
-    scrolledLeft = 0;
-  }
-  if(scrolledTop < 0) {
-    scrolledTop = 0;
-  }
+  scrolledLeft = document.getElementById("sideScrollDiv").scrollLeft;
+  scrolledTop = document.getElementById("topScrollDiv").scrollTop;
 
   if((init || Math.floor(scrolledLeft/cellSize) != drawnCols || Math.floor(scrolledTop/cellSize) != drawnRows)) {
     drawnCols = Math.floor(scrolledLeft/cellSize);
@@ -286,7 +282,7 @@ function drawMap(init) {
 }
 
 function drawKey() {
-  var keyStart = leftOffset + (speciesCount * cellSize);
+  var keyStart = leftOffset + (maxCols * cellSize);
   //drawing the key
   //0
   heatMap.fillStyle="#5C5C5C";
diff --git a/Personnel/miles/Web Page/viewOntology.php b/Personnel/miles/Web Page/viewOntology.php
index 1542b64..16172d0 100644
--- a/Personnel/miles/Web Page/viewOntology.php	
+++ b/Personnel/miles/Web Page/viewOntology.php	
@@ -260,8 +260,8 @@ maxTermSize = maxTermSize + (cellSize/5)*3; //This is to account for the legend
 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;
 
-var maxRows = Math.floor((<?php echo $height ?>-topOffset)/cellSize);
-var maxCols = Math.floor((<?php echo $width ?>-leftOffset)/cellSize);
+var maxRows = Math.floor((<?php echo $height ?>-topOffset-15)/cellSize);
+var maxCols = Math.floor((<?php echo $width ?>-leftOffset-30)/cellSize);
 
 var borderWidth = 1;
 
@@ -320,16 +320,6 @@ drawTerms(0);
 function drawMap(init) {
   scrolledLeft = document.getElementById("sideScrollDiv").scrollLeft;
   scrolledTop = document.getElementById("topScrollDiv").scrollTop;
-  if(scrolledLeft > termCount*cellSize - maxCols*cellSize) {
-    scrolledLeft = termCount*cellSize - maxCols*cellSize;
-  } //TODO examine this ^
-  if(scrolledLeft < 0) {
-    scrolledLeft = 0;
-  }
-  if(scrolledTop < 0) {
-    scrolledTop = 0;
-  }
-
   if((init || Math.floor(scrolledLeft/cellSize) != drawnCols || Math.floor(scrolledTop/cellSize) != drawnRows)) {
     drawnCols = Math.floor(scrolledLeft/cellSize);
     drawnRows = Math.floor(scrolledTop/cellSize);
@@ -340,7 +330,7 @@ function drawMap(init) {
     startXCell = Math.floor(scrolledLeft/cellSize);
     startYCell = Math.floor(scrolledTop/cellSize);
     ontMap.strokeStyle="#0000FF";
-    for(var t=startXCell; (t<termCount) && ((t-startXCell)<maxCols); t++) {
+    for(var t=startXCell; (t<termCount) && ((t-startXCell)<=maxCols); t++) {
       var xCoord = leftOffset+(t-startXCell)*cellSize+5;
 
       var color = termColors[t];
@@ -348,8 +338,8 @@ function drawMap(init) {
       ontMap.fillRect(xCoord,topOffset-(cellSize+10),cellSize,cellSize);
       ontMap.fillStyle="#000000";
       if(checkBoxes[t]) {
-	ontMap.font="22px Arial";
-	ontMap.fillText("X",xCoord,topOffset-(cellSize*2));
+	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);
-- 
2.34.1