@genspectrum/dashboard-components 0.3.2 → 0.4.0

package/dist/genspectrum-components.d.ts

@@ -139,8 +139,22 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
      * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
      *
      * If the value is invalid, the component will default to `'last6Months'`.
+     *
+     * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
      */
     initialValue: 'custom' | 'allTimes' | 'last2Weeks' | 'lastMonth' | 'last2Months' | 'last3Months' | 'last6Months' | string;
+    /**
+     * 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`.
+     */
+    initialDateFrom: string;
+    /**
+     * 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.
+     */
+    initialDateTo: string;
     /**
      * The width of the component.
      *
@@ -173,13 +187,14 @@ declare type LapisFilter = Record<string, string | number | null | boolean>;
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
  * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
- * and the corresponding values as values, if they are not `undefined`.
+ * and the corresponding values as values, even if they are `undefined`.
  * Example:
  * ```
  * {
  *   continent: "Asia",
  *   country: "China",
- *   city: "Beijing"
+ *   city: "Beijing",
+ *   district: undefined,
  * }
  * ```
  */
@@ -347,12 +362,6 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
      * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
-    /**
-     * The height of the component.
-     *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
-     */
-    height: string;
     render(): JSX_2.Element;
 }
 

package/dist/style.css

@@ -2853,24 +2853,30 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.-right-3 {
+  right: -0.75rem;
+}
+.-top-3 {
+  top: -0.75rem;
+}
 .right-2 {
   right: 0.5rem;
 }
-.right-6 {
-  right: 1.5rem;
-}
 .top-2 {
   top: 0.5rem;
 }
-.top-8 {
-  top: 2rem;
-}
-.z-50 {
-  z-index: 50;
+.z-10 {
+  z-index: 10;
 }
 .z-\[1\] {
   z-index: 1;
 }
+.float-right {
+  float: right;
+}
+.m-1 {
+  margin: 0.25rem;
+}
 .m-2 {
   margin: 0.5rem;
 }
@@ -2886,24 +2892,21 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.me-1 {
-  margin-inline-end: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 .mt-4 {
   margin-top: 1rem;
 }
+.inline-block {
+  display: inline-block;
+}
 .inline {
   display: inline;
 }
@@ -2937,13 +2940,6 @@ input.tab:checked + .tab-content,
 .w-full {
   width: 100%;
 }
-.min-w-0 {
-  min-width: 0px;
-}
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -2962,32 +2958,23 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
 .items-center {
   align-items: center;
 }
-.justify-end {
-  justify-content: flex-end;
-}
 .justify-center {
   justify-content: center;
 }
 .justify-between {
   justify-content: space-between;
 }
-.gap-1 {
-  gap: 0.25rem;
-}
 .gap-2 {
   gap: 0.5rem;
 }
 .overflow-auto {
   overflow: auto;
 }
-.overflow-scroll {
-  overflow: scroll;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 .whitespace-nowrap {
   white-space: nowrap;
@@ -3004,8 +2991,8 @@ input.tab:checked + .tab-content,
 .rounded-box {
   border-radius: var(--rounded-box, 1rem);
 }
-.rounded-lg {
-  border-radius: 0.5rem;
+.rounded-full {
+  border-radius: 9999px;
 }
 .rounded-md {
   border-radius: 0.375rem;
@@ -3032,9 +3019,11 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+.border-solid {
+  border-style: solid;
+}
+.border-none {
+  border-style: none;
 }
 .border-error {
   --tw-border-opacity: 1;
@@ -3052,6 +3041,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -3064,6 +3057,9 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -3071,21 +3067,13 @@ input.tab:checked + .tab-content,
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .py-16 {
   padding-top: 4rem;
@@ -3146,6 +3134,9 @@ input.tab:checked + .tab-content,
 .underline {
   text-decoration-line: underline;
 }
+.opacity-90 {
+  opacity: 0.9;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3171,10 +3162,18 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.focus-within\:border-gray-400:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hover\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -3186,6 +3185,15 @@ input.tab:checked + .tab-content,
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.3.2",
+    "version": "0.4.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -56,6 +56,7 @@
         "lit"
     ],
     "dependencies": {
+        "@floating-ui/dom": "^1.6.5",
         "@lit/context": "^1.1.1",
         "@lit/reactive-element": "^2.0.4",
         "@lit/task": "^1.0.0",

package/src/preact/aggregatedData/aggregate.tsx

@@ -103,7 +103,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info>Info for aggregate</Info>
+            <Info height={'100px'}>Info for aggregate</Info>
         </div>
     );
 };

package/src/preact/components/info.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, fireEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import Info, { type InfoProps } from './info';
 
@@ -8,7 +8,7 @@ const meta: Meta<InfoProps> = {
     component: Info,
     parameters: { fetchMock: {} },
     args: {
-        size: { width: '400px', height: '100px' },
+        height: '100px',
     },
 };
 
@@ -28,16 +28,16 @@ export const ShowsInfoOnClick: StoryObj<InfoProps> = {
     ...InfoStory,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const loading = canvas.getByRole('button', { name: '?' });
+        const openInfo = canvas.getByRole('button', { name: '?' });
 
-        await waitFor(() => expect(loading).toBeInTheDocument());
+        await waitFor(() => expect(openInfo).toBeInTheDocument());
 
-        await fireEvent.click(loading);
+        await userEvent.click(openInfo);
 
-        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeVisible());
 
-        await fireEvent.click(canvas.getByRole('button', { name: 'Close' }));
+        await userEvent.click(document.body);
 
-        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeInTheDocument());
+        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeVisible());
     },
 };

package/src/preact/components/info.tsx

@@ -1,42 +1,135 @@
+import { autoUpdate, computePosition, offset, shift, size } from '@floating-ui/dom';
 import { type FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { type MutableRefObject } from 'react';
 
 export interface InfoProps {
-    size?: {
-        height?: string;
-        width?: string;
-    };
+    height?: string;
 }
 
-const Info: FunctionComponent<InfoProps> = ({ children, size }) => {
+const Info: FunctionComponent<InfoProps> = ({ children, height }) => {
     const [showHelp, setShowHelp] = useState(false);
+    const referenceRef = useRef<HTMLButtonElement>(null);
+    const floatingRef = useRef<HTMLDivElement>(null);
+
+    useFloatingUi(referenceRef, floatingRef, height, showHelp);
 
     const toggleHelp = () => {
         setShowHelp(!showHelp);
     };
 
+    useCloseOnEsc(setShowHelp);
+    useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
+
     return (
-        <div className='relative'>
-            <button className='btn btn-xs' onClick={toggleHelp}>
+        <div className='relative z-10'>
+            <button type='button' className='btn btn-xs' onClick={toggleHelp} ref={referenceRef}>
                 ?
             </button>
-            {showHelp && (
-                <div
-                    className='absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50'
-                    style={size}
+            <div
+                ref={floatingRef}
+                className='bg-white p-2 border border-gray-100 shadow-lg rounded overflow-y-auto opacity-90'
+                style={{ position: 'absolute', zIndex: 10, display: showHelp ? '' : 'none' }}
+            >
+                <div className={'flex flex-col'}>{children}</div>
+                <button
+                    onClick={() => setShowHelp(false)}
+                    className={'float-right underline text-sm hover:text-blue-700 mr-2'}
                 >
-                    <div className='flex flex-col'>{children}</div>
-                    <div className='flex justify-end'>
-                        <button className='text-sm underline mt-2' onClick={toggleHelp}>
-                            Close
-                        </button>
-                    </div>
-                </div>
-            )}
+                    Close
+                </button>
+            </div>
         </div>
     );
 };
 
+function useFloatingUi(
+    referenceRef: MutableRefObject<HTMLButtonElement | null>,
+    floatingRef: MutableRefObject<HTMLDivElement | null>,
+    height: string | undefined,
+    showHelp: boolean,
+) {
+    const cleanupRef = useRef<Function | null>(null);
+
+    useEffect(() => {
+        if (!referenceRef.current || !floatingRef.current) {
+            return;
+        }
+
+        const { current: reference } = referenceRef;
+        const { current: floating } = floatingRef;
+
+        const update = () => {
+            computePosition(reference, floating, {
+                middleware: [
+                    offset(10),
+                    shift(),
+                    size({
+                        apply({}) {
+                            floating.style.width = '100vw';
+                            floating.style.height = height ? height : '50vh';
+                        },
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                floating.style.left = `${x}px`;
+                floating.style.top = `${y}px`;
+            });
+        };
+
+        update();
+        cleanupRef.current = autoUpdate(reference, floating, update);
+
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+            }
+        };
+    }, [showHelp, height, referenceRef, floatingRef]);
+}
+
+function useCloseOnClickOutside(
+    floatingRef: MutableRefObject<HTMLDivElement | null>,
+    referenceRef: MutableRefObject<HTMLButtonElement | null>,
+    setShowHelp: (value: ((prevState: boolean) => boolean) | boolean) => void,
+) {
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const path = event.composedPath();
+            if (
+                floatingRef.current &&
+                !path.includes(floatingRef.current) &&
+                referenceRef.current &&
+                !path.includes(referenceRef.current)
+            ) {
+                setShowHelp(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [floatingRef, referenceRef, setShowHelp]);
+}
+
+function useCloseOnEsc(setShowHelp: (value: ((prevState: boolean) => boolean) | boolean) => void) {
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setShowHelp(false);
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [setShowHelp]);
+}
+
 export const InfoHeadline1: FunctionComponent = ({ children }) => {
     return <h1 className='text-lg font-bold'>{children}</h1>;
 };

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

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+
+import { computeInitialValues } from './computeInitialValues';
+import { PRESET_VALUE_CUSTOM, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS } from './selectableOptions';
+
+const today = new Date();
+const earliestDate = '1900-01-01';
+
+describe('computeInitialValues', () => {
+    it('should compute for initial value if initial "from" and "to" are unset', () => {
+        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, undefined, earliestDate, []);
+
+        const expectedFrom = new Date();
+        expectedFrom.setMonth(today.getMonth() - 3);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_3_MONTHS);
+        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+        expectDateMatches(result.initialSelectedDateTo, today);
+    });
+
+    it('should fall back to default when initial value is unknown', () => {
+        const result = computeInitialValues('not a known value', undefined, undefined, earliestDate, []);
+
+        const expectedFrom = new Date();
+        expectedFrom.setMonth(today.getMonth() - 6);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_6_MONTHS);
+        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+        expectDateMatches(result.initialSelectedDateTo, today);
+    });
+
+    it('should overwrite initial value if initial "from" is set', () => {
+        const initialDateFrom = '2020-01-01';
+        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, initialDateFrom, undefined, earliestDate, []);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result.initialSelectedDateTo, today);
+    });
+
+    it('should overwrite initial value if initial "to" is set', () => {
+        const initialDateTo = '2020-01-01';
+        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, initialDateTo, earliestDate, []);
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
+    });
+
+    it('should overwrite initial value if initial "to" and "from" are set', () => {
+        const initialDateFrom = '2020-01-01';
+        const initialDateTo = '2022-01-01';
+        const result = computeInitialValues(
+            PRESET_VALUE_LAST_3_MONTHS,
+            initialDateFrom,
+            initialDateTo,
+            earliestDate,
+            [],
+        );
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
+    });
+
+    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(
+            PRESET_VALUE_LAST_3_MONTHS,
+            initialDateFrom,
+            initialDateTo,
+            earliestDate,
+            [],
+        );
+
+        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
+        expectDateMatches(result.initialSelectedDateTo, new Date(initialDateFrom));
+    });
+
+    it('should throw if initial "from" is not a valid date', () => {
+        expect(() =>
+            computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, 'not a date', undefined, earliestDate, []),
+        ).toThrowError('Invalid initialDateFrom');
+    });
+
+    it('should throw if initial "to" is not a valid date', () => {
+        expect(() =>
+            computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, 'not a date', earliestDate, []),
+        ).toThrowError('Invalid initialDateTo');
+    });
+
+    function expectDateMatches(actual: Date, expected: Date) {
+        expect(actual.getFullYear()).toEqual(expected.getFullYear());
+        expect(actual.getMonth()).toEqual(expected.getMonth());
+        expect(actual.getDate()).toEqual(expected.getDate());
+    }
+});

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -0,0 +1,73 @@
+import {
+    type CustomSelectOption,
+    getDatesForSelectorValue,
+    getSelectableOptions,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_6_MONTHS,
+    type PresetOptionValues,
+} from './selectableOptions';
+import { UserFacingError } from '../components/error-display';
+
+export function computeInitialValues<CustomLabel extends string>(
+    initialValue: PresetOptionValues | CustomLabel | undefined,
+    initialDateFrom: string | undefined,
+    initialDateTo: string | undefined,
+    earliestDate: string,
+    customSelectOptions: CustomSelectOption<CustomLabel>[],
+): {
+    initialSelectedDateRange: CustomLabel | PresetOptionValues;
+    initialSelectedDateFrom: Date;
+    initialSelectedDateTo: Date;
+} {
+    if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
+        const selectableOptions = getSelectableOptions(customSelectOptions);
+        const initialSelectedDateRange =
+            initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
+                ? initialValue
+                : PRESET_VALUE_LAST_6_MONTHS;
+
+        const { dateFrom, dateTo } = getDatesForSelectorValue(
+            initialSelectedDateRange,
+            customSelectOptions,
+            earliestDate,
+        );
+
+        return {
+            initialSelectedDateRange,
+            initialSelectedDateFrom: dateFrom,
+            initialSelectedDateTo: dateTo,
+        };
+    }
+
+    const initialSelectedDateFrom = isUndefinedOrEmpty(initialDateFrom)
+        ? new Date(earliestDate)
+        : new Date(initialDateFrom);
+    let initialSelectedDateTo = isUndefinedOrEmpty(initialDateTo) ? new Date() : new Date(initialDateTo);
+
+    if (isNaN(initialSelectedDateFrom.getTime())) {
+        throw new UserFacingError(
+            'Invalid initialDateFrom',
+            `Invalid initialDateFrom "${initialDateFrom}", 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`,
+        );
+    }
+
+    if (initialSelectedDateFrom > initialSelectedDateTo) {
+        initialSelectedDateTo = initialSelectedDateFrom;
+    }
+
+    return {
+        initialSelectedDateRange: PRESET_VALUE_CUSTOM,
+        initialSelectedDateFrom,
+        initialSelectedDateTo,
+    };
+}
+
+function isUndefinedOrEmpty(value: string | undefined): value is undefined | '' {
+    return value === undefined || value === '';
+}