show fullscreen image

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

@@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
-import { PlotConfig, PlotRequest, PlotResponse, PlotService } from 'src/app/plot.service';
+import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } 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';
 
@@ -67,11 +67,15 @@ export class DashboardComponent implements OnInit {
     }
   }
 
+
   createPlotRequest(plotWidget: PlotWidget): PlotRequest {
     
     const height = this.height(plotWidget.size);
     const width  = this.width(plotWidget.size);
 
+    const fullWidth = window.innerWidth-30; 
+    const fullHeight = window.innerHeight-30;
+
     const request = new PlotRequest(
       height,
       width,
@@ -80,7 +84,12 @@ export class DashboardComponent implements OnInit {
       false, // keyOutside
       false, // generateThumbnail
       (<any>window).submitterId+crypto.randomUUID(),
-      plotWidget.config);
+      plotWidget.config, 
+      {
+        'main': new RenderOptions(height,width, false, true),
+        'fullScreen': new RenderOptions(fullHeight,fullWidth, false, true)
+      }
+    );
    return request;
  }
 

pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.html

@@ -0,0 +1,11 @@
+<style>
+  button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+</style>
+
+<img [src]="data.imageUrl" (click)="close()" />
+<button mat-icon-button mat-dialog-close cdkFocusInitial><img src="assets/img/close.svg" class="icon-small" /></button>
+

pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts

@@ -0,0 +1,16 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-full-screen-plot-dialog',
+  templateUrl: './full-screen-plot-dialog.component.html'
+})
+export class FullScreenPlotDialogComponent {
+
+
+  constructor(public dialogRef: MatDialogRef<void>, @Inject(MAT_DIALOG_DATA) public data: {imageUrl: string}){}
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}

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(() => {
+      
+    });
+  }
 }