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

fhennig · 2025-02-18T10:36:23Z

resolves #3226
resolves #3722

preview URL: https://submission-via-form.loculus.org/dummy-organism/submission/2/submit?inputMode=form

updated docs page: https://docs-submission-via-form.loculus.org/for-users/submit-sequences/

Summary

Adds a new inputMode URL param to the submit endpoint with values form and bulk. If it is omitted, we default back to the 'bulk' variant.
There is a tab-style selector for bulk vs form submission (see screenshot below)
Fixed a mini hydration bug where a td was nested in a div
Drop mention of specific data use terms from Acknowledgement section ('Revise' page incorrectly states open data use terms. #3722)
Small improvement also for the edit form: internally generated TSV file now uses a library with escaping etc instead of pure string interpolation.

Tests

Add new tests for SubmissionRouteUtils
Added new tests for the input form (FormOrUploadWrapper.spec.tsx). Test that errors are raised when files or form input is missing. Test that all of the form that gets included in the TSV and also that escaping works.
Expanded SubmissionForm tests - submit not only via files, but also via form for some cases.
New integration test that submits a sequence via the form

Implementation notes

The Edit form as well as the file upload section of the submission form have been extracted into dedicated components
A new FormOrUploadWrapper wraps both and makes it easy to switch between them, returning just files which can then be used for uploading
Submission form allows manually entering a Submission ID - this is implemented by allowing all noEdit fields to be in fact edited on initial submission - AFAICT this was only used for submission ID and accession (only the submission ID is shown in the 'submit' form).

Screenshot

PR Checklist

All necessary documentation has been adapted.
The implemented feature is covered by an appropriate test.

website/src/components/Submission/FileUpload/FileUploadComponent.tsx

rneher · 2025-02-23T15:32:01Z

just quickly tested this. I think that it is a bit surprising to land on the submission form for a single sequence by default. I would keep the default as the file upload and suggest that prominent button something with something like "Single sequence submission via form" takes you to the form.

rneher · 2025-02-23T15:34:11Z

also. looks like the fields don't accept long enough entries

Probably better as a wrapping text field.

website/src/components/Submission/FileUpload/SequenceEntryUploadComponent.tsx

theosanderson · 2025-02-23T23:42:49Z

also. looks like the fields don't accept long enough entries

I couldn't reproduce this - my theory is it must have been about some field rather than the sequences

Probably better as a wrapping text field.

These text fields for sequences are definitely really problematic. I mostly of think they should in the more final version be file upload components (for the one segment). Copying and pasting sequences feels generally bad practice?

theosanderson · 2025-02-23T23:43:43Z

I made some UX suggestions at https://subform2.loculus.org/cchf/submission/1/submit (username: superuser, pw: superuser) for some future version of this (some after this PR), which I've also mentioned on Slack.

rneher · 2025-02-24T08:59:38Z

also. looks like the fields don't accept long enough entries

I couldn't reproduce this - my theory is it must have been about some field rather than the sequences

Definitely reproducible for me in CCHF

rneher · 2025-02-24T09:01:51Z

Might have been because my sequences included a fasta header. Seems to work without fasta header.

fhennig · 2025-02-24T10:26:29Z

Thanks for your input! I quite like your suggestions Theo, I think I'd maybe just merge them in?

For the sequence fields, maybe we can look into doing already client-side validation, so the users can't submit incorrect characters - or at least, showhow show a better error message.

theosanderson · 2025-02-24T11:10:15Z

Might have been because my sequences included a fasta header. Seems to work without fasta header.

OK yeah so I think what's happening here is that the whole sequence is being interpreted as the FASTA header

My own preferred way forward on this (and related issues) would be to create a new high priority issue to change all these sequence input text-boxes to upload-a-fasta-file-with-a-single-sequence components.

fhennig · 2025-02-24T16:06:06Z

Since this PR is already quite large, I have made an issue for follow up changes to the form itself: #3740

I want to keep this PR to just the initial creation of the single-sequence submission feature, and the refactoring of the internal components.

IMO it'll be easier to review that way.

website/src/components/Edit/EditPage.tsx

website/src/components/Edit/InputForm.tsx

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

theosanderson · 2025-02-25T11:45:54Z

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

+
+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'.


(we should update this)

website/src/components/Submission/DataUploadForm.tsx

Co-authored-by: Theo Sanderson <[email protected]>

theosanderson · 2025-02-25T23:38:13Z

website/src/components/Submission/SubmissionPageWrapper.astro

@@ -6,10 +6,11 @@ import NeedToLogin from '../common/NeedToLogin.astro';

 interface Props {
    title: string;
+    disablePageTitle?: boolean;


nbd but I guess this may not be needed any more? But it's fine if you want to keep it anyway

theosanderson · 2025-02-25T23:43:59Z

website/src/components/Submission/FormOrUploadWrapper.tsx

+ * In 'form' mode, a form is displayed, and the user can directly enter stuff into the form to upload their
+ * metadata. In 'bulk' mode, the user needs to upload files containing the sequences and metadata.
+ * Either way, the component turns the uploaded data into files, so they can be submitted to the API.
+ * Set the 'fileCreatorSetter' to get the files - have a look at existing usage on how this works.


Should this be setFileFactory ?

theosanderson · 2025-02-25T23:49:56Z

website/src/components/Submission/FormOrUploadWrapper.tsx

+    const [columnMapping, setColumnMapping] = useState<ColumnMapping | null>(null);
+
+    useEffect(() => {
+        setFileFactory(() => {


I'm not sure I really understand this (which isn't a huge problem). Could you explain a bit about why this works like this (in this thread, not in code necessarily)?

theosanderson · 2025-02-25T23:54:54Z

website/src/components/Submission/DataUploadForm.tsx

It would probably be nice to split some of these components into separate files

theosanderson · 2025-02-25T23:56:15Z

website/src/components/Submission/DataUploadForm.tsx

I asked a question below about why we've moved to the "factory" model but it may actuallly be easier discussed here.

theosanderson

Thanks for putting this together! Looks great

As we've discussed, the sequence input is very suboptimal (as it is on the edit page) but we want to tackle this as the next PR in this theme.

I'd like to understand why we have this slightly concept logic with a "factory" that's the main remaining thing that I'd like to get my head around

fhennig added the preview Triggers a deployment to argocd label Feb 18, 2025

fhennig self-assigned this Feb 18, 2025

fhennig marked this pull request as draft February 18, 2025 10:36

fhennig force-pushed the submission-via-form branch 2 times, most recently from 6e00612 to 5dd4bf5 Compare February 20, 2025 09:48

theosanderson reviewed Feb 20, 2025

View reviewed changes

website/src/components/Submission/FileUpload/FileUploadComponent.tsx Outdated Show resolved Hide resolved

fhennig force-pushed the submission-via-form branch from 1a4178f to f52fc56 Compare February 21, 2025 13:00

theosanderson reviewed Feb 23, 2025

View reviewed changes

website/src/components/Submission/FileUpload/SequenceEntryUploadComponent.tsx Outdated Show resolved Hide resolved

fhennig force-pushed the submission-via-form branch from 74a7377 to 5b00d6a Compare February 24, 2025 10:20

fhennig force-pushed the submission-via-form branch from 9346e69 to 0aaf16b Compare February 24, 2025 14:37

fhennig mentioned this pull request Feb 24, 2025

feat(website): Improve design and usability of edit and single sequence upload form #3740

Open

theosanderson reviewed Feb 24, 2025

View reviewed changes

website/src/components/Edit/EditPage.tsx Show resolved Hide resolved

theosanderson reviewed Feb 24, 2025

View reviewed changes

website/src/components/Edit/InputForm.tsx Show resolved Hide resolved

theosanderson reviewed Feb 24, 2025

View reviewed changes

website/src/components/Edit/InputForm.tsx Show resolved Hide resolved

fhennig force-pushed the submission-via-form branch 2 times, most recently from 1a26723 to 7d81b49 Compare February 25, 2025 10:04

fhennig marked this pull request as ready for review February 25, 2025 10:05

fhennig added 4 commits February 25, 2025 11:33

Add routing stub

3214444

Add TODO markers

e1563d3

Pull out the form into seperate component

d66f56e

WIP

1a80b44

fhennig added 15 commits February 25, 2025 11:33

adapt integration test

84d0e5c

Use papaparse instead of string interpolation for TSV building

6560d1a

Add tests to check TSV contents

aa452a7

Let users enter a Submission ID

6733382

Better submission ID handling

ee69df9

remove justify-end

7da24e4

Fix website tests

5a8dacc

Use tabs

9c23688

use default input mode from portal

e61361a

add Submission ID to integration test (should fix)

b30b532

update docs

df1b947

use const

912e2a3

Add waiting for header to test

2b6b48f

formatting

a1a1d45

Increase timeout

167f747

fhennig force-pushed the submission-via-form branch from 7d81b49 to 167f747 Compare February 25, 2025 11:33

fhennig requested review from chaoran-chen and corneliusroemer February 25, 2025 11:34

theosanderson reviewed Feb 25, 2025

View reviewed changes

docs/src/content/docs/for-users/submit-sequences.md Outdated Show resolved Hide resolved

theosanderson reviewed Feb 25, 2025

View reviewed changes

docs/src/content/docs/for-users/submit-sequences.md Outdated Show resolved Hide resolved

theosanderson reviewed Feb 25, 2025

View reviewed changes

website/src/components/Submission/DataUploadForm.tsx Show resolved Hide resolved

fhennig and others added 2 commits February 25, 2025 12:07

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

e7b5ad0

Co-authored-by: Theo Sanderson <[email protected]>

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

93f60fa

Co-authored-by: Theo Sanderson <[email protected]>

theosanderson reviewed Feb 25, 2025

View reviewed changes

theosanderson reviewed Feb 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

fhennig commented Feb 18, 2025 •

edited

Loading

rneher commented Feb 23, 2025

rneher commented Feb 23, 2025

theosanderson commented Feb 23, 2025

theosanderson commented Feb 23, 2025

rneher commented Feb 24, 2025

rneher commented Feb 24, 2025

fhennig commented Feb 24, 2025 •

edited

Loading

theosanderson commented Feb 24, 2025 •

edited

Loading

fhennig commented Feb 24, 2025

theosanderson Feb 25, 2025

theosanderson Feb 25, 2025

theosanderson Feb 25, 2025 •

edited

Loading

theosanderson Feb 25, 2025

theosanderson Feb 25, 2025

theosanderson Feb 25, 2025

theosanderson left a comment

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

Are you sure you want to change the base?

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

Conversation

fhennig commented Feb 18, 2025 • edited Loading

Summary

Tests

Implementation notes

Screenshot

PR Checklist

rneher commented Feb 23, 2025

rneher commented Feb 23, 2025

theosanderson commented Feb 23, 2025

theosanderson commented Feb 23, 2025

rneher commented Feb 24, 2025

rneher commented Feb 24, 2025

fhennig commented Feb 24, 2025 • edited Loading

theosanderson commented Feb 24, 2025 • edited Loading

fhennig commented Feb 24, 2025

theosanderson Feb 25, 2025

Choose a reason for hiding this comment

theosanderson Feb 25, 2025

Choose a reason for hiding this comment

theosanderson Feb 25, 2025 • edited Loading

Choose a reason for hiding this comment

theosanderson Feb 25, 2025

Choose a reason for hiding this comment

theosanderson Feb 25, 2025

Choose a reason for hiding this comment

theosanderson Feb 25, 2025

Choose a reason for hiding this comment

theosanderson left a comment

Choose a reason for hiding this comment

fhennig commented Feb 18, 2025 •

edited

Loading

fhennig commented Feb 24, 2025 •

edited

Loading

theosanderson commented Feb 24, 2025 •

edited

Loading

theosanderson Feb 25, 2025 •

edited

Loading