draw better dashboard images

Scaling big plots to small thumbnails results in bad images that barely
show any details.
We solve this by calling gnuplot a second time to generate the
thumbnails. They don't have any labels and are rendered in the required
size, so that not scaling is necessary.
Thumbnails have to be requested explicitly, because it can be expensive
to compute them.

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

@@ -189,16 +189,18 @@ textarea {
 	float: left;
 	background: white;
 	box-shadow: 5px 5px 10px 0px #aaa;
+	position: relative;
 }
 
 .dashboard-item img {
 	max-width: 300px;
-	max-height: 180px;
+	max-height: 200px;
 	display:block; /* removes 3 pixels extra height around the image */
 }
 
-.dashboard-item fieldValue{
-
+.dashboard-item .fieldValue{
+	position: absolute;
+	bottom: 0;
 }
 
 #result-view-dashboard-image-viewer {

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

@@ -841,9 +841,9 @@ function plotCurrent()
 		var splitByField = splitBy['field'];
 		var splitByValue = splitBy['values'][splitBy['index']];
 		var query = createQuery(originalQuery, splitByField, splitByValue);
-		sendPlotRequest(query);
+		sendPlotRequest(query, false);
 	}else{
-		sendPlotRequest(data.searchBar.query);
+		sendPlotRequest(data.searchBar.query, false);
 	}
 }
 
@@ -869,7 +869,7 @@ function groupBy()
 	return result;
 }
 
-function createRequest(query){
+function createRequest(query, generateThumbnail){
 	var request = {};
 	request['query'] = query;
 	request['height'] = Math.floor($('#result').height());
@@ -883,12 +883,13 @@ function createRequest(query){
 	request['plotType'] = data.searchBar.plotType;
 	request['aggregate'] = data.searchBar.aggregate;
 	request['keyOutside'] = data.searchBar.keyOutside;
+	request['generateThumbnail'] = generateThumbnail;
 	
 	return request;
 }
 
-function sendPlotRequest(query){
-	const request = createRequest(query);
+function sendPlotRequest(query, generateThumbnail){
+	const request = createRequest(query, generateThumbnail);
 	
 	const success = function(response){
 		data.resultView.imageUrl = response.imageUrl;
@@ -970,7 +971,8 @@ function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
 	if (data.dashboard.toBeRendered.length > 0) {
 		var fieldValue = data.dashboard.toBeRendered.pop();
 		const query = createQuery(originalQuery, field, fieldValue);
-		const request = createRequest(query);
+		const generateThumbnail = true;
+		const request = createRequest(query, generateThumbnail);
 		request['height'] = imageHeight;
 		request['width'] = imageWidth;
 		request['thumbnailMaxWidth'] = 300;