@genspectrum/dashboard-components 0.16.3 → 0.17.0

package/src/preact/components/downshift-combobox.tsx

@@ -2,6 +2,8 @@ import { useCombobox } from 'downshift/preact';
 import { type ComponentChild } from 'preact';
 import { useMemo, useRef, useState } from 'preact/hooks';
 
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
 export function DownshiftCombobox<Item>({
     allItems,
     value,
@@ -10,18 +12,18 @@ export function DownshiftCombobox<Item>({
     itemToString,
     placeholderText,
     formatItemInList,
+    inputClassName = '',
 }: {
     allItems: Item[];
-    value?: Item;
+    value?: Item | null;
     filterItemsByInputValue: (item: Item, value: string) => boolean;
     createEvent: (item: Item | null) => CustomEvent;
     itemToString: (item: Item | undefined | null) => string;
     placeholderText?: string;
     formatItemInList: (item: Item) => ComponentChild;
+    inputClassName?: string;
 }) {
-    const initialSelectedItem = value ?? null;
-
-    const [itemsFilter, setItemsFilter] = useState(itemToString(initialSelectedItem));
+    const [itemsFilter, setItemsFilter] = useState(itemToString(value));
     const items = useMemo(
         () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
         [allItems, filterItemsByInputValue, itemsFilter],
@@ -65,7 +67,7 @@ export function DownshiftCombobox<Item>({
         itemToString(item) {
             return itemToString(item);
         },
-        initialSelectedItem,
+        selectedItem: value,
         environment,
     });
 
@@ -89,7 +91,7 @@ export function DownshiftCombobox<Item>({
         <div ref={divRef} className={'relative w-full'}>
             <div className='w-full flex flex-col gap-1'>
                 <div
-                    className='flex gap-0.5 input input-bordered min-w-32'
+                    className={`flex gap-0.5 input input-bordered min-w-32 ${inputClassName}`}
                     onBlur={(event) => {
                         if (event.relatedTarget != buttonRef.current) {
                             closeMenu();
@@ -109,7 +111,7 @@ export function DownshiftCombobox<Item>({
                         onClick={clearInput}
                         tabIndex={-1}
                     >
-                        ×
+                        <DeleteIcon />
                     </button>
                     <button
                         aria-label='toggle menu'

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

@@ -18,36 +18,34 @@ const dateRangeOptions = [
 ];
 
 describe('computeInitialValues', () => {
+    it('should return undefined for unedfined value', () => {
+        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
+
+        expect(result).toBeUndefined();
+    });
+
     it('should compute initial value if value is dateRangeOption label', () => {
         const result = computeInitialValues(fromToOption, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(fromToOption);
-        expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
-        expectDateMatches(result.initialSelectedDateTo, new Date(dateToOptionValue));
+        expect(result?.initialSelectedDateRange).toEqual(fromToOption);
+        expectDateMatches(result?.initialSelectedDateFrom, new Date(dateFromOptionValue));
+        expectDateMatches(result?.initialSelectedDateTo, new Date(dateToOptionValue));
     });
 
     it('should use today as "dateTo" if it is unset in selected option', () => {
         const result = computeInitialValues(fromOption, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(fromOption);
-        expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
-        expectDateMatches(result.initialSelectedDateTo, today);
+        expect(result?.initialSelectedDateRange).toEqual(fromOption);
+        expectDateMatches(result?.initialSelectedDateFrom, new Date(dateFromOptionValue));
+        expectDateMatches(result?.initialSelectedDateTo, today);
     });
 
     it('should use earliest date as "dateFrom" if it is unset in selected option', () => {
         const result = computeInitialValues(toOption, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(toOption);
-        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
-        expectDateMatches(result.initialSelectedDateTo, new Date(dateToOptionValue));
-    });
-
-    it('should fall back to full range if initial value is not set', () => {
-        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
-
-        expect(result.initialSelectedDateRange).toBeUndefined();
-        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
-        expectDateMatches(result.initialSelectedDateTo, today);
+        expect(result?.initialSelectedDateRange).toEqual(toOption);
+        expectDateMatches(result?.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result?.initialSelectedDateTo, new Date(dateToOptionValue));
     });
 
     it('should throw when initial value is unknown', () => {
@@ -66,18 +64,18 @@ describe('computeInitialValues', () => {
         const initialDateFrom = '2020-01-01';
         const result = computeInitialValues({ dateFrom: initialDateFrom }, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toBeUndefined();
-        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
-        expectDateMatches(result.initialSelectedDateTo, today);
+        expect(result?.initialSelectedDateRange).toBeUndefined();
+        expectDateMatches(result?.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result?.initialSelectedDateTo, today);
     });
 
     it('should select from earliest date until date if only dateTo is given', () => {
         const initialDateTo = '2020-01-01';
         const result = computeInitialValues({ dateTo: initialDateTo }, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toBeUndefined();
-        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
-        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
+        expect(result?.initialSelectedDateRange).toBeUndefined();
+        expectDateMatches(result?.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result?.initialSelectedDateTo, new Date(initialDateTo));
     });
 
     it('should select date range is dateFrom and dateTo are given', () => {
@@ -92,9 +90,9 @@ describe('computeInitialValues', () => {
             dateRangeOptions,
         );
 
-        expect(result.initialSelectedDateRange).toBeUndefined();
-        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
-        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
+        expect(result?.initialSelectedDateRange).toBeUndefined();
+        expectDateMatches(result?.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result?.initialSelectedDateTo, new Date(initialDateTo));
     });
 
     it('should set initial "to" to "from" if "from" is after "to"', () => {
@@ -109,9 +107,9 @@ describe('computeInitialValues', () => {
             dateRangeOptions,
         );
 
-        expect(result.initialSelectedDateRange).toBeUndefined();
-        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
-        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateFrom));
+        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', () => {
@@ -126,9 +124,9 @@ describe('computeInitialValues', () => {
         );
     });
 
-    function expectDateMatches(actual: Date, expected: Date) {
-        expect(actual.getFullYear()).toEqual(expected.getFullYear());
-        expect(actual.getMonth()).toEqual(expected.getMonth());
-        expect(actual.getDate()).toEqual(expected.getDate());
+    function expectDateMatches(actual: Date | undefined, expected: Date | undefined) {
+        expect(actual?.getFullYear()).toEqual(expected?.getFullYear());
+        expect(actual?.getMonth()).toEqual(expected?.getMonth());
+        expect(actual?.getDate()).toEqual(expected?.getDate());
     }
 });

package/src/preact/dateRangeFilter/computeInitialValues.ts

@@ -2,22 +2,9 @@ import { type DateRangeOption, type DateRangeValue } from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
-export function computeInitialValues(
-    value: DateRangeValue | undefined,
-    earliestDate: string,
-    dateRangeOptions: DateRangeOption[],
-): {
-    initialSelectedDateRange: string | undefined;
-    initialSelectedDateFrom: Date;
-    initialSelectedDateTo: Date;
-} {
+export function computeInitialValues(value: DateRangeValue, earliestDate: string, dateRangeOptions: DateRangeOption[]) {
     if (value === undefined) {
-        const { dateFrom, dateTo } = getDatesForSelectorValue(undefined, dateRangeOptions, earliestDate);
-        return {
-            initialSelectedDateRange: undefined,
-            initialSelectedDateFrom: dateFrom,
-            initialSelectedDateTo: dateTo,
-        };
+        return undefined;
     }
 
     if (typeof value === 'string') {

package/src/preact/dateRangeFilter/date-picker.tsx

@@ -0,0 +1,66 @@
+import 'flatpickr/dist/flatpickr.min.css';
+import flatpickr from 'flatpickr';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { type WithClassName } from '../shared/WithClassName/WithClassName';
+
+export function DatePicker({
+    onChange,
+    value,
+    minDate,
+    maxDate,
+    placeholderText,
+    className,
+}: WithClassName<{
+    onChange?: (date: Date | undefined) => void;
+    value?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    placeholderText?: string;
+}>) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const [datePicker, setDatePicker] = useState<flatpickr.Instance | null>(null);
+
+    useEffect(() => {
+        if (!inputRef.current) {
+            return;
+        }
+
+        const instance = flatpickr(inputRef.current, {
+            allowInput: true,
+            dateFormat: 'Y-m-d',
+            defaultDate: value,
+            minDate,
+            maxDate,
+        });
+
+        setDatePicker(instance);
+
+        return () => {
+            instance.destroy();
+        };
+    }, [maxDate, minDate, onChange, value]);
+
+    if (value === undefined && inputRef.current) {
+        inputRef.current.value = '';
+    }
+
+    const handleChange = () => {
+        const newValue = datePicker?.selectedDates[0];
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+
+    return (
+        <input
+            className={`input input-bordered w-full ${className}`}
+            type='text'
+            placeholder={placeholderText}
+            ref={inputRef}
+            onChange={handleChange}
+            onBlur={handleChange}
+        />
+    );
+}

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(