feat(website): Make multi-segmented sample submission clearer (#2395)

* Link to how-to/upload_sequences docs in info section (metadata format is linked to above metadata file and from that page) * Add submission hints for multi-segmented viruses --------- Co-authored-by: Theo Sanderson <[email protected]>
loculus-project · Aug 8, 2024 · f11acf0 · f11acf0
1 parent ff2cc49
commit f11acf0
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 3 deletions.
diff --git a/website/src/components/Submission/DataUploadForm.tsx b/website/src/components/Submission/DataUploadForm.tsx
@@ -16,6 +16,7 @@ import {
     restrictedDataUseTermsType,
     type Group,
 } from '../../types/backend.ts';
+import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import { dateTimeInMonths } from '../../utils/DateTimeInMonths.tsx';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader.ts';
@@ -32,6 +33,7 @@ type DataUploadFormProps = {
     clientConfig: ClientConfig;
     action: Action;
     group: Group;
+    referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
     onSuccess: () => void;
     onError: (message: string) => void;
 };
@@ -272,6 +274,7 @@ const InnerDataUploadForm = ({
     onSuccess,
     onError,
     group,
+    referenceGenomeSequenceNames,
 }: DataUploadFormProps) => {
     const [metadataFile, setMetadataFile] = useState<File | null>(null);
     const [sequenceFile, setSequenceFile] = useState<File | null>(null);
@@ -341,6 +344,8 @@ const InnerDataUploadForm = ({
         }
     };
 
+    const isMultiSegmented = referenceGenomeSequenceNames.nucleotideSequences.length > 1;
+
     return (
         <div className='text-left mt-3 max-w-6xl'>
             <div className='flex-col flex gap-8 divide-y'>
@@ -366,10 +371,28 @@ const InnerDataUploadForm = ({
                             for the TSV metadata file with column headings.
                         </p>
 
+                        {isMultiSegmented && (
+                            <p className='text-gray-400 text-xs mt-3'>
+                                {organism.toUpperCase()} has a multi-segmented genome. Please submit one metadata entry
+                                with a unique <i>submissionId</i> for the full multi-segmented sample, e.g.{' '}
+                                <b>sample1</b>. Sequence data should be a FASTA file with each header indicating the{' '}
+                                <i>submissionId</i> and the segment, i.e.{' '}
+                                {referenceGenomeSequenceNames.nucleotideSequences.map((name, index) => (
+                                    <span key={index} className='font-bold'>
+                                        sample1_{name}
+                                        {index !== referenceGenomeSequenceNames.nucleotideSequences.length - 1
+                                            ? ', '
+                                            : ''}
+                                    </span>
+                                ))}
+                                .
+                            </p>
+                        )}
+
                         <p className='text-gray-400 text-xs mt-3'>
                             Files can optionally be compressed, with the appropriate extension (<i>.zst</i>, <i>.gz</i>,{' '}
                             <i>.zip</i>, <i>.xz</i>). For more information please refer to our{' '}
-                            <a href='/docs/concepts/metadataformat' className='text-primary-700 opacity-90'>
+                            <a href='/docs/how-to/upload_sequences' className='text-primary-700 opacity-90'>
                                 help pages
                             </a>
                             .

diff --git a/website/src/components/Submission/RevisionForm.tsx b/website/src/components/Submission/RevisionForm.tsx
@@ -3,6 +3,7 @@ import { type FC } from 'react';
 import { DataUploadForm } from './DataUploadForm.tsx';
 import { routes } from '../../routes/routes.ts';
 import { type Group } from '../../types/backend.ts';
+import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
@@ -11,9 +12,16 @@ type RevisionFormProps = {
     organism: string;
     clientConfig: ClientConfig;
     group: Group;
+    referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
 };
 
-export const RevisionForm: FC<RevisionFormProps> = ({ accessToken, organism, clientConfig, group }) => {
+export const RevisionForm: FC<RevisionFormProps> = ({
+    accessToken,
+    organism,
+    clientConfig,
+    group,
+    referenceGenomeSequenceNames,
+}) => {
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
 
     return (
@@ -22,6 +30,7 @@ export const RevisionForm: FC<RevisionFormProps> = ({ accessToken, organism, cli
             <DataUploadForm
                 accessToken={accessToken}
                 organism={organism}
+                referenceGenomeSequenceNames={referenceGenomeSequenceNames}
                 clientConfig={clientConfig}
                 action='revise'
                 onError={openErrorFeedback}

diff --git a/website/src/components/Submission/SubmissionForm.spec.tsx b/website/src/components/Submission/SubmissionForm.spec.tsx
@@ -5,6 +5,7 @@ import { describe, expect, test, vi } from 'vitest';
 import { SubmissionForm } from './SubmissionForm';
 import { mockRequest, testAccessToken, testConfig, testGroups, testOrganism } from '../../../vitest.setup.ts';
 import type { Group, ProblemDetail, SubmissionIdMapping } from '../../types/backend.ts';
+import type { ReferenceGenomesSequenceNames, ReferenceAccession } from '../../types/referencesGenomes.ts';
 
 vi.mock('../../api', () => ({
     getClientLogger: () => ({
@@ -29,10 +30,22 @@ const group: Group = {
     contactEmail: 'email',
 };
 
+const defaultAccession: ReferenceAccession = {
+    name: 'main',
+    insdc_accession_full: undefined,
+};
+
+const defaultReferenceGenomesSequenceNames: ReferenceGenomesSequenceNames = {
+    nucleotideSequences: ['main'],
+    genes: ['gene1', 'gene2'],
+    insdc_accession_full: [defaultAccession],
+};
+
 function renderSubmissionForm() {
     return render(
         <SubmissionForm
             accessToken={testAccessToken}
+            referenceGenomeSequenceNames={defaultReferenceGenomesSequenceNames}
             organism={testOrganism}
             clientConfig={testConfig.public}
             group={group}

diff --git a/website/src/components/Submission/SubmissionForm.tsx b/website/src/components/Submission/SubmissionForm.tsx
@@ -3,6 +3,7 @@ import { type FC } from 'react';
 import { DataUploadForm } from './DataUploadForm.tsx';
 import { routes } from '../../routes/routes.ts';
 import { type Group } from '../../types/backend.ts';
+import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
@@ -11,9 +12,16 @@ type SubmissionFormProps = {
     organism: string;
     clientConfig: ClientConfig;
     group: Group;
+    referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
 };
 
-export const SubmissionForm: FC<SubmissionFormProps> = ({ accessToken, organism, clientConfig, group }) => {
+export const SubmissionForm: FC<SubmissionFormProps> = ({
+    accessToken,
+    organism,
+    clientConfig,
+    group,
+    referenceGenomeSequenceNames,
+}) => {
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
 
     return (
@@ -22,6 +30,7 @@ export const SubmissionForm: FC<SubmissionFormProps> = ({ accessToken, organism,
             <DataUploadForm
                 accessToken={accessToken}
                 organism={organism}
+                referenceGenomeSequenceNames={referenceGenomeSequenceNames}
                 clientConfig={clientConfig}
                 action='submit'
                 onError={openErrorFeedback}

diff --git a/website/src/pages/[organism]/submission/[groupId]/revise.astro b/website/src/pages/[organism]/submission/[groupId]/revise.astro
@@ -1,11 +1,22 @@
 ---
+import { cleanOrganism } from '../../../../components/Navigation/cleanOrganism';
 import { RevisionForm } from '../../../../components/Submission/RevisionForm';
 import SubmissionPageWrapper from '../../../../components/Submission/SubmissionPageWrapper.astro';
 import { getRuntimeConfig } from '../../../../config';
 import { getAccessToken } from '../../../../utils/getAccessToken';
+import { getReferenceGenomesSequenceNames } from '../../../../utils/search';
 import { getGroupsAndCurrentGroup } from '../../../../utils/submissionPages';
 
 const organism = Astro.params.organism!;
+const { organism: cleanedOrganism } = cleanOrganism(Astro.params.organism);
+
+if (!cleanedOrganism) {
+    return {
+        statusCode: 404,
+        body: 'Organism not found',
+    };
+}
+const referenceGenomeSequenceNames = getReferenceGenomesSequenceNames(cleanedOrganism.key);
 const groupsResult = await getGroupsAndCurrentGroup(Astro.params, Astro.locals.session);
 
 const clientConfig = getRuntimeConfig().public;
@@ -18,6 +29,7 @@ const clientConfig = getRuntimeConfig().public;
                 <RevisionForm
                     accessToken={getAccessToken(Astro.locals.session)!}
                     organism={organism}
+                    referenceGenomeSequenceNames={referenceGenomeSequenceNames}
                     clientConfig={clientConfig}
                     group={group}
                     client:load

diff --git a/website/src/pages/[organism]/submission/[groupId]/submit.astro b/website/src/pages/[organism]/submission/[groupId]/submit.astro
@@ -1,12 +1,24 @@
 ---
+import { cleanOrganism } from '../../../../components/Navigation/cleanOrganism';
 import { SubmissionForm } from '../../../../components/Submission/SubmissionForm';
 import SubmissionPageWrapper from '../../../../components/Submission/SubmissionPageWrapper.astro';
 import { getRuntimeConfig } from '../../../../config';
 import { getAccessToken } from '../../../../utils/getAccessToken';
+import { getReferenceGenomesSequenceNames } from '../../../../utils/search';
 import { getGroupsAndCurrentGroup } from '../../../../utils/submissionPages';
 
 const organism = Astro.params.organism!;
 
+const { organism: cleanedOrganism } = cleanOrganism(Astro.params.organism);
+
+if (!cleanedOrganism) {
+    return {
+        statusCode: 404,
+        body: 'Organism not found',
+    };
+}
+const referenceGenomeSequenceNames = getReferenceGenomesSequenceNames(cleanedOrganism.key);
+
 const groupsResult = await getGroupsAndCurrentGroup(Astro.params, Astro.locals.session);
 
 const clientConfig = getRuntimeConfig().public;
@@ -23,6 +35,7 @@ Astro.response.headers.append('Expires', '0');
             ({ currentGroup: group }) => (
                 <SubmissionForm
                     accessToken={getAccessToken(Astro.locals.session)!}
+                    referenceGenomeSequenceNames={referenceGenomeSequenceNames}
                     organism={organism}
                     clientConfig={clientConfig}
                     group={group}