show fullscreen image

pdb-js/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { AddTextDialogComponent } from './dashboard-page/dashboard/add-text-dial
 import { TextWidgetComponent } from './dashboard-page/dashboard/text-widget/text-widget.component';
 import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component';
 import { PlotWidgetComponent } from './dashboard-page/dashboard/plot-widget/plot-widget.component';
+import { FullScreenPlotDialogComponent } from './dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component';
 
 @NgModule({
   declarations: [
@@ -61,7 +62,8 @@ import { PlotWidgetComponent } from './dashboard-page/dashboard/plot-widget/plot
     AddTextDialogComponent,
     TextWidgetComponent,
     AddPlotDialogComponent,
-    PlotWidgetComponent
+    PlotWidgetComponent,
+    FullScreenPlotDialogComponent
   ],
   imports: [
     BrowserModule,

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

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -281,7 +281,8 @@ export class PlotViewComponent implements OnInit {
       false, // keyOutside
       false, // generateThumbnail
       (<any>window).submitterId,
-      this.config!);
+      this.config!,
+      {});
     return request;
  }
 

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

@@ -205,6 +205,14 @@ export class AutocompleteResult{
   constructor(public proposals: Array<Suggestion>){}
 }
 
+type RenderOptionsMap = {
+  [key: string]: RenderOptions;
+};
+
+type RenderedImages = {
+  [key: string]: string;
+};
+
 export class PlotRequest {
   constructor(
     public height : number,
@@ -214,7 +222,8 @@ export class PlotRequest {
     public keyOutside : boolean = false,
     public generateThumbnail : boolean,
     public submitterId: string,
-    public config: PlotConfig
+    public config: PlotConfig,
+    public renders: RenderOptionsMap
     ){}
     
   
@@ -237,6 +246,14 @@ export class PlotConfig {
     public renderBarChartTickLabels: boolean = false,) {}
 }
 
+export class RenderOptions {
+  constructor(
+    public height: number, 
+    public width: number, 
+    public keyOutside: boolean, 
+    public renderLabels: boolean) {}
+}
+
 export class YAxisDefinition {
   constructor(
     public axisScale : string,
@@ -249,7 +266,8 @@ export class PlotResponse {
   constructor(
     public imageUrl : string,
     public stats : PlotResponseStats,
-    public thumbnailUrl : string){}
+    public thumbnailUrl : string,
+    public rendered: RenderedImages){}
 }
 
 export class PlotResponseStats {

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

@@ -204,7 +204,8 @@ export class VisualizationPageComponent implements OnInit {
       false, // keyOutside
       this.enableGallery, // generateThumbnail
       (<any>window).submitterId,
-      config);
+      config,
+      {});
     return request;
   }
 }