show image in dashboard

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

@@ -8,6 +8,7 @@ import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomp
 import { PlotViewComponent, SelectionRange, DateAnchor, LoadingEvent } from '../plot-view/plot-view.component';
 import { GalleryViewComponent } from '../gallery-view/gallery-view.component';
 import * as moment from 'moment';
+import { WidgetDimensions } from '../dashboard.service';
 
 @Component({
   selector: 'pdb-visualization-page',
@@ -54,8 +55,6 @@ export class VisualizationPageComponent implements OnInit {
   intervalValue = 1;
   renderBarChartTickLabels = false;
 
-  submitterId = crypto.randomUUID();
-
   plotJobActive = false;
 
   constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
@@ -147,7 +146,7 @@ export class VisualizationPageComponent implements OnInit {
   }
 
   abort() {
-    this.plotService.abort(this.submitterId).subscribe({
+    this.plotService.abort((<any>window).submitterId).subscribe({
       complete: () => {
         this.plotView.imageUrl = '';
         this.plotView.stats = null;
@@ -160,8 +159,13 @@ export class VisualizationPageComponent implements OnInit {
     
   plot(){
     const config = this.createPlotConfig();
-    const axes = this.getAxes();
-    this.plotView.plot(config, axes);
+    this.plotView.plot(config, this.plotDimensionSupplier);
+  }
+
+  plotDimensionSupplier(): WidgetDimensions{
+    const results = document.getElementById("results");
+    return new WidgetDimensions(results != null ? results.offsetHeight-1: 1024,
+      results != null ? results.offsetWidth-1 : 1024,);
   }
 
   createPlotConfig(): PlotConfig {
@@ -199,7 +203,7 @@ export class VisualizationPageComponent implements OnInit {
       200, // thumbnailMaxHeight
       false, // keyOutside
       this.enableGallery, // generateThumbnail
-      this.submitterId,
+      (<any>window).submitterId,
       config);
     return request;
   }