Make the cancel button in the UI work. (#1162)

<img width="983" alt="image"
src="https://github.com/lilacai/lilac/assets/1100749/1e7c5530-a8cf-4b1e-8c96-1aa02b03992c">

Demo soon: https://huggingface.co/spaces/lilacai/nikhil_staging

Author: Nikhil Thorat

lilac/tasks.py

@@ -101,7 +101,7 @@ def manifest(self) -> TaskManifest:
     tasks_with_progress = [
       (task.total_progress / task.total_len)
       for task in self._task_info.values()
-      if task.total_progress and task.total_len and task.status != TaskStatus.COMPLETED
+      if task.total_progress and task.total_len and task.status == TaskStatus.PENDING
     ]
     return TaskManifest(
       tasks=self._task_info,

web/blueprint/src/lib/components/TaskStatus.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import {queryAuthInfo} from '$lib/queries/serverQueries';
-  import {queryTaskManifest} from '$lib/queries/taskQueries';
-  import {Loading, Popover, ProgressBar} from 'carbon-components-svelte';
+  import {cancelTaskMutation, queryTaskManifest} from '$lib/queries/taskQueries';
+  import {Loading, Modal, Popover, ProgressBar} from 'carbon-components-svelte';
   import type {ProgressBarProps} from 'carbon-components-svelte/types/ProgressBar/ProgressBar.svelte';
+  import {CloseFilled} from 'carbon-icons-svelte';
   import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
   import {hoverTooltip} from './common/HoverTooltip';
 
@@ -21,9 +22,19 @@
   const taskToProgressStatus: {[taskStatus: string]: ProgressBarProps['status']} = {
     pending: 'active',
     completed: 'finished',
-    error: 'error'
+    error: 'error',
+    cancelled: 'error'
   };
 
+  const cancelTask = cancelTaskMutation();
+  let cancelTaskId: string | undefined = undefined;
+  let cancelTaskName: string | undefined = undefined;
+  function cancelTaskAccepted() {
+    if (cancelTaskId == null) return;
+    $cancelTask.mutate([cancelTaskId]);
+    cancelTaskId = undefined;
+  }
+
   const authInfo = queryAuthInfo();
   $: canRunTasks =
     $authInfo.data?.access.dataset.compute_signals || $authInfo.data?.access.create_dataset;
@@ -78,12 +89,22 @@
               task.total_progress != null && task.total_len != null
                 ? task.total_progress / task.total_len
                 : undefined}
-            {@const message = task.error ?? task.message}
+            {@const message =
+              task.status != 'cancelled' ? task.error ?? task.message : 'Task cancelled.'}
             <div class="relative border-b-2 border-slate-200 p-4 text-left last:border-b-0">
-              <div class="text-s flex flex-row">
+              <div class="text-s flex flex-row items-center">
                 <div class="mr-2">{task.name}</div>
+                {#if task.status === 'pending'}
+                  <div use:hoverTooltip={{text: 'Cancel task'}}>
+                    <button
+                      on:click|stopPropagation={() => {
+                        cancelTaskId = id;
+                        cancelTaskName = task.name;
+                      }}><CloseFilled /></button
+                    >
+                  </div>
+                {/if}
               </div>
-              <button>Cancel button</button>
               <div class="progress-container mt-3">
                 <ProgressBar
                   labelText={message || ''}
@@ -102,6 +123,25 @@
   </div>
 {/if}
 
+<Modal
+  size="xs"
+  open={cancelTaskId != null}
+  modalHeading="Cancel task"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  selectorPrimaryFocus=".bx--btn--primary"
+  on:submit={() => cancelTaskAccepted()}
+  on:click:button--secondary={() => {
+    cancelTaskId = undefined;
+  }}
+  on:close={(cancelTaskId = undefined)}
+>
+  <div class="italic">
+    {cancelTaskName}
+  </div>
+  <p class="mt-4">Are you sure you want to cancel this task?</p>
+</Modal>
+
 <style lang="postcss">
   :global(.progress-container .bx--progress-bar__label) {
     @apply text-xs;

web/blueprint/src/lib/queries/taskQueries.ts

@@ -1,5 +1,5 @@
 import {TasksService} from '$lilac';
-import {createApiQuery} from './queryUtils';
+import {createApiMutation, createApiQuery} from './queryUtils';
 
 export const TASKS_TAG = 'tasks';
 
@@ -9,3 +9,5 @@ export const queryTaskManifest = createApiQuery(TasksService.getTaskManifest, TA
   refetchIntervalInBackground: false,
   refetchOnWindowFocus: true
 });
+
+export const cancelTaskMutation = createApiMutation(TasksService.cancelTask);