@genspectrum/dashboard-components 0.8.4 → 0.9.0

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
-import { type DateRangeOption } from './dateRangeOption';
+import { type DateRangeOption, DateRangeOptionChangedEvent, type DateRangeSelectOption } from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
@@ -115,7 +115,8 @@ export const DateRangeSelectorInner = ({
             dateTo: dateRange.dateTo,
         });
 
-        submit();
+        fireFilterChangedEvent();
+        fireOptionChangedEvent(value);
     };
 
     const onChangeDateFrom = () => {
@@ -123,11 +124,18 @@ export const DateRangeSelectorInner = ({
             return;
         }
 
-        selectedDates.dateFrom = dateFromPicker?.selectedDates[0] || new Date();
-        dateToPicker?.set('minDate', dateFromPicker?.selectedDates[0]);
+        const dateTo = dateToPicker?.selectedDates[0];
+        const dateFrom = dateFromPicker?.selectedDates[0];
+
+        selectedDates.dateFrom = dateFrom || new Date();
+        dateToPicker?.set('minDate', dateFrom);
         setSelectedDateRange(customOption);
 
-        submit();
+        fireFilterChangedEvent();
+        fireOptionChangedEvent({
+            dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
+            dateTo: toYYYYMMDD(dateTo || new Date())!,
+        });
     };
 
     const onChangeDateTo = () => {
@@ -135,24 +143,35 @@ export const DateRangeSelectorInner = ({
             return;
         }
 
-        selectedDates.dateTo = dateToPicker?.selectedDates[0] || new Date();
-        dateFromPicker?.set('maxDate', dateToPicker?.selectedDates[0]);
+        const dateTo = dateToPicker?.selectedDates[0];
+        const dateFrom = dateFromPicker?.selectedDates[0];
+
+        selectedDates.dateTo = dateTo || new Date();
+        dateFromPicker?.set('maxDate', dateTo);
         setSelectedDateRange(customOption);
 
-        submit();
+        fireFilterChangedEvent();
+        fireOptionChangedEvent({
+            dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
+            dateTo: toYYYYMMDD(dateTo || new Date())!,
+        });
+    };
+
+    const fireOptionChangedEvent = (option: DateRangeSelectOption) => {
+        divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(option));
     };
 
-    const submit = () => {
-        const dateFrom = toYYYYMMDD(dateFromPicker?.selectedDates[0]);
-        const dateTo = toYYYYMMDD(dateToPicker?.selectedDates[0]);
+    const fireFilterChangedEvent = () => {
+        const dateFrom = dateFromPicker?.selectedDates[0];
+        const dateTo = dateToPicker?.selectedDates[0];
 
         const detail = {
-            ...(dateFrom !== undefined && { [`${dateColumn}From`]: dateFrom }),
-            ...(dateTo !== undefined && { [`${dateColumn}To`]: dateTo }),
+            ...(dateFrom !== undefined && { [`${dateColumn}From`]: toYYYYMMDD(dateFrom) }),
+            ...(dateTo !== undefined && { [`${dateColumn}To`]: toYYYYMMDD(dateTo) }),
         };
 
         divRef.current?.dispatchEvent(
-            new CustomEvent('gs-date-range-changed', {
+            new CustomEvent('gs-date-range-filter-changed', {
                 detail,
                 bubbles: true,
                 composed: true,

package/src/preact/dateRangeSelector/dateConversion.ts

@@ -1,8 +1,4 @@
-export const toYYYYMMDD = (date?: Date) => {
-    if (!date) {
-        return undefined;
-    }
-
+export const toYYYYMMDD = (date: Date) => {
     const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
     return date.toLocaleDateString('en-CA', options);
 };

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -18,6 +18,17 @@ export type DateRangeOption = {
     dateTo?: string;
 };
 
+export type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };
+export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
+    constructor(detail: DateRangeSelectOption) {
+        super('gs-date-range-option-changed', {
+            detail,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}
+
 const today = new Date();
 
 const twoWeeksAgo = new Date();
@@ -35,6 +46,9 @@ last3Months.setMonth(today.getMonth() - 3);
 const last6Months = new Date(today);
 last6Months.setMonth(today.getMonth() - 6);
 
+const lastYear = new Date(today);
+lastYear.setFullYear(today.getFullYear() - 1);
+
 /**
  * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
  */
@@ -59,6 +73,10 @@ export const dateRangeOptionPresets = {
         label: 'Last 6 months',
         dateFrom: toYYYYMMDD(last6Months),
     },
+    lastYear: {
+        label: 'Last year',
+        dateFrom: toYYYYMMDD(lastYear),
+    },
     allTimes: {
         label: 'All times',
     },

package/src/preact/webWorkers/useWebWorker.ts

@@ -1,31 +1,53 @@
 import { useEffect, useState } from 'preact/hooks';
 
+import { UserFacingError } from '../components/error-display';
+
+export type LoadingWorkerStatus = {
+    status: 'loading';
+};
+export type SuccessWorkerStatus<Response> = {
+    status: 'success';
+    data: Response;
+};
+export type ErrorWorkerStatus =
+    | {
+          status: 'error';
+          userFacing: false;
+          error: Error;
+      }
+    | {
+          status: 'error';
+          userFacing: true;
+          headline: string;
+          error: Error;
+      };
+export type WorkerStatus<Response> = LoadingWorkerStatus | SuccessWorkerStatus<Response> | ErrorWorkerStatus;
+
 export function useWebWorker<Request, Response>(messageToWorker: Request, worker: Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        worker.onmessage = (
-            event: MessageEvent<{
-                status: 'loading' | 'success' | 'error';
-                data?: Response;
-                error?: Error;
-            }>,
-        ) => {
-            const { status, data, error } = event.data;
+        worker.onmessage = (event: MessageEvent<WorkerStatus<Response>>) => {
+            const eventData = event.data;
+            const status = eventData.status;
 
             switch (status) {
                 case 'loading':
                     setIsLoading(true);
                     break;
                 case 'success':
-                    setData(data);
+                    setData(eventData.data);
                     setError(undefined);
                     setIsLoading(false);
                     break;
                 case 'error':
-                    setError(error);
+                    setError(
+                        eventData.userFacing
+                            ? new UserFacingError(eventData.headline, eventData.error.message)
+                            : eventData.error,
+                    );
                     setIsLoading(false);
                     break;
                 default:

package/src/preact/webWorkers/workerFunction.ts

@@ -1,14 +1,30 @@
+import { type ErrorWorkerStatus, type LoadingWorkerStatus, type SuccessWorkerStatus } from './useWebWorker';
+import { UserFacingError } from '../components/error-display';
+
 export async function workerFunction<R>(queryFunction: () => R) {
     try {
-        postMessage({ status: 'loading' });
+        postMessage({ status: 'loading' } satisfies LoadingWorkerStatus);
 
         const workerResponse = await queryFunction();
 
         postMessage({
             status: 'success',
             data: workerResponse,
-        });
+        } satisfies SuccessWorkerStatus<R>);
     } catch (error) {
-        postMessage({ status: 'error', error });
+        postMessage(
+            (error instanceof UserFacingError
+                ? {
+                      status: 'error',
+                      userFacing: true,
+                      headline: error.headline,
+                      error,
+                  }
+                : {
+                      status: 'error',
+                      userFacing: false,
+                      error: error instanceof Error ? error : new Error(`${error}`),
+                  }) satisfies ErrorWorkerStatus,
+        );
     }
 }

package/src/standaloneEntrypoint.ts

@@ -0,0 +1,2 @@
+export * from './utilEntrypoint';
+export * from './componentsEntrypoint';

package/src/utilEntrypoint.ts

@@ -0,0 +1,6 @@
+export {
+    type DateRangeOption,
+    type DateRangeSelectOption,
+    dateRangeOptionPresets,
+    DateRangeOptionChangedEvent,
+} from './preact/dateRangeSelector/dateRangeOption';

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

@@ -1,4 +1,4 @@
-import { expect, waitFor } from '@storybook/test';
+import { expect, fn, userEvent, waitFor, type within } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
@@ -23,12 +23,14 @@ const codeExample = String.raw`
     dateColumn="myDateColumn"
 ></gs-date-range-selector>`;
 
+const customDateRange = { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' };
+
 const meta: Meta<Required<DateRangeSelectorProps>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-date-range-changed', ...previewHandles],
+            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -66,7 +68,7 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
             dateRangeOptionPresets.lastMonth,
             dateRangeOptionPresets.last3Months,
             dateRangeOptionPresets.allTimes,
-            { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
+            customDateRange,
         ],
         earliestDate: '1970-01-01',
         initialValue: dateRangeOptionPresets.lastMonth.label,
@@ -80,7 +82,7 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
 
 export default meta;
 
-export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps>> = {
+export const Default: StoryObj<Required<DateRangeSelectorProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
@@ -95,19 +97,48 @@ export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps>>
                 ></gs-date-range-selector>
             </div>
         </gs-app>`,
+};
+
+export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
+    ...Default,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
-        const dateTo = () => canvas.getByPlaceholderText('Date to');
+
+        const filterChangedListenerMock = fn();
+        const optionChangedListenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            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(canvas.getByRole('combobox')).toHaveValue('Last month');
+            await expect(selectField(canvas)).toHaveValue('Last month');
             await waitFor(() => {
-                expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));
+                expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
             });
         });
 
-        // Due to the limitations of storybook testing which does not fire an event,
-        // when selecting a value from the dropdown we can't test the fired event here.
-        // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts
+        await step('Expect event to be fired when selecting a different value', async () => {
+            await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
+            await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo);
+
+            await expect(filterChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        aDateColumnFrom: customDateRange.dateFrom,
+                        aDateColumnTo: customDateRange.dateTo,
+                    },
+                }),
+            );
+
+            await expect(optionChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: customDateRange.label,
+                }),
+            );
+        });
     },
 };
+
+const dateToPicker = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Date to');
+const selectField = (canvas: ReturnType<typeof within>) => canvas.getByRole('combobox');

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

@@ -2,6 +2,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
+import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeSelector/dateRangeOption';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -18,7 +19,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Setting a value in either of the date pickers will set the select field to "custom",
  * which represents an arbitrary date range.
  *
- * @fires {CustomEvent<{ `${dateColumn}From`: string; `${dateColumn}To`: string; }>} gs-date-range-changed
+ * @fires {CustomEvent<{ `${dateColumn}From`: string; `${dateColumn}To`: string; }>} gs-date-range-filter-changed
  * Fired when:
  * - The select field is changed,
  * - A date is selected in either of the date pickers,
@@ -33,6 +34,18 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * }
  *  ```
  *  will be fired.
+ *
+ *  Use this event, when you want to use the filter directly as a LAPIS filter.
+ *
+ *
+ * @fires {CustomEvent<{ string | {dateFrom: string, dateTo: string}}>} gs-date-range-option-changed
+ * Fired when:
+ * - The select field is changed,
+ * - A date is selected in either of the date pickers,
+ * - A date was typed into either of the date input fields, and the input field loses focus ("on blur").
+ * 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.
  */
 @customElement('gs-date-range-selector')
 export class DateRangeSelectorComponent extends PreactLitAdapter {
@@ -116,7 +129,8 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }