@genspectrum/dashboard-components 0.18.2 → 0.18.3

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -6,6 +6,7 @@ import nucleotideMutationsSomeDataset from './__mockData__/nucleotideMutationsSo
 import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -90,8 +91,9 @@ const mutationAnnotations = [
         symbol: '+',
         nucleotideMutations: ['C3037T', 'A23403G'],
         aminoAcidMutations: ['ORF1a:I2230T'],
+        aminoAcidPositions: ['ORF1a:3675'],
     },
-];
+] satisfies MutationAnnotations;
 
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (

package/src/preact/mutations/mutations.stories.tsx

@@ -13,6 +13,7 @@ import {
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import baselineNucleotideMutations from '../../preact/mutations/__mockData__/baselineNucleotideMutations.json';
 import overallVariantCount from '../../preact/mutations/__mockData__/overallVariantCount.json';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -45,6 +46,7 @@ const mutationAnnotations = [
         description: 'This describes what is special about these mutations.',
         symbol: '#',
         nucleotideMutations: ['C241T', 'C3037T'],
+        nucleotidePositions: [],
         aminoAcidMutations: ['N:G204R', 'N:S235F'],
     },
     {
@@ -52,9 +54,10 @@ const mutationAnnotations = [
         description: 'This describes what is special about these other mutations.',
         symbol: '+',
         nucleotideMutations: ['C3037T', 'C11750T'],
+        nucleotidePositions: ['14408'],
         aminoAcidMutations: ['ORF1a:S2255F'],
     },
-];
+] satisfies MutationAnnotations;
 
 const Template = {
     render: (args: MutationsProps) => (

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -5,6 +5,7 @@ import { type Canvas } from '@storybook/types';
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -49,6 +50,7 @@ const mutationAnnotations = [
         symbol: '#',
         nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
         aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+        nucleotidePositions: ['17334'],
     },
     {
         name: 'I am another mutation annotation!',
@@ -57,7 +59,7 @@ const mutationAnnotations = [
         nucleotideMutations: ['C44T', 'A13121T'],
         aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
     },
-];
+] satisfies MutationAnnotations;
 
 export const Default: StoryObj<MutationsOverTimeProps> = {
     render: (args: MutationsOverTimeProps) => (

package/src/preact/sequencesByLocation/leafletStyleModifications.css

@@ -1,3 +1,8 @@
 .leaflet-container {
     background: transparent;
 }
+
+.leaflet-interactive {
+    outline: none;
+    cursor: pointer;
+}

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect } from '@storybook/test';
 
 import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
 import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
@@ -65,3 +66,27 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
         },
     },
 };
+
+export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        sequenceType: 'amino acid',
+    },
+    play: async ({ canvas, step }) => {
+        await step('Wait for component to render', async () => {
+            await canvas.findByText('All segments');
+        });
+
+        await step("Click 'All segments' button", async () => {
+            canvas.getByRole('button', { name: 'All segments' }).click();
+            await expect(canvas.getByText('Select none')).toBeInTheDocument();
+            canvas.getByRole('button', { name: 'Select none' }).click();
+            await canvas.findAllByText('No data available for your filters.');
+            canvas.getByRole('checkbox', { name: 'S' }).click();
+            await canvas.findAllByText('S:Q493E');
+            const element = canvas.queryByText(/ORF1a:/);
+            await expect(element).not.toBeInTheDocument();
+        });
+    },
+};

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx

@@ -1,9 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
 import { lapisFilterSchema, sequenceTypeSchema } from '../../../types';
+import { Map2dView } from '../../../utils/map2d';
 import { useLapisUrl } from '../../LapisUrlContext';
 import { type ColorScale } from '../../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../../components/color-scale-selector-dropdown';
@@ -13,6 +14,7 @@ import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../../com
 import { LoadingDisplay } from '../../components/loading-display';
 import { NoDataDisplay } from '../../components/no-data-display';
 import { ResizeContainer } from '../../components/resize-container';
+import { type DisplayedSegment, SegmentSelector } from '../../components/segment-selector';
 import Tabs from '../../components/tabs';
 import { type MutationOverTimeDataMap } from '../../mutationsOverTime/MutationOverTimeData';
 import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
@@ -86,28 +88,67 @@ type MutationOverTimeDataPerLocation = {
     data: MutationOverTimeDataMap;
 }[];
 
+function useDisplayedSegments(mutations: MutationOverTimeDataPerLocation) {
+    const displayedSegments = useMemo(() => {
+        const unique = [
+            ...new Set(
+                mutations.flatMap(({ data }) => data.getFirstAxisKeys().map((mutation) => mutation.segment || '')),
+            ),
+        ];
+
+        return unique.map((segment) => ({ segment, label: segment, checked: true }));
+    }, [mutations]);
+
+    return useState<DisplayedSegment[]>(displayedSegments);
+}
+
 type MutationOverTimeTabsProps = {
     mutationOverTimeDataPerLocation: MutationOverTimeDataPerLocation;
     originalComponentProps: WastewaterMutationsOverTimeProps;
 };
 
+function getFilteredMutationOverTimeData({
+    data,
+    displayedSegments,
+}: {
+    data: MutationOverTimeDataMap;
+    displayedSegments: DisplayedSegment[];
+}): MutationOverTimeDataMap {
+    const filteredData = new Map2dView(data);
+
+    const mutationsToFilterOut = data.getFirstAxisKeys().filter((entry) => {
+        return displayedSegments.some((segment) => segment.segment === entry.segment && !segment.checked);
+    });
+
+    mutationsToFilterOut.forEach((entry) => {
+        filteredData.deleteRow(entry);
+    });
+
+    return filteredData;
+}
+
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeDataPerLocation,
     originalComponentProps,
 }) => {
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(mutationOverTimeDataPerLocation);
 
-    const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
-        title: location,
-        content: (
-            <MutationsOverTimeGrid
-                data={data}
-                colorScale={colorScale}
-                pageSizes={originalComponentProps.pageSizes}
-                sequenceType={originalComponentProps.sequenceType}
-            />
-        ),
-    }));
+    const tabs = useMemo(
+        () =>
+            mutationOverTimeDataPerLocation.map(({ location, data }) => ({
+                title: location,
+                content: (
+                    <MutationsOverTimeGrid
+                        data={getFilteredMutationOverTimeData({ data, displayedSegments })}
+                        colorScale={colorScale}
+                        pageSizes={originalComponentProps.pageSizes}
+                        sequenceType={originalComponentProps.sequenceType}
+                    />
+                ),
+            })),
+        [mutationOverTimeDataPerLocation, displayedSegments, colorScale, originalComponentProps],
+    );
 
     const toolbar = (
         <Toolbar
@@ -115,6 +156,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             setColorScale={setColorScale}
             originalComponentProps={originalComponentProps}
             data={mutationOverTimeDataPerLocation}
+            displayedSegments={displayedSegments}
+            setDisplayedSegments={setDisplayedSegments}
         />
     );
 
@@ -126,12 +169,21 @@ type ToolbarProps = {
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: WastewaterMutationsOverTimeProps;
     data: MutationOverTimeDataPerLocation;
+    displayedSegments: DisplayedSegment[];
+    setDisplayedSegments: (segments: DisplayedSegment[]) => void;
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ colorScale, setColorScale, originalComponentProps }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({
+    colorScale,
+    setColorScale,
+    originalComponentProps,
+    displayedSegments,
+    setDisplayedSegments,
+}) => {
     return (
         <>
             <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
+            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
             <WastewaterMutationsOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>

package/src/web-components/MutationAnnotations.mdx

@@ -19,7 +19,9 @@ The mutation annotations can be (optionally) supplied to `gs-app` as a JSON obje
             description: 'This describes what is special about these mutations.',
             symbol: '+',
             nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+            nucleotidePositions: ['123', '234'],
             aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+            aminoAcidPositions: ['S:123', 'ORF1a:234']
         },
     ]"
 >
@@ -31,3 +33,9 @@ The mutation annotations are then distributed to child components.
 Whenever we display a mutation (e.g. in the `gs-mutations` table view)
 we will append the `symbol` of all matching annotations: <span>C44T<sup class='text-red-600'>+</sup></span>.
 Users can click on the mutation to open a modal that shows the `name` and `description` of the annotation.
+
+The annotation can be applied to specific mutations:
+
+- `nucleotideMutations: [C44T]` matches only the nucleotide mutation `C44T`,
+- `aminoAcidPositions: [S:123]` matches all amino acid mutations that occur on the gene `S` at position `123`
+- If the pathogen has only one segment, one can omit the segment, writing `123` for any mutation at position `123`.

package/src/web-components/gs-app.stories.ts

@@ -51,7 +51,9 @@ const Template: StoryObj<StoryProps> = {
                 description: 'This describes what is special about these mutations.',
                 symbol: '*',
                 nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+                nucleotidePositions: ['123', '456'],
                 aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+                aminoAcidPositions: ['S:123'],
             },
         ],
     },

package/src/web-components/gs-app.ts

@@ -53,8 +53,10 @@ export class AppComponent extends LitElement {
         name: string;
         description: string;
         symbol: string;
-        nucleotideMutations: string[];
-        aminoAcidMutations: string[];
+        nucleotideMutations?: string[];
+        nucleotidePositions?: string[];
+        aminoAcidMutations?: string[];
+        aminoAcidPositions?: string[];
     }[] = [];
 
     /**

package/src/web-components/mutation-annotations-context.ts

@@ -1,12 +1,16 @@
 import { createContext } from '@lit/context';
 import z from 'zod';
 
+const annotations = z.array(z.string());
+
 const mutationAnnotationSchema = z.object({
     name: z.string(),
     description: z.string(),
     symbol: z.string(),
-    nucleotideMutations: z.array(z.string()),
-    aminoAcidMutations: z.array(z.string()),
+    nucleotideMutations: annotations.optional(),
+    nucleotidePositions: annotations.optional(),
+    aminoAcidMutations: annotations.optional(),
+    aminoAcidPositions: annotations.optional(),
 });
 export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;