feat(website): add option to search by clade/subtype on sequencing ef…

…forts page (#423)
GenSpectrum · Dec 18, 2024 · 424c784 · 424c784
1 parent c490b9f
commit 424c784
Show file tree

Hide file tree

Showing 21 changed files with 161 additions and 92 deletions.
diff --git a/website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx b/website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx
@@ -4,6 +4,8 @@ import { useMemo, useState } from 'react';
 import { ApplyFilterButton } from './ApplyFilterButton.tsx';
 import { BaselineSelector, type DateRangeFilterConfig, type LocationFilterConfig } from './BaselineSelector.tsx';
 import { SelectorHeadline } from './SelectorHeadline.tsx';
+import { toVariantFilter, type VariantFilterConfig } from './VariantFilterConfig.ts';
+import { VariantSelector } from './VariantSelector.tsx';
 import type { OrganismsConfig } from '../../config.ts';
 import type { LapisLocation } from '../../views/helpers.ts';
 import { type OrganismViewKey, Routing } from '../../views/routing.ts';
@@ -12,15 +14,18 @@ import type { sequencingEffortsViewKey } from '../../views/viewKeys.ts';
 export function SequencingEffortsPageStateSelector({
     locationFilterConfig,
     dateRangeFilterConfig,
+    variantFilterConfig,
     organismViewKey,
     organismsConfig,
 }: {
     locationFilterConfig: LocationFilterConfig;
     dateRangeFilterConfig: DateRangeFilterConfig;
+    variantFilterConfig: VariantFilterConfig;
     organismViewKey: OrganismViewKey & `${string}.${typeof sequencingEffortsViewKey}`;
     organismsConfig: OrganismsConfig;
 }) {
     const [location, setLocation] = useState<LapisLocation>(locationFilterConfig.initialLocation);
+    const [variantFilterConfigState, setVariantFilterConfigState] = useState<VariantFilterConfig>(variantFilterConfig);
     const [dateRange, setDateRange] = useState<DateRangeOption>(dateRangeFilterConfig.initialDateRange);
     const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
 
@@ -30,8 +35,9 @@ export function SequencingEffortsPageStateSelector({
                 location,
                 dateRange,
             },
+            variantFilter: toVariantFilter(variantFilterConfigState),
         }),
-        [location, dateRange],
+        [location, dateRange, variantFilterConfigState],
     );
 
     return (
@@ -45,6 +51,13 @@ export function SequencingEffortsPageStateSelector({
                     dateRangeFilterConfig={dateRangeFilterConfig}
                 />
             </div>
+            <div>
+                <VariantSelector
+                    onVariantFilterChange={setVariantFilterConfigState}
+                    variantFilterConfig={variantFilterConfigState}
+                    hideMutationFilter={true}
+                />
+            </div>
             <ApplyFilterButton pageStateHandler={view.pageStateHandler} newPageState={newPageState} />
         </div>
     );

diff --git a/website/src/components/pageStateSelectors/VariantSelector.tsx b/website/src/components/pageStateSelectors/VariantSelector.tsx
@@ -6,9 +6,11 @@ import { GsMutationFilter } from '../genspectrum/GsMutationFilter.tsx';
 export function VariantSelector({
     onVariantFilterChange,
     variantFilterConfig,
+    hideMutationFilter,
 }: {
     variantFilterConfig: VariantFilterConfig;
     onVariantFilterChange: (variantFilter: VariantFilterConfig) => void;
+    hideMutationFilter?: boolean | undefined;
 }) {
     return (
         <div className='flex flex-col gap-2'>
@@ -29,19 +31,21 @@ export function VariantSelector({
                     key={lineageFilterConfig.lapisField}
                 />
             ))}
-            <GsMutationFilter
-                initialValue={getMutationFilter(variantFilterConfig.mutationFilterConfig)}
-                onMutationChange={(mutation) => {
-                    if (mutation === undefined) {
-                        return;
-                    }
-                    const newVariantFilterConfig = {
-                        ...variantFilterConfig,
-                        mutationFilterConfig: mutation,
-                    };
-                    onVariantFilterChange(newVariantFilterConfig);
-                }}
-            />
+            {!hideMutationFilter && (
+                <GsMutationFilter
+                    initialValue={getMutationFilter(variantFilterConfig.mutationFilterConfig)}
+                    onMutationChange={(mutation) => {
+                        if (mutation === undefined) {
+                            return;
+                        }
+                        const newVariantFilterConfig = {
+                            ...variantFilterConfig,
+                            mutationFilterConfig: mutation,
+                        };
+                        onVariantFilterChange(newVariantFilterConfig);
+                    }}
+                />
+            )}
         </div>
     );
 }
diff --git a/website/src/components/views/analyzeSingleVariant/CollectionsList.tsx b/website/src/components/views/analyzeSingleVariant/CollectionsList.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 import { z } from 'zod';
 
 import type { OrganismsConfig } from '../../../config.ts';
-import { type CovidAnalyzeSingleVariantData } from '../../../views/covid.ts';
+import { type CovidVariantData } from '../../../views/covid.ts';
 import { Routing } from '../../../views/routing.ts';
 import { withQueryProvider } from '../../subscriptions/backendApi/withQueryProvider.tsx';
 
@@ -104,7 +104,7 @@ function CollectionVariantList({ collection, organismsConfig }: CollectionVarian
         const currentPageState = routing
             .getOrganismView('covid.singleVariantView')
             .pageStateHandler.parsePageStateFromUrl(new URL(window.location.href));
-        let newPageState: CovidAnalyzeSingleVariantData;
+        let newPageState: CovidVariantData;
         const query = querySchema.parse(JSON.parse(variant.query));
         if (query.variantQuery !== undefined) {
             newPageState = {

diff --git a/website/src/components/views/compareSideBySide/GenericCompareSideBySidePage.astro b/website/src/components/views/compareSideBySide/GenericCompareSideBySidePage.astro
@@ -15,9 +15,10 @@ import { CompareSideBySideSelectorFallback } from '../../pageStateSelectors/Fall
 type OrganismViewCompareVariant = OrganismWithViewKey<typeof compareSideBySideViewKey>;
 interface Props {
     organism: OrganismViewCompareVariant;
+    hideMutationFilter?: boolean;
 }
 
-const { organism } = Astro.props;
+const { organism, hideMutationFilter } = Astro.props;
 const organismViewKey = `${organism}.${compareSideBySideViewKey}` satisfies OrganismViewKey;
 const view = ServerSide.routing.getOrganismView(organismViewKey);
 
@@ -97,8 +98,12 @@ const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
                                 lapisDateField={view.organismConstants.mainDateField}
                                 granularity={timeGranularity}
                             />
-                            <GsMutations lapisFilter={numeratorFilter} sequenceType='nucleotide' />
-                            <GsMutations lapisFilter={numeratorFilter} sequenceType='amino acid' />
+                            {!hideMutationFilter && (
+                                <>
+                                    <GsMutations lapisFilter={numeratorFilter} sequenceType='nucleotide' />
+                                    <GsMutations lapisFilter={numeratorFilter} sequenceType='amino acid' />
+                                </>
+                            )}
                             <GsAggregate
                                 title='Sub-lineages'
                                 fields={getLineageFilterFields(view.organismConstants.lineageFilters)}

diff --git a/website/src/components/views/sequencingEfforts/GenericSequencingEffortsPage.astro b/website/src/components/views/sequencingEfforts/GenericSequencingEffortsPage.astro
@@ -3,6 +3,7 @@ import { getDashboardsConfig } from '../../../config';
 import SingleVariantOrganismPageLayout from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
 import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange';
 import { ComponentHeight } from '../../../views/OrganismConstants';
+import { getLineageFilterConfigs, getLineageFilterFields } from '../../../views/View';
 import { getLocationDisplayConfig } from '../../../views/locationHelpers';
 import { type OrganismViewKey, type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
@@ -22,10 +23,10 @@ interface Props {
 const { organism } = Astro.props;
 const organismViewKey: OrganismViewKey = `${organism}.${sequencingEffortsViewKey}` satisfies OrganismViewKey;
 const view = ServerSide.routing.getOrganismView(organismViewKey);
-const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
 
-const datasetLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
+const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
 
+const variantLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
 const timeGranularity = chooseGranularityBasedOnDateRange(
     pageState.datasetFilter.dateRange,
     new Date(view.organismConstants.earliestDate),
@@ -35,6 +36,10 @@ const {
     locationField,
     mapName,
 } = getLocationDisplayConfig(view.organismConstants.locationFields, pageState.datasetFilter.location);
+const lineageFilterConfigs = getLineageFilterConfigs(
+    view.organismConstants.lineageFilters,
+    pageState.variantFilter.lineages,
+);
 ---
 
 <SingleVariantOrganismPageLayout view={view}>
@@ -54,6 +59,7 @@ const {
         organismViewKey={organismViewKey}
         organismsConfig={getDashboardsConfig().dashboards.organisms}
         client:only='react'
+        variantFilterConfig={{ mutationFilterConfig: pageState.variantFilter.mutations, lineageFilterConfigs }}
     >
         <SequencingEffortsSelectorFallback slot='fallback' />
     </SequencingEffortsPageStateSelector>
@@ -63,7 +69,7 @@ const {
             lapisFilters={[
                 {
                     displayName: '',
-                    lapisFilter: datasetLapisFilter,
+                    lapisFilter: variantLapisFilter,
                 },
             ]}
             lapisDateField={view.organismConstants.mainDateField}
@@ -75,7 +81,7 @@ const {
                     title={locationLabel}
                     height={ComponentHeight.large}
                     lapisLocationField={locationField}
-                    lapisFilter={datasetLapisFilter}
+                    lapisFilter={variantLapisFilter}
                     mapName={mapName}
                 />
             )
@@ -84,11 +90,16 @@ const {
             title='Hosts'
             height={ComponentHeight.large}
             fields={[view.organismConstants.hostField]}
-            lapisFilter={datasetLapisFilter}
+            lapisFilter={variantLapisFilter}
+        />
+        <GsAggregate
+            title='Sub-lineages'
+            fields={getLineageFilterFields(view.organismConstants.lineageFilters)}
+            lapisFilter={variantLapisFilter}
         />
         {
             view.organismConstants.additionalSequencingEffortsFields.map(({ label, fields, height }) => (
-                <GsAggregate title={label} height={height} fields={fields} lapisFilter={datasetLapisFilter} />
+                <GsAggregate title={label} height={height} fields={fields} lapisFilter={variantLapisFilter} />
             ))
         }
     </ComponentsGrid>

diff --git a/website/src/views/BaseView.ts b/website/src/views/BaseView.ts
@@ -1,5 +1,5 @@
-import type { OrganismConstants, SequencingEffortsConstants, SingleVariantConstants } from './OrganismConstants.ts';
-import type { CompareToBaselineData, CompareVariantsData, Dataset, DatasetAndVariantData, View } from './View.ts';
+import type { OrganismConstants, ExtendedConstants } from './OrganismConstants.ts';
+import type { CompareToBaselineData, CompareVariantsData, DatasetAndVariantData, View } from './View.ts';
 import {
     compareToBaselineViewConstants,
     compareVariantsViewConstants,
@@ -40,7 +40,7 @@ export abstract class BaseView<
     }
 }
 
-export class GenericSingleVariantView<Constants extends SingleVariantConstants> extends BaseView<
+export class GenericSingleVariantView<Constants extends ExtendedConstants> extends BaseView<
     DatasetAndVariantData,
     Constants,
     SingleVariantPageStateHandler
@@ -67,8 +67,8 @@ export class GenericSingleVariantView<Constants extends SingleVariantConstants>
     }
 }
 
-export class GenericSequencingEffortsView<Constants extends SequencingEffortsConstants> extends BaseView<
-    Dataset,
+export class GenericSequencingEffortsView<Constants extends ExtendedConstants> extends BaseView<
+    DatasetAndVariantData,
     Constants,
     SequencingEffortsStateHandler
 > {
@@ -82,6 +82,10 @@ export class GenericSequencingEffortsView<Constants extends SequencingEffortsCon
                         location: {},
                         dateRange: constants.defaultDateRange,
                     },
+                    variantFilter: {
+                        mutations: {},
+                        lineages: {},
+                    },
                 },
                 organismConfig[constants.organism].pathFragment,
             ),
@@ -90,7 +94,7 @@ export class GenericSequencingEffortsView<Constants extends SequencingEffortsCon
     }
 }
 
-export class GenericCompareVariantsView<Constants extends SingleVariantConstants> extends BaseView<
+export class GenericCompareVariantsView<Constants extends ExtendedConstants> extends BaseView<
     CompareVariantsData,
     Constants,
     CompareVariantsPageStateHandler
@@ -114,7 +118,7 @@ export class GenericCompareVariantsView<Constants extends SingleVariantConstants
     }
 }
 
-export class GenericCompareToBaselineView<Constants extends SingleVariantConstants> extends BaseView<
+export class GenericCompareToBaselineView<Constants extends ExtendedConstants> extends BaseView<
     CompareToBaselineData,
     Constants,
     CompareToBaselineStateHandler

diff --git a/website/src/views/OrganismConstants.ts b/website/src/views/OrganismConstants.ts
@@ -21,16 +21,13 @@ export interface AdditionalSequencingEffortsField {
     readonly height: (typeof ComponentHeight)[keyof typeof ComponentHeight];
 }
 
-export interface SequencingEffortsConstants extends OrganismConstants {
+export interface ExtendedConstants extends OrganismConstants {
     readonly locationFields: string[];
     readonly mainDateField: string;
     readonly dateRangeOptions: DateRangeOption[];
     readonly defaultDateRange: DateRangeOption;
     readonly additionalFilters: Record<string, string> | undefined;
     readonly additionalSequencingEffortsFields: AdditionalSequencingEffortsField[];
-}
-
-export interface SingleVariantConstants extends SequencingEffortsConstants {
     readonly lineageFilters: LineageFilterConfig[];
 }