feat(website): add new collections analysis mode to W-ASAP

website/eslint.config.js

@@ -106,7 +106,9 @@ const disableFromReact = {
 
 export default tseslint.config(
     {
-        ignores: ['**/.astro/content.d.ts'],
+        ignores: ['**/.astro/content.d.ts', 'dist/**', 'node_modules/**'],
+    },
+    {
         files: ['**/*.ts', '**/*.tsx'],
         extends: [
             eslint.configs.recommended,

website/routeMocker.ts

@@ -5,6 +5,7 @@ import type { SetupServer } from 'msw/node';
 import { expect } from 'vitest';
 
 import { type OrganismsConfig } from './src/config';
+import type { CollectionRaw } from './src/covspectrum/types.ts';
 import type { LapisInfo } from './src/lapis/getLastUpdatedDate.ts';
 import type { ProblemDetail } from './src/types/ProblemDetail.ts';
 import type {
@@ -45,6 +46,26 @@ type MockCase = {
     requestParam?: Record<string, string>;
 };
 
+export class CovSpectrumRouteMocker {
+    constructor(private workerOrServer: MSWWorkerOrServer) {}
+
+    mockGetCollections(baseUrl: string, response: CollectionRaw[], statusCode = 200) {
+        this.workerOrServer.use(
+            http.get(`${baseUrl}/resource/collection`, () => {
+                return new Response(JSON.stringify(response), { status: statusCode });
+            }),
+        );
+    }
+
+    mockGetCollection(baseUrl: string, id: number, response: CollectionRaw, statusCode = 200) {
+        this.workerOrServer.use(
+            http.get(`${baseUrl}/resource/collection/${id}`, () => {
+                return new Response(JSON.stringify(response), { status: statusCode });
+            }),
+        );
+    }
+}
+
 /**
  * Allows you to mock LAPIS API routes.
  * By default, the host is DUMMY_LAPIS_URL, so it's best if you use that as the lapisUrl in your tests.

website/src/components/genspectrum/GsMutationsOverTime.tsx

@@ -1,9 +1,10 @@
-import type {
-    TemporalGranularity,
-    LapisFilter,
-    SequenceType,
-    MeanProportionInterval,
-    CustomColumn,
+import {
+    type TemporalGranularity,
+    type LapisFilter,
+    type SequenceType,
+    type MeanProportionInterval,
+    type CustomColumn,
+    views,
 } from '@genspectrum/dashboard-components/util';
 import { type FC } from 'react';
 
@@ -46,7 +47,7 @@ export const GsMutationsOverTime: FC<GsMutationsOverTimeProps> = ({
                 height={height ? '100%' : undefined}
                 lapisFilter={JSON.stringify(lapisFilter)}
                 sequenceType={sequenceType}
-                views='["grid"]'
+                views={JSON.stringify([views.grid])}
                 granularity={granularity}
                 lapisDateField={lapisDateField}
                 displayMutations={displayMutations ? JSON.stringify(displayMutations) : undefined}

website/src/components/genspectrum/GsQueriesOverTime.tsx

@@ -0,0 +1,60 @@
+import {
+    views,
+    type CustomColumn,
+    type LapisFilter,
+    type MeanProportionInterval,
+    type QueryDefinition,
+    type TemporalGranularity,
+} from '@genspectrum/dashboard-components/util';
+import { type FC } from 'react';
+
+import { ComponentWrapper } from '../ComponentWrapper';
+
+export type GsQueriesOverTimeProps = {
+    collectionTitle?: string;
+    lapisFilter: LapisFilter;
+    queries: QueryDefinition[];
+    granularity: TemporalGranularity;
+    lapisDateField: string;
+    height?: string;
+    pageSizes?: number[];
+    hideGaps?: true;
+    initialMeanProportionInterval?: MeanProportionInterval;
+    customColumns?: CustomColumn[];
+};
+
+export const GsQueriesOverTime: FC<GsQueriesOverTimeProps> = ({
+    collectionTitle,
+    lapisFilter,
+    queries,
+    granularity,
+    lapisDateField,
+    height,
+    pageSizes,
+    hideGaps,
+    initialMeanProportionInterval,
+    customColumns,
+}) => {
+    return (
+        <ComponentWrapper
+            title={'Collection over time' + (collectionTitle ? `: ${collectionTitle}` : '')}
+            height={height}
+        >
+            <gs-queries-over-time
+                width='100%'
+                height={height ? '100%' : undefined}
+                lapisFilter={JSON.stringify(lapisFilter)}
+                queries={JSON.stringify(queries)}
+                views={JSON.stringify([views.grid])}
+                granularity={granularity}
+                lapisDateField={lapisDateField}
+                hideGaps={hideGaps}
+                pageSizes={JSON.stringify(pageSizes ?? [10, 20, 30, 40, 50])}
+                initialMeanProportionInterval={
+                    initialMeanProportionInterval ? JSON.stringify(initialMeanProportionInterval) : undefined
+                }
+                customColumns={customColumns ? JSON.stringify(customColumns) : undefined}
+            ></gs-queries-over-time>
+        </ComponentWrapper>
+    );
+};

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

@@ -5,6 +5,7 @@ import { ApplyFilterButton } from '../ApplyFilterButton';
 import { DynamicDateFilter } from '../DynamicDateFilter';
 import { SelectorHeadline } from '../SelectorHeadline';
 import { ExplorationModeInfo } from './InfoBlocks';
+import { CollectionAnalysisFilter } from './filters/CollectionAnalysisFilter';
 import { ManualAnalysisFilter } from './filters/ManualAnalysisFilter';
 import { ResistanceMutationsFilter } from './filters/ResistanceMutationsFilter';
 import { UntrackedFilter } from './filters/UntrackedFilter';
@@ -35,12 +36,14 @@ export function WasapPageStateSelector({
     initialBaseFilterState,
     initialAnalysisFilterState,
     setPageState,
+    isStaging,
 }: {
     config: WasapPageConfig;
     pageStateHandler: PageStateHandler<WasapFilter>;
     initialBaseFilterState: WasapBaseFilter;
     initialAnalysisFilterState: WasapAnalysisFilter;
     setPageState: Dispatch<SetStateAction<WasapFilter>>;
+    isStaging: boolean;
 }) {
     const [baseFilterState, setBaseFilterState] = useState(initialBaseFilterState);
 
@@ -54,6 +57,8 @@ export function WasapPageStateSelector({
         setResistanceFilter,
         untrackedFilter,
         setUntrackedFilter,
+        collectionFilter,
+        setCollectionFilter,
     } = useAnalysisFilterStates(initialAnalysisFilterState, config);
 
     const [selectedAnalysisMode, setSelectedAnalysisMode] = useState(initialAnalysisFilterState.mode);
@@ -71,6 +76,8 @@ export function WasapPageStateSelector({
                 return { base: baseFilterState, analysis: resistanceFilter! };
             case 'untracked':
                 return { base: baseFilterState, analysis: untrackedFilter! };
+            case 'collection':
+                return { base: baseFilterState, analysis: collectionFilter! };
         }
         /* eslint-enable  @typescript-eslint/no-non-null-assertion */
     }
@@ -150,7 +157,7 @@ export function WasapPageStateSelector({
                     setSelectedAnalysisMode(e.target.value as WasapAnalysisMode);
                 }}
             >
-                {enabledAnalysisModes(config).map((mode) => (
+                {enabledAnalysisModes(config, isStaging).map((mode) => (
                     <option key={mode} value={mode}>
                         {modeLabel(mode)}
                     </option>
@@ -200,6 +207,17 @@ export function WasapPageStateSelector({
                                     cladeLineageQueryResult={cladeLineageQueryResult}
                                 />
                             );
+                        case 'collection':
+                            if (!config.collectionAnalysisModeEnabled || collectionFilter === undefined) {
+                                throw Error("'collection' mode selected, but it isn't enabled.");
+                            }
+                            return (
+                                <CollectionAnalysisFilter
+                                    pageState={collectionFilter}
+                                    setPageState={setCollectionFilter}
+                                    collectionsApiBaseUrl={config.collectionsApiBaseUrl}
+                                />
+                            );
                     }
                 })()}
             </Inset>
@@ -222,6 +240,8 @@ function modeLabel(mode: WasapAnalysisMode): string {
             return 'Variant Explorer';
         case 'untracked':
             return 'Untracked Mutations';
+        case 'collection':
+            return 'Collection';
     }
 }
 
@@ -259,6 +279,13 @@ function useAnalysisFilterStates(initialFilter: WasapAnalysisFilter, config: Was
               ? config.filterDefaults.untracked
               : undefined,
     );
+    const [collectionFilter, setCollectionFilter] = useState(
+        initialFilter.mode === 'collection'
+            ? initialFilter
+            : config.collectionAnalysisModeEnabled
+              ? config.filterDefaults.collection
+              : undefined,
+    );
 
     return {
         manualFilter,
@@ -269,5 +296,7 @@ function useAnalysisFilterStates(initialFilter: WasapAnalysisFilter, config: Was
         setResistanceFilter,
         untrackedFilter,
         setUntrackedFilter,
+        collectionFilter,
+        setCollectionFilter,
     };
 }

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

@@ -0,0 +1,81 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { describe, expect, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { CollectionAnalysisFilter } from './CollectionAnalysisFilter';
+import { it } from '../../../../../test-extend';
+import type { CollectionRaw } from '../../../../covspectrum/types';
+import type { WasapCollectionFilter } from '../../../views/wasap/wasapPageConfig';
+
+const DUMMY_COV_SPECTRUM_URL = 'https://cov-spectrum-dummy.com/api';
+
+const mockCollections: CollectionRaw[] = [
+    {
+        id: 42,
+        title: '3CLpro',
+        description: 'Test collection',
+        maintainers: 'Test',
+        email: 'test@example.com',
+        variants: [{ query: '{}', name: 'Variant 1', description: 'Desc 1', highlighted: false }],
+    },
+    {
+        id: 99,
+        title: 'RdRp',
+        description: 'Another collection',
+        maintainers: 'Test',
+        email: 'test@example.com',
+        variants: [],
+    },
+];
+
+const queryClient = new QueryClient();
+
+describe('CollectionAnalysisFilter', () => {
+    const defaultPageState: WasapCollectionFilter = {
+        mode: 'collection',
+        collectionId: 42,
+    };
+
+    it('renders with initial collection set', async ({ routeMockers: { covSpectrum } }) => {
+        const mockSetPageState = vi.fn();
+
+        covSpectrum.mockGetCollections(DUMMY_COV_SPECTRUM_URL, mockCollections);
+
+        const { getByRole } = render(
+            <QueryClientProvider client={queryClient}>
+                <CollectionAnalysisFilter
+                    pageState={defaultPageState}
+                    setPageState={mockSetPageState}
+                    collectionsApiBaseUrl={DUMMY_COV_SPECTRUM_URL}
+                />
+            </QueryClientProvider>,
+        );
+
+        const select = getByRole('combobox');
+        await expect.element(select).toHaveValue('42'); // collectionId from defaultPageState
+    });
+
+    it('calls setPageState when selecting a different collection', async ({ routeMockers: { covSpectrum } }) => {
+        const mockSetPageState = vi.fn();
+
+        covSpectrum.mockGetCollections(DUMMY_COV_SPECTRUM_URL, mockCollections);
+
+        const { getByRole } = render(
+            <QueryClientProvider client={queryClient}>
+                <CollectionAnalysisFilter
+                    pageState={defaultPageState}
+                    setPageState={mockSetPageState}
+                    collectionsApiBaseUrl={DUMMY_COV_SPECTRUM_URL}
+                />
+            </QueryClientProvider>,
+        );
+
+        const select = getByRole('combobox');
+        await select.selectOptions('99'); // Select RdRp collection
+
+        expect(mockSetPageState).toHaveBeenCalledWith({
+            ...defaultPageState,
+            collectionId: 99,
+        });
+    });
+});

website/src/components/pageStateSelectors/wasap/filters/CollectionAnalysisFilter.tsx

@@ -0,0 +1,52 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCollections } from '../../../../covspectrum/getCollections';
+import type { WasapCollectionFilter } from '../../../views/wasap/wasapPageConfig';
+import { LabeledField } from '../utils/LabeledField';
+
+export function CollectionAnalysisFilter({
+    pageState,
+    setPageState,
+    collectionsApiBaseUrl,
+}: {
+    pageState: WasapCollectionFilter;
+    setPageState: (newState: WasapCollectionFilter) => void;
+    collectionsApiBaseUrl: string;
+}) {
+    const {
+        data: collections,
+        isPending,
+        isError,
+    } = useQuery({
+        queryKey: ['collections', collectionsApiBaseUrl],
+        queryFn: () => getCollections(collectionsApiBaseUrl),
+    });
+
+    return (
+        <LabeledField label='Collection'>
+            {isPending ? (
+                <div className='text-sm text-gray-500'>Loading collections...</div>
+            ) : isError ? (
+                <div className='text-error text-sm'>Error loading collections</div>
+            ) : (
+                <select
+                    className='select select-bordered'
+                    value={pageState.collectionId ?? ''}
+                    onChange={(e) =>
+                        setPageState({
+                            ...pageState,
+                            collectionId: e.target.value ? Number(e.target.value) : undefined,
+                        })
+                    }
+                >
+                    <option value=''>Select a collection...</option>
+                    {collections.map((collection) => (
+                        <option key={collection.id} value={collection.id}>
+                            #{collection.id} {collection.title}
+                        </option>
+                    ))}
+                </select>
+            )}
+        </LabeledField>
+    );
+}