split by field

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

@@ -58,6 +58,9 @@ body{
 .autocomplete .active {
 	background-color: #AAA;
 }
+.autocomplete.open{
+	z-index:2;
+}
 
 /* scrollbars are nice, but with them an empty autocomplete box is shown
  
@@ -93,19 +96,42 @@ body{
 	margin-right:3px;
 }
 
-#result-view {
+#result {
 	grid-area: result;
 	background: #eee;
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
+	position:relative;
 }
 
-#result-view i {
-    background: white;
-    display:inline;
-    font-style:normal;
-    line-height: 1.2em;
+#result-image {
+	height: 100%;
+}
+
+#prev_image, #next_image {
+	position: absolute;
+	height: 100%;
+	font-size: 4em;
+	opacity: 0.1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+#prev_image:hover, #next_image:hover {
+	background: whitesmoke;
+	opacity: 0.7;
+}
+
+#prev_image:hover i, #next_image:hover i {
+	opacity: 1.0;
+}
+
+#prev_image {
+	left: 0;	
+}
+#next_image{
+	right: 0;
 }
 
 

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

@@ -52,6 +52,7 @@ function startInvaders() {
 		}
 		$('#'+invaders_parentDivId).show();
 	
+		clearIntervals();
 		invaders_game_move=window.setInterval("moveRandomly('"+invaders_parentDivId+"')",100);
 		invaders_game_new=window.setInterval("addInvader()", 1000);
 	}

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

@@ -1,4 +1,11 @@
 
+var splitBy = {
+	field: '',
+	query: '',
+	values: [],
+	index: 0
+};
+
 $(document).ready(function(){
 
 	$('#search-submit').click(plot);
@@ -7,11 +14,14 @@ $(document).ready(function(){
 	updateSearchLimitValue();
 	
 	$('#search-limit-by').change(updateSearchLimitValue);
+	disableSplitBy();
 	
 	$('#nav_left').click(dateLeftShift);
 	$('#nav_left_half').click(dateHalfLeftShift);
 	$('#nav_right_half').click(dateHalfRightShift);
 	$('#nav_right').click(dateRightShift);
+	$('#prev_image').click(prev_image);
+	$('#next_image').click(next_image);
 	
 	$('#zoom_in').click(zoomIn);
 	$('#zoom_out').click(zoomOut);
@@ -42,7 +52,7 @@ $(document).ready(function(){
 		}
 	});
 	
-	initInvaders('result-view');
+	initInvaders('result-image');
 	//startInvaders();
 });
 
@@ -50,36 +60,36 @@ function zoomIn()
 {
 	shiftDate(0.25);
 	zoom(0.5);
-	plot();
+	plotCurrent();
 }
 
 function zoomOut() 
 {
 	shiftDate(-0.5);
 	zoom(2);
-	plot();
+	plotCurrent();
 }
 
 function dateLeftShift()
 {
 	shiftDate(-1);
-	plot();
+	plotCurrent();
 }
 function dateHalfLeftShift()
 {
 	shiftDate(-0.5);
-	plot();
+	plotCurrent();
 }
 
 function dateHalfRightShift()
 {
 	shiftDate(0.5);
-	plot();
+	plotCurrent();
 }
 function dateRightShift()
 {
 	shiftDate(1);
-	plot();
+	plotCurrent();
 }
 
 function zoom(factor)
@@ -207,6 +217,24 @@ function shiftByInterval(date, directionalFactor)
 	return date;
 }
 
+function prev_image()
+{
+	if (splitBy['values'].length > 0)
+	{
+		splitBy['index'] = (splitBy['index']+ splitBy['values'].length-1) % splitBy['values'].length;
+		plotCurrent();
+	}
+}
+
+function next_image()
+{
+	if (splitBy['values'].length > 0)
+	{
+		splitBy['index'] = (splitBy['index']+1) % splitBy['values'].length;
+		plotCurrent();
+	}
+}
+
 function updateSearchLimitValue () {
      var optionSelected = $('#search-limit-by').find("option:selected");
      var valueSelected  = optionSelected.val();
@@ -216,7 +244,25 @@ function updateSearchLimitValue () {
      }else{
      	$('#search-limit-value').show();
      }
- }
+}
+
+function enableSplitBy(fieldValues) {
+	splitBy['field'] = $('#split-by').val();
+	splitBy['values'] = fieldValues;
+	splitBy['index'] = 0;
+	splitBy['query'] = $('#search-input').val();
+	$('#prev_image').show();
+	$('#next_image').show();
+}
+
+function disableSplitBy() {
+	splitBy['field'] = '';
+	splitBy['values'] = [];
+	splitBy['index'] = 0;
+	splitBy['query'] = '';
+	$('#prev_image').hide();
+	$('#next_image').hide();
+}
 
 function renderGroupBy()
 {
@@ -227,6 +273,7 @@ function renderGroupBy()
 		initSearchGroupBy('#search-group-by-1', response);
 		initSearchGroupBy('#search-group-by-2', response);
 		initSearchGroupBy('#search-group-by-3', response);
+		initFieldsDropDown('#split-by', response);
 	};
 	var error = function(e) {
 		$('#result-view').text("FAILED: " + JSON.parse(e.responseText).message);
@@ -250,23 +297,85 @@ function initSearchGroupBy(selector, response)
 	);
 }
 
+
+function initFieldsDropDown(selector, response)
+{
+	$(selector).empty();
+	var option = new Option("", "");
+	$(selector).append($(option));
+	
+	response.forEach(
+		(item, index) => {
+			var option = new Option(item, item);
+			$(selector).append($(option));
+		}
+	);
+}
+
 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>");
-	$('#result-view').html("");
+	$('#result-image').html("");
 	startInvaders();
 }
 
+/*
+ * Called by the 'plot' button
+ */
 function plot(event){
 	if(event){
 		event.preventDefault(); // prevent submit of form which would reload the page
 	}
-
 	showLoadingIcon();
+	
+	var splitByField = $('#split-by').val();
+	if (splitByField){
+		splitQueries(function (fieldValues) {
+			splitBy['values'] = fieldValues;
+			enableSplitBy(fieldValues);
+			plotCurrent();
+		});
+		
+	}else{
+		splitBy['field'] = '';
+		splitBy['values'] = [];
+		splitBy['index'] = 0;
+		splitBy['query'] = '';
+		plotCurrent();
+	}
+}
+
+
+function plotCurrent()
+{
+	showLoadingIcon();
+	
+	if (splitBy['field']) {
+		var query = createQuery();
+		sendPlotRequest(query);
+	}else{		
+		var query = $('#search-input').val();
+		sendPlotRequest(query);
+	}
+}
+
+function createQuery()
+{
+	var query = splitBy['query'];
+	if (query.length > 0) {
+		query = "("+query+") and "+splitBy['field']+ " = " +splitBy['values'][splitBy['index']];
+	} else {
+		query = splitBy['field']+ " = " +splitBy['values'][splitBy['index']];
+	}
+	return query;
+}
+
+function sendPlotRequest(query){
+
 	var request = {};
-	request['query'] = $('#search-input').val();
-	request['height'] = $('#result-view').height();
-	request['width'] = $('#result-view').width();
+	request['query'] = query;
+	request['height'] = $('#result-image').height();
+	request['width'] = $('#result-image').width();
 	request['groupBy'] = groupBy();
 	request['limitBy'] = $('#search-limit-by').val();
 	request['limit'] = parseInt($('#search-limit-value').val());
@@ -278,14 +387,14 @@ function plot(event){
 	
 	
 	var success = function(response){
-		$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
+		$('#result-image').html('<img src=\"'+response.imageUrls+'" />');
 	};
 	var error = function(e) {
 		if (e.status == 404){
-			$('#result-view').text("No data points found.");
+			$('#result-image').text("No data points found for query: " + query);
 		}
 		else{
-			$('#result-view').text("FAILED: " + JSON.parse(e.responseText).message);
+			$('#result-image').text("FAILED: " + JSON.parse(e.responseText).message);
 		}
 	};
 	
@@ -293,6 +402,20 @@ function plot(event){
 	
 }
 
+
+function splitQueries(successCallback)
+{
+	var request = {};
+	request['query'] = $('#search-input').val();
+	
+	var error = function(e) {
+		$('#result_image').text("FAILED: " + JSON.parse(e.responseText).message);
+	};
+	
+	var url = "/fields/"+encodeURIComponent($('#split-by').val())+"/values";
+	getJson(url, request, successCallback, error);
+}
+
 function groupBy()
 {
 	var result = [];

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

@@ -25,13 +25,17 @@
 		<form>
 			<div id="search-settings-bar">
 				<div class="group">
-					<label for="search-group-by-1">Group By:</label> 
+					<label for="search-group-by-1">Group:</label> 
 					<select id="search-group-by-1"></select>
 					<select id="search-group-by-2"></select>
 					<select id="search-group-by-3"></select>
 				</div>
+				
+				<label for="split-by">Split:</label> 
+				<select id="split-by"></select>
+		
 				<div class="group">
-					<label for="search-limit-by">Limit By:</label>
+					<label for="search-limit-by">Limit:</label>
 					<select id="search-limit-by">
 						<option value="NO_LIMIT" selected="selected">no limit</option>
 						<option value="MOST_VALUES">most values</option>
@@ -97,7 +101,10 @@
 		<button id="nav_right_half"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
 		<button id="nav_right"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
 	</div>
-	<div id="result-view">
+	<div id="result">
+		<div id="prev_image"><i class="fa fa-angle-double-left" aria-hidden="true"></i></div>
+		<div id="next_image"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div>
+		<div id="result-image"></div>
 	</div>
 </body>
 </html>