show fullscreen image

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

@@ -14,8 +14,8 @@
   }
 </style>
 <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}}" />
+  <mat-spinner *ngIf="!hasRender('main') && !isError"></mat-spinner>
+  <img *ngIf="hasRender('main')" [src]="getImageUrl('main')" (click)="showFullScreenImage()" />
   <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,7 +1,9 @@
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 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';
+import { PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service';
+import { FullScreenPlotDialogComponent } from '../full-screen-plot-dialog/full-screen-plot-dialog.component';
 
 @Component({
   selector: 'app-plot-widget',
@@ -17,37 +19,28 @@ export class PlotWidgetComponent implements AfterViewInit {
 
   @ViewChild("plotView") plotView!: PlotViewComponent;
 
-  constructor(private plotService : PlotService){}
+  constructor(private dialog: MatDialog, ){}
 
   ngAfterViewInit(): void {
-    /*
-    const plotRequest = this.createPlotRequest();
-      this.plotService.sendPlotRequest(plotRequest).subscribe({
-        next: (response: PlotResponse) => {
-          this.thumbnailUrl = response.imageUrl;
-        },
-        error: () => {
-          this.isError = true;
-        }
-      });
-      */
+    
   }
 
-  createPlotRequest(): PlotRequest {
+  hasRender(name: string): boolean{
+    return this.data.plotResponse!.rendered[name] !== undefined;
+  }
+
+  getImageUrl(name: string ): string {
+    return this.data.plotResponse!.rendered[name];
+  }
+
+  showFullScreenImage(){
     
-    const height = window.innerHeight - 20;
-    const width  = window. innerWidth - 20;
-
-    const request = new PlotRequest(
-      500,
-      600,
-      600, // thumbnailMaxWidth
-      500, // thumbnailMaxHeight
-      false, // keyOutside
-      false, // generateThumbnail
-      (<any>window).submitterId,
-      this.data.widget.config!);
-   return request;
- }
-
+    this.dialog.open(FullScreenPlotDialogComponent,{
+      width: 'calc(100% - 15px)',
+      height: 'calc(100% - 15px)',
+      'data': {'imageUrl': this.getImageUrl('fullScreen')}
+    }).afterClosed().subscribe(() => {
+      
+    });
+  }
 }