@genspectrum/dashboard-components 0.13.7 → 0.14.1

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -2,11 +2,12 @@ import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import type { StepFunction } from '@storybook/types';
 import dayjs from 'dayjs/esm';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -28,11 +29,10 @@ const meta: Meta<DateRangeSelectorProps> = {
         fetchMock: {},
     },
     argTypes: {
-        initialValue: {
+        value: {
             control: {
-                type: 'select',
+                type: 'object',
             },
-            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
         dateRangeOptions: {
             control: {
@@ -53,21 +53,19 @@ const meta: Meta<DateRangeSelectorProps> = {
     args: {
         dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
-        initialValue: dateRangeOptionPresets.lastMonth.label,
+        value: undefined,
         lapisDateField: 'aDateColumn',
         width: '100%',
-        initialDateFrom: undefined,
-        initialDateTo: undefined,
     },
 };
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps> = {
+const Primary: StoryObj<DateRangeSelectorProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <DateRangeSelector {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 
@@ -75,15 +73,15 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialValue: 'CustomDateRange',
+        value: 'CustomDateRange',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('CustomDateRange');
-            expect(dateFromPicker(canvas)).toHaveValue('2021-01-01');
-            expect(dateToPicker(canvas)).toHaveValue('2021-12-31');
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('CustomDateRange');
+            await expect(dateFromPicker(canvas)).toHaveValue('2021-01-01');
+            await expect(dateToPicker(canvas)).toHaveValue('2021-12-31');
         });
     },
 };
@@ -94,15 +92,15 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialDateFrom,
+        value: { dateFrom: initialDateFrom },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Custom');
-            expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
-            expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
+            await expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
         });
     },
 };
@@ -113,35 +111,39 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialDateTo,
+        value: { dateTo: initialDateTo },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Custom');
-            expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
-            expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
+            await expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
         });
     },
 };
 
 export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
+    args: {
+        ...Primary.args,
+        value: dateRangeOptionPresets.lastMonth.label,
+    },
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Last month');
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Last month');
         });
 
-        step('Change date to custom value', async () => {
+        await step('Change date to custom value', async () => {
             await userEvent.type(dateFromPicker(canvas), '{backspace>12}');
             await userEvent.type(dateFromPicker(canvas), '2000-01-01');
             await userEvent.click(dateToPicker(canvas));
 
-            await waitFor(() => {
-                expect(selectField(canvas)).toHaveValue('Custom');
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue('Custom');
             });
 
             await expect(filterChangedListenerMock).toHaveBeenCalledWith(
@@ -165,20 +167,82 @@ export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> =
     },
 };
 
-export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
+    render: (args) => {
+        const StatefulWrapper = () => {
+            const [value, setValue] = useState('Last month');
+            const ref = useRef<HTMLDivElement>(null);
+
+            useEffect(() => {
+                ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
+                    setValue((event as CustomEvent).detail);
+                });
+            }, []);
+
+            return (
+                <div ref={ref}>
+                    <LapisUrlContextProvider value={LAPIS_URL}>
+                        <DateRangeSelector {...args} value={value} />
+                    </LapisUrlContextProvider>
+                    <button className='btn' onClick={() => setValue(customDateRange.label)}>
+                        Set to Custom
+                    </button>
+                    <button className='btn' onClick={() => setValue(dateRangeOptionPresets.lastMonth.label)}>
+                        Set to Last month
+                    </button>
+                </div>
+            );
+        };
+
+        return <StatefulWrapper />;
+    },
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
-        await waitFor(() => {
-            expect(selectField(canvas)).toHaveValue('Last month');
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Last month');
         });
 
-        step('Change date to custom', async () => {
-            await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
+        await step('Change the value of the component programmatically', async () => {
+            await userEvent.click(canvas.getByRole('button', { name: 'Set to Custom' }));
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue(customDateRange.label);
+            });
+
+            await userEvent.click(canvas.getByRole('button', { name: 'Set to Last month' }));
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue('Last month');
+            });
+
+            await expect(filterChangedListenerMock).toHaveBeenCalledTimes(0);
+            await expect(optionChangedListenerMock).toHaveBeenCalledTimes(0);
+        });
+
+        await step('Changing the value from within the component is still possible', async () => {
+            await userEvent.selectOptions(selectField(canvas), 'All times');
+            await waitFor(async () => {
+                await expect(selectField(canvas)).toHaveValue('All times');
+            });
+            await expect(filterChangedListenerMock).toHaveBeenCalledTimes(1);
+            await expect(optionChangedListenerMock).toHaveBeenCalledTimes(1);
+        });
+    },
+};
+
+export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
+
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Custom');
+        });
 
-            await waitFor(() => {
-                expect(selectField(canvas)).toHaveValue('CustomDateRange');
+        await step('Change date to custom', async () => {
+            await waitFor(async () => {
+                await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
+                await expect(selectField(canvas)).toHaveValue('CustomDateRange');
             });
 
             await expect(filterChangedListenerMock).toHaveBeenCalledWith(
@@ -203,13 +267,13 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        initialDateFrom: 'not a date',
+        value: { dateFrom: 'not a date' },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText('Oops! Something went wrong.')).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('Oops! Something went wrong.')).toBeVisible();
         });
     },
 };

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,11 +1,16 @@
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
-import { DateRangeOptionChangedEvent, dateRangeOptionSchema, type DateRangeSelectOption } from './dateRangeOption';
+import {
+    DateRangeOptionChangedEvent,
+    dateRangeOptionSchema,
+    type DateRangeSelectOption,
+    dateRangeValueSchema,
+} from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
@@ -16,9 +21,7 @@ const customOption = 'Custom';
 const dateRangeSelectorInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
     earliestDate: z.string().date(),
-    initialValue: z.string().optional(),
-    initialDateFrom: z.string().date().optional(),
-    initialDateTo: z.string().date().optional(),
+    value: dateRangeValueSchema.optional(),
     lapisDateField: z.string().min(1),
 });
 
@@ -45,17 +48,12 @@ export const DateRangeSelector = (props: DateRangeSelectorProps) => {
 export const DateRangeSelectorInner = ({
     dateRangeOptions,
     earliestDate = '1900-01-01',
-    initialValue,
+    value,
     lapisDateField,
-    initialDateFrom,
-    initialDateTo,
 }: DateRangeSelectorInnerProps) => {
-    const initialValues = computeInitialValues(
-        initialValue,
-        initialDateFrom,
-        initialDateTo,
-        earliestDate,
-        dateRangeOptions,
+    const initialValues = useMemo(
+        () => computeInitialValues(value, earliestDate, dateRangeOptions),
+        [value, earliestDate, dateRangeOptions],
     );
 
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
@@ -74,6 +72,12 @@ export const DateRangeSelectorInner = ({
     });
 
     useEffect(() => {
+        setSelectedDateRange(initialValues.initialSelectedDateRange);
+        setSelectedDates({
+            dateFrom: initialValues.initialSelectedDateFrom,
+            dateTo: initialValues.initialSelectedDateTo,
+        });
+
         const commonConfig = {
             allowInput: true,
             dateFormat: 'Y-m-d',
@@ -83,7 +87,7 @@ export const DateRangeSelectorInner = ({
             setDateFromPicker(
                 flatpickr(fromDatePickerRef.current, {
                     ...commonConfig,
-                    defaultDate: selectedDates.dateFrom,
+                    defaultDate: initialValues.initialSelectedDateFrom,
                 }),
             );
         }
@@ -92,17 +96,22 @@ export const DateRangeSelectorInner = ({
             setDateToPicker(
                 flatpickr(toDatePickerRef.current, {
                     ...commonConfig,
-                    defaultDate: selectedDates.dateTo,
+                    defaultDate: initialValues.initialSelectedDateTo,
                 }),
             );
         }
 
         return () => {
-            dateFromPicker?.destroy();
-            dateToPicker?.destroy();
+            setDateFromPicker((prev) => {
+                prev?.destroy();
+                return null;
+            });
+            setDateToPicker((prev) => {
+                prev?.destroy();
+                return null;
+            });
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fromDatePickerRef, toDatePickerRef]);
+    }, [fromDatePickerRef, toDatePickerRef, initialValues]);
 
     const onSelectChange = (value: string) => {
         setSelectedDateRange(value);

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -22,7 +22,17 @@ export const dateRangeOptionSchema = z.object({
 
 export type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;
 
-export type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };
+export const dateRangeValueSchema = z.union([
+    z.string(),
+    z.object({
+        dateFrom: z.string().date().optional(),
+        dateTo: z.string().date().optional(),
+    }),
+]);
+
+export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
+
+export type DateRangeSelectOption = Required<DateRangeValue>;
 
 export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
     constructor(detail: DateRangeSelectOption) {

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,9 +78,9 @@ 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);

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/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,9 +77,9 @@ 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);

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' },

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: {

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>
     ),
 };