@genspectrum/dashboard-components 0.8.0 → 0.8.2

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor } from '@storybook/test';
+import { expect, userEvent, waitFor } from '@storybook/test';
 
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
@@ -85,3 +85,73 @@ export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps>
         });
     },
 };
+
+export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimeProps> = {
+    ...Template,
+    args: {
+        lapisFilter: { dateFrom: '1800-01-01', dateTo: '1800-01-02' },
+        sequenceType: 'nucleotide',
+        views: ['grid'],
+        width: '100%',
+        height: '700px',
+        granularity: 'year',
+        lapisDateField: 'date',
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
+            timeout: 10000,
+        });
+    },
+};
+
+export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOverTimeProps> = {
+    ...Template,
+    args: {
+        lapisFilter: { dateFrom: '2345-01-01', dateTo: '2020-01-02' },
+        sequenceType: 'nucleotide',
+        views: ['grid'],
+        width: '100%',
+        height: '700px',
+        granularity: 'year',
+        lapisDateField: 'date',
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
+            timeout: 10000,
+        });
+    },
+};
+
+export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps> = {
+    ...Template,
+    args: {
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+        sequenceType: 'nucleotide',
+        views: ['grid'],
+        width: '100%',
+        height: '700px',
+        granularity: 'month',
+        lapisDateField: 'date',
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('Grid')).toBeVisible(), { timeout: 10000 });
+
+        const button = canvas.getByRole('button', { name: 'Mean proportion 5.0% - 90.0%' });
+        await userEvent.click(button);
+
+        const minInput = canvas.getAllByLabelText('%')[0];
+        await userEvent.clear(minInput);
+        await userEvent.type(minInput, '40');
+
+        const maxInput = canvas.getAllByLabelText('%')[1];
+        await userEvent.clear(maxInput);
+        await userEvent.type(maxInput, '41');
+
+        await waitFor(
+            () => expect(canvas.getByText('No data available for your filters.', { exact: false })).toBeVisible(),
+            {
+                timeout: 10000,
+            },
+        );
+    },
+};

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -21,7 +21,6 @@ import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -85,10 +84,10 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
     }
 
     if (error !== undefined) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
-    if (data === null || data === undefined) {
+    if (data === null || data === undefined || data.overallMutationData.length === 0) {
         return <NoDataDisplay />;
     }
 
@@ -232,8 +231,14 @@ const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({
     const lapis = useContext(LapisUrlContext);
     return (
         <Info>
-            <InfoHeadline1>Info for mutations over time</InfoHeadline1>
-            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/441</InfoParagraph>
+            <InfoHeadline1>Mutations over time</InfoHeadline1>
+            <InfoParagraph>
+                This presents the proportions of {originalComponentProps.sequenceType} mutations per{' '}
+                {originalComponentProps.granularity}. In the toolbar, you can configure which mutations are displayed by
+                selecting the mutation type (substitution or deletion), choosing specific segments/genes (if the
+                organism has multiple segments/genes), and applying a filter based on the proportion of the mutation's
+                occurrence over the entire time range.
+            </InfoParagraph>
             <InfoComponentCode componentName='mutations-over-time' params={originalComponentProps} lapisUrl={lapis} />
         </Info>
     );

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -13,7 +13,6 @@ import type { NamedLapisFilter, TemporalGranularity } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -64,7 +63,7 @@ const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimePro
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

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

@@ -12,7 +12,6 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -77,7 +76,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null || data.every((variant) => variant.content.length === 0)) {

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

@@ -9,7 +9,6 @@ import {
 import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -63,7 +62,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/preact/textInput/text-input.tsx

@@ -4,7 +4,6 @@ import { useContext, useRef } from 'preact/hooks';
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ErrorDisplay } from '../components/error-display';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -24,7 +23,7 @@ export const TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerPr
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} layout='horizontal'>
             <ResizeContainer size={size}>
                 <TextInputInner {...innerProps} />
             </ResizeContainer>
@@ -44,7 +43,7 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/query/queryMutationsOverTime.spec.ts

@@ -719,6 +719,36 @@ describe('queryMutationsOverTime', () => {
         expect(dates[1].dateString).toBe('2023-02');
     });
 
+    it('should return empty data when there are no dates in filter', async () => {
+        const lapisFilter = { field1: 'value1', field2: 'value2' };
+        const dateField = 'dateField';
+
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [],
+                },
+            },
+        ]);
+
+        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+            lapisFilter,
+            sequenceType: 'nucleotide',
+            lapis: DUMMY_LAPIS_URL,
+            lapisDateField: dateField,
+            granularity: 'month',
+        });
+
+        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([]);
+
+        const sequences = mutationOverTimeData.getFirstAxisKeys();
+        expect(sequences.length).toBe(0);
+
+        const dates = mutationOverTimeData.getSecondAxisKeys();
+        expect(dates.length).toBe(0);
+    });
+
     function getSomeTestMutation(proportion: number, count: number) {
         return {
             mutation: 'sequenceName:A123T',

package/src/query/queryMutationsOverTime.ts

@@ -66,6 +66,13 @@ export async function queryOverallMutationData({
     signal?: AbortSignal;
 }) {
     const allDates = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
+
+    if (allDates.length === 0) {
+        return {
+            content: [],
+        };
+    }
+
     const filter = {
         ...lapisFilter,
         [`${lapisDateField}From`]: allDates[0].firstDay.toString(),

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

@@ -18,8 +18,8 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
- * The grid limits the number of rows columns for browser performance reasons.
- * Too much data might make the browser unresponsive.
+ * The grid limits the number of rows and columns for browser performance reasons as
+ * too much data might make the browser unresponsive.
  *
  * The number of columns is limited to 200.
  * If this number are exceeded, an error message will be shown.