@genspectrum/dashboard-components 0.8.5 → 0.9.1

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/mutationsOverTime/mutations-over-time-grid.tsx

@@ -43,7 +43,6 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
                     gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
                 }}
-                className='@container'
             >
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
@@ -122,9 +121,9 @@ const ProportionCell: FunctionComponent<{
                         backgroundColor: getColorWithingScale(value.proportion, colorScale),
                         color: getTextColorForScale(value.proportion, colorScale),
                     }}
-                    className={`w-full h-full text-center hover:font-bold text-xs group`}
+                    className={`w-full h-full text-center hover:font-bold text-xs group @container`}
                 >
-                    <span className='invisible @[30rem]:visible'>{formatProportion(value.proportion, 0)}</span>
+                    <span className='invisible @[2rem]:visible'>{formatProportion(value.proportion, 0)}</span>
                 </div>
             </Tooltip>
         </div>

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

@@ -1,4 +1,5 @@
 import { type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
 
 import denominator from './__mockData__/denominatorFilter.json';
 import numerator from './__mockData__/numeratorFilter.json';
@@ -99,3 +100,93 @@ export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
         },
     },
 };
+
+export const TooFewDataToComputeGrowthAdvantage: StoryObj<RelativeGrowthAdvantageProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        numeratorFilter: {
+            country: 'Switzerland',
+            pangoLineage: 'B.1.1.7',
+            dateFrom: '2021-02-28',
+            dateTo: '2021-03-01',
+        },
+        denominatorFilter: {
+            country: 'Switzerland',
+            dateFrom: '2021-02-28',
+            dateTo: '2021-03-01',
+        },
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numeratorFilter',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateFrom: '2021-02-28',
+                            dateTo: '2021-03-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: {
+                            data: [
+                                {
+                                    date: '2021-02-28',
+                                    count: 5,
+                                },
+                                {
+                                    date: '2021-03-01',
+                                    count: 5,
+                                },
+                            ],
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominatorFilter',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            dateFrom: '2021-02-28',
+                            dateTo: '2021-03-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: {
+                            data: [
+                                {
+                                    date: '2021-02-28',
+                                    count: 5,
+                                },
+                                {
+                                    date: '2021-03-01',
+                                    count: 7,
+                                },
+                            ],
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            const notEnoughDataMessage = canvas.queryByText(
+                'It was not possible to estimate the relative growth advantage',
+                { exact: false },
+            );
+            return expect(notEnoughDataMessage).toBeVisible();
+        });
+    },
+};

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

@@ -3,6 +3,7 @@ import { useContext, useState } from 'preact/hooks';
 
 import RelativeGrowthAdvantageChart from './relative-growth-advantage-chart';
 import {
+    NotEnoughDataToComputeFitError,
     queryRelativeGrowthAdvantage,
     type RelativeGrowthAdvantageData,
 } from '../../query/queryRelativeGrowthAdvantage';
@@ -62,6 +63,11 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
     }
 
     if (error !== null) {
+        if (error instanceof NotEnoughDataToComputeFitError) {
+            return (
+                <NoDataDisplay message='It was not possible to estimate the relative growth advantage due to insufficient data in the specified filter.' />
+            );
+        }
         throw error;
     }
 

package/src/query/queryRelativeGrowthAdvantage.ts

@@ -1,11 +1,18 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { MapOperator } from '../operator/MapOperator';
 import { RenameFieldOperator } from '../operator/RenameFieldOperator';
+import { UserFacingError } from '../preact/components/error-display';
 import { type LapisFilter } from '../types';
 import { getMinMaxTemporal, TemporalCache, type YearMonthDayClass } from '../utils/temporalClass';
 
 export type RelativeGrowthAdvantageData = Awaited<ReturnType<typeof queryRelativeGrowthAdvantage>>;
 
+export class NotEnoughDataToComputeFitError extends Error {
+    constructor() {
+        super('Not enough data to compute computeFit');
+    }
+}
+
 export async function queryRelativeGrowthAdvantage<LapisDateField extends string>(
     numerator: LapisFilter,
     denominator: LapisFilter,
@@ -54,6 +61,37 @@ export async function queryRelativeGrowthAdvantage<LapisDateField extends string
             requestData.k.push(numeratorCounts.get(d.date) ?? 0);
         }
     });
+
+    const responseData = await computeFit(generationTime, maxDate, minDate, requestData, signal);
+
+    const transformed = {
+        ...responseData,
+        estimatedProportions: {
+            ...responseData.estimatedProportions,
+            t: responseData.estimatedProportions.t.map((t) => minDate.addDays(t)),
+        },
+    };
+    const observedProportions = transformed.estimatedProportions.t.map(
+        (t) => (numeratorCounts.get(t) ?? 0) / (denominatorCounts.get(t) ?? 0),
+    );
+
+    return {
+        ...transformed,
+        observedProportions,
+    };
+}
+
+async function computeFit(
+    generationTime: number,
+    maxDate: YearMonthDayClass,
+    minDate: YearMonthDayClass,
+    requestData: {
+        t: number[];
+        k: number[];
+        n: number[];
+    },
+    signal: AbortSignal | undefined,
+) {
     const requestPayload = {
         config: {
             alpha: 0.95,
@@ -66,15 +104,29 @@ export async function queryRelativeGrowthAdvantage<LapisDateField extends string
         },
         data: requestData,
     };
-    const response = await fetch('https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(requestPayload),
-        signal,
-    });
-    const responseData = (await response.json()) as {
+
+    let response;
+    try {
+        response = await fetch('https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(requestPayload),
+            signal,
+        });
+    } catch {
+        throw new UserFacingError(
+            'Failed to compute relative growth advantage',
+            'Could not connect to the server that computes the relative growth advantage. Please try again later.',
+        );
+    }
+
+    if (!response.ok) {
+        throw new NotEnoughDataToComputeFitError();
+    }
+
+    return (await response.json()) as {
         estimatedAbsoluteNumbers: {
             t: number[];
             variantCases: number[];
@@ -109,21 +161,6 @@ export async function queryRelativeGrowthAdvantage<LapisDateField extends string
             };
         };
     };
-    const transformed = {
-        ...responseData,
-        estimatedProportions: {
-            ...responseData.estimatedProportions,
-            t: responseData.estimatedProportions.t.map((t) => minDate.addDays(t)),
-        },
-    };
-    const observedProportions = transformed.estimatedProportions.t.map(
-        (t) => (numeratorCounts.get(t) ?? 0) / (denominatorCounts.get(t) ?? 0),
-    );
-
-    return {
-        ...transformed,
-        observedProportions,
-    };
 }
 
 function toYearMonthDay(d: { date: string | null; count: number }) {

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