@genspectrum/dashboard-components 0.9.0 → 0.10.0

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.10.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/components/confidence-interval-selector.tsx

@@ -20,7 +20,7 @@ export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSel
 
     const items = [
         { label: 'Confidence interval method', value: 'none', disabled: true },
-        ...confidenceIntervalMethods.concat('none').map((method) => {
+        ...confidenceIntervalMethods.map((method) => {
             switch (method) {
                 case 'wilson':
                     return { label: 'Wilson, 95% CI', value: 'wilson' };

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/mutationFilter/parseMutation.spec.ts

@@ -35,6 +35,16 @@ describe('parseMutation', () => {
                 input: 'ins_gene1:10:ACGT',
                 expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, 'ACGT') },
             },
+            {
+                name: 'should parse amino acid insertions in all upper case',
+                input: 'INS_GENE1:10:ACGT',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('GENE1', 10, 'ACGT') },
+            },
+            {
+                name: 'should parse amino acid insertions in all lower case',
+                input: 'ins_gene1:10:acgt',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, 'acgt') },
+            },
             {
                 name: 'should parse amino acid insertion with LAPIS-style wildcard',
                 input: 'ins_gene1:10:?AC?GT',
@@ -78,6 +88,16 @@ describe('parseMutation', () => {
                 input: 'gene1:A123-',
                 expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'A', 123) },
             },
+            {
+                name: 'should parse amino acid deletion in all upper case',
+                input: 'GENE1:A123-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('GENE1', 'A', 123) },
+            },
+            {
+                name: 'should parse amino acid deletion in all lower case',
+                input: 'gene1:a123-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'a', 123) },
+            },
             {
                 name: 'should parse amino acid deletion without valueAtReference',
                 input: 'gene1:123-',
@@ -123,6 +143,16 @@ describe('parseMutation', () => {
                 input: 'gene1:A123T',
                 expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'A', 'T', 123) },
             },
+            {
+                name: 'should parse amino acid substitution in all upper case',
+                input: 'GENE1:A123T',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('GENE1', 'A', 'T', 123) },
+            },
+            {
+                name: 'should parse amino acid substitution in all lower case',
+                input: 'gene1:a123t',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'a', 't', 123) },
+            },
             {
                 name: 'should return null for substitution with segment not in reference genome',
                 input: 'notInReferenceGenome:A123T',

package/src/preact/mutationFilter/sequenceTypeFromSegment.ts

@@ -9,11 +9,12 @@ export const sequenceTypeFromSegment = (
         return isSingleSegmented(referenceGenome) ? 'nucleotide' : undefined;
     }
 
-    if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name === possibleSegment)) {
+    const segment = possibleSegment.toLowerCase();
+    if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name.toLowerCase() === segment)) {
         return 'nucleotide';
     }
 
-    if (referenceGenome.genes.some((gene) => gene.name === possibleSegment)) {
+    if (referenceGenome.genes.some((gene) => gene.name.toLowerCase() === segment)) {
         return 'amino acid';
     }
     return undefined;

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/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -30,7 +30,7 @@ export default {
             control: { type: 'check' },
         },
         confidenceIntervalMethods: {
-            options: ['wilson'],
+            options: ['none', 'wilson'],
             control: { type: 'check' },
         },
         width: { control: 'text' },
@@ -73,7 +73,7 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',
@@ -147,7 +147,7 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',
@@ -205,7 +205,7 @@ export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useState } from 'preact/hooks';
+import { useContext, useEffect, useState } from 'preact/hooks';
 
 import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
 import PrevalenceOverTimeBarChart from './prevalence-over-time-bar-chart';
@@ -97,6 +97,16 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
         confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none',
     );
+
+    useEffect(() => {
+        setConfidenceIntervalMethod((confidenceIntervalMethod) => {
+            if (!confidenceIntervalMethods.includes(confidenceIntervalMethod)) {
+                return confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none';
+            }
+            return confidenceIntervalMethod;
+        });
+    }, [confidenceIntervalMethods]);
+
     const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
 
     const getTab = (view: View) => {

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/utils/mutations.ts

@@ -14,7 +14,7 @@ export interface MutationClass extends Mutation {
 }
 
 export const substitutionRegex =
-    /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(?<substitutionValue>[A-Za-z.])?$/;
+    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.])?$/i;
 
 export interface Substitution extends Mutation {
     type: 'substitution';
@@ -68,7 +68,7 @@ export class SubstitutionClass implements MutationClass, Substitution {
     }
 }
 
-export const deletionRegex = /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(-)$/;
+export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(-)$/i;
 
 export interface Deletion extends Mutation {
     type: 'deletion';
@@ -119,7 +119,7 @@ export class DeletionClass implements MutationClass, Deletion {
 }
 
 export const insertionRegexp =
-    /^ins_((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Za-z?]|(\.\*))+))$/i;
+    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?]|(\.\*))+))$/i;
 
 export interface Insertion extends Mutation {
     type: 'insertion';

package/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -46,7 +46,7 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
             control: { type: 'check' },
         },
         confidenceIntervalMethods: {
-            options: ['wilson'],
+            options: ['none', 'wilson'],
             control: { type: 'check' },
         },
         width: { control: 'text' },

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -103,11 +103,11 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
 
     /**
      * A list of methods to calculate the confidence interval.
-     * The option `none` is always available and disables confidence intervals.
      * Pass an empty array to disable the confidence interval selector.
+     * The first entry will be selected by default.
      */
     @property({ type: Array })
-    confidenceIntervalMethods: ('wilson' | 'none')[] = ['wilson'];
+    confidenceIntervalMethods: ('wilson' | 'none')[] = ['none', 'wilson'];
 
     /**
      * The width of the component.