@genspectrum/dashboard-components 0.13.7 → 0.14.2

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/preact';
 import { expect, waitFor } from '@storybook/test';
 
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import denominatorFilter from './__mockData__/denominatorFilter.json';
 import denominatorOneDataset from './__mockData__/denominatorFilterOneDataset.json';
 import numeratorFilterEG from './__mockData__/numeratorFilterEG.json';
@@ -42,9 +42,9 @@ export default {
 
 const Template = {
     render: (args: PrevalenceOverTimeProps) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <PrevalenceOverTime {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 
@@ -254,7 +254,7 @@ export const WithNoLapisDateField: StoryObj<PrevalenceOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
@@ -9,7 +9,7 @@ import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
 import PrevalenceOverTimeTable from './prevalence-over-time-table';
 import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
 import { lapisFilterSchema, namedLapisFilterSchema, temporalGranularitySchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -65,7 +65,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = (c
 
 export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
     const { numeratorFilters, denominatorFilter, granularity, smoothingWindow, lapisDateField } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () =>
@@ -226,7 +226,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 
 const PrevalenceOverTimeInfo: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
     const { granularity, smoothingWindow, views } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -5,7 +5,7 @@ import denominator from './__mockData__/denominatorFilter.json';
 import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 export default {
@@ -30,9 +30,9 @@ export default {
 
 export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
     render: (args: RelativeGrowthAdvantageProps) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <RelativeGrowthAdvantage {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         numeratorFilter: {
@@ -188,7 +188,7 @@ export const WithNoLapisDateField: StoryObj<RelativeGrowthAdvantageProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import z from 'zod';
 
 import RelativeGrowthAdvantageChart from './relative-growth-advantage-chart';
@@ -9,7 +9,7 @@ import {
     type RelativeGrowthAdvantageData,
 } from '../../query/queryRelativeGrowthAdvantage';
 import { lapisFilterSchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
@@ -52,7 +52,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
 };
 
 export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const { numeratorFilter, denominatorFilter, generationTime, lapisDateField } = componentProps;
 
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -160,7 +160,7 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
 const RelativeGrowthAdvantageInfo: FunctionComponent<{ originalComponentProps: RelativeGrowthAdvantageProps }> = ({
     originalComponentProps,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const generationTime = originalComponentProps.generationTime;
 
     return (

package/src/preact/shared/floating-ui/hooks.ts

@@ -20,7 +20,7 @@ export function useFloatingUi(
         const { current: floating } = floatingRef;
 
         const update = () => {
-            computePosition(reference, floating, {
+            void computePosition(reference, floating, {
                 placement,
                 middleware,
             }).then(({ x, y }) => {

package/src/preact/statistic/statistics.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import denominatorData from './__mockData__/denominator.json';
 import numeratorData from './__mockData__/numerator.json';
 import { Statistics, type StatisticsProps } from './statistics';
@@ -55,9 +55,9 @@ export default meta;
 
 export const Default: StoryObj<StatisticsProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <Statistics {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         numeratorFilter: {

package/src/preact/statistic/statistics.tsx

@@ -1,10 +1,9 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
 import { queryGeneralStatistics } from '../../query/queryGeneralStatistics';
 import { lapisFilterSchema } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -35,7 +34,7 @@ export const Statistics: FunctionComponent<StatisticsProps> = (componentProps) =
 
 export const StatisticsInner: FunctionComponent<StatisticsProps> = (componentProps) => {
     const { numeratorFilter, denominatorFilter } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryGeneralStatistics(numeratorFilter, denominatorFilter, lapis);

package/src/preact/textInput/text-input.stories.tsx

@@ -5,7 +5,7 @@ import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<TextInputProps> = {
@@ -67,9 +67,9 @@ export default meta;
 
 export const Default: StoryObj<TextInputProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <TextInput {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         lapisField: 'host',
@@ -92,13 +92,13 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
         const canvas = within(canvasElement);
 
         const changedListenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-text-input-changed', changedListenerMock);
         });
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
-            expect(input).toHaveValue('Homo sapiens');
+            await expect(input).toHaveValue('Homo sapiens');
         });
 
         await step('Remove initial value', async () => {
@@ -122,7 +122,7 @@ export const WithNoLapisField: StoryObj<TextInputProps> = {
         lapisField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/textInput/text-input.tsx

@@ -1,10 +1,9 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { TextInputChangedEvent } from './TextInputChangedEvent';
+import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
 import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -46,7 +45,7 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
     placeholderText,
     lapisFilter,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => fetchStringAutocompleteList({ lapis, field: lapisField, lapisFilter }),

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
 import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
 import referenceGenome from '../../../lapisApi/__mockData__/referenceGenome.json';
-import { LapisUrlContext } from '../../LapisUrlContext';
+import { LapisUrlContextProvider } from '../../LapisUrlContext';
 import { ReferenceGenomeContext } from '../../ReferenceGenomeContext';
 import details from './__mockData__/details.json';
 
@@ -28,11 +28,11 @@ export default meta;
 
 const Template = {
     render: (args: WastewaterMutationsOverTimeProps) => (
-        <LapisUrlContext.Provider value={WISE_LAPIS_URL}>
+        <LapisUrlContextProvider value={WISE_LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <WastewaterMutationsOverTime {...args} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx

@@ -1,10 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
 import { lapisFilterSchema, sequenceTypeSchema } from '../../../types';
-import { LapisUrlContext } from '../../LapisUrlContext';
+import { useLapisUrl } from '../../LapisUrlContext';
 import { type ColorScale } from '../../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../../components/color-scale-selector-dropdown';
 import { ErrorBoundary } from '../../components/error-boundary';
@@ -44,7 +44,7 @@ export const WastewaterMutationsOverTime: FunctionComponent<WastewaterMutationsO
 export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutationsOverTimeProps> = (
     componentProps,
 ) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const {
         data: mutationOverTimeDataPerLocation,
@@ -142,7 +142,7 @@ type WastewaterMutationsOverTimeInfoProps = {
 const WastewaterMutationsOverTimeInfo: FunctionComponent<WastewaterMutationsOverTimeInfoProps> = ({
     originalComponentProps,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Info for mutations over time</InfoHeadline1>

package/src/utils/map2d.ts

@@ -150,6 +150,7 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
         this.keysSecondAxis = new Map(map.keysSecondAxis);
 
         if (map instanceof Map2dView) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- the generics match, we know that.
             this.baseMap = map.baseMap;
         }
         this.baseMap = map;

package/src/web-components/PreactLitAdapter.tsx

@@ -7,7 +7,7 @@ import { type JSXInternal } from 'preact/src/jsx';
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
-import { LapisUrlContext } from '../preact/LapisUrlContext';
+import { LapisUrlContextProvider } from '../preact/LapisUrlContext';
 import { ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
 import minMaxPercentSliderCss from '../preact/components/min-max-percent-slider.css?inline';
 import tailwindStyle from '../styles/tailwind.css?inline';
@@ -47,11 +47,11 @@ export abstract class PreactLitAdapter extends ReactiveElement {
 
     override update(changedProperties: PropertyValues) {
         const vdom = (
-            <LapisUrlContext.Provider value={this.lapis}>
+            <LapisUrlContextProvider value={this.lapis}>
                 <ReferenceGenomeContext.Provider value={this.referenceGenome}>
                     {this.render()}
                 </ReferenceGenomeContext.Provider>
-            </LapisUrlContext.Provider>
+            </LapisUrlContextProvider>
         );
         super.update(changedProperties);
         render(vdom, this.renderRoot);

package/src/web-components/gs-app.stories.ts

@@ -50,9 +50,9 @@ export const Default: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText(LAPIS_URL)).toBeVisible();
-            expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText(LAPIS_URL)).toBeVisible();
+            await expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
         });
     },
 };
@@ -66,8 +66,8 @@ export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
         });
     },
 };
@@ -103,8 +103,8 @@ export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
         });
     },
 };

package/src/web-components/gs-app.ts

@@ -55,7 +55,9 @@ export class AppComponent extends LitElement {
         task: async () => {
             const lapisUrl = lapisUrlSchema.parse(this.lapis);
 
-            this.referenceGenome = await fetchReferenceGenome(lapisUrl);
+            this.referenceGenome = await fetchReferenceGenome(
+                lapisUrl.endsWith('/') ? lapisUrl.slice(0, -1) : lapisUrl,
+            );
         },
         args: () => [this.lapis],
     });

package/src/web-components/input/gs-date-range-selector.stories.ts

@@ -16,9 +16,7 @@ const codeExample = String.raw`
 <gs-date-range-selector
     dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
-    initialValue="Year 2021"
-    initialDateFrom="2020-01-01"
-    initialDateTo="2021-01-01"
+    value="Year 2021"
     width="100%"
     lapisDateField="myDateColumn"
 ></gs-date-range-selector>`;
@@ -40,11 +38,10 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
         },
     }),
     argTypes: {
-        initialValue: {
+        value: {
             control: {
-                type: 'select',
+                type: 'object',
             },
-            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
         lapisDateField: { control: { type: 'text' } },
         dateRangeOptions: {
@@ -71,11 +68,9 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
             customDateRange,
         ],
         earliestDate: '1970-01-01',
-        initialValue: dateRangeOptionPresets.lastMonth.label,
+        value: dateRangeOptionPresets.lastMonth.label,
         lapisDateField: 'aDateColumn',
         width: '100%',
-        initialDateFrom: undefined,
-        initialDateTo: undefined,
     },
     tags: ['autodocs'],
 };
@@ -89,9 +84,7 @@ export const Default: StoryObj<Required<DateRangeSelectorProps>> = {
                 <gs-date-range-selector
                     .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
-                    .initialValue=${args.initialValue}
-                    .initialDateFrom=${args.initialDateFrom}
-                    .initialDateTo=${args.initialDateTo}
+                    .value=${args.value}
                     .width=${args.width}
                     .lapisDateField=${args.lapisDateField}
                 ></gs-date-range-selector>
@@ -106,15 +99,15 @@ export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
 
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
             canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
         });
 
         await step('Expect last 6 months to be selected', async () => {
             await expect(selectField(canvas)).toHaveValue('Last month');
-            await waitFor(() => {
-                expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
+            await waitFor(async () => {
+                await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
             });
         });
 
@@ -140,5 +133,5 @@ export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
     },
 };
 
-const dateToPicker = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Date to');
-const selectField = (canvas: ReturnType<typeof within>) => canvas.getByRole('combobox');
+const dateToPicker = (canvas: ReturnType<typeof within>): HTMLElement => canvas.getByPlaceholderText('Date to');
+const selectField = (canvas: ReturnType<typeof within>): HTMLElement => canvas.getByRole('combobox');

package/src/web-components/input/gs-date-range-selector.tsx

@@ -46,15 +46,18 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Contains the selected dateRangeOption or when users select custom values it contains the selected dates.
  *
  * Use this event, when you want to control this component in your JS application.
+ * You can supply the `detail` of this event to the `value` attribute of this component.
  */
 @customElement('gs-date-range-selector')
 export class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
      * An array of date range options that the select field should provide.
-     * The `label` will be shown to the user, and it will be available as `initialValue`.
+     * The `label` will be shown to the user, and it will be available as `value`.
      * The dates must be in the format `YYYY-MM-DD`.
      *
      * If dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.
+     *
+     * We provide some options in `dateRangeOptionPresets` for convenience.
      */
     @property({ type: Array })
     dateRangeOptions: { label: string; dateFrom?: string; dateTo?: string }[] = [];
@@ -66,33 +69,17 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     earliestDate: string = '1900-01-01';
 
     /**
-     * The initial value to use for this date range selector.
-     * Must be a valid label from the `dateRangeOptions`.
-     *
-     * If the value is not set, the component will default to the range `earliestDate` until today.
-     *
-     * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
+     * The value to use for this date range selector.
+     * - If it is a string, then it must be a valid label from the `dateRangeOptions`.
+     * - If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.
+     *   Keys that are not set will default to the `earliestDate` or the current date respectively.
+     * - If the attribute is not set, the component will default to the range `earliestDate` until today.
      *
-     * We provide some options in `dateRangeOptionPresets` for convenience.
-     */
-    @property()
-    initialValue: string | undefined = undefined;
-
-    /**
-     * A date string in the format `YYYY-MM-DD`.
-     * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
-     * If `initialDateTo` is set, but this is unset, it will default to `earliestDate`.
-     */
-    @property()
-    initialDateFrom: string | undefined = undefined;
-
-    /**
-     * A date string in the format `YYYY-MM-DD`.
-     * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
-     * If `initialDateFrom` is set, but this is unset, it will default to the current date.
+     * The `detail` of the `gs-date-range-option-changed` event can be used for this attribute,
+     * if you want to control this component in your JS application.
      */
-    @property()
-    initialDateTo: string | undefined = undefined;
+    @property({ type: Object })
+    value: string | { dateFrom?: string; dateTo?: string } | undefined = undefined;
 
     /**
      * The width of the component.
@@ -113,9 +100,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
             <DateRangeSelector
                 dateRangeOptions={this.dateRangeOptions}
                 earliestDate={this.earliestDate}
-                initialValue={this.initialValue}
-                initialDateFrom={this.initialDateFrom}
-                initialDateTo={this.initialDateTo}
+                value={this.value}
                 lapisDateField={this.lapisDateField}
                 width={this.width}
             />
@@ -150,15 +135,7 @@ type CustomSelectOptionsMatches = Expect<
 type EarliestDateMatches = Expect<
     Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps['earliestDate']>
 >;
-type InitialValueMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, DateRangeSelectorProps['initialValue']>
->;
-type InitialDateFromMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialDateFrom, DateRangeSelectorProps['initialDateFrom']>
->;
-type InitialDateToMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialDateTo, DateRangeSelectorProps['initialDateTo']>
->;
+type ValueMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.value, DateRangeSelectorProps['value']>>;
 type WidthMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps['width']>>;
 type DateColumnMatches = Expect<
     Equals<typeof DateRangeSelectorComponent.prototype.lapisDateField, DateRangeSelectorProps['lapisDateField']>

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -181,7 +181,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
         });
 

package/src/web-components/input/gs-location-filter.stories.ts

@@ -188,7 +188,7 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
         const inputField = () => canvas.getByRole('combobox');
 
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-location-changed', listenerMock);
         });
 

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -72,7 +72,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
         });
 
@@ -154,18 +154,18 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const placeholderText = inputField().getAttribute('placeholder');
 
-            expect(placeholderText).toEqual(
+            await expect(placeholderText).toEqual(
                 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)',
             );
         });
 
-        await waitFor(() => {
-            expect(canvas.getByText('seg1:123T')).toBeVisible();
-            expect(canvas.getByText('gene2:56')).toBeVisible();
-            return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('seg1:123T')).toBeVisible();
+            await expect(canvas.getByText('gene2:56')).toBeVisible();
+            await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
         });
     },
 };

package/src/web-components/input/gs-text-input.stories.ts

@@ -113,7 +113,7 @@ export const FiresEvents: StoryObj<Required<TextInputProps>> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter host name');
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-text-input-changed', listenerMock);
         });
 
@@ -140,8 +140,8 @@ export const FiresEvents: StoryObj<Required<TextInputProps>> = {
         });
 
         await step('Verify event is fired with correct detail', async () => {
-            await waitFor(() => {
-                expect(listenerMock).toHaveBeenCalledWith(
+            await waitFor(async () => {
+                await expect(listenerMock).toHaveBeenCalledWith(
                     expect.objectContaining({
                         detail: {
                             host: 'Homo sapiens',