From df70788b3cffd67c851ebc3923b5d75e8469c9d3 Mon Sep 17 00:00:00 2001
From: Winnie <liang15@mcmaster.ca>
Date: Tue, 3 Apr 2018 16:50:02 -0400
Subject: [PATCH] Add support for cluster
---
tomcat/webapps/Trawl/cluster.jsp | 4 +---
tomcat/webapps/Trawl/index.jsp | 8 +++++--
tomcat/webapps/Trawl/infoWindow.js | 1 -
tomcat/webapps/Trawl/script.js | 37 +++++++++++++++++++++---------
4 files changed, 33 insertions(+), 17 deletions(-)
diff --git a/tomcat/webapps/Trawl/cluster.jsp b/tomcat/webapps/Trawl/cluster.jsp
index 13c26d6..4685b54 100644
--- a/tomcat/webapps/Trawl/cluster.jsp
+++ b/tomcat/webapps/Trawl/cluster.jsp
@@ -24,7 +24,6 @@
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();
@@ -41,8 +40,7 @@
js.put("n", result.n());
js.put("individualCount", count);
js.put("time", result.time());
-
-
+
out.print(js.toJSONString());
%>
diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index 5ce7403..b9e9d8d 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/tomcat/webapps/Trawl/index.jsp
@@ -68,9 +68,12 @@
<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
+ Cluster Size:
+ <input type="number" id="pickSize" value="clusterSize" > Map
+ <input type="radio" name="pickOutput" value="cluster" > Map
+ <input type="radio" name="pickOutput" value="map"> Map
<input type="radio" name="pickOutput" value="heat"> Heatmap
- <input type="radio" name="pickOutput" value="histogram"> Histogram
+ <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>
@@ -86,6 +89,7 @@
<%--<div id="histogram"></div>--%>
<%--<div id="map"></div>--%>
<%--<div id="heat"></div>--%>
+ <%--<div id="cluster"></div>--%>
<%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
</section>
</section>
diff --git a/tomcat/webapps/Trawl/infoWindow.js b/tomcat/webapps/Trawl/infoWindow.js
index 279f95a..91946b3 100644
--- a/tomcat/webapps/Trawl/infoWindow.js
+++ b/tomcat/webapps/Trawl/infoWindow.js
@@ -30,7 +30,6 @@ function setMarkers(map, lati, longi,name, date, individualCount) {
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
- console.log("Clicked!!!!");
if (openWindow)
openWindow.close();
infowindow.setContent(content);
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index 7361e42..89b18e8 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/tomcat/webapps/Trawl/script.js
@@ -224,9 +224,28 @@ xhr.onreadystatechange = function() {//Call a function when the state changes (i
xhr.send(params); //send request to server
}
+function reqCluster(params){
+ var path = 'doCluster.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);
+ initCluster(nodeList["latitude"], nodeList["longitude"], nodeList["area"]);
+ }
+ 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;
+ var outType, taxGroup, yearFrom, yearTo, clusterSize;
// Get output selection: Map/Histogram
for(var i = 0; i < pickOutputType.length; i++){
if(pickOutputType[i].checked){
@@ -237,8 +256,9 @@ function callOutput(){
taxGroup = getTaxGroup();
yearFrom = $( "#slider-range" ).slider( "values", 0 );
yearTo = $( "#slider-range" ).slider( "values", 1 );
+ clusterSize = document.getElementById("pickSize");
- var params= JSON.stringify({taxId: Number(taxGroup), yearF: Number(yearFrom), yearT: Number(yearTo)});
+ var params= JSON.stringify({taxId: Number(taxGroup), yearF: Number(yearFrom), yearT: Number(yearTo), area: Number(clusterSize)});
//Switch Output Display
document.getElementById("outputBox").innerHTML = "";
@@ -247,26 +267,21 @@ function callOutput(){
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")
- // }
+ else if(outType === "cluster"){
+ document.getElementById("outputBox").innerHTML='<div id="cluster"></div>';
+ reqCluster(params);
+ }
}
-
-
// JQuery for Range Slider
$( function() {
$( "#slider-range" ).slider({
--
GitLab