show image in dashboard

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html

@@ -1,4 +1,23 @@
 <style>
-
+  :host {
+    float: left;
+  }
+  .dashboard-card {
+    border: solid 1px red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .size-medium {
+    width: 602px;
+    height: 502px;
+  }
 </style>
-<p>{{data.config.query}}</p>
+<div class="dashboard-card" [ngClass]="{'size-medium' : data.size=='MEDIUM'}">
+  <mat-spinner *ngIf="!thumbnailUrl && !isError"></mat-spinner>
+  <img *ngIf="thumbnailUrl" src="{{thumbnailUrl}}" />
+  <div *ngIf="isError">
+    There was an error! This is a good time to panic!
+  </div>
+</div>
+

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts

@@ -1,13 +1,53 @@
-import { Component, Input } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { PlotWidget } from 'src/app/dashboard.service';
+import { PlotViewComponent } from 'src/app/plot-view/plot-view.component';
+import { PlotRequest, PlotResponse, PlotService } from 'src/app/plot.service';
 
 @Component({
   selector: 'app-plot-widget',
   templateUrl: './plot-widget.component.html'
 })
-export class PlotWidgetComponent {
+export class PlotWidgetComponent implements AfterViewInit {
   @Input("data")
   data!: PlotWidget;
 
-  
+  thumbnailUrl = "";
+
+  isError = false;
+
+  @ViewChild("plotView") plotView!: PlotViewComponent;
+
+  constructor(private plotService : PlotService){}
+
+  ngAfterViewInit(): void {
+    
+
+    const plotRequest = this.createPlotRequest();
+      this.plotService.sendPlotRequest(plotRequest).subscribe({
+        next: (response: PlotResponse) => {
+          this.thumbnailUrl = response.thumbnailUrl;
+        },
+        error: () => {
+          this.isError = true;
+        }
+      });
+  }
+
+  createPlotRequest(): PlotRequest {
+    
+    const height = window.innerHeight - 20;
+    const width  = window. innerWidth - 20;
+
+   const request = new PlotRequest(
+    height,
+    width,
+     600, // thumbnailMaxWidth
+     500, // thumbnailMaxHeight
+     false, // keyOutside
+     true, // generateThumbnail
+     (<any>window).submitterId,
+     this.data.config!);
+   return request;
+ }
+
 }

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

@@ -53,4 +53,8 @@ export class PlotWidget extends BaseWidget {
   constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public config: PlotConfig) {
     super('PLOT', size);
   }
+}
+
+export class WidgetDimensions{
+  constructor(public width: number, public height: number){}
 }

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

@@ -2,6 +2,7 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest  } from '../plot.service';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import * as moment from 'moment';
+import { WidgetDimensions } from '../dashboard.service';
 
 @Component({
   selector: 'pdb-plot-view',
@@ -46,8 +47,6 @@ export class PlotViewComponent implements OnInit {
 
   config? : PlotConfig;
 
-  submitterId = crypto.randomUUID();
-
   constructor(private service : PlotService, private snackBar: MatSnackBar) { }
 
   ngOnInit() {
@@ -221,13 +220,36 @@ export class PlotViewComponent implements OnInit {
     this.showStats = false;
   }
 
+  getAxes(): AxesTypes{
+    const plotTypes = this.service.getPlotTypes();
+    
+    this.config?.aggregates
+
+    const x = new Array<DataType>();
+    const y = new Array<DataType>();
+    
+    for(var i = 0; i < this.config!.aggregates.length; i++){
+      const aggregateType = this.config?.aggregates[i];
+      const plotType = plotTypes.find((p) => p.id == aggregateType);
+      if (plotType) {
+        if (!x.includes(plotType.xAxis)) {
+          x.push(plotType.xAxis);
+        }
+        if (!y.includes(plotType.yAxis)) {
+          y.push(plotType.yAxis);
+        }
+      }
+    }
+    
+    return new AxesTypes(x,y);
+  }
 
 
-  plot(config : PlotConfig, axes: AxesTypes){
+  plot(config : PlotConfig, dimension: WidgetDimensions | (()=>WidgetDimensions)){
     this.config = config;
-    this.axes = axes;
+    this.axes = this.getAxes();
 
-    const request = this.createPlotRequest();
+    const request = this.createPlotRequest(dimension);
     
     this.loadingEvent.emit(new LoadingEvent(true));
     const x = this.service.sendPlotRequest(request).subscribe({
@@ -247,21 +269,20 @@ export class PlotViewComponent implements OnInit {
     });
   }
 
-  createPlotRequest(): PlotRequest {
-    const results = document.getElementById("results");
-   
-   
+  createPlotRequest( dimension: WidgetDimensions | (()=>WidgetDimensions)): PlotRequest {
+  
+    const actualDimension = typeof dimension === "function" ? dimension() : dimension;
 
-   const request = new PlotRequest(
-     results != null ? results.offsetHeight-1: 1024,
-     results != null ? results.offsetWidth-1 : 1024,
-     300, // thumbnailMaxWidth
-     200, // thumbnailMaxHeight
-     false, // keyOutside
-     false, // generateThumbnail
-     this.submitterId,
-     this.config!);
-   return request;
+    const request = new PlotRequest(
+      actualDimension.height,
+      actualDimension.width,
+      300, // thumbnailMaxWidth
+      200, // thumbnailMaxHeight
+      false, // keyOutside
+      false, // generateThumbnail
+      (<any>window).submitterId,
+      this.config!);
+    return request;
  }
 
  /**

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

pdb-js/src/main.ts

@@ -8,5 +8,7 @@ if (environment.production) {
   enableProdMode();
 }
 
+(<any>window).submitterId = crypto.randomUUID();
+
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));