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

@@ -28,5 +28,5 @@
   <p>{{dashboard.description}}</p>
 
   <app-text-widget *ngFor="let textWidget of dashboard.texts" [text]="textWidget.text"></app-text-widget>
-  <app-plot-widget *ngFor="let plotWidget of dashboard.plots" [data]="plotWidget"></app-plot-widget>
+  <app-plot-widget *ngFor="let p of plotWidgetRenderData" [data]="p"></app-plot-widget>
 </div>

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

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute } from '@angular/router';
-import { Dashboard, DashboardService, PlotWidget, TextWidget } from 'src/app/dashboard.service';
-import { PlotConfig } from 'src/app/plot.service';
+import { Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
+import { PlotConfig, PlotRequest, PlotResponse, PlotService } from 'src/app/plot.service';
 import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
 import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
 
@@ -15,12 +15,80 @@ export class DashboardComponent implements OnInit {
 
   dashboard?: Dashboard = undefined;
 
-  constructor(private route: ActivatedRoute,  private service: DashboardService, private dialog: MatDialog, private snackBar: MatSnackBar) {}
+  plotWidgetRenderData: PlotWidgetRenderData[] = [];
+
+  constructor(
+    private route: ActivatedRoute,  
+    private service: DashboardService, 
+    private dialog: MatDialog, 
+    private snackBar: MatSnackBar, 
+    private plotService: PlotService) {}
 
   ngOnInit(): void {
       this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe((dashboard: Dashboard) => {
         this.dashboard = dashboard;
+
+        dashboard.plots.forEach(p => {
+          this.plotWidgetRenderData.push(new PlotWidgetRenderData(p));
         });
+
+        this.loadImages(0, this.plotWidgetRenderData);
+      });
+  }
+
+  loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {
+
+    if (index < plotWidgetQueue.length){
+      const plot = plotWidgetQueue[index];
+      const request = this.createPlotRequest(plot.widget)
+        this.plotService.sendPlotRequest(request).subscribe({
+          next: (response: PlotResponse)=> {
+            plot.plotResponse= response;
+          },
+          error: (error:any)=> {},
+          complete: () => {
+            this.loadImages(index +1 , plotWidgetQueue);
+          }
+        });
+    }
+  }
+
+  createPlotRequest(plotWidget: PlotWidget): PlotRequest {
+    
+    const height = this.height(plotWidget.size);
+    const width  = this.width(plotWidget.size);
+
+    const request = new PlotRequest(
+      height,
+      width,
+      600, // thumbnailMaxWidth
+      500, // thumbnailMaxHeight
+      false, // keyOutside
+      false, // generateThumbnail
+      (<any>window).submitterId+crypto.randomUUID(),
+      plotWidget.config);
+   return request;
+ }
+
+ height(size: PlotSize): number{
+  switch (size) {
+    case 'SMALL':
+      return 300;
+    case 'MEDIUM':
+      return 400;
+    case 'LARGE':
+      return 600;
+  }
+ }
+ width(size: PlotSize): number{
+  switch (size) {
+    case 'SMALL':
+      return 400;
+    case 'MEDIUM':
+      return 600;
+    case 'LARGE':
+      return 900;
+  }
  }
 
   addText() {

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

@@ -10,12 +10,12 @@
   }
   .size-medium {
     width: 602px;
-    height: 502px;
+    height: 402px;
   }
 </style>
-<div class="dashboard-card" [ngClass]="{'size-medium' : data.size=='MEDIUM'}">
-  <mat-spinner *ngIf="!thumbnailUrl && !isError"></mat-spinner>
-  <img *ngIf="thumbnailUrl" src="{{thumbnailUrl}}" />
+<div class="dashboard-card" [ngClass]="{'size-medium' : data.widget.size=='MEDIUM'}">
+  <mat-spinner *ngIf="!data.plotResponse?.imageUrl && !isError"></mat-spinner>
+  <img *ngIf="data.plotResponse?.imageUrl" src="{{data.plotResponse?.imageUrl}}" />
   <div *ngIf="isError">
     There was an error! This is a good time to panic!
   </div>

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

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

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

@@ -9,6 +9,6 @@ export class TextWidgetComponent {
   text = "";
 
   lines(): string[]{
-    return this.text.split(/\r?\n/);
+    return typeof this.text == 'string' ? this.text.split(/\r?\n/) : [];
   }
 }

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

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { PlotConfig } from './plot.service';
+import { PlotConfig, PlotResponse } from './plot.service';
 
 @Injectable({
   providedIn: 'root'
@@ -41,20 +41,29 @@ export class DashboardList{
 }
 
 export abstract class BaseWidget {
-  constructor(public type: 'TEXT'|'PLOT', public size: 'SMALL'|'MEDIUM'|'LARGE') {}
+  constructor(public type: PlotType, public size: PlotSize) {}
 }
 
 export class TextWidget  extends BaseWidget {
-  constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public text: string) {
+  constructor(override size: PlotSize, public text: string) {
     super('TEXT', size);
   }
 }
 export class PlotWidget extends BaseWidget {
-  constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public config: PlotConfig) {
+  constructor(override size: PlotSize, public config: PlotConfig) {
     super('PLOT', size);
   }
 }
 
+export type PlotSize = 'SMALL'|'MEDIUM'|'LARGE';
+
+export type PlotType = 'TEXT'|'PLOT';
+
+export class PlotWidgetRenderData  {
+  constructor(public widget: PlotWidget, public plotResponse?: PlotResponse) {
+  }
+}
+
 export class WidgetDimensions{
   constructor(public width: number, public height: number){}
 }