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