From 54c7b61fe44fe794e2d34f75ad62fb86ebe40e36 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Wed, 27 May 2026 10:57:17 +0200
Subject: [PATCH 01/31] Mock the UI

---
 .../wasap/filters/VariantExplorerFilter.tsx   | 187 ++++++++++++------
 1 file changed, 131 insertions(+), 56 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index 635f01fb7..dd4fc560f 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { Inset } from '../../../../styles/Inset';
 import { GsLineageFilter } from '../../../genspectrum/GsLineageFilter';
 import {
@@ -12,6 +14,8 @@ import { LabeledField } from '../utils/LabeledField';
 import { NumericInput } from '../utils/NumericInput';
 import { SequenceTypeSelector } from '../utils/SequenceTypeSelector';
 
+type SignatureType = 'computed' | 'nextclade';
+
 interface VariantExplorerFilterProps {
     pageState: WasapVariantFilter;
     setPageState: (newState: WasapVariantFilter) => void;
@@ -29,68 +33,139 @@ export function VariantExplorerFilter({
     clinicalSequenceLapisBaseUrl,
     clinicalSequenceLapisLineageField,
 }: VariantExplorerFilterProps) {
+    const [signatureType, setSignatureType] = useState<SignatureType>('computed');
+
     return (
         <>
             <SequenceTypeSelector
                 value={pageState.sequenceType}
                 onChange={(sequenceType) => setPageState({ ...pageState, sequenceType })}
             />
-            <Inset className='mt-4 p-2'>
-                <SelectorHeadline info={<DefineClinicalSignatureInfo />}>Define Clinical Signature</SelectorHeadline>
-                <LabeledField label='Variant'>
-                    <gs-app lapis={clinicalSequenceLapisBaseUrl}>
-                        <GsLineageFilter
-                            lapisField={clinicalSequenceLapisLineageField}
-                            lapisFilter={{}}
-                            placeholderText='Variant'
-                            value={pageState.variant}
-                            onLineageChange={(lineages) => {
-                                setPageState({ ...pageState, variant: lineages[clinicalSequenceLapisLineageField] });
-                            }}
-                            hideCounts={true}
-                        />
-                    </gs-app>
-                </LabeledField>
-                <NumericInput
-                    label='Min. proportion'
-                    value={pageState.minProportion}
-                    min={0}
-                    max={1}
-                    step={0.01}
-                    onChange={(v) => setPageState({ ...pageState, minProportion: v })}
-                />
-                <NumericInput
-                    label='Min. count'
-                    value={pageState.minCount}
-                    min={1}
-                    max={250}
-                    step={1}
-                    onChange={(v) => setPageState({ ...pageState, minCount: Math.round(v) })}
-                />
-                <NumericInput
-                    label='Min. Jaccard index'
-                    value={pageState.minJaccard}
-                    min={0}
-                    max={1}
-                    step={0.01}
-                    onChange={(v) => setPageState({ ...pageState, minJaccard: v })}
-                />
-                <LabeledField label='Time frame'>
-                    <select
-                        className='select select-bordered'
-                        value={pageState.timeFrame}
-                        onChange={(e) => setPageState({ ...pageState, timeFrame: e.target.value as VariantTimeFrame })}
-                    >
-                        <option value={VARIANT_TIME_FRAME.all}>{variantTimeFrameLabel(VARIANT_TIME_FRAME.all)}</option>
-                        <option value={VARIANT_TIME_FRAME.sixMonths}>
-                            Past {variantTimeFrameLabel(VARIANT_TIME_FRAME.sixMonths)}
-                        </option>
-                        <option value={VARIANT_TIME_FRAME.threeMonths}>
-                            Past {variantTimeFrameLabel(VARIANT_TIME_FRAME.threeMonths)}
-                        </option>
-                    </select>
-                </LabeledField>
-            </Inset>
+            <LabeledField label='Variant definition source'>
+                <select
+                    className='select select-bordered'
+                    value={signatureType}
+                    onChange={(e) => setSignatureType(e.target.value as SignatureType)}
+                >
+                    <option value='computed'>Computed</option>
+                    <option value='nextclade'>Nextclade</option>
+                </select>
+            </LabeledField>
+            {signatureType === 'nextclade' && <NextcladeSignature />}
+            {signatureType === 'computed' && (
+                <Inset className='mt-4 p-2'>
+                    <SelectorHeadline info={<DefineClinicalSignatureInfo />}>
+                        Define Clinical Signature
+                    </SelectorHeadline>
+                    <LabeledField label='Variant'>
+                        <gs-app lapis={clinicalSequenceLapisBaseUrl}>
+                            <GsLineageFilter
+                                lapisField={clinicalSequenceLapisLineageField}
+                                lapisFilter={{}}
+                                placeholderText='Variant'
+                                value={pageState.variant}
+                                onLineageChange={(lineages) => {
+                                    setPageState({
+                                        ...pageState,
+                                        variant: lineages[clinicalSequenceLapisLineageField],
+                                    });
+                                }}
+                                hideCounts={true}
+                            />
+                        </gs-app>
+                    </LabeledField>
+                    <NumericInput
+                        label='Min. proportion'
+                        value={pageState.minProportion}
+                        min={0}
+                        max={1}
+                        step={0.01}
+                        onChange={(v) => setPageState({ ...pageState, minProportion: v })}
+                    />
+                    <NumericInput
+                        label='Min. count'
+                        value={pageState.minCount}
+                        min={1}
+                        max={250}
+                        step={1}
+                        onChange={(v) => setPageState({ ...pageState, minCount: Math.round(v) })}
+                    />
+                    <NumericInput
+                        label='Min. Jaccard index'
+                        value={pageState.minJaccard}
+                        min={0}
+                        max={1}
+                        step={0.01}
+                        onChange={(v) => setPageState({ ...pageState, minJaccard: v })}
+                    />
+                    <LabeledField label='Time frame'>
+                        <select
+                            className='select select-bordered'
+                            value={pageState.timeFrame}
+                            onChange={(e) =>
+                                setPageState({ ...pageState, timeFrame: e.target.value as VariantTimeFrame })
+                            }
+                        >
+                            <option value={VARIANT_TIME_FRAME.all}>
+                                {variantTimeFrameLabel(VARIANT_TIME_FRAME.all)}
+                            </option>
+                            <option value={VARIANT_TIME_FRAME.sixMonths}>
+                                Past {variantTimeFrameLabel(VARIANT_TIME_FRAME.sixMonths)}
+                            </option>
+                            <option value={VARIANT_TIME_FRAME.threeMonths}>
+                                Past {variantTimeFrameLabel(VARIANT_TIME_FRAME.threeMonths)}
+                            </option>
+                        </select>
+                    </LabeledField>
+                </Inset>
+            )}
         </>
     );
 }
+
+const DUMMY_NEXTCLADE_LINEAGES = [
+    'XEC',
+    'KP.1.1',
+    'KP.2',
+    'KP.3',
+    'JN.1',
+    'XFG',
+    'LP.8.1',
+    'NB.1.8.1',
+    'MC.10.1',
+    'XEC.4',
+];
+
+function NextcladeSignature() {
+    const [variant, setVariant] = useState('');
+    const [newMutationsOnly, setNewMutationsOnly] = useState(false);
+
+    return (
+        <Inset className='mt-4 p-2'>
+            <LabeledField label='Variant'>
+                <select className='select select-bordered' value={variant} onChange={(e) => setVariant(e.target.value)}>
+                    <option value='' disabled>
+                        Select variant
+                    </option>
+                    {DUMMY_NEXTCLADE_LINEAGES.map((lineage) => (
+                        <option key={lineage} value={lineage}>
+                            {lineage}
+                        </option>
+                    ))}
+                </select>
+            </LabeledField>
+            <div className='pt-2 text-sm'>
+                <input
+                    className='accent-primary'
+                    type='checkbox'
+                    id='newMutationsOnly'
+                    checked={newMutationsOnly}
+                    onChange={(e) => setNewMutationsOnly(e.target.checked)}
+                />
+                <label htmlFor='newMutationsOnly' className='pl-2'>
+                    New mutations only
+                </label>
+            </div>
+        </Inset>
+    );
+}

From 69d9f0f9e29803995a14114cf46c11cc3f65cd54 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 29 May 2026 09:19:46 +0200
Subject: [PATCH 02/31] fix(website): resolve merge conflict in backendService
 getCollections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/backendApi/backendService.ts      |  3 +-
 .../wasap/WasapPageStateSelector.tsx          | 23 ++++++++
 .../wasap/filters/VariantExplorerFilter.tsx   | 59 ++++++++++---------
 .../components/views/wasap/wasapPageConfig.ts |  4 ++
 website/src/types/wastewaterConfig.ts         |  4 ++
 5 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/website/src/backendApi/backendService.ts b/website/src/backendApi/backendService.ts
index 8019e6d9d..e6219cfd9 100644
--- a/website/src/backendApi/backendService.ts
+++ b/website/src/backendApi/backendService.ts
@@ -181,9 +181,10 @@ export class BackendService extends ApiService {
         return this.get({ url: '/collections', requestParams, schema: z.array(collectionSummarySchema) });
     }
 
-    public async getCollections({ organism }: { organism?: string } = {}) {
+    public async getCollections({ organism, userId }: { organism?: string; userId?: number } = {}) {
         const requestParams: Record<string, string> = { includeVariants: 'true' };
         if (organism !== undefined) requestParams.organism = organism;
+        if (userId !== undefined) requestParams.userId = String(userId);
         return this.get({ url: '/collections', requestParams, schema: z.array(collectionSchema) });
     }
 
diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index 5f5c483ff..62e9f29de 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import { type Dispatch, type SetStateAction, useState } from 'react';
 
+import { getBackendServiceForClientside } from '../../../backendApi/backendService';
+
 import { ApplyFilterButton } from '../ApplyFilterButton';
 import { DynamicDateFilter } from '../DynamicDateFilter';
 import { SelectorHeadline } from '../SelectorHeadline';
@@ -101,6 +103,22 @@ export function WasapPageStateSelector({
         },
     });
 
+    const predefinedVariantsQueryResult = useQuery({
+        enabled: config.variantAnalysisModeEnabled && config.predefinedVariantsSource !== undefined,
+        queryKey: ['predefinedVariants', config.variantAnalysisModeEnabled && config.predefinedVariantsSource],
+        queryFn: () => {
+            if (!config.variantAnalysisModeEnabled || config.predefinedVariantsSource === undefined) {
+                throw Error(
+                    "This predefined variants query was called despite it being disabled. This should not happen.",
+                );
+            }
+            const { collectionsUserId, collectionsTag } = config.predefinedVariantsSource;
+            return getBackendServiceForClientside()
+                .getCollections({ userId: collectionsUserId, organism: config.name })
+                .then((collections) => collections.filter((c) => c.description?.includes(collectionsTag) ?? false));
+        },
+    });
+
     return (
         <div className='flex flex-col gap-4'>
             <SelectorHeadline>Filter dataset</SelectorHeadline>
@@ -181,6 +199,11 @@ export function WasapPageStateSelector({
                                     setPageState={setVariantFilter}
                                     clinicalSequenceLapisBaseUrl={config.clinicalLapis.lapisBaseUrl}
                                     clinicalSequenceLapisLineageField={config.clinicalLapis.lineageField}
+                                    predefinedVariantsQueryResult={
+                                        config.predefinedVariantsSource !== undefined
+                                            ? predefinedVariantsQueryResult
+                                            : undefined
+                                    }
                                 />
                             );
                         case 'resistance':
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index dd4fc560f..b0dc31cdd 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -1,5 +1,7 @@
+import { type UseQueryResult } from '@tanstack/react-query';
 import { useState } from 'react';
 
+import { type Collection } from '../../../../types/Collection';
 import { Inset } from '../../../../styles/Inset';
 import { GsLineageFilter } from '../../../genspectrum/GsLineageFilter';
 import {
@@ -25,6 +27,7 @@ interface VariantExplorerFilterProps {
      */
     clinicalSequenceLapisBaseUrl: string;
     clinicalSequenceLapisLineageField: string;
+    predefinedVariantsQueryResult?: UseQueryResult<Collection[]>;
 }
 
 export function VariantExplorerFilter({
@@ -32,6 +35,7 @@ export function VariantExplorerFilter({
     setPageState,
     clinicalSequenceLapisBaseUrl,
     clinicalSequenceLapisLineageField,
+    predefinedVariantsQueryResult,
 }: VariantExplorerFilterProps) {
     const [signatureType, setSignatureType] = useState<SignatureType>('computed');
 
@@ -41,17 +45,21 @@ export function VariantExplorerFilter({
                 value={pageState.sequenceType}
                 onChange={(sequenceType) => setPageState({ ...pageState, sequenceType })}
             />
-            <LabeledField label='Variant definition source'>
-                <select
-                    className='select select-bordered'
-                    value={signatureType}
-                    onChange={(e) => setSignatureType(e.target.value as SignatureType)}
-                >
-                    <option value='computed'>Computed</option>
-                    <option value='nextclade'>Nextclade</option>
-                </select>
-            </LabeledField>
-            {signatureType === 'nextclade' && <NextcladeSignature />}
+            {predefinedVariantsQueryResult !== undefined && (
+                <LabeledField label='Variant definition source'>
+                    <select
+                        className='select select-bordered'
+                        value={signatureType}
+                        onChange={(e) => setSignatureType(e.target.value as SignatureType)}
+                    >
+                        <option value='computed'>Extracted from clinical sequences</option>
+                        <option value='nextclade'>Nextclade</option>
+                    </select>
+                </LabeledField>
+            )}
+            {signatureType === 'nextclade' && (
+                <NextcladeSignature predefinedVariantsQueryResult={predefinedVariantsQueryResult} />
+            )}
             {signatureType === 'computed' && (
                 <Inset className='mt-4 p-2'>
                     <SelectorHeadline info={<DefineClinicalSignatureInfo />}>
@@ -123,23 +131,16 @@ export function VariantExplorerFilter({
     );
 }
 
-const DUMMY_NEXTCLADE_LINEAGES = [
-    'XEC',
-    'KP.1.1',
-    'KP.2',
-    'KP.3',
-    'JN.1',
-    'XFG',
-    'LP.8.1',
-    'NB.1.8.1',
-    'MC.10.1',
-    'XEC.4',
-];
-
-function NextcladeSignature() {
+function NextcladeSignature({
+    predefinedVariantsQueryResult,
+}: {
+    predefinedVariantsQueryResult: UseQueryResult<Collection[]> | undefined;
+}) {
     const [variant, setVariant] = useState('');
     const [newMutationsOnly, setNewMutationsOnly] = useState(false);
 
+    const collections = predefinedVariantsQueryResult?.data ?? [];
+
     return (
         <Inset className='mt-4 p-2'>
             <LabeledField label='Variant'>
@@ -147,9 +148,9 @@ function NextcladeSignature() {
                     <option value='' disabled>
                         Select variant
                     </option>
-                    {DUMMY_NEXTCLADE_LINEAGES.map((lineage) => (
-                        <option key={lineage} value={lineage}>
-                            {lineage}
+                    {collections.map((collection) => (
+                        <option key={collection.id} value={String(collection.id)}>
+                            {collection.name}
                         </option>
                     ))}
                 </select>
@@ -163,7 +164,7 @@ function NextcladeSignature() {
                     onChange={(e) => setNewMutationsOnly(e.target.checked)}
                 />
                 <label htmlFor='newMutationsOnly' className='pl-2'>
-                    New mutations only
+                    Mutation not in parent
                 </label>
             </div>
         </Inset>
diff --git a/website/src/components/views/wasap/wasapPageConfig.ts b/website/src/components/views/wasap/wasapPageConfig.ts
index 2c4cbfe69..e27250915 100644
--- a/website/src/components/views/wasap/wasapPageConfig.ts
+++ b/website/src/components/views/wasap/wasapPageConfig.ts
@@ -70,6 +70,10 @@ type VariantAnalysisModeConfig =
       }
     | {
           variantAnalysisModeEnabled: true;
+          predefinedVariantsSource?: {
+              collectionsUserId: number;
+              collectionsTag: string;
+          };
           clinicalLapis: {
               lapisBaseUrl: string;
               dateField: string;
diff --git a/website/src/types/wastewaterConfig.ts b/website/src/types/wastewaterConfig.ts
index 8e10fa1d5..2f94a369e 100644
--- a/website/src/types/wastewaterConfig.ts
+++ b/website/src/types/wastewaterConfig.ts
@@ -56,6 +56,10 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
         lapisBaseUrl: 'https://lapis.wasap.genspectrum.org/covid',
         samplingDateField: 'samplingDate',
         locationNameField: 'locationName',
+        predefinedVariantsSource: {
+            collectionsUserId: 1,
+            collectionsTag: '#pango-lineage'
+        },
         clinicalLapis: {
             lapisBaseUrl: 'https://lapis.cov-spectrum.org/open/v2',
             dateField: 'date',

From d582af61dfad0bb176db8c46c0bef787edae8690 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 29 May 2026 09:42:17 +0200
Subject: [PATCH 03/31] feat(website): use getCollectionSummaries with
 userId/organism for predefined variants

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/backendApi/backendService.ts          | 15 +++++++++++----
 .../wasap/WasapPageStateSelector.tsx              |  4 ++--
 .../wasap/filters/VariantExplorerFilter.tsx       |  6 +++---
 .../src/components/views/wasap/wasapPageConfig.ts |  2 ++
 website/src/types/wastewaterConfig.ts             |  3 ++-
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/website/src/backendApi/backendService.ts b/website/src/backendApi/backendService.ts
index e6219cfd9..944dc4d23 100644
--- a/website/src/backendApi/backendService.ts
+++ b/website/src/backendApi/backendService.ts
@@ -177,14 +177,21 @@ export class BackendService extends ApiService {
         return this.get({ url: `/users/${id}`, schema: publicUserSchema });
     }
 
-    public async getCollectionSummaries(requestParams: { organism?: string; excludeSystemCollections?: boolean } = {}) {
-        return this.get({ url: '/collections', requestParams, schema: z.array(collectionSummarySchema) });
+    public async getCollectionSummaries({ organism, userId, excludeSystemCollections }: { organism?: string; userId?: number; excludeSystemCollections?: boolean } = {}) {
+        const requestParams: Record<string, string> = {};
+        if (organism !== undefined) requestParams.organism = organism;
+        if (userId !== undefined) requestParams.userId = String(userId);
+        if (excludeSystemCollections !== undefined) requestParams.excludeSystemCollections = String(excludeSystemCollections);
+        return this.get({
+            url: '/collections',
+            requestParams: Object.keys(requestParams).length > 0 ? requestParams : undefined,
+            schema: z.array(collectionSummarySchema),
+        });
     }
 
-    public async getCollections({ organism, userId }: { organism?: string; userId?: number } = {}) {
+    public async getCollections({ organism }: { organism?: string } = {}) {
         const requestParams: Record<string, string> = { includeVariants: 'true' };
         if (organism !== undefined) requestParams.organism = organism;
-        if (userId !== undefined) requestParams.userId = String(userId);
         return this.get({ url: '/collections', requestParams, schema: z.array(collectionSchema) });
     }
 
diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index 62e9f29de..d5e3183bd 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -112,9 +112,9 @@ export function WasapPageStateSelector({
                     "This predefined variants query was called despite it being disabled. This should not happen.",
                 );
             }
-            const { collectionsUserId, collectionsTag } = config.predefinedVariantsSource;
+            const { collectionsUserId, collectionsOrganism, collectionsTag } = config.predefinedVariantsSource;
             return getBackendServiceForClientside()
-                .getCollections({ userId: collectionsUserId, organism: config.name })
+                .getCollectionSummaries({ userId: collectionsUserId, organism: collectionsOrganism })
                 .then((collections) => collections.filter((c) => c.description?.includes(collectionsTag) ?? false));
         },
     });
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index b0dc31cdd..b1581ddf5 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -1,7 +1,7 @@
 import { type UseQueryResult } from '@tanstack/react-query';
 import { useState } from 'react';
 
-import { type Collection } from '../../../../types/Collection';
+import { type CollectionSummary } from '../../../../types/Collection';
 import { Inset } from '../../../../styles/Inset';
 import { GsLineageFilter } from '../../../genspectrum/GsLineageFilter';
 import {
@@ -27,7 +27,7 @@ interface VariantExplorerFilterProps {
      */
     clinicalSequenceLapisBaseUrl: string;
     clinicalSequenceLapisLineageField: string;
-    predefinedVariantsQueryResult?: UseQueryResult<Collection[]>;
+    predefinedVariantsQueryResult?: UseQueryResult<CollectionSummary[]>;
 }
 
 export function VariantExplorerFilter({
@@ -134,7 +134,7 @@ export function VariantExplorerFilter({
 function NextcladeSignature({
     predefinedVariantsQueryResult,
 }: {
-    predefinedVariantsQueryResult: UseQueryResult<Collection[]> | undefined;
+    predefinedVariantsQueryResult: UseQueryResult<CollectionSummary[]> | undefined;
 }) {
     const [variant, setVariant] = useState('');
     const [newMutationsOnly, setNewMutationsOnly] = useState(false);
diff --git a/website/src/components/views/wasap/wasapPageConfig.ts b/website/src/components/views/wasap/wasapPageConfig.ts
index e27250915..1c518f04d 100644
--- a/website/src/components/views/wasap/wasapPageConfig.ts
+++ b/website/src/components/views/wasap/wasapPageConfig.ts
@@ -72,6 +72,8 @@ type VariantAnalysisModeConfig =
           variantAnalysisModeEnabled: true;
           predefinedVariantsSource?: {
               collectionsUserId: number;
+              // TODO: find a better source for this — the organism key should already be known from the page config
+              collectionsOrganism: string;
               collectionsTag: string;
           };
           clinicalLapis: {
diff --git a/website/src/types/wastewaterConfig.ts b/website/src/types/wastewaterConfig.ts
index 2f94a369e..ac08c1a71 100644
--- a/website/src/types/wastewaterConfig.ts
+++ b/website/src/types/wastewaterConfig.ts
@@ -58,7 +58,8 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
         locationNameField: 'locationName',
         predefinedVariantsSource: {
             collectionsUserId: 1,
-            collectionsTag: '#pango-lineage'
+            collectionsOrganism: wastewaterOrganisms.covid,
+            collectionsTag: '#pango-lineage',
         },
         clinicalLapis: {
             lapisBaseUrl: 'https://lapis.cov-spectrum.org/open/v2',

From a1a4a811d8368faf5006172a0702f01fa5a83129 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 29 May 2026 10:29:28 +0200
Subject: [PATCH 04/31] feat(website): replace variant select with downshift
 autocomplete combobox

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/package-lock.json                     |  14 ++-
 website/package.json                          |   1 +
 .../wasap/filters/VariantExplorerFilter.tsx   |  14 +--
 .../wasap/utils/CollectionCombobox.tsx        | 103 ++++++++++++++++++
 4 files changed, 118 insertions(+), 14 deletions(-)
 create mode 100644 website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx

diff --git a/website/package-lock.json b/website/package-lock.json
index af0218637..9db2ea4ba 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -16,6 +16,7 @@
                 "better-auth": "^1.6.14",
                 "cookie": "^1.1.1",
                 "dayjs": "^1.11.21",
+                "downshift": "^9.3.3",
                 "katex": "^0.17.0",
                 "patch-package": "^8.0.1",
                 "react": "^19.2.7",
@@ -6495,9 +6496,9 @@
             }
         },
         "node_modules/downshift": {
-            "version": "9.3.2",
-            "resolved": "https://registry.npmjs.org/downshift/-/downshift-9.3.2.tgz",
-            "integrity": "sha512-5VD0WZLQDhipWiDU+K5ili3VDhGrXwlvOlSaSG1Cb0eS4XpssxVuoD09JNgju+bAzxB2Wvlwx+FwTE/FNdrqow==",
+            "version": "9.3.3",
+            "resolved": "https://registry.npmjs.org/downshift/-/downshift-9.3.3.tgz",
+            "integrity": "sha512-otjI/WtoFcIXwPOyIQYkbrAZJA2Gjz67F8ENOh1RvmJalOg6fk0KEx4ljJSFuJB54ryc6doymPkCM+GjAZ7zjA==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.28.6",
@@ -8225,6 +8226,13 @@
                 "set-cookie-parser": "^3.0.1"
             }
         },
+        "node_modules/headers-polyfill/node_modules/set-cookie-parser": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-3.1.0.tgz",
+            "integrity": "sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==",
+            "devOptional": true,
+            "license": "MIT"
+        },
         "node_modules/html-escaper": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
diff --git a/website/package.json b/website/package.json
index 2dba7e144..8a0a94ab2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -33,6 +33,7 @@
         "cookie": "^1.1.1",
         "dayjs": "^1.11.21",
         "katex": "^0.17.0",
+        "downshift": "^9.3.3",
         "patch-package": "^8.0.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index b1581ddf5..b94423951 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -2,6 +2,7 @@ import { type UseQueryResult } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { type CollectionSummary } from '../../../../types/Collection';
+import { CollectionCombobox } from '../utils/CollectionCombobox';
 import { Inset } from '../../../../styles/Inset';
 import { GsLineageFilter } from '../../../genspectrum/GsLineageFilter';
 import {
@@ -136,7 +137,7 @@ function NextcladeSignature({
 }: {
     predefinedVariantsQueryResult: UseQueryResult<CollectionSummary[]> | undefined;
 }) {
-    const [variant, setVariant] = useState('');
+    const [selectedCollection, setSelectedCollection] = useState<CollectionSummary | null>(null);
     const [newMutationsOnly, setNewMutationsOnly] = useState(false);
 
     const collections = predefinedVariantsQueryResult?.data ?? [];
@@ -144,16 +145,7 @@ function NextcladeSignature({
     return (
         <Inset className='mt-4 p-2'>
             <LabeledField label='Variant'>
-                <select className='select select-bordered' value={variant} onChange={(e) => setVariant(e.target.value)}>
-                    <option value='' disabled>
-                        Select variant
-                    </option>
-                    {collections.map((collection) => (
-                        <option key={collection.id} value={String(collection.id)}>
-                            {collection.name}
-                        </option>
-                    ))}
-                </select>
+                <CollectionCombobox collections={collections} value={selectedCollection} onChange={setSelectedCollection} />
             </LabeledField>
             <div className='pt-2 text-sm'>
                 <input
diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
new file mode 100644
index 000000000..0a1300b2c
--- /dev/null
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
@@ -0,0 +1,103 @@
+import { useCombobox } from 'downshift';
+import { useMemo, useRef, useState } from 'react';
+
+import { type CollectionSummary } from '../../../../types/Collection';
+
+export function CollectionCombobox({
+    collections,
+    value,
+    onChange,
+    placeholderText = 'Select variant',
+}: {
+    collections: CollectionSummary[];
+    value: CollectionSummary | null;
+    onChange: (item: CollectionSummary | null) => void;
+    placeholderText?: string;
+}) {
+    const [inputFilter, setInputFilter] = useState(() => value?.name ?? '');
+    const [inputIsInvalid, setInputIsInvalid] = useState(false);
+
+    const filteredCollections = useMemo(
+        () =>
+            collections
+                .filter((c) => c.name.toLowerCase().includes(inputFilter.toLowerCase()))
+                .sort((a, b) => a.name.localeCompare(b.name)),
+        [collections, inputFilter],
+    );
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, inputValue, closeMenu, reset } =
+        useCombobox({
+            items: filteredCollections,
+            itemToString: (item) => item?.name ?? '',
+            selectedItem: value,
+            onInputValueChange({ inputValue }) {
+                setInputIsInvalid(false);
+                setInputFilter(inputValue.trim());
+            },
+            onSelectedItemChange({ selectedItem }) {
+                onChange(selectedItem ?? null);
+            },
+        });
+
+    const onInputBlur = () => {
+        if (inputValue === '') {
+            onChange(null);
+            return;
+        }
+        const match = collections.find((c) => c.name === inputValue.trim());
+        if (match !== undefined) {
+            onChange(match);
+            return;
+        }
+        setInputIsInvalid(true);
+    };
+
+    return (
+        <div className='relative w-full'>
+            <div
+                className={`flex gap-0.5 input w-full ${inputIsInvalid ? 'input-error' : 'input-bordered'}`}
+                onBlur={(e) => {
+                    if (e.relatedTarget !== buttonRef.current) {
+                        closeMenu();
+                    }
+                }}
+            >
+                <input placeholder={placeholderText} className='w-full p-1.5' {...getInputProps()} onBlur={onInputBlur} />
+                {inputValue !== '' && (
+                    <button
+                        aria-label='clear selection'
+                        className='px-2'
+                        type='button'
+                        tabIndex={-1}
+                        onClick={() => { reset(); onChange(null); }}
+                    >
+                        ×
+                    </button>
+                )}
+                <button aria-label='toggle menu' className='px-2' type='button' {...getToggleButtonProps()} ref={buttonRef}>
+                    {isOpen ? <>↑</> : <>↓</>}
+                </button>
+            </div>
+            <ul
+                className={`absolute bg-base-100 border border-base-300 mt-1 shadow-md max-h-80 overflow-y-auto z-10 w-full ${isOpen ? '' : 'hidden'}`}
+                {...getMenuProps()}
+            >
+                {filteredCollections.length > 0 ? (
+                    filteredCollections.map((item, index) => (
+                        <li
+                            key={item.id}
+                            className={`py-2 px-3 cursor-pointer ${highlightedIndex === index ? 'bg-base-200' : ''} ${value?.id === item.id ? 'font-bold' : ''}`}
+                            {...getItemProps({ item, index })}
+                        >
+                            {item.name}
+                        </li>
+                    ))
+                ) : (
+                    <li className='py-2 px-3 text-sm text-base-content/60'>No variants found.</li>
+                )}
+            </ul>
+        </div>
+    );
+}

From c01dbae21c0331e6c7f72fec6dbab14517503789 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 29 May 2026 11:17:37 +0200
Subject: [PATCH 05/31] refactor(website): flatten WasapVariantFilter type and
 make SignatureType explicit

Replace the WasapVariantComputedFilter | WasapVariantPredefinedFilter discriminated union
with a single flat WasapVariantFilter type (consistent with WasapUntrackedFilter), removing
the need to pass computedDefaults to VariantExplorerFilter. Also moves SignatureType to
wasapPageConfig and makes newMutationsOnly optional (undefined = false).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../wasap/WasapPageStateSelector.tsx          |  4 +-
 .../VariantExplorerFilter.browser.spec.tsx    |  1 +
 .../wasap/filters/VariantExplorerFilter.tsx   | 50 +++++++++------
 .../wasap/utils/CollectionCombobox.tsx        | 63 +++++++++++++------
 .../src/components/views/wasap/WasapPage.tsx  | 20 +++---
 .../views/wasap/useWasapPageData.ts           | 17 +++++
 .../components/views/wasap/wasapPageConfig.ts |  8 +++
 website/src/types/wastewaterConfig.ts         |  4 ++
 .../WasapPageStateHandler.spec.ts             |  1 +
 .../WasapPageStateHandler.ts                  | 37 +++++++++--
 10 files changed, 149 insertions(+), 56 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index d5e3183bd..8e4665009 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -2,7 +2,6 @@ import { useQuery } from '@tanstack/react-query';
 import { type Dispatch, type SetStateAction, useState } from 'react';
 
 import { getBackendServiceForClientside } from '../../../backendApi/backendService';
-
 import { ApplyFilterButton } from '../ApplyFilterButton';
 import { DynamicDateFilter } from '../DynamicDateFilter';
 import { SelectorHeadline } from '../SelectorHeadline';
@@ -109,7 +108,7 @@ export function WasapPageStateSelector({
         queryFn: () => {
             if (!config.variantAnalysisModeEnabled || config.predefinedVariantsSource === undefined) {
                 throw Error(
-                    "This predefined variants query was called despite it being disabled. This should not happen.",
+                    'This predefined variants query was called despite it being disabled. This should not happen.',
                 );
             }
             const { collectionsUserId, collectionsOrganism, collectionsTag } = config.predefinedVariantsSource;
@@ -204,6 +203,7 @@ export function WasapPageStateSelector({
                                             ? predefinedVariantsQueryResult
                                             : undefined
                                     }
+                                    predefinedVariantsLabel={config.predefinedVariantsSource?.variantSourceLabel}
                                 />
                             );
                         case 'resistance':
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
index dca132918..bf7d94410 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
@@ -12,6 +12,7 @@ const DUMMY_LAPIS_URL_2 = 'http://lapis2.dummy';
 describe('VariantExplorerFilter', () => {
     const defaultPageState: WasapVariantFilter = {
         mode: 'variant',
+        signatureType: 'computed',
         sequenceType: 'nucleotide',
         variant: undefined,
         minProportion: 0.05,
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index b94423951..d414b4ae9 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -1,24 +1,22 @@
 import { type UseQueryResult } from '@tanstack/react-query';
-import { useState } from 'react';
 
-import { type CollectionSummary } from '../../../../types/Collection';
-import { CollectionCombobox } from '../utils/CollectionCombobox';
 import { Inset } from '../../../../styles/Inset';
+import { type CollectionSummary } from '../../../../types/Collection';
 import { GsLineageFilter } from '../../../genspectrum/GsLineageFilter';
 import {
     VARIANT_TIME_FRAME,
     variantTimeFrameLabel,
+    type SignatureType,
     type VariantTimeFrame,
     type WasapVariantFilter,
 } from '../../../views/wasap/wasapPageConfig';
 import { SelectorHeadline } from '../../SelectorHeadline';
 import { DefineClinicalSignatureInfo } from '../InfoBlocks';
+import { CollectionCombobox } from '../utils/CollectionCombobox';
 import { LabeledField } from '../utils/LabeledField';
 import { NumericInput } from '../utils/NumericInput';
 import { SequenceTypeSelector } from '../utils/SequenceTypeSelector';
 
-type SignatureType = 'computed' | 'nextclade';
-
 interface VariantExplorerFilterProps {
     pageState: WasapVariantFilter;
     setPageState: (newState: WasapVariantFilter) => void;
@@ -29,6 +27,7 @@ interface VariantExplorerFilterProps {
     clinicalSequenceLapisBaseUrl: string;
     clinicalSequenceLapisLineageField: string;
     predefinedVariantsQueryResult?: UseQueryResult<CollectionSummary[]>;
+    predefinedVariantsLabel?: string;
 }
 
 export function VariantExplorerFilter({
@@ -37,8 +36,11 @@ export function VariantExplorerFilter({
     clinicalSequenceLapisBaseUrl,
     clinicalSequenceLapisLineageField,
     predefinedVariantsQueryResult,
+    predefinedVariantsLabel = 'Predefined',
 }: VariantExplorerFilterProps) {
-    const [signatureType, setSignatureType] = useState<SignatureType>('computed');
+    const handleSignatureTypeChange = (newType: SignatureType) => {
+        setPageState({ ...pageState, signatureType: newType });
+    };
 
     return (
         <>
@@ -50,18 +52,22 @@ export function VariantExplorerFilter({
                 <LabeledField label='Variant definition source'>
                     <select
                         className='select select-bordered'
-                        value={signatureType}
-                        onChange={(e) => setSignatureType(e.target.value as SignatureType)}
+                        value={pageState.signatureType}
+                        onChange={(e) => handleSignatureTypeChange(e.target.value as SignatureType)}
                     >
                         <option value='computed'>Extracted from clinical sequences</option>
-                        <option value='nextclade'>Nextclade</option>
+                        <option value='predefined'>{predefinedVariantsLabel}</option>
                     </select>
                 </LabeledField>
             )}
-            {signatureType === 'nextclade' && (
-                <NextcladeSignature predefinedVariantsQueryResult={predefinedVariantsQueryResult} />
+            {pageState.signatureType === 'predefined' && (
+                <PredefinedSignature
+                    pageState={pageState}
+                    setPageState={setPageState}
+                    predefinedVariantsQueryResult={predefinedVariantsQueryResult}
+                />
             )}
-            {signatureType === 'computed' && (
+            {pageState.signatureType === 'computed' && (
                 <Inset className='mt-4 p-2'>
                     <SelectorHeadline info={<DefineClinicalSignatureInfo />}>
                         Define Clinical Signature
@@ -132,28 +138,34 @@ export function VariantExplorerFilter({
     );
 }
 
-function NextcladeSignature({
+function PredefinedSignature({
+    pageState,
+    setPageState,
     predefinedVariantsQueryResult,
 }: {
+    pageState: WasapVariantFilter;
+    setPageState: (newState: WasapVariantFilter) => void;
     predefinedVariantsQueryResult: UseQueryResult<CollectionSummary[]> | undefined;
 }) {
-    const [selectedCollection, setSelectedCollection] = useState<CollectionSummary | null>(null);
-    const [newMutationsOnly, setNewMutationsOnly] = useState(false);
-
     const collections = predefinedVariantsQueryResult?.data ?? [];
+    const selectedCollection = collections.find((c) => c.id === pageState.collectionId) ?? null;
 
     return (
         <Inset className='mt-4 p-2'>
             <LabeledField label='Variant'>
-                <CollectionCombobox collections={collections} value={selectedCollection} onChange={setSelectedCollection} />
+                <CollectionCombobox
+                    collections={collections}
+                    value={selectedCollection}
+                    onChange={(c) => setPageState({ ...pageState, collectionId: c?.id })}
+                />
             </LabeledField>
             <div className='pt-2 text-sm'>
                 <input
                     className='accent-primary'
                     type='checkbox'
                     id='newMutationsOnly'
-                    checked={newMutationsOnly}
-                    onChange={(e) => setNewMutationsOnly(e.target.checked)}
+                    checked={pageState.newMutationsOnly ?? false}
+                    onChange={(e) => setPageState({ ...pageState, newMutationsOnly: e.target.checked })}
                 />
                 <label htmlFor='newMutationsOnly' className='pl-2'>
                     Mutation not in parent
diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
index 0a1300b2c..487affe49 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
@@ -27,19 +27,28 @@ export function CollectionCombobox({
 
     const buttonRef = useRef<HTMLButtonElement>(null);
 
-    const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, inputValue, closeMenu, reset } =
-        useCombobox({
-            items: filteredCollections,
-            itemToString: (item) => item?.name ?? '',
-            selectedItem: value,
-            onInputValueChange({ inputValue }) {
-                setInputIsInvalid(false);
-                setInputFilter(inputValue.trim());
-            },
-            onSelectedItemChange({ selectedItem }) {
-                onChange(selectedItem ?? null);
-            },
-        });
+    const {
+        isOpen,
+        getToggleButtonProps,
+        getMenuProps,
+        getInputProps,
+        highlightedIndex,
+        getItemProps,
+        inputValue,
+        closeMenu,
+        reset,
+    } = useCombobox({
+        items: filteredCollections,
+        itemToString: (item) => item?.name ?? '',
+        selectedItem: value,
+        onInputValueChange({ inputValue }) {
+            setInputIsInvalid(false);
+            setInputFilter(inputValue.trim());
+        },
+        onSelectedItemChange({ selectedItem }) {
+            onChange(selectedItem ?? null);
+        },
+    });
 
     const onInputBlur = () => {
         if (inputValue === '') {
@@ -57,45 +66,59 @@ export function CollectionCombobox({
     return (
         <div className='relative w-full'>
             <div
-                className={`flex gap-0.5 input w-full ${inputIsInvalid ? 'input-error' : 'input-bordered'}`}
+                className={`input flex w-full gap-0.5 ${inputIsInvalid ? 'input-error' : 'input-bordered'}`}
                 onBlur={(e) => {
                     if (e.relatedTarget !== buttonRef.current) {
                         closeMenu();
                     }
                 }}
             >
-                <input placeholder={placeholderText} className='w-full p-1.5' {...getInputProps()} onBlur={onInputBlur} />
+                <input
+                    placeholder={placeholderText}
+                    className='w-full p-1.5'
+                    {...getInputProps()}
+                    onBlur={onInputBlur}
+                />
                 {inputValue !== '' && (
                     <button
                         aria-label='clear selection'
                         className='px-2'
                         type='button'
                         tabIndex={-1}
-                        onClick={() => { reset(); onChange(null); }}
+                        onClick={() => {
+                            reset();
+                            onChange(null);
+                        }}
                     >
                         ×
                     </button>
                 )}
-                <button aria-label='toggle menu' className='px-2' type='button' {...getToggleButtonProps()} ref={buttonRef}>
+                <button
+                    aria-label='toggle menu'
+                    className='px-2'
+                    type='button'
+                    {...getToggleButtonProps()}
+                    ref={buttonRef}
+                >
                     {isOpen ? <>↑</> : <>↓</>}
                 </button>
             </div>
             <ul
-                className={`absolute bg-base-100 border border-base-300 mt-1 shadow-md max-h-80 overflow-y-auto z-10 w-full ${isOpen ? '' : 'hidden'}`}
+                className={`bg-base-100 border-base-300 absolute z-10 mt-1 max-h-80 w-full overflow-y-auto border shadow-md ${isOpen ? '' : 'hidden'}`}
                 {...getMenuProps()}
             >
                 {filteredCollections.length > 0 ? (
                     filteredCollections.map((item, index) => (
                         <li
                             key={item.id}
-                            className={`py-2 px-3 cursor-pointer ${highlightedIndex === index ? 'bg-base-200' : ''} ${value?.id === item.id ? 'font-bold' : ''}`}
+                            className={`cursor-pointer px-3 py-2 ${highlightedIndex === index ? 'bg-base-200' : ''} ${value?.id === item.id ? 'font-bold' : ''}`}
                             {...getItemProps({ item, index })}
                         >
                             {item.name}
                         </li>
                     ))
                 ) : (
-                    <li className='py-2 px-3 text-sm text-base-content/60'>No variants found.</li>
+                    <li className='text-base-content/60 px-3 py-2 text-sm'>No variants found.</li>
                 )}
             </ul>
         </div>
diff --git a/website/src/components/views/wasap/WasapPage.tsx b/website/src/components/views/wasap/WasapPage.tsx
index 85b5be6a4..6d5863fd3 100644
--- a/website/src/components/views/wasap/WasapPage.tsx
+++ b/website/src/components/views/wasap/WasapPage.tsx
@@ -101,15 +101,17 @@ export const WasapPageInner: FC<WasapPageProps> = ({ config, resistanceData }) =
                                             customColumns={data.customColumns}
                                         />
                                     )}
-                                    {analysis.mode === 'variant' && config.variantAnalysisModeEnabled && (
-                                        <VariantFetchInfo
-                                            analysis={analysis}
-                                            clinicalLapisBaseUrl={config.clinicalLapis.lapisBaseUrl}
-                                            clinicalLapisLineageField={config.clinicalLapis.lineageField}
-                                            clinicalLapisDateField={config.clinicalLapis.dateField}
-                                            warningThreshold={config.clinicalSequenceCountWarningThreshold}
-                                        />
-                                    )}
+                                    {analysis.mode === 'variant' &&
+                                        analysis.signatureType === 'computed' &&
+                                        config.variantAnalysisModeEnabled && (
+                                            <VariantFetchInfo
+                                                analysis={analysis}
+                                                clinicalLapisBaseUrl={config.clinicalLapis.lapisBaseUrl}
+                                                clinicalLapisLineageField={config.clinicalLapis.lineageField}
+                                                clinicalLapisDateField={config.clinicalLapis.dateField}
+                                                warningThreshold={config.clinicalSequenceCountWarningThreshold}
+                                            />
+                                        )}
                                 </>
                             ) : (
                                 <>
diff --git a/website/src/components/views/wasap/useWasapPageData.ts b/website/src/components/views/wasap/useWasapPageData.ts
index 5799daf5e..7f2631c43 100644
--- a/website/src/components/views/wasap/useWasapPageData.ts
+++ b/website/src/components/views/wasap/useWasapPageData.ts
@@ -68,6 +68,23 @@ function fetchManualModeData(config: WasapPageConfig, analysis: WasapManualFilte
 async function fetchVariantModeData(
     config: WasapPageConfig,
     analysis: WasapVariantFilter,
+): Promise<WasapMutationsData> {
+    if (!config.variantAnalysisModeEnabled) {
+        throw Error("Cannot fetch data, 'variant' mode is not enabled.");
+    }
+    switch (analysis.signatureType) {
+        case 'computed':
+            return fetchVariantComputedModeData(config, analysis);
+        case 'predefined':
+            // TODO - Implement the fetching.
+            // we need to fetch the collection by ID
+            throw new Error('Predefined variant mode is not yet implemented.');
+    }
+}
+
+async function fetchVariantComputedModeData(
+    config: WasapPageConfig,
+    analysis: WasapVariantFilter,
 ): Promise<WasapMutationsData> {
     if (!config.variantAnalysisModeEnabled) {
         throw Error("Cannot fetch data, 'variant' mode is not enabled.");
diff --git a/website/src/components/views/wasap/wasapPageConfig.ts b/website/src/components/views/wasap/wasapPageConfig.ts
index 1c518f04d..11a6a4822 100644
--- a/website/src/components/views/wasap/wasapPageConfig.ts
+++ b/website/src/components/views/wasap/wasapPageConfig.ts
@@ -75,6 +75,7 @@ type VariantAnalysisModeConfig =
               // TODO: find a better source for this — the organism key should already be known from the page config
               collectionsOrganism: string;
               collectionsTag: string;
+              variantSourceLabel?: string;
           };
           clinicalLapis: {
               lapisBaseUrl: string;
@@ -201,14 +202,21 @@ export function variantTimeFrameLabel(timeFrame: VariantTimeFrame): string {
     }
 }
 
+export type SignatureType = 'computed' | 'predefined';
+
 export type WasapVariantFilter = {
     mode: 'variant';
+    signatureType: SignatureType;
     sequenceType: SequenceType;
+    // computed signature fields
     variant?: string;
     minProportion: number;
     minCount: number;
     minJaccard: number;
     timeFrame: VariantTimeFrame;
+    // predefined signature fields
+    collectionId?: number;
+    newMutationsOnly?: boolean;
 };
 
 export type WasapResistanceFilter = {
diff --git a/website/src/types/wastewaterConfig.ts b/website/src/types/wastewaterConfig.ts
index ac08c1a71..4e3452b24 100644
--- a/website/src/types/wastewaterConfig.ts
+++ b/website/src/types/wastewaterConfig.ts
@@ -60,6 +60,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
             collectionsUserId: 1,
             collectionsOrganism: wastewaterOrganisms.covid,
             collectionsTag: '#pango-lineage',
+            variantSourceLabel: 'Nextclade',
         },
         clinicalLapis: {
             lapisBaseUrl: 'https://lapis.cov-spectrum.org/open/v2',
@@ -81,6 +82,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
             },
             variant: {
                 mode: 'variant',
+                signatureType: 'computed',
                 sequenceType: 'nucleotide',
                 variant: 'XFG*',
                 minProportion: 0.8,
@@ -136,6 +138,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
             },
             variant: {
                 mode: 'variant',
+                signatureType: 'computed',
                 sequenceType: 'nucleotide',
                 variant: 'A.D.1*',
                 minProportion: 0.8,
@@ -177,6 +180,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
             },
             variant: {
                 mode: 'variant',
+                signatureType: 'computed',
                 sequenceType: 'nucleotide',
                 variant: 'B.D.E.1*',
                 minProportion: 0.8,
diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
index 6656024f4..45c629b79 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
@@ -51,6 +51,7 @@ const config: WasapPageConfig = {
         },
         variant: {
             mode: 'variant',
+            signatureType: 'computed',
             sequenceType: 'nucleotide',
             variant: 'XFG*',
             minProportion: 0.8,
diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
index 37f6909a4..a8eccdd70 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
@@ -7,6 +7,7 @@ import type { BaselineFilterConfig } from '../../components/pageStateSelectors/B
 import {
     enabledAnalysisModes,
     type ExcludeSetName,
+    type SignatureType,
     type VariantTimeFrame,
     type WasapAnalysisFilter,
     type WasapAnalysisMode,
@@ -52,12 +53,13 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                     mutations: texts.mutations?.split('|'),
                 };
                 break;
-            case 'variant':
+            case 'variant': {
                 if (!this.config.variantAnalysisModeEnabled) {
                     throw Error("The 'variant' analysis mode is not enabled.");
                 }
                 analysis = {
                     mode,
+                    signatureType: (texts.signatureType as SignatureType | undefined) ?? 'computed',
                     sequenceType: providedSequenceType ?? this.config.filterDefaults.variant.sequenceType,
                     variant: texts.variant ?? this.config.filterDefaults.variant.variant,
                     minProportion: Number(texts.minProportion ?? this.config.filterDefaults.variant.minProportion),
@@ -66,8 +68,11 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                     timeFrame:
                         (texts.timeFrame as VariantTimeFrame | undefined) ??
                         this.config.filterDefaults.variant.timeFrame,
+                    collectionId: texts.collectionId ? Number(texts.collectionId) : undefined,
+                    newMutationsOnly: texts.newMutationsOnly === 'true',
                 };
                 break;
+            }
             case 'resistance':
                 if (!this.config.resistanceAnalysisModeEnabled) {
                     throw Error("The 'resistance' analysis mode is not enabled.");
@@ -135,11 +140,23 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                 break;
             case 'variant':
                 setSearchFromString(search, 'sequenceType', analysis.sequenceType);
-                setSearchFromString(search, 'variant', analysis.variant);
-                setSearchFromString(search, 'minProportion', String(analysis.minProportion));
-                setSearchFromString(search, 'minCount', String(analysis.minCount));
-                setSearchFromString(search, 'minJaccard', String(analysis.minJaccard));
-                setSearchFromString(search, 'timeFrame', analysis.timeFrame);
+                if (analysis.signatureType === 'predefined') {
+                    setSearchFromString(search, 'signatureType', 'predefined');
+                    setSearchFromString(
+                        search,
+                        'collectionId',
+                        analysis.collectionId ? String(analysis.collectionId) : undefined,
+                    );
+                    if (analysis.newMutationsOnly) {
+                        setSearchFromString(search, 'newMutationsOnly', 'true');
+                    }
+                } else {
+                    setSearchFromString(search, 'variant', analysis.variant);
+                    setSearchFromString(search, 'minProportion', String(analysis.minProportion));
+                    setSearchFromString(search, 'minCount', String(analysis.minCount));
+                    setSearchFromString(search, 'minJaccard', String(analysis.minJaccard));
+                    setSearchFromString(search, 'timeFrame', analysis.timeFrame);
+                }
                 break;
             case 'resistance':
                 setSearchFromString(search, 'resistanceSet', analysis.resistanceSet);
@@ -236,5 +253,13 @@ function generateWasapFilterConfig(pageConfig: WasapPageConfig): BaselineFilterC
             type: 'text',
             lapisField: 'collectionId',
         },
+        {
+            type: 'text',
+            lapisField: 'signatureType',
+        },
+        {
+            type: 'text',
+            lapisField: 'newMutationsOnly',
+        },
     ];
 }

From 56d4135628d66aff4b8b704a4f5b0793206bd049 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 11:19:51 +0200
Subject: [PATCH 06/31] feat(website): implement predefined variant mode data
 fetching

Fetches collection from backend by ID and picks the correct variant
(nucleotide/amino acid, new-only or all) by name. Also adds error
logging via getClientLogger when the wasap page data query fails.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/views/wasap/WasapPage.tsx  | 14 ++++++--
 .../views/wasap/useWasapPageData.ts           | 34 +++++++++++++++++--
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/website/src/components/views/wasap/WasapPage.tsx b/website/src/components/views/wasap/WasapPage.tsx
index 6d5863fd3..899d97437 100644
--- a/website/src/components/views/wasap/WasapPage.tsx
+++ b/website/src/components/views/wasap/WasapPage.tsx
@@ -1,6 +1,10 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { type FC } from 'react';
 
+import { getClientLogger } from '../../../clientLogger';
+
+const logger = getClientLogger('WasapPage');
+
 import { CollectionInfo } from './components/CollectionInfo';
 import { NoDataHelperText } from './components/NoDataHelperText';
 import { VariantFetchInfo } from './components/VariantFetchInfo';
@@ -37,7 +41,13 @@ export const WasapPageInner: FC<WasapPageProps> = ({ config, resistanceData }) =
 
     const { mutationAnnotations, displayMutationsBySet } = resistanceData;
     // fetch which mutations should be analyzed
-    const { data, isPending, isError } = useWasapPageData(config, displayMutationsBySet, analysis);
+    const { data, isPending, isError, error } = useWasapPageData(config, displayMutationsBySet, analysis);
+
+    useEffect(() => {
+        if (error) {
+            logger.error(`Failed to fetch wasap page data: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }, [error]);
 
     const initialMeanProportionInterval = getInitialMeanProportionInterval(analysis);
 
diff --git a/website/src/components/views/wasap/useWasapPageData.ts b/website/src/components/views/wasap/useWasapPageData.ts
index 7f2631c43..e926d735a 100644
--- a/website/src/components/views/wasap/useWasapPageData.ts
+++ b/website/src/components/views/wasap/useWasapPageData.ts
@@ -12,6 +12,7 @@ import type {
     WasapUntrackedFilter,
     WasapVariantFilter,
 } from './wasapPageConfig';
+import { getBackendServiceForClientside } from '../../../backendApi/backendService';
 import { getCollection } from '../../../covspectrum/getCollection';
 import { detailedMutationsToQuery } from '../../../covspectrum/variantConversionUtil';
 import { getCladeLineages } from '../../../lapis/getCladeLineages';
@@ -76,9 +77,7 @@ async function fetchVariantModeData(
         case 'computed':
             return fetchVariantComputedModeData(config, analysis);
         case 'predefined':
-            // TODO - Implement the fetching.
-            // we need to fetch the collection by ID
-            throw new Error('Predefined variant mode is not yet implemented.');
+            return fetchVariantPredefinedModeData(analysis);
     }
 }
 
@@ -114,6 +113,35 @@ async function fetchVariantComputedModeData(
     };
 }
 
+async function fetchVariantPredefinedModeData(analysis: WasapVariantFilter): Promise<WasapMutationsData> {
+    if (!analysis.collectionId) {
+        throw new Error('No collection selected for predefined variant mode.');
+    }
+    const collection = await getBackendServiceForClientside().getCollection({ id: String(analysis.collectionId) });
+
+    let variantName: string;
+    if (analysis.sequenceType === 'nucleotide') {
+        variantName = analysis.newMutationsOnly ? 'New nucleotide substitutions' : 'Nucleotide substitutions';
+    } else {
+        variantName = analysis.newMutationsOnly ? 'New amino acid substitutions' : 'Amino acid substitutions';
+    }
+
+    const variant = collection.variants.find((v) => v.name === variantName);
+    if (!variant) {
+        throw new Error(`Variant "${variantName}" not found in collection ${collection.id}.`);
+    }
+    if (variant.type !== 'filterObject') {
+        throw new Error(`Variant "${variantName}" in collection ${collection.id} is not a filterObject variant.`);
+    }
+
+    const mutations =
+        analysis.sequenceType === 'nucleotide'
+            ? (variant.filterObject.nucleotideMutations ?? [])
+            : (variant.filterObject.aminoAcidMutations ?? []);
+
+    return { type: 'mutations', displayMutations: mutations };
+}
+
 function fetchResistanceModeData(
     displayMutationsBySet: Record<string, string[]>,
     analysis: WasapResistanceFilter,

From 81758699c4d4b0a5888107e3017b76466a325b06 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 13:31:49 +0200
Subject: [PATCH 07/31] fix lint

---
 .../src/components/views/wasap/WasapPage.tsx  | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/website/src/components/views/wasap/WasapPage.tsx b/website/src/components/views/wasap/WasapPage.tsx
index 899d97437..50a1950da 100644
--- a/website/src/components/views/wasap/WasapPage.tsx
+++ b/website/src/components/views/wasap/WasapPage.tsx
@@ -1,19 +1,8 @@
 import { useEffect, useMemo } from 'react';
 import { type FC } from 'react';
 
-import { getClientLogger } from '../../../clientLogger';
-
-const logger = getClientLogger('WasapPage');
-
-import { CollectionInfo } from './components/CollectionInfo';
-import { NoDataHelperText } from './components/NoDataHelperText';
-import { VariantFetchInfo } from './components/VariantFetchInfo';
-import { WasapStats } from './components/WasapStats';
-import { getInitialMeanProportionInterval } from './initialMeanProportionInterval';
-import type { ResistanceData } from './resistanceData';
-import { useWasapPageData } from './useWasapPageData';
-import type { WasapPageConfig } from './wasapPageConfig';
 import { withQueryProvider } from '../../../backendApi/withQueryProvider';
+import { getClientLogger } from '../../../clientLogger';
 import { defaultBreadcrumbs } from '../../../layouts/Breadcrumbs.tsx';
 import { DataPageLayout } from '../../../layouts/OrganismPage/DataPageLayout.tsx';
 import { dataOrigins } from '../../../types/dataOrigins.ts';
@@ -24,6 +13,16 @@ import { GsMutationsOverTime } from '../../genspectrum/GsMutationsOverTime';
 import { GsQueriesOverTime } from '../../genspectrum/GsQueriesOverTime.tsx';
 import { WasapPageStateSelector } from '../../pageStateSelectors/wasap/WasapPageStateSelector';
 import { usePageState } from '../usePageState.ts';
+import { CollectionInfo } from './components/CollectionInfo';
+import { NoDataHelperText } from './components/NoDataHelperText';
+import { VariantFetchInfo } from './components/VariantFetchInfo';
+import { WasapStats } from './components/WasapStats';
+import { getInitialMeanProportionInterval } from './initialMeanProportionInterval';
+import type { ResistanceData } from './resistanceData';
+import { useWasapPageData } from './useWasapPageData';
+import type { WasapPageConfig } from './wasapPageConfig';
+
+const logger = getClientLogger('WasapPage');
 
 export type WasapPageProps = {
     config: WasapPageConfig;

From bd4cefd6be21c821d03761a576a7a1d545cb7391 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 13:40:20 +0200
Subject: [PATCH 08/31] docs(website): update Variant Explorer info box for
 predefined variant mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/pageStateSelectors/wasap/InfoBlocks.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx b/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx
index c75b1b337..715d4940f 100644
--- a/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx
+++ b/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx
@@ -144,12 +144,12 @@ export function ExplorationModeInfo() {
                 </li>
                 <li>
                     <span className='font-semibold text-gray-900'>Variant Explorer:</span> track variant-specific
-                    mutations over time. Variant-specific mutations are computed based on user parameters and filtering
-                    clinical sequences from{' '}
+                    mutations over time. Variants can be defined in two ways: by selecting a predefined variant from a
+                    curated list, or by filtering clinical sequences from{' '}
                     <a className='link' href='https://cov-spectrum.org'>
                         CovSpectrum
-                    </a>
-                    .
+                    </a>{' '}
+                    based on user parameters.
                 </li>
                 <li>
                     <span className='font-semibold text-gray-900'>Untracked Mutations:</span> novel mutations not yet

From f5e3c378c7e760edf1794f73cdbb284d18b3a8b7 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 13:42:07 +0200
Subject: [PATCH 09/31] docs(website): add JSDoc to SignatureType

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/components/views/wasap/wasapPageConfig.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/website/src/components/views/wasap/wasapPageConfig.ts b/website/src/components/views/wasap/wasapPageConfig.ts
index 11a6a4822..c1a81581d 100644
--- a/website/src/components/views/wasap/wasapPageConfig.ts
+++ b/website/src/components/views/wasap/wasapPageConfig.ts
@@ -202,6 +202,10 @@ export function variantTimeFrameLabel(timeFrame: VariantTimeFrame): string {
     }
 }
 
+/**
+ * The type of variant mutation signature. `predefined` is a pre-defined list pulled from online,
+ * `computed` computes the list of signature mutations for a variant based on user parameters.
+ */
 export type SignatureType = 'computed' | 'predefined';
 
 export type WasapVariantFilter = {

From 9b244de209752ecc0e18d036a15731789e12f3df Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 13:50:07 +0200
Subject: [PATCH 10/31] refactor(website): move organism internalName into
 WasapPageConfig

Removes the redundant collectionsOrganism field from predefinedVariantsSource
and exposes it as internalName on the base config, where it was already
implicitly known as the map key.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pageStateSelectors/wasap/WasapPageStateSelector.tsx    | 4 ++--
 website/src/components/views/wasap/wasapPageConfig.ts      | 7 +++++--
 website/src/types/wastewaterConfig.ts                      | 4 +++-
 .../views/pageStateHandlers/WasapPageStateHandler.spec.ts  | 1 +
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index 8e4665009..1694e173a 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -111,9 +111,9 @@ export function WasapPageStateSelector({
                     'This predefined variants query was called despite it being disabled. This should not happen.',
                 );
             }
-            const { collectionsUserId, collectionsOrganism, collectionsTag } = config.predefinedVariantsSource;
+            const { collectionsUserId, collectionsTag } = config.predefinedVariantsSource;
             return getBackendServiceForClientside()
-                .getCollectionSummaries({ userId: collectionsUserId, organism: collectionsOrganism })
+                .getCollectionSummaries({ userId: collectionsUserId, organism: config.internalName })
                 .then((collections) => collections.filter((c) => c.description?.includes(collectionsTag) ?? false));
         },
     });
diff --git a/website/src/components/views/wasap/wasapPageConfig.ts b/website/src/components/views/wasap/wasapPageConfig.ts
index c1a81581d..3cde304db 100644
--- a/website/src/components/views/wasap/wasapPageConfig.ts
+++ b/website/src/components/views/wasap/wasapPageConfig.ts
@@ -9,6 +9,11 @@ export type WasapPageConfig = WasapPageConfigBase & AnalysisModeConfigs;
  * Base settings that apply to all modes.
  */
 export type WasapPageConfigBase = {
+    /**
+     * The internal identifier of the organism, i.e. 'covid'. Used as a key in maps and API parameters.
+     */
+    internalName: string;
+
     /**
      * The name of the organism, i.e. 'Sars-CoV-2'
      */
@@ -72,8 +77,6 @@ type VariantAnalysisModeConfig =
           variantAnalysisModeEnabled: true;
           predefinedVariantsSource?: {
               collectionsUserId: number;
-              // TODO: find a better source for this — the organism key should already be known from the page config
-              collectionsOrganism: string;
               collectionsTag: string;
               variantSourceLabel?: string;
           };
diff --git a/website/src/types/wastewaterConfig.ts b/website/src/types/wastewaterConfig.ts
index 4e3452b24..951eb184b 100644
--- a/website/src/types/wastewaterConfig.ts
+++ b/website/src/types/wastewaterConfig.ts
@@ -15,6 +15,7 @@ export const wastewaterPathFragment = 'swiss-wastewater';
 
 export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPageConfig> = {
     [wastewaterOrganisms.covid]: {
+        internalName: wastewaterOrganisms.covid,
         name: 'SARS-CoV-2',
         path: `/${wastewaterPathFragment}/covid`,
         description: 'Analyze SARS-CoV-2 data that was collected by the WISE project.',
@@ -58,7 +59,6 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
         locationNameField: 'locationName',
         predefinedVariantsSource: {
             collectionsUserId: 1,
-            collectionsOrganism: wastewaterOrganisms.covid,
             collectionsTag: '#pango-lineage',
             variantSourceLabel: 'Nextclade',
         },
@@ -107,6 +107,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
         },
     },
     [wastewaterOrganisms.rsvA]: {
+        internalName: wastewaterOrganisms.rsvA,
         name: 'RSV-A',
         path: `/${wastewaterPathFragment}/rsv-a`,
         description: 'Analyze RSV-A data that was collected by the WISE project.',
@@ -149,6 +150,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
         },
     },
     [wastewaterOrganisms.rsvB]: {
+        internalName: wastewaterOrganisms.rsvB,
         name: 'RSV-B',
         path: `/${wastewaterPathFragment}/rsv-b`,
         description: 'Analyze RSV-B data that was collected by the WISE project.',
diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
index 45c629b79..60c06f345 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
@@ -12,6 +12,7 @@ import {
 } from '../../components/views/wasap/wasapPageConfig';
 
 const config: WasapPageConfig = {
+    internalName: 'covid',
     name: 'SARS-CoV-2',
     path: `/wastewater/covid`,
     description: 'Analyze SARS-CoV-2 data that was collected by the WISE project.',

From 832c6530e078bd1ba5505129c658feb78142d5b8 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 13:50:54 +0200
Subject: [PATCH 11/31] fix(website): add missing signatureType to variant
 filter in spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/views/wasap/initialMeanProportionInterval.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/components/views/wasap/initialMeanProportionInterval.spec.ts b/website/src/components/views/wasap/initialMeanProportionInterval.spec.ts
index 03f38a240..521a2e8d9 100644
--- a/website/src/components/views/wasap/initialMeanProportionInterval.spec.ts
+++ b/website/src/components/views/wasap/initialMeanProportionInterval.spec.ts
@@ -27,6 +27,7 @@ describe('getInitialMeanProportionInterval', () => {
     test('other analysis states initially show the full mean proportion range', () => {
         const analysis: WasapAnalysisFilter = {
             mode: 'variant',
+            signatureType: 'computed',
             sequenceType: 'nucleotide',
             variant: 'XFG*',
             minProportion: 0.8,

From a234315f3bd0fd8da36d22bee694c8642564f2e0 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 14:17:00 +0200
Subject: [PATCH 12/31] feat(website): add default collectionId to variant
 filterDefaults

Falls back to the configured default when no collectionId is present in the URL,
mirroring the existing default variant behaviour for computed mode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/types/wastewaterConfig.ts                        | 1 +
 website/src/views/pageStateHandlers/WasapPageStateHandler.ts | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/website/src/types/wastewaterConfig.ts b/website/src/types/wastewaterConfig.ts
index 951eb184b..949d28601 100644
--- a/website/src/types/wastewaterConfig.ts
+++ b/website/src/types/wastewaterConfig.ts
@@ -89,6 +89,7 @@ export const wastewaterOrganismConfigs: Record<WastewaterOrganismName, WasapPage
                 minCount: 15,
                 minJaccard: 0.75,
                 timeFrame: VARIANT_TIME_FRAME.all,
+                collectionId: 4961,
             },
             resistance: {
                 mode: 'resistance',
diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
index a8eccdd70..9d59e51f0 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
@@ -68,7 +68,9 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                     timeFrame:
                         (texts.timeFrame as VariantTimeFrame | undefined) ??
                         this.config.filterDefaults.variant.timeFrame,
-                    collectionId: texts.collectionId ? Number(texts.collectionId) : undefined,
+                    collectionId: texts.collectionId
+                        ? Number(texts.collectionId)
+                        : this.config.filterDefaults.variant.collectionId,
                     newMutationsOnly: texts.newMutationsOnly === 'true',
                 };
                 break;

From f9248cccededd10657c354b51a268c345ae78792 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 15:19:40 +0200
Subject: [PATCH 13/31] docs(website): clarify variant names match collection
 seeder in comment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/components/views/wasap/useWasapPageData.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/components/views/wasap/useWasapPageData.ts b/website/src/components/views/wasap/useWasapPageData.ts
index e926d735a..77db1ff21 100644
--- a/website/src/components/views/wasap/useWasapPageData.ts
+++ b/website/src/components/views/wasap/useWasapPageData.ts
@@ -119,6 +119,7 @@ async function fetchVariantPredefinedModeData(analysis: WasapVariantFilter): Pro
     }
     const collection = await getBackendServiceForClientside().getCollection({ id: String(analysis.collectionId) });
 
+    // These names match the variant names hardcoded in the collection seeder.
     let variantName: string;
     if (analysis.sequenceType === 'nucleotide') {
         variantName = analysis.newMutationsOnly ? 'New nucleotide substitutions' : 'Nucleotide substitutions';

From 6ad2f5daee6997fb7c09daf304b63cfb76dd7550 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 15:24:24 +0200
Subject: [PATCH 14/31] test(website): add variant mode URL round-trip tests
 for predefined signatureType

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../WasapPageStateHandler.spec.ts             | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
index 60c06f345..b905aa66e 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
@@ -269,6 +269,56 @@ describe('WasapPageStateHandler', () => {
             expect(analysis2.minProportion).toBe(analysis1.minProportion);
             expect(analysis2.minJaccard).toBe(analysis1.minJaccard);
         });
+
+        it('defaults signatureType to computed when absent from URL', () => {
+            const url = '/wastewater/covid?analysisMode=variant&';
+            const filter = handler.parsePageStateFromUrl(new URL(`http://example.com${url}`));
+
+            const analysis = filter.analysis as WasapVariantFilter;
+            expect(analysis.signatureType).toBe('computed');
+        });
+
+        it('parses and encodes predefined variant filter with collectionId (round-trip)', () => {
+            const url =
+                '/wastewater/covid?' +
+                'locationName=Z%C3%BCrich+%28ZH%29&' +
+                'granularity=day&' +
+                'analysisMode=variant&' +
+                'sequenceType=nucleotide&' +
+                'signatureType=predefined&' +
+                'collectionId=42&';
+            const filter = handler.parsePageStateFromUrl(new URL(`http://example.com${url}`));
+
+            expect(filter.analysis.mode).toBe('variant');
+            const analysis = filter.analysis as WasapVariantFilter;
+            expect(analysis.signatureType).toBe('predefined');
+            expect(analysis.collectionId).toBe(42);
+            expect(analysis.newMutationsOnly).toBe(false);
+
+            const newUrl = handler.toUrl(filter);
+            expect(newUrl).toBe(url);
+        });
+
+        it('parses and encodes newMutationsOnly=true in predefined variant mode (round-trip)', () => {
+            const url =
+                '/wastewater/covid?' +
+                'locationName=Z%C3%BCrich+%28ZH%29&' +
+                'granularity=day&' +
+                'analysisMode=variant&' +
+                'sequenceType=nucleotide&' +
+                'signatureType=predefined&' +
+                'collectionId=42&' +
+                'newMutationsOnly=true&';
+            const filter = handler.parsePageStateFromUrl(new URL(`http://example.com${url}`));
+
+            expect(filter.analysis.mode).toBe('variant');
+            const analysis = filter.analysis as WasapVariantFilter;
+            expect(analysis.signatureType).toBe('predefined');
+            expect(analysis.newMutationsOnly).toBe(true);
+
+            const newUrl = handler.toUrl(filter);
+            expect(newUrl).toBe(url);
+        });
     });
 
     describe('resistance mode', () => {

From 4748cd196cac18545114e73f28fba63b6a1542bc Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 15:24:34 +0200
Subject: [PATCH 15/31] test(website): add browser tests for CollectionCombobox
 blur and clear behaviour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../utils/CollectionCombobox.browser.spec.tsx | 154 ++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx

diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx
new file mode 100644
index 000000000..ff6817571
--- /dev/null
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx
@@ -0,0 +1,154 @@
+import { describe, expect, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { CollectionCombobox } from './CollectionCombobox';
+import type { CollectionSummary } from '../../../../types/Collection';
+import { it } from '../../../../../test-extend';
+
+const makeCollection = (id: number, name: string): CollectionSummary => ({
+    id,
+    name,
+    ownedBy: 1,
+    organism: 'test',
+    description: null,
+    variantCount: 0,
+});
+
+const collections = [makeCollection(1, 'Alpha'), makeCollection(2, 'Beta'), makeCollection(3, 'Gamma')];
+
+describe('CollectionCombobox', () => {
+    describe('onInputBlur', () => {
+        it('calls onChange(null) when blurred with empty input', async () => {
+            const onChange = vi.fn();
+            const { getByRole } = render(
+                <CollectionCombobox collections={collections} value={collections[0]} onChange={onChange} />,
+            );
+
+            await getByRole('combobox').fill('');
+            getByRole('combobox').element().blur();
+
+            expect(onChange).toHaveBeenCalledWith(null);
+        });
+
+        it('calls onChange with matched collection when blurred with an exact name', async () => {
+            const onChange = vi.fn();
+            const { getByRole } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={onChange} />,
+            );
+
+            await getByRole('combobox').fill('Beta');
+            getByRole('combobox').element().blur();
+
+            expect(onChange).toHaveBeenCalledWith(collections[1]);
+        });
+
+        it('calls onChange with matched collection when input has surrounding whitespace', async () => {
+            const onChange = vi.fn();
+            const { getByRole } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={onChange} />,
+            );
+
+            await getByRole('combobox').fill('  Beta  ');
+            getByRole('combobox').element().blur();
+
+            expect(onChange).toHaveBeenCalledWith(collections[1]);
+        });
+
+        it('shows error state and does not call onChange when blurred with an unrecognised name', async () => {
+            const onChange = vi.fn();
+            const { getByRole } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={onChange} />,
+            );
+
+            await getByRole('combobox').fill('Unknown');
+            getByRole('combobox').element().blur();
+
+            expect(onChange).not.toHaveBeenCalled();
+            const wrapper = getByRole('combobox').element().closest('.input');
+            await expect.element(wrapper as HTMLElement).toHaveClass('input-error');
+        });
+
+        it('clears error state when user starts typing after an invalid blur', async () => {
+            const onChange = vi.fn();
+            const { getByRole } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={onChange} />,
+            );
+
+            await getByRole('combobox').fill('Unknown');
+            getByRole('combobox').element().blur();
+
+            const wrapper = getByRole('combobox').element().closest('.input');
+            await expect.element(wrapper as HTMLElement).toHaveClass('input-error');
+
+            await getByRole('combobox').fill('A');
+            await expect.element(wrapper as HTMLElement).not.toHaveClass('input-error');
+        });
+    });
+
+    describe('clear button', () => {
+        it('is not rendered when input is empty', async () => {
+            const { getByLabelText } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={vi.fn()} />,
+            );
+
+            expect(getByLabelText('clear selection').elements()).toHaveLength(0);
+        });
+
+        it('is visible when a value is selected', async () => {
+            const { getByLabelText } = render(
+                <CollectionCombobox collections={collections} value={collections[0]} onChange={vi.fn()} />,
+            );
+
+            await expect.element(getByLabelText('clear selection')).toBeVisible();
+        });
+
+        it('clears the input and calls onChange(null) when clicked', async () => {
+            const onChange = vi.fn();
+            const { getByLabelText, getByRole } = render(
+                <CollectionCombobox collections={collections} value={collections[0]} onChange={onChange} />,
+            );
+
+            await getByLabelText('clear selection').click();
+
+            expect(onChange).toHaveBeenCalledWith(null);
+            await expect.element(getByRole('combobox')).toHaveValue('');
+        });
+
+        it('disappears after being clicked', async () => {
+            const onChange = vi.fn();
+            const { getByLabelText } = render(
+                <CollectionCombobox collections={collections} value={collections[0]} onChange={onChange} />,
+            );
+
+            await getByLabelText('clear selection').click();
+
+            expect(getByLabelText('clear selection').elements()).toHaveLength(0);
+        });
+    });
+
+    describe('filtering', () => {
+        it('shows only matching items when typing', async () => {
+            const { getByRole, getByText } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={vi.fn()} />,
+            );
+
+            await getByRole('button', { name: 'toggle menu' }).click();
+            await getByRole('combobox').fill('Al');
+
+            await expect.element(getByText('Alpha')).toBeVisible();
+            expect(getByText('Beta').elements()).toHaveLength(0);
+            expect(getByText('Gamma').elements()).toHaveLength(0);
+        });
+
+        it('shows "No variants found" when no collections match the input', async () => {
+            const { getByRole, getByText } = render(
+                <CollectionCombobox collections={collections} value={null} onChange={vi.fn()} />,
+            );
+
+            await getByRole('button', { name: 'toggle menu' }).click();
+            await getByRole('combobox').fill('zzz');
+
+            await expect.element(getByText('No variants found.')).toBeVisible();
+        });
+    });
+});

From 20cfcffa956db8ce4c948fc4aa87d6be248f1b4d Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 15:34:41 +0200
Subject: [PATCH 16/31] fix(website): use userEvent.tab() to trigger blur in
 CollectionCombobox tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../utils/CollectionCombobox.browser.spec.tsx     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx
index ff6817571..1e887fbd9 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.browser.spec.tsx
@@ -1,9 +1,10 @@
+import { userEvent } from '@vitest/browser/context';
 import { describe, expect, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 
 import { CollectionCombobox } from './CollectionCombobox';
-import type { CollectionSummary } from '../../../../types/Collection';
 import { it } from '../../../../../test-extend';
+import type { CollectionSummary } from '../../../../types/Collection';
 
 const makeCollection = (id: number, name: string): CollectionSummary => ({
     id,
@@ -25,7 +26,7 @@ describe('CollectionCombobox', () => {
             );
 
             await getByRole('combobox').fill('');
-            getByRole('combobox').element().blur();
+            await userEvent.tab();
 
             expect(onChange).toHaveBeenCalledWith(null);
         });
@@ -37,7 +38,7 @@ describe('CollectionCombobox', () => {
             );
 
             await getByRole('combobox').fill('Beta');
-            getByRole('combobox').element().blur();
+            await userEvent.tab();
 
             expect(onChange).toHaveBeenCalledWith(collections[1]);
         });
@@ -49,7 +50,7 @@ describe('CollectionCombobox', () => {
             );
 
             await getByRole('combobox').fill('  Beta  ');
-            getByRole('combobox').element().blur();
+            await userEvent.tab();
 
             expect(onChange).toHaveBeenCalledWith(collections[1]);
         });
@@ -61,7 +62,7 @@ describe('CollectionCombobox', () => {
             );
 
             await getByRole('combobox').fill('Unknown');
-            getByRole('combobox').element().blur();
+            await userEvent.tab();
 
             expect(onChange).not.toHaveBeenCalled();
             const wrapper = getByRole('combobox').element().closest('.input');
@@ -75,7 +76,7 @@ describe('CollectionCombobox', () => {
             );
 
             await getByRole('combobox').fill('Unknown');
-            getByRole('combobox').element().blur();
+            await userEvent.tab();
 
             const wrapper = getByRole('combobox').element().closest('.input');
             await expect.element(wrapper as HTMLElement).toHaveClass('input-error');
@@ -86,7 +87,7 @@ describe('CollectionCombobox', () => {
     });
 
     describe('clear button', () => {
-        it('is not rendered when input is empty', async () => {
+        it('is not rendered when input is empty', () => {
             const { getByLabelText } = render(
                 <CollectionCombobox collections={collections} value={null} onChange={vi.fn()} />,
             );

From e3104e2014541daa2a415d84468e1dfde4a2c1b0 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 15:37:19 +0200
Subject: [PATCH 17/31] test(website): add browser tests for predefined
 signature type in VariantExplorerFilter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../VariantExplorerFilter.browser.spec.tsx    | 96 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
index bf7d94410..9d8cff3ea 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
@@ -1,14 +1,22 @@
-import { userEvent } from '@vitest/browser/context';
+import { page, userEvent } from '@vitest/browser/context';
+import { type UseQueryResult } from '@tanstack/react-query';
 import { describe, expect, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 
 import { VariantExplorerFilter } from './VariantExplorerFilter';
 import { DUMMY_LAPIS_URL, type LapisRouteMocker } from '../../../../../routeMocker';
 import { it } from '../../../../../test-extend';
+import type { CollectionSummary } from '../../../../types/Collection';
 import type { WasapVariantFilter } from '../../../views/wasap/wasapPageConfig';
 
 const DUMMY_LAPIS_URL_2 = 'http://lapis2.dummy';
 
+const DUMMY_COLLECTIONS: CollectionSummary[] = [
+    { id: 1, name: 'XBB.1.5', ownedBy: 1, organism: 'SARS-CoV-2', description: null, variantCount: 5 },
+    { id: 2, name: 'JN.1', ownedBy: 1, organism: 'SARS-CoV-2', description: null, variantCount: 3 },
+];
+const mockPredefinedQueryResult = { data: DUMMY_COLLECTIONS } as unknown as UseQueryResult<CollectionSummary[]>;
+
 describe('VariantExplorerFilter', () => {
     const defaultPageState: WasapVariantFilter = {
         mode: 'variant',
@@ -21,6 +29,11 @@ describe('VariantExplorerFilter', () => {
         timeFrame: 'all',
     };
 
+    const predefinedPageState: WasapVariantFilter = {
+        ...defaultPageState,
+        signatureType: 'predefined',
+    };
+
     it('calls setPageState when changing sequence type', async ({ routeMockers: { lapis } }) => {
         setupLapisMocks(lapis);
         const mockSetPageState = vi.fn();
@@ -99,6 +112,87 @@ describe('VariantExplorerFilter', () => {
             minProportion: 0.1,
         });
     });
+
+    it('calls setPageState when switching to predefined signature type', async ({ routeMockers: { lapis } }) => {
+        setupLapisMocks(lapis);
+        const mockSetPageState = vi.fn();
+
+        render(
+            <gs-app lapis={DUMMY_LAPIS_URL}>
+                <VariantExplorerFilter
+                    pageState={defaultPageState}
+                    setPageState={mockSetPageState}
+                    clinicalSequenceLapisBaseUrl={DUMMY_LAPIS_URL_2}
+                    clinicalSequenceLapisLineageField='pangoLineage'
+                    predefinedVariantsQueryResult={mockPredefinedQueryResult}
+                />
+            </gs-app>,
+        );
+
+        const variantSourceSelect = page.getByRole('combobox').first();
+        await variantSourceSelect.selectOptions('predefined');
+
+        expect(mockSetPageState).toHaveBeenCalledWith({
+            ...defaultPageState,
+            signatureType: 'predefined',
+        });
+    });
+
+    it('calls setPageState when selecting a predefined collection', async ({ routeMockers: { lapis } }) => {
+        setupLapisMocks(lapis);
+        const mockSetPageState = vi.fn();
+
+        const { getByRole } = render(
+            <gs-app lapis={DUMMY_LAPIS_URL}>
+                <VariantExplorerFilter
+                    pageState={predefinedPageState}
+                    setPageState={mockSetPageState}
+                    clinicalSequenceLapisBaseUrl={DUMMY_LAPIS_URL_2}
+                    clinicalSequenceLapisLineageField='pangoLineage'
+                    predefinedVariantsQueryResult={mockPredefinedQueryResult}
+                />
+            </gs-app>,
+        );
+
+        const collectionInput = page.getByPlaceholder('Select variant');
+        await collectionInput.click();
+        await userEvent.type(collectionInput, 'XBB');
+
+        const option = await vi.waitFor(() => getByRole('option', { name: 'XBB.1.5', exact: true }));
+        await option.click();
+
+        await vi.waitFor(() => {
+            expect(mockSetPageState).toHaveBeenCalledWith({
+                ...predefinedPageState,
+                collectionId: 1,
+            });
+        });
+    });
+
+    it('calls setPageState when toggling "Mutation not in parent"', async ({ routeMockers: { lapis } }) => {
+        setupLapisMocks(lapis);
+        const mockSetPageState = vi.fn();
+
+        const { getByLabelText } = render(
+            <gs-app lapis={DUMMY_LAPIS_URL}>
+                <VariantExplorerFilter
+                    pageState={predefinedPageState}
+                    setPageState={mockSetPageState}
+                    clinicalSequenceLapisBaseUrl={DUMMY_LAPIS_URL_2}
+                    clinicalSequenceLapisLineageField='pangoLineage'
+                    predefinedVariantsQueryResult={mockPredefinedQueryResult}
+                />
+            </gs-app>,
+        );
+
+        const checkbox = getByLabelText('Mutation not in parent');
+        await checkbox.click();
+
+        expect(mockSetPageState).toHaveBeenCalledWith({
+            ...predefinedPageState,
+            newMutationsOnly: true,
+        });
+    });
 });
 
 function setupLapisMocks(lapisRouteMocker: LapisRouteMocker) {

From ffc2cbd5bb1a134b8536af0d9640669a5f3134d9 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 1 Jun 2026 15:39:29 +0200
Subject: [PATCH 18/31] fix(website): fix import order in VariantExplorerFilter
 browser spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../wasap/filters/VariantExplorerFilter.browser.spec.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
index 9d8cff3ea..e3c3e69ff 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
@@ -1,5 +1,5 @@
-import { page, userEvent } from '@vitest/browser/context';
 import { type UseQueryResult } from '@tanstack/react-query';
+import { page, userEvent } from '@vitest/browser/context';
 import { describe, expect, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 

From 3d7e0df9953e099c88ff6f2c38404f3849197945 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 2 Jun 2026 14:54:53 +0200
Subject: [PATCH 19/31] fix(website): use config default for signatureType
 fallback instead of hardcoded value

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/views/pageStateHandlers/WasapPageStateHandler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
index 9d59e51f0..66122dd74 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
@@ -59,7 +59,7 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                 }
                 analysis = {
                     mode,
-                    signatureType: (texts.signatureType as SignatureType | undefined) ?? 'computed',
+                    signatureType: (texts.signatureType as SignatureType | undefined) ?? this.config.filterDefaults.variant.signatureType,
                     sequenceType: providedSequenceType ?? this.config.filterDefaults.variant.sequenceType,
                     variant: texts.variant ?? this.config.filterDefaults.variant.variant,
                     minProportion: Number(texts.minProportion ?? this.config.filterDefaults.variant.minProportion),

From b41459929cf78dd8fd964db0fc8286d5cfbbfb7a Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 2 Jun 2026 14:58:48 +0200
Subject: [PATCH 20/31] fix(website): fix Downshift onBlur wiring and keyboard
 accessibility in CollectionCombobox

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pageStateSelectors/wasap/utils/CollectionCombobox.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
index 487affe49..222781f42 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
@@ -76,15 +76,14 @@ export function CollectionCombobox({
                 <input
                     placeholder={placeholderText}
                     className='w-full p-1.5'
-                    {...getInputProps()}
-                    onBlur={onInputBlur}
+                    {...getInputProps({ onBlur: onInputBlur })}
                 />
                 {inputValue !== '' && (
                     <button
                         aria-label='clear selection'
                         className='px-2'
                         type='button'
-                        tabIndex={-1}
+
                         onClick={() => {
                             reset();
                             onChange(null);

From d3fb8c35faf8bfc832cf1672a2d9baedcbe96e70 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 2 Jun 2026 15:09:26 +0200
Subject: [PATCH 21/31] fix(website): restore tabIndex={-1} on clear button in
 CollectionCombobox

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pageStateSelectors/wasap/utils/CollectionCombobox.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
index 222781f42..c0c6e629c 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
@@ -82,6 +82,7 @@ export function CollectionCombobox({
                     <button
                         aria-label='clear selection'
                         className='px-2'
+                        tabIndex={-1}
                         type='button'
 
                         onClick={() => {

From 9347caa6339421fc1e84a3dff12cbb4a2ec51a0f Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 2 Jun 2026 15:10:02 +0200
Subject: [PATCH 22/31] fm

---
 website/src/backendApi/backendService.ts                 | 9 +++++++--
 .../wasap/utils/CollectionCombobox.tsx                   | 1 -
 .../src/views/pageStateHandlers/WasapPageStateHandler.ts | 4 +++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/website/src/backendApi/backendService.ts b/website/src/backendApi/backendService.ts
index 944dc4d23..dbe332519 100644
--- a/website/src/backendApi/backendService.ts
+++ b/website/src/backendApi/backendService.ts
@@ -177,11 +177,16 @@ export class BackendService extends ApiService {
         return this.get({ url: `/users/${id}`, schema: publicUserSchema });
     }
 
-    public async getCollectionSummaries({ organism, userId, excludeSystemCollections }: { organism?: string; userId?: number; excludeSystemCollections?: boolean } = {}) {
+    public async getCollectionSummaries({
+        organism,
+        userId,
+        excludeSystemCollections,
+    }: { organism?: string; userId?: number; excludeSystemCollections?: boolean } = {}) {
         const requestParams: Record<string, string> = {};
         if (organism !== undefined) requestParams.organism = organism;
         if (userId !== undefined) requestParams.userId = String(userId);
-        if (excludeSystemCollections !== undefined) requestParams.excludeSystemCollections = String(excludeSystemCollections);
+        if (excludeSystemCollections !== undefined)
+            requestParams.excludeSystemCollections = String(excludeSystemCollections);
         return this.get({
             url: '/collections',
             requestParams: Object.keys(requestParams).length > 0 ? requestParams : undefined,
diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
index c0c6e629c..0e4e62720 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
@@ -84,7 +84,6 @@ export function CollectionCombobox({
                         className='px-2'
                         tabIndex={-1}
                         type='button'
-
                         onClick={() => {
                             reset();
                             onChange(null);
diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
index 66122dd74..5c05ab533 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
@@ -59,7 +59,9 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                 }
                 analysis = {
                     mode,
-                    signatureType: (texts.signatureType as SignatureType | undefined) ?? this.config.filterDefaults.variant.signatureType,
+                    signatureType:
+                        (texts.signatureType as SignatureType | undefined) ??
+                        this.config.filterDefaults.variant.signatureType,
                     sequenceType: providedSequenceType ?? this.config.filterDefaults.variant.sequenceType,
                     variant: texts.variant ?? this.config.filterDefaults.variant.variant,
                     minProportion: Number(texts.minProportion ?? this.config.filterDefaults.variant.minProportion),

From 022d3c0a175bd95b78b67f2aa2d98f9a3649656e Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Wed, 3 Jun 2026 16:21:44 +0200
Subject: [PATCH 23/31] perf(website): pre-sort CollectionCombobox items to
 avoid re-sorting on every keystroke

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../wasap/utils/CollectionCombobox.tsx               | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
index 0e4e62720..cb22c2ada 100644
--- a/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
+++ b/website/src/components/pageStateSelectors/wasap/utils/CollectionCombobox.tsx
@@ -17,12 +17,14 @@ export function CollectionCombobox({
     const [inputFilter, setInputFilter] = useState(() => value?.name ?? '');
     const [inputIsInvalid, setInputIsInvalid] = useState(false);
 
+    const sortedCollections = useMemo(
+        () => [...collections].sort((a, b) => a.name.localeCompare(b.name)),
+        [collections],
+    );
+
     const filteredCollections = useMemo(
-        () =>
-            collections
-                .filter((c) => c.name.toLowerCase().includes(inputFilter.toLowerCase()))
-                .sort((a, b) => a.name.localeCompare(b.name)),
-        [collections, inputFilter],
+        () => sortedCollections.filter((c) => c.name.toLowerCase().includes(inputFilter.toLowerCase())),
+        [sortedCollections, inputFilter],
     );
 
     const buttonRef = useRef<HTMLButtonElement>(null);

From ec7c3d99d66897026e92077baa8add638891826f Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Wed, 3 Jun 2026 16:27:09 +0200
Subject: [PATCH 24/31] feat(website): add tooltip to "Mutation not in parent"
 checkbox

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../wasap/filters/VariantExplorerFilter.tsx               | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index d414b4ae9..4fdfeae81 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -167,9 +167,11 @@ function PredefinedSignature({
                     checked={pageState.newMutationsOnly ?? false}
                     onChange={(e) => setPageState({ ...pageState, newMutationsOnly: e.target.checked })}
                 />
-                <label htmlFor='newMutationsOnly' className='pl-2'>
-                    Mutation not in parent
-                </label>
+                <div className='tooltip tooltip-right inline' data-tip='Only show mutations that were not observed in the parent variant'>
+                    <label htmlFor='newMutationsOnly' className='cursor-pointer pl-2'>
+                        Mutation not in parent
+                    </label>
+                </div>
             </div>
         </Inset>
     );

From b6c1893c9d292ef9c1cf3eceea3ef9a72edfdf0f Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Wed, 3 Jun 2026 16:27:29 +0200
Subject: [PATCH 25/31] fix(website): always serialize signatureType in URL,
 not only for predefined signatures

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/views/pageStateHandlers/WasapPageStateHandler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
index 5c05ab533..f4b4569ad 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.ts
@@ -144,8 +144,8 @@ export class WasapPageStateHandler implements PageStateHandler<WasapFilter> {
                 break;
             case 'variant':
                 setSearchFromString(search, 'sequenceType', analysis.sequenceType);
+                setSearchFromString(search, 'signatureType', analysis.signatureType);
                 if (analysis.signatureType === 'predefined') {
-                    setSearchFromString(search, 'signatureType', 'predefined');
                     setSearchFromString(
                         search,
                         'collectionId',

From 6edc0d427c04e27c669f44fa1b378a38b048ec22 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Thu, 4 Jun 2026 11:52:31 +0200
Subject: [PATCH 26/31] fix check

---
 website/src/components/views/wasap/useWasapPageData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/views/wasap/useWasapPageData.ts b/website/src/components/views/wasap/useWasapPageData.ts
index 77db1ff21..e5cad1309 100644
--- a/website/src/components/views/wasap/useWasapPageData.ts
+++ b/website/src/components/views/wasap/useWasapPageData.ts
@@ -114,7 +114,7 @@ async function fetchVariantComputedModeData(
 }
 
 async function fetchVariantPredefinedModeData(analysis: WasapVariantFilter): Promise<WasapMutationsData> {
-    if (!analysis.collectionId) {
+    if (!analysis.collectionId === undefined) {
         throw new Error('No collection selected for predefined variant mode.');
     }
     const collection = await getBackendServiceForClientside().getCollection({ id: String(analysis.collectionId) });

From 69682725d29f6ff5bbce6f6d93a647178d7a9ffc Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Thu, 4 Jun 2026 11:55:11 +0200
Subject: [PATCH 27/31] fm

---
 .../wasap/filters/VariantExplorerFilter.tsx                  | 5 ++++-
 website/src/components/views/wasap/useWasapPageData.ts       | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index 4fdfeae81..3d911f234 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -167,7 +167,10 @@ function PredefinedSignature({
                     checked={pageState.newMutationsOnly ?? false}
                     onChange={(e) => setPageState({ ...pageState, newMutationsOnly: e.target.checked })}
                 />
-                <div className='tooltip tooltip-right inline' data-tip='Only show mutations that were not observed in the parent variant'>
+                <div
+                    className='tooltip tooltip-right inline'
+                    data-tip='Only show mutations that were not observed in the parent variant'
+                >
                     <label htmlFor='newMutationsOnly' className='cursor-pointer pl-2'>
                         Mutation not in parent
                     </label>
diff --git a/website/src/components/views/wasap/useWasapPageData.ts b/website/src/components/views/wasap/useWasapPageData.ts
index e5cad1309..9d69bde1e 100644
--- a/website/src/components/views/wasap/useWasapPageData.ts
+++ b/website/src/components/views/wasap/useWasapPageData.ts
@@ -114,7 +114,7 @@ async function fetchVariantComputedModeData(
 }
 
 async function fetchVariantPredefinedModeData(analysis: WasapVariantFilter): Promise<WasapMutationsData> {
-    if (!analysis.collectionId === undefined) {
+    if (analysis.collectionId === undefined) {
         throw new Error('No collection selected for predefined variant mode.');
     }
     const collection = await getBackendServiceForClientside().getCollection({ id: String(analysis.collectionId) });

From bd6193e7659d07cb09655a551f06a8092c9acb7c Mon Sep 17 00:00:00 2001
From: Felix Hennig <fhennig@users.noreply.github.com>
Date: Thu, 4 Jun 2026 11:00:01 +0100
Subject: [PATCH 28/31] Update
 website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx

Co-authored-by: Fabian Engelniederhammer <92720311+fengelniederhammer@users.noreply.github.com>
---
 .../wasap/WasapPageStateSelector.tsx                   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index 1694e173a..f968b786d 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -105,16 +105,18 @@ export function WasapPageStateSelector({
     const predefinedVariantsQueryResult = useQuery({
         enabled: config.variantAnalysisModeEnabled && config.predefinedVariantsSource !== undefined,
         queryKey: ['predefinedVariants', config.variantAnalysisModeEnabled && config.predefinedVariantsSource],
-        queryFn: () => {
+        queryFn: async () => {
             if (!config.variantAnalysisModeEnabled || config.predefinedVariantsSource === undefined) {
                 throw Error(
                     'This predefined variants query was called despite it being disabled. This should not happen.',
                 );
             }
             const { collectionsUserId, collectionsTag } = config.predefinedVariantsSource;
-            return getBackendServiceForClientside()
-                .getCollectionSummaries({ userId: collectionsUserId, organism: config.internalName })
-                .then((collections) => collections.filter((c) => c.description?.includes(collectionsTag) ?? false));
+            const collections = await getBackendServiceForClientside().getCollectionSummaries({
+                userId: collectionsUserId,
+                organism: config.internalName,
+            });
+            return collections.filter((c) => c.description?.includes(collectionsTag) ?? false);
         },
     });
 

From 33d1a227e9885ea686888d9922516ec0ac822000 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Thu, 4 Jun 2026 12:16:24 +0200
Subject: [PATCH 29/31] test fix

---
 .../src/views/pageStateHandlers/WasapPageStateHandler.spec.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
index b905aa66e..34b3f5381 100644
--- a/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
+++ b/website/src/views/pageStateHandlers/WasapPageStateHandler.spec.ts
@@ -220,6 +220,7 @@ describe('WasapPageStateHandler', () => {
                 'granularity=week&' +
                 'analysisMode=variant&' +
                 'sequenceType=nucleotide&' +
+                'signatureType=computed&' +
                 'variant=BA.2*&' +
                 'minProportion=0.5&' +
                 'minCount=10&' +

From a67a3f8909a058778926fcab2bcbf52c8f1ed43d Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 8 Jun 2026 09:02:17 +0200
Subject: [PATCH 30/31] useId()

---
 .../wasap/filters/VariantExplorerFilter.tsx                 | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index 3d911f234..6739cf1b5 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -1,4 +1,5 @@
 import { type UseQueryResult } from '@tanstack/react-query';
+import { useId } from 'react';
 
 import { Inset } from '../../../../styles/Inset';
 import { type CollectionSummary } from '../../../../types/Collection';
@@ -149,6 +150,7 @@ function PredefinedSignature({
 }) {
     const collections = predefinedVariantsQueryResult?.data ?? [];
     const selectedCollection = collections.find((c) => c.id === pageState.collectionId) ?? null;
+    const newMutationsCheckBoxId = useId();
 
     return (
         <Inset className='mt-4 p-2'>
@@ -163,7 +165,7 @@ function PredefinedSignature({
                 <input
                     className='accent-primary'
                     type='checkbox'
-                    id='newMutationsOnly'
+                    id={newMutationsCheckBoxId}
                     checked={pageState.newMutationsOnly ?? false}
                     onChange={(e) => setPageState({ ...pageState, newMutationsOnly: e.target.checked })}
                 />
@@ -171,7 +173,7 @@ function PredefinedSignature({
                     className='tooltip tooltip-right inline'
                     data-tip='Only show mutations that were not observed in the parent variant'
                 >
-                    <label htmlFor='newMutationsOnly' className='cursor-pointer pl-2'>
+                    <label htmlFor={newMutationsCheckBoxId} className='cursor-pointer pl-2'>
                         Mutation not in parent
                     </label>
                 </div>

From e267af071e4ef0a1302f9b324f5e20258e989179 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Mon, 8 Jun 2026 10:30:35 +0200
Subject: [PATCH 31/31] better error msg

---
 website/src/components/views/wasap/WasapPage.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/website/src/components/views/wasap/WasapPage.tsx b/website/src/components/views/wasap/WasapPage.tsx
index 50a1950da..f7de97c3e 100644
--- a/website/src/components/views/wasap/WasapPage.tsx
+++ b/website/src/components/views/wasap/WasapPage.tsx
@@ -86,7 +86,16 @@ export const WasapPageInner: FC<WasapPageProps> = ({ config, resistanceData }) =
                         />
                     </div>
                     {isError ? (
-                        <span>There was an error fetching the data to display.</span>
+                        analysis.mode === 'variant' &&
+                        analysis.signatureType === 'predefined' &&
+                        analysis.collectionId === undefined ? (
+                            <div className='rounded-md border-2 border-gray-100 p-4'>
+                                <h1 className='text-lg font-semibold'>No variant selected</h1>
+                                <p className='text-sm'>Please select a variant from the filter panel.</p>
+                            </div>
+                        ) : (
+                            <span>There was an error fetching the data to display.</span>
+                        )
                     ) : isPending ? (
                         <Loading />
                     ) : (