abort plotting on dashboards

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>