From fe040a08fcf6c5375ccff03304bc4c8512d09cc1 Mon Sep 17 00:00:00 2001
From: Winnie <liang15@mcmaster.ca>
Date: Mon, 2 Apr 2018 17:56:16 -0400
Subject: [PATCH] Update - Add functionality to send json to histogram
- Also have base for map and heatmap
---
tomcat/webapps/Trawl/index.jsp | 25 ++++----
tomcat/webapps/Trawl/script.js | 113 +++++++++++++++++++++++++++------
2 files changed, 104 insertions(+), 34 deletions(-)
diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index 6b9843d..5b77d48 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/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>
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index 753776d..c86eeb9 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/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({
--
GitLab