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/java/org/lucares/pdbui/PdbController.java

@@ -130,7 +130,7 @@ public class PdbController implements HardcodedValues, PropertyKeys {
 
 				final String thumbnailUrl = result.getThumbnailPath() != null
 						? WEB_IMAGE_OUTPUT_PATH + "/" + result.getThumbnailName()
-						: imageUrl;
+						: "img/no-thumbnail.png";
 
 				final PlotResponseStats stats = PlotResponseStats.fromDataSeries(result.getDataSeries());
 				final PlotResponse plotResponse = new PlotResponse(stats, imageUrl, thumbnailUrl);
@@ -184,6 +184,7 @@ public class PdbController implements HardcodedValues, PropertyKeys {
 			plotSettings.setPlotType(plotType);
 			plotSettings.setAggregate(PlotSettingsTransformer.toAggregateInternal(aggregate));
 			plotSettings.setKeyOutside(keyOutside);
+			plotSettings.setGenerateThumbnail(false);
 
 			if (plotterLock.tryLock()) {
 				try {

pdb-ui/src/main/java/org/lucares/pdbui/PlotSettingsTransformer.java

@@ -26,6 +26,7 @@ class PlotSettingsTransformer {
 		result.setKeyOutside(request.isKeyOutside());
 		result.setThumbnailMaxWidth(request.getThumbnailMaxWidth());
 		result.setThumbnailMaxHeight(request.getThumbnailMaxHeight());
+		result.setGenerateThumbnail(request.isGenerateThumbnail());
 
 		return result;
 	}

pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotRequest.java

@@ -35,6 +35,8 @@ public class PlotRequest {
 
 	private boolean keyOutside;
 
+	private boolean generateThumbnail;
+
 	public String getQuery() {
 		return query;
 	}
@@ -154,4 +156,13 @@ public class PlotRequest {
 	public boolean isKeyOutside() {
 		return keyOutside;
 	}
+
+	public boolean isGenerateThumbnail() {
+		return generateThumbnail;
+	}
+
+	public void setGenerateThumbnail(final boolean generateThumbnail) {
+		this.generateThumbnail = generateThumbnail;
+	}
+
 }

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;