@genspectrum/dashboard-components 0.13.6 → 0.14.1

package/src/preact/mutationFilter/ExampleMutation.tsx

@@ -0,0 +1,68 @@
+import { useContext } from 'preact/hooks';
+import type { FC } from 'react';
+
+import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import type { SequenceType } from '../../types';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+type ExampleMutationProps = {
+    sequenceType: SequenceType;
+    mutationType: 'substitution' | 'insertion';
+};
+
+export const ExampleMutation: FC<ExampleMutationProps> = ({ sequenceType, mutationType }) => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    return <b>{getExampleMutation(referenceGenome, sequenceType, mutationType)}</b>;
+};
+
+export function getExampleMutation(
+    referenceGenome: ReferenceGenome,
+    sequenceType: SequenceType,
+    mutationType: 'substitution' | 'insertion',
+) {
+    switch (sequenceType) {
+        case 'amino acid': {
+            if (referenceGenome.genes.length === 0) {
+                return '';
+            }
+
+            const firstGene = referenceGenome.genes[0].name;
+
+            switch (mutationType) {
+                case 'substitution':
+                    return `${firstGene}:57Q`;
+                case 'insertion':
+                    return `ins_${firstGene}:31:N`;
+            }
+        }
+        // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+        // eslint-disable-next-line no-fallthrough
+        case 'nucleotide': {
+            switch (referenceGenome.nucleotideSequences.length) {
+                case 0: {
+                    return '';
+                }
+                case 1: {
+                    switch (mutationType) {
+                        case 'substitution':
+                            return '23T';
+                        case 'insertion':
+                            return 'ins_1046:A';
+                    }
+                }
+                // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+                // eslint-disable-next-line no-fallthrough
+                default: {
+                    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+                    switch (mutationType) {
+                        case 'substitution':
+                            return `${firstSegment}:23T`;
+                        case 'insertion':
+                            return `ins_${firstSegment}:10462:A`;
+                    }
+                }
+            }
+        }
+    }
+}

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>
             )}
+            {referenceGenome.nucleotideSequences.length === 0 && (
+                <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.stories.tsx

@@ -6,7 +6,7 @@ import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 const meta: Meta<MutationFilterProps> = {
@@ -32,11 +32,11 @@ export default meta;
 
 export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationFilter width={args.width} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         width: '100%',
@@ -184,11 +184,11 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
 
 export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationFilter initialValue={args.initialValue} width={args.width} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         initialValue: {

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.stories.tsx

@@ -13,7 +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 { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 const meta: Meta<MutationsProps> = {
@@ -39,11 +39,11 @@ export default meta;
 
 const Template = {
     render: (args: MutationsProps) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <Mutations {...args} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

package/src/preact/mutations/mutations.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getInsertionsTableData } from './getInsertionsTableData';
@@ -15,7 +15,7 @@ import {
     type SubstitutionOrDeletionEntry,
     views,
 } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -59,7 +59,7 @@ export const Mutations: FunctionComponent<MutationsProps> = (componentProps) =>
 };
 
 export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const { lapisFilter, baselineLapisFilter, sequenceType } = componentProps;
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -237,7 +237,7 @@ type MutationsInfoProps = {
 };
 
 const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     return (
         <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;