@genspectrum/dashboard-components 0.3.1 → 0.4.0

package/src/preact/dateRangeSelector/computeInitialValues.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+
+import { computeInitialValues } from './computeInitialValues';
+import { PRESET_VALUE_CUSTOM, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS } from './selectableOptions';
+
+const today = new Date();
+const earliestDate = '1900-01-01';
+
+describe('computeInitialValues', () => {
+    it('should compute for initial value if initial "from" and "to" are unset', () => {
+        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, undefined, earliestDate, []);
+
+        const expectedFrom = new Date();
+        expectedFrom.setMonth(today.getMonth() - 3);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_3_MONTHS);
+        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+        expectDateMatches(result.initialSelectedDateTo, today);
+    });
+
+    it('should fall back to default when initial value is unknown', () => {
+        const result = computeInitialValues('not a known value', undefined, undefined, earliestDate, []);
+
+        const expectedFrom = new Date();
+        expectedFrom.setMonth(today.getMonth() - 6);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_6_MONTHS);
+        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+        expectDateMatches(result.initialSelectedDateTo, today);
+    });
+
+    it('should overwrite initial value if initial "from" is set', () => {
+        const initialDateFrom = '2020-01-01';
+        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, initialDateFrom, undefined, earliestDate, []);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result.initialSelectedDateTo, today);
+    });
+
+    it('should overwrite initial value if initial "to" is set', () => {
+        const initialDateTo = '2020-01-01';
+        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, initialDateTo, earliestDate, []);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
+    });
+
+    it('should overwrite initial value if initial "to" and "from" are set', () => {
+        const initialDateFrom = '2020-01-01';
+        const initialDateTo = '2022-01-01';
+        const result = computeInitialValues(
+            PRESET_VALUE_LAST_3_MONTHS,
+            initialDateFrom,
+            initialDateTo,
+            earliestDate,
+            [],
+        );
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
+    });
+
+    it('should set initial "to" to "from" if "from" is after "to"', () => {
+        const initialDateFrom = '2020-01-01';
+        const initialDateTo = '1900-01-01';
+        const result = computeInitialValues(
+            PRESET_VALUE_LAST_3_MONTHS,
+            initialDateFrom,
+            initialDateTo,
+            earliestDate,
+            [],
+        );
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateFrom));
+    });
+
+    it('should throw if initial "from" is not a valid date', () => {
+        expect(() =>
+            computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, 'not a date', undefined, earliestDate, []),
+        ).toThrowError('Invalid initialDateFrom');
+    });
+
+    it('should throw if initial "to" is not a valid date', () => {
+        expect(() =>
+            computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, 'not a date', earliestDate, []),
+        ).toThrowError('Invalid initialDateTo');
+    });
+
+    function expectDateMatches(actual: Date, expected: Date) {
+        expect(actual.getFullYear()).toEqual(expected.getFullYear());
+        expect(actual.getMonth()).toEqual(expected.getMonth());
+        expect(actual.getDate()).toEqual(expected.getDate());
+    }
+});

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -0,0 +1,73 @@
+import {
+    type CustomSelectOption,
+    getDatesForSelectorValue,
+    getSelectableOptions,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_6_MONTHS,
+    type PresetOptionValues,
+} from './selectableOptions';
+import { UserFacingError } from '../components/error-display';
+
+export function computeInitialValues<CustomLabel extends string>(
+    initialValue: PresetOptionValues | CustomLabel | undefined,
+    initialDateFrom: string | undefined,
+    initialDateTo: string | undefined,
+    earliestDate: string,
+    customSelectOptions: CustomSelectOption<CustomLabel>[],
+): {
+    initialSelectedDateRange: CustomLabel | PresetOptionValues;
+    initialSelectedDateFrom: Date;
+    initialSelectedDateTo: Date;
+} {
+    if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
+        const selectableOptions = getSelectableOptions(customSelectOptions);
+        const initialSelectedDateRange =
+            initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
+                ? initialValue
+                : PRESET_VALUE_LAST_6_MONTHS;
+
+        const { dateFrom, dateTo } = getDatesForSelectorValue(
+            initialSelectedDateRange,
+            customSelectOptions,
+            earliestDate,
+        );
+
+        return {
+            initialSelectedDateRange,
+            initialSelectedDateFrom: dateFrom,
+            initialSelectedDateTo: dateTo,
+        };
+    }
+
+    const initialSelectedDateFrom = isUndefinedOrEmpty(initialDateFrom)
+        ? new Date(earliestDate)
+        : new Date(initialDateFrom);
+    let initialSelectedDateTo = isUndefinedOrEmpty(initialDateTo) ? new Date() : new Date(initialDateTo);
+
+    if (isNaN(initialSelectedDateFrom.getTime())) {
+        throw new UserFacingError(
+            'Invalid initialDateFrom',
+            `Invalid initialDateFrom "${initialDateFrom}", It must be of the format YYYY-MM-DD`,
+        );
+    }
+    if (isNaN(initialSelectedDateTo.getTime())) {
+        throw new UserFacingError(
+            'Invalid initialDateTo',
+            `Invalid initialDateTo "${initialDateTo}", It must be of the format YYYY-MM-DD`,
+        );
+    }
+
+    if (initialSelectedDateFrom > initialSelectedDateTo) {
+        initialSelectedDateTo = initialSelectedDateFrom;
+    }
+
+    return {
+        initialSelectedDateRange: PRESET_VALUE_CUSTOM,
+        initialSelectedDateFrom,
+        initialSelectedDateTo,
+    };
+}
+
+function isUndefinedOrEmpty(value: string | undefined): value is undefined | '' {
+    return value === undefined || value === '';
+}

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

@@ -1,9 +1,10 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+import dayjs from 'dayjs/esm';
 
+import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
 import {
-    DateRangeSelector,
-    type DateRangeSelectorProps,
     PRESET_VALUE_ALL_TIMES,
     PRESET_VALUE_CUSTOM,
     PRESET_VALUE_LAST_2_MONTHS,
@@ -11,10 +12,12 @@ import {
     PRESET_VALUE_LAST_3_MONTHS,
     PRESET_VALUE_LAST_6_MONTHS,
     PRESET_VALUE_LAST_MONTH,
-} from './date-range-selector';
+} from './selectableOptions';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
+const earliestDate = '1970-01-01';
+
 const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
@@ -58,10 +61,12 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
-        earliestDate: '1970-01-01',
+        earliestDate,
         initialValue: PRESET_VALUE_LAST_3_MONTHS,
         dateColumn: 'aDateColumn',
         width: '100%',
+        initialDateFrom: '',
+        initialDateTo: '',
     },
     decorators: [withActions],
 };
@@ -75,9 +80,93 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
                 customSelectOptions={args.customSelectOptions}
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
+                initialDateFrom={args.initialDateFrom}
+                initialDateTo={args.initialDateTo}
                 width={args.width}
                 dateColumn={args.dateColumn}
             />
         </LapisUrlContext.Provider>
     ),
 };
+
+export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        initialValue: 'CustomDateRange',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const dateFrom = () => canvas.getByPlaceholderText('Date from');
+        const dateTo = () => canvas.getByPlaceholderText('Date to');
+        const selectField = () => canvas.getByRole('combobox');
+
+        await waitFor(() => {
+            expect(selectField()).toHaveValue('CustomDateRange');
+            expect(dateFrom()).toHaveValue('2021-01-01');
+            expect(dateTo()).toHaveValue('2021-12-31');
+        });
+    },
+};
+
+const initialDateFrom = '2000-01-01';
+
+export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        initialDateFrom,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const dateFrom = () => canvas.getByPlaceholderText('Date from');
+        const dateTo = () => canvas.getByPlaceholderText('Date to');
+        const selectField = () => canvas.getByRole('combobox');
+
+        await waitFor(() => {
+            expect(selectField()).toHaveValue(PRESET_VALUE_CUSTOM);
+            expect(dateFrom()).toHaveValue(initialDateFrom);
+            expect(dateTo()).toHaveValue(dayjs().format('YYYY-MM-DD'));
+        });
+    },
+};
+
+const initialDateTo = '2000-01-01';
+
+export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        initialDateTo,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const dateFrom = () => canvas.getByPlaceholderText('Date from');
+        const dateTo = () => canvas.getByPlaceholderText('Date to');
+        const selectField = () => canvas.getByRole('combobox');
+
+        await waitFor(() => {
+            expect(selectField()).toHaveValue(PRESET_VALUE_CUSTOM);
+            expect(dateFrom()).toHaveValue(earliestDate);
+            expect(dateTo()).toHaveValue(initialDateTo);
+        });
+    },
+};
+
+export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        initialDateFrom: 'not a date',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            expect(canvas.getByText('Oops! Something went wrong.')).toBeVisible();
+        });
+    },
+};

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

@@ -2,14 +2,19 @@ import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
+import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
+import {
+    type CustomSelectOption,
+    getDatesForSelectorValue,
+    getSelectableOptions,
+    type PresetOptionValues,
+} from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ResizeContainer } from '../components/resize-container';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
-
 export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
     width: string;
 }
@@ -18,35 +23,19 @@ export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
     customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
     initialValue?: PresetOptionValues | CustomLabel;
+    initialDateFrom?: string;
+    initialDateTo?: string;
     dateColumn: string;
 }
 
-export const PRESET_VALUE_CUSTOM = 'custom';
-export const PRESET_VALUE_ALL_TIMES = 'allTimes';
-export const PRESET_VALUE_LAST_2_WEEKS = 'last2Weeks';
-export const PRESET_VALUE_LAST_MONTH = 'lastMonth';
-export const PRESET_VALUE_LAST_2_MONTHS = 'last2Months';
-export const PRESET_VALUE_LAST_3_MONTHS = 'last3Months';
-export const PRESET_VALUE_LAST_6_MONTHS = 'last6Months';
-
-export const presets = {
-    [PRESET_VALUE_CUSTOM]: { label: 'Custom' },
-    [PRESET_VALUE_ALL_TIMES]: { label: 'All times' },
-    [PRESET_VALUE_LAST_2_WEEKS]: { label: 'Last 2 weeks' },
-    [PRESET_VALUE_LAST_MONTH]: { label: 'Last month' },
-    [PRESET_VALUE_LAST_2_MONTHS]: { label: 'Last 2 months' },
-    [PRESET_VALUE_LAST_3_MONTHS]: { label: 'Last 3 months' },
-    [PRESET_VALUE_LAST_6_MONTHS]: { label: 'Last 6 months' },
-};
-
-export type PresetOptionValues = keyof typeof presets;
-
 export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
     initialValue,
     width,
     dateColumn,
+    initialDateFrom,
+    initialDateTo,
 }: DateRangeSelectorProps<CustomLabel>) => {
     const size = { width, height: '3rem' };
 
@@ -58,6 +47,8 @@ export const DateRangeSelector = <CustomLabel extends string>({
                     earliestDate={earliestDate}
                     initialValue={initialValue}
                     dateColumn={dateColumn}
+                    initialDateFrom={initialDateFrom}
+                    initialDateTo={initialDateTo}
                 />
             </ResizeContainer>
         </ErrorBoundary>
@@ -69,24 +60,30 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     earliestDate = '1900-01-01',
     initialValue,
     dateColumn,
+    initialDateFrom,
+    initialDateTo,
 }: DateRangeSelectorPropsInner<CustomLabel>) => {
+    const initialValues = computeInitialValues(
+        initialValue,
+        initialDateFrom,
+        initialDateTo,
+        earliestDate,
+        customSelectOptions,
+    );
+
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
     const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const selectableOptions = getSelectableOptions(customSelectOptions);
-
     const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
-        initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
-            ? initialValue
-            : PRESET_VALUE_LAST_6_MONTHS,
+        initialValues.initialSelectedDateRange,
     );
 
     const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
-        dateFrom: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateFrom,
-        dateTo: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateTo,
+        dateFrom: initialValues.initialSelectedDateFrom,
+        dateTo: initialValues.initialSelectedDateTo,
     });
 
     useEffect(() => {
@@ -184,7 +181,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     return (
         <div class='join w-full' ref={divRef}>
             <Select
-                items={selectableOptions}
+                items={getSelectableOptions(customSelectOptions)}
                 selected={selectedDateRange}
                 selectStyle='select-bordered rounded-none join-item grow'
                 onChange={(event: Event) => {
@@ -213,61 +210,3 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
         </div>
     );
 };
-
-const getSelectableOptions = <Label extends string>(customSelectOptions: CustomSelectOption<Label>[]) => {
-    const presetOptions = Object.entries(presets).map(([key, value]) => {
-        return { label: value.label, value: key };
-    });
-
-    const customOptions = customSelectOptions.map((customSelectOption) => {
-        return { label: customSelectOption.label, value: customSelectOption.label };
-    });
-
-    return [...presetOptions, ...customOptions];
-};
-
-const getDatesForSelectorValue = <Label extends string>(
-    selectorValue: string,
-    customSelectOptions: CustomSelectOption<Label>[],
-    earliestDate: string,
-) => {
-    const today = new Date();
-
-    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
-    if (customSelectOption) {
-        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
-    }
-
-    switch (selectorValue) {
-        case PRESET_VALUE_LAST_2_WEEKS: {
-            const twoWeeksAgo = new Date(today);
-            twoWeeksAgo.setDate(today.getDate() - 14);
-            return { dateFrom: twoWeeksAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_MONTH: {
-            const lastMonth = new Date(today);
-            lastMonth.setMonth(today.getMonth() - 1);
-            return { dateFrom: lastMonth, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_2_MONTHS: {
-            const twoMonthsAgo = new Date(today);
-            twoMonthsAgo.setMonth(today.getMonth() - 2);
-            return { dateFrom: twoMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_3_MONTHS: {
-            const threeMonthsAgo = new Date(today);
-            threeMonthsAgo.setMonth(today.getMonth() - 3);
-            return { dateFrom: threeMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_6_MONTHS: {
-            const sixMonthsAgo = new Date(today);
-            sixMonthsAgo.setMonth(today.getMonth() - 6);
-            return { dateFrom: sixMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_ALL_TIMES: {
-            return { dateFrom: new Date(earliestDate), dateTo: today };
-        }
-        default:
-            return { dateFrom: today, dateTo: today };
-    }
-};

package/src/preact/dateRangeSelector/selectableOptions.ts

@@ -0,0 +1,79 @@
+export const PRESET_VALUE_CUSTOM = 'custom';
+export const PRESET_VALUE_ALL_TIMES = 'allTimes';
+export const PRESET_VALUE_LAST_2_WEEKS = 'last2Weeks';
+export const PRESET_VALUE_LAST_MONTH = 'lastMonth';
+export const PRESET_VALUE_LAST_2_MONTHS = 'last2Months';
+export const PRESET_VALUE_LAST_3_MONTHS = 'last3Months';
+export const PRESET_VALUE_LAST_6_MONTHS = 'last6Months';
+
+export const presets = {
+    [PRESET_VALUE_CUSTOM]: { label: 'Custom' },
+    [PRESET_VALUE_ALL_TIMES]: { label: 'All times' },
+    [PRESET_VALUE_LAST_2_WEEKS]: { label: 'Last 2 weeks' },
+    [PRESET_VALUE_LAST_MONTH]: { label: 'Last month' },
+    [PRESET_VALUE_LAST_2_MONTHS]: { label: 'Last 2 months' },
+    [PRESET_VALUE_LAST_3_MONTHS]: { label: 'Last 3 months' },
+    [PRESET_VALUE_LAST_6_MONTHS]: { label: 'Last 6 months' },
+};
+
+export type PresetOptionValues = keyof typeof presets;
+
+export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
+
+export const getSelectableOptions = <Label extends string>(customSelectOptions: CustomSelectOption<Label>[]) => {
+    const presetOptions = Object.entries(presets).map(([key, value]) => {
+        return { label: value.label, value: key };
+    });
+
+    const customOptions = customSelectOptions.map((customSelectOption) => {
+        return { label: customSelectOption.label, value: customSelectOption.label };
+    });
+
+    return [...presetOptions, ...customOptions];
+};
+
+export const getDatesForSelectorValue = <Label extends string>(
+    selectorValue: string,
+    customSelectOptions: CustomSelectOption<Label>[],
+    earliestDate: string,
+) => {
+    const today = new Date();
+
+    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
+    if (customSelectOption) {
+        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+    }
+
+    switch (selectorValue) {
+        case PRESET_VALUE_LAST_2_WEEKS: {
+            const twoWeeksAgo = new Date(today);
+            twoWeeksAgo.setDate(today.getDate() - 14);
+            return { dateFrom: twoWeeksAgo, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_MONTH: {
+            const lastMonth = new Date(today);
+            lastMonth.setMonth(today.getMonth() - 1);
+            return { dateFrom: lastMonth, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_2_MONTHS: {
+            const twoMonthsAgo = new Date(today);
+            twoMonthsAgo.setMonth(today.getMonth() - 2);
+            return { dateFrom: twoMonthsAgo, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_3_MONTHS: {
+            const threeMonthsAgo = new Date(today);
+            threeMonthsAgo.setMonth(today.getMonth() - 3);
+            return { dateFrom: threeMonthsAgo, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_6_MONTHS: {
+            const sixMonthsAgo = new Date(today);
+            sixMonthsAgo.setMonth(today.getMonth() - 6);
+            return { dateFrom: sixMonthsAgo, dateTo: today };
+        }
+        case PRESET_VALUE_ALL_TIMES: {
+            return { dateFrom: new Date(earliestDate), dateTo: today };
+        }
+        default:
+            return { dateFrom: today, dateTo: today };
+    }
+};

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

@@ -93,7 +93,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
 
 const parseLocation = (location: string, fields: string[]) => {
     const fieldValues = location.split('/').map((part) => part.trim());
-    return fieldValues.reduce((acc, fieldValue, i) => ({ ...acc, [fields[i]]: fieldValue }), {});
+    return fields.reduce((acc, field, i) => ({ ...acc, [field]: fieldValues[i] }), {});
 };
 
 const hasMatchingEntry = (data: Record<string, string>[] | null, eventDetail: Record<string, string>) => {

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

@@ -183,7 +183,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info>Info for mutation comparison</Info>
+            <Info height={'100px'}>Info for mutation comparison</Info>
         </div>
     );
 };

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

@@ -20,7 +20,6 @@ const meta: Meta<MutationFilterProps> = {
     },
     argTypes: {
         width: { control: 'text' },
-        height: { control: 'text' },
         initialValue: {
             control: {
                 type: 'object',
@@ -36,13 +35,12 @@ export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter width={args.width} height={args.height} initialValue={args.initialValue} />
+                <MutationFilter width={args.width} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
     args: {
         width: '100%',
-        height: '700px',
     },
 };
 
@@ -106,7 +104,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         });
 
         await step('Remove the first mutation', async () => {
-            const firstMutationDeleteButton = canvas.getAllByRole('button')[0];
+            const firstMutationDeleteButton = canvas.getAllByRole('button')[1];
             await waitFor(() => fireEvent.click(firstMutationDeleteButton));
 
             await expect(changedListenerMock).toHaveBeenCalledWith(
@@ -153,7 +151,7 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter initialValue={args.initialValue} width={args.width} height={args.height} />
+                <MutationFilter initialValue={args.initialValue} width={args.width} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -165,7 +163,6 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
             aminoAcidInsertions: ['ins_S:123:AAA'],
         },
         width: '100%',
-        height: '700px',
     },
     play: async ({ canvasElement, step }) => {
         const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);