Update - Add functionality to send json to histogram

- Also have base for map and heatmap

tomcat/webapps/Trawl/index.jsp

@@ -45,23 +45,17 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
         <section id="formWrapper">
             <section id="pickSciRanks">
                 Phylum:
-                <%--<select name="pickSciR" id="pickPhylum" size="1" onChange="updateSci(this)"><!--Dynamically Filled--></select>--%>
                 <select name="pickSciR" id="pickPhylum" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
-
                 Class:
-                <select name="pickSciR" id="pickClass" size="1" onChange="callUpdateSci(this)">
-                    <%--<option value="00">Arthropoda</option>--%>
-                    <%--<option value="01">Chordata</option>--%>
-                    <%--<option value="03">Mollusca</option>--%>
-                </select>
+                <select name="pickSciR" id="pickClass" size="1" onChange="callUpdateSci(this)"><%--<option value="00">Arthropoda</option>--%></select>
                 Order:
-                <select name="pickSciR" id="pickOrder" size="1" onChange="callUpdateSci(this)""><!--Dynamically Filled--></select>
+                <select name="pickSciR" id="pickOrder" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
                 Family:
                 <select name="pickSciR" id="pickFamily" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
                 Genus:
                 <select name="pickSciR" id="pickGenus" size="1" onChange="callUpdateSci(this)"><!--Dynamically Filled--></select>
                 Species:
-                <select name="pickSciR" id="pickSpecies" size="1" onChange="alert("No function atm")"><!--Dynamically Filled--></select>
+                <select name="pickSciR" id="pickSpecies" size="1" onChange="alert('No function atm')"><!--Dynamically Filled--></select>
             </section>
 
             <section id="yearIn">
@@ -76,17 +70,22 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
                 <%--Map and Histogram must have the same name for default checkbox to function correctly--%>
                 <input type="radio" name="pickOutput" value="map"> Map
                 <input type="radio" name="pickOutput" value="histogram" checked> Histogram
-                <button type="button" onclick="">Load</button>
-                <button type="button" onclick="">View Individual Records</button> <!--To records.html-->
+                <button type="button" onClick="callOutput()">Load</button>
+                <button type="button" onClick="">View Individual Records</button> <!--To records.html-->
             </section>
         </section>
 
 
         <section id="outputWrapper">
-            <section id="outputDetails"><bold>Found 278143 results (0.204 seconds)</bold><br><bold>Total population:</bold> 66122855<br><!--  Stuff like population count, entries found, etc. go here --></section>
+            <section id="outputDetails">
+                Found x results (x seconds)<br>
+                Total population:</bold> 66122855<br>
+                <!--  Stuff like population count, entries found, etc. go here -->
+            </section>
+
             <section id="outputBox"><!--  Map, Histogram Box. Histogram selected by default but we might want to have a loading screen instead.-->
-                <!--  <div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div> -->
                 <div id="histogram"></div>
+                <%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
             </section>
         </section>
     </section>

tomcat/webapps/Trawl/script.js

@@ -115,29 +115,100 @@ function reqBioLookup(tagID, parentId){
 
 //This function will get the new nodelist from the server.
 //ParentId is the taxId of the node that holds the list of children we want.
-function reqHistogram(taxonId){
- var path = 'doHist.do';
- var params = {taxId: Number(taxonId)};
- var xhr = new XMLHttpRequest();
- xhr.open("POST", path);
- xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  //Send the proper header info
-
- xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
-     // Update the dropdown when response is ready
-     if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
-         var nodeList = JSON.parse(this.responseText);
-         histogram(nodeList["x"], nodeList["y"]);
-     }
-     else{
-         console.log("Server Response: Error"); //RME
-     }
- };
-
- var jsonString= JSON.stringify(params);     //generate JSON string
- xhr.send(jsonString);                       //send request to server
- // document.getElementById("console").innerHTML += "Sent request to " + path + ": "  + jsonString + "<br>"; //RME
+function reqHistogram(params){
+     var path = 'doHist.do';
+     var xhr = new XMLHttpRequest();
+     xhr.open("POST", path);
+     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  //Send the proper header info
+
+     xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
+         // Update the dropdown when response is ready
+         if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
+             var nodeList = JSON.parse(this.responseText);
+             histogram(nodeList["x"], nodeList["y"]);
+         }
+         else {
+             console.log("Server Response: Error"); //RME
+         }
+     };
+     xhr.send(params);                       //send request to server
+     // document.getElementById("console").innerHTML += "Sent request to " + path + ": "  + jsonString + "<br>"; //RME
+ }
+
+ //Returns the most general taxon group (leftmost)
+function getTaxGroup() {
+    var tagID = "pickSpecies"
+    var taxGroup = document.getElementById(tagID);
+
+    while (true){
+        console.log(taxGroup.value);
+        if(taxGroup.value !== null && taxGroup.value !== "-1"){
+            console.log("returning Animalia");
+            return Number(taxGroup.value);
+        }
+        else if(tagID === "pickAnimalia"){
+            console.log("in pick Animalia");
+            return 2;
+        }
+        else{
+            taxGroup = document.getElementById(tagID);
+            console.log("Switching: " + tagID);
+            switch (tagID){
+                case "pickPhylum":
+                    tagID = "pickAnimalia";
+                    break;
+
+                case "pickClass":
+                    tagID = "pickPhylum";
+                    break;
+
+                case "pickOrder":
+                    tagID = "pickClass";
+                    break;
+
+                case "pickFamily":
+                    tagID = "pickOrder";
+                    break;
+
+                case "pickGenus":
+                    tagID = "pickFamily";
+                    break;
+
+                case "pickSpecies":
+                    tagID = "pickGenus";
+                    break;
+            }
+        }
+    }
 }
 
+function callOutput(){
+    var pickOutputType = document.getElementsByName('pickOutput');
+    var outType, taxGroup, yearFrom, yearTo;
+    // Get output selection: Map/Histogram
+    for(var i = 0; i < pickOutputType.length; i++){
+        if(pickOutputType[i].checked){
+            console.log(pickOutputType[i].value);   //RME
+            outType = pickOutputType[i].value;
+        }
+    }
+    taxGroup = getTaxGroup();
+    yearFrom = $( "#slider-range" ).slider( "values", 0 );
+    yearTo = $( "#slider-range" ).slider( "values", 1 );
+
+    var params= JSON.stringify({taxId: Number(taxGroup), yearF: yearFrom, yearT: yearTo});
+
+    //Switch Output Display
+    if(outType === "Histogram"){
+        reqHistogram(params);
+    }
+    else{
+        console.log("Map or Heatmap");
+    }
+}
+
+
+
 // JQuery for Range Slider
 $( function() {
     $( "#slider-range" ).slider({