@genspectrum/dashboard-components 0.9.0 → 0.9.1

package/dist/style.css

@@ -3416,9 +3416,9 @@ input.tab:checked + .tab-content,
 .peer:hover ~ .peer-hover\:visible {
   visibility: visible;
 }
-@container (min-width: 30rem) {
+@container (min-width: 2rem) {
 
-  .\@\[30rem\]\:visible {
+  .\@\[2rem\]\:visible {
     visibility: visible;
   }
 }

package/package.json

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

package/src/preact/components/no-data-display.tsx

@@ -1,9 +1,9 @@
 import { type FunctionComponent } from 'preact';
 
-export const NoDataDisplay: FunctionComponent = () => {
+export const NoDataDisplay: FunctionComponent<{ message?: string }> = ({ message = 'No data available.' }) => {
     return (
         <div className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center'>
-            <div>No data available.</div>
+            <div>{message}</div>
         </div>
     );
 };

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 }) {