feat: show spectrum preview during submission, and generally improve form

.pre-commit-config.yaml

@@ -47,6 +47,6 @@ repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: "v0.14.0"
     hooks:
-      - id: ruff
+      - id: ruff-check
         args: ["--fix", "--unsafe-fixes"]
       - id: ruff-format

backend/config/settings/test.py

@@ -23,25 +23,15 @@
 # Note: This key only used for development and testing.
 SECRET_KEY = env("DJANGO_SECRET_KEY", default="CHANGEME!!!")
 
-# DATABASE
-# ------------------------------------------------------------------------------
 # Use DATABASE_URL if set (e.g., in CI), otherwise use local test database
-if os.getenv("DATABASE_URL"):
-    # In CI or when DATABASE_URL is explicitly set, use it
-    DATABASES = {"default": env.db("DATABASE_URL")}
-    DATABASES["default"]["ATOMIC_REQUESTS"] = True
-else:
-    # For local development, use a test-specific database with Unix socket
+# Always use local database unless DATABASE_URL is explicitly valid (not placeholder values)
+db_url = os.getenv("DATABASE_URL", "")
+if not db_url or "user:password" in db_url:
     DATABASES = {
         "default": {
             "ENGINE": "django.db.backends.postgresql",
-            "NAME": "test_fpbase",
             "USER": os.getenv("USER", getpass.getuser()),
-            "PASSWORD": "",
-            "HOST": "",  # Empty string uses Unix socket
-            "PORT": "",
-            "ATOMIC_REQUESTS": True,
-            "TEST": {"NAME": "test_fpbase"},
+            "PORT": "5432",
         }
     }
 

backend/fpbase/tests/test_end2end.py

@@ -3,7 +3,10 @@
 import tempfile
 
 import pytest
+from allauth.account.models import EmailAddress
+from django.contrib.auth import get_user_model
 from django.contrib.staticfiles.testing import StaticLiveServerTestCase
+from django.test import Client
 from django.urls import reverse
 from selenium import webdriver
 from selenium.webdriver.common.by import By
@@ -13,12 +16,13 @@
 from selenium.webdriver.support.wait import WebDriverWait
 
 from proteins.factories import MicroscopeFactory, OpticalConfigWithFiltersFactory, ProteinFactory
-from proteins.models.protein import Protein
+from proteins.models import Protein, Spectrum
 from proteins.util.blast import _get_binary
 
 SEQ = "MVSKGEELFTGVVPILVELDGDVNGHKFSVSGEGEGDATYGKLTLKFICTTGKLPVPWPTLVTTLTYGVQCFS"
 # reverse translation of DGDVNGHKFSVSGEGEGDATYGKLTLKFICT
 cDNA = "gatggcgatgtgaacggccataaatttagcgtgagcggcgaaggcgaaggcgatgcgacctatggcaaactgaccctgaaatttatttgcacc"
+PASSWORD = "testpass2341o87123o847u3214"
 
 
 @pytest.mark.usefixtures("uses_frontend", "use_real_webpack_loader")
@@ -251,3 +255,220 @@ def test_compare(self):
         muts = self.browser.find_element(by="xpath", value='//p[strong[text()="Mutations: "]]')
         assert muts.text == "Mutations: L19T/D20T"  # (the two T mutations we did above)
         self._assert_no_console_errors()
+
+    def test_spectrum_submission_preview_manual_data(self):
+        """End-to-end test of spectrum submission with manual data preview"""
+
+        User = get_user_model()
+
+        # Create a test user with verified email
+        import uuid
+
+        username = f"testuser_{uuid.uuid4().hex[:8]}"
+        # Use the existing knownSequence protein from setUp
+        # Delete any existing ex spectrum to ensure test can submit a new one
+        protein_name = self.p1.name
+
+        Spectrum.objects.filter(owner_state__protein=self.p1, subtype="ex").delete()
+
+        user = User.objects.create_user(username=username, password=PASSWORD, email=f"{username}@example.com")
+        user.is_active = True
+        user.save()
+
+        # Create EmailAddress record for allauth email verification
+
+        EmailAddress.objects.create(user=user, email=f"{username}@example.com", verified=True, primary=True)
+
+        client = Client()
+        client.force_login(user)
+
+        # Get session key and set it in browser cookies for Selenium
+        session_key = client.session.session_key
+
+        # Navigate to any page first to set domain for cookie
+        self.browser.get(self.live_server_url)
+
+        # Set Django session cookie
+        self.browser.add_cookie({"name": "sessionid", "value": session_key, "domain": "localhost", "path": "/"})
+
+        # Navigate to spectrum submission page
+        self._load_reverse("proteins:submit-spectra")
+        self._assert_no_console_errors()
+
+        # Wait for form to load, then fill out the basic form fields
+        WebDriverWait(self.browser, 10).until(lambda d: d.find_element(by="id", value="id_category").is_displayed())
+        Select(self.browser.find_element(by="id", value="id_category")).select_by_value("p")
+        Select(self.browser.find_element(by="id", value="id_subtype")).select_by_value("ex")
+
+        # Wait for protein owner field to appear (it's a Select2 autocomplete field)
+        # Find the Select2 container and click it to open the search
+        select2_container = WebDriverWait(self.browser, 10).until(
+            lambda d: d.find_element(by="css selector", value=".select2-selection")
+        )
+        select2_container.click()
+
+        # Type the protein name into the autocomplete search box and select it
+        self.browser.switch_to.active_element.send_keys(protein_name)
+        # Wait briefly for autocomplete results to load
+        WebDriverWait(self.browser, 5).until(
+            EC.presence_of_element_located((By.CSS_SELECTOR, ".select2-results__option"))
+        )
+        self.browser.switch_to.active_element.send_keys(Keys.ENTER)
+
+        # Switch to manual data tab
+        manual_tab = self.browser.find_element(by="id", value="manual-tab")
+        manual_tab.click()
+
+        # Wait for manual data field to be visible and interactable
+        WebDriverWait(self.browser, 5).until(lambda d: d.find_element(by="id", value="id_data").is_displayed())
+        data_field = WebDriverWait(self.browser, 5).until(
+            lambda d: d.find_element(by="id", value="id_data")
+            if d.find_element(by="id", value="id_data").is_enabled()
+            else None
+        )
+        spectrum_data = (
+            "[[400, 0.1], [401, 0.2], [402, 0.3], [403, 0.5], [404, 0.8], "
+            "[405, 1.0], [406, 0.8], [407, 0.5], [408, 0.3], [409, 0.1]]"
+        )
+        data_field.send_keys(spectrum_data)
+
+        # Check confirmation checkbox
+        self.browser.find_element(by="id", value="id_confirmation").click()
+
+        # Submit for preview
+        submit_button = self.browser.find_element(by="css selector", value='input[type="submit"]')
+        assert "Preview" in submit_button.get_attribute("value")
+        submit_button.click()
+
+        # Wait a moment for AJAX to start
+        import time
+
+        time.sleep(2)
+
+        # Check for any error alerts
+        error_alerts = self.browser.find_elements(by="css selector", value=".alert-danger")
+        if error_alerts:
+            for alert in error_alerts:
+                if alert.is_displayed():
+                    raise AssertionError(f"Error alert shown: {alert.text}")
+
+        # Wait for preview to appear (AJAX request may take some time)
+        WebDriverWait(self.browser, 15).until(
+            lambda d: d.find_element(by="id", value="spectrum-preview-section")
+            if d.find_element(by="id", value="spectrum-preview-section").is_displayed()
+            else None
+        )
+
+        # Verify preview content
+        preview_chart = self.browser.find_element(by="id", value="spectrum-preview-chart")
+        assert preview_chart.find_element(by="tag name", value="svg")  # Should contain SVG
+
+        # Check preview info
+        data_points = self.browser.find_element(by="id", value="preview-data-points").text
+        assert "10" in data_points  # Should show 10 data points
+
+        # Test "Edit Data" button - use onclick attribute for reliable selection
+        edit_button = self.browser.find_element(by="css selector", value="button[onclick='hidePreview()']")
+        edit_button.click()
+
+        # Should switch back to manual tab and hide preview
+        WebDriverWait(self.browser, 2).until(
+            lambda d: not d.find_element(by="id", value="spectrum-preview-section").is_displayed()
+        )
+        assert self.browser.find_element(by="id", value="manual-tab").get_attribute("class").find("active") != -1
+
+        # Data should still be there (compare parsed JSON, not string formatting)
+        import json
+
+        data_field = self.browser.find_element(by="id", value="id_data")
+        expected_data = json.loads(spectrum_data)
+        actual_data = json.loads(data_field.get_attribute("value"))
+        assert expected_data == actual_data
+
+        self._assert_no_console_errors()
+
+    def test_spectrum_submission_tab_switching(self):
+        """End-to-end test of tab switching behavior in spectrum submission"""
+
+        User = get_user_model()
+
+        # Create a test user with verified email
+        import uuid
+
+        username = f"testuser_{uuid.uuid4().hex[:8]}"
+        user = User.objects.create_user(username=username, password=PASSWORD, email=f"{username}@example.com")
+        user.is_active = True
+        user.save()
+
+        # Create EmailAddress record for allauth email verification
+
+        EmailAddress.objects.create(user=user, email=f"{username}@example.com", verified=True, primary=True)
+
+        # Use Django's session authentication instead of HTML login
+
+        client = Client()
+        client.force_login(user)
+
+        # Get session key and set it in browser cookies for Selenium
+        session_key = client.session.session_key
+
+        # Navigate to any page first to set domain for cookie
+        self.browser.get(self.live_server_url)
+
+        # Set Django session cookie
+        self.browser.add_cookie({"name": "sessionid", "value": session_key, "domain": "localhost", "path": "/"})
+
+        # Navigate to spectrum submission page
+        self._load_reverse("proteins:submit-spectra")
+
+        # Wait for form to load, then fill out basic fields
+        WebDriverWait(self.browser, 10).until(lambda d: d.find_element(by="id", value="id_category").is_displayed())
+        Select(self.browser.find_element(by="id", value="id_category")).select_by_value("p")
+        Select(self.browser.find_element(by="id", value="id_subtype")).select_by_value("ex")
+        WebDriverWait(self.browser, 2).until(lambda d: d.find_element(by="id", value="id_owner_state").is_displayed())
+        owner_state_select = Select(self.browser.find_element(by="id", value="id_owner_state"))
+        if len(owner_state_select.options) > 1:  # Skip the empty option
+            owner_state_select.select_by_index(1)
+
+        # Check confirmation
+        self.browser.find_element(by="id", value="id_confirmation").click()
+
+        # Test tab switching behavior
+        file_tab = self.browser.find_element(by="id", value="file-tab")
+        manual_tab = self.browser.find_element(by="id", value="manual-tab")
+
+        # Start on file tab (default)
+        assert "active" in file_tab.get_attribute("class")
+
+        # Switch to manual tab
+        manual_tab.click()
+        WebDriverWait(self.browser, 2).until(
+            lambda d: "active" in d.find_element(by="id", value="manual-tab").get_attribute("class")
+        )
+
+        # Wait for data field to become visible and enabled after tab switch
+        data_field = WebDriverWait(self.browser, 3).until(
+            lambda d: d.find_element(by="id", value="id_data")
+            if d.find_element(by="id", value="id_data").is_displayed()
+            and d.find_element(by="id", value="id_data").is_enabled()
+            else None
+        )
+
+        # Enter some manual data
+        data_field.send_keys(
+            "[[400, 0.1], [401, 0.2], [402, 0.3], [403, 0.5], "
+            "[404, 0.8], [405, 1.0], [406, 0.8], [407, 0.5], [408, 0.3], [409, 0.1]]"
+        )
+
+        # Switch back to file tab
+        file_tab.click()
+        WebDriverWait(self.browser, 1).until(
+            lambda d: "active" in d.find_element(by="id", value="file-tab").get_attribute("class")
+        )
+
+        # Submit button should update based on which tab is active and whether there's data
+        submit_button = self.browser.find_element(by="css selector", value='input[type="submit"]')
+        # On file tab with no file, should show "Submit" not "Preview"
+        assert submit_button.get_attribute("value") in ["Submit", "Preview Spectrum"]
+
+        self._assert_no_console_errors()

backend/proteins/forms/spectrum.py

@@ -108,15 +108,21 @@ class Meta:
 
     def clean(self):
         cleaned_data = super().clean()
-        if not (cleaned_data.get("data") or self.files):
-            self.add_error(
-                "data",
-                "Please either fill in the data field or select a file to upload.",
-            )
-            self.add_error(
-                "file",
-                "Please either fill in the data field or select a file to upload.",
-            )
+
+        # Check which data source was selected based on form submission
+        data_source = self.data.get("data_source", "file") if self.data else "file"
+
+        # Validate based on the selected data source
+        if data_source == "manual":
+            # Manual data tab: require manual data, file is optional
+            if not cleaned_data.get("data"):
+                raise forms.ValidationError("Please enter valid spectrum data.")
+        else:
+            # File tab: require file upload, manual data is optional
+            if not self.files.get("file"):
+                raise forms.ValidationError("Please select a file to upload.")
+
+        return cleaned_data
 
     def save(self, commit=True):
         cat = self.cleaned_data.get("category")