@genspectrum/dashboard-components 0.13.7 → 0.14.2

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -6,7 +6,7 @@ import { LineageFilter, type LineageFilterProps } from './lineage-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta = {
@@ -78,14 +78,14 @@ export default meta;
 
 export const Default: StoryObj<LineageFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <LineageFilter {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('change lineage filter value fires event', async () => {
+        await step('change lineage filter value fires event', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'B.1');
@@ -105,7 +105,7 @@ export const ClearSelection: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('clear selection fires event with empty filter', async () => {
+        await step('clear selection fires event with empty filter', async () => {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
@@ -123,7 +123,7 @@ export const OnBlurInput: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+        await step('after cleared selection by hand and then blur fires event with empty filter', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
@@ -144,7 +144,7 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
         lapisField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },
@@ -154,11 +154,11 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const lineageChangedListenerMock = fn();
-    step('Setup event listener mock', () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-lineage-filter-changed', lineageChangedListenerMock);
     });
 
-    step('location filter is rendered with value', async () => {
+    await step('location filter is rendered with value', async () => {
         await waitFor(async () => {
             return expect(await inputField(canvas)).toHaveValue('A.1');
         });

package/src/preact/lineageFilter/lineage-filter.tsx

@@ -1,10 +1,9 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { LineageFilterChangedEvent } from './LineageFilterChangedEvent';
+import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -47,7 +46,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     value,
     lapisFilter,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => fetchLineageAutocompleteList({ lapis, field: lapisField, lapisFilter }),

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -43,7 +43,7 @@ export async function fetchAutocompletionList({
 
     return [...locationValues]
         .map<EntryWithNullValues>(([json, count]) => ({
-            value: JSON.parse(json),
+            value: JSON.parse(json) as Record<string, string | null>,
             count,
         }))
         .sort(compareLocationEntries(fields))

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -6,7 +6,7 @@ import data from './__mockData__/aggregated.json';
 import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<LocationFilterProps> = {
@@ -77,14 +77,14 @@ export default meta;
 
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <LocationFilter {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('change location filter value fires event', async () => {
+        await step('change location filter value fires event', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'Germany');
@@ -107,7 +107,7 @@ export const ClearSelection: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('clear selection fires event with empty filter', async () => {
+        await step('clear selection fires event with empty filter', async () => {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
@@ -128,7 +128,7 @@ export const OnBlurInput: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+        await step('after cleared selection by hand and then blur fires event with empty filter', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
@@ -151,11 +151,11 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const locationChangedListenerMock = fn();
-    step('Setup event listener mock', () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
     });
 
-    step('location filter is rendered with value', async () => {
+    await step('location filter is rendered with value', async () => {
         await waitFor(async () => {
             return expect(await inputField(canvas)).toHaveValue('Europe');
         });
@@ -171,7 +171,7 @@ export const WithNoFields: StoryObj<LocationFilterProps> = {
         fields: [],
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'Array must contain at least 1 element(s)');
         });
     },

package/src/preact/locationFilter/location-filter.tsx

@@ -1,11 +1,11 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useMemo } from 'preact/hooks';
+import { useMemo } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchAutocompletionList, type LocationEntry } from './fetchAutocompletionList';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { LocationChangedEvent } from './LocationChangedEvent';
+import { fetchAutocompletionList, type LocationEntry } from './fetchAutocompletionList';
 import { lapisFilterSchema, type LapisLocationFilter, lapisLocationFilterSchema } from '../../types';
+import { useLapisUrl } from '../LapisUrlContext';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
@@ -40,7 +40,7 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) =>
 };
 
 export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }: LocationFilterInnerProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => fetchAutocompletionList({ fields, lapis, lapisFilter }),

package/src/preact/map/sequences-by-location.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 
 import worldAtlas from './__mockData__/worldAtlas.json';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import aggregatedWorld from './__mockData__/aggregatedWorld.json';
 import { SequencesByLocation, type SequencesByLocationProps } from './sequences-by-location';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -37,9 +37,9 @@ const aggregatedWorldMatcher = {
 
 export const Default: StoryObj<SequencesByLocationProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <SequencesByLocation {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01' },
@@ -134,7 +134,7 @@ export const InvalidProps: StoryObj<SequencesByLocationProps> = {
         lapisLocationField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(
                 canvasElement,
                 '"lapisLocationField": String must contain at least 1 character(s)',

package/src/preact/map/sequences-by-location.tsx

@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
+import { useLapisUrl } from '../LapisUrlContext';
 import { SequencesByLocationMap } from './sequences-by-location-map';
 import { SequencesByLocationTable } from './sequences-by-location-table';
 import {
@@ -11,7 +11,6 @@ import {
 } from '../../query/computeMapLocationData';
 import { type AggregateData } from '../../query/queryAggregateData';
 import { querySequencesByLocationData } from '../../query/querySequencesByLocationData';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -58,7 +57,7 @@ export const SequencesByLocation: FunctionComponent<SequencesByLocationProps> =
 const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> = (props) => {
     const { lapisFilter, lapisLocationField, mapSource } = props;
 
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const {
         data,
         error,
@@ -158,7 +157,7 @@ type SequencesByLocationMapInfoProps = {
 };
 
 const SequencesByLocationMapInfo: FunctionComponent<SequencesByLocationMapInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Prevalence by location</InfoHeadline1>

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

@@ -6,7 +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 { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 const dateToSomeDataset = '2022-01-01';
@@ -76,7 +76,7 @@ export default meta;
 
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationComparison
                     lapisFilters={args.lapisFilters}
@@ -87,7 +87,7 @@ const Template: StoryObj<MutationComparisonProps> = {
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

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

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
@@ -7,7 +7,7 @@ import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
 import { namedLapisFilterSchema, sequenceTypeSchema, 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';
@@ -52,7 +52,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = (c
 
 const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
     const { lapisFilters, sequenceType } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationData(lapisFilters, sequenceType, lapis);
@@ -187,7 +187,7 @@ type MutationComparisonInfoProps = {
 };
 
 const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Info for mutation comparison</InfoHeadline1>

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

@@ -55,13 +55,13 @@ const QuickStart = () => {
                     )}
                 </ul>
             </InfoParagraph>
-
-            {referenceGenome.nucleotideSequences.length > 1 ? (
+            {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 ? (

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: {
@@ -223,7 +223,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const changedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
     });
 
@@ -265,5 +265,5 @@ const testNoOptionsExist = async (canvas: ReturnType<typeof within>, mutation: s
     await expect(options).toHaveLength(0);
 };
 
-const inputField = (canvas: ReturnType<typeof within>) =>
+const inputField = (canvas: ReturnType<typeof within>): HTMLElement =>
     canvas.getByPlaceholderText('Enter a mutation', { exact: false });

package/src/preact/mutations/getMutationsGridData.ts

@@ -25,7 +25,7 @@ const accumulateByPosition = (data: SubstitutionOrDeletionEntry[], sequenceType:
 
         const initiallyFillPositionsToProportionAtBase = () => {
             if (!positionsToProportionAtBase.has(position)) {
-                const empty = new Map();
+                const empty = new Map<string | undefined, number>();
                 basesOfView.forEach((base) => empty.set(base, 0));
                 empty.set(mutationEntry.mutation.valueAtReference, 1);
                 positionsToProportionAtBase.set(position, empty);

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

@@ -62,9 +62,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                 ))}
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
-                        <Fragment key={`fragment-${mutation.toString()}`}>
+                        <Fragment key={`fragment-${mutation.code}`}>
                             <div
-                                key={`mutation-${mutation.toString()}`}
+                                key={`mutation-${mutation.code}`}
                                 style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
                             >
                                 <MutationCell mutation={mutation} />
@@ -80,7 +80,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 return (
                                     <div
                                         style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
-                                        key={`${mutation.toString()}-${date.toString()}`}
+                                        key={`${mutation.code}-${date.dateString}`}
                                     >
                                         <ProportionCell
                                             value={value}

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

@@ -4,7 +4,7 @@ import { expect, userEvent, waitFor } from '@storybook/test';
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -38,7 +38,7 @@ export default meta;
 
 const Template = {
     render: (args: MutationsOverTimeProps) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationsOverTime
                     lapisFilter={args.lapisFilter}
@@ -50,7 +50,7 @@ const Template = {
                     lapisDateField={args.lapisDateField}
                 />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 
@@ -164,7 +164,7 @@ export const WithNoLapisDateFieldField: StoryObj<MutationsOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

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

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
 import z from 'zod';
 
 // @ts-expect-error -- uses subpath imports and vite worker import
@@ -18,7 +18,7 @@ import {
 } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { toTemporalClass } from '../../utils/temporalClass';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -63,7 +63,7 @@ export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (com
 };
 
 export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
     const messageToWorker = useMemo(() => {
@@ -78,6 +78,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         messageToWorker,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         MutationOverTimeWorker,
     );
 
@@ -230,7 +231,7 @@ type MutationsOverTimeInfoProps = {
 };
 
 const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Mutations over time</InfoHeadline1>

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -5,7 +5,7 @@ import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneVariantEG.json';
 import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
 import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 export default {
@@ -29,9 +29,9 @@ export default {
 
 const Template: StoryObj<NumberSequencesOverTimeProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <NumberSequencesOverTime {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         views: ['bar', 'line', 'table'],
@@ -129,7 +129,7 @@ export const WithNoLapisDateField: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
@@ -11,7 +11,7 @@ import {
     queryNumberOfSequencesOverTime,
 } from '../../query/queryNumberOfSequencesOverTime';
 import { namedLapisFilterSchema, temporalGranularitySchema, 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 NumberSequencesOverTime = (componentProps: NumberSequencesOverTimeP
 
 const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimeProps) => {
     const { lapisFilters, lapisDateField, granularity, smoothingWindow } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => queryNumberOfSequencesOverTime(lapis, lapisFilters, lapisDateField, granularity, smoothingWindow),
@@ -169,7 +169,7 @@ type NumberSequencesOverTimeInfoProps = {
 const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
     originalComponentProps,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     return (
         <Info>

package/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx

@@ -87,13 +87,13 @@ const PrevalenceOverTimeBubbleChart = ({
                     intersect: false,
                     callbacks: {
                         title: (context) => {
-                            const dataset = nonNullDateRangeData[context[0].datasetIndex!];
-                            const dataPoint = dataset.content[context[0].dataIndex!];
+                            const dataset = nonNullDateRangeData[context[0].datasetIndex];
+                            const dataPoint = dataset.content[context[0].dataIndex];
                             return dataPoint.dateRange?.toString();
                         },
                         label: (context) => {
-                            const dataset = nonNullDateRangeData[context.datasetIndex!];
-                            const dataPoint = dataset.content[context.dataIndex!];
+                            const dataset = nonNullDateRangeData[context.datasetIndex];
+                            const dataPoint = dataset.content[context.dataIndex];
 
                             const percentage = (dataPoint.prevalence * 100).toFixed(2);
                             const count = dataPoint.count.toFixed(0);