Display message for when submission results have expired, and clear o…

…ut old submissions (#1169)

- For submissions that are 7 days and older, show message in the submissions list about unavailable results.
- At startup, delete submissions that are too old (28 days and older) from IndexedDB

src/content/app/tools/blast/components/blast-submission-header/BlastSubmissionHeader.tsx

@@ -21,6 +21,8 @@ import { useAppDispatch, useAppSelector } from 'src/store';
 
 import * as urlFor from 'src/shared/helpers/urlHelper';
 
+import { UNAVAILABLE_RESULTS_WARNING } from 'src/content/app/tools/shared/constants/displayedMessages';
+
 import { getFormattedDateTime } from 'src/shared/helpers/formatters/dateFormatter';
 import { areSubmissionResultsAvailable } from 'src/content/app/tools/blast/utils/blastResultsAvailability';
 import {
@@ -48,12 +50,12 @@ import QuestionButton from 'src/shared/components/question-button/QuestionButton
 import ShowHide from 'src/shared/components/show-hide/ShowHide';
 import TextButton from 'src/shared/components/text-button/TextButton';
 import DeletionConfirmation from 'src/shared/components/deletion-confirmation/DeletionConfirmation';
+import UnavailableResults from 'src/content/app/tools/shared/components/help-messages/UnavailableResults';
 
 import type { BlastProgram } from 'src/content/app/tools/blast/types/blastSettings';
 
 import styles from './BlastSubmissionHeader.module.css';
 
-export const UNAVAILABLE_RESULTS_WARNING = 'Results no longer available';
 export const FAILED_SUBMISSION_WARNING = 'Submission failed';
 
 export type Props = {
@@ -213,7 +215,7 @@ const ControlsSection = (props: {
         <DeleteButton onClick={onDelete} disabled={isInDeleteMode} />
         <div className={styles.errorMessage}>
           <span>{UNAVAILABLE_RESULTS_WARNING}</span>
-          <QuestionButton helpText={<UnavailableResultsHelpText />} />
+          <QuestionButton helpText={<UnavailableResults />} />
         </div>
       </div>
     );
@@ -236,20 +238,6 @@ const ControlsSection = (props: {
   }
 };
 
-const UnavailableResultsHelpText = () => (
-  <>
-    <p>Results are stored for 7 days from submission</p>
-    <p>
-      Use 'Edit/rerun' to start a new job with the same configuration as the
-      original submission
-    </p>
-    <p>
-      Configurations are stored for 28 days after submission, then removed from
-      the jobs list
-    </p>
-  </>
-);
-
 const FailedSubmissionHelpText = () => (
   <>
     <p>Unable to run this submission</p>

src/content/app/tools/blast/components/listed-blast-submission/ListedBlastSubmission.test.tsx

@@ -22,7 +22,7 @@ import userEvent from '@testing-library/user-event';
 
 import * as blastStorageService from 'src/content/app/tools/blast/services/blastStorageService';
 import { BLAST_RESULTS_AVAILABILITY_DURATION } from 'src/content/app/tools/blast/services/blastStorageServiceConstants';
-import { UNAVAILABLE_RESULTS_WARNING } from 'src/content/app/tools/blast/components/blast-submission-header/BlastSubmissionHeader';
+import { UNAVAILABLE_RESULTS_WARNING } from 'src/content/app/tools/shared/constants/displayedMessages';
 
 import ListedBlastSubmission, {
   type Props as ListedBlastSubmissionProps

src/content/app/tools/shared/components/help-messages/UnavailableResults.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+const UnavailableResults = () => (
+  <>
+    <p>Results are stored for 7 days from submission</p>
+    <p>
+      Use 'Edit/rerun' to start a new job with the same configuration as the
+      original submission
+    </p>
+    <p>
+      Configurations are stored for 28 days after submission, then removed from
+      the jobs list
+    </p>
+  </>
+);
+
+export default UnavailableResults;

src/content/app/tools/shared/constants/displayedMessages.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+export const UNAVAILABLE_RESULTS_WARNING = 'Results no longer available';

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

@@ -35,8 +35,7 @@ for ListedVepSubmission, and for the VEP results
 
 .controls {
   grid-column: controls;
-  display: grid;
-  grid-template-columns: repeat(3, min-content);
+  display: flex;
   column-gap: 42px;
   align-items: center;
   justify-self: end;
@@ -70,3 +69,12 @@ for ListedVepSubmission, and for the VEP results
 .deletionConfirmationMessage {
   color: var(--color-red);
 }
+
+/* Same as in BLAST submissions header */
+.errorMessage {
+  display: flex;
+  align-items: center;
+  column-gap: 0.6rem;
+  color: var(--color-red);
+  margin-right: 16px;
+}

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

@@ -24,6 +24,7 @@ import * as urlFor from 'src/shared/helpers/urlHelper';
 import { useAppDispatch } from 'src/store';
 
 import { getFormattedDateTime } from 'src/shared/helpers/formatters/dateFormatter';
+import { areVepSubmissionResultsExpired } from 'src/content/app/tools/vep/utils/vepResultsAvailability';
 
 import { fillVepFormWithExistingSubmissionData } from 'src/content/app/tools/vep/state/vep-form/vepFormSlice';
 import { deleteSubmission } from 'src/content/app/tools/vep/state/vep-submissions/vepSubmissionsSlice';
@@ -38,6 +39,10 @@ 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';
 import DownloadLink from 'src/shared/components/download-button/DownloadLink';
+import QuestionButton from 'src/shared/components/question-button/QuestionButton';
+import UnavailableResults from 'src/content/app/tools/shared/components/help-messages/UnavailableResults';
+
+import { UNAVAILABLE_RESULTS_WARNING } from 'src/content/app/tools/shared/constants/displayedMessages';
 
 import styles from './VepSubmissionHeader.module.css';
 
@@ -128,19 +133,35 @@ const ControlButtons = (
   const vepResultsLink = urlFor.vepResults({
     submissionId: props.submission.id
   });
-
-  return (
-    <div className={styles.controls}>
-      <DeleteButton onClick={onDelete} disabled={isDeleting} />
-      <DownloadLink
-        href={downloadLink}
-        disabled={isDeleting || !canGetResults}
-      />
-      <ButtonLink isDisabled={isDeleting || !canGetResults} to={vepResultsLink}>
-        Results
-      </ButtonLink>
-    </div>
-  );
+  const isExpiredSubmission = areVepSubmissionResultsExpired(submission);
+
+  if (isExpiredSubmission) {
+    return (
+      <div className={styles.controls}>
+        <DeleteButton onClick={onDelete} disabled={isDeleting} />
+        <div className={styles.errorMessage}>
+          <span>{UNAVAILABLE_RESULTS_WARNING}</span>
+          <QuestionButton helpText={<UnavailableResults />} />
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.controls}>
+        <DeleteButton onClick={onDelete} disabled={isDeleting} />
+        <DownloadLink
+          href={downloadLink}
+          disabled={isDeleting || !canGetResults}
+        />
+        <ButtonLink
+          isDisabled={isDeleting || !canGetResults}
+          to={vepResultsLink}
+        >
+          Results
+        </ButtonLink>
+      </div>
+    );
+  }
 };
 
 const DeletionConfirmation = (

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

@@ -41,7 +41,7 @@ import type {
  *   - SUBMITTED if submitted
  *   - UNSUCCESSFUL_SUBMISSION if failed to submit
  * 3. Start polling for submission status
- *   - SUBMITTED — continue polling
+ *   - 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.

src/content/app/tools/vep/state/vep-submissions/vepSubmissionsSlice.ts

@@ -24,7 +24,8 @@ import {
   getVepSubmissions,
   updateVepSubmission as updateStoredVepSubmission,
   deleteVepSubmission as deleteStoredVepSubmission,
-  changeVepSubmissionId as changeStoredVepSubmissionId
+  changeVepSubmissionId as changeStoredVepSubmissionId,
+  deleteExpiredVepSubmissions
 } from 'src/content/app/tools/vep/services/vepStorageService';
 
 import type { VepSubmissionWithoutInputFile } from 'src/content/app/tools/vep/types/vepSubmission';
@@ -34,6 +35,7 @@ export type VepSubmissionsState = Record<string, VepSubmissionWithoutInputFile>;
 export const restoreVepSubmissions = createAsyncThunk(
   'vep-submissions/restoreSubmissions',
   async () => {
+    await deleteExpiredVepSubmissions();
     const storedSubmissions = await getVepSubmissions();
     const newState: VepSubmissionsState = {};
     for (const submission of storedSubmissions) {

src/content/app/tools/vep/types/vepSubmission.ts

@@ -56,7 +56,7 @@ export type VepSubmission = {
   inputFile: File | null;
   submissionName: string | null;
   parameters: Record<string, unknown>;
-  createdAt: number; // <-- to allow enable the submissions list
+  createdAt: number; // <-- to enable chronological sorting of VEP submissions in the submissions list
   submittedAt: number | null; // <-- can get the unsubmitted submission
   resultsSeen: boolean;
   status: SubmissionStatus; // <-- a member of a closed dictionary of words

src/content/app/tools/vep/utils/vepResultsAvailability.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { VEP_RESULTS_AVAILABILITY_DURATION } from 'src/content/app/tools/vep/services/vepStorageServiceConstants';
+
+import type { VepSubmission } from 'src/content/app/tools/vep/types/vepSubmission';
+
+// Results of the submission will no longer be available from the backend;
+// but the submission parameters may still be available on the client; so that the submission may be resubmitted
+export const areVepSubmissionResultsExpired = (
+  submission: Pick<VepSubmission, 'submittedAt'>
+) => {
+  const { submittedAt } = submission;
+
+  if (submittedAt) {
+    return Date.now() - submittedAt > VEP_RESULTS_AVAILABILITY_DURATION;
+  }
+
+  return false;
+};