edit plots

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;
+          },
+        });
+      }
+    });
+  }
 }