group plots by field

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

@@ -20,6 +20,7 @@
 				<input id="search-input" data-autocomplete="autocomplete"
 					data-autocomplete-empty-message="nothing found" />
 			</div>
+			<select id="search-group-by"></select>
 			<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);
 	
+	renderFields();
+	
 	AutoComplete({
 		HttpMethod: "GET",
 		Delay: 300,
@@ -27,6 +29,34 @@ $(document).ready(function(){
 	});
 });
 
+function renderFields()
+{
+	var request = {};
+	request['query'] = $('#search-input').val();
+	
+	var success = function(response){
+		
+		$('#search-group-by').empty();
+		
+		var option = new Option("", "");
+		$('#search-group-by').append($(option));
+		
+		response.forEach(
+			(item, index) => {
+				var option = new Option(item, item);
+				$('#search-group-by').append($(option));
+			}
+		);
+		
+	};
+	var error = function(e) {
+		$('#result-view').text("FAILED: " + JSON.stringify(e));
+	};
+	
+
+	getJson("fields", request, success, error);
+}
+
 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 +71,7 @@ function plot(event){
 	request['query'] = $('#search-input').val();
 	request['height'] = $('#result-view').height()-10;
 	request['width'] = $('#result-view').width()-10;
+	request['groupBy'] = $('#search-group-by').val();
 	
 	var success = function(response){
 			
@@ -67,3 +98,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);
+}
+