From 51ba287acedbcaf3f0195a95ad2955a153339b36 Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Fri, 29 Nov 2019 09:57:15 +0100 Subject: [PATCH] progress bar and abort for gallery Generating all images for a gallery view can take long. It might not be obvious when the computation is done, because there is no progress indicator. Fixed by adding a progress bar. You might want to abort the computation. E.g. because you already found what you were looking for or you want to change the parameters. This can now be done by clicking 'Abort'. Note, it does not abort the current computation. --- pdb-js/src/app/app.module.ts | 4 +++ .../gallery-view/gallery-view.component.html | 11 ++++++++ .../gallery-view/gallery-view.component.scss | 4 +++ .../gallery-view/gallery-view.component.ts | 26 ++++++++++++++++--- pdb-js/src/app/plot.service.ts | 2 +- pdb-js/src/styles.scss | 3 +++ 6 files changed, 46 insertions(+), 4 deletions(-) diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index 934f729..7150ae7 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -16,6 +16,8 @@ import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatSelectModule} from '@angular/material/select'; import {MatFormFieldModule, MatInputModule} from '@angular/material'; +import {MatProgressBarModule} from '@angular/material/progress-bar'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatTooltipModule} from '@angular/material/tooltip'; import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component'; @@ -51,6 +53,8 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component'; MatCheckboxModule, MatFormFieldModule, MatInputModule, + MatProgressBarModule, + MatProgressSpinnerModule, MatSelectModule, MatSnackBarModule, MatTooltipModule, diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.html b/pdb-js/src/app/gallery-view/gallery-view.component.html index f15a759..a6f191a 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.html +++ b/pdb-js/src/app/gallery-view/gallery-view.component.html @@ -20,6 +20,17 @@ +
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.scss b/pdb-js/src/app/gallery-view/gallery-view.component.scss index d9c133d..55134af 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.scss +++ b/pdb-js/src/app/gallery-view/gallery-view.component.scss @@ -18,3 +18,7 @@ padding: 10px; } +#gallery-progress mat-progress-bar { + width: 20em; + display: inline-block; +} diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts index 3f09885..9c4a80e 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.ts +++ b/pdb-js/src/app/gallery-view/gallery-view.component.ts @@ -95,10 +95,8 @@ export class GalleryFilterView { }) export class GalleryViewComponent implements OnInit { - galleryItems: Array = new Array(); - show = false; splitByValuesQueue = new Array(); @@ -107,6 +105,12 @@ export class GalleryViewComponent implements OnInit { sortOrder = 'ASC'; + progress = 0; + + totalNumberImages = 0; + + sequenceId = 0; + @ViewChild(GalleryFilterView, {static: false}) filter : GalleryFilterView; @@ -136,6 +140,12 @@ export class GalleryViewComponent implements OnInit { ngOnInit() { } + abort(){ + this.totalNumberImages = 0; + this.splitByValuesQueue = new Array(); + this.sequenceId++; + } + filteredSortedGalleryItems(): Array { return this.galleryItems.filter(item => item.show); } @@ -224,6 +234,8 @@ export class GalleryViewComponent implements OnInit { this.plotService.splitQuery(request.query, splitByField).subscribe(function(valuesForSplitBy){ console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy)); that.splitByValuesQueue = valuesForSplitBy; + that.progress = 0; + that.totalNumberImages = that.splitByValuesQueue.length; that.renderGalleryRecursively(request, splitByField); }, error => { @@ -243,8 +255,16 @@ export class GalleryViewComponent implements OnInit { let request = masterRequest.copy(); request.query = "("+request.query+") and " + splitByField+"="+ splitByValue; + const expectedSequenceId = ++this.sequenceId; + this.plotService.sendPlotRequest(request).subscribe(function(plotResponse : PlotResponse){ - console.log("response: " + JSON.stringify(plotResponse)); + //console.log("response: " + JSON.stringify(plotResponse)); + if (that.sequenceId != expectedSequenceId){ + //console.log("ignoring stale response"); + return; + } + + that.progress = 100 * (that.totalNumberImages - that.splitByValuesQueue.length) / that.totalNumberImages; plotResponse.thumbnailUrl = "http://"+window.location.hostname+':8080/'+plotResponse.thumbnailUrl; plotResponse.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl; diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index e3c12a3..bf55bf8 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -53,7 +53,7 @@ export class PlotService { sendPlotRequest(plotRequest: PlotRequest): Observable{ - console.log("send plot request: "+ JSON.stringify(plotRequest)); + //console.log("send plot request: "+ JSON.stringify(plotRequest)); return this.http.post('//'+window.location.hostname+':8080/plots', plotRequest); } diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index b725766..a262059 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -36,6 +36,9 @@ $background-color: #CBD7F4; height: 1em; vertical-align: text-bottom; } +.mat-button .mat-button-wrapper .icon-inline { + vertical-align: text-top; +} button[disabled] .icon-inline { opacity: 0.5;