group plots by a single field

pdb-ui/src/main/resources/resources/index.html

@@ -20,6 +20,8 @@
 				<input id="search-input" data-autocomplete="autocomplete"
 					data-autocomplete-empty-message="nothing found" />
 			</div>
+			<div id="search-group-by">
+			</div>
 			<button id="search-submit"><i class="fa fa-search"> Search</i></button>
 		</div>
 		<div id="result-view">

pdb-ui/src/main/resources/resources/js/search.js

@@ -3,6 +3,8 @@ $(document).ready(function(){
 
 	$('#search-submit').click(plot);
 	
+	initGroupBy();
+	
 	AutoComplete({
 		HttpMethod: "GET",
 		Delay: 300,
@@ -27,6 +29,24 @@ $(document).ready(function(){
 	});
 });
 
+function initGroupBy()
+{
+	var successCallback = function (response) {
+	
+		response.forEach(function(item, index){
+			$('#search-group-by').append('<input type="radio" id="groupBy-'+index+'" name="groupBy" value="'+item+'" /><label for="groupBy-'+index+'">'+item+'</label>');
+		});
+	
+	};
+	
+	var errorCallback = function (){
+		$('#result-view').text("FAILED: " + JSON.stringify(e));
+	};
+
+	getJson("fields", {}, successCallback, errorCallback)
+	
+}
+
 function showLoadingIcon()
 {
 	$('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>");
@@ -41,6 +61,7 @@ function plot(event){
 	request['query'] = $('#search-input').val();
 	request['height'] = $('#result-view').height()-10;
 	request['width'] = $('#result-view').width()-10;
+	request['groupBy'] = $('input[name=groupBy]:checked').val();
 	
 	var success = function(response){
 			
@@ -67,4 +88,15 @@ function postJson(url, requestData, successCallback, errorCallback) {
 		.fail(errorCallback);
 }
 
+function getJson(url, requestData, successCallback, errorCallback) {
+
+	$.ajax({
+			type: "GET",
+			url: url,
+			data: requestData,
+			contentType: 'application/json'
+		})
+		.done(successCallback)
+		.fail(errorCallback);
+}