render gallery items

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

@@ -0,0 +1,123 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { PlotService, PlotRequest, PlotResponse, PlotResponseStats  } from '../plot.service';
+
+@Component({
+  selector: 'pdb-gallery-view',
+  templateUrl: './gallery-view.component.html',
+  styleUrls: ['./gallery-view.component.scss']
+})
+export class GalleryViewComponent implements OnInit {
+
+
+  galleryItems: Array<GalleryItem> = new Array<GalleryItem>();
+  
+  splitByValuesQueue = new Array<string>();
+
+  constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
+  }
+
+  showError(message) {
+    this.snackBar.open(message, "", {
+      duration: 5000,
+      verticalPosition: 'top'
+    });
+  }
+
+  ngOnInit() {
+  }
+  
+  renderGallery(request: PlotRequest, splitByField: string) {
+    const that=this;
+    
+    this.galleryItems.length = 0;
+    this.splitByValuesQueue.length = 0;
+    
+    request.generateThumbnail = true;
+    
+    this.plotService.splitQuery(request.query, splitByField).subscribe(function(valuesForSplitBy){
+      console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
+      that.splitByValuesQueue = valuesForSplitBy;
+      that.renderGalleryRecursively(request, splitByField);
+    },
+    error => {
+      that.showError(error.error.message);
+    });
+  }
+  
+  renderGalleryRecursively(masterRequest: PlotRequest, splitByField: string){
+    const that = this;
+    
+    if (this.splitByValuesQueue.length == 0){
+      return;
+    }
+    
+    const splitByValue = this.splitByValuesQueue.pop();
+    
+    let request = masterRequest.copy();
+    request.query = "("+request.query+") and " + splitByField+"="+ splitByValue;
+    
+    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse : PlotResponse){
+      console.log("response: " + JSON.stringify(plotResponse));
+      
+      plotResponse.thumbnailUrl = "http://"+window.location.hostname+':8080/'+plotResponse.thumbnailUrl;
+      plotResponse.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
+      let galleryItem = new GalleryItem(splitByValue, plotResponse);
+      that.galleryItems.push(galleryItem);
+      that.renderGalleryRecursively(masterRequest, splitByField);
+    },
+    error => {
+      that.showError(error.error.message);
+    });
+  }
+
+}
+
+@Component({
+  selector: 'pdb-gallery-item-view',
+  templateUrl: './gallery-item-view.component.html',
+  styleUrls: ['./gallery-item-view.component.scss']
+})
+export class GalleryItemView {
+  @Input()
+  data: GalleryItem;
+  
+  
+  formatMs(valueInMs):string {
+    const ms = Math.floor(valueInMs % 1000);
+    const s = Math.floor((valueInMs / 1000) % 60);
+    const m = Math.floor((valueInMs / (60*1000)) % 60);
+    const h = Math.floor(valueInMs / (3600*1000));
+    
+    var result = "";
+    if (h != 0) {
+      result += h+"h ";
+    }
+    if (h!= 0 || m != 0) {
+      result += m+"m ";
+    }
+    if (h!= 0 || m != 0 || s != 0) {
+      result += s+"s ";
+      result += ms+"ms";
+    } else {
+      result += ms+"ms";
+    }
+    
+    return result;
+  }
+}
+
+
+export class GalleryItem {
+  thumbnailUrl: string;
+  imageUrl: string;
+  stats: PlotResponseStats;
+  splitByValue : string;
+  
+  constructor(splitByValue: string, plotResponse: PlotResponse){
+    this.thumbnailUrl = plotResponse.thumbnailUrl;
+    this.imageUrl = plotResponse.imageUrl;
+    this.splitByValue = splitByValue;
+    this.stats = plotResponse.stats;
+  }
+}