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

### Summary

Extract resistance mutation collection configs and helpers from the
wasap subtree into a shared util file (resistanceMutations.ts). Add
`byEnv` as a pure selector to dbIdSpace.ts. Wire COVID, RSV-A, and RSV-B
constants to factory functions that build collection configs; have the
generic Astro page components fetch annotations server-side and pass
them down through the React layout tree.

### Screenshot

<img width="1615" height="1277" alt="image"
src="https://github.com/user-attachments/assets/2ac51710-8848-45d5-9035-6f4f14e06126"
/>


## PR Checklist
- [ ] All necessary documentation has been adapted.
- [ ] The implemented feature is covered by an appropriate test.

---------

Co-authored-by: Felix Hennig <felix-agent@felixhennig.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 3 people

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>