@genspectrum/dashboard-components 0.19.2 → 0.19.4

package/src/preact/locationFilter/LocationChangedEvent.ts

@@ -1,8 +1,9 @@
 import { type LapisLocationFilter } from '../../types';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 export class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter) {
-        super('gs-location-changed', {
+        super(gsEventNames.locationChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -6,6 +6,7 @@ import data from './__mockData__/aggregated.json';
 import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -32,7 +33,7 @@ const meta: Meta<LocationFilterProps> = {
             ],
         },
         actions: {
-            handles: ['gs-location-changed', ...previewHandles],
+            handles: [gsEventNames.locationChanged, ...previewHandles],
         },
     },
     args: {
@@ -152,7 +153,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const locationChangedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.locationChanged, locationChangedListenerMock);
     });
 
     await step('location filter is rendered with value', async () => {

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -6,6 +6,7 @@ import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -15,7 +16,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', ...previewHandles],
+            handles: [gsEventNames.mutationFilterChanged, ...previewHandles],
         },
         fetchMock: {},
     },
@@ -357,7 +358,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const changedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
+        canvasElement.addEventListener(gsEventNames.mutationFilterChanged, changedListenerMock);
     });
 
     await step('wait until data is loaded', async () => {

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -8,6 +8,7 @@ import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { type MutationsFilter, mutationsFilterSchema } from '../../types';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -86,7 +87,7 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
         const detail = mapToMutationFilterStrings(selectedFilters);
 
         filterRef.current?.dispatchEvent(
-            new CustomEvent<MutationsFilter>('gs-mutation-filter-changed', {
+            new CustomEvent<MutationsFilter>(gsEventNames.mutationFilterChanged, {
                 detail,
                 bubbles: true,
                 composed: true,

package/src/preact/numberRangeFilter/NumberRangeFilterChangedEvent.ts

@@ -0,0 +1,31 @@
+import z from 'zod';
+
+import { gsEventNames } from '../../utils/gsEventNames';
+
+type LapisNumberFilter = Record<string, number | undefined>;
+
+export const numberRangeSchema = z.object({
+    min: z.number().optional(),
+    max: z.number().optional(),
+});
+export type NumberRange = z.infer<typeof numberRangeSchema>;
+
+export class NumberRangeValueChangedEvent extends CustomEvent<NumberRange> {
+    constructor(detail: NumberRange) {
+        super(gsEventNames.numberRangeValueChanged, {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}
+
+export class NumberRangeFilterChangedEvent extends CustomEvent<LapisNumberFilter> {
+    constructor(detail: LapisNumberFilter) {
+        super(gsEventNames.numberRangeFilterChanged, {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}

package/src/preact/numberRangeFilter/number-range-filter.stories.tsx

@@ -0,0 +1,383 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type StepFunction } from '@storybook/types';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { type NumberRange } from './NumberRangeFilterChangedEvent';
+import { NumberRangeFilter, type NumberRangeFilterProps } from './number-range-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+
+const meta: Meta<NumberRangeFilterProps> = {
+    title: 'Input/Number range filter',
+    component: NumberRangeFilter,
+    parameters: {
+        fetchMock: {},
+        actions: {
+            handles: [gsEventNames.numberRangeFilterChanged, gsEventNames.numberRangeValueChanged],
+        },
+    },
+    argTypes: {
+        value: {
+            control: {
+                type: 'object',
+            },
+        },
+        lapisField: {
+            control: {
+                type: 'text',
+            },
+        },
+        sliderMin: {
+            control: {
+                type: 'number',
+            },
+        },
+        sliderMax: {
+            control: {
+                type: 'number',
+            },
+        },
+        sliderStep: {
+            control: {
+                type: 'number',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<NumberRangeFilterProps> = {
+    render: (args) => <NumberRangeFilter {...args} />,
+    args: {
+        lapisField: 'age',
+        value: { min: 10, max: 90 },
+        sliderMin: 0,
+        sliderMax: 100,
+        sliderStep: 0.1,
+        width: '100%',
+    },
+};
+
+export const SetMinValue: StoryObj<NumberRangeFilterProps> = {
+    ...Template,
+    play: async ({ canvasElement, step }) => {
+        const {
+            filterChangedListenerMock,
+            valueChangedListenerMock,
+            expectFilterEventWithDetail,
+            expectValueEventWithDetail,
+            minInput,
+            maxInput,
+            clearMinButton,
+        } = await setup(canvasElement, step);
+
+        async function changeFocus() {
+            await userEvent.click(maxInput());
+        }
+
+        await step('clear min input', async () => {
+            await userEvent.click(clearMinButton());
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('');
+                await expect(maxInput()).toHaveValue('90');
+            });
+            await expectFilterEventWithDetail({
+                ageFrom: undefined,
+                ageTo: 90,
+            });
+            await expectValueEventWithDetail({
+                min: undefined,
+                max: 90,
+            });
+        });
+
+        await step('type a value into min input', async () => {
+            await userEvent.type(minInput(), '9');
+            await changeFocus();
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('9');
+                await expect(maxInput()).toHaveValue('90');
+            });
+            await expectFilterEventWithDetail({
+                ageFrom: 9,
+                ageTo: 90,
+            });
+            await expectValueEventWithDetail({
+                min: 9,
+                max: 90,
+            });
+        });
+
+        await step('make min input larger than max input and check that no event it dispatched', async () => {
+            filterChangedListenerMock.mockClear();
+            valueChangedListenerMock.mockClear();
+            await userEvent.type(minInput(), '8');
+            await changeFocus();
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('98');
+                await expect(maxInput()).toHaveValue('90');
+            });
+            await expect(filterChangedListenerMock).not.toHaveBeenCalled();
+            await expect(valueChangedListenerMock).not.toHaveBeenCalled();
+        });
+    },
+};
+
+export const SetMaxValue: StoryObj<NumberRangeFilterProps> = {
+    ...Template,
+    play: async ({ canvasElement, step }) => {
+        const {
+            filterChangedListenerMock,
+            valueChangedListenerMock,
+            expectFilterEventWithDetail,
+            expectValueEventWithDetail,
+            minInput,
+            maxInput,
+            clearMaxButton,
+        } = await setup(canvasElement, step);
+
+        async function changeFocus() {
+            await userEvent.click(minInput());
+        }
+
+        await step('clear max input', async () => {
+            await userEvent.click(clearMaxButton());
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('10');
+                await expect(maxInput()).toHaveValue('');
+            });
+            await expectFilterEventWithDetail({
+                ageFrom: 10,
+                ageTo: undefined,
+            });
+            await expectValueEventWithDetail({
+                min: 10,
+                max: undefined,
+            });
+        });
+
+        await step('type a smaller value than min into max input and check that no event is dispatched', async () => {
+            filterChangedListenerMock.mockClear();
+            valueChangedListenerMock.mockClear();
+            await userEvent.type(maxInput(), '1');
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('10');
+                await expect(maxInput()).toHaveValue('1');
+            });
+            await expect(filterChangedListenerMock).not.toHaveBeenCalled();
+            await expect(valueChangedListenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('type another value into max input', async () => {
+            await userEvent.type(maxInput(), '2');
+            await changeFocus();
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('10');
+                await expect(maxInput()).toHaveValue('12');
+            });
+            await expectFilterEventWithDetail({
+                ageFrom: 10,
+                ageTo: 12,
+            });
+            await expectValueEventWithDetail({
+                min: 10,
+                max: 12,
+            });
+        });
+    },
+};
+
+export const TypeInvalidNumbers: StoryObj<NumberRangeFilterProps> = {
+    ...Template,
+    play: async ({ canvasElement, step }) => {
+        const { filterChangedListenerMock, valueChangedListenerMock, minInput, maxInput, clearMaxButton } = await setup(
+            canvasElement,
+            step,
+        );
+
+        await step('clear max input', async () => {
+            await userEvent.click(clearMaxButton());
+            await waitFor(() => expect(filterChangedListenerMock).toHaveBeenCalled());
+            await waitFor(() => expect(valueChangedListenerMock).toHaveBeenCalled());
+            filterChangedListenerMock.mockClear();
+            valueChangedListenerMock.mockClear();
+        });
+
+        await step('type invalid number into input field', async () => {
+            await expect(minInput()).toBeValid();
+            await expect(maxInput()).toBeValid();
+            await userEvent.type(maxInput(), 'not a number');
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('10');
+                await expect(maxInput()).toHaveValue('not a number');
+                await expect(minInput()).toBeInvalid();
+                await expect(maxInput()).toBeInvalid();
+            });
+            await expect(filterChangedListenerMock).not.toHaveBeenCalled();
+            await expect(valueChangedListenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('clear invalid input from input field', async () => {
+            await expect(clearMaxButton()).toBeVisible();
+            await userEvent.click(clearMaxButton());
+            await waitFor(async () => {
+                await expect(minInput()).toHaveValue('10');
+                await expect(maxInput()).toHaveValue('');
+                await expect(minInput()).toBeValid();
+                await expect(maxInput()).toBeValid();
+            });
+        });
+    },
+};
+
+export const WithInvalidProps: StoryObj<NumberRangeFilterProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};
+
+export const ChangingTheValueProgrammatically: StoryObj<NumberRangeFilterProps> = {
+    ...Template,
+    render: (args) => {
+        const StatefulWrapper = () => {
+            const [value, setValue] = useState<NumberRange>({
+                min: 10,
+                max: 90,
+            });
+            const ref = useRef<HTMLDivElement>(null);
+
+            useEffect(() => {
+                ref.current?.addEventListener(gsEventNames.numberRangeValueChanged, (event) => {
+                    setValue(event.detail);
+                });
+            }, []);
+            return (
+                <div ref={ref}>
+                    <NumberRangeFilter {...args} value={value} />
+                    <button className='btn' onClick={() => setValue((prev) => ({ ...prev, min: 30 }))}>
+                        Set min to 30
+                    </button>
+                    <button className='btn' onClick={() => setValue((prev) => ({ ...prev, max: 40 }))}>
+                        Set max to 40
+                    </button>
+                </div>
+            );
+        };
+
+        return <StatefulWrapper />;
+    },
+    play: async ({ canvasElement, step, canvas }) => {
+        const {
+            filterChangedListenerMock,
+            valueChangedListenerMock,
+            expectFilterEventWithDetail,
+            expectValueEventWithDetail,
+            minInput,
+            maxInput,
+            clearMaxButton,
+        } = await setup(canvasElement, step);
+
+        await waitFor(async () => {
+            await expect(minInput()).toHaveValue('10');
+            await expect(maxInput()).toHaveValue('90');
+        });
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Set min to 30' }));
+        await waitFor(async () => {
+            await expect(minInput()).toHaveValue('30');
+            await expect(maxInput()).toHaveValue('90');
+        });
+        await expect(filterChangedListenerMock).not.toHaveBeenCalled();
+        await expect(valueChangedListenerMock).not.toHaveBeenCalled();
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Set max to 40' }));
+        await waitFor(async () => {
+            await expect(minInput()).toHaveValue('30');
+            await expect(maxInput()).toHaveValue('40');
+        });
+        await expect(filterChangedListenerMock).not.toHaveBeenCalled();
+        await expect(valueChangedListenerMock).not.toHaveBeenCalled();
+
+        await userEvent.click(clearMaxButton());
+        await waitFor(async () => {
+            await expect(minInput()).toHaveValue('30');
+            await expect(maxInput()).toHaveValue('');
+        });
+        await expectFilterEventWithDetail({ ageFrom: 30, ageTo: undefined });
+        await expectValueEventWithDetail({ min: 30, max: undefined });
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Set max to 40' }));
+        await waitFor(async () => {
+            await expect(minInput()).toHaveValue('30');
+            await expect(maxInput()).toHaveValue('40');
+        });
+    },
+};
+
+async function setup(canvasElement: HTMLElement, step: StepFunction) {
+    const canvas = within(canvasElement);
+
+    const filterChangedListenerMock = fn();
+    const valueChangedListenerMock = fn();
+    await step('Setup event listener mock', () => {
+        canvasElement.addEventListener(gsEventNames.numberRangeFilterChanged, filterChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.numberRangeValueChanged, valueChangedListenerMock);
+    });
+
+    const minInput = () => canvas.getByPlaceholderText('age from');
+    const maxInput = () => canvas.getByPlaceholderText('age to');
+    const clearMinButton = () => canvas.getByRole('button', { name: 'clear min input' });
+    const clearMaxButton = () => canvas.getByRole('button', { name: 'clear max input' });
+    const expectFilterEventWithDetail = (detail: { ageFrom?: number; ageTo?: number }) => {
+        return waitFor(async () => {
+            await expect(filterChangedListenerMock).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    detail,
+                }),
+            );
+        });
+    };
+    const expectValueEventWithDetail = (detail: NumberRange) => {
+        return waitFor(async () => {
+            await expect(valueChangedListenerMock).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    detail,
+                }),
+            );
+        });
+    };
+
+    await step('wait until component has loaded', async () => {
+        await waitFor(async () => {
+            await expect(minInput()).toBeVisible();
+            await expect(maxInput()).toBeVisible();
+            await expect(minInput()).toHaveValue('10');
+            await expect(maxInput()).toHaveValue('90');
+        });
+    });
+
+    return {
+        filterChangedListenerMock,
+        valueChangedListenerMock,
+        expectFilterEventWithDetail,
+        expectValueEventWithDetail,
+        minInput,
+        maxInput,
+        clearMinButton,
+        clearMaxButton,
+    };
+}

package/src/preact/numberRangeFilter/number-range-filter.tsx

@@ -0,0 +1,159 @@
+import { type FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import z from 'zod';
+
+import {
+    NumberRangeFilterChangedEvent,
+    numberRangeSchema,
+    NumberRangeValueChangedEvent,
+} from './NumberRangeFilterChangedEvent';
+import { SetRangeActionType, useSelectedRangeReducer } from './useSelectedRangeReducer';
+import { ErrorBoundary } from '../components/error-boundary';
+import { MinMaxRangeSlider } from '../components/min-max-range-slider';
+import { ResizeContainer } from '../components/resize-container';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+const numberRangeFilterPropsSchema = z.object({
+    value: numberRangeSchema,
+    lapisField: z.string().min(1),
+    sliderMin: z.number(),
+    sliderMax: z.number(),
+    sliderStep: z.number().positive(),
+    width: z.string(),
+});
+export type NumberRangeFilterProps = z.infer<typeof numberRangeFilterPropsSchema>;
+
+export const NumberRangeFilter: FunctionComponent<NumberRangeFilterProps> = (props) => {
+    const { width, ...innerProps } = props;
+    const size = { width, height: '4.8rem' };
+
+    return (
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={numberRangeFilterPropsSchema}>
+            <ResizeContainer size={size}>
+                <NumberRangeFilterInner {...innerProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+type NumberRangeFilterInnerProps = Omit<NumberRangeFilterProps, 'width'>;
+
+const NumberRangeFilterInner: FunctionComponent<NumberRangeFilterInnerProps> = ({
+    value,
+    lapisField,
+    sliderMin,
+    sliderMax,
+    sliderStep,
+}) => {
+    const divRef = useRef<HTMLDivElement>(null);
+
+    const [currentRange, dispatchRange] = useSelectedRangeReducer(value);
+    const [shouldDispatchEvent, setShouldDispatchEvent] = useState(false);
+
+    useEffect(() => {
+        if (!shouldDispatchEvent || currentRange.wasDispatched) {
+            return;
+        }
+
+        setShouldDispatchEvent(false);
+        if (currentRange.range.isValidRange) {
+            dispatchRange({ type: SetRangeActionType.DISPATCHED_EVENT });
+            divRef.current?.dispatchEvent(
+                new NumberRangeValueChangedEvent({
+                    min: currentRange.range.min,
+                    max: currentRange.range.max,
+                }),
+            );
+            divRef.current?.dispatchEvent(
+                new NumberRangeFilterChangedEvent({
+                    [`${lapisField}From`]: currentRange.range.min,
+                    [`${lapisField}To`]: currentRange.range.max,
+                }),
+            );
+        }
+    }, [divRef, currentRange.range, currentRange.wasDispatched, shouldDispatchEvent, lapisField, dispatchRange]);
+
+    function scheduleEventDispatch() {
+        setShouldDispatchEvent(true);
+    }
+
+    const dispatchRangeWithEvent: typeof dispatchRange = (action) => {
+        dispatchRange(action);
+        scheduleEventDispatch();
+    };
+
+    const inputError = currentRange.range.isValidRange ? '' : 'input-error';
+
+    return (
+        <div ref={divRef}>
+            <div className='join w-full'>
+                <div className={`join-item w-full flex input px-2 ${inputError}`}>
+                    <input
+                        type='text'
+                        inputmode='numeric'
+                        className='w-full grow capitalize'
+                        placeholder={`${lapisField} from`}
+                        value={currentRange.inputState.min ?? ''}
+                        onInput={(e) => {
+                            dispatchRange({
+                                type: SetRangeActionType.SET_MIN,
+                                value: (e.target as HTMLInputElement).value,
+                            });
+                        }}
+                        onBlur={() => scheduleEventDispatch()}
+                        aria-invalid={!currentRange.range.isValidRange}
+                    />
+                    {currentRange.inputState.min !== '' && (
+                        <button
+                            onClick={() => dispatchRangeWithEvent({ type: SetRangeActionType.SET_MIN, value: '' })}
+                            className='cursor-pointer'
+                            aria-label='clear min input'
+                        >
+                            <DeleteIcon />
+                        </button>
+                    )}
+                </div>
+                <div className={`join-item w-full flex input px-2 ${inputError}`}>
+                    <input
+                        type='text'
+                        inputmode='numeric'
+                        className='w-full grow capitalize'
+                        placeholder={`${lapisField} to`}
+                        value={currentRange.inputState.max ?? ''}
+                        onInput={(e) => {
+                            dispatchRange({
+                                type: SetRangeActionType.SET_MAX,
+                                value: (e.target as HTMLInputElement).value,
+                            });
+                        }}
+                        onBlur={() => scheduleEventDispatch()}
+                        aria-invalid={!currentRange.range.isValidRange}
+                    />
+                    {currentRange.inputState.max !== '' && (
+                        <button
+                            onClick={() => dispatchRangeWithEvent({ type: SetRangeActionType.SET_MAX, value: '' })}
+                            className='cursor-pointer'
+                            aria-label='clear max input'
+                        >
+                            <DeleteIcon />
+                        </button>
+                    )}
+                </div>
+            </div>
+            <MinMaxRangeSlider
+                min={currentRange.range.min ?? sliderMin}
+                max={currentRange.range.max ?? sliderMax}
+                rangeMin={sliderMin}
+                rangeMax={sliderMax}
+                setMin={(min) => {
+                    dispatchRange({ type: SetRangeActionType.SET_MIN, value: min.toString() });
+                }}
+                setMax={(max) => {
+                    dispatchRange({ type: SetRangeActionType.SET_MAX, value: max.toString() });
+                }}
+                onDrop={() => scheduleEventDispatch()}
+                step={sliderStep}
+            />
+        </div>
+    );
+};