@genspectrum/dashboard-components 0.16.4 → 0.17.1

package/dist/util.d.ts

@@ -73,8 +73,8 @@ declare const confidenceIntervalMethodSchema: default_2.ZodUnion<[default_2.ZodL
 
 export declare type DateRangeOption = default_2.infer<typeof dateRangeOptionSchema>;
 
-export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
-    constructor(detail: DateRangeSelectOption);
+export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
+    constructor(detail: DateRangeValue);
 }
 
 /**
@@ -136,11 +136,9 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
     dateTo?: string | undefined;
 }>;
 
-export declare type DateRangeSelectOption = Required<DateRangeValue>;
+export declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
 
-declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
-
-declare const dateRangeValueSchema: default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
+declare const dateRangeValueSchema: default_2.ZodOptional<default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
     dateFrom: default_2.ZodOptional<default_2.ZodString>;
     dateTo: default_2.ZodOptional<default_2.ZodString>;
 }, "strip", default_2.ZodTypeAny, {
@@ -149,7 +147,7 @@ declare const dateRangeValueSchema: default_2.ZodUnion<[default_2.ZodString, def
 }, {
     dateFrom?: string | undefined;
     dateTo?: string | undefined;
-}>]>;
+}>]>>;
 
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
 
@@ -972,7 +970,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -980,7 +978,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -988,7 +986,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -996,7 +994,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1036,11 +1034,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1048,7 +1042,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,7 +1050,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1064,7 +1062,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1110,10 +1108,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1121,7 +1119,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1129,10 +1127,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1140,7 +1138,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-COWV-Y0k.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-DkvWdq_G.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.4",
+    "version": "0.17.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -83,6 +83,7 @@
         "@lit/context": "^1.1.1",
         "@lit/reactive-element": "^2.0.4",
         "@lit/task": "^1.0.0",
+        "@tanstack/table-core": "^8.21.2",
         "chart.js": "^4.4.6",
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",

package/src/preact/components/clearable-select.stories.tsx

@@ -0,0 +1,75 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { fn, userEvent, within } from '@storybook/test';
+
+import { ClearableSelect, type ClearableSelectProps } from './clearable-select';
+import { expectOptionSelected } from '../shared/stories/expectOptionSelected';
+
+const meta: Meta<ClearableSelectProps> = {
+    title: 'Component/ClearableSelect',
+    component: ClearableSelect,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const Default: StoryObj<ClearableSelectProps> = {
+    render: (args) => (
+        <div class='flex justify-center px-4 py-16'>
+            <ClearableSelect {...args} />
+        </div>
+    ),
+    args: {
+        items: ['firstOption', 'secondOption'],
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('Show default placeholder', async () => {
+            await expectOptionSelected(canvasElement, 'Select an option');
+        });
+    },
+};
+
+export const UseInitialSelectedItem: StoryObj<ClearableSelectProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        initiallySelectedItem: 'firstOption',
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('Show initiallySelectedItem', async () => {
+            await expectOptionSelected(canvasElement, 'firstOption');
+        });
+    },
+};
+
+export const SwitchToOption: StoryObj<ClearableSelectProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Select an option', async () => {
+            await userEvent.selectOptions(getSelectElement(canvas), 'firstOption');
+            await expectOptionSelected(canvasElement, 'firstOption');
+        });
+    },
+};
+
+export const ClearOption: StoryObj<ClearableSelectProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        initiallySelectedItem: 'firstOption',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Clear the selected option', async () => {
+            await userEvent.click(canvas.getByRole('button', { name: '×' }));
+            await expectOptionSelected(canvasElement, 'Select an option');
+        });
+    },
+};
+
+const getSelectElement = (canvas: ReturnType<typeof within>) => {
+    return canvas.getByRole('combobox');
+};

package/src/preact/components/clearable-select.tsx

@@ -0,0 +1,76 @@
+import { type ChangeEvent } from 'preact/compat';
+import { useEffect, useState } from 'preact/hooks';
+
+import { type WithClassName } from '../shared/WithClassName/WithClassName';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export const undefinedValue = '__undefined__';
+
+export type ClearableSelectProps = {
+    items: string[];
+    initiallySelectedItem?: string | null;
+    onChange?: (item: string | null) => void;
+    placeholderText?: string;
+    value?: string | null;
+    selectClassName?: string;
+};
+
+export function ClearableSelect({
+    items,
+    initiallySelectedItem,
+    onChange,
+    placeholderText,
+    className,
+    value,
+    selectClassName,
+}: WithClassName<ClearableSelectProps>) {
+    const [selectedOption, setSelectedOption] = useState<string | null>(initiallySelectedItem ?? null);
+
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedOption(value);
+        }
+    }, [value]);
+
+    const handleClear = () => {
+        setSelectedOption(null);
+        if (onChange) {
+            onChange(null);
+        }
+    };
+
+    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        const newValue = event.currentTarget.value;
+        setSelectedOption(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+
+    return (
+        <div className={`relative inline min-w-24 ${className}`}>
+            <select
+                className={`w-full select select-bordered pr-14 ${selectClassName}`}
+                value={selectedOption ?? undefinedValue}
+                onChange={handleChange}
+            >
+                <option value={undefinedValue} disabled>
+                    {placeholderText ?? 'Select an option'}
+                </option>
+                {items.map((item) => (
+                    <option key={item} value={item}>
+                        {item}
+                    </option>
+                ))}
+            </select>
+            {selectedOption && (
+                <button
+                    onClick={handleClear}
+                    className='absolute right-10 top-1/2 -translate-y-1/2 bg-transparent border-0 cursor-pointer'
+                >
+                    <DeleteIcon />
+                </button>
+            )}
+        </div>
+    );
+}

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}
+        />
+    );
+}