From 64dc52b161e8d9efd9ce3a2c9aae54309485b13c Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Thu, 4 Jun 2026 12:41:49 +0200
Subject: [PATCH] feat(wasap): make location filter required

Show an inline error on the location field and disable the Apply button
when the field is empty, preventing users from applying filters without
a sampling location selected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pageStateSelectors/ApplyFilterButton.tsx  | 32 ++++++++++++-------
 .../wasap/WasapPageStateSelector.tsx          |  6 +++-
 .../wasap/utils/LabeledField.tsx              | 11 ++++++-
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/website/src/components/pageStateSelectors/ApplyFilterButton.tsx b/website/src/components/pageStateSelectors/ApplyFilterButton.tsx
index d3d7b5736..e185514aa 100644
--- a/website/src/components/pageStateSelectors/ApplyFilterButton.tsx
+++ b/website/src/components/pageStateSelectors/ApplyFilterButton.tsx
@@ -12,10 +12,12 @@ export function ApplyFilterButton<PageState extends object>({
     newPageState,
     setPageState,
     className = '',
+    disabled = false,
 }: WithClassName<{
     pageStateHandler: PageStateHandler<PageState>;
     newPageState: PageState;
     setPageState: Dispatch<SetStateAction<PageState>>;
+    disabled?: boolean;
 }>) {
     const url = pageStateHandler.toUrl(newPageState);
     const fullUrl = `${window.location.origin}${url}`;
@@ -25,18 +27,26 @@ export function ApplyFilterButton<PageState extends object>({
         setPageState(newPageState);
     };
 
-    return urlTooLong ? (
-        <>
-            <span role='button' className={`btn btn-primary btn-disabled ${className}`}>
-                Apply filters
-            </span>
-            <div className='alert alert-error mt-2'>
-                <span>
-                    The URL is too long ({fullUrl.length} characters, maximum {MAX_URL_LENGTH}). Please reduce the
-                    amount of data in the filters.
+    if (urlTooLong) {
+        return (
+            <>
+                <span role='button' className={`btn btn-primary btn-disabled ${className}`}>
+                    Apply filters
                 </span>
-            </div>
-        </>
+                <div className='alert alert-error mt-2'>
+                    <span>
+                        The URL is too long ({fullUrl.length} characters, maximum {MAX_URL_LENGTH}). Please reduce the
+                        amount of data in the filters.
+                    </span>
+                </div>
+            </>
+        );
+    }
+
+    return disabled ? (
+        <span role='button' className={`btn btn-primary btn-disabled ${className}`}>
+            Apply filters
+        </span>
     ) : (
         <button type='button' onClick={applyFilters} className={`btn btn-primary ${className}`}>
             Apply filters
diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index 5f5c483ff..11b735e11 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -105,7 +105,10 @@ export function WasapPageStateSelector({
         <div className='flex flex-col gap-4'>
             <SelectorHeadline>Filter dataset</SelectorHeadline>
             <Inset className='p-2'>
-                <LabeledField label='Sampling location'>
+                <LabeledField
+                    label='Sampling location'
+                    error={!baseFilterState.locationName ? 'Location is required' : undefined}
+                >
                     <GsTextFilter
                         placeholderText='Sampling location'
                         lapisField={config.locationNameField}
@@ -226,6 +229,7 @@ export function WasapPageStateSelector({
                 pageStateHandler={pageStateHandler}
                 newPageState={getMergedPageState()}
                 setPageState={setPageState}
+                disabled={!baseFilterState.locationName}
             />
         </div>
     );
diff --git a/website/src/components/pageStateSelectors/wasap/utils/LabeledField.tsx b/website/src/components/pageStateSelectors/wasap/utils/LabeledField.tsx
index ebf8448dc..cb2a176c7 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/LabeledField.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/LabeledField.tsx
@@ -16,9 +16,13 @@ interface LabeledFieldProps {
      * If provided, a help button will be shown next to the label.
      */
     info?: ReactNode;
+    /**
+     * Optional error message displayed below the field.
+     */
+    error?: string;
 }
 
-export function LabeledField({ label, children, info }: LabeledFieldProps) {
+export function LabeledField({ label, children, info, error }: LabeledFieldProps) {
     const modalRef = useModalRef();
 
     return (
@@ -44,6 +48,11 @@ export function LabeledField({ label, children, info }: LabeledFieldProps) {
                 )}
             </div>
             {children}
+            {error !== undefined && (
+                <label className='label'>
+                    <span className='label-text-alt text-error'>{error}</span>
+                </label>
+            )}
         </div>
     );
 }