@genspectrum/dashboard-components 0.6.18 → 0.7.0

package/dist/genspectrum-components.d.ts

@@ -99,6 +99,53 @@ export declare class App extends LitElement {
     createRenderRoot(): this;
 }
 
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+export declare 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;
+};
+
+/**
+ * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ */
+export declare const dateRangeOptionPresets: {
+    last2Weeks: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    lastMonth: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    last2Months: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    last3Months: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    last6Months: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    allTimes: {
+        label: string;
+    };
+};
+
 /**
  * ## Context
  * This component is a group of input fields designed to specify date range filters
@@ -130,15 +177,16 @@ export declare class App extends LitElement {
  */
 export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
-     * An array of custom options that the select field should provide,
-     * in addition to the predefined options.
+     * An array of date range options that the select field should provide.
      * The `label` will be shown to the user, and it will be available as `initialValue`.
      * The dates must be in the format `YYYY-MM-DD`.
+     *
+     * If dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.
      */
-    customSelectOptions: {
+    dateRangeOptions: {
         label: string;
-        dateFrom: string;
-        dateTo: string;
+        dateFrom?: string;
+        dateTo?: string;
     }[];
     /**
      * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
@@ -146,13 +194,15 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     earliestDate: string;
     /**
      * The initial value to use for this date range selector.
-     * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
+     * Must be a valid label from the `dateRangeOptions`.
      *
-     * If the value is invalid, the component will default to `'last6Months'`.
+     * If the value is not set, the component will default to the range `earliestDate` until today.
      *
      * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
+     *
+     * We provide some options in `dateRangeOptionPresets` for convenience.
      */
-    initialValue: 'custom' | 'allTimes' | 'last2Weeks' | 'lastMonth' | 'last2Months' | 'last3Months' | 'last6Months' | string;
+    initialValue: string | undefined;
     /**
      * A date string in the format `YYYY-MM-DD`.
      * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
@@ -1181,7 +1231,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time-component': MutationsOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1189,7 +1239,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/style.css

@@ -482,7 +482,7 @@ input[type="range"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -873,7 +873,7 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 
@@ -2707,6 +2707,7 @@ input.tab:checked + .tab-content,
 }
 .join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
+  margin-top: 0px;
 }
 .modal-top :where(.modal-box) {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.18",
+    "version": "0.7.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -10,6 +10,17 @@
     "publishConfig": {
         "access": "public"
     },
+    "imports": {
+        "#mutationOverTime": {
+            "storybook": "./src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts",
+            "default": "./src/preact/mutationsOverTime/mutationOverTimeWorker.ts"
+        },
+        "#*": [
+            "./*",
+            "./*.ts",
+            "./*.tsx"
+        ]
+    },
     "exports": {
         ".": {
             "import": "./dist/dashboard-components.js",
@@ -69,7 +80,6 @@
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
         "lit": "^3.1.3",
-        "object-hash": "^3.0.0",
         "preact": "^10.20.1",
         "zod": "^3.23.0"
     },
@@ -92,7 +102,6 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^22.0.0",
-        "@types/object-hash": "^3.0.6",
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",
         "autoprefixer": "^10.4.19",
@@ -102,7 +111,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.8.0",
+        "eslint-plugin-storybook": "^0.10.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './web-components';
 
 export { type ErrorEvent, UserFacingError } from './preact/components/error-display';
+export { type DateRangeOption, dateRangeOptionPresets } from './preact/dateRangeSelector/dateRangeOption';
 
 declare global {
     interface HTMLElementEventMap {

package/src/operator/FetchInsertionsOperator.ts

@@ -2,7 +2,7 @@ import { type Dataset } from './Dataset';
 import { type Operator } from './Operator';
 import { fetchInsertions } from '../lapisApi/lapisApi';
 import { type InsertionEntry, type LapisFilter, type SequenceType } from '../types';
-import { Insertion } from '../utils/mutations';
+import { InsertionClass } from '../utils/mutations';
 
 export class FetchInsertionsOperator implements Operator<InsertionEntry> {
     constructor(
@@ -15,7 +15,7 @@ export class FetchInsertionsOperator implements Operator<InsertionEntry> {
 
         const content: InsertionEntry[] = insertions.map(({ count, insertedSymbols, sequenceName, position }) => ({
             type: 'insertion',
-            mutation: new Insertion(sequenceName ?? undefined, position, insertedSymbols),
+            mutation: new InsertionClass(sequenceName ?? undefined, position, insertedSymbols),
             count,
         }));
 

package/src/operator/FetchSubstitutionsOrDeletionsOperator.ts

@@ -2,7 +2,7 @@ import { type Dataset } from './Dataset';
 import { type Operator } from './Operator';
 import { fetchSubstitutionsOrDeletions } from '../lapisApi/lapisApi';
 import { type LapisFilter, type SequenceType, type SubstitutionOrDeletionEntry } from '../types';
-import { Deletion, Substitution } from '../utils/mutations';
+import { DeletionClass, SubstitutionClass } from '../utils/mutations';
 
 export class FetchSubstitutionsOrDeletionsOperator implements Operator<SubstitutionOrDeletionEntry> {
     constructor(
@@ -19,14 +19,14 @@ export class FetchSubstitutionsOrDeletionsOperator implements Operator<Substitut
                 if (mutationTo === '-') {
                     return {
                         type: 'deletion',
-                        mutation: new Deletion(sequenceName ?? undefined, mutationFrom, position),
+                        mutation: new DeletionClass(sequenceName ?? undefined, mutationFrom, position),
                         count,
                         proportion,
                     };
                 }
                 return {
                     type: 'substitution',
-                    mutation: new Substitution(sequenceName ?? undefined, mutationFrom, mutationTo, position),
+                    mutation: new SubstitutionClass(sequenceName ?? undefined, mutationFrom, mutationTo, position),
                     count,
                     proportion,
                 };

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

@@ -1,48 +1,75 @@
 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';
 
+const fromOption = 'fromOption';
+const toOption = 'toOption';
+const fromToOption = 'fromToOption';
+const dateFromOptionValue = '2010-06-30';
+const dateToOptionValue = '2020-01-01';
+
+const dateRangeOptions = [
+    { label: fromOption, dateFrom: dateFromOptionValue },
+    { label: toOption, dateTo: dateToOptionValue },
+    { label: fromToOption, dateFrom: dateFromOptionValue, dateTo: dateToOptionValue },
+];
+
 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 result = computeInitialValues(fromToOption, undefined, undefined, earliestDate, dateRangeOptions);
 
-        const expectedFrom = new Date();
-        expectedFrom.setMonth(today.getMonth() - 3);
+        expect(result.initialSelectedDateRange).toEqual(fromToOption);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
+        expectDateMatches(result.initialSelectedDateTo, new Date(dateToOptionValue));
+    });
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_3_MONTHS);
-        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+    it('should use today as "dateTo" if it is unset in selected option', () => {
+        const result = computeInitialValues(fromOption, undefined, undefined, earliestDate, dateRangeOptions);
+
+        expect(result.initialSelectedDateRange).toEqual(fromOption);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
         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, []);
+    it('should use earliest date as "dateFrom" if it is unset in selected option', () => {
+        const result = computeInitialValues(toOption, undefined, undefined, earliestDate, dateRangeOptions);
 
-        const expectedFrom = new Date();
-        expectedFrom.setMonth(today.getMonth() - 6);
+        expect(result.initialSelectedDateRange).toEqual(toOption);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result.initialSelectedDateTo, new Date(dateToOptionValue));
+    });
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_6_MONTHS);
-        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+    it('should fall back to full range if initial value is not set', () => {
+        const result = computeInitialValues(undefined, undefined, undefined, earliestDate, dateRangeOptions);
+
+        expect(result.initialSelectedDateRange).toBeUndefined();
+        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
+    it('should fall back to default when initial value is unknown', () => {
+        expect(() => computeInitialValues('not a known value', undefined, undefined, earliestDate, [])).toThrowError(
+            /Invalid initialValue "not a known value", It must be one of/,
+        );
+    });
+
     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, []);
+        const result = computeInitialValues(fromOption, initialDateFrom, undefined, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         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, []);
+        const result = computeInitialValues(fromOption, undefined, initialDateTo, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
     });
@@ -50,15 +77,9 @@ describe('computeInitialValues', () => {
     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,
-            [],
-        );
+        const result = computeInitialValues(fromOption, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
     });
@@ -66,29 +87,23 @@ describe('computeInitialValues', () => {
     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,
-            [],
-        );
+        const result = computeInitialValues(undefined, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         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');
+        expect(() => computeInitialValues(undefined, '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');
+        expect(() => computeInitialValues(undefined, undefined, 'not a date', earliestDate, [])).toThrowError(
+            'Invalid initialDateTo',
+        );
     });
 
     function expectDateMatches(actual: Date, expected: Date) {

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -1,36 +1,30 @@
-import {
-    type CustomSelectOption,
-    getDatesForSelectorValue,
-    getSelectableOptions,
-    PRESET_VALUE_CUSTOM,
-    PRESET_VALUE_LAST_6_MONTHS,
-    type PresetOptionValues,
-} from './selectableOptions';
+import { type DateRangeOption } from './dateRangeOption';
+import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
-export function computeInitialValues<CustomLabel extends string>(
-    initialValue: PresetOptionValues | CustomLabel | undefined,
+export function computeInitialValues(
+    initialValue: string | undefined,
     initialDateFrom: string | undefined,
     initialDateTo: string | undefined,
     earliestDate: string,
-    customSelectOptions: CustomSelectOption<CustomLabel>[],
+    dateRangeOptions: DateRangeOption[],
 ): {
-    initialSelectedDateRange: CustomLabel | PresetOptionValues;
+    initialSelectedDateRange: string | undefined;
     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 selectableOptions = getSelectableOptions(dateRangeOptions);
+        const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
 
-        const { dateFrom, dateTo } = getDatesForSelectorValue(
-            initialSelectedDateRange,
-            customSelectOptions,
-            earliestDate,
-        );
+        if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+            throw new UserFacingError(
+                'Invalid initialValue',
+                `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
+            );
+        }
+
+        const { dateFrom, dateTo } = getDatesForSelectorValue(initialSelectedDateRange, dateRangeOptions, earliestDate);
 
         return {
             initialSelectedDateRange,
@@ -62,7 +56,7 @@ export function computeInitialValues<CustomLabel extends string>(
     }
 
     return {
-        initialSelectedDateRange: PRESET_VALUE_CUSTOM,
+        initialSelectedDateRange: undefined,
         initialSelectedDateFrom,
         initialSelectedDateTo,
     };

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,