@genspectrum/dashboard-components 0.13.7 → 0.14.1

package/src/preact/mutations/mutations.tsx

@@ -1,5 +1,5 @@
 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 { getInsertionsTableData } from './getInsertionsTableData';
@@ -15,7 +15,7 @@ import {
     type SubstitutionOrDeletionEntry,
     views,
 } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -59,7 +59,7 @@ export const Mutations: FunctionComponent<MutationsProps> = (componentProps) =>
 };
 
 export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const { lapisFilter, baselineLapisFilter, sequenceType } = componentProps;
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -237,7 +237,7 @@ type MutationsInfoProps = {
 };
 
 const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     return (
         <Info>

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

@@ -4,7 +4,7 @@ import { expect, userEvent, waitFor } from '@storybook/test';
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -38,7 +38,7 @@ export default meta;
 
 const Template = {
     render: (args: MutationsOverTimeProps) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationsOverTime
                     lapisFilter={args.lapisFilter}
@@ -50,7 +50,7 @@ const Template = {
                     lapisDateField={args.lapisDateField}
                 />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

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

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
 import z from 'zod';
 
 // @ts-expect-error -- uses subpath imports and vite worker import
@@ -18,7 +18,7 @@ import {
 } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { toTemporalClass } from '../../utils/temporalClass';
-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 { CsvDownloadButton } from '../components/csv-download-button';
@@ -63,7 +63,7 @@ export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (com
 };
 
 export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
     const messageToWorker = useMemo(() => {
@@ -230,7 +230,7 @@ type MutationsOverTimeInfoProps = {
 };
 
 const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Mutations over time</InfoHeadline1>

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -5,7 +5,7 @@ import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneVariantEG.json';
 import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
 import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 export default {
@@ -29,9 +29,9 @@ export default {
 
 const Template: StoryObj<NumberSequencesOverTimeProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <NumberSequencesOverTime {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         views: ['bar', 'line', 'table'],

package/src/preact/numberSequencesOverTime/number-sequences-over-time.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 { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
@@ -11,7 +11,7 @@ import {
     queryNumberOfSequencesOverTime,
 } from '../../query/queryNumberOfSequencesOverTime';
 import { namedLapisFilterSchema, temporalGranularitySchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -59,7 +59,7 @@ export const NumberSequencesOverTime = (componentProps: NumberSequencesOverTimeP
 
 const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimeProps) => {
     const { lapisFilters, lapisDateField, granularity, smoothingWindow } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => queryNumberOfSequencesOverTime(lapis, lapisFilters, lapisDateField, granularity, smoothingWindow),
@@ -169,7 +169,7 @@ type NumberSequencesOverTimeInfoProps = {
 const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
     originalComponentProps,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     return (
         <Info>

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>
     ),
 };
 

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: {

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/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',

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/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.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"
+    valule="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>

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']>