limit the number of plots

pdb-ui/src/main/resources/resources/css/icons.css

@@ -33,6 +33,10 @@
   content: "\f1c5"
 }
 
+.fa-area-chart:before {
+  content: "\f1fe"
+}
+
 .fa-icons:before {
   content: "\f002";
 }

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

@@ -21,7 +21,15 @@
 					data-autocomplete-empty-message="nothing found" />
 			</div>
 			<label for="search-group-by">Group By:</label> <select id="search-group-by"></select>
-			<button id="search-submit"><i class="fa fa-file-image-o"> Plot</i></button>
+			
+			<label for="search-limit-by">Limit By:</label>
+			<select id="search-limit-by">
+				<option value="NO_LIMIT" selected="selected">no limit</option>
+				<option value="MOST_VALUES">most values</option>
+				<option value="FEWEST_VALUES">fewest values</option>
+			</select>
+			<input type="number" id="search-limit-value" name="search-limit-value" min="1" max="1000000" value="10" style="display: none;"/>
+			<button id="search-submit"><i class="fa fa-area-chart"> Plot</i></button>
 		</div>
 		<div id="result-view">
 		</div>

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

@@ -5,6 +5,17 @@ $(document).ready(function(){
 	
 	renderFields();
 	
+	$('#search-limit-by').change(function () {
+	     var optionSelected = $(this).find("option:selected");
+	     var valueSelected  = optionSelected.val();
+	     console.log(valueSelected);
+	     if (valueSelected == "NO_LIMIT"){
+	     	$('#search-limit-value').hide();
+	     }else{
+	     	$('#search-limit-value').show();
+	     }
+	 });
+	
 	AutoComplete({
 		HttpMethod: "GET",
 		Delay: 300,
@@ -69,9 +80,12 @@ function plot(event){
 	showLoadingIcon();
 	var request = {};
 	request['query'] = $('#search-input').val();
-	request['height'] = $('#result-view').height()-10;
-	request['width'] = $('#result-view').width()-10;
+	request['height'] = $('#result-view').height()-15;
+	request['width'] = $('#result-view').width()-15;
 	request['groupBy'] = $('#search-group-by').val();
+	request['limitBy'] = $('#search-limit-by').val();
+	request['limit'] = parseInt($('#search-limit-value').val());
+	
 	
 	var success = function(response){