@genspectrum/dashboard-components 0.13.7 → 0.14.1

package/dist/util.d.ts

@@ -136,10 +136,20 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
     dateTo?: string | undefined;
 }>;
 
-export declare type DateRangeSelectOption = string | {
-    dateFrom: string;
-    dateTo: string;
-};
+export declare type DateRangeSelectOption = Required<DateRangeValue>;
+
+declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
+
+declare const dateRangeValueSchema: 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, {
+    dateFrom?: string | undefined;
+    dateTo?: string | undefined;
+}, {
+    dateFrom?: string | undefined;
+    dateTo?: string | undefined;
+}>]>;
 
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
 
@@ -838,7 +848,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -846,7 +860,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -854,7 +868,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -862,7 +879,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -870,7 +887,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -878,7 +898,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -886,7 +906,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -894,7 +917,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -902,7 +925,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -910,7 +936,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +944,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -926,7 +952,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -942,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -950,7 +976,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -958,7 +984,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +992,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -974,7 +1000,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -982,7 +1008,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -990,7 +1016,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -998,11 +1024,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1010,7 +1032,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,10 +1040,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1029,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1056,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1048,7 +1064,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,10 +1072,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1067,7 +1080,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1075,10 +1088,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1086,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.13.7",
+    "version": "0.14.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/LapisUrlContext.ts

@@ -1,3 +1,16 @@
 import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 
-export const LapisUrlContext = createContext('');
+const LapisUrlContext = createContext('');
+
+export const LapisUrlContextProvider = LapisUrlContext.Provider;
+
+export const useLapisUrl = () => {
+    const lapisUrl = useContext(LapisUrlContext);
+
+    if (lapisUrl.endsWith('/')) {
+        return lapisUrl.slice(0, -1);
+    }
+
+    return lapisUrl;
+};

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -4,7 +4,7 @@ import { expect, waitFor, within } from '@storybook/test';
 import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<AggregateProps> = {
@@ -44,9 +44,9 @@ export default meta;
 
 export const Default: StoryObj<AggregateProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <Aggregate {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         fields: ['division', 'host'],

package/src/preact/aggregatedData/aggregate.tsx

@@ -1,11 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
+import { useLapisUrl } from '../LapisUrlContext';
 import { AggregateTable } from './aggregate-table';
 import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
 import { lapisFilterSchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -48,7 +47,7 @@ export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) =>
 
 export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps) => {
     const { fields, lapisFilter, initialSortField, initialSortDirection } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryAggregateData(lapisFilter, fields, lapis);
@@ -129,7 +128,7 @@ type AggregateInfoProps = {
 };
 
 const AggregateInfo: FunctionComponent<AggregateInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Aggregated data</InfoHeadline1>

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

@@ -18,8 +18,8 @@ const dateRangeOptions = [
 ];
 
 describe('computeInitialValues', () => {
-    it('should compute for initial value if initial "from" and "to" are unset', () => {
-        const result = computeInitialValues(fromToOption, undefined, undefined, earliestDate, dateRangeOptions);
+    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));
@@ -27,7 +27,7 @@ describe('computeInitialValues', () => {
     });
 
     it('should use today as "dateTo" if it is unset in selected option', () => {
-        const result = computeInitialValues(fromOption, undefined, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(fromOption, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toEqual(fromOption);
         expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
@@ -35,7 +35,7 @@ describe('computeInitialValues', () => {
     });
 
     it('should use earliest date as "dateFrom" if it is unset in selected option', () => {
-        const result = computeInitialValues(toOption, undefined, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(toOption, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toEqual(toOption);
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
@@ -43,7 +43,7 @@ describe('computeInitialValues', () => {
     });
 
     it('should fall back to full range if initial value is not set', () => {
-        const result = computeInitialValues(undefined, undefined, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
@@ -51,39 +51,46 @@ describe('computeInitialValues', () => {
     });
 
     it('should throw when initial value is unknown', () => {
-        expect(() =>
-            computeInitialValues('not a known value', undefined, undefined, earliestDate, dateRangeOptions),
-        ).toThrowError(/Invalid initialValue "not a known value", It must be one of/);
+        expect(() => computeInitialValues('not a known value', earliestDate, 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', undefined, undefined, earliestDate, [])).toThrowError(
+        expect(() => computeInitialValues('not a known value', earliestDate, [])).toThrowError(
             /There are no selectable options/,
         );
     });
 
-    it('should overwrite initial value if initial "from" is set', () => {
+    it('should select from date until today if only dateFrom is given', () => {
         const initialDateFrom = '2020-01-01';
-        const result = computeInitialValues(fromOption, initialDateFrom, undefined, earliestDate, dateRangeOptions);
+        const result = computeInitialValues({ dateFrom: initialDateFrom }, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
-    it('should overwrite initial value if initial "to" is set', () => {
+    it('should select from earliest date until date if only dateTo is given', () => {
         const initialDateTo = '2020-01-01';
-        const result = computeInitialValues(fromOption, undefined, initialDateTo, earliestDate, dateRangeOptions);
+        const result = computeInitialValues({ dateTo: initialDateTo }, earliestDate, dateRangeOptions);
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
     });
 
-    it('should overwrite initial value if initial "to" and "from" are set', () => {
+    it('should select date range is dateFrom and dateTo are given', () => {
         const initialDateFrom = '2020-01-01';
         const initialDateTo = '2022-01-01';
-        const result = computeInitialValues(fromOption, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(
+            {
+                dateFrom: initialDateFrom,
+                dateTo: initialDateTo,
+            },
+            earliestDate,
+            dateRangeOptions,
+        );
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
@@ -93,7 +100,14 @@ describe('computeInitialValues', () => {
     it('should set initial "to" to "from" if "from" is after "to"', () => {
         const initialDateFrom = '2020-01-01';
         const initialDateTo = '1900-01-01';
-        const result = computeInitialValues(undefined, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
+        const result = computeInitialValues(
+            {
+                dateFrom: initialDateFrom,
+                dateTo: initialDateTo,
+            },
+            earliestDate,
+            dateRangeOptions,
+        );
 
         expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
@@ -101,14 +115,14 @@ describe('computeInitialValues', () => {
     });
 
     it('should throw if initial "from" is not a valid date', () => {
-        expect(() => computeInitialValues(undefined, 'not a date', undefined, earliestDate, [])).toThrowError(
-            'Invalid initialDateFrom',
+        expect(() => computeInitialValues({ dateFrom: 'not a date' }, earliestDate, [])).toThrowError(
+            'Invalid value.dateFrom',
         );
     });
 
     it('should throw if initial "to" is not a valid date', () => {
-        expect(() => computeInitialValues(undefined, undefined, 'not a date', earliestDate, [])).toThrowError(
-            'Invalid initialDateTo',
+        expect(() => computeInitialValues({ dateTo: 'not a date' }, earliestDate, [])).toThrowError(
+            'Invalid value.dateTo',
         );
     });
 

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -1,11 +1,9 @@
-import { type DateRangeOption } from './dateRangeOption';
+import { type DateRangeOption, type DateRangeValue } from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
 export function computeInitialValues(
-    initialValue: string | undefined,
-    initialDateFrom: string | undefined,
-    initialDateTo: string | undefined,
+    value: DateRangeValue | undefined,
     earliestDate: string,
     dateRangeOptions: DateRangeOption[],
 ): {
@@ -13,20 +11,26 @@ export function computeInitialValues(
     initialSelectedDateFrom: Date;
     initialSelectedDateTo: Date;
 } {
-    if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
+    if (value === undefined) {
+        const { dateFrom, dateTo } = getDatesForSelectorValue(undefined, dateRangeOptions, earliestDate);
+        return {
+            initialSelectedDateRange: undefined,
+            initialSelectedDateFrom: dateFrom,
+            initialSelectedDateTo: dateTo,
+        };
+    }
+
+    if (typeof value === 'string') {
         const selectableOptions = getSelectableOptions(dateRangeOptions);
-        const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
+        const initialSelectedDateRange = selectableOptions.find((option) => option.value === value)?.value;
 
-        if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+        if (initialSelectedDateRange === undefined) {
             if (selectableOptions.length === 0) {
-                throw new UserFacingError(
-                    'Invalid initialValue',
-                    'There are no selectable options, but initialValue is set.',
-                );
+                throw new UserFacingError('Invalid value', 'There are no selectable options, but value is set.');
             }
             throw new UserFacingError(
-                'Invalid initialValue',
-                `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
+                'Invalid value',
+                `Invalid value "${value}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
             );
         }
 
@@ -39,21 +43,21 @@ export function computeInitialValues(
         };
     }
 
-    const initialSelectedDateFrom = isUndefinedOrEmpty(initialDateFrom)
-        ? new Date(earliestDate)
-        : new Date(initialDateFrom);
-    let initialSelectedDateTo = isUndefinedOrEmpty(initialDateTo) ? new Date() : new Date(initialDateTo);
+    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 initialDateFrom',
-            `Invalid initialDateFrom "${initialDateFrom}", It must be of the format YYYY-MM-DD`,
+            'Invalid value.dateFrom',
+            `Invalid value.dateFrom "${dateFrom}", It must be of the format YYYY-MM-DD`,
         );
     }
     if (isNaN(initialSelectedDateTo.getTime())) {
         throw new UserFacingError(
-            'Invalid initialDateTo',
-            `Invalid initialDateTo "${initialDateTo}", It must be of the format YYYY-MM-DD`,
+            'Invalid value.dateTo',
+            `Invalid value.dateTo "${dateTo}", It must be of the format YYYY-MM-DD`,
         );
     }