abort plotting on dashboards

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

@@ -40,7 +40,8 @@ export class DashboardComponent implements OnInit {
           this.repairArrangement();
 
           dashboard.plots.forEach(p => {
-            this.plotWidgetRenderData.push(new PlotWidgetRenderData(p));
+            const submitterId = (<any>window).submitterId + (<any>window).randomId();
+            this.plotWidgetRenderData.push(new PlotWidgetRenderData(p, submitterId));
           });
 
           this.loadImages(0, this.plotWidgetRenderData);
@@ -64,17 +65,25 @@ export class DashboardComponent implements OnInit {
   loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {
 
     if (index < plotWidgetQueue.length){
+
       const plot = plotWidgetQueue[index];
-      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);
-        }
-      });
+      if (plot.isAborted) {
+        this.loadImages(index +1 , plotWidgetQueue);
+      }else{
+        const request = PlotWidget.createPlotRequest(plot.widget, plot.submitterId);
+        this.plotService.sendPlotRequest(request).subscribe({
+          next: (response: PlotResponse)=> {
+            plot.plotResponse= response;
+          },
+          error: (error:any)=> {
+            plot.error = error;
+            this.loadImages(index +1 , plotWidgetQueue);
+          },
+          complete: () => {
+            this.loadImages(index +1 , plotWidgetQueue);
+          }
+        });
+      }
     }
   }
 
@@ -127,7 +136,7 @@ export class DashboardComponent implements OnInit {
         const widget = new PlotWidget((<any>window).randomId(), 'MEDIUM', config);
         this.dashboard!.plots.push(widget);
         this.dashboard!.arrangement[0].push(widget.id);
-        this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget));
+        this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget, (<any>window).randomId()));
         this.loadImages(this.plotWidgetRenderData.length-1, this.plotWidgetRenderData);
       }
     });

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

@@ -16,7 +16,7 @@
     width: 402px;
     height: 302px;
   }
-  img {
+  img.render-img {
     cursor: zoom-in;
   }
 
@@ -38,16 +38,51 @@
   .dashboard-card:hover .editable-hovered {
     visibility: visible;
   }
+
+  .aborted-img {
+    flex-grow: 0.3;
+    opacity: 0.3;
+  }
+  .aborted-img img {
+    width: 100%;
+  }
+
+  .invader {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kKGRAxBENShygAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAbUlEQVRIx9WVQQrAMAgEM6X///L2FCihYvRg7F416LCsQdKo0DWKZA4CBGzjev1lRHgezS0lkan3IYr485ZFdo5oJZkbWoRWfSWrJ8p6suvZucsgCS8THsHX+zKiO5uLaO763bpobvoS/e6HfQBzIE0PhAsDxgAAAABJRU5ErkJggg==);
+    width: 26px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+  .spinner {
+    animation: wobble 2s linear infinite;
+  }
+  @keyframes wobble {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 </style>
 <div class="dashboard-card" [ngClass]="{'size-medium' : true}">
   <div class="editable-hovered top-right">
     <button mat-icon-button (click)="edit()" ><img src="/assets/img/edit-outline.svg"/></button>
     <button mat-icon-button (click)="delete()"><img src="/assets/img/recycle-bin-line.svg"/></button>
   </div>
-  <mat-spinner *ngIf="!hasRender('main') && !isError"></mat-spinner>
-  <img *ngIf="hasRender('main')" [src]="getImageUrl('main')" (click)="showFullScreenImage()" />
-  <div *ngIf="isError">
+  <div *ngIf="!hasRender('main') && !data?.error && !data.isAborted">
+    <button mat-button (click)="abort()"><span class="invader spinner"></span>Cancel</button>    
+  </div>
+  <img *ngIf="hasRender('main')" [src]="getImageUrl('main')" (click)="showFullScreenImage()"  class="render-img" />
+  <div *ngIf="data?.error && !data?.isAborted">
     There was an error! This is a good time to panic!
   </div>
+  <div *ngIf="data?.isAborted" class="aborted-img">
+    <img src="assets/img/image-aborted.svg" />
+  </div>
 </div>
 

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

@@ -17,7 +17,6 @@ export class PlotWidgetComponent  {
 
   public thumbnailUrl = "";
 
-  isError = false;
 
   @ViewChild("plotView") plotView!: PlotViewComponent;
 
@@ -45,6 +44,17 @@ export class PlotWidgetComponent  {
     });
   }
 
+  abort(){
+    window.console.log("abort");
+    this.data.isAborted = true;
+    this.service.abort(this.data.submitterId).subscribe({
+      complete: () => {
+        window.console.log("cancelled");
+      },
+      error: () => {}
+    });
+  }
+
   delete() {
     this.dialog
       .open(ConfirmationDialogComponent, {
@@ -67,16 +77,16 @@ export class PlotWidgetComponent  {
       if (config !== undefined && config.query.length > 0) {
         this.data.widget.config = config;
 
-        this.isError = false;
+        this.data.error = false;
         this.data.plotResponse = undefined;
 
-        const request = PlotWidget.createPlotRequest(this.data.widget);
+        const request = PlotWidget.createPlotRequest(this.data.widget, this.data.submitterId);
         this.service.sendPlotRequest(request).subscribe({
           next: (response: PlotResponse)=> {
             this.data.plotResponse = response;
           },
           error: (error:any)=> {
-            this.isError = true;
+            this.data.error = true;
           },
         });
       }

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

@@ -68,7 +68,7 @@ export class PlotWidget extends BaseWidget {
     super(id, 'PLOT', size);
   }
 
-  public static createPlotRequest(widget: PlotWidget): PlotRequest {
+  public static createPlotRequest(widget: PlotWidget, submitterId: string): PlotRequest {
     
     const height = this.height(widget.size);
     const width  = this.width(widget.size);
@@ -77,7 +77,7 @@ export class PlotWidget extends BaseWidget {
     const fullHeight = window.innerHeight-30;
 
     const request = new PlotRequest(
-      (<any>window).submitterId+(<any>window).randomId(),
+      submitterId,
       widget.config, 
       {
         'main': new RenderOptions(height,width, false, true),
@@ -115,7 +115,9 @@ export type PlotSize = 'SMALL'|'MEDIUM'|'LARGE';
 export type PlotType = 'TEXT'|'PLOT';
 
 export class PlotWidgetRenderData  {
-  constructor(public widget: PlotWidget, public plotResponse?: PlotResponse) {
+  public isAborted = false;
+  public error: string|boolean = false;
+  constructor(public widget: PlotWidget, public submitterId: string, public plotResponse?: PlotResponse) {
   }
 }