@genspectrum/dashboard-components 0.3.2 → 0.4.1

package/src/preact/components/checkbox-selector.tsx

@@ -1,31 +1,29 @@
+import { Dropdown } from './dropdown';
+
 export type CheckboxItem = {
     label: string;
     checked: boolean;
 };
 
 export interface CheckboxSelectorProps<Item extends CheckboxItem = CheckboxItem> {
-    className?: string;
     items: Item[];
     label: string;
     setItems: (items: Item[]) => void;
 }
 
 export const CheckboxSelector = <Item extends CheckboxItem>({
-    className,
     items,
     label,
     setItems,
 }: CheckboxSelectorProps<Item>) => {
     return (
-        <div class={`dropdown ${className}`}>
-            <div tabIndex={0} role='button' class='btn btn-xs text-nowrap'>
-                {label}
-            </div>
-            <ul tabIndex={0} class='p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box'>
+        <Dropdown buttonTitle={label} placement={'bottom-start'}>
+            <ul>
                 {items.map((item, index) => (
-                    <li class='flex flex-row items-center' key={item.label}>
+                    <li className='flex flex-row items-center' key={item.label}>
                         <label>
                             <input
+                                className={'mr-2'}
                                 type='checkbox'
                                 id={`item-${index}`}
                                 checked={item.checked}
@@ -41,6 +39,6 @@ export const CheckboxSelector = <Item extends CheckboxItem>({
                     </li>
                 ))}
             </ul>
-        </div>
+        </Dropdown>
     );
 };

package/src/preact/components/dropdown.tsx

@@ -0,0 +1,40 @@
+import { flip, offset, shift } from '@floating-ui/dom';
+import { type Placement } from '@floating-ui/utils';
+import { type FunctionComponent } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+
+import { useCloseOnClickOutside, useCloseOnEsc, useFloatingUi } from '../shared/floating-ui/hooks';
+
+interface DropdownProps {
+    buttonTitle: string;
+    placement?: Placement;
+}
+
+export const dropdownClass =
+    'z-10 absolute w-max top-0 left-0 bg-white p-4 border border-gray-200 shadow-lg rounded-md';
+
+export const Dropdown: FunctionComponent<DropdownProps> = ({ children, buttonTitle, placement }) => {
+    const [showContent, setShowContent] = useState(false);
+    const referenceRef = useRef<HTMLButtonElement>(null);
+    const floatingRef = useRef<HTMLDivElement>(null);
+
+    useFloatingUi(referenceRef, floatingRef, [offset(4), shift(), flip()], placement);
+
+    useCloseOnClickOutside(floatingRef, referenceRef, setShowContent);
+    useCloseOnEsc(setShowContent);
+
+    const toggle = () => {
+        setShowContent(!showContent);
+    };
+
+    return (
+        <div>
+            <button type='button' className='btn btn-xs whitespace-nowrap' onClick={toggle} ref={referenceRef}>
+                {buttonTitle}
+            </button>
+            <div ref={floatingRef} className={`${dropdownClass} ${showContent ? '' : 'hidden'}`}>
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/preact/components/info.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, fireEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import Info, { type InfoProps } from './info';
 
@@ -8,7 +8,7 @@ const meta: Meta<InfoProps> = {
     component: Info,
     parameters: { fetchMock: {} },
     args: {
-        size: { width: '400px', height: '100px' },
+        height: '100px',
     },
 };
 
@@ -28,16 +28,16 @@ export const ShowsInfoOnClick: StoryObj<InfoProps> = {
     ...InfoStory,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const loading = canvas.getByRole('button', { name: '?' });
+        const openInfo = canvas.getByRole('button', { name: '?' });
 
-        await waitFor(() => expect(loading).toBeInTheDocument());
+        await waitFor(() => expect(openInfo).toBeInTheDocument());
 
-        await fireEvent.click(loading);
+        await userEvent.click(openInfo);
 
-        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeVisible());
 
-        await fireEvent.click(canvas.getByRole('button', { name: 'Close' }));
+        await userEvent.click(document.body);
 
-        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeInTheDocument());
+        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeVisible());
     },
 };

package/src/preact/components/info.tsx

@@ -1,38 +1,57 @@
+import { offset, shift, size } from '@floating-ui/dom';
 import { type FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
+
+import { dropdownClass } from './dropdown';
+import { useCloseOnClickOutside, useCloseOnEsc, useFloatingUi } from '../shared/floating-ui/hooks';
 
 export interface InfoProps {
-    size?: {
-        height?: string;
-        width?: string;
-    };
+    height?: string;
 }
 
-const Info: FunctionComponent<InfoProps> = ({ children, size }) => {
+const Info: FunctionComponent<InfoProps> = ({ children, height }) => {
     const [showHelp, setShowHelp] = useState(false);
+    const referenceRef = useRef<HTMLButtonElement>(null);
+    const floatingRef = useRef<HTMLDivElement>(null);
+
+    useFloatingUi(referenceRef, floatingRef, [
+        offset(10),
+        shift(),
+        size({
+            apply() {
+                if (!floatingRef.current) {
+                    return;
+                }
+                floatingRef.current.style.width = '100vw';
+                floatingRef.current.style.height = height ? height : '50vh';
+            },
+        }),
+    ]);
 
     const toggleHelp = () => {
         setShowHelp(!showHelp);
     };
 
+    useCloseOnEsc(setShowHelp);
+    useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
+
     return (
         <div className='relative'>
-            <button className='btn btn-xs' onClick={toggleHelp}>
+            <button type='button' className='btn btn-xs' onClick={toggleHelp} ref={referenceRef}>
                 ?
             </button>
-            {showHelp && (
-                <div
-                    className='absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50'
-                    style={size}
+            <div
+                ref={floatingRef}
+                className={`${dropdownClass} overflow-y-auto opacity-90 ${showHelp ? '' : 'hidden'}`}
+            >
+                <div className={'flex flex-col'}>{children}</div>
+                <button
+                    onClick={() => setShowHelp(false)}
+                    className={'float-right underline text-sm hover:text-blue-700 mr-2'}
                 >
-                    <div className='flex flex-col'>{children}</div>
-                    <div className='flex justify-end'>
-                        <button className='text-sm underline mt-2' onClick={toggleHelp}>
-                            Close
-                        </button>
-                    </div>
-                </div>
-            )}
+                    Close
+                </button>
+            </div>
         </div>
     );
 };

package/src/preact/components/mutation-type-selector.tsx

@@ -21,7 +21,6 @@ export const MutationTypeSelector: FunctionComponent<MutationTypeSelectorProps>
 
     return (
         <CheckboxSelector
-            className='mx-1'
             items={displayedMutationTypes}
             label={mutationTypesSelectorLabel}
             setItems={(items) => setDisplayedMutationTypes(items)}

package/src/preact/components/proportion-selector-dropdown.tsx

@@ -1,33 +1,24 @@
 import { type FunctionComponent } from 'preact';
 
+import { Dropdown } from './dropdown';
 import { ProportionSelector, type ProportionSelectorProps } from './proportion-selector';
 
-export interface ProportionSelectorDropdownProps extends ProportionSelectorProps {
-    openDirection?: 'left' | 'right';
-}
+export type ProportionSelectorDropdownProps = ProportionSelectorProps;
 
 export const ProportionSelectorDropdown: FunctionComponent<ProportionSelectorDropdownProps> = ({
     proportionInterval,
     setMinProportion,
     setMaxProportion,
-    openDirection = 'right',
 }) => {
     const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
 
     return (
-        <div class={`dropdown ${openDirection === 'left' ? 'dropdown-end' : ''}`}>
-            <div tabIndex={0} role='button' class='btn btn-xs whitespace-nowrap'>
-                Proportion {label}
-            </div>
-            <ul tabIndex={0} class='p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-72'>
-                <div class='mb-2 ml-2'>
-                    <ProportionSelector
-                        proportionInterval={proportionInterval}
-                        setMinProportion={setMinProportion}
-                        setMaxProportion={setMaxProportion}
-                    />
-                </div>
-            </ul>
-        </div>
+        <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
+            <ProportionSelector
+                proportionInterval={proportionInterval}
+                setMinProportion={setMinProportion}
+                setMaxProportion={setMaxProportion}
+            />
+        </Dropdown>
     );
 };

package/src/preact/components/tabs.tsx

@@ -17,11 +17,20 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [heightOfTabs, setHeightOfTabs] = useState('3rem');
     const tabRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
+    const updateHeightOfTabs = () => {
         if (tabRef.current) {
             const heightOfTabs = tabRef.current.getBoundingClientRect().height;
             setHeightOfTabs(`${heightOfTabs}px`);
         }
+    };
+
+    useEffect(() => {
+        updateHeightOfTabs();
+
+        window.addEventListener('resize', updateHeightOfTabs);
+        return () => {
+            window.removeEventListener('resize', updateHeightOfTabs);
+        };
     }, []);
 
     const tabElements = (
@@ -51,9 +60,9 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
 
     return (
         <div className='h-full w-full'>
-            <div ref={tabRef} className='flex flex-row justify-between'>
+            <div ref={tabRef} className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
-                {toolbar && <div className='py-2'>{toolbarElement}</div>}
+                {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
             <div
                 className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? '' : 'rounded-tl-md'}`}

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

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

package/src/preact/dateRangeSelector/computeInitialValues.ts

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

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

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