@genspectrum/dashboard-components 0.6.19 → 0.7.0

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

@@ -1,24 +1,16 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 import dayjs from 'dayjs/esm';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
-import {
-    PRESET_VALUE_ALL_TIMES,
-    PRESET_VALUE_CUSTOM,
-    PRESET_VALUE_LAST_2_MONTHS,
-    PRESET_VALUE_LAST_2_WEEKS,
-    PRESET_VALUE_LAST_3_MONTHS,
-    PRESET_VALUE_LAST_6_MONTHS,
-    PRESET_VALUE_LAST_MONTH,
-} from './selectableOptions';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { dateRangeOptionPresets } from './dateRangeOption';
 
 const earliestDate = '1970-01-01';
 
-const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
+const meta: Meta<DateRangeSelectorProps> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
     parameters: {
@@ -32,18 +24,9 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
             control: {
                 type: 'select',
             },
-            options: [
-                PRESET_VALUE_CUSTOM,
-                PRESET_VALUE_ALL_TIMES,
-                PRESET_VALUE_LAST_2_WEEKS,
-                PRESET_VALUE_LAST_MONTH,
-                PRESET_VALUE_LAST_2_MONTHS,
-                PRESET_VALUE_LAST_3_MONTHS,
-                PRESET_VALUE_LAST_6_MONTHS,
-                'CustomDateRange',
-            ],
+            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
-        customSelectOptions: {
+        dateRangeOptions: {
             control: {
                 type: 'object',
             },
@@ -60,9 +43,17 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
         },
     },
     args: {
-        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        dateRangeOptions: [
+            dateRangeOptionPresets.lastMonth,
+            dateRangeOptionPresets.allTimes,
+            {
+                label: 'CustomDateRange',
+                dateFrom: '2021-01-01',
+                dateTo: '2021-12-31',
+            },
+        ],
         earliestDate,
-        initialValue: PRESET_VALUE_LAST_3_MONTHS,
+        initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
         initialDateFrom: '',
@@ -72,11 +63,11 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const Primary: StoryObj<DateRangeSelectorProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <DateRangeSelector
-                customSelectOptions={args.customSelectOptions}
+                dateRangeOptions={args.dateRangeOptions}
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
                 initialDateFrom={args.initialDateFrom}
@@ -88,7 +79,7 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     ),
 };
 
-export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -111,7 +102,7 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps<'CustomDat
 
 const initialDateFrom = '2000-01-01';
 
-export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -125,7 +116,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomD
         const selectField = () => canvas.getByRole('combobox');
 
         await waitFor(() => {
-            expect(selectField()).toHaveValue(PRESET_VALUE_CUSTOM);
+            expect(selectField()).toHaveValue('Custom');
             expect(dateFrom()).toHaveValue(initialDateFrom);
             expect(dateTo()).toHaveValue(dayjs().format('YYYY-MM-DD'));
         });
@@ -134,7 +125,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomD
 
 const initialDateTo = '2000-01-01';
 
-export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -148,14 +139,37 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps<'CustomDat
         const selectField = () => canvas.getByRole('combobox');
 
         await waitFor(() => {
-            expect(selectField()).toHaveValue(PRESET_VALUE_CUSTOM);
+            expect(selectField()).toHaveValue('Custom');
             expect(dateFrom()).toHaveValue(earliestDate);
             expect(dateTo()).toHaveValue(initialDateTo);
         });
     },
 };
 
-export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    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('Last month');
+        });
+
+        await userEvent.type(dateFrom(), '{backspace>12}');
+        await userEvent.type(dateFrom(), '2000-01-01');
+        await userEvent.click(dateTo());
+
+        await waitFor(() => {
+            expect(selectField()).toHaveValue('Custom');
+        });
+    },
+};
+
+export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,

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

@@ -4,33 +4,28 @@ 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 { type DateRangeOption } from './dateRangeOption';
+import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
+const customOption = 'Custom';
+
+export interface DateRangeSelectorProps extends DateRangeSelectorPropsInner {
     width: string;
 }
 
-export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
-    customSelectOptions: CustomSelectOption<CustomLabel>[];
+export interface DateRangeSelectorPropsInner {
+    dateRangeOptions: DateRangeOption[];
     earliestDate: string;
-    initialValue: PresetOptionValues | CustomLabel;
+    initialValue: string | undefined;
     initialDateFrom: string;
     initialDateTo: string;
     dateColumn: string;
 }
 
-export const DateRangeSelector = <CustomLabel extends string>({
-    width,
-    ...innerProps
-}: DateRangeSelectorProps<CustomLabel>) => {
+export const DateRangeSelector = ({ width, ...innerProps }: DateRangeSelectorProps) => {
     const size = { width, height: '3rem' };
 
     return (
@@ -42,20 +37,20 @@ export const DateRangeSelector = <CustomLabel extends string>({
     );
 };
 
-export const DateRangeSelectorInner = <CustomLabel extends string>({
-    customSelectOptions,
+export const DateRangeSelectorInner = ({
+    dateRangeOptions,
     earliestDate = '1900-01-01',
     initialValue,
     dateColumn,
     initialDateFrom,
     initialDateTo,
-}: DateRangeSelectorPropsInner<CustomLabel>) => {
+}: DateRangeSelectorPropsInner) => {
     const initialValues = computeInitialValues(
         initialValue,
         initialDateFrom,
         initialDateTo,
         earliestDate,
-        customSelectOptions,
+        dateRangeOptions,
     );
 
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
@@ -64,7 +59,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
+    const [selectedDateRange, setSelectedDateRange] = useState<string | undefined>(
         initialValues.initialSelectedDateRange,
     );
 
@@ -104,10 +99,10 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fromDatePickerRef, toDatePickerRef]);
 
-    const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
+    const onSelectChange = (value: string) => {
         setSelectedDateRange(value);
 
-        const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
+        const dateRange = getDatesForSelectorValue(value, dateRangeOptions, earliestDate);
 
         dateToPicker?.set('minDate', dateRange.dateFrom);
         dateFromPicker?.set('maxDate', dateRange.dateTo);
@@ -130,7 +125,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
 
         selectedDates.dateFrom = dateFromPicker?.selectedDates[0] || new Date();
         dateToPicker?.set('minDate', dateFromPicker?.selectedDates[0]);
-        setSelectedDateRange('custom');
+        setSelectedDateRange(customOption);
 
         submit();
     };
@@ -142,7 +137,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
 
         selectedDates.dateTo = dateToPicker?.selectedDates[0] || new Date();
         dateFromPicker?.set('maxDate', dateToPicker?.selectedDates[0]);
-        setSelectedDateRange('custom');
+        setSelectedDateRange(customOption);
 
         submit();
     };
@@ -168,14 +163,17 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     return (
         <div class='flex flex-wrap' ref={divRef}>
             <Select
-                items={getSelectableOptions(customSelectOptions)}
-                selected={selectedDateRange}
+                items={[
+                    ...getSelectableOptions(dateRangeOptions),
+                    { label: customOption, value: customOption, disabled: true },
+                ]}
+                selected={selectedDateRange ?? customOption}
                 selectStyle='select-bordered rounded-none flex-grow min-w-[7.5rem]'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
                     const value = select.value as ScaleType;
-                    onSelectChange(value as CustomLabel | PresetOptionValues);
+                    onSelectChange(value);
                 }}
             />
             <div className={'flex flex-wrap flex-grow'}>

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -0,0 +1,65 @@
+import { toYYYYMMDD } from './dateConversion';
+
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+export type DateRangeOption = {
+    /** The label of the date range option that will be shown to the user */
+    label: string;
+    /**
+     * The start date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the `earliestDate` property.
+     */
+    dateFrom?: string;
+    /**
+     * The end date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the current date.
+     */
+    dateTo?: string;
+};
+
+const today = new Date();
+
+const twoWeeksAgo = new Date();
+twoWeeksAgo.setDate(today.getDate() - 14);
+
+const lastMonth = new Date(today);
+lastMonth.setMonth(today.getMonth() - 1);
+
+const last2Months = new Date(today);
+last2Months.setMonth(today.getMonth() - 2);
+
+const last3Months = new Date(today);
+last3Months.setMonth(today.getMonth() - 3);
+
+const last6Months = new Date(today);
+last6Months.setMonth(today.getMonth() - 6);
+
+/**
+ * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ */
+export const dateRangeOptionPresets = {
+    last2Weeks: {
+        label: 'Last 2 weeks',
+        dateFrom: toYYYYMMDD(twoWeeksAgo),
+    },
+    lastMonth: {
+        label: 'Last month',
+        dateFrom: toYYYYMMDD(lastMonth),
+    },
+    last2Months: {
+        label: 'Last 2 months',
+        dateFrom: toYYYYMMDD(last2Months),
+    },
+    last3Months: {
+        label: 'Last 3 months',
+        dateFrom: toYYYYMMDD(last3Months),
+    },
+    last6Months: {
+        label: 'Last 6 months',
+        dateFrom: toYYYYMMDD(last6Months),
+    },
+    allTimes: {
+        label: 'All times',
+    },
+} satisfies Record<string, DateRangeOption>;

package/src/preact/dateRangeSelector/selectableOptions.ts

@@ -1,79 +1,30 @@
-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';
+import { type DateRangeOption } from './dateRangeOption';
 
-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) => {
+export const getSelectableOptions = (dateRangeOptions: DateRangeOption[]) => {
+    return dateRangeOptions.map((customSelectOption) => {
         return { label: customSelectOption.label, value: customSelectOption.label };
     });
-
-    return [...presetOptions, ...customOptions];
 };
 
-export const getDatesForSelectorValue = <Label extends string>(
-    selectorValue: string,
-    customSelectOptions: CustomSelectOption<Label>[],
+export const getDatesForSelectorValue = (
+    initialSelectedDateRange: string | undefined,
+    dateRangeOptions: DateRangeOption[],
     earliestDate: string,
 ) => {
     const today = new Date();
+    const defaultDates = { dateFrom: new Date(earliestDate), dateTo: today };
 
-    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
-    if (customSelectOption) {
-        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+    if (initialSelectedDateRange === undefined) {
+        return defaultDates;
     }
 
-    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 };
+    const dateRangeOption = dateRangeOptions.find((option) => option.label === initialSelectedDateRange);
+    if (dateRangeOption) {
+        return {
+            dateFrom: new Date(dateRangeOption.dateFrom ?? earliestDate),
+            dateTo: new Date(dateRangeOption.dateTo ?? today),
+        };
     }
+
+    return defaultDates;
 };

package/src/preact/mutationsOverTime/MutationOverTimeData.ts

@@ -0,0 +1,20 @@
+import {
+    type MutationOverTimeMutationValue,
+    serializeSubstitutionOrDeletion,
+    serializeTemporal,
+} from '../../query/queryMutationsOverTime';
+import { type Map2d, Map2dBase, type Map2DContents } from '../../utils/map2d';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import type { Temporal } from '../../utils/temporalClass';
+
+export type MutationOverTimeDataMap = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
+
+export class BaseMutationOverTimeDataMap extends Map2dBase<
+    Substitution | Deletion,
+    Temporal,
+    MutationOverTimeMutationValue
+> {
+    constructor(initialContent?: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>) {
+        super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
+    }
+}

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -1,9 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
+import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
-import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
-import { Map2dBase } from '../../utils/map2d';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type TemporalClass } from '../../utils/temporalClass';
 import { yearMonthDay } from '../../utils/temporalTestHelpers';
@@ -194,7 +193,7 @@ describe('getFilteredMutationOverTimeData', () => {
         mutationEntries: (SubstitutionEntry<Substitution> | DeletionEntry<Deletion>)[],
         temporals: TemporalClass[] = [someTemporal, anotherTemporal],
     ) {
-        const data = new Map2dBase<Substitution | Deletion, TemporalClass, MutationOverTimeMutationValue>();
+        const data = new BaseMutationOverTimeDataMap();
 
         temporals.forEach((temporal) => {
             mutationEntries.forEach((entry) => {

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,4 +1,4 @@
-import { type MutationOverTimeData } from './mutations-over-time';
+import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type SubstitutionOrDeletionEntry } from '../../types';
 import { Map2dView } from '../../utils/map2d';
 import type { Deletion, Substitution } from '../../utils/mutations';
@@ -6,7 +6,7 @@ import type { DisplayedMutationType } from '../components/mutation-type-selector
 import type { DisplayedSegment } from '../components/segment-selector';
 
 export function getFilteredMutationOverTimeData(
-    data: MutationOverTimeData,
+    data: MutationOverTimeDataMap,
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[],
     displayedSegments: DisplayedSegment[],
     displayedMutationTypes: DisplayedMutationType[],

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

@@ -1,16 +1,16 @@
 import { Fragment, type FunctionComponent, type RefObject } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { type MutationOverTimeData } from './mutations-over-time';
+import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { toTemporalClass, type Temporal, type TemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
 import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
 
 export interface MutationsOverTimeGridProps {
-    data: MutationOverTimeData;
+    data: MutationOverTimeDataMap;
     colorScale: ColorScale;
 }
 

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

@@ -3,24 +3,19 @@ import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from
 
 // @ts-expect-error -- uses subpath imports and vite worker import
 import MutationOverTimeWorker from '#mutationOverTime?worker&inline';
+import { BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
-import {
-    type MutationOverTimeMutationValue,
-    type MutationOverTimeQuery,
-    serializeSubstitutionOrDeletion,
-    serializeTemporal,
-} from '../../query/queryMutationsOverTime';
+import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     type LapisFilter,
     type SequenceType,
     type SubstitutionOrDeletionEntry,
     type TemporalGranularity,
 } from '../../types';
-import { type Map2d, Map2dBase } from '../../utils/map2d';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { type Temporal, toTemporalClass } from '../../utils/temporalClass';
+import { toTemporalClass } from '../../utils/temporalClass';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
@@ -99,11 +94,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
     }
 
     const { overallMutationData, mutationOverTimeSerialized } = data;
-    const mutationOverTimeData = new Map2dBase(
-        serializeSubstitutionOrDeletion,
-        serializeTemporal,
-        mutationOverTimeSerialized,
-    );
+    const mutationOverTimeData = new BaseMutationOverTimeDataMap(mutationOverTimeSerialized);
     return (
         <MutationsOverTimeTabs
             overallMutationData={overallMutationData}
@@ -114,10 +105,8 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
     );
 };
 
-export type MutationOverTimeData = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
-
 type MutationOverTimeTabsProps = {
-    mutationOverTimeData: MutationOverTimeData;
+    mutationOverTimeData: BaseMutationOverTimeDataMap;
     sequenceType: SequenceType;
     views: View[];
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
@@ -192,7 +181,7 @@ type ToolbarProps = {
     setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
-    filteredData: MutationOverTimeData;
+    filteredData: MutationOverTimeDataMap;
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
 };
@@ -236,7 +225,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     );
 };
 
-function getDownloadData(filteredData: MutationOverTimeData) {
+function getDownloadData(filteredData: MutationOverTimeDataMap) {
     const dates = filteredData.getSecondAxisKeys().map((date) => toTemporalClass(date));
 
     return filteredData.getFirstAxisKeys().map((mutation) => {

package/src/query/queryMutationsOverTime.ts

@@ -6,6 +6,7 @@ import { MapOperator } from '../operator/MapOperator';
 import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { UserFacingError } from '../preact/components/error-display';
+import { BaseMutationOverTimeDataMap } from '../preact/mutationsOverTime/MutationOverTimeData';
 import { sortSubstitutionsAndDeletions } from '../preact/shared/sort/sortSubstitutionsAndDeletions';
 import {
     type DeletionEntry,
@@ -15,7 +16,7 @@ import {
     type SubstitutionOrDeletionEntry,
     type TemporalGranularity,
 } from '../types';
-import { type Map2d, Map2dBase } from '../utils/map2d';
+import { type Map2d } from '../utils/map2d';
 import {
     type Deletion,
     type DeletionClass,
@@ -218,10 +219,7 @@ export function groupByMutation(
     data: MutationOverTimeData[],
     overallMutationData: (SubstitutionEntry | DeletionEntry)[],
 ) {
-    const dataArray = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>(
-        serializeSubstitutionOrDeletion,
-        serializeTemporal,
-    );
+    const dataArray = new BaseMutationOverTimeDataMap();
 
     const allDates = data.map((mutationData) => mutationData.date);