render progress bar and add button to abort the dashboard creation

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

@@ -201,6 +201,21 @@ textarea {
 
 }
 
+#navigation-bar-dashboard div {
+	float: left;
+}
+
+#dashboardControls {
+	margin-left: 1em;
+}
+
+#dashboardControls progress {
+  text-align: center;
+}
+#dashboardControls progress:after {
+  content: attr(percentage)'%';
+}
+
 .center
 {
     display: flex;
@@ -215,3 +230,7 @@ input:required:invalid {
 	background-repeat: no-repeat;
 	box-shadow: none;
 }
+
+.icon-abort:hover {
+	color: #ff6b6b;
+}

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

@@ -246,15 +246,29 @@ Vue.component('navigation-bar-dashboard', {
 	methods: {
 		sort: function() {
 			sortTiles();
+		},
+		abort: function() {
+			data.dashboard.toBeRendered = [];
 		}
 	},
 	computed: {
 		navigationVisible: function() {
 			return data.dashboard.tiles.length > 0;
+		},
+		showProgressBar: function(){
+			return data.dashboard.toBeRendered.length > 0;
+		},
+		percentage: function() {
+			if (data.dashboard.progress.max > 100){
+				return Math.round(10000*data.dashboard.progress.value / data.dashboard.progress.max)/100.0;
+			}else{
+				return Math.round(100*data.dashboard.progress.value / data.dashboard.progress.max);
+			}
 		}
 	},
 	template: `
 	<div id="navigation-bar-dashboard" v-if="navigationVisible">
+		<div>
 			<label for="dashboardSortBy">Sort by:</label>
 			<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort">
 				<option value="DEFAULT"></option>
@@ -263,8 +277,9 @@ Vue.component('navigation-bar-dashboard', {
 				<option value="VALUES_DESC">#values desc</option>
 				<option value="VALUES_ASC">#values asc</option>
 			</select>
-		
+		</div>
 		<!--
+		<div>
 			<label for="dashboardFilter">Filter by:</label>
 			<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter">
 				<option value="NONE">none</option>
@@ -277,7 +292,17 @@ Vue.component('navigation-bar-dashboard', {
 				<option value="MORE_THAN">more</option>
 				<option value="LESS_THAN">less</option>
 			</select>
+		</div>
 		-->
+		
+		<div id="dashboardControls" v-if="showProgressBar">
+			<progress 
+				v-bind:max="dashboard.progress.max" 
+				v-bind:value="dashboard.progress.value"
+				v-bind:percentage="percentage"
+			></progress>
+			<i class="fa fa-times-circle icon-abort" title="abort" @click="abort"></i>
+		</div>
 	</div>
 	`
 });
@@ -737,8 +762,13 @@ var data = {
 	},
 	dashboard: {
 		tiles: [],
+		toBeRendered: [],
 		sortBy: "MAX_VALUE_DESC",
-		filter: "NONE"
+		filter: "NONE",
+		progress: {
+			max: 0,
+			value: 0
+		}
 	}
 };
 
@@ -882,17 +912,23 @@ function createDashboard(vm){
 	vm.splitQueries(function (fieldValues) {
 		var splitByField = data.searchBar.splitByKeys.selected;
 		
-		createDashboardItem(fieldValues, originalQuery, splitByField, imageHeight, imageWidth);
+		data.dashboard.toBeRendered = fieldValues;
+		
+		// reset progress bar
+		data.dashboard.progress.max = fieldValues.length;
+		data.dashboard.progress.value = 0;
+		
+		createDashboardItem(originalQuery, splitByField, imageHeight, imageWidth);
 	});
 }
 
 
 
 
-function createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth)
+function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
 {
-	if (fieldValues.length > 0) {
-		var fieldValue = fieldValues.pop();
+	if (data.dashboard.toBeRendered.length > 0) {
+		var fieldValue = data.dashboard.toBeRendered.pop();
 		const query = createQuery(originalQuery, field, fieldValue);
 		const request = createRequest(query);
 		request['height'] = imageHeight;
@@ -908,7 +944,8 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
 				stats: response.stats
 			});
 			sortTiles();
-			createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth);
+			data.dashboard.progress.value++;
+			createDashboardItem(originalQuery, field, imageHeight, imageWidth);
 		};
 		const error = function(e) {
 			var errorMessage = '';
@@ -928,7 +965,8 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
 					error: errorMessage
 				});
 			}
-			createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth);
+			data.dashboard.progress.value++;
+			createDashboardItem(originalQuery, field, imageHeight, imageWidth);
 		};
 		postJson("plots", request, success, error);
 	}