sort tiles on the dashboard

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

@@ -71,9 +71,12 @@ textarea {
 		/ 1fr
 }
 
-#navigation {
+#navigation-bar {
 	grid-area: navigation;
-	background-color: #aaa;
+	background-color: #ccc;
+}
+
+#navigation {
 	display: flex;
 	justify-content: space-between;
 }

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

@@ -237,10 +237,51 @@ Vue.component('result-view-dashboard-item', {
 	<div class="dashboard-item">
 		<div class="error-message" v-if="dashboardItem.error">{{ dashboardItem.error }}</div>
 		<img v-bind:src="dashboardItem.thumbnailUrl" v-if="dashboardItem.thumbnailUrl" />
-		<div class="fieldValue">{{ dashboardItem.fieldValue }}</div>
+		<div class="fieldValue">{{ dashboardItem.fieldValue }} ({{ dashboardItem.stats.values }}) ({{ dashboardItem.stats.maxValue }})</div>
 	</div>`
 });
 
+Vue.component('navigation-bar-dashboard', {
+	props: ['dashboard'],
+	methods: {
+		sort: function() {
+			sortTiles();
+		}
+	},
+	computed: {
+		navigationVisible: function() {
+			return data.dashboard.tiles.length > 0;
+		}
+	},
+	template: `
+	<div id="navigation-bar-dashboard" v-if="navigationVisible">
+		<label for="dashboardSortBy">Sort by:</label>
+		<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort">
+			<option value="DEFAULT"></option>
+			<option value="MAX_VALUE_DESC">max value desc</option>
+			<option value="MAX_VALUE_ASC">max value asc</option>
+			<option value="VALUES_DESC">#values desc</option>
+			<option value="VALUES_ASC">#values asc</option>
+		</select>
+		
+		<!--
+		<label for="dashboardFilter">Filter by:</label>
+		<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter">
+			<option value="NONE">none</option>
+			<option value="HIGHER_THAN">higher</option>
+			<option value="LOWER_THAN">lower</option>
+			<option value="HIGHER_AVG_THAN">higher avg.</option>
+			<option value="LOWER_AVG_THAN">lower avg.</option>
+			<option value="HIGHER_PERCENTILE_THAN">higher percentile</option>
+			<option value="LOWER_PERCENTILE_THAN">lower percentile</option>
+			<option value="MORE_THAN">more</option>
+			<option value="LESS_THAN">less</option>
+		</select>
+		-->
+	</div>
+	`
+});
+
 Vue.component('navigation-bar', {
 	props: [],
 	methods: {
@@ -405,10 +446,13 @@ Vue.component('navigation-bar', {
 	computed: {
 		navigationDisabled: function() {
 			return !data.resultView.imageUrl;
+		},
+		navigationVisible: function() {
+			return data.dashboard.tiles.length == 0;
 		}
 	},
 	template: `
-	<div id="navigation">
+	<div id="navigation" v-if="navigationVisible">
 		<button id="nav_left" v-on:click="dateLeftShift" :disabled="navigationDisabled" title="Show Older Values"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button>
 		<button id="nav_left_half" v-on:click="dateHalfLeftShift" :disabled="navigationDisabled" title="Show Older Values"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
 		<div>
@@ -653,7 +697,7 @@ var rootView = new Vue({
   }
 });
 
-initInvaders('result-image');
+initInvaders('result');
 
 } // end window.on-load
 
@@ -692,7 +736,9 @@ var data = {
 		loadingGameActive: false
 	},
 	dashboard: {
-		tiles: []
+		tiles: [],
+		sortBy: "MAX_VALUE_DESC",
+		filter: "NONE"
 	}
 };
 
@@ -858,8 +904,10 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
 			data.dashboard.tiles.push({
 				fieldValue: fieldValue,
 				thumbnailUrl: response.thumbnailUrl,
-				imageUrl: response.imageUrl
+				imageUrl: response.imageUrl,
+				stats: response.stats
 			});
+			sortTiles();
 			createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth);
 		};
 		const error = function(e) {
@@ -886,6 +934,27 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
 	}
 }
 
+function sortTiles() {
+
+	switch (data.dashboard.sortBy) {
+		case "DEFAULT":
+			data.dashboard.tiles.sort(function(a, b){return a.fieldValue.localeCompare(b.fieldValue);});
+			break;
+		case "VALUES_ASC":
+			data.dashboard.tiles.sort(function(a, b){return a.stats.values - b.stats.values;});
+			break;
+		case "VALUES_DESC":
+			data.dashboard.tiles.sort(function(a, b){return b.stats.values - a.stats.values;});
+			break;
+		case "MAX_VALUE_ASC":
+			data.dashboard.tiles.sort(function(a, b){return a.stats.maxValue - b.stats.maxValue;});
+			break;
+		case "MAX_VALUE_DESC":
+			data.dashboard.tiles.sort(function(a, b){return b.stats.maxValue - a.stats.maxValue;});
+			break;
+	}
+}
+
 function postJson(url, requestData, successCallback, errorCallback) {
 
 	$.ajax({

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

@@ -18,7 +18,10 @@
 <body>
 	<div id="app">
 		<search-bar v-bind="{ 'searchBar': searchBar }"></search-bar>
-		<navigation-bar v-bind="{ 'searchBar': searchBar }"></navigation-bar>
+		<div id="navigation-bar">
+			<navigation-bar v-bind="{ 'searchBar': searchBar }"></navigation-bar>
+			<navigation-bar-dashboard v-bind="{ 'dashboard': dashboard }"></navigation-bar-dashboard>
+		</div>
 		<div id="result">
 			<result-view v-bind="{ 'searchBar': searchBar, 'resultView': resultView }"></result-view>
 			<result-view-dashboard v-bind="{ 'dashboard': dashboard }"></result-view-dashboard>