diff --git a/tomcat/webapps/Trawl/WEB-INF/web.xml b/tomcat/webapps/Trawl/WEB-INF/web.xml
index dc7d6ca231cc2439744237d61062a4a5984953cf..3acffb542073edc39eb885ccb8544aeb404e3c60 100644
--- a/tomcat/webapps/Trawl/WEB-INF/web.xml
+++ b/tomcat/webapps/Trawl/WEB-INF/web.xml
@@ -1,3 +1,22 @@
+<<<<<<< HEAD
+<?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"
@@ -16,4 +35,5 @@
<url-pattern>/doMap.do</url-pattern>
<url-pattern>/doCluster.do</url-pattern>
</servlet-mapping>
+>>>>>>> d1f7464b4ffda020ccd6a1dc06a4f3b8386384ee
</web-app>
\ No newline at end of file
diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index 21947c78bb671a860cc496d3776010d8c935184a..5f099c44b2d5d4a003a32ca46e9b5d79ef4e3315 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/tomcat/webapps/Trawl/index.jsp
@@ -1,100 +1,102 @@
-<%@ 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=AIzaSyBmfzgAfA1sXItGVdGiC5txAieu8VYXcZM&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" checked> Map
- <input type="radio" name="pickOutput" value="heat"> Heatmap
- <input type="radio" name="pickOutput" value="histogram"> 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 id="histogram"></div>--%>
- <%--<div id="map"></div>--%>
- <%--<div 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 04d0a701c09ef4388f95311b6fb5f27da044d384..69cb16c750862f436614f2808c6541764b5a5cbc 100644
--- a/tomcat/webapps/Trawl/infoWindow.js
+++ b/tomcat/webapps/Trawl/infoWindow.js
@@ -5,7 +5,14 @@
// When the user clicks the marker, an info window opens
var openWindow;
+<<<<<<< HEAD
function initInfo(lati, longi,name, date, individualCount) {
+=======
+
+
+function initInfo(lati, longi,name, date, count ) {
+ console.log("Trying to gen. info map");
+>>>>>>> origin/web
// Generate map centred at Great Lakes
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5.5,
@@ -15,6 +22,7 @@ function initInfo(lati, longi,name, date, individualCount) {
setMarkers(map, lati, longi,name, date, individualCount);
}
+
// Set info window contents to input string
function setMarkers(map, lati, longi,name, date, individualCount) {
for (var i = 0; i < lati.length; i++)
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index 02d5ed381d89e92d26c2adccc76589a7e6cc1701..35aa1c52040c0073b194f77d0564b39e74bde88a 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/tomcat/webapps/Trawl/script.js
@@ -1,3 +1,287 @@
+
+// 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
@@ -280,4 +564,3 @@ $( function() {
$( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
} );
-window.onload=init;
\ No newline at end of file