@genspectrum/dashboard-components 0.8.1 → 0.8.2

package/dist/genspectrum-components.d.ts

@@ -547,8 +547,8 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
  *
  * 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.
@@ -1029,10 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1040,7 +1037,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1048,10 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1059,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1067,10 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1078,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1086,10 +1077,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1097,7 +1085,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1105,10 +1093,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1116,7 +1101,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1124,7 +1109,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1132,7 +1117,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1140,7 +1125,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1148,7 +1133,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1156,7 +1141,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1164,7 +1152,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1172,7 +1160,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1180,7 +1171,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1188,7 +1179,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1196,7 +1190,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1204,7 +1198,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1212,7 +1209,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1220,7 +1217,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1228,7 +1228,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/mutationsOverTime/__mockData__/noDataWhenNoMutationsAreInFilter.ts

@@ -0,0 +1,22 @@
+import type { MutationOverTimeMockData } from './mockConversion';
+
+export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            dateFrom: '1800-01-01',
+            dateTo: '1800-01-02',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'year',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+    },
+    response: {
+        overallMutationData: [],
+        mutationOverTimeSerializedAsArray: {
+            keysFirstAxis: [],
+            keysSecondAxis: [],
+            data: [],
+        },
+    },
+};

package/src/preact/mutationsOverTime/__mockData__/noDataWhenThereAreNoDatesInFilter.ts

@@ -0,0 +1,22 @@
+import type { MutationOverTimeMockData } from './mockConversion';
+
+export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            dateFrom: '2345-01-01',
+            dateTo: '2020-01-02',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'year',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+    },
+    response: {
+        overallMutationData: [],
+        mutationOverTimeSerializedAsArray: {
+            keysFirstAxis: [],
+            keysSecondAxis: [],
+            data: [],
+        },
+    },
+};

package/src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts

@@ -5,6 +5,7 @@ import { workerFunction } from '../webWorkers/workerFunction';
 import { byWeek } from './__mockData__/byWeek';
 import { defaultMockData } from './__mockData__/defaultMockData';
 import { getMutationOverTimeMock } from './__mockData__/mockConversion';
+import { noDataWhenNoMutationsAreInFilter } from './__mockData__/noDataWhenNoMutationsAreInFilter';
 import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
 
 const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
@@ -12,6 +13,7 @@ const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWor
     getMutationOverTimeMock(showsMessageWhenTooManyMutations),
     getMutationOverTimeMock(byWeek),
     getMutationOverTimeMock(aminoAcidMutationsByDay),
+    getMutationOverTimeMock(noDataWhenNoMutationsAreInFilter),
 ];
 
 self.onmessage = async function (event: MessageEvent<MutationOverTimeQuery>) {

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

@@ -35,6 +35,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     reduce the number of mutations.
                 </div>
             )}
+            {allMutations.length === 0 && (
+                <div className={'flex justify-center'}>No data available for your filters.</div>
+            )}
             <div
                 ref={gridRef}
                 style={{

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.