diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css index 25a5744..5b536a7 100644 --- a/pdb-ui/src/main/resources/resources/css/design.css +++ b/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; +} diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js index a2b31de..c379f7c 100644 --- a/pdb-ui/src/main/resources/resources/js/ui.js +++ b/pdb-ui/src/main/resources/resources/js/ui.js @@ -246,38 +246,63 @@ 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: `
` }); @@ -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); }