@genspectrum/dashboard-components 0.6.13 → 0.6.15

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

@@ -1,8 +1,16 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor } from '@storybook/test';
 
+import aggregated_01 from './__mockData__/aggregated_2024_01.json';
+import aggregated_02 from './__mockData__/aggregated_2024_02.json';
+import aggregated_03 from './__mockData__/aggregated_2024_03.json';
+import aggregated_04 from './__mockData__/aggregated_2024_04.json';
+import aggregated_05 from './__mockData__/aggregated_2024_05.json';
+import aggregated_06 from './__mockData__/aggregated_2024_06.json';
+import aggregated_07 from './__mockData__/aggregated_2024_07.json';
 import aggregated_date from './__mockData__/aggregated_date.json';
 import aggregated_tooManyMutations from './__mockData__/aggregated_tooManyMutations.json';
+import aggregated_tooManyMutations_total from './__mockData__/aggregated_tooManyMutations_total.json';
 import nucleotideMutation_01 from './__mockData__/nucleotideMutations_2024_01.json';
 import nucleotideMutation_02 from './__mockData__/nucleotideMutations_2024_02.json';
 import nucleotideMutation_03 from './__mockData__/nucleotideMutations_2024_03.json';
@@ -91,6 +99,118 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                         body: aggregated_date,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'aggregated_01',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-01-01',
+                            dateTo: '2024-01-31',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_01,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregated_02',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-02-01',
+                            dateTo: '2024-02-29',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_02,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregated_03',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-03-01',
+                            dateTo: '2024-03-31',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_03,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregated_04',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-04-01',
+                            dateTo: '2024-04-30',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_04,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregated_05',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-05-01',
+                            dateTo: '2024-05-31',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_05,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregated_06',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-06-01',
+                            dateTo: '2024-06-30',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_06,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregated_07',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-07-01',
+                            dateTo: '2024-07-31',
+                            fields: [],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_07,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideMutations_overall',
@@ -253,6 +373,21 @@ export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps>
                         body: aggregated_tooManyMutations,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'aggregated_total',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2023-01-01',
+                            dateTo: '2023-12-31',
+                            fields: [],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_tooManyMutations_total,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideMutations',

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

@@ -38,8 +38,8 @@ export interface PrevalenceOverTimeProps {
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
     pageSize: boolean | number;
-    yAxisMaxLinear?: AxisMax;
-    yAxisMaxLogarithmic?: AxisMax;
+    yAxisMaxLinear: AxisMax;
+    yAxisMaxLogarithmic: AxisMax;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
@@ -69,7 +69,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
                 lapis,
                 lapisDateField,
             ),
-        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow],
+        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField],
     );
 
     if (isLoading) {

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

@@ -66,7 +66,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
 
     const { data, error, isLoading } = useQuery(
         () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-        [lapis, numeratorFilter, denominatorFilter, generationTime, views],
+        [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField],
     );
 
     if (isLoading) {

package/src/preact/shared/floating-ui/hooks.ts

@@ -9,7 +9,7 @@ export function useFloatingUi(
     middleware?: Array<Middleware | null | undefined | false>,
     placement?: Placement,
 ) {
-    const cleanupRef = useRef<Function | null>(null);
+    const cleanupRef = useRef<() => void | null>(null);
 
     useEffect(() => {
         if (!referenceRef.current || !floatingRef.current) {

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

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
@@ -12,7 +12,7 @@ const meta: Meta<TextInputProps> = {
     component: TextInput,
     parameters: {
         actions: {
-            handles: ['gs-text-input-changed'],
+            handles: ['gs-text-input-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -32,7 +32,6 @@ const meta: Meta<TextInputProps> = {
             ],
         },
     },
-    decorators: [withActions],
     argTypes: {
         lapisField: {
             control: {

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

@@ -12,8 +12,8 @@ import { useQuery } from '../useQuery';
 
 export interface TextInputInnerProps {
     lapisField: string;
-    placeholderText?: string;
-    initialValue?: string;
+    placeholderText: string;
+    initialValue: string;
 }
 
 export interface TextInputProps extends TextInputInnerProps {

package/src/query/queryMutationsOverTime.spec.ts

@@ -8,15 +8,44 @@ describe('queryMutationsOverTime', () => {
         const lapisFilter = { field1: 'value1', field2: 'value2' };
         const dateField = 'dateField';
 
-        lapisRequestMocks.aggregated(
-            { ...lapisFilter, fields: [dateField] },
+        lapisRequestMocks.multipleAggregated([
             {
-                data: [
-                    { count: 1, [dateField]: '2023-01-01' },
-                    { count: 2, [dateField]: '2023-01-03' },
-                ],
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 2, [dateField]: '2023-01-03' },
+                    ],
+                },
             },
-        );
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-01',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-03',
+                    dateFieldTo: '2023-01-03',
+                    fields: [],
+                },
+                response: { data: [{ count: 13 }] },
+            },
+        ]);
 
         lapisRequestMocks.multipleMutations(
             [
@@ -53,16 +82,16 @@ describe('queryMutationsOverTime', () => {
 
         const result = await queryMutationsOverTimeData(lapisFilter, 'nucleotide', DUMMY_LAPIS_URL, dateField, 'day');
 
-        expect(result.getAsArray({ count: 0, proportion: 0 })).to.deep.equal([
+        expect(result.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
             [
-                { proportion: 0.1, count: 1 },
-                { proportion: 0.2, count: 2 },
-                { proportion: 0.3, count: 3 },
+                { proportion: 0.1, count: 1, totalCount: 11 },
+                { proportion: 0.2, count: 2, totalCount: 12 },
+                { proportion: 0.3, count: 3, totalCount: 13 },
             ],
             [
-                { proportion: 0.4, count: 4 },
-                { proportion: 0, count: 0 },
-                { proportion: 0, count: 0 },
+                { proportion: 0.4, count: 4, totalCount: 11 },
+                { proportion: 0, count: 0, totalCount: 0 },
+                { proportion: 0, count: 0, totalCount: 0 },
             ],
         ]);
 
@@ -80,15 +109,44 @@ describe('queryMutationsOverTime', () => {
         const lapisFilter = { field1: 'value1', field2: 'value2' };
         const dateField = 'dateField';
 
-        lapisRequestMocks.aggregated(
-            { ...lapisFilter, fields: [dateField] },
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 2, [dateField]: '2023-01-03' },
+                    ],
+                },
+            },
             {
-                data: [
-                    { count: 1, [dateField]: '2023-01-01' },
-                    { count: 2, [dateField]: '2023-01-03' },
-                ],
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-01',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
             },
-        );
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-03',
+                    dateFieldTo: '2023-01-03',
+                    fields: [],
+                },
+                response: { data: [{ count: 13 }] },
+            },
+        ]);
 
         lapisRequestMocks.multipleMutations(
             [
@@ -125,16 +183,16 @@ describe('queryMutationsOverTime', () => {
 
         const result = await queryMutationsOverTimeData(lapisFilter, 'nucleotide', DUMMY_LAPIS_URL, dateField, 'day');
 
-        expect(result.getAsArray({ count: 0, proportion: 0 })).to.deep.equal([
+        expect(result.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
             [
-                { proportion: 0.1, count: 1 },
-                { proportion: 0.3, count: 3 },
-                { proportion: 0, count: 0 },
+                { proportion: 0.1, count: 1, totalCount: 11 },
+                { proportion: 0.3, count: 3, totalCount: 13 },
+                { proportion: 0, count: 0, totalCount: 0 },
             ],
             [
-                { proportion: 0.4, count: 4 },
-                { proportion: 0, count: 0 },
-                { proportion: 0, count: 0 },
+                { proportion: 0.4, count: 4, totalCount: 11 },
+                { proportion: 0, count: 0, totalCount: 0 },
+                { proportion: 0, count: 0, totalCount: 0 },
             ],
         ]);
 
@@ -152,15 +210,44 @@ describe('queryMutationsOverTime', () => {
         const lapisFilter = { field1: 'value1', field2: 'value2' };
         const dateField = 'dateField';
 
-        lapisRequestMocks.aggregated(
-            { ...lapisFilter, fields: [dateField] },
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 2, [dateField]: '2023-01-03' },
+                    ],
+                },
+            },
             {
-                data: [
-                    { count: 1, [dateField]: '2023-01-01' },
-                    { count: 2, [dateField]: '2023-01-03' },
-                ],
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-01',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
             },
-        );
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-03',
+                    dateFieldTo: '2023-01-03',
+                    fields: [],
+                },
+                response: { data: [{ count: 13 }] },
+            },
+        ]);
 
         lapisRequestMocks.multipleMutations(
             [
@@ -197,7 +284,7 @@ describe('queryMutationsOverTime', () => {
 
         const result = await queryMutationsOverTimeData(lapisFilter, 'nucleotide', DUMMY_LAPIS_URL, dateField, 'day');
 
-        expect(result.getAsArray({ count: 0, proportion: 0 })).to.deep.equal([]);
+        expect(result.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([]);
         expect(result.getFirstAxisKeys()).to.deep.equal([]);
         expect(result.getSecondAxisKeys()).to.deep.equal([]);
     });
@@ -206,15 +293,35 @@ describe('queryMutationsOverTime', () => {
         const dateField = 'dateField';
         const lapisFilter = { field1: 'value1', field2: 'value2', [`${dateField}From`]: '2023-01-02' };
 
-        lapisRequestMocks.aggregated(
-            { ...lapisFilter, fields: [dateField] },
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 2, [dateField]: '2023-01-03' },
+                    ],
+                },
+            },
             {
-                data: [
-                    { count: 1, [dateField]: '2023-01-01' },
-                    { count: 2, [dateField]: '2023-01-03' },
-                ],
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
             },
-        );
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-03',
+                    dateFieldTo: '2023-01-03',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+        ]);
 
         lapisRequestMocks.multipleMutations(
             [
@@ -242,10 +349,10 @@ describe('queryMutationsOverTime', () => {
 
         const result = await queryMutationsOverTimeData(lapisFilter, 'nucleotide', DUMMY_LAPIS_URL, dateField, 'day');
 
-        expect(result.getAsArray({ count: 0, proportion: 0 })).to.deep.equal([
+        expect(result.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
             [
-                { proportion: 0.2, count: 2 },
-                { proportion: 0.3, count: 3 },
+                { proportion: 0.2, count: 2, totalCount: 11 },
+                { proportion: 0.3, count: 3, totalCount: 12 },
             ],
         ]);
 
@@ -261,15 +368,35 @@ describe('queryMutationsOverTime', () => {
         const dateField = 'dateField';
         const lapisFilter = { field1: 'value1', field2: 'value2', [`${dateField}To`]: '2023-01-02' };
 
-        lapisRequestMocks.aggregated(
-            { ...lapisFilter, fields: [dateField] },
+        lapisRequestMocks.multipleAggregated([
             {
-                data: [
-                    { count: 1, [dateField]: '2023-01-01' },
-                    { count: 2, [dateField]: '2023-01-03' },
-                ],
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 2, [dateField]: '2023-01-03' },
+                    ],
+                },
             },
-        );
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-01',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+        ]);
 
         lapisRequestMocks.multipleMutations(
             [
@@ -297,10 +424,10 @@ describe('queryMutationsOverTime', () => {
 
         const result = await queryMutationsOverTimeData(lapisFilter, 'nucleotide', DUMMY_LAPIS_URL, dateField, 'day');
 
-        expect(result.getAsArray({ count: 0, proportion: 0 })).to.deep.equal([
+        expect(result.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
             [
-                { proportion: 0.1, count: 1 },
-                { proportion: 0.2, count: 2 },
+                { proportion: 0.1, count: 1, totalCount: 11 },
+                { proportion: 0.2, count: 2, totalCount: 12 },
             ],
         ]);
 
@@ -316,15 +443,26 @@ describe('queryMutationsOverTime', () => {
         const dateField = 'dateField';
         const lapisFilter = { field1: 'value1', field2: 'value2', [dateField]: '2023-01-02' };
 
-        lapisRequestMocks.aggregated(
-            { ...lapisFilter, fields: [dateField] },
+        lapisRequestMocks.multipleAggregated([
             {
-                data: [
-                    { count: 1, [dateField]: '2023-01-01' },
-                    { count: 2, [dateField]: '2023-01-03' },
-                ],
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 2, [dateField]: '2023-01-03' },
+                    ],
+                },
             },
-        );
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+        ]);
 
         lapisRequestMocks.multipleMutations(
             [
@@ -343,7 +481,15 @@ describe('queryMutationsOverTime', () => {
 
         const result = await queryMutationsOverTimeData(lapisFilter, 'nucleotide', DUMMY_LAPIS_URL, dateField, 'day');
 
-        expect(result.getAsArray({ count: 0, proportion: 0 })).to.deep.equal([[{ proportion: 0.2, count: 2 }]]);
+        expect(result.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+            [
+                {
+                    proportion: 0.2,
+                    count: 2,
+                    totalCount: 11,
+                },
+            ],
+        ]);
 
         const sequences = result.getFirstAxisKeys();
         expect(sequences[0].code).toBe('sequenceName:A123T');

package/src/query/queryMutationsOverTime.ts

@@ -25,9 +25,10 @@ import {
 export type MutationOverTimeData = {
     date: Temporal;
     mutations: SubstitutionOrDeletionEntry[];
+    totalCount: number;
 };
 
-export type MutationOverTimeMutationValue = { proportion: number; count: number };
+export type MutationOverTimeMutationValue = { proportion: number; count: number; totalCount: number };
 export type MutationOverTimeDataGroupedByMutation = Map2d<
     Substitution | Deletion,
     Temporal,
@@ -75,9 +76,11 @@ export async function queryMutationsOverTimeData(
         };
 
         const data = await fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType).evaluate(lapis, signal);
+        const totalCountQuery = await getTotalNumberOfSequencesInDateRange(filter).evaluate(lapis, signal);
         return {
             date,
             mutations: data.content,
+            totalCount: totalCountQuery.content[0].count,
         };
     });
 
@@ -164,6 +167,7 @@ export function groupByMutation(data: MutationOverTimeData[]) {
             dataArray.set(mutationEntry.mutation, mutationData.date, {
                 count: mutationEntry.count,
                 proportion: mutationEntry.proportion,
+                totalCount: mutationData.totalCount,
             });
         });
     });
@@ -181,8 +185,12 @@ function addZeroValuesForDatesWithNoMutationData(
         const someMutation = dataArray.getFirstAxisKeys()[0];
         data.forEach((mutationData) => {
             if (mutationData.mutations.length === 0) {
-                dataArray.set(someMutation, mutationData.date, { count: 0, proportion: 0 });
+                dataArray.set(someMutation, mutationData.date, { count: 0, proportion: 0, totalCount: 0 });
             }
         });
     }
 }
+
+function getTotalNumberOfSequencesInDateRange(filter: LapisFilter) {
+    return new FetchAggregatedOperator<{ count: number }>(filter);
+}

package/src/web-components/app.stories.ts

@@ -1,5 +1,4 @@
 import { consume } from '@lit/context';
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, waitFor, within } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html, LitElement } from 'lit';
@@ -30,7 +29,6 @@ const meta: Meta = {
             codeExample,
         },
     }),
-    decorators: [withActions],
     tags: ['autodocs'],
 };