Skip to content
Snippets Groups Projects
Commit bfe61dbe authored by Ray Liu's avatar Ray Liu
Browse files

Merge branch 'web' of https://gitlab.cas.mcmaster.ca/schankuc/2XB3 into 

web

# Conflicts:
#	tomcat/webapps/Trawl/WEB-INF/web.xml
#	tomcat/webapps/Trawl/index.jsp
#	tomcat/webapps/Trawl/infoWindow.js
#	tomcat/webapps/Trawl/script.js
parents f6cfdc33 d1f7464b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 571 additions and 56 deletions
src/search/RecordCluster.java
+ 7
− 0
View file @ bfe61dbe
...@@ -8,14 +8,17 @@ import sandbox.Point; ...@@ -8,14 +8,17 @@ import sandbox.Point;
public class RecordCluster { public class RecordCluster {
private ArrayList<Record> records; private ArrayList<Record> records;
private Point centroid; private Point centroid;
private int individualCount;
public RecordCluster() { public RecordCluster() {
records = new ArrayList<Record>(); records = new ArrayList<Record>();
centroid = new Point(0,0); centroid = new Point(0,0);
individualCount = 0;
} }
public void addRecord(Record r) { public void addRecord(Record r) {
records.add(r); records.add(r);
individualCount++;
} }
public Iterable<Record> records(){ public Iterable<Record> records(){
...@@ -26,6 +29,10 @@ public class RecordCluster { ...@@ -26,6 +29,10 @@ public class RecordCluster {
return records.size(); return records.size();
} }
public int getCount() {
return records.size();
}
public Point centroid() { public Point centroid() {
double x = 0; double x = 0;
double y = 0; double y = 0;
......
tomcat/webapps/Trawl/WEB-INF/web.xml
+ 21
− 0
View file @ bfe61dbe
<<<<<<< HEAD
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" <web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
...@@ -15,4 +16,24 @@ ...@@ -15,4 +16,24 @@
<url-pattern>/doHist.do</url-pattern> <url-pattern>/doHist.do</url-pattern>
<url-pattern>/doMap.do</url-pattern> <url-pattern>/doMap.do</url-pattern>
</servlet-mapping> </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>
<url-pattern>/doCluster.do</url-pattern>
</servlet-mapping>
>>>>>>> d1f7464b4ffda020ccd6a1dc06a4f3b8386384ee
</web-app> </web-app>
\ No newline at end of file
tomcat/webapps/Trawl/cluster.jsp 0 → 100644
+ 49
− 0
View file @ bfe61dbe
<%@ page import="java.util.*, data.Record, model.TrawlExpert, search.BST, search.BasicSearchResult,data.BioTree,data.TaxonNode,search.RecordCluster,sandbox.Point" %>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.parser.JSONParser"%>
<%
// Sample result data containing an iterable of records
TrawlExpert te = (TrawlExpert)request.getServletContext().getAttribute("trawl");
JSONParser parser = new JSONParser();
JSONObject req = (JSONObject) parser.parse(request.getReader().readLine());
Integer taxonId = (int) (long) req.get("taxId");
Integer yearLo = (int) (long) req.get("yearF");
Integer yearHi = (int) (long) req.get("yearT");
double area = (double) req.get("area");
BasicSearchResult result = te.rangeSearch(taxonId, yearLo, yearHi);
Iterable<RecordCluster> clusters = result.cluster(area);
// Initialize JSON Object and Arrays
JSONObject js = new JSONObject();
JSONArray longitude = new JSONArray();
JSONArray latitude = new JSONArray();
JSONArray count = new JSONArray();
// Update value of each JSON Object/Array at the same index as the corresponding Record in Result input
for (RecordCluster rc: clusters){
Point centroid = rc.centroid();
longitude.add(centroid.getX());
latitude.add(centroid.getY());
JSONObject dateobj = new JSONObject();
count.add(rc.getCount());
}
// Insert JSON Array and Objects into main Object
js.put("latitude", latitude);
js.put("longitude", longitude);
js.put("n", result.n());
js.put("individualCount", count);
js.put("time", result.time());
out.print(js.toJSONString());
%>
\ No newline at end of file
tomcat/webapps/Trawl/index.jsp
+ 103
− 0
View file @ bfe61dbe
<<<<<<< HEAD
<%@ page import="java.util.*" %> <%@ page import="java.util.*" %>
<!-- <!--
Double Handle Slider Modified from: http://jqueryui.com/slider/#range Double Handle Slider Modified from: http://jqueryui.com/slider/#range
...@@ -98,3 +99,105 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range ...@@ -98,3 +99,105 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
</body> </body>
</html> </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=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>
>>>>>>> d1f7464b4ffda020ccd6a1dc06a4f3b8386384ee
tomcat/webapps/Trawl/infoGenerator.js
+ 11
− 14
View file @ bfe61dbe
...@@ -31,9 +31,6 @@ function findMonth(month){ ...@@ -31,9 +31,6 @@ function findMonth(month){
} }
/** /**
* Generates html text to fill info windows on a Google Maps API * Generates html text to fill info windows on a Google Maps API
* @param names String array of scientific fish names * @param names String array of scientific fish names
...@@ -46,7 +43,7 @@ function infoGenerator(names, dates, count){ ...@@ -46,7 +43,7 @@ function infoGenerator(names, dates, count){
var infoArray =[]; var infoArray =[];
for (int i=0; i < names.length; i++){ for (var i=0; i < names.length; i++){
// Initialize variables to each data point's information // Initialize variables to each data point's information
var year = dates[i][0]; var year = dates[i][0];
var month = findMonth(dates[i][1]); var month = findMonth(dates[i][1]);
...@@ -55,16 +52,16 @@ function infoGenerator(names, dates, count){ ...@@ -55,16 +52,16 @@ function infoGenerator(names, dates, count){
var count = count[i]; var count = count[i];
// Generate string of html // Generate string of html
var contentString = ‘<div id=“content”>‘+ var contentString = '<div id=“content”>'+
‘<div id=“siteNotice”>‘+ '<div id=“siteNotice”>'+
‘</div>‘+ '</div>'+
‘<h1 id=“firstHeading” class=“firstHeading”>’ + name + ‘</h1>‘+ '<h1 id=“firstHeading” class=“firstHeading”>' + name + '</h1>'+
‘<div id=“bodyContent”>‘+ '<div id=“bodyContent”>'+
‘<p><b>Name: </b>’ + name + ‘</p>‘+ '<p><b>Name: </b>' + name + '</p>'+
‘<p><b>Date: </b>’ + month + ' ' + day + ‘, ’ + year + ‘</p>‘+ '<p><b>Date: </b>' + month + ' ' + day + ', ' + year + '</p>'+
‘<p><b>Count: </b>’ + count + ‘</p>‘+ '<p><b>Count: </b>' + count + '</p>'+
‘</div>‘+ '</div>'+
‘</div>’; '</div>';
infoArray.push(contentString); infoArray.push(contentString);
} }
......
tomcat/webapps/Trawl/infoWindow.js
+ 41
− 14
View file @ bfe61dbe
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
// Displays markers on a map centred at the Laurentian Great Lakes // Displays markers on a map centred at the Laurentian Great Lakes
// When the user clicks the marker, an info window opens // When the user clicks the marker, an info window opens
<<<<<<< HEAD
function initInfo(lati, longi,info) { function initInfo(lati, longi,info) {
for(var i=0; i < lati.length; i++){ for(var i=0; i < lati.length; i++){
...@@ -13,19 +14,45 @@ function initInfo(lati, longi,info) { ...@@ -13,19 +14,45 @@ function initInfo(lati, longi,info) {
center: {lat: 45.0349575, lng: -88.6941305}; center: {lat: 45.0349575, lng: -88.6941305};
}); });
=======
function initInfo(lati, longi,name, date, count ) {
console.log("Trying to gen. info map");
// Generate map centred at Great Lakes
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5.5,
center: {lat: 45.0349575, lng: -88.6941305}
});
console.log("Gened info map");
>>>>>>> d1f7464b4ffda020ccd6a1dc06a4f3b8386384ee
// Set info window contents to input string // Set info window contents to input string
var contentString = info[i];
var infowindow = new google.maps.InfoWindow({ var infowindow = new google.maps.InfoWindow();
content: contentString var marker, i;
}); for (i = 0; i < lati.length; i++) {
marker = new google.maps.Marker({
// Plot points position: new google.maps.LatLng(lati[i], longi[i]),
var marker = new google.maps.Marker({ map: map
position: {lat: lati[i], lng: longi[i]} , });
map: map,
});
marker.addListener('click', function() { google.maps.event.addListener(marker, 'click', (function (marker, i) {
infowindow.open(map, marker); return function () {
}); infowindow.setContent('<div id=“content”>' +
} '<div id=“siteNotice”>' +
'</div>' +
'<h1 id=“firstHeading” class=“firstHeading”>' + name[i] + '</h1>' +
'<div id=“bodyContent”>' +
'<p><b>Name: </b>' + name[i] + '</p>' +
'<p><b>Date: </b>' + findMonth(date[i].month) + ' ' + date[i].day + ', ' + date[i].year + '</p>' +
'<p><b>Count: </b>' + count[i] + '</p>' +
'</div>' +
'</div>');
infowindow.open(map, marker);
}
})(marker, i));
console.log("Plotted" + i + " markers");
}
} }
\ No newline at end of file
tomcat/webapps/Trawl/map.js
+ 21
− 20
View file @ bfe61dbe
...@@ -9,16 +9,17 @@ var map, heatmap; ...@@ -9,16 +9,17 @@ var map, heatmap;
// Generate map // Generate map
function initMap(longi,lati) { function initMap(longi,lati) {
map = new google.maps.Map(document.getElementById('map'), { map = new google.maps.Map(document.getElementById('heat'), {
zoom: 13, zoom: 5.5,
center: {lat: 37.775, lng: -122.434}, center: {lat: 44.86, lng: -82.02}
mapTypeId: 'satellite'
}); });
heatmap = new google.maps.visualization.HeatmapLayer({ heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(longi,lati), data: getPoints(longi,lati),
map: map map: map
}); });
google.maps.event.trigger(map, 'resize');
console.log("fin heat")
} }
// Check if a heatmap already exists // Check if a heatmap already exists
...@@ -29,21 +30,21 @@ function toggleHeatmap() { ...@@ -29,21 +30,21 @@ function toggleHeatmap() {
// Initialize colour scheme for heatmap gradient // Initialize colour scheme for heatmap gradient
function changeGradient() { function changeGradient() {
var gradient = [ var gradient = [
‘rgba(0, 255, 255, 0)’, 'rgba(0, 255, 255, 0)',
‘rgba(0, 255, 255, 1)’, 'rgba(0, 255, 255, 1)',
‘rgba(0, 191, 255, 1)’, 'rgba(0, 191, 255, 1)',
‘rgba(0, 127, 255, 1)’, 'rgba(0, 127, 255, 1)',
‘rgba(0, 63, 255, 1)’, 'rgba(0, 63, 255, 1)',
‘rgba(0, 0, 255, 1)’, 'rgba(0, 0, 255, 1)',
‘rgba(0, 0, 223, 1)’, 'rgba(0, 0, 223, 1)',
‘rgba(0, 0, 191, 1)’, 'rgba(0, 0, 191, 1)',
‘rgba(0, 0, 159, 1)’, 'rgba(0, 0, 159, 1)',
‘rgba(0, 0, 127, 1)’, 'rgba(0, 0, 127, 1)',
‘rgba(0, 63, 91, 1)’, 'rgba(0, 63, 91, 1)',
‘rgba(0, 127, 63, 1)’, 'rgba(0, 127, 63, 1)',
‘rgba(0, 191, 10, 1)’, 'rgba(0, 191, 10, 1)',
‘rgba(0, 255, 0, 1)’ 'rgba(0, 255, 0, 1)'
] ];
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
} }
......
tomcat/webapps/Trawl/map.jsp
+ 10
− 6
View file @ bfe61dbe
...@@ -6,11 +6,14 @@ ...@@ -6,11 +6,14 @@
<% <%
// Sample result data containing an iterable of records // Sample result data containing an iterable of records
TrawlExpert te = (TrawlExpert)request.getServletContext().getAttribute("trawl"); TrawlExpert te = (TrawlExpert)request.getServletContext().getAttribute("trawl");
BasicSearchResult result = te.rangeSearch(2, 1960, 2016);
JSONParser parser = new JSONParser(); JSONParser parser = new JSONParser();
JSONObject req = (JSONObject) parser.parse(request.getReader().readLine());
Integer taxonId = (int) (long) req.get("taxId");
Integer yearLo = (int) (long) req.get("yearF");
Integer yearHi = (int) (long) req.get("yearT");
BasicSearchResult result = te.rangeSearch(taxonId, yearLo, yearHi);
// Initialize JSON Object and Arrays // Initialize JSON Object and Arrays
JSONObject js = new JSONObject(); JSONObject js = new JSONObject();
...@@ -30,7 +33,7 @@ ...@@ -30,7 +33,7 @@
dateobj.put("year",r.getDate().getYear()); dateobj.put("year",r.getDate().getYear());
dateobj.put("month",r.getDate().getMonth()); dateobj.put("month",r.getDate().getMonth());
dateobj.put("day",r.getDate().getDay()); dateobj.put("day",r.getDate().getDay());
date.add(r.getDate()); date.add(dateobj);
count.add(r.getCount()); count.add(r.getCount());
} }
...@@ -39,7 +42,8 @@ ...@@ -39,7 +42,8 @@
js.put("longitude", longitude); js.put("longitude", longitude);
js.put("name", name); js.put("name", name);
js.put("date", date); js.put("date", date);
js.put("individual count", count); js.put("n", result.n());
js.put("individualCount", count);
js.put("time", result.time()); js.put("time", result.time());
......
tomcat/webapps/Trawl/script.js
+ 285
− 0
View file @ bfe61dbe
<<<<<<< HEAD
// Initialization // Initialization
function init() { function init() {
callUpdateSci({id:"pickAnimalia", value:2}); // Propagate Dropdowns on Startup callUpdateSci({id:"pickAnimalia", value:2}); // Propagate Dropdowns on Startup
...@@ -280,4 +281,288 @@ $( function() { ...@@ -280,4 +281,288 @@ $( function() {
$( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "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);
console.log(nodeList);
initInfo(nodeList["latitude"], nodeList["longitude"], nodeList["name"], nodeList["date"], nodeList["individual count"]);
}
else {
console.log("Server Response: Error"); //RME
}
};
xhr.send(params); //send request to server
}
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"]);
}
else {
console.log("Server Response: Error"); //RME
}
};
xhr.send(params); //send request to server
}
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("outputBox").innerHTML = "";
document.getElementById("outputDetails").innerHTML = "";
if(outType === "histogram"){
document.getElementById("outputBox").innerHTML='<div id="histogram"></div>';
reqHistogram(params);
// document.getElementById("histogram").style.display = "block";
}
else if(outType === "map"){
document.getElementById("outputBox").innerHTML='<div id="map"></div>';
console.log("generated info div");
reqMap(params);
// document.getElementById("map").style.display = "block";
}
else if(outType === "heat"){
document.getElementById("outputBox").innerHTML='<div id="heat"></div>';
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 ))
} );
>>>>>>> d1f7464b4ffda020ccd6a1dc06a4f3b8386384ee
window.onload=init; window.onload=init;
\ No newline at end of file
tomcat/webapps/Trawl/style.css
+ 23
− 2
View file @ bfe61dbe
...@@ -92,8 +92,9 @@ a:hover{ ...@@ -92,8 +92,9 @@ a:hover{
#outputWrapper{ #outputWrapper{
/*border: 1px solid grey;*/ /*border: 1px solid grey;*/
height: 100%; margin: 2% auto;
margin-top: 3%; height: 70vh;
width: 88vw;
} }
#outputDetails{ #outputDetails{
...@@ -102,9 +103,29 @@ a:hover{ ...@@ -102,9 +103,29 @@ a:hover{
#outputBox{ #outputBox{
/*border: 1px solid darkred;*/ /*border: 1px solid darkred;*/
height: inherit;
width: inherit;
min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/ min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/
} }
#heat{
height: inherit;
width: inherit;
overflow: hidden !important;
position: absolute !important;
}
#map{
height: inherit;
width: inherit;
overflow: hidden !important;
position: absolute !important;
}
/*#map>*{*/
/*overflow: visible !important;*/
/*}*/
#histogram{ #histogram{
/*border: 1px solid darkred;*/ /*border: 1px solid darkred;*/
min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/ min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment