@genspectrum/dashboard-components 0.6.13 → 0.6.14

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

@@ -56,7 +56,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 <MutationCell mutation={mutation} />
                             </div>
                             {dates.map((date, columnIndex) => {
-                                const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+                                const value = data.get(mutation, date) ?? { proportion: 0, count: 0, totalCount: 0 };
                                 const tooltipPosition = getTooltipPosition(
                                     rowIndex,
                                     shownMutations.length,
@@ -136,7 +136,9 @@ const ProportionCell: FunctionComponent<{
             <p>({timeIntervalDisplay(date)})</p>
             <p>{mutation.code}</p>
             <p>Proportion: {formatProportion(value.proportion)}</p>
-            <p>Count: {value.count}</p>
+            <p>
+                Count: {value.count} / {value.totalCount} total
+            </p>
         </div>
     );
 

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) => {

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/input/gs-date-range-selector.tsx

@@ -1,7 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import { DateRangeSelector } from '../../preact/dateRangeSelector/date-range-selector';
-import { type CustomSelectOption, type PresetOptionValues } from '../../preact/dateRangeSelector/selectableOptions';
+import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -129,9 +128,30 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type CustomSelectOptionsMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.customSelectOptions, CustomSelectOption<string>[]>
+    Equals<
+        typeof DateRangeSelectorComponent.prototype.customSelectOptions,
+        DateRangeSelectorProps<string>['customSelectOptions']
+    >
+>;
+type EarliestDateMatches = Expect<
+    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps<string>['earliestDate']>
 >;
 type InitialValueMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, PresetOptionValues | string>
+    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, DateRangeSelectorProps<string>['initialValue']>
+>;
+type InitialDateFromMatches = Expect<
+    Equals<
+        typeof DateRangeSelectorComponent.prototype.initialDateFrom,
+        DateRangeSelectorProps<string>['initialDateFrom']
+    >
+>;
+type InitialDateToMatches = Expect<
+    Equals<typeof DateRangeSelectorComponent.prototype.initialDateTo, DateRangeSelectorProps<string>['initialDateTo']>
+>;
+type WidthMatches = Expect<
+    Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps<string>['width']>
+>;
+type DateColumnMatches = Expect<
+    Equals<typeof DateRangeSelectorComponent.prototype.dateColumn, DateRangeSelectorProps<string>['dateColumn']>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */