Add polling for VEP submission status (#1157)

* Enabled redux action listener middleware
* Created a dedicated class responsible for the polling of the submission status endpoint
  - A class method that adds a submission to the polling queue is called from redux action listener middleware
  - Added tests to demonstrate the behaviour of the polling
* The list of VEP submissions is displayed in reverse chronological order
* VEP launchbar button indicates that there are running or unviewed submissions

src/content/app/tools/vep/components/vep-submission-header/VepSubmissionHeader.tsx

@@ -17,8 +17,12 @@
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 
+import { useAppDispatch } from 'src/store';
+
 import { getFormattedDateTime } from 'src/shared/helpers/formatters/dateFormatter';
 
+import { deleteSubmission } from 'src/content/app/tools/vep/state/vep-submissions/vepSubmissionsSlice';
+
 import TextButton from 'src/shared/components/text-button/TextButton';
 import ButtonLink from 'src/shared/components/button-link/ButtonLink';
 import DeleteButton from 'src/shared/components/delete-button/DeleteButton';
@@ -62,17 +66,19 @@ const VepSubmissionHeader = (props: Props) => {
   );
 };
 
-// eslint-disable-next-line  -- FIXME use the props for the buttons
 const ControlButtons = (props: Props) => {
-  const {
-    submission: { status }
-  } = props;
+  const { submission } = props;
+  const dispatch = useAppDispatch();
 
-  const canGetResults = status === 'SUCCEEDED';
+  const canGetResults = submission.status === 'SUCCEEDED';
+
+  const onDelete = () => {
+    dispatch(deleteSubmission({ submissionId: submission.id }));
+  };
 
   return (
     <div className={styles.controls}>
-      <DeleteButton />
+      <DeleteButton onClick={onDelete} />
       <DownloadButton onClick={noop} disabled={!canGetResults} />
       <ButtonLink isDisabled={!canGetResults} to="/">
         Results

src/content/app/tools/vep/components/vep-submit-button/VepSubmitButton.tsx

@@ -115,6 +115,7 @@ const preparePayload = async ({
   }
 
   return {
+    submission_id: submissionId,
     genome_id: species.genome_id,
     input_file: inputFile as File,
     parameters: JSON.stringify(parameters)

src/content/app/tools/vep/services/vepStorageService.test.ts

@@ -28,6 +28,7 @@ import {
   saveVepSubmission,
   getVepSubmission,
   updateVepSubmission,
+  changeVepSubmissionId,
   getUncompletedVepSubmission,
   getVepSubmissions,
   deleteVepSubmission,
@@ -134,6 +135,44 @@ describe('vepStorageService', () => {
     });
   });
 
+  describe('changeVepSubmissionId', () => {
+    it('updates the submission and stores it under new key', async () => {
+      // arrange
+      const oldSubmissionId = 'old-id';
+      const oldSubmissionStatus = 'SUBMITTING';
+      const newSubmissionId = 'new-id';
+      const newSubmissionStatus = 'SUBMITTED';
+      const submission = createVepSubmission({
+        fragment: {
+          id: oldSubmissionId,
+          status: oldSubmissionStatus
+        }
+      });
+      await saveVepSubmission(submission);
+
+      // act
+      await changeVepSubmissionId(oldSubmissionId, newSubmissionId, {
+        status: newSubmissionStatus
+      });
+
+      // assert
+      const db = await IndexedDB.getDB();
+      const oldSubmission = await db.get(
+        VEP_SUBMISSIONS_STORE_NAME,
+        oldSubmissionId
+      );
+      const newSubmission = await db.get(
+        VEP_SUBMISSIONS_STORE_NAME,
+        newSubmissionId
+      );
+
+      expect(oldSubmission).toBeFalsy();
+      expect(newSubmission).toBeTruthy();
+      expect(newSubmission.id).toBe(newSubmissionId);
+      expect(newSubmission.status).toBe(newSubmissionStatus);
+    });
+  });
+
   describe('getUncompletedVepSubmission', () => {
     it('retrieves VEP submission data that have not yet been submitted', async () => {
       // arrange

src/content/app/tools/vep/services/vepStorageService.ts

@@ -77,6 +77,36 @@ export const updateVepSubmission = async (
   await saveVepSubmission(updatedSubmission);
 };
 
+/**
+ * The purpose of this function is to change the id of a submission,
+ * which should only happen when the client submits VEP form data
+ * (which is stored in the browser under temporary client-side-generated id),
+ * and receives from the server a permanent id associated with this submission.
+ */
+export const changeVepSubmissionId = async (
+  oldId: string,
+  newId: string,
+  fragment: Partial<VepSubmission> = {}
+) => {
+  const db = await IndexedDB.getDB();
+
+  // Update submission, save it under a new id, and delete the submission stored under old id,
+  // all in one transaction.
+  const transaction = db.transaction(STORE_NAME, 'readwrite');
+  const store = transaction.store;
+
+  const storedSubmission: VepSubmission = await store.get(oldId);
+  const updatedSubmission = {
+    ...storedSubmission,
+    id: newId,
+    ...fragment
+  };
+  await store.put(updatedSubmission, newId);
+  await store.delete(oldId);
+
+  await transaction.done;
+};
+
 // Returns the data for a VEP submission that the user is still preparing and has not yet submitted.
 // There should only ever be one such submission.
 export const getUncompletedVepSubmission = async () => {
@@ -133,7 +163,7 @@ export const deleteVepSubmission = async (submissionId: string) => {
 
 export const deleteExpiredVepSubmissions = async () => {
   const db = await IndexedDB.getDB();
-  // Delete all expired BLAST jobs in one transaction
+  // Delete all expired VEP jobs in one transaction
   const transaction = db.transaction(STORE_NAME, 'readwrite');
   for await (const cursor of transaction.store) {
     const submission: VepSubmission = cursor.value;

src/content/app/tools/vep/state/vep-action-listeners/vepActionListeners.ts

@@ -0,0 +1,118 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type PayloadAction } from '@reduxjs/toolkit';
+
+import { vepFormSubmit } from 'src/content/app/tools/vep/state/vep-api/vepApiSlice';
+import {
+  updateSubmission,
+  changeSubmissionId,
+  deleteSubmission
+} from 'src/content/app/tools/vep/state/vep-submissions/vepSubmissionsSlice';
+
+import VepSubmissionStatusPolling from 'src/content/app/tools/vep/state/vep-action-listeners/vepSubmissionStatusPolling';
+
+import type {
+  AppStartListening,
+  AppListenerEffectAPI
+} from 'src/listenerMiddleware';
+
+/**
+ * 1. Change submission id from the temporary client-side one to the permanentt one assigned by the server
+ *   - In Redux
+ *   - In indexedDB
+ * 2. Change submission status:
+ *   - SUBMITTED if submitted
+ *   - UNSUCCESSFUL_SUBMISSION if failed to submit
+ * 3. Start polling for submission status
+ *   - SUBMITTED — continue polling
+ *   - RUNNING - update status (in redux and in indexedDB); but continue polling
+ *   - SUCCEEDED, FAILED, CANCELLED - update status (in redux and in indexedDB), and stop polling
+ * 4. Note that user can refresh (or close/open) the browser while there are still some submissions pending.
+ *    Therefore, listen to the restore VEP submissions event, filter unfinished submissions, and poll for their status.
+ * 5. Note that user can delete a submission while polling is still in progress.
+ *    Thus, listen to delete submission actions, and remove deleted submissions from polling.
+ */
+
+const vepSubmissionStatusPolling = new VepSubmissionStatusPolling();
+
+const vepFormSuccessfulSubmissionListener = {
+  matcher: vepFormSubmit.matchFulfilled,
+  effect: async (
+    action: PayloadAction<{
+      old_submission_id: string;
+      new_submission_id: string;
+    }>,
+    listenerApi: AppListenerEffectAPI
+  ) => {
+    const { dispatch } = listenerApi;
+    const { old_submission_id, new_submission_id } = action.payload;
+    await dispatch(
+      changeSubmissionId({
+        oldId: old_submission_id,
+        newId: new_submission_id,
+        fragment: { status: 'SUBMITTED' }
+      })
+    );
+
+    vepSubmissionStatusPolling.enqueueSubmission({
+      submission: {
+        id: new_submission_id,
+        status: 'SUBMITTED'
+      },
+      dispatch
+    });
+  }
+};
+
+const vepFormUnsuccessfulSubmissionListener = {
+  matcher: vepFormSubmit.matchRejected,
+  effect: async (
+    action: PayloadAction<{
+      submission_id: string;
+    }>,
+    listenerApi: AppListenerEffectAPI
+  ) => {
+    const { dispatch } = listenerApi;
+    const { submission_id } = action.payload;
+
+    await dispatch(
+      updateSubmission({
+        submissionId: submission_id,
+        fragment: { status: 'UNSUCCESSFUL_SUBMISSION' }
+      })
+    );
+  }
+};
+
+const vepSubmissionDeleteListener = {
+  actionCreator: deleteSubmission.fulfilled,
+  effect: async (
+    action: PayloadAction<{
+      submissionId: string;
+    }>
+  ) => {
+    const { submissionId } = action.payload;
+    vepSubmissionStatusPolling.removeSubmission(submissionId);
+  }
+};
+
+export const startVepListeners = (startListening: AppStartListening) => {
+  // startListening(vepFormConfigQueryListener);
+  startListening(vepFormSuccessfulSubmissionListener);
+  startListening(vepFormUnsuccessfulSubmissionListener as any);
+  startListening(vepSubmissionDeleteListener);
+};