Add a cancel button for annotation workers

src/components/AnnotationWorkerMenu.vue

@@ -37,12 +37,15 @@
         <v-row>
           <v-btn @click="preview">preview</v-btn>
           <v-spacer></v-spacer>
-          <v-btn @click="compute" :disabled="running">
-            <v-progress-circular size="16" v-if="running" indeterminate />
+          <v-btn @click="compute" v-if="!running">
             <v-icon v-if="previousRunStatus === false">mdi-close</v-icon>
             <v-icon v-if="previousRunStatus === true">mdi-check</v-icon>
             <span>Compute</span>
           </v-btn>
+          <v-btn v-else @click="cancel" color="orange" :disabled="!currentJob">
+            <v-progress-circular size="16" indeterminate />
+            <span>Cancel</span>
+          </v-btn>
         </v-row>
         <v-row>
           <v-checkbox
@@ -60,6 +63,7 @@ import { Vue, Component, Watch, Prop } from "vue-property-decorator";
 import store from "@/store";
 import annotationsStore from "@/store/annotation";
 import {
+  IComputeJob,
   IProgressInfo,
   IToolConfiguration,
   IWorkerInterfaceValues,
@@ -83,6 +87,7 @@ export default class AnnotationWorkerMenu extends Vue {
 
   fetchingWorkerInterface: boolean = false;
   running: boolean = false;
+  currentJob: IComputeJob | null = null;
   previousRunStatus: boolean | null = null;
   progressInfo: IProgressInfo = {};
 
@@ -116,13 +121,14 @@ export default class AnnotationWorkerMenu extends Vue {
     this.propertyStore.setDisplayWorkerPreview(value);
   }
 
-  compute() {
+  async compute() {
     if (this.running) {
       return;
     }
     this.running = true;
+    this.currentJob = null;
     this.previousRunStatus = null;
-    this.annotationsStore.computeAnnotationsWithWorker({
+    this.currentJob = await this.annotationsStore.computeAnnotationsWithWorker({
       tool: this.tool,
       workerInterface: this.interfaceValues,
       progress: this.progressInfo,
@@ -134,6 +140,14 @@ export default class AnnotationWorkerMenu extends Vue {
     });
   }
 
+  cancel() {
+    const jobId = this.currentJob?.jobId;
+    if (!jobId) {
+      return;
+    }
+    this.store.api.cancelJob(jobId);
+  }
+
   preview() {
     this.propertyStore.requestWorkerPreview({
       image: this.image,

src/store/GirderAPI.ts

@@ -570,6 +570,10 @@ export default class GirderAPI {
     });
   }
 
+  cancelJob(jobId: string) {
+    return this.client.put(`/job/${jobId}/cancel`);
+  }
+
   async scheduleHistogramCache(datasetId: string) {
     const largeImageItems = await this.getImages(datasetId);
     const responses = [];

src/store/annotation.ts

@@ -700,6 +700,7 @@ export class Annotations extends VuexModule {
     callback: (success: boolean) => void;
   }) {
     if (!main.dataset || !main.configuration) {
+      callback(false);
       return null;
     }
     const datasetId = main.dataset.id;
@@ -723,6 +724,7 @@ export class Annotations extends VuexModule {
     // Keep track of running jobs
     const jobId = response.data[0]?._id;
     if (!jobId) {
+      callback(false);
       return null;
     }
     const computeJob: IComputeJob = {