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

@@ -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,

pdb-js/src/app/gallery-view/gallery-view.component.html

@@ -20,6 +20,17 @@
     <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
     
   </div>
+  <div
+    *ngIf="show && progress != 100 && totalNumberImages > 0" 
+    id="gallery-progress">
+    
+    <mat-progress-bar mode="determinate" value="{{progress}}"></mat-progress-bar>
+   
+    <button 
+      mat-button
+      (click)="abort()"
+      matTooltip="abort"><img src="assets/img/close.svg" class="icon-inline" /> Abort</button>
+  </div>
   <div
     *ngIf="show"
     class="card-grid-container">

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;
+}

pdb-js/src/app/gallery-view/gallery-view.component.ts

@@ -95,10 +95,8 @@ export class GalleryFilterView {
 })
 export class GalleryViewComponent implements OnInit {
 
-
   galleryItems: Array<GalleryItem> = new Array<GalleryItem>();
   
-  
   show = false;
   
   splitByValuesQueue = new Array<string>();
@@ -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<string>();
+    this.sequenceId++;
+  }
+  
   filteredSortedGalleryItems(): Array<GalleryItem> {
     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;

pdb-js/src/app/plot.service.ts

@@ -53,7 +53,7 @@ export class PlotService {
   
   sendPlotRequest(plotRequest: PlotRequest): Observable<PlotResponse>{
     
-    console.log("send plot request: "+  JSON.stringify(plotRequest));
+    //console.log("send plot request: "+  JSON.stringify(plotRequest));
     return this.http.post<PlotResponse>('//'+window.location.hostname+':8080/plots', plotRequest);
   }
   

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;