feat(website): show resistance mutation annotations on COVID and RSV dashboards

website/src/components/views/analyzeSingleVariant/CovidSingleVariantReactPage.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import { type FC, useMemo } from 'react';
 
 import { CollectionsList } from './CollectionsList.tsx';
@@ -15,9 +16,14 @@ import { usePageState } from '../usePageState.ts';
 export type CovidSingleVariantReactPageProps = {
     organismsConfig: OrganismsConfig;
     isStaging: boolean;
+    mutationAnnotations?: MutationAnnotations;
 };
 
-export const CovidSingleVariantReactPage: FC<CovidSingleVariantReactPageProps> = ({ organismsConfig, isStaging }) => {
+export const CovidSingleVariantReactPage: FC<CovidSingleVariantReactPageProps> = ({
+    organismsConfig,
+    isStaging,
+    mutationAnnotations,
+}) => {
     const organismViewKey: OrganismViewKey = 'covid.singleVariantView';
     const view = useMemo(() => new Routing(organismsConfig).getOrganismView(organismViewKey), [organismsConfig]);
 
@@ -49,6 +55,7 @@ export const CovidSingleVariantReactPage: FC<CovidSingleVariantReactPageProps> =
             view={view}
             downloadLinks={downloadLinks}
             organismsConfig={organismsConfig}
+            mutationAnnotations={mutationAnnotations}
             filters={
                 <>
                     <SingleVariantPageStateSelector

website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantReactPage.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import { type FC, useMemo } from 'react';
 
 import { GenericAnalyseSingleVariantDataDisplay } from './GenericAnalyseSingleVariantDataDisplay';
@@ -16,12 +17,14 @@ export type GenericAnalyseSingleVariantReactPageProps = {
     organism: Exclude<OrganismWithViewKey<typeof singleVariantViewKey>, typeof Organisms.covid>;
     organismsConfig: OrganismsConfig;
     isStaging: boolean;
+    mutationAnnotations?: MutationAnnotations;
 };
 
 export const GenericAnalyseSingleVariantReactPage: FC<GenericAnalyseSingleVariantReactPageProps> = ({
     organism,
     organismsConfig,
     isStaging,
+    mutationAnnotations,
 }) => {
     const organismViewKey = `${organism}.${singleVariantViewKey}` satisfies OrganismViewKey;
     const view = useMemo(
@@ -57,6 +60,7 @@ export const GenericAnalyseSingleVariantReactPage: FC<GenericAnalyseSingleVarian
             view={view}
             downloadLinks={downloadLinks}
             organismsConfig={organismsConfig}
+            mutationAnnotations={mutationAnnotations}
             filters={
                 <SingleVariantPageStateSelector
                     view={view}

website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro

@@ -3,6 +3,7 @@ import { GenericAnalyseSingleVariantReactPage } from './GenericAnalyseSingleVari
 import { isStaging, getDashboardsConfig } from '../../../config';
 import BaseLayout from '../../../layouts/base/BaseLayout.astro';
 import { Organisms } from '../../../types/Organism';
+import { fetchOrganismMutationAnnotations } from '../../../util/fetchOrganismMutationAnnotations';
 import { type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
 import { singleVariantViewKey } from '../../../views/viewKeys';
@@ -14,13 +15,16 @@ interface Props {
 const { organism } = Astro.props;
 
 const view = ServerSide.routing.getOrganismView(`${organism}.${singleVariantViewKey}`);
+
+const mutationAnnotations = await fetchOrganismMutationAnnotations(view.organismConstants, organism);
 ---
 
 <BaseLayout title={view.viewTitle}>
     <GenericAnalyseSingleVariantReactPage
         organism={organism}
         organismsConfig={getDashboardsConfig().dashboards.organisms}
         isStaging={isStaging()}
+        mutationAnnotations={mutationAnnotations}
         client:only='react'
     />
 </BaseLayout>

website/src/components/views/compareSideBySide/GenericCompareSideBySidePage.astro

@@ -2,6 +2,7 @@
 import { GenericCompareSideBySideReactPage } from './GenericCompareSideBySideReactPage';
 import { isStaging, getDashboardsConfig } from '../../../config';
 import BaseLayout from '../../../layouts/base/BaseLayout.astro';
+import { fetchOrganismMutationAnnotations } from '../../../util/fetchOrganismMutationAnnotations';
 import { type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
 import { compareSideBySideViewKey } from '../../../views/viewKeys';
@@ -15,6 +16,8 @@ const { organism, hideMutationComponents } = Astro.props;
 
 const view = ServerSide.routing.getOrganismView(`${organism}.${compareSideBySideViewKey}`);
 const organismsConfig = getDashboardsConfig().dashboards.organisms;
+
+const mutationAnnotations = await fetchOrganismMutationAnnotations(view.organismConstants, organism);
 ---
 
 <BaseLayout title={view.viewTitle}>
@@ -23,6 +26,7 @@ const organismsConfig = getDashboardsConfig().dashboards.organisms;
         hideMutationComponents={hideMutationComponents}
         organismsConfig={organismsConfig}
         isStaging={isStaging()}
+        mutationAnnotations={mutationAnnotations}
         client:only='react'
     />
 </BaseLayout>

website/src/components/views/compareSideBySide/GenericCompareSideBySideReactPage.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import { type FC, useMemo, useState, useEffect } from 'react';
 
 import { GenericCompareSideBySideDataDisplay } from './GenericCompareSideBySideDataDisplay.tsx';
@@ -15,13 +16,15 @@ export type GenericCompareSideBySideReactPageProps = {
     hideMutationComponents?: boolean;
     organismsConfig: OrganismsConfig;
     isStaging: boolean;
+    mutationAnnotations?: MutationAnnotations;
 };
 
 export const GenericCompareSideBySideReactPage: FC<GenericCompareSideBySideReactPageProps> = ({
     organism,
     hideMutationComponents,
     organismsConfig,
     isStaging,
+    mutationAnnotations,
 }) => {
     const organismViewKey = `${organism}.${compareSideBySideViewKey}` satisfies OrganismViewKey;
 
@@ -45,6 +48,7 @@ export const GenericCompareSideBySideReactPage: FC<GenericCompareSideBySideReact
             lapisUrl={organismsConfig[organism].lapis.url}
             view={view}
             downloadLinks={downloadLinks}
+            mutationAnnotations={mutationAnnotations}
         >
             <div className='flex'>
                 <div className='flex flex-1 flex-col'>

website/src/components/views/compareToBaseline/GenericCompareToBaselinePage.astro

@@ -2,6 +2,7 @@
 import { GenericCompareToBaselineReactPage } from './GenericCompareToBaselineReactPage';
 import { isStaging, getDashboardsConfig } from '../../../config';
 import BaseLayout from '../../../layouts/base/BaseLayout.astro';
+import { fetchOrganismMutationAnnotations } from '../../../util/fetchOrganismMutationAnnotations';
 import { type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
 import { compareToBaselineViewKey } from '../../../views/viewKeys';
@@ -13,13 +14,16 @@ interface Props {
 const { organism } = Astro.props;
 
 const view = ServerSide.routing.getOrganismView(`${organism}.${compareToBaselineViewKey}`);
+
+const mutationAnnotations = await fetchOrganismMutationAnnotations(view.organismConstants, organism);
 ---
 
 <BaseLayout title={view.viewTitle}>
     <GenericCompareToBaselineReactPage
         organism={organism}
         organismsConfig={getDashboardsConfig().dashboards.organisms}
         isStaging={isStaging()}
+        mutationAnnotations={mutationAnnotations}
         client:only='react'
     />
 </BaseLayout>

website/src/components/views/compareToBaseline/GenericCompareToBaselineReactPage.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import { type FC, useMemo } from 'react';
 
 import { GenericCompareToBaselineDataDisplay } from './GenericCompareToBaselineDataDisplay';
@@ -13,12 +14,14 @@ export type GenericCompareToBaselineReactPageProps = {
     organism: OrganismWithViewKey<typeof compareToBaselineViewKey>;
     organismsConfig: OrganismsConfig;
     isStaging: boolean;
+    mutationAnnotations?: MutationAnnotations;
 };
 
 export const GenericCompareToBaselineReactPage: FC<GenericCompareToBaselineReactPageProps> = ({
     organism,
     organismsConfig,
     isStaging,
+    mutationAnnotations,
 }) => {
     const organismViewKey = `${organism}.${compareToBaselineViewKey}` satisfies OrganismViewKey;
     const view = useMemo(
@@ -44,6 +47,7 @@ export const GenericCompareToBaselineReactPage: FC<GenericCompareToBaselineReact
             view={view}
             downloadLinks={downloadLinks}
             organismsConfig={organismsConfig}
+            mutationAnnotations={mutationAnnotations}
             filters={
                 <CompareVariantsToBaselineStateSelector
                     view={view}

website/src/components/views/compareVariants/GenericCompareVariantsPage.astro

@@ -2,6 +2,7 @@
 import { GenericCompareVariantsReactPage } from './GenericCompareVariantsReactPage';
 import { isStaging, getDashboardsConfig } from '../../../config';
 import BaseLayout from '../../../layouts/base/BaseLayout.astro';
+import { fetchOrganismMutationAnnotations } from '../../../util/fetchOrganismMutationAnnotations';
 import { type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
 import { compareVariantsViewKey } from '../../../views/viewKeys';
@@ -13,13 +14,16 @@ interface Props {
 const { organism } = Astro.props;
 
 const view = ServerSide.routing.getOrganismView(`${organism}.${compareVariantsViewKey}`);
+
+const mutationAnnotations = await fetchOrganismMutationAnnotations(view.organismConstants, organism);
 ---
 
 <BaseLayout title={view.viewTitle}>
     <GenericCompareVariantsReactPage
         organism={organism}
         organismsConfig={getDashboardsConfig().dashboards.organisms}
         isStaging={isStaging()}
+        mutationAnnotations={mutationAnnotations}
         client:only='react'
     />
 </BaseLayout>

website/src/components/views/compareVariants/GenericCompareVariantsReactPage.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import { type FC, useMemo } from 'react';
 
 import { GenericCompareVariantsDataDisplay } from './GenericCompareVariantsDataDisplay';
@@ -13,12 +14,14 @@ export type GenericCompareVariantsReactPageProps = {
     organism: OrganismWithViewKey<typeof compareVariantsViewKey>;
     organismsConfig: OrganismsConfig;
     isStaging: boolean;
+    mutationAnnotations?: MutationAnnotations;
 };
 
 export const GenericCompareVariantsReactPage: FC<GenericCompareVariantsReactPageProps> = ({
     organism,
     organismsConfig,
     isStaging,
+    mutationAnnotations,
 }) => {
     const organismViewKey = `${organism}.${compareVariantsViewKey}` satisfies OrganismViewKey;
     const view = useMemo(
@@ -44,6 +47,7 @@ export const GenericCompareVariantsReactPage: FC<GenericCompareVariantsReactPage
             view={view}
             downloadLinks={downloadLinks}
             organismsConfig={organismsConfig}
+            mutationAnnotations={mutationAnnotations}
             filters={
                 <CompareVariantsPageStateSelector
                     view={view}

website/src/components/views/sequencingEfforts/GenericSequencingEffortsPage.astro

@@ -2,6 +2,7 @@
 import { GenericSequencingEffortsReactPage } from './GenericSequencingEffortsReactPage';
 import { isStaging, getDashboardsConfig } from '../../../config';
 import BaseLayout from '../../../layouts/base/BaseLayout.astro';
+import { fetchOrganismMutationAnnotations } from '../../../util/fetchOrganismMutationAnnotations';
 import { type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
 import { sequencingEffortsViewKey } from '../../../views/viewKeys';
@@ -13,13 +14,16 @@ interface Props {
 const { organism } = Astro.props;
 
 const view = ServerSide.routing.getOrganismView(`${organism}.${sequencingEffortsViewKey}`);
+
+const mutationAnnotations = await fetchOrganismMutationAnnotations(view.organismConstants, organism);
 ---
 
 <BaseLayout title={view.viewTitle}>
     <GenericSequencingEffortsReactPage
         organism={organism}
         organismsConfig={getDashboardsConfig().dashboards.organisms}
         isStaging={isStaging()}
+        mutationAnnotations={mutationAnnotations}
         client:only='react'
     />
 </BaseLayout>

website/src/components/views/sequencingEfforts/GenericSequencingEffortsReactPage.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import { type FC, useMemo } from 'react';
 
 import { GenericSequencingEffortsDataDisplay } from './GenericSequencingEffortsDataDisplay';
@@ -12,12 +13,14 @@ export type GenericSequencingEffortsReactPageProps = {
     organism: OrganismWithViewKey<typeof sequencingEffortsViewKey>;
     organismsConfig: OrganismsConfig;
     isStaging: boolean;
+    mutationAnnotations?: MutationAnnotations;
 };
 
 export const GenericSequencingEffortsReactPage: FC<GenericSequencingEffortsReactPageProps> = ({
     organism,
     organismsConfig,
     isStaging,
+    mutationAnnotations,
 }) => {
     const organismViewKey = `${organism}.${sequencingEffortsViewKey}` satisfies OrganismViewKey;
     const view = useMemo(
@@ -42,6 +45,7 @@ export const GenericSequencingEffortsReactPage: FC<GenericSequencingEffortsReact
             view={view}
             downloadLinks={downloadLinks}
             organismsConfig={organismsConfig}
+            mutationAnnotations={mutationAnnotations}
             filters={
                 <SequencingEffortsPageStateSelector
                     view={view}

website/src/components/views/wasap/resistanceData.ts

@@ -1,8 +1,9 @@
 import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 
-import type { ResistanceMutationCollectionConfig, WasapPageConfig } from './wasapPageConfig';
+import type { WasapPageConfig } from './wasapPageConfig';
 import type { BackendService } from '../../../backendApi/backendService';
 import type { Collection } from '../../../types/Collection';
+import { buildMutationAnnotations, type ResistanceMutationCollectionConfig } from '../../../util/resistanceMutations';
 
 /**
  * Data about resistance mutations, used by the wastewater dashboards.
@@ -36,33 +37,19 @@ export async function fetchResistanceData(
 }
 
 /**
- * Takes a config and already fetched collection.
+ * Takes a config and already fetched collections.
  * They need to be in the correct order; collection i belongs to config i.
  */
 export function buildResistanceData(
     setConfigs: ResistanceMutationCollectionConfig[],
     collections: Collection[],
 ): ResistanceData {
-    const mutationAnnotations: MutationAnnotations = [];
+    const mutationAnnotations = buildMutationAnnotations(setConfigs, collections);
     const displayMutationsBySet: Record<string, string[]> = {};
 
     setConfigs.forEach((setConfig, i) => {
         const filterVariants = collections[i].variants.filter((v) => v.type === 'filterObject');
-        const allMutations = filterVariants.flatMap((v) => v.filterObject.aminoAcidMutations ?? []);
-
-        displayMutationsBySet[setConfig.name] = allMutations;
-
-        mutationAnnotations.push({
-            name: setConfig.name,
-            symbol: setConfig.annotationSymbol,
-            description: setConfig.description,
-            aminoAcidMutations: filterVariants.flatMap((variant) =>
-                (variant.filterObject.aminoAcidMutations ?? []).map((mutation) => ({
-                    mutation,
-                    name: variant.name,
-                })),
-            ),
-        });
+        displayMutationsBySet[setConfig.name] = filterVariants.flatMap((v) => v.filterObject.aminoAcidMutations ?? []);
     });
 
     return { mutationAnnotations, displayMutationsBySet };

website/src/components/views/wasap/wasapPageConfig.ts

@@ -1,6 +1,7 @@
 import type { DateRangeOption, SequenceType, TemporalGranularity } from '@genspectrum/dashboard-components/util';
 
 import type { Organism } from '../../../types/Organism.ts';
+import type { ResistanceMutationCollectionConfig } from '../../../util/resistanceMutations';
 
 export const SEQUENCE_TYPE = {
     nucleotide: 'nucleotide',
@@ -305,13 +306,3 @@ export type WasapFilter = {
     base: WasapBaseFilter;
     analysis: WasapAnalysisFilter;
 };
-
-/**
- * Resistance mutations defined in a collection, which is specified via the collection ID.
- */
-export type ResistanceMutationCollectionConfig = {
-    collectionId: number;
-    name: string;
-    description: string;
-    annotationSymbol: string;
-};

website/src/layouts/OrganismPage/OrganismViewPageLayout.tsx

@@ -1,3 +1,4 @@
+import type { MutationAnnotations } from '@genspectrum/dashboard-components/util';
 import type { FC, PropsWithChildren } from 'react';
 
 import { type DownloadLink } from './AccessionsDownloadButton.tsx';
@@ -10,12 +11,14 @@ export type OrganismViewPageLayoutProps = PropsWithChildren<{
     view: View<object, OrganismConstants, PageStateHandler<object>>;
     downloadLinks: DownloadLink[];
     lapisUrl: string;
+    mutationAnnotations?: MutationAnnotations;
 }>;
 
 export const OrganismViewPageLayout: FC<OrganismViewPageLayoutProps> = ({
     view,
     downloadLinks,
     lapisUrl,
+    mutationAnnotations,
     children,
 }) => {
     return (
@@ -26,7 +29,10 @@ export const OrganismViewPageLayout: FC<OrganismViewPageLayoutProps> = ({
             lapisUrl={lapisUrl}
             accessionDownloadFields={view.organismConstants.accessionDownloadFields}
         >
-            <gs-app lapis={lapisUrl} mutationAnnotations={view.organismConstants.mutationAnnotations}>
+            <gs-app
+                lapis={lapisUrl}
+                mutationAnnotations={mutationAnnotations ?? view.organismConstants.mutationAnnotations}
+            >
                 {children}
             </gs-app>
         </DataPageLayout>