feat(website): predefined COVID variant signatures from collections (W-ASAP)

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",

website/src/backendApi/backendService.ts

@@ -177,8 +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 }: { organism?: string } = {}) {

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

website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx

@@ -1,6 +1,7 @@
 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 +102,24 @@ export function WasapPageStateSelector({
         },
     });
 
+    const predefinedVariantsQueryResult = useQuery({
+        enabled: config.variantAnalysisModeEnabled && config.predefinedVariantsSource !== undefined,
+        queryKey: ['predefinedVariants', config.variantAnalysisModeEnabled && config.predefinedVariantsSource],
+        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;
+            const collections = await getBackendServiceForClientside().getCollectionSummaries({
+                userId: collectionsUserId,
+                organism: config.internalName,
+            });
+            return collections.filter((c) => c.description?.includes(collectionsTag) ?? false);
+        },
+    });
+
     return (
         <div className='flex flex-col gap-4'>
             <SelectorHeadline>Filter dataset</SelectorHeadline>
@@ -181,6 +200,12 @@ export function WasapPageStateSelector({
                                     setPageState={setVariantFilter}
                                     clinicalSequenceLapisBaseUrl={config.clinicalLapis.lapisBaseUrl}
                                     clinicalSequenceLapisLineageField={config.clinicalLapis.lineageField}
+                                    predefinedVariantsQueryResult={
+                                        config.predefinedVariantsSource !== undefined
+                                            ? predefinedVariantsQueryResult
+                                            : undefined
+                                    }
+                                    predefinedVariantsLabel={config.predefinedVariantsSource?.variantSourceLabel}
                                 />
                             );
                         case 'resistance':

website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx

@@ -1,17 +1,26 @@
-import { 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';
 
 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',
+        signatureType: 'computed',
         sequenceType: 'nucleotide',
         variant: undefined,
         minProportion: 0.05,
@@ -20,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();
@@ -98,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) {