feat(website): Add new form to submit individual sequences

docs/src/content/docs/for-users/submit-sequences.md

@@ -4,6 +4,20 @@ title: Submit sequences
 
 You can only upload sequences if you already have an account and [are part of a submitting group](../create-manage-groups/).
 
+You can submit sequences either through uploading files or entering sequence metadata on the website directly.
+Submission for the website form is only recommended for uploading a single sequence, for multiple sequences you should use bulk submission with file upload.
+
+## Submit a single sequence through the form
+
+1. Log into your account, and then click 'Submit' in the top-right corner of the website.
+2. Select the organism that you'd like to submit sequences for.
+3. Click on 'Submit single sequence'.
+4. Enter the metadata information about your sequence, as well as the unaligned nucleotide sequence(s).
+5. If Terms of Use are enabled for your Loculus instance: Select the Terms of Use that you would like for your data.
+6. Select 'Submit sequences' at the bottom of the page.
+
+## Submit sequences via file upload
+
 Before you begin this process, you should ensure your data is in the correct format. Each sequence should have a unique submissionID that can be used to associate it with its corresponding metadata entry.
 
 Loculus expects:
@@ -13,23 +27,23 @@ Loculus expects:
 
 ![Metadata template.](../../../assets/MetadataTemplate.png)
 
-## Multi-segmented Pathogens
+### Multi-segmented Pathogens
 
 Loculus expects multi-segmented pathogens to have one unique submissionID per **isolate** (pathogen sample containing all segments). However, `fasta` files should still have a separate entry/record per segment. Therefore, each record id should include the unique submissionID of the isolate and the segment name, for example: `submissionID + '_' + segmentName`. The metadata is uploaded per isolate, i.e. there will be only one row for each `submissionID` and segmented metadata parameters need to be uploaded individually, i.e. under `length_{segmentName}` etc.
 
-## Website
+### Website
 
-Uploading sequences via the website is a easy way to submit sequences without having to worry about any code.
+Uploading sequences via the website is an easy way to submit sequences without having to worry about any code.
 
-1. Log into your account, and then click 'Submit' in the top-right corner of the website
-2. Select the organism that you'd like to submit sequences for
-3. Drag-and-drop a `fasta` file with the sequences and a metadata file with the associated metadata into the box on the website, or click the 'Upload a file' link within the boxes to open a file-selection box
-4. If Terms of Use are enabled for your Loculus instance: Select the Terms of Use that you would like for your data
-5. Select 'Submit sequences' at the bottom of the page
+1. Log into your account, and then click 'Submit' in the top-right corner of the website.
+2. Select the organism that you'd like to submit sequences for.
+3. Drag-and-drop a `fasta` file with the sequences and a metadata file with the associated metadata into the box on the website, or click the 'Upload a file' link within the boxes to open a file-selection box.
+4. If Terms of Use are enabled for your Loculus instance: Select the Terms of Use that you would like for your data.
+5. Select 'Submit sequences' at the bottom of the page.
 
 The data will now be processed, and you will have to approve your submission before it is finalized. You can see how to do this [here](../approve-submissions/).
 
-## API
+### API
 
 It is possible to upload sequences through an HTTP API. We also plan to release a command-line interface soon.
 
@@ -63,6 +77,6 @@ Further information can be found in the API documentation of the instance.
 
 As with the website, data will now be processed, and you will have to approve your submission before it is finalized. You can see how to do this [here](../approve-submissions/).
 
-## Compressing files
+### Compressing files
 
 For both sequence and metadata files, compression is supported. The supported formats are: `zip`, `gz` (gzip), `zst` (ZStandard) and `xz` (LZMA). (Note that Excel file uploads with `xz` compression are currently not supported.)

integration-tests/README.md

@@ -1,6 +1,6 @@
 # Integration tests
 
-These are tests of the full Loculus system, following sequences through submission to preprocessing to release.
+These are tests of the full Loculus system, following sequences through submission to preprocessing to release in the browser, using Playwright.
 
 ## Principles
 
@@ -13,3 +13,20 @@ Here are some current guiding principles for these tests:
 There are some fixtures to help with the development of tests:
 - `pageWithACreatedUser` creates a user account and logs into it
 - `pageWithGroup` inherits from `pageWithACreatedUser` and in addition creates a group for the user
+
+## Running the tests
+
+### Initial Setup
+
+Install dependencies:
+
+    npm ci
+    npx playwright install --with-deps
+
+Set up the cluster to test:
+
+    ./start-server.sh
+
+Run the tests:
+
+    npx playwright test

integration-tests/package.json

@@ -9,7 +9,7 @@
   "description": "",
   "devDependencies": {
     "@playwright/test": "^1.48.2",
-    "@types/node": "^22.8.3",
+    "@types/node": "^22.13.4",
     "@types/uuid": "^10.0.0",
     "uuid": "^11.0.2"
   }

integration-tests/tests/specs/features/submission-flow.spec.ts

@@ -3,7 +3,15 @@ import { test } from '../../fixtures/group.fixture';
 import { join } from 'path';
 
 test.describe('Submission flow', () => {
-  test('basic submission flow works', async ({ pageWithGroup }) => {
+  test('submission page shows group creation button when not in a group', async ({ pageWithACreatedUser }) => {
+    test.setTimeout(10000);
+    const page = pageWithACreatedUser;
+    await page.getByRole('link', { name: 'Loculus' }).click();
+    await page.getByRole('link', { name: 'Submit' }).click();
+    await page.getByRole('link', { name: 'create a submitting group' }).click();
+  });
+
+  test('basic file upload submission flow works', async ({ pageWithGroup }) => {
     test.setTimeout(90000);
     const page = pageWithGroup;
 
@@ -23,6 +31,9 @@ test.describe('Submission flow', () => {
     await page.getByLabel('I confirm I have not and will').check();
 
     await page.getByRole('button', { name: 'Submit sequences' }).click();
+
+    await expect(page.getByRole('heading', { name: 'Review current submissions' })).toBeVisible();
+
     await page.getByRole('button', { name: 'Release 1 valid sequence' }).click();
     await page.getByRole('button', { name: 'Release', exact: true }).click();
     await page.getByRole('link', { name: 'Released Sequences' }).click();
@@ -33,6 +44,43 @@ test.describe('Submission flow', () => {
     await page.getByRole('cell', { name: 'Pakistan' }).click();
     await page.waitForSelector('text="test_NIHPAK-19"');
     await page.waitForSelector('text="NC_005302.1"'); // reference
+  });
+
+  test('basic form submission flow works', async ({ pageWithGroup }) => {
+    test.setTimeout(90000);
+    const page = pageWithGroup;
+
+    await page.getByRole('link', { name: 'Loculus' }).click();
+    await page.getByRole('link', { name: 'Submit' }).click();
+    await page.getByRole('link', { name: 'Crimean-Congo Hemorrhagic Fever Virus' }).click();
+    await page.getByRole('link', { name: 'Submit Upload New Sequences' }).click();
+    await page.getByRole('link', { name: 'Submit single sequence' }).click();
+
+    await page.getByLabel(/Submission ID/).fill('XF499');
+    await page.getByLabel(/Collection country/).fill('Colombia');
+    await page.getByLabel(/Collection date/).fill('2012-12-12');
+    await page.getByLabel("L:", { exact: true }).fill("CCACATTGACACAGANAGCTCCAGTAGTGGTTCTCTGTCCTTATTAAACCATGGACTTCTTAAGAAACCTTGACTGGACTCAGGTGATTGCTAGTCAGTATGTGACCAATCCCAGGTTTAATATCTCTGATTACTTCGAGATTGTTCGACAGCCTGGTGACGGGAACTGTTTCTACCACAGTATAGCTGAGTTAACCATGCCCAACAAAACAGATCACTCATACCATAACATCAAACATCTGACTGAGGTGGCAGCACGGAAGTATTATCAGGAGGAGCCGGAGGCTAAGCTCATTGGCCTGAGTCTGGAAGACTATCTTAAGAGGATGCTATCTGACAACGAATGGGGATCGACTCTTGAGGCATCTATGTTGGCTAAGGAAATGGGTATTACTATCATCATTTGGACTGTTGCAGCCAGTGACGAAGTGGAAGCAGGCATAAAGTTTGGTGATGGTGATGTGTTTACAGCCGTGAATCTTCTGCACTCCGGACAGACACACTTTGATGCCCTCAGAATACTGCCNCANTTTGAGGCTGACACAAGAGAGNCCTTNAGTCTGGTAGACAANNTNATAGCTGTGGACCANNTGACCTCNTCTTCAAGTGATGAANTGCAGGACTANGAAGANCTTGCTTTAGCACTTACNAGNGCGGAAGAACCATNTAGACGGTCTAGCNTGGATGAGGTNACCCTNTCTAAGAAACAAGCAGAGNTATTGAGGCAGAAGGCATCTCAGTTGTCNAAACTGGTTAATAAAAGTCAGAACATACCGACTAGAGTTGGCAGGGTTCTGGACTGTATGTTTAACTGCAAACTATGTGTTGAAATATCAGCTGACACTCTAATTCTGCGACCAGAATCTAAAGAAAGAATTGG");
+    await page.getByLabel("M:", { exact: true }).fill("GTGGATTGAGCATCTTAATTGCAGCATACTTGTCAACATCATGCATATATCATTGATGTATGCAGTTTTCTGCTTGCAGCTGTGCGGTCTAGGGAAAACTAACGGACTACACAATGGGACTGAACACAATAAGACACACGTTATGACAACGCCTGATGACAGTCAGAGCCCTGAACCGCCAGTGAGCACAGCCCTGCCTGTCACACCGGACCCTTCCACTGTCACACCTACAACACCAGCCAGCGGATTAGAAGGCTCAGGAGAGGTTCACACATCCTCTCCAATCACCACCAAGGGTTTGTCTCTGCCGGGGGCTACATCTGAGCTCCCTGCGACTACTAGCATAGTCACTTCAGGTGCAAGTGATGCCGATTCTAGCACACAGGCAGCCAGAGACACCCCTAAACCATCAGTCCGCACGAGTCTGCCCAACAGCCCTAGCACACCATCCACACCACAAGGCACACACCATCCCGTGAGGAGTCTGCTTTCAGTCACGAGCCCTAAGCCAGAAGAAACACCAACACCGTCAAAATCAAGCAAAGATAGCTCAGCAACCAACAGTCCTCACCCAGCCGCCAGCAGACCAACAACCCCTCCCACAACAGCCCAGAGACCCGCTGAAAACAACAGCCACAACACCACCGAACAGCTTGAGTCCTTAACACAATTAGCAACTTCAGGTTCAATGATCTCTCCAACACAGACAGTCCTCCCAAAGAGTGTTACTTCTATAGCCATTCAAGACATTCATCCCAGCCCAACAAATAGGTCTAAAAGAAACCTTGATATGGAAATAATCT");
+    await page.getByLabel("S:", { exact: true }).fill("GTGTTCTCTTGAGTGTTGGCAAAATGGAAAACAAAATCGAGGTGAACAACAAAGATGAGATGAACAAATGGTTTGAGGAGTTCAAGAAAGGAAATGGACTTGTGGACACTTTCACAAACTCNTATTCCTTTTGTGAAAGCGTNCCAAATCTGGACAGNTTTGTNTTCCAGATGGCNAGTGCCACTGATGATGCACAAAANGANTCCATCTACGCATCTGCNCTGGTGGANGCAACCAAATTTTGTGCACCTATATACGAGTGTGCTTGGGCTAGCTCCACTGGCATTGTTAAAAAGGGACTGGAGTGGTTCGAGAAAAATGCAGGAACCATTAAATCCTGGGATGAGAGTTATACTGAGCTTAAAGTTGAAGTTCCCAAAATAGAACAACTCTCCAACTACCAGCAGGCTGCTCTCAAATGGAGAAAAGACATAGGCTTCCGTGTCAATGCAAATACGGCAGCTTTGAGTAACAAAGTCCTAGCAGAGTACAAAGTTCCTGGCGAGATTGTAATGTCTGTCAAAGAGATGTTGTCAGATATGATTAGAAGNAGGAACCTGATTCTCAACAGAGGTGGTGATGAGAACCCACGCGGCCCAGTTAGCCGTGAACATGTGGAGTGGTGC");
+
+    await page.getByLabel('I confirm that the data').check();
+    await page.getByLabel('I confirm I have not and will').check();
+
+    await page.getByRole('button', { name: 'Submit sequences' }).click();
+
+    await expect(page.getByRole('heading', { name: 'Review current submissions' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Release 1 valid sequence' }).click();
+    await page.getByRole('button', { name: 'Release', exact: true }).click();
+    await page.getByRole('link', { name: 'Released Sequences' }).click();
+
+    await page.waitForTimeout(35000);
+    await page.reload();
 
+    await page.getByRole('cell', { name: 'Colombia' }).click();
+    await page.waitForSelector('text="2012-12-12"');
+    await page.waitForSelector('text="NC_005301.3"'); // reference
+    await page.waitForSelector('text="NC_005300.2"');
+    await page.waitForSelector('text="NC_005302.1"');
   });
 });

integration-tests/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  }
+}

website/src/components/Edit/DataRow.tsx

@@ -19,17 +19,15 @@ export const EditableDataRow: FC<EditableRowProps> = ({ label, inputField, row,
 
     return (
         <tr className='table-fixed w-full'>
-            <div>
-                <td className={`w-1/4 relative ${colorClassName}`} data-tooltip-id={'field-tooltip' + row.key}>
-                    {`${label ?? row.key}:`}
-                </td>
+            <td className={`w-1/4 relative ${colorClassName}`} data-tooltip-id={'field-tooltip' + row.key}>
+                <label htmlFor={row.key}>{`${label ?? row.key}:`}</label>
                 <Tooltip
                     id={'field-tooltip' + row.key}
                     place='bottom-start'
                     content={content}
                     className='absolute z-50 top-full left-0 mt-1'
                 />
-            </div>
+            </td>
             <td className='pr-3 text-right '>
                 <ErrorAndWarningIcons row={row} />
             </td>

website/src/components/Edit/EditPage.spec.tsx

@@ -76,20 +76,14 @@ describe('EditPage', () => {
         expectTextInSequenceData.originalMetadata(defaultReviewData.originalData.metadata);
     });
 
-    test('should show original data and processed data', () => {
+    test('should show original data', () => {
         renderEditPage();
 
         expect(screen.getByText(/Original Data/i)).toBeInTheDocument();
         expectTextInSequenceData.originalMetadata(defaultReviewData.originalData.metadata);
 
         expect(screen.getAllByText(/Unaligned nucleotide sequences/i)[0]).toBeInTheDocument();
         expectTextInSequenceData.original(defaultReviewData.originalData.unalignedNucleotideSequences);
-
-        expect(screen.getByText('processedInsertionSequenceName:')).toBeInTheDocument();
-        expect(screen.getByText('nucleotideInsertion1,nucleotideInsertion2')).toBeInTheDocument();
-
-        expect(screen.getByText('processedInsertionGeneName:')).toBeInTheDocument();
-        expect(screen.getByText('aminoAcidInsertion1,aminoAcidInsertion2')).toBeInTheDocument();
     });
 
     test('should show error and warning tooltips', () => {