@genspectrum/dashboard-components 0.19.9 → 0.21.0

package/dist/util.d.ts

@@ -77,38 +77,19 @@ export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeVa
     constructor(detail: DateRangeValue);
 }
 
+declare type DateRangeOptionPresets = {
+    last2Weeks: DateRangeOption;
+    lastMonth: DateRangeOption;
+    last2Months: DateRangeOption;
+    last3Months: DateRangeOption;
+    last6Months: DateRangeOption;
+    lastYear: DateRangeOption;
+};
+
 /**
  * Presets for the `gs-date-range-filter` component that can be used as `dateRangeOptions`.
  */
-export declare const dateRangeOptionPresets: {
-    last2Weeks: {
-        label: string;
-        dateFrom: string;
-    };
-    lastMonth: {
-        label: string;
-        dateFrom: string;
-    };
-    last2Months: {
-        label: string;
-        dateFrom: string;
-    };
-    last3Months: {
-        label: string;
-        dateFrom: string;
-    };
-    last6Months: {
-        label: string;
-        dateFrom: string;
-    };
-    lastYear: {
-        label: string;
-        dateFrom: string;
-    };
-    allTimes: {
-        label: string;
-    };
-};
+export declare const dateRangeOptionPresets: () => DateRangeOptionPresets;
 
 /**
  * A date range option that can be used in the `gs-date-range-filter` component.
@@ -118,12 +99,10 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
     label: default_2.ZodString;
     /**
      * The start date of the date range in the format `YYYY-MM-DD`.
-     * If not set, the date range selector will default to the `earliestDate` property.
      */
     dateFrom: default_2.ZodOptional<default_2.ZodString>;
     /**
      * The end date of the date range in the format `YYYY-MM-DD`.
-     * If not set, the date range selector will default to the current date.
      */
     dateTo: default_2.ZodOptional<default_2.ZodString>;
 }, "strip", default_2.ZodTypeAny, {
@@ -938,7 +917,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -946,7 +925,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -954,7 +933,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -962,7 +941,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -986,7 +965,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -994,7 +973,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1002,7 +981,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1010,7 +989,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,7 +997,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1026,7 +1005,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1034,7 +1013,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1042,7 +1021,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1050,7 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1058,7 +1037,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>;
         }
     }
 }
@@ -1066,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1074,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1082,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1090,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1098,11 +1077,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1110,7 +1085,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>;
         }
     }
 }
@@ -1118,7 +1093,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1126,7 +1105,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-RZ8haPHq.js";
+import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-B64OQZjX.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.19.9",
+    "version": "0.21.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -111,7 +111,7 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.22.0",
+        "@storybook/test-runner": "^0.23.0",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",

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

@@ -2,9 +2,6 @@ import { describe, expect, it } from 'vitest';
 
 import { computeInitialValues } from './computeInitialValues';
 
-const today = new Date();
-const earliestDate = '1900-01-01';
-
 const fromOption = 'fromOption';
 const toOption = 'toOption';
 const fromToOption = 'fromToOption';
@@ -19,62 +16,60 @@ const dateRangeOptions = [
 
 describe('computeInitialValues', () => {
     it('should return undefined for null value', () => {
-        const result = computeInitialValues(null, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(null, dateRangeOptions);
 
         expect(result).toBeUndefined();
     });
 
     it('should compute initial value if value is dateRangeOption label', () => {
-        const result = computeInitialValues(fromToOption, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(fromToOption, dateRangeOptions);
 
         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);
+    it('should compute initial value if value is dateRangeOption label with missing date to', () => {
+        const result = computeInitialValues(fromOption, dateRangeOptions);
 
         expect(result?.initialSelectedDateRange).toEqual(fromOption);
         expectDateMatches(result?.initialSelectedDateFrom, new Date(dateFromOptionValue));
-        expectDateMatches(result?.initialSelectedDateTo, today);
+        expectDateMatches(result?.initialSelectedDateTo, undefined);
     });
 
-    it('should use earliest date as "dateFrom" if it is unset in selected option', () => {
-        const result = computeInitialValues(toOption, earliestDate, dateRangeOptions);
+    it('should compute initial value if value is dateRangeOption label with missing date from', () => {
+        const result = computeInitialValues(toOption, dateRangeOptions);
 
         expect(result?.initialSelectedDateRange).toEqual(toOption);
-        expectDateMatches(result?.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result?.initialSelectedDateFrom, undefined);
         expectDateMatches(result?.initialSelectedDateTo, new Date(dateToOptionValue));
     });
 
     it('should throw when initial value is unknown', () => {
-        expect(() => computeInitialValues('not a known value', earliestDate, dateRangeOptions)).toThrowError(
+        expect(() => computeInitialValues('not a known value', dateRangeOptions)).toThrowError(
             /Invalid value "not a known value", It must be one of/,
         );
     });
 
     it('should throw when initial value is set but no options are provided', () => {
-        expect(() => computeInitialValues('not a known value', earliestDate, [])).toThrowError(
-            /There are no selectable options/,
-        );
+        expect(() => computeInitialValues('not a known value', [])).toThrowError(/There are no selectable options/);
     });
 
-    it('should select from date until today if only dateFrom is given', () => {
+    it('should compute initial date if only dateFrom is given', () => {
         const initialDateFrom = '2020-01-01';
-        const result = computeInitialValues({ dateFrom: initialDateFrom }, earliestDate, dateRangeOptions);
+        const result = computeInitialValues({ dateFrom: initialDateFrom }, dateRangeOptions);
 
         expect(result?.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result?.initialSelectedDateFrom, new Date(initialDateFrom));
-        expectDateMatches(result?.initialSelectedDateTo, today);
+        expectDateMatches(result?.initialSelectedDateTo, undefined);
     });
 
-    it('should select from earliest date until date if only dateTo is given', () => {
+    it('should compute initial date if only dateTo is given', () => {
         const initialDateTo = '2020-01-01';
-        const result = computeInitialValues({ dateTo: initialDateTo }, earliestDate, dateRangeOptions);
+        const result = computeInitialValues({ dateTo: initialDateTo }, dateRangeOptions);
 
         expect(result?.initialSelectedDateRange).toBeUndefined();
-        expectDateMatches(result?.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result?.initialSelectedDateFrom, undefined);
         expectDateMatches(result?.initialSelectedDateTo, new Date(initialDateTo));
     });
 
@@ -86,7 +81,6 @@ describe('computeInitialValues', () => {
                 dateFrom: initialDateFrom,
                 dateTo: initialDateTo,
             },
-            earliestDate,
             dateRangeOptions,
         );
 
@@ -103,7 +97,6 @@ describe('computeInitialValues', () => {
                 dateFrom: initialDateFrom,
                 dateTo: initialDateTo,
             },
-            earliestDate,
             dateRangeOptions,
         );
 
@@ -113,15 +106,11 @@ describe('computeInitialValues', () => {
     });
 
     it('should throw if initial "from" is not a valid date', () => {
-        expect(() => computeInitialValues({ dateFrom: 'not a date' }, earliestDate, [])).toThrowError(
-            'Invalid value.dateFrom',
-        );
+        expect(() => computeInitialValues({ dateFrom: 'not a date' }, [])).toThrowError('Invalid value.dateFrom');
     });
 
     it('should throw if initial "to" is not a valid date', () => {
-        expect(() => computeInitialValues({ dateTo: 'not a date' }, earliestDate, [])).toThrowError(
-            'Invalid value.dateTo',
-        );
+        expect(() => computeInitialValues({ dateTo: 'not a date' }, [])).toThrowError('Invalid value.dateTo');
     });
 
     function expectDateMatches(actual: Date | undefined, expected: Date | undefined) {

package/src/preact/dateRangeFilter/computeInitialValues.ts

@@ -1,17 +1,17 @@
 import { type DateRangeOption, type DateRangeValue } from './dateRangeOption';
-import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
+import { getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
-export function computeInitialValues(value: DateRangeValue, earliestDate: string, dateRangeOptions: DateRangeOption[]) {
+export function computeInitialValues(value: DateRangeValue, dateRangeOptions: DateRangeOption[]) {
     if (value === null) {
         return undefined;
     }
 
     if (typeof value === 'string') {
         const selectableOptions = getSelectableOptions(dateRangeOptions);
-        const initialSelectedDateRange = selectableOptions.find((option) => option.value === value)?.value;
+        const matchingOption = dateRangeOptions.find((option) => option.label === value);
 
-        if (initialSelectedDateRange === undefined) {
+        if (matchingOption === undefined) {
             if (selectableOptions.length === 0) {
                 throw new UserFacingError('Invalid value', 'There are no selectable options, but value is set.');
             }
@@ -21,34 +21,24 @@ export function computeInitialValues(value: DateRangeValue, earliestDate: string
             );
         }
 
-        const { dateFrom, dateTo } = getDatesForSelectorValue(initialSelectedDateRange, dateRangeOptions, earliestDate);
-
         return {
-            initialSelectedDateRange,
-            initialSelectedDateFrom: dateFrom,
-            initialSelectedDateTo: dateTo,
+            initialSelectedDateRange: matchingOption.label,
+            initialSelectedDateFrom:
+                matchingOption.dateFrom !== undefined ? new Date(matchingOption.dateFrom) : undefined,
+            initialSelectedDateTo: matchingOption.dateTo !== undefined ? new Date(matchingOption.dateTo) : undefined,
         };
     }
 
     const { dateFrom, dateTo } = value;
 
-    const initialSelectedDateFrom = isUndefinedOrEmpty(dateFrom) ? new Date(earliestDate) : new Date(dateFrom);
-    let initialSelectedDateTo = isUndefinedOrEmpty(dateTo) ? new Date() : new Date(dateTo);
-
-    if (isNaN(initialSelectedDateFrom.getTime())) {
-        throw new UserFacingError(
-            'Invalid value.dateFrom',
-            `Invalid value.dateFrom "${dateFrom}", It must be of the format YYYY-MM-DD`,
-        );
-    }
-    if (isNaN(initialSelectedDateTo.getTime())) {
-        throw new UserFacingError(
-            'Invalid value.dateTo',
-            `Invalid value.dateTo "${dateTo}", It must be of the format YYYY-MM-DD`,
-        );
-    }
+    const initialSelectedDateFrom = parseMaybeDate(dateFrom, 'dateFrom');
+    let initialSelectedDateTo = parseMaybeDate(dateTo, 'dateTo');
 
-    if (initialSelectedDateFrom > initialSelectedDateTo) {
+    if (
+        initialSelectedDateFrom !== undefined &&
+        initialSelectedDateTo !== undefined &&
+        initialSelectedDateFrom > initialSelectedDateTo
+    ) {
         initialSelectedDateTo = initialSelectedDateFrom;
     }
 
@@ -59,6 +49,18 @@ export function computeInitialValues(value: DateRangeValue, earliestDate: string
     };
 }
 
-function isUndefinedOrEmpty(value: string | undefined): value is undefined | '' {
-    return value === undefined || value === '';
+function parseMaybeDate(date: string | undefined, name: string): Date | undefined {
+    if (date === undefined || date === '') {
+        return undefined;
+    }
+
+    const parsedDate = new Date(date);
+    if (isNaN(parsedDate.getTime())) {
+        throw new UserFacingError(
+            `Invalid value.${name}`,
+            `Invalid value.${name} "${date}", it must be of the format YYYY-MM-DD`,
+        );
+    }
+
+    return parsedDate;
 }

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

@@ -1,7 +1,6 @@
 import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import type { StepFunction } from '@storybook/types';
-import dayjs from 'dayjs/esm';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { DateRangeFilter, type DateRangeFilterProps } from './date-range-filter';
@@ -13,7 +12,9 @@ import { dateRangeOptionPresets, type DateRangeValue } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 import { expectOptionSelected } from '../shared/stories/expectOptionSelected';
 
-const earliestDate = '1970-01-01';
+const allTimes = {
+    label: 'All times',
+};
 
 const customDateRange = {
     label: 'CustomDateRange',
@@ -43,11 +44,6 @@ const meta: Meta<DateRangeFilterProps> = {
                 type: 'object',
             },
         },
-        earliestDate: {
-            control: {
-                type: 'text',
-            },
-        },
         width: {
             control: {
                 type: 'text',
@@ -55,8 +51,7 @@ const meta: Meta<DateRangeFilterProps> = {
         },
     },
     args: {
-        dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
-        earliestDate,
+        dateRangeOptions: [dateRangeOptionPresets().lastMonth, allTimes, customDateRange],
         value: null,
         lapisDateField: 'aDateColumn',
         width: '100%',
@@ -122,7 +117,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeFilterProps> = {
         await waitFor(async () => {
             await expectOptionSelected(canvasElement, 'Custom');
             await expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
-            await expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
+            await expect(dateToPicker(canvas)).toHaveValue('');
         });
     },
 };
@@ -140,7 +135,7 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeFilterProps> = {
 
         await waitFor(async () => {
             await expectOptionSelected(canvasElement, 'Custom');
-            await expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
+            await expect(dateFromPicker(canvas)).toHaveValue('');
             await expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
         });
     },
@@ -150,7 +145,7 @@ export const SetsValueOnBlur: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        value: dateRangeOptionPresets.lastMonth.label,
+        value: dateRangeOptionPresets().lastMonth.label,
     },
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
@@ -173,7 +168,6 @@ export const SetsValueOnBlur: StoryObj<DateRangeFilterProps> = {
                     expect.objectContaining({
                         detail: {
                             aDateColumnFrom: '2000-01-01',
-                            aDateColumnTo: dayjs().format('YYYY-MM-DD'),
                         },
                     }),
                 );
@@ -182,7 +176,6 @@ export const SetsValueOnBlur: StoryObj<DateRangeFilterProps> = {
                     expect.objectContaining({
                         detail: {
                             dateFrom: '2000-01-01',
-                            dateTo: dayjs().format('YYYY-MM-DD'),
                         },
                     }),
                 );
@@ -211,7 +204,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
                     <button className='btn' onClick={() => setValue(customDateRange.label)}>
                         Set to Custom
                     </button>
-                    <button className='btn' onClick={() => setValue(dateRangeOptionPresets.lastMonth.label)}>
+                    <button className='btn' onClick={() => setValue(dateRangeOptionPresets().lastMonth.label)}>
                         Set to Last month
                     </button>
                 </div>