@genspectrum/dashboard-components 0.8.1 → 0.8.3

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

@@ -87,7 +87,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
         throw error;
     }
 
-    if (data === null || data === undefined) {
+    if (data === null || data === undefined || data.overallMutationData.length === 0) {
         return <NoDataDisplay />;
     }
 
@@ -231,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/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.