use new render result for visualization

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

@@ -273,7 +273,8 @@ export class GalleryViewComponent implements OnInit {
     
     const expectedSequenceId = ++this.sequenceId;
     
-    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse : PlotResponse){
+    this.plotService.sendPlotRequest(request).subscribe({
+      'next':function(plotResponse : PlotResponse){
         //console.log("response: " + JSON.stringify(plotResponse));
         if (that.sequenceId != expectedSequenceId){
           //console.log("ignoring stale response");
@@ -282,15 +283,17 @@ export class GalleryViewComponent implements OnInit {
         
         that.progress = 100 * (that.totalNumberImages - that.splitByValuesQueue.length) / that.totalNumberImages;
       
-      plotResponse.thumbnailUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.thumbnailUrl;
+        plotResponse.thumbnailUrl = "//"+window.location.hostname+':'+window.location.port+'/'+plotResponse.rendered['thumbnail'];
-      plotResponse.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
+        plotResponse.imageUrl = "//"+window.location.hostname+':'+window.location.port+'/'+plotResponse.rendered['main'];
         let galleryItem = new GalleryItem(splitByValue, plotResponse);
         that.galleryItems.push(galleryItem);
         that.sortAndFilterGallery();
         that.renderGalleryRecursively(masterRequest, splitByField);
       },
+      'error':
       (error:any) => {
         that.showError(error.error.message);
+      }
     });
   }
   

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest  } from '../plot.service';
+import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions  } from '../plot.service';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import * as moment from 'moment';
 import { WidgetDimensions } from '../dashboard.service';
@@ -254,7 +254,8 @@ export class PlotViewComponent implements OnInit {
     this.loadingEvent.emit(new LoadingEvent(true));
     const x = this.service.sendPlotRequest(request).subscribe({
       next: (plotResponse: PlotResponse) => {
-        this.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
+        
+        this.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.rendered['main'];
         this.stats = plotResponse.stats;
         document.dispatchEvent(new Event("invadersPause", {}));
         this.loadingEvent.emit(new LoadingEvent(false));
@@ -282,7 +283,9 @@ export class PlotViewComponent implements OnInit {
       false, // generateThumbnail
       (<any>window).submitterId,
       this.config!,
-      {});
+      {
+        'main': new RenderOptions(actualDimension.height, actualDimension.width, false, true)
+      });
     return request;
  }
 

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

@@ -205,11 +205,11 @@ export class AutocompleteResult{
   constructor(public proposals: Array<Suggestion>){}
 }
 
-type RenderOptionsMap = {
+export type RenderOptionsMap = {
   [key: string]: RenderOptions;
 };
 
-type RenderedImages = {
+export type RenderedImages = {
   [key: string]: string;
 };
 

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig  } from '../plot.service';
+import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap  } from '../plot.service';
 import { UntypedFormControl, Validators } from '@angular/forms';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { LimitByComponent } from '../limit-by/limit-by.component';
@@ -148,11 +148,6 @@ export class VisualizationPageComponent implements OnInit {
   abort() {
     this.plotService.abort((<any>window).submitterId).subscribe({
       complete: () => {
-        //this.plotView.imageUrl = '';
-        //this.plotView.stats = null;
-        //this.plotJobActive = false;
-        //this.showError("Job aborted");
-        //document.dispatchEvent(new Event("invadersPause", {}));
       }
     });
   }
@@ -164,8 +159,9 @@ export class VisualizationPageComponent implements OnInit {
 
   plotDimensionSupplier(): WidgetDimensions{
     const results = document.getElementById("results");
-    return new WidgetDimensions(results != null ? results.offsetHeight-1: 1024,
+    return new WidgetDimensions(
-      results != null ? results.offsetWidth-1 : 1024,);
+      results != null ? results.offsetWidth-1 : 1024,
+      results != null ? results.offsetHeight-1: 1024);
   }
 
   createPlotConfig(): PlotConfig {
@@ -196,6 +192,11 @@ export class VisualizationPageComponent implements OnInit {
     
     const config = this.createPlotConfig();
 
+    const renderOptions : RenderOptionsMap = {
+      'main': new RenderOptions(results!.offsetHeight-1, results!.offsetWidth-1, false, true),
+      'thumbnail': new RenderOptions(200, 300, false, false),
+    };
+    
     const request = new PlotRequest(
       results != null ? results.offsetHeight-1: 1024,
       results != null ? results.offsetWidth-1 : 1024,
@@ -205,7 +206,8 @@ export class VisualizationPageComponent implements OnInit {
       this.enableGallery, // generateThumbnail
       (<any>window).submitterId,
       config,
-      {});
+      renderOptions
+      );
     return request;
   }
 }