@genspectrum/dashboard-components 0.16.4 → 0.17.1

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -8,8 +8,9 @@ import { DateRangeFilter, type DateRangeFilterProps } from './date-range-filter'
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
-import { dateRangeOptionPresets } from './dateRangeOption';
+import { dateRangeOptionPresets, type DateRangeValue } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { expectOptionSelected } from '../shared/stories/expectOptionSelected';
 
 const earliestDate = '1970-01-01';
 
@@ -19,6 +20,8 @@ const customDateRange = {
     dateTo: '2021-12-31',
 };
 
+const placeholder = 'Date range';
+
 const meta: Meta<DateRangeFilterProps> = {
     title: 'Input/DateRangeFilter',
     component: DateRangeFilter,
@@ -56,6 +59,7 @@ const meta: Meta<DateRangeFilterProps> = {
         value: undefined,
         lapisDateField: 'aDateColumn',
         width: '100%',
+        placeholder,
     },
 };
 
@@ -69,6 +73,22 @@ const Primary: StoryObj<DateRangeFilterProps> = {
     ),
 };
 
+export const WithUndefinedValue: StoryObj<DateRangeFilterProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expectOptionSelected(canvasElement, placeholder);
+            await expect(dateFromPicker(canvas)).toHaveValue('');
+            await expect(dateToPicker(canvas)).toHaveValue('');
+        });
+    },
+};
+
 export const SetCorrectInitialValues: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
@@ -79,6 +99,7 @@ export const SetCorrectInitialValues: StoryObj<DateRangeFilterProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
+            await expectOptionSelected(canvasElement, 'CustomDateRange');
             await expect(selectField(canvas)).toHaveValue('CustomDateRange');
             await expect(dateFromPicker(canvas)).toHaveValue('2021-01-01');
             await expect(dateToPicker(canvas)).toHaveValue('2021-12-31');
@@ -98,7 +119,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeFilterProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
-            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expectOptionSelected(canvasElement, 'Custom');
             await expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
             await expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
         });
@@ -117,14 +138,14 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeFilterProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
-            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expectOptionSelected(canvasElement, 'Custom');
             await expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
             await expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
         });
     },
 };
 
-export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeFilterProps> = {
+export const SetsValueOnBlur: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -143,26 +164,28 @@ export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeFilterProps> = {
             await userEvent.click(dateToPicker(canvas));
 
             await waitFor(async () => {
-                await expect(selectField(canvas)).toHaveValue('Custom');
+                await expectOptionSelected(canvasElement, 'Custom');
             });
 
-            await expect(filterChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        aDateColumnFrom: '2000-01-01',
-                        aDateColumnTo: dayjs().format('YYYY-MM-DD'),
-                    },
-                }),
-            );
-
-            await expect(optionChangedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        dateFrom: '2000-01-01',
-                        dateTo: dayjs().format('YYYY-MM-DD'),
-                    },
-                }),
-            );
+            await waitFor(async () => {
+                await expect(filterChangedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            aDateColumnFrom: '2000-01-01',
+                            aDateColumnTo: dayjs().format('YYYY-MM-DD'),
+                        },
+                    }),
+                );
+
+                await expect(optionChangedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            dateFrom: '2000-01-01',
+                            dateTo: dayjs().format('YYYY-MM-DD'),
+                        },
+                    }),
+                );
+            });
         });
     },
 };
@@ -171,12 +194,13 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
     ...Primary,
     render: (args) => {
         const StatefulWrapper = () => {
-            const [value, setValue] = useState('Last month');
+            const [value, setValue] = useState<DateRangeValue | undefined>('Last month');
             const ref = useRef<HTMLDivElement>(null);
 
             useEffect(() => {
                 ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
-                    setValue((event as CustomEvent).detail);
+                    const newValue = (event as CustomEvent).detail;
+                    setValue(newValue ?? undefined);
                 });
             }, []);
 
@@ -207,12 +231,13 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
         await step('Change the value of the component programmatically', async () => {
             await userEvent.click(canvas.getByRole('button', { name: 'Set to Custom' }));
             await waitFor(async () => {
+                await expectOptionSelected(canvasElement, customDateRange.label);
                 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 expectOptionSelected(canvasElement, 'Last month');
             });
 
             await expect(filterChangedListenerMock).toHaveBeenCalledTimes(0);
@@ -220,12 +245,25 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
         });
 
         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 userEvent.selectOptions(selectField(canvas), 'All times');
+                await expectOptionSelected(canvasElement, 'All times');
+            });
+            await waitFor(async () => {
+                await expect(filterChangedListenerMock).toHaveBeenCalledTimes(1);
+                await expect(optionChangedListenerMock).toHaveBeenCalledTimes(1);
+            });
+        });
+
+        await step('Clearing the value from within the component is still possible', async () => {
+            await waitFor(async () => {
+                await userEvent.click(canvas.getByRole('button', { name: '×' }));
+                await expectOptionSelected(canvasElement, placeholder);
+            });
+            await waitFor(async () => {
+                await expect(filterChangedListenerMock).toHaveBeenCalledTimes(2);
+                await expect(optionChangedListenerMock).toHaveBeenCalledTimes(2);
             });
-            await expect(filterChangedListenerMock).toHaveBeenCalledTimes(1);
-            await expect(optionChangedListenerMock).toHaveBeenCalledTimes(1);
         });
     },
 };
@@ -236,13 +274,13 @@ export const ChangingDateOption: StoryObj<DateRangeFilterProps> = {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
         await waitFor(async () => {
-            await expect(selectField(canvas)).toHaveValue('Custom');
+            await expectOptionSelected(canvasElement, placeholder);
         });
 
         await step('Change date to custom', async () => {
             await waitFor(async () => {
                 await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
-                await expect(selectField(canvas)).toHaveValue('CustomDateRange');
+                await expectOptionSelected(canvasElement, 'CustomDateRange');
             });
 
             await expect(filterChangedListenerMock).toHaveBeenCalledWith(

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -1,28 +1,26 @@
-import flatpickr from 'flatpickr';
-import 'flatpickr/dist/flatpickr.min.css';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeInitialValues } from './computeInitialValues';
+import { DatePicker } from './date-picker';
 import { toYYYYMMDD } from './dateConversion';
 import {
+    type DateRangeOption,
     DateRangeOptionChangedEvent,
     dateRangeOptionSchema,
-    type DateRangeSelectOption,
     dateRangeValueSchema,
 } from './dateRangeOption';
-import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
+import { ClearableSelect } from '../components/clearable-select';
 import { ErrorBoundary } from '../components/error-boundary';
-import { Select } from '../components/select';
-import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 const customOption = 'Custom';
 
 const dateRangeFilterInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
     earliestDate: z.string().date(),
-    value: dateRangeValueSchema.optional(),
+    value: dateRangeValueSchema,
     lapisDateField: z.string().min(1),
+    placeholder: z.string().optional(),
 });
 
 const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
@@ -32,6 +30,12 @@ const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
 export type DateRangeFilterProps = z.infer<typeof dateRangeFilterPropsSchema>;
 export type DateRangeFilterInnerProps = z.infer<typeof dateRangeFilterInnerPropsSchema>;
 
+type DateRangeFilterState = {
+    label: string;
+    dateFrom?: Date;
+    dateTo?: Date;
+} | null;
+
 export const DateRangeFilter = (props: DateRangeFilterProps) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
@@ -50,135 +54,116 @@ export const DateRangeFilterInner = ({
     earliestDate = '1900-01-01',
     value,
     lapisDateField,
+    placeholder,
 }: DateRangeFilterInnerProps) => {
     const initialValues = useMemo(
         () => computeInitialValues(value, earliestDate, dateRangeOptions),
         [value, earliestDate, dateRangeOptions],
     );
 
-    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 [selectedDateRange, setSelectedDateRange] = useState<string | undefined>(
-        initialValues.initialSelectedDateRange,
+    const getInitialState = useCallback(() => {
+        if (!initialValues) {
+            return null;
+        }
+        return initialValues.initialSelectedDateRange
+            ? {
+                  label: initialValues.initialSelectedDateRange,
+                  dateFrom: initialValues.initialSelectedDateFrom,
+                  dateTo: initialValues.initialSelectedDateTo,
+              }
+            : {
+                  label: customOption,
+                  dateFrom: initialValues.initialSelectedDateFrom,
+                  dateTo: initialValues.initialSelectedDateTo,
+              };
+    }, [initialValues]);
+
+    const customComboboxValue = { label: customOption };
+    const [options, setOptions] = useState(
+        getInitialState()?.label === customOption ? [...dateRangeOptions, customComboboxValue] : [...dateRangeOptions],
     );
+    const [state, setState] = useState<DateRangeFilterState>(getInitialState());
 
-    const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
-        dateFrom: initialValues.initialSelectedDateFrom,
-        dateTo: initialValues.initialSelectedDateTo,
-    });
+    function updateState(newState: DateRangeFilterState) {
+        setState(newState);
+        fireFilterChangedEvent({ dateFrom: newState?.dateFrom, dateTo: newState?.dateTo, lapisDateField });
+        fireOptionChangedEvent(newState);
+    }
 
     useEffect(() => {
-        setSelectedDateRange(initialValues.initialSelectedDateRange);
-        setSelectedDates({
-            dateFrom: initialValues.initialSelectedDateFrom,
-            dateTo: initialValues.initialSelectedDateTo,
-        });
-
-        const commonConfig = {
-            allowInput: true,
-            dateFormat: 'Y-m-d',
-        };
-
-        if (fromDatePickerRef.current) {
-            setDateFromPicker(
-                flatpickr(fromDatePickerRef.current, {
-                    ...commonConfig,
-                    defaultDate: initialValues.initialSelectedDateFrom,
-                }),
-            );
+        setState(getInitialState());
+    }, [getInitialState]);
+
+    const onSelectChange = (option: DateRangeOption | null) => {
+        updateState(
+            option !== null
+                ? {
+                      label: option?.label,
+                      dateFrom: getFromDate(option, earliestDate),
+                      dateTo: getToDate(option),
+                  }
+                : null,
+        );
+        if (option?.label !== customOption) {
+            setOptions([...dateRangeOptions]);
         }
+    };
 
-        if (toDatePickerRef.current) {
-            setDateToPicker(
-                flatpickr(toDatePickerRef.current, {
-                    ...commonConfig,
-                    defaultDate: initialValues.initialSelectedDateTo,
-                }),
-            );
+    function getFromDate(option: DateRangeOption | null, earliestDate: string) {
+        if (!option || option.label === customOption) {
+            return undefined;
         }
+        return new Date(option?.dateFrom ?? earliestDate);
+    }
 
-        return () => {
-            setDateFromPicker((prev) => {
-                prev?.destroy();
-                return null;
-            });
-            setDateToPicker((prev) => {
-                prev?.destroy();
-                return null;
-            });
-        };
-    }, [fromDatePickerRef, toDatePickerRef, initialValues]);
-
-    const onSelectChange = (value: string) => {
-        setSelectedDateRange(value);
-
-        const dateRange = getDatesForSelectorValue(value, dateRangeOptions, earliestDate);
-
-        dateToPicker?.set('minDate', dateRange.dateFrom);
-        dateFromPicker?.set('maxDate', dateRange.dateTo);
-
-        dateFromPicker?.setDate(dateRange.dateFrom);
-        dateToPicker?.setDate(dateRange.dateTo);
-
-        setSelectedDates({
-            dateFrom: dateRange.dateFrom,
-            dateTo: dateRange.dateTo,
-        });
+    function getToDate(option: DateRangeOption | null) {
+        if (!option || option.label === customOption) {
+            return undefined;
+        }
+        if (!option.dateTo) {
+            return new Date();
+        }
 
-        fireFilterChangedEvent();
-        fireOptionChangedEvent(value);
-    };
+        return new Date(option.dateTo);
+    }
 
-    const onChangeDateFrom = () => {
-        if (selectedDates.dateFrom.toDateString() === dateFromPicker?.selectedDates[0].toDateString()) {
+    const onChangeDateFrom = (date: Date | undefined) => {
+        if (date?.toDateString() === state?.dateFrom?.toDateString()) {
             return;
         }
 
-        const dateTo = dateToPicker?.selectedDates[0];
-        const dateFrom = dateFromPicker?.selectedDates[0];
-
-        selectedDates.dateFrom = dateFrom || new Date();
-        dateToPicker?.set('minDate', dateFrom);
-        setSelectedDateRange(customOption);
-
-        fireFilterChangedEvent();
-        fireOptionChangedEvent({
-            dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date()),
+        updateState({
+            label: customOption,
+            dateFrom: date,
+            dateTo: state?.dateTo,
         });
+        setOptions([...dateRangeOptions, customComboboxValue]);
     };
 
-    const onChangeDateTo = () => {
-        if (selectedDates.dateTo.toDateString() === dateToPicker?.selectedDates[0].toDateString()) {
+    const onChangeDateTo = (date: Date | undefined) => {
+        if (date?.toDateString() === state?.dateTo?.toDateString()) {
             return;
         }
 
-        const dateTo = dateToPicker?.selectedDates[0];
-        const dateFrom = dateFromPicker?.selectedDates[0];
-
-        selectedDates.dateTo = dateTo || new Date();
-        dateFromPicker?.set('maxDate', dateTo);
-        setSelectedDateRange(customOption);
-
-        fireFilterChangedEvent();
-        fireOptionChangedEvent({
-            dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date()),
+        updateState({
+            label: customOption,
+            dateFrom: state?.dateFrom,
+            dateTo: date,
         });
+        setOptions([...dateRangeOptions, customComboboxValue]);
     };
 
-    const fireOptionChangedEvent = (option: DateRangeSelectOption) => {
-        divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(option));
-    };
-
-    const fireFilterChangedEvent = () => {
-        const dateFrom = dateFromPicker?.selectedDates[0];
-        const dateTo = dateToPicker?.selectedDates[0];
-
+    const fireFilterChangedEvent = ({
+        dateFrom,
+        dateTo,
+        lapisDateField,
+    }: {
+        dateFrom: Date | undefined;
+        dateTo: Date | undefined;
+        lapisDateField: string;
+    }) => {
         const detail = {
             ...(dateFrom !== undefined && { [`${lapisDateField}From`]: toYYYYMMDD(dateFrom) }),
             ...(dateTo !== undefined && { [`${lapisDateField}To`]: toYYYYMMDD(dateTo) }),
@@ -193,39 +178,51 @@ export const DateRangeFilterInner = ({
         );
     };
 
+    const fireOptionChangedEvent = (state: DateRangeFilterState) => {
+        const eventDetail =
+            state?.label === customOption
+                ? {
+                      dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
+                      dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
+                  }
+                : state?.label;
+
+        divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
+    };
+
     return (
-        <div class='flex flex-wrap' ref={divRef}>
-            <Select
-                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);
-                }}
-            />
-            <div className={'flex flex-wrap flex-grow'}>
-                <input
-                    class='input input-bordered rounded-none flex-grow w-[7.5rem]'
-                    type='text'
-                    placeholder='Date from'
-                    ref={fromDatePickerRef}
-                    onChange={onChangeDateFrom}
-                    onBlur={onChangeDateFrom}
-                />
-                <input
-                    class='input input-bordered rounded-none flex-grow w-[7.5rem]'
-                    type='text'
-                    placeholder='Date to'
-                    ref={toDatePickerRef}
-                    onChange={onChangeDateTo}
-                    onBlur={onChangeDateTo}
-                />
+        <div className={'@container'} ref={divRef}>
+            <div className='flex min-w-[7.5rem] flex-col @md:flex-row'>
+                <div className='flex-grow'>
+                    <ClearableSelect
+                        items={options.map((item) => item.label)}
+                        placeholderText={placeholder}
+                        onChange={(value) => {
+                            const dateRangeOption = options.find((item) => item.label === value);
+                            onSelectChange(dateRangeOption ?? null);
+                        }}
+                        value={state?.label ?? null}
+                        selectClassName={'rounded-t-md rounded-b-none @md:rounded-l-md @md:rounded-r-none'}
+                    />
+                </div>
+                <div className={'flex flex-grow flex-col @4xs:flex-row'}>
+                    <DatePicker
+                        className={'flex-grow min-w-[7.5rem] @4xs:rounded-bl-md @md:rounded-l-none rounded-none'}
+                        value={state?.dateFrom}
+                        onChange={onChangeDateFrom}
+                        maxDate={state?.dateTo}
+                        placeholderText={'Date from'}
+                    />
+                    <DatePicker
+                        className={
+                            'flex-grow min-w-[7.5rem] rounded-b-md rounded-t-none @4xs:rounded-tr-none @4xs:rounded-l-none @md:rounded-r-md '
+                        }
+                        value={state?.dateTo}
+                        onChange={onChangeDateTo}
+                        minDate={state?.dateFrom}
+                        placeholderText={'Date to'}
+                    />
+                </div>
             </div>
         </div>
     );

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -22,20 +22,20 @@ export const dateRangeOptionSchema = z.object({
 
 export type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;
 
-export const dateRangeValueSchema = z.union([
-    z.string(),
-    z.object({
-        dateFrom: z.string().date().optional(),
-        dateTo: z.string().date().optional(),
-    }),
-]);
+export const dateRangeValueSchema = z
+    .union([
+        z.string(),
+        z.object({
+            dateFrom: z.string().date().optional(),
+            dateTo: z.string().date().optional(),
+        }),
+    ])
+    .optional();
 
 export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 
-export type DateRangeSelectOption = Required<DateRangeValue>;
-
-export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
-    constructor(detail: DateRangeSelectOption) {
+export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
+    constructor(detail: DateRangeValue) {
         super('gs-date-range-option-changed', {
             detail,
             bubbles: true,