@genspectrum/dashboard-components 1.11.0 → 1.12.0

package/dist/util.d.ts

@@ -971,11 +971,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -983,7 +979,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -991,10 +987,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1002,7 +995,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1010,10 +1003,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1021,7 +1011,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1029,11 +1019,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1041,7 +1027,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1049,10 +1035,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1060,7 +1043,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1068,11 +1051,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1080,7 +1059,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1088,7 +1067,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1096,7 +1075,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1104,7 +1083,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1112,7 +1091,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1120,7 +1099,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1128,7 +1107,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1136,7 +1115,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1144,7 +1123,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>;
         }
     }
 }
@@ -1152,7 +1131,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1160,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1168,7 +1151,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1176,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1184,7 +1170,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1192,7 +1181,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1200,7 +1189,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1208,7 +1200,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1216,7 +1208,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1224,7 +1220,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1232,7 +1228,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1240,7 +1240,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/lapisApi/lapisTypes.ts

@@ -62,6 +62,7 @@ export const mutationsOverTimeResponse = makeLapisResponse(
                 }),
             ),
         ),
+        totalCountsByDateRange: z.array(z.number()),
     }),
 );
 export type MutationsOverTimeResponse = z.infer<typeof mutationsOverTimeResponse>;

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -68,7 +68,7 @@ export function getFilteredMutationOverTimeData({
     if (hideGaps) {
         const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
             const vals = filteredData.getColumn(dateRange);
-            return !vals.some((v) => v?.type === 'value' && v.totalCount > 0);
+            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
         });
         dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
     }

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

@@ -65,6 +65,53 @@ export const WithValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
+        await expect(canvas.getByText('50.00%')).toBeVisible();
+        await expect(canvas.getByText('100')).toBeVisible();
+        await expect(canvas.getByText('have the mutation A500-.')).toBeVisible();
+        await expect(canvas.getByText('200')).toBeVisible();
+        await expect(canvas.getByText('have coverage at position 500.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueWithZero: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'value',
+            proportion: 0,
+            count: 0,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('0.00%')).toBeVisible();
+        await expect(canvas.getByText('0')).toBeVisible();
+        await expect(canvas.getByText('have the mutation A500-.')).toBeVisible();
+        await expect(canvas.queryByText('with coverage at position 500.')).not.toBeInTheDocument();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueWithCoverage: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'valueWithCoverage',
+            count: 100,
+            coverage: 200,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
         await expect(canvas.getByText('50.00%')).toBeVisible();
         await expect(canvas.getByText('100')).toBeVisible();
         await expect(canvas.getByText('have the mutation A500- out of')).toBeVisible();

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

@@ -21,12 +21,26 @@ export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGr
 }: MutationsOverTimeGridTooltipProps) => {
     const dateClass = toTemporalClass(date);
 
-    const proportionText =
-        value === null
-            ? 'No data'
-            : value.type === 'belowThreshold'
-              ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`
-              : formatProportion(value.proportion);
+    let proportionText = 'No data';
+
+    if (value !== null) {
+        switch (value.type) {
+            case 'belowThreshold': {
+                proportionText = `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`;
+                break;
+            }
+            case 'value':
+            case 'wastewaterValue': {
+                proportionText = formatProportion(value.proportion);
+                break;
+            }
+            case 'valueWithCoverage': {
+                // value.coverage will always be non-zero if we're in this case
+                proportionText = formatProportion(value.count / value.coverage);
+                break;
+            }
+        }
+    }
 
     return (
         <div>
@@ -61,21 +75,50 @@ const TooltipValueCountsDescription: FunctionComponent<{
     }
     return (
         <div className='mt-2'>
-            {value.type === 'belowThreshold' ? (
-                <p className='text-gray-600'>
-                    None or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the mutation.
-                </p>
-            ) : (
-                <>
-                    <p>
-                        {value.count} <span className='text-gray-600'>have the mutation {mutationCode} out of</span>
-                    </p>
-                    <p>
-                        {totalCountWithCoverage(value.count, value.proportion)}{' '}
-                        <span className='text-gray-600'>with coverage at position {mutationPosition}.</span>
-                    </p>
-                </>
-            )}
+            {(() => {
+                switch (value.type) {
+                    case 'belowThreshold':
+                        return (
+                            <p className='text-gray-600'>
+                                None or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the
+                                mutation.
+                            </p>
+                        );
+
+                    case 'value':
+                        return (
+                            <>
+                                <p>
+                                    {value.count}{' '}
+                                    <span className='text-gray-600'>have the mutation {mutationCode}.</span>
+                                </p>
+                                {value.proportion > 0 && (
+                                    <p>
+                                        {Math.round(value.count / value.proportion)}{' '}
+                                        <span className='text-gray-600'>
+                                            have coverage at position {mutationPosition}.
+                                        </span>
+                                    </p>
+                                )}
+                            </>
+                        );
+
+                    case 'valueWithCoverage':
+                        return (
+                            <>
+                                <p>
+                                    {value.count}{' '}
+                                    <span className='text-gray-600'>have the mutation {mutationCode} out of</span>
+                                </p>
+                                <p>
+                                    {value.coverage}{' '}
+                                    <span className='text-gray-600'>with coverage at position {mutationPosition}.</span>
+                                </p>
+                            </>
+                        );
+                }
+            })()}
+
             <p>
                 {value.totalCount} <span className='text-gray-600'>total in this date range.</span>
             </p>
@@ -83,13 +126,6 @@ const TooltipValueCountsDescription: FunctionComponent<{
     );
 };
 
-function totalCountWithCoverage(count: number, proportion: number) {
-    if (count === 0) {
-        return 0;
-    }
-    return Math.round(count / proportion);
-}
-
 const timeIntervalDisplay = (date: TemporalClass) => {
     if (date instanceof YearMonthDayClass) {
         return date.toString();

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

@@ -4,7 +4,7 @@ import z from 'zod';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
-import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import { getProportion, type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type SequenceType } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type Temporal } from '../../utils/temporalClass';
@@ -211,7 +211,7 @@ const ProportionCell: FunctionComponent<{
     colorScale: ColorScale;
     tooltipPortalTarget: HTMLElement | null;
 }> = ({ value, mutation, date, tooltipPosition, colorScale, tooltipPortalTarget }) => {
-    const proportion = value?.type === 'belowThreshold' ? undefined : value?.proportion;
+    const proportion = getProportion(value);
 
     return (
         <div className={'py-1 w-full h-full'}>

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

@@ -12,7 +12,7 @@ import {
 } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid, { customColumnSchema } from './mutations-over-time-grid';
-import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
+import { getProportion, type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     lapisFilterSchema,
     sequenceTypeSchema,
@@ -356,7 +356,7 @@ function getDownloadData(filteredData: MutationOverTimeDataMap) {
         return dates.reduce(
             (accumulated, date) => {
                 const value = filteredData.get(mutation, date);
-                const proportion = value?.type === 'value' || value?.type === 'wastewaterValue' ? value.proportion : '';
+                const proportion = getProportion(value ?? null) ?? '';
                 return {
                     ...accumulated,
                     [date.dateString]: proportion,

package/src/query/queryMutationsOverTime.ts

@@ -49,6 +49,12 @@ export type MutationOverTimeMutationValue =
           count: number;
           totalCount: number;
       }
+    | {
+          type: 'valueWithCoverage';
+          count: number;
+          coverage: number;
+          totalCount: number;
+      }
     | {
           type: 'wastewaterValue';
           proportion: number;
@@ -59,6 +65,19 @@ export type MutationOverTimeMutationValue =
       }
     | null;
 
+export function getProportion(value: MutationOverTimeMutationValue) {
+    switch (value?.type) {
+        case 'value':
+        case 'wastewaterValue':
+            return value.proportion;
+        case 'valueWithCoverage':
+            return value.count / value.coverage;
+        case 'belowThreshold':
+            return undefined;
+    }
+    return undefined;
+}
+
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 export const MUTATIONS_OVER_TIME_MIN_PROPORTION = 0.001;
 
@@ -237,19 +256,6 @@ async function queryMutationsOverTimeDataDirectEndpoint(
 }> {
     const overallMutationData = await overallMutationDataPromise;
     overallMutationData.sort((a, b) => sortSubstitutionsAndDeletions(a.mutation, b.mutation));
-    const totalCounts = await Promise.all(
-        allDates.map(async (date) => {
-            const filter = {
-                ...lapisFilter,
-                [`${lapisDateField}From`]: date.firstDay.toString(),
-                [`${lapisDateField}To`]: date.lastDay.toString(),
-            };
-
-            const totalCountQuery = await getTotalNumberOfSequencesInDateRange(filter).evaluate(lapis, signal);
-
-            return totalCountQuery.content[0].count;
-        }),
-    );
 
     const includeMutations = overallMutationData.map((value) => value.mutation.code);
     const apiResult = await fetchMutationsOverTime(
@@ -267,6 +273,7 @@ async function queryMutationsOverTimeDataDirectEndpoint(
         signal,
     );
 
+    const totalCounts = apiResult.data.totalCountsByDateRange;
     const responseMutations = apiResult.data.mutations.map(parseMutationCode);
     const mutationEntries: SubstitutionOrDeletionEntry[] = responseMutations.map((mutation, i) => {
         const numbers = {
@@ -316,9 +323,9 @@ async function queryMutationsOverTimeDataDirectEndpoint(
                         return [
                             date.dateString,
                             {
-                                type: 'value',
-                                proportion: count / coverage,
+                                type: 'valueWithCoverage',
                                 count,
+                                coverage,
                                 totalCount,
                             },
                         ];