pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html

@@ -1,3 +1,8 @@
+<style>
+  mat-form-field textarea {
+    height: 7em;
+  }
+</style>
 <h1 mat-dialog-title>Add Text</h1>
 <div mat-dialog-content>
   <mat-form-field class="pdb-form-full-width">

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.scss

@@ -1,3 +0,0 @@
-textarea {
-  height: 5em;
-}

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

@@ -3,8 +3,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-add-text-dialog',
-  templateUrl: './add-text-dialog.component.html',
-  styleUrls: ['./add-text-dialog.component.scss']
+  templateUrl: './add-text-dialog.component.html'
 })
 export class AddTextDialogComponent  {
   text = "";

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

@@ -143,7 +143,9 @@ export class DashboardComponent implements OnInit {
     this.dialog.open(AddTextDialogComponent,{
       width: '600px'
     }).afterClosed().subscribe((text: string) => {
-      this.dashboard!.texts.push(new TextWidget(crypto.randomUUID(),'MEDIUM', text)); 
+      const widget = new TextWidget(crypto.randomUUID(),'MEDIUM', text);
+      this.dashboard!.texts.push(widget); 
+      this.dashboard!.arrangement[0].push(widget.id);
     });
   }
 
@@ -151,8 +153,14 @@ export class DashboardComponent implements OnInit {
     this.dialog.open(AddPlotDialogComponent,{
       width: 'calc(100% - 1em)',
       height: 'calc(100% - 1em)'
-    }).afterClosed().subscribe((config: PlotConfig) => {
-      this.dashboard!.plots.push(new PlotWidget(crypto.randomUUID(), 'MEDIUM', config));
+    }).afterClosed().subscribe((config: PlotConfig | "") => {
+      if (config != "" && config.query.length > 0) {
+        const widget = new PlotWidget(crypto.randomUUID(), 'MEDIUM', config);
+        this.dashboard!.plots.push(widget);
+        this.dashboard!.arrangement[0].push(widget.id);
+        this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget));
+        this.loadImages(this.plotWidgetRenderData.length-1, this.plotWidgetRenderData);
+      }
     });
   }
 

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

@@ -12,11 +12,15 @@
     width: 602px;
     height: 402px;
   }
+  .size-small {
+    width: 402px;
+    height: 302px;
+  }
   img {
     cursor: zoom-in;
   }
 </style>
-<div class="dashboard-card" [ngClass]="{'size-medium' : data.widget.size=='MEDIUM'}">
+<div class="dashboard-card" [ngClass]="{'size-medium' : true}">
   <mat-spinner *ngIf="!hasRender('main') && !isError"></mat-spinner>
   <img *ngIf="hasRender('main')" [src]="getImageUrl('main')" (click)="showFullScreenImage()" />
   <div *ngIf="isError">

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

@@ -26,11 +26,12 @@ export class PlotWidgetComponent implements AfterViewInit {
   }
 
   hasRender(name: string): boolean{
-    return this.data.plotResponse!.rendered[name] !== undefined;
+    const hasRender = this.data !== undefined && this.data.plotResponse !== undefined && this.data.plotResponse?.rendered[name] !== undefined;
+    return hasRender;
   }
 
-  getImageUrl(name: string ): string {
-    return this.data.plotResponse!.rendered[name];
+  getImageUrl(name: string ): string | undefined {
+    return this.data?.plotResponse?.rendered[name];
   }
 
   showFullScreenImage(){

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

@@ -64,7 +64,7 @@ export class TextWidget  extends BaseWidget {
   }
 }
 export class PlotWidget extends BaseWidget {
-  constructor(override id: string, override size: PlotSize, public config: PlotConfig) {
+  constructor(override id: string, override size: 'SMALL'|'MEDIUM'|'LARGE', public config: PlotConfig) {
     super(id, 'PLOT', size);
   }
 }