@genspectrum/dashboard-components 0.13.5 → 0.13.7

package/src/preact/mutationFilter/mutation-filter-info.tsx

@@ -1,58 +1,140 @@
 import { useContext } from 'preact/hooks';
-import { type FC } from 'react';
 
-import { isSingleSegmented } from '../../lapisApi/ReferenceGenome';
-import { type SequenceType } from '../../types';
+import { isSingleSegmented, type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { ExampleMutation } from './ExampleMutation';
 import Info, { InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 
 export const MutationFilterInfo = () => {
-    const referenceGenome = useContext(ReferenceGenomeContext);
-
-    const firstGene = referenceGenome.genes[0].name;
     return (
         <Info>
             <InfoHeadline1> Mutation Filter</InfoHeadline1>
             <InfoParagraph>This component allows you to filter for mutations at specific positions.</InfoParagraph>
 
+            <QuickStart />
+            <NucleotideMutationsInfo />
+            <AminoAcidMutationsInfo />
+            <InsertionWildcards />
+            <MultipleMutations />
+            <AnyMutation />
+            <NoMutation />
+        </Info>
+    );
+};
+
+const QuickStart = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+    return (
+        <>
             <InfoHeadline2>Quickstart</InfoHeadline2>
             <InfoParagraph>
                 <ul className='list-disc list-inside'>
-                    <li>
-                        Filter for nucleotide mutations:{' '}
-                        <ExampleMutation mutationType='substitution' sequenceType='nucleotide' />
-                    </li>
-                    <li>
-                        Filter for amino acid mutations:{' '}
-                        <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />
-                    </li>
-                    <li>
-                        Filter for nucleotide insertions:{' '}
-                        <ExampleMutation mutationType='substitution' sequenceType='amino acid' />
-                    </li>
-                    <li>
-                        Filter for amino acid insertions:{' '}
-                        <ExampleMutation mutationType='insertion' sequenceType='amino acid' />
-                    </li>
+                    {referenceGenome.nucleotideSequences.length > 0 && (
+                        <li>
+                            Filter for nucleotide mutations:{' '}
+                            <ExampleMutation mutationType='substitution' sequenceType='nucleotide' />
+                        </li>
+                    )}
+                    {referenceGenome.genes.length > 0 && (
+                        <li>
+                            Filter for amino acid mutations:{' '}
+                            <ExampleMutation mutationType='substitution' sequenceType='amino acid' />
+                        </li>
+                    )}
+                    {referenceGenome.nucleotideSequences.length > 0 && (
+                        <li>
+                            Filter for nucleotide insertions:{' '}
+                            <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />
+                        </li>
+                    )}
+                    {referenceGenome.genes.length > 0 && (
+                        <li>
+                            Filter for amino acid insertions:{' '}
+                            <ExampleMutation mutationType='insertion' sequenceType='amino acid' />
+                        </li>
+                    )}
                 </ul>
             </InfoParagraph>
-            {!isSingleSegmented(referenceGenome) && (
+
+            {referenceGenome.nucleotideSequences.length > 1 ? (
                 <InfoParagraph>
                     This organism has the following segments:{' '}
                     {referenceGenome.nucleotideSequences.map((gene) => gene.name).join(', ')}.
                 </InfoParagraph>
+            ) : (
+                <InfoParagraph>This organism doesn't support nucleotide sequences.</InfoParagraph>
+            )}
+            {referenceGenome.genes.length !== 0 ? (
+                <InfoParagraph>
+                    This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
+                </InfoParagraph>
+            ) : (
+                <InfoParagraph>This organism doesn't support amino acid sequences.</InfoParagraph>
             )}
+        </>
+    );
+};
+
+const NucleotideMutationsInfo = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    if (referenceGenome.nucleotideSequences.length === 0) {
+        return null;
+    }
+
+    if (isSingleSegmented(referenceGenome)) {
+        return (
+            <>
+                <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
+                <InfoParagraph>
+                    This organism is single-segmented. Thus, nucleotide mutations have the format{' '}
+                    <b>&lt;position&gt;&lt;base&gt;</b> or <b>&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. The{' '}
+                    <b>&lt;base_ref&gt;</b> is the reference base at the position. It is optional. A <b>&lt;base&gt;</b>{' '}
+                    can be one of the four nucleotides <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be{' '}
+                    <b>-</b> for deletion and <b>N</b> for unknown. For example if the reference sequence is <b>A</b> at
+                    position <b>23</b> both: <b>23T</b> and <b>A23T</b> will yield the same results.
+                </InfoParagraph>
+                <InfoParagraph>
+                    Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to
+                    the start of the mutation. Example: <b>ins_1046:A</b> would filter for sequences with an insertion
+                    of A between the positions 1046 and 1047 in the nucleotide sequence.
+                </InfoParagraph>
+            </>
+        );
+    }
+
+    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+    return (
+        <>
+            <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
             <InfoParagraph>
-                This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
+                This organism is multi-segmented. Thus, nucleotide mutations have the format{' '}
+                <b>&lt;segment&gt;:&lt;position&gt;&lt;base&gt;</b> or{' '}
+                <b>&lt;segment&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. <b>&lt;base_ref&gt;</b> is the
+                reference base at the position. It is optional. A <b>&lt;base&gt;</b> can be one of the four nucleotides{' '}
+                <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for deletion and <b>N</b> for
+                unknown. For example if the reference sequence is <b>A</b> at position <b>23</b> both:{' '}
+                <b>{firstSegment}:23T</b> and <b>{firstSegment}:A23T</b> will yield the same results.
             </InfoParagraph>
+            <InfoParagraph>
+                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
+                start of the mutation. Example: <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />.
+            </InfoParagraph>
+        </>
+    );
+};
 
-            <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
-            {isSingleSegmented(referenceGenome) ? (
-                <SingleSegmentedNucleotideMutationsInfo />
-            ) : (
-                <MultiSegmentedNucleotideMutationsInfo />
-            )}
+const AminoAcidMutationsInfo = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
 
+    if (referenceGenome.genes.length === 0) {
+        return null;
+    }
+
+    const firstGene = referenceGenome.genes[0].name;
+
+    return (
+        <>
             <InfoHeadline2>Amino Acid Mutations and Insertions</InfoHeadline2>
             <InfoParagraph>
                 An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
@@ -65,116 +147,101 @@ export const MutationFilterInfo = () => {
                 start of the mutation. Example: <b>ins_{firstGene}:31:N</b> would filter for sequences with an insertion
                 of N between positions 31 and 32 in the gene {firstGene}.
             </InfoParagraph>
+        </>
+    );
+};
+
+const InsertionWildcards = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
 
+    if (referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
             <InfoHeadline2>Insertion Wildcards</InfoHeadline2>
             <InfoParagraph>
-                This component supports insertion queries that contain wildcards <b>?</b>. For example{' '}
-                <b>ins_{firstGene}:214:?EP?</b> will match all cases where segment <b>{firstGene}</b> has an insertion
-                of <b>EP</b> between the positions <b>214</b> and <b>215</b> but also an insertion of other amino acids
-                which include the <b>EP</b>, e.g. the insertion <b>EPE</b> will be matched.
+                This component supports nucleotide and amino acid insertion queries that contain wildcards <b>?</b>. For
+                example{' '}
+                <b>
+                    ins_{exampleSegmentString(referenceGenome)}214:?{exampleWildcardInsertion(referenceGenome)}?
+                </b>{' '}
+                will match all cases where segment <b>{exampleSegment(referenceGenome)}</b> has an insertion of{' '}
+                <b>{exampleWildcardInsertion(referenceGenome)}</b> between the positions <b>214</b> and <b>215</b> but
+                also an insertion of other amino acids which include the <b>EP</b>, e.g. the insertion{' '}
+                <b>{exampleWildcardInsertion(referenceGenome)}T</b> will be matched.
             </InfoParagraph>
             <InfoParagraph>
                 You can also use wildcards to match any insertion at a given position. For example{' '}
-                <b>ins_{firstGene}:214:?</b> match any (but at least one) insertion between the positions 214 and 215.
+                <b>ins_{exampleSegmentString(referenceGenome)}214:?</b> match any (but at least one) insertion between
+                the positions 214 and 215.
             </InfoParagraph>
+        </>
+    );
+};
 
-            <InfoHeadline2>Multiple Mutations</InfoHeadline2>
-            <InfoParagraph>
-                Multiple mutation filters can be provided by adding one mutation after the other.
-            </InfoParagraph>
+const exampleSegmentString = (referenceGenome: ReferenceGenome) => {
+    const segment = exampleSegment(referenceGenome);
+    if (segment === '') {
+        return '';
+    }
+    return `${segment}:`;
+};
 
-            <InfoHeadline2>Any Mutation</InfoHeadline2>
-            <InfoParagraph>
-                To filter for any mutation at a given position you can omit the <b>&lt;base&gt;</b>. Example:{' '}
-                <b>{firstGene}:20</b>.
-            </InfoParagraph>
+const exampleSegment = (referenceGenome: ReferenceGenome) => {
+    if (referenceGenome.genes.length > 0) {
+        return `${referenceGenome.genes[0].name}`;
+    }
+    if (referenceGenome.nucleotideSequences.length > 1) {
+        return `${referenceGenome.nucleotideSequences[0].name}`;
+    }
+    return '';
+};
 
-            <InfoHeadline2>No Mutation</InfoHeadline2>
-            <InfoParagraph>
-                You can write a <b>.</b> for the <b>&lt;base&gt;</b> to filter for sequences for which it is confirmed
-                that no mutation occurred, i.e. has the same base as the reference genome at the specified position.
-            </InfoParagraph>
-        </Info>
-    );
+const exampleWildcardInsertion = (referenceGenome: ReferenceGenome) => {
+    if (referenceGenome.genes.length > 0) {
+        return 'EP';
+    }
+    if (referenceGenome.nucleotideSequences.length > 0) {
+        return 'CG';
+    }
+    return '';
 };
 
-const SingleSegmentedNucleotideMutationsInfo = () => {
+const MultipleMutations = () => {
     return (
         <>
+            <InfoHeadline2>Multiple Mutations</InfoHeadline2>
             <InfoParagraph>
-                This organism is single-segmented. Thus, nucleotide mutations have the format{' '}
-                <b>&lt;position&gt;&lt;base&gt;</b> or <b>&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. The{' '}
-                <b>&lt;base_ref&gt;</b> is the reference base at the position. It is optional. A <b>&lt;base&gt;</b> can
-                be one of the four nucleotides <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for
-                deletion and <b>N</b> for unknown. For example if the reference sequence is <b>A</b> at position{' '}
-                <b>23</b> both: <b>23T</b> and <b>A23T</b> will yield the same results.
-            </InfoParagraph>
-            <InfoParagraph>
-                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
-                start of the mutation. Example: <b>ins_1046:A</b> would filter for sequences with an insertion of A
-                between the positions 1046 and 1047 in the nucleotide sequence.
+                Multiple mutation filters can be provided by adding one mutation after the other.
             </InfoParagraph>
         </>
     );
 };
 
-const MultiSegmentedNucleotideMutationsInfo = () => {
+const AnyMutation = () => {
     const referenceGenome = useContext(ReferenceGenomeContext);
 
-    const firstSegment = referenceGenome.nucleotideSequences[0].name;
-
     return (
         <>
+            <InfoHeadline2>Any Mutation</InfoHeadline2>
             <InfoParagraph>
-                This organism is multi-segmented. Thus, nucleotide mutations have the format{' '}
-                <b>&lt;segment&gt;:&lt;position&gt;&lt;base&gt;</b> or{' '}
-                <b>&lt;segment&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. <b>&lt;base_ref&gt;</b> is the
-                reference base at the position. It is optional. A <b>&lt;base&gt;</b> can be one of the four nucleotides{' '}
-                <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for deletion and <b>N</b> for
-                unknown. For example if the reference sequence is <b>A</b> at position <b>23</b> both:{' '}
-                <b>{firstSegment}:23T</b> and <b>{firstSegment}:A23T</b> will yield the same results.
-            </InfoParagraph>
-            <InfoParagraph>
-                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
-                start of the mutation. Example: <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />.
+                To filter for any mutation at a given position you can omit the <b>&lt;base&gt;</b>. Example:{' '}
+                <b>{exampleSegmentString(referenceGenome)}20</b>.
             </InfoParagraph>
         </>
     );
 };
 
-type ExampleMutationProps = {
-    sequenceType: SequenceType;
-    mutationType: 'substitution' | 'insertion';
-};
-
-const ExampleMutation: FC<ExampleMutationProps> = ({ sequenceType, mutationType }) => {
-    const referenceGenome = useContext(ReferenceGenomeContext);
-
-    const firstSegment = referenceGenome.nucleotideSequences[0].name;
-    const firstGene = referenceGenome.genes[0].name;
-
-    if (sequenceType === 'amino acid') {
-        switch (mutationType) {
-            case 'substitution':
-                return <b>{firstGene}:57Q</b>;
-            case 'insertion':
-                return <b>ins_{firstGene}:31:N</b>;
-        }
-    }
-
-    if (isSingleSegmented(referenceGenome)) {
-        switch (mutationType) {
-            case 'substitution':
-                return <b>23T</b>;
-            case 'insertion':
-                return <b>ins_1046:A</b>;
-        }
-    }
-
-    switch (mutationType) {
-        case 'substitution':
-            return <b>{firstSegment}:23T</b>;
-        case 'insertion':
-            return <b>ins_{firstSegment}:10462:A</b>;
-    }
+const NoMutation = () => {
+    return (
+        <>
+            <InfoHeadline2>No Mutation</InfoHeadline2>
+            <InfoParagraph>
+                You can write a <b>.</b> for the <b>&lt;base&gt;</b> to filter for sequences for which it is confirmed
+                that no mutation occurred, i.e. has the same base as the reference genome at the specified position.
+            </InfoParagraph>
+        </>
+    );
 };

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
+import { getExampleMutation } from './ExampleMutation';
 import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation, type ParsedMutationFilter } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
@@ -208,7 +209,6 @@ const MutationFilterSelector: FunctionComponent<{
     };
 
     const handleBlur = (event: FocusEvent) => {
-        // Check if click was inside the selector
         if (!selectorRef.current?.contains(event.relatedTarget as Node)) {
             setOption(null);
         }
@@ -242,11 +242,16 @@ const MutationFilterSelector: FunctionComponent<{
 };
 
 function getPlaceholder(referenceGenome: ReferenceGenome) {
-    const segmentPrefix =
-        referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : '';
-    const firstGene = referenceGenome.genes[0].name;
+    const nucleotideSubstitution = getExampleMutation(referenceGenome, 'nucleotide', 'substitution');
+    const nucleotideInsertion = getExampleMutation(referenceGenome, 'nucleotide', 'insertion');
+    const aminoAcidSubstitution = getExampleMutation(referenceGenome, 'amino acid', 'substitution');
+    const aminoAcidInsertion = getExampleMutation(referenceGenome, 'amino acid', 'insertion');
 
-    return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
+    const exampleMutations = [nucleotideSubstitution, nucleotideInsertion, aminoAcidSubstitution, aminoAcidInsertion]
+        .filter((example) => example !== '')
+        .join(', ');
+
+    return `Enter a mutation (e.g. ${exampleMutations})`;
 }
 
 const backgroundColor: { [key in keyof SelectedFilters]: string } = {

package/src/preact/mutations/mutations.tsx

@@ -19,8 +19,9 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
+import { DeletionsLink, InsertionsLink, ProportionExplanation, SubstitutionsLink } from '../components/mutation-info';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
@@ -242,29 +243,10 @@ const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponen
         <Info>
             <InfoHeadline1>Mutations</InfoHeadline1>
             <InfoParagraph>
-                This shows mutations of a variant. There are three types of mutations:{' '}
-                <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
-                <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
-                <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
-            </InfoParagraph>
-            <InfoHeadline2>Proportion calculation</InfoHeadline2>
-            <InfoParagraph>
-                The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
-                total number of sequences with a non-ambiguous symbol at the position.
-            </InfoParagraph>
-            <InfoParagraph>
-                <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and
-                assume there are 10 sequences in total:
-                <ul className='list-disc list-inside ml-2'>
-                    <li>3 sequences have a C,</li>
-                    <li>2 sequences have a T,</li>
-                    <li>1 sequence has a G,</li>
-                    <li>3 sequences have an N,</li>
-                    <li>1 sequence has a Y (which means T or C),</li>
-                </ul>
-                then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from
-                the calculation.
+                This shows mutations of a variant. There are three types of mutations: <SubstitutionsLink />,{' '}
+                <DeletionsLink /> and <InsertionsLink />.
             </InfoParagraph>
+            <ProportionExplanation />
             <InfoComponentCode componentName='mutations' params={originalComponentProps} lapisUrl={lapis} />
         </Info>
     );

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

@@ -49,13 +49,23 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
                     gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
                 }}
+                className='text-center'
             >
+                {dates.map((date, columnIndex) => (
+                    <div
+                        className='@container font-semibold'
+                        style={{ gridRowStart: 1, gridColumnStart: columnIndex + 2 }}
+                        key={date.dateString}
+                    >
+                        <p {...styleGridHeader(columnIndex, dates)}>{date.dateString}</p>
+                    </div>
+                ))}
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
                         <Fragment key={`fragment-${mutation.toString()}`}>
                             <div
                                 key={`mutation-${mutation.toString()}`}
-                                style={{ gridRowStart: rowIndex + 1, gridColumnStart: 1 }}
+                                style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
                             >
                                 <MutationCell mutation={mutation} />
                             </div>
@@ -69,7 +79,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 );
                                 return (
                                     <div
-                                        style={{ gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 }}
+                                        style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
                                         key={`${mutation.toString()}-${date.toString()}`}
                                     >
                                         <ProportionCell
@@ -90,6 +100,18 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     );
 };
 
+function styleGridHeader(columnIndex: number, dates: Temporal[]) {
+    if (columnIndex === 0) {
+        return { className: 'overflow-visible text-nowrap' };
+    }
+
+    if (columnIndex === dates.length - 1) {
+        return { className: 'overflow-visible text-nowrap', style: { direction: 'rtl' } };
+    }
+
+    return { className: 'invisible @[6rem]:visible' };
+}
+
 function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number) {
     const tooltipX = rowIndex < rows / 2 || rowIndex < 6 ? 'bottom' : 'top';
     const tooltipY = columnIndex < columns / 2 ? 'start' : 'end';
@@ -135,7 +157,7 @@ const ProportionCell: FunctionComponent<{
                         backgroundColor: getColorWithingScale(value?.proportion, colorScale),
                         color: getTextColorForScale(value?.proportion, colorScale),
                     }}
-                    className={`w-full h-full text-center hover:font-bold text-xs group @container`}
+                    className={`w-full h-full hover:font-bold text-xs group @container`}
                 >
                     <span className='invisible @[2rem]:visible'>
                         {value === null ? '' : formatProportion(value.proportion, 0)}
@@ -155,7 +177,7 @@ const timeIntervalDisplay = (date: TemporalClass) => {
 };
 
 const MutationCell: FunctionComponent<{ mutation: Substitution | Deletion }> = ({ mutation }) => {
-    return <div className='text-center'>{mutation.code}</div>;
+    return <div>{mutation.code}</div>;
 };
 
 export default MutationsOverTimeGrid;

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

@@ -30,12 +30,7 @@ const Template = {
     render: (args: WastewaterMutationsOverTimeProps) => (
         <LapisUrlContext.Provider value={WISE_LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <WastewaterMutationsOverTime
-                    width={args.width}
-                    height={args.height}
-                    lapisFilter={args.lapisFilter}
-                    sequenceType={args.sequenceType}
-                />
+                <WastewaterMutationsOverTime {...args} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -48,6 +43,7 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
         height: '700px',
         lapisFilter: {},
         sequenceType: 'nucleotide',
+        maxNumberOfGridRows: 100,
     },
     parameters: {
         fetchMock: {

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

@@ -23,7 +23,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     sequenceType: sequenceTypeSchema,
     width: z.string(),
     height: z.string(),
-    maxNumberOfGridRows: z.number().optional(),
+    maxNumberOfGridRows: z.number(),
 });
 
 export type WastewaterMutationsOverTimeProps = z.infer<typeof wastewaterMutationOverTimeSchema>;

package/src/query/queryWastewaterMutationsOverTime.spec.ts

@@ -88,7 +88,35 @@ describe('queryWastewaterMutationsOverTime', () => {
         );
 
         await expect(queryWastewaterMutationsOverTime(DUMMY_LAPIS_URL, lapisFilter)).rejects.toThrowError(
-            /^Failed to parse mutation frequency/,
+            /Failed to parse mutation frequency/,
+        );
+    });
+
+    it('should error on invalid mutation', async () => {
+        const lapisFilter = { country: 'Germany' };
+
+        lapisRequestMocks.details(
+            {
+                country: 'Germany',
+                fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'],
+            },
+            {
+                data: [
+                    {
+                        date: '2021-01-01',
+                        location: 'Germany',
+                        reference: 'organismA',
+                        nucleotideMutationFrequency: JSON.stringify({
+                            'not a mutation': 0.4,
+                        }),
+                        aminoAcidMutationFrequency: null,
+                    },
+                ],
+            },
+        );
+
+        await expect(queryWastewaterMutationsOverTime(DUMMY_LAPIS_URL, lapisFilter)).rejects.toThrowError(
+            /Failed to parse mutation: "not a mutation"/,
         );
     });
 });

package/src/query/queryWastewaterMutationsOverTime.ts

@@ -25,18 +25,26 @@ export async function queryWastewaterMutationsOverTime(
     ]);
     const data = (await fetchData.evaluate(lapis, signal)).content;
 
-    return data.map((row) => ({
-        location: row.location as string,
-        date: toTemporalClass(parseDateStringToTemporal(row.date as string, 'day')),
-        nucleotideMutationFrequency:
-            row.nucleotideMutationFrequency !== null
-                ? transformMutations(JSON.parse(row.nucleotideMutationFrequency as string))
-                : [],
-        aminoAcidMutationFrequency:
-            row.aminoAcidMutationFrequency !== null
-                ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency as string))
-                : [],
-    }));
+    return data.map((row) => {
+        try {
+            return {
+                location: row.location as string,
+                date: toTemporalClass(parseDateStringToTemporal(row.date as string, 'day')),
+                nucleotideMutationFrequency:
+                    row.nucleotideMutationFrequency !== null
+                        ? transformMutations(JSON.parse(row.nucleotideMutationFrequency as string))
+                        : [],
+                aminoAcidMutationFrequency:
+                    row.aminoAcidMutationFrequency !== null
+                        ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency as string))
+                        : [],
+            };
+        } catch (e) {
+            throw new Error(
+                `Failed to parse row of wastewater data: ${JSON.stringify(row)}: ${(e as Error)?.message ?? 'Unknown error'}`,
+            );
+        }
+    });
 }
 
 const mutationFrequencySchema = z.record(z.number().nullable());
@@ -48,8 +56,14 @@ function transformMutations(input: unknown): { mutation: Substitution; proportio
         throw new Error(`Failed to parse mutation frequency: ${mutationFrequency.error.message}`);
     }
 
-    return Object.entries(mutationFrequency.data).map(([key, value]) => ({
-        mutation: SubstitutionClass.parse(key)!,
-        proportion: value,
-    }));
+    return Object.entries(mutationFrequency.data).map(([key, value]) => {
+        const mutation = SubstitutionClass.parse(key);
+        if (mutation === null) {
+            throw new Error(`Failed to parse mutation: "${key}"`);
+        }
+        return {
+            mutation,
+            proportion: value,
+        };
+    });
 }

package/src/web-components/{app.stories.ts → gs-app.stories.ts}

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import './app';
+import './gs-app';
 
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';