From f6cfdc33f92d9a9e9baf2628c96ed20ba2b02f27 Mon Sep 17 00:00:00 2001
From: Ray Liu <rayliu109@gmail.com>
Date: Mon, 2 Apr 2018 23:02:10 -0400
Subject: [PATCH] MERGE
---
tomcat/webapps/Trawl/WEB-INF/web.xml | 34 +-
tomcat/webapps/Trawl/index.jsp | 200 +++++-----
tomcat/webapps/Trawl/infoWindow.js | 2 +-
tomcat/webapps/Trawl/map.js | 2 +-
tomcat/webapps/Trawl/script.js | 564 +++++++++++++--------------
5 files changed, 401 insertions(+), 401 deletions(-)
diff --git a/tomcat/webapps/Trawl/WEB-INF/web.xml b/tomcat/webapps/Trawl/WEB-INF/web.xml
index 6b212a2..601507d 100644
--- a/tomcat/webapps/Trawl/WEB-INF/web.xml
+++ b/tomcat/webapps/Trawl/WEB-INF/web.xml
@@ -1,18 +1,18 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
- version="2.4">
-
- <servlet>
- <servlet-name>Trawl</servlet-name>
- <servlet-class>web.Director</servlet-class>
- </servlet>
-
- <servlet-mapping>
- <servlet-name>Trawl</servlet-name>
- <url-pattern>/doBioLookup.do</url-pattern>
- <url-pattern>/doHist.do</url-pattern>
- <url-pattern>/doMap.do</url-pattern>
- </servlet-mapping>
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
+ version="2.4">
+
+ <servlet>
+ <servlet-name>Trawl</servlet-name>
+ <servlet-class>web.Director</servlet-class>
+ </servlet>
+
+ <servlet-mapping>
+ <servlet-name>Trawl</servlet-name>
+ <url-pattern>/doBioLookup.do</url-pattern>
+ <url-pattern>/doHist.do</url-pattern>
+ <url-pattern>/doMap.do</url-pattern>
+ </servlet-mapping>
</web-app>
\ No newline at end of file
diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index b16f880..91d35d1 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/tomcat/webapps/Trawl/index.jsp
@@ -1,100 +1,100 @@
-<%@ page import="java.util.*" %>
-<!--
-Double Handle Slider Modified from: http://jqueryui.com/slider/#range
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="insert, some, keywords"> <!--TODO-->
- <meta name="description" content="insert a description"> <!--TODO-->
- <title>TrawlExpert</title>
- <link rel="stylesheet" type="text/css" href="style.css">
-
- <!--JQuery-->
- <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
- <script src="histogram.js"></script>
- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9xCYy2Co-0GWfHT8e1smTjIneNbWSfPgY&libraries=visualization"></script>
-
- <script src="map.js"></script>
- <script src="infoWindow.js"></script>
- <script src="infoGenerator.js"></script>
-
- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
-
- <!-- MUST load JQuery Library before loading this-->
- <script src="script.js"></script>
-
- <!--Fonts-->
- <!--Open Sans Rg-400/Semi-600/Bd-700-->
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
-
- <!--Plugins-->
-</head>
-<body>
- <header>
- <div class="headerWrapper">
- <a href="index.jsp" >TrawlExpert</a>
- <span class="nav-bar">
- <a href="about.html">About</a> |
- <a href="index.html" target="_blank">GitHub</a>
- </span>
- </div>
- </header>
-
- <section id="main">
- <section id="formWrapper">
- <section id="pickSciRanks">
- Phylum:
- <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>--%></select>
- Order:
- <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"><!--Dynamically Filled--></select>
- </section>
-
- <section id="yearIn">
- Year Range:
- <span id="fromtoYear"></span>
- <form>
- <div id="slider-range"></div>
- </form>
- </section>
-
- <section id="outputIn">
- <%--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="heat"> Heatmap
- <input type="radio" name="pickOutput" value="histogram" checked> Histogram
- <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">
- <!-- 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 display="none" id="histogram"></div>
- <div display="none" id="map"></div>
- <div display="none" id="heat"></div>
- <%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
- </section>
- </section>
- </section>
-</body>
-</html>
-
+<%@ page import="java.util.*" %>
+<!--
+Double Handle Slider Modified from: http://jqueryui.com/slider/#range
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="keywords" content="insert, some, keywords"> <!--TODO-->
+ <meta name="description" content="insert a description"> <!--TODO-->
+ <title>TrawlExpert</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+
+ <!--JQuery-->
+ <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+ <script src="histogram.js"></script>
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9xCYy2Co-0GWfHT8e1smTjIneNbWSfPgY&libraries=visualization"></script>
+
+ <script src="map.js"></script>
+ <script src="infoWindow.js"></script>
+ <script src="infoGenerator.js"></script>
+
+ <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+
+ <!-- MUST load JQuery Library before loading this-->
+ <script src="script.js"></script>
+
+ <!--Fonts-->
+ <!--Open Sans Rg-400/Semi-600/Bd-700-->
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+
+ <!--Plugins-->
+</head>
+<body>
+ <header>
+ <div class="headerWrapper">
+ <a href="index.jsp" >TrawlExpert</a>
+ <span class="nav-bar">
+ <a href="about.html">About</a> |
+ <a href="index.html" target="_blank">GitHub</a>
+ </span>
+ </div>
+ </header>
+
+ <section id="main">
+ <section id="formWrapper">
+ <section id="pickSciRanks">
+ Phylum:
+ <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>--%></select>
+ Order:
+ <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"><!--Dynamically Filled--></select>
+ </section>
+
+ <section id="yearIn">
+ Year Range:
+ <span id="fromtoYear"></span>
+ <form>
+ <div id="slider-range"></div>
+ </form>
+ </section>
+
+ <section id="outputIn">
+ <%--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="heat"> Heatmap
+ <input type="radio" name="pickOutput" value="histogram" checked> Histogram
+ <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">
+ <!-- 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 display="none" id="histogram"></div>
+ <div display="none" id="map"></div>
+ <div display="none" id="heat"></div>
+ <%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
+ </section>
+ </section>
+ </section>
+</body>
+</html>
+
diff --git a/tomcat/webapps/Trawl/infoWindow.js b/tomcat/webapps/Trawl/infoWindow.js
index 74fc822..c89f593 100644
--- a/tomcat/webapps/Trawl/infoWindow.js
+++ b/tomcat/webapps/Trawl/infoWindow.js
@@ -5,7 +5,7 @@
// When the user clicks the marker, an info window opens
function initInfo(lati, longi,info) {
- for(int i=0; i < lati.length; i++){
+ for(var i=0; i < lati.length; i++){
// Generate map centred at Great Lakes
var map = new google.maps.Map(document.getElementById('map'), {
diff --git a/tomcat/webapps/Trawl/map.js b/tomcat/webapps/Trawl/map.js
index e128b9d..9195be4 100644
--- a/tomcat/webapps/Trawl/map.js
+++ b/tomcat/webapps/Trawl/map.js
@@ -61,7 +61,7 @@ function changeOpacity() {
// Input latitude and longitude into map points
function getPoints(latitude, longitude) {
var result = [];
- for (int i = 0 ; i < latitude.length ; i++) {
+ for (var i = 0 ; i < latitude.length ; i++) {
result.push( new google.maps.LatLng(latitude[i], longitude[i]));
}
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index 7e0c419..9542213 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/tomcat/webapps/Trawl/script.js
@@ -1,283 +1,283 @@
-// Initialization
-function init() {
- callUpdateSci({id:"pickAnimalia", value:2}); // Propagate Dropdowns on Startup
- reqHistogram(2);
-}
-
-function resolveAny(obj) {
- if(obj.id === "pickPhylum"){
- return {id:"pickAnimalia", value:2};
- }
- else {
- if (Number(obj.previousElementSibling.value) === -1) {
- return resolveAny(obj.previousElementSibling);
- }
- else {
- return {id: obj.previousElementSibling.id, value: obj.previousElementSibling.value};
- }
- }
-}
-
-function callUpdateSci(object){
- var tagID = object.id;
- var taxID = Number(object.value);
-
- // Resolve "Any" option
- if (taxID === -1){
- var obj2 = resolveAny(object);
- tagID = obj2.id;
- taxID = Number(obj2.value);
- }
- reqBioLookup(tagID, taxID);
-}
-
-function populateDropdown(childTagID, nodeList, subnode){
- var x, y, content="";
- console.log(nodeList[subnode]);
- if(nodeList[subnode] != null){
- for (var i in nodeList[subnode]["taxonName"]){
- x = nodeList[subnode]["taxonId"][i];
- y = nodeList[subnode]["taxonName"][i];
- content += '"<option value="' + x + '">' + y + '</option>';
- }
- }
- // else {
- // content
- // }
-
- document.getElementById(childTagID).innerHTML = content;
-}
-
-function updateSci(tagID, nodeList) {
- while (tagID !== "END"){
- switch (tagID){
- case "pickAnimalia":
- populateDropdown("pickPhylum", nodeList, "phylum");
- tagID = "pickPhylum";
- break;
-
- case "pickPhylum":
- populateDropdown("pickClass", nodeList, "class");
- tagID = "pickClass";
- break;
-
- case "pickClass":
- populateDropdown("pickOrder", nodeList, "order");
- tagID = "pickOrder";
- break;
-
- case "pickOrder":
- populateDropdown("pickFamily", nodeList, "family");
- tagID = "pickFamily";
- break;
-
- case "pickFamily":
- populateDropdown("pickGenus", nodeList, "genus");
- tagID = "pickGenus";
- break;
-
- case "pickGenus":
- populateDropdown("pickSpecies", nodeList, "species");
- tagID = "pickSpecies";
- break;
-
- case "pickSpecies":
- tagID = "END";
- break;
- }
- }
-}
-
-// 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 reqBioLookup(tagID, parentId){
- var path = 'doBioLookup.do';
- var params = {taxId: Number(parentId)};
- 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);
- updateSci(tagID, nodeList);
- }
- 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
-}
-
-//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(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"]);
- document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
- }
- 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 reqMap(params){
- var path = 'doMap.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);
- initMap(nodeList["latitude"], nodeList["longitude"]);
- // document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
- }
- 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
-}
-
-// function reqHeat(params){
-// var path = 'doMap.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);
-// // initMap(nodeList["latitude"], nodeList["longitude"]);
-// document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
-// }
-// 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
-// }
-
-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: Number(yearFrom), yearT: Number(yearTo)});
-
- //Switch Output Display
- document.getElementById("histogram").style.display = "none";
- document.getElementById("map").style.display = "none";
- document.getElementById("heat").style.display = "none";
-
- if(outType === "histogram"){
- reqHistogram(params);
- document.getElementById("histogram").style.display = "block";
- }
- else if(outType === "map"){
- reqMap(params);
- document.getElementById("map").style.display = "block";
- }
- // else if(outType === "heat"){
- // reqHeat(params);
- // document.getElementById("heat").style.display = "block";
- // }
- // else{
- // console.log("Heatmap/Cluster")
- // }
-}
-
-
-
-// JQuery for Range Slider
-$( function() {
- $( "#slider-range" ).slider({
- range: true,
- min: 1960,
- max: 2016,
- values: [ 1960, 2016 ],
- slide: function( event, ui ) {
- $( "#fromtoYear" ).html(ui.values[ 0 ] + " - " + ui.values[ 1 ] )
- }
- });
- $( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
-} );
-
+// Initialization
+function init() {
+ callUpdateSci({id:"pickAnimalia", value:2}); // Propagate Dropdowns on Startup
+ reqHistogram(2);
+}
+
+function resolveAny(obj) {
+ if(obj.id === "pickPhylum"){
+ return {id:"pickAnimalia", value:2};
+ }
+ else {
+ if (Number(obj.previousElementSibling.value) === -1) {
+ return resolveAny(obj.previousElementSibling);
+ }
+ else {
+ return {id: obj.previousElementSibling.id, value: obj.previousElementSibling.value};
+ }
+ }
+}
+
+function callUpdateSci(object){
+ var tagID = object.id;
+ var taxID = Number(object.value);
+
+ // Resolve "Any" option
+ if (taxID === -1){
+ var obj2 = resolveAny(object);
+ tagID = obj2.id;
+ taxID = Number(obj2.value);
+ }
+ reqBioLookup(tagID, taxID);
+}
+
+function populateDropdown(childTagID, nodeList, subnode){
+ var x, y, content="";
+ console.log(nodeList[subnode]);
+ if(nodeList[subnode] != null){
+ for (var i in nodeList[subnode]["taxonName"]){
+ x = nodeList[subnode]["taxonId"][i];
+ y = nodeList[subnode]["taxonName"][i];
+ content += '"<option value="' + x + '">' + y + '</option>';
+ }
+ }
+ // else {
+ // content
+ // }
+
+ document.getElementById(childTagID).innerHTML = content;
+}
+
+function updateSci(tagID, nodeList) {
+ while (tagID !== "END"){
+ switch (tagID){
+ case "pickAnimalia":
+ populateDropdown("pickPhylum", nodeList, "phylum");
+ tagID = "pickPhylum";
+ break;
+
+ case "pickPhylum":
+ populateDropdown("pickClass", nodeList, "class");
+ tagID = "pickClass";
+ break;
+
+ case "pickClass":
+ populateDropdown("pickOrder", nodeList, "order");
+ tagID = "pickOrder";
+ break;
+
+ case "pickOrder":
+ populateDropdown("pickFamily", nodeList, "family");
+ tagID = "pickFamily";
+ break;
+
+ case "pickFamily":
+ populateDropdown("pickGenus", nodeList, "genus");
+ tagID = "pickGenus";
+ break;
+
+ case "pickGenus":
+ populateDropdown("pickSpecies", nodeList, "species");
+ tagID = "pickSpecies";
+ break;
+
+ case "pickSpecies":
+ tagID = "END";
+ break;
+ }
+ }
+}
+
+// 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 reqBioLookup(tagID, parentId){
+ var path = 'doBioLookup.do';
+ var params = {taxId: Number(parentId)};
+ 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);
+ updateSci(tagID, nodeList);
+ }
+ 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
+}
+
+//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(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"]);
+ document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
+ }
+ 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 reqMap(params){
+ var path = 'doMap.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);
+ initMap(nodeList["latitude"], nodeList["longitude"]);
+ // document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
+ }
+ 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
+}
+
+// function reqHeat(params){
+// var path = 'doMap.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);
+// // initMap(nodeList["latitude"], nodeList["longitude"]);
+// document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
+// }
+// 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
+// }
+
+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: Number(yearFrom), yearT: Number(yearTo)});
+
+ //Switch Output Display
+ document.getElementById("histogram").style.display = "none";
+ document.getElementById("map").style.display = "none";
+ document.getElementById("heat").style.display = "none";
+
+ if(outType === "histogram"){
+ reqHistogram(params);
+ document.getElementById("histogram").style.display = "block";
+ }
+ else if(outType === "map"){
+ reqMap(params);
+ document.getElementById("map").style.display = "block";
+ }
+ // else if(outType === "heat"){
+ // reqHeat(params);
+ // document.getElementById("heat").style.display = "block";
+ // }
+ // else{
+ // console.log("Heatmap/Cluster")
+ // }
+}
+
+
+
+// JQuery for Range Slider
+$( function() {
+ $( "#slider-range" ).slider({
+ range: true,
+ min: 1960,
+ max: 2016,
+ values: [ 1960, 2016 ],
+ slide: function( event, ui ) {
+ $( "#fromtoYear" ).html(ui.values[ 0 ] + " - " + ui.values[ 1 ] )
+ }
+ });
+ $( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
+} );
+
window.onload=init;
\ No newline at end of file
--
GitLab