edit plots

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

@@ -1,14 +1,8 @@
 <style>
   :host {
-    /*
-    height: calc(100% - 29px);
-    */
-    width: 100%;
-    position: absolute;
     padding: 0.5em;
   }
 
-
   .center {
     position: absolute;
     top: 50%;
@@ -28,7 +22,7 @@
 <div *ngIf="loading" class="center">
   <mat-spinner></mat-spinner>
 </div>
-<div *ngIf="error" class="center is-error center-content ">
+<div *ngIf="error" class="center is-error center-content">
   {{error}}
 </div>
 <div *ngIf="!loading && !error">

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

@@ -14,11 +14,11 @@
     max-height: unset;
   }
 </style>
-<h1 mat-dialog-title>Add Plot</h1>
+<h1 mat-dialog-title>{{data.title}}</h1>
 
-<pdb-visualization-page mat-dialog-content #plot></pdb-visualization-page>
+<pdb-visualization-page mat-dialog-content #plot [defaultConfig]="data.config" [galleryEnabled]="false"></pdb-visualization-page>
 
 <div mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button mat-dialog-close >Cancel</button>
   <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

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

@@ -1,17 +1,22 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { PlotConfig } from 'src/app/plot.service';
 import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component';
 
 @Component({
   selector: 'app-add-plot-dialog',
-  templateUrl: './add-plot-dialog.component.html',
-  styleUrls: ['./add-plot-dialog.component.scss']
+  templateUrl: './add-plot-dialog.component.html'
 })
 export class AddPlotDialogComponent {
 
   @ViewChild("plot") plotElement! :VisualizationPageComponent;
 
-  constructor(public dialogRef: MatDialogRef<string>){
+
+
+  constructor(
+    public dialogRef: MatDialogRef<PlotConfig | undefined>,
+    @Inject(MAT_DIALOG_DATA) public data: {config: PlotConfig, title: string}
+    ){
   }
 
   onSaveClick(): void {

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

@@ -58,20 +58,20 @@ export class DashboardComponent implements OnInit {
 
     if (index < plotWidgetQueue.length){
       const plot = plotWidgetQueue[index];
-      const request = this.createPlotRequest(plot.widget)
-        this.plotService.sendPlotRequest(request).subscribe({
-          next: (response: PlotResponse)=> {
-            plot.plotResponse= response;
-          },
-          error: (error:any)=> {},
-          complete: () => {
-            this.loadImages(index +1 , plotWidgetQueue);
-          }
-        });
+      const request = PlotWidget.createPlotRequest(plot.widget);
+      this.plotService.sendPlotRequest(request).subscribe({
+        next: (response: PlotResponse)=> {
+          plot.plotResponse= response;
+        },
+        error: (error:any)=> {},
+        complete: () => {
+          this.loadImages(index +1 , plotWidgetQueue);
+        }
+      });
     }
   }
 
-
+/*
   createPlotRequest(plotWidget: PlotWidget): PlotRequest {
     
     const height = this.height(plotWidget.size);
@@ -111,6 +111,7 @@ export class DashboardComponent implements OnInit {
         return 900;
     }
   }
+  */
 
   private repairArrangement(){
     const arrangement = this.dashboard!.arrangement || [];
@@ -153,6 +154,7 @@ export class DashboardComponent implements OnInit {
 
   addPlot() {
     this.dialog.open(AddPlotDialogComponent,{
+      data: {title: "Add Plot"},
       width: 'calc(100% - 1em)',
       height: 'calc(100% - 1em)'
     }).afterClosed().subscribe((config: PlotConfig | "") => {

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

@@ -3,7 +3,7 @@
     float: left;
   }
   .dashboard-card {
-    border: solid 1px red;
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -19,8 +19,23 @@
   img {
     cursor: zoom-in;
   }
+
+
+  .editable-hovered {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .dashboard-card .editable-hovered {
+    visibility: hidden;
+  }
+  .dashboard-card:hover .editable-hovered {
+    visibility: visible;
+  }
 </style>
 <div class="dashboard-card" [ngClass]="{'size-medium' : true}">
+  <button mat-icon-button (click)="edit()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button>
   <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

@@ -1,8 +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 { PlotSize, PlotWidget, PlotWidgetRenderData } from 'src/app/dashboard.service';
 import { PlotViewComponent } from 'src/app/plot-view/plot-view.component';
-import { PlotRequest, PlotResponse, PlotService, RenderOptions } 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 { FullScreenPlotDialogComponent } from '../full-screen-plot-dialog/full-screen-plot-dialog.component';
 
 @Component({
@@ -19,7 +20,7 @@ export class PlotWidgetComponent implements AfterViewInit {
 
   @ViewChild("plotView") plotView!: PlotViewComponent;
 
-  constructor(private dialog: MatDialog, ){}
+  constructor(private dialog: MatDialog, private service: PlotService){}
 
   ngAfterViewInit(): void {
     
@@ -44,4 +45,31 @@ export class PlotWidgetComponent implements AfterViewInit {
       
     });
   }
+
+  
+
+  edit() {
+    this.dialog.open(AddPlotDialogComponent, {
+      data: {config: this.data.widget.config, title:"Edit Plot"},
+      width: 'calc(100% - 15px)',
+      height: 'calc(100% - 15px)',
+    }).afterClosed().subscribe((config?: PlotConfig) => {
+      if (config !== undefined && config.query.length > 0) {
+        this.data.widget.config = config;
+
+        this.isError = false;
+        this.data.plotResponse = undefined;
+
+        const request = PlotWidget.createPlotRequest(this.data.widget);
+        this.service.sendPlotRequest(request).subscribe({
+          next: (response: PlotResponse)=> {
+            this.data.plotResponse = response;
+          },
+          error: (error:any)=> {
+            this.isError = true;
+          },
+        });
+      }
+    });
+  }
 }

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html

@@ -1,3 +1,8 @@
+<style>
+  div[mat-dialog-content] {
+    overflow: hidden;
+  }
+</style>
 <h1 mat-dialog-title>Create a new dashboard</h1>
 <div mat-dialog-content>
   <mat-form-field class="pdb-form-full-width">

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.scss

@@ -1,4 +0,0 @@
-
-div[mat-dialog-content] {
-  overflow: hidden;
-}

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

@@ -1,11 +1,10 @@
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
-import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import { DashboardCreationData } from 'src/app/dashboard.service';
 
 @Component({
   selector: 'app-new-dashboard',
-  templateUrl: './new-dashboard.component.html',
-  styleUrls: ['./new-dashboard.component.scss']
+  templateUrl: './new-dashboard.component.html'
 })
 export class NewDashboardComponent implements OnInit {