@genspectrum/dashboard-components 1.8.0 → 1.8.2

package/dist/util.d.ts

@@ -1037,7 +1037,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1045,7 +1045,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1053,7 +1053,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1061,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1137,10 +1137,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1148,7 +1148,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1156,10 +1156,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1167,7 +1167,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

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

@@ -80,15 +80,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8236,
                             },
                         ],
-                        [
-                            '2024-04',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-05',
                             {
@@ -98,15 +89,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8799,
                             },
                         ],
-                        [
-                            '2024-06',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-07',
                             {
@@ -148,15 +130,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8236,
                             },
                         ],
-                        [
-                            '2024-04',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-05',
                             {
@@ -166,15 +139,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8799,
                             },
                         ],
-                        [
-                            '2024-06',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-07',
                             {
@@ -212,15 +176,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8236,
                             },
                         ],
-                        [
-                            '2024-04',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-05',
                             {
@@ -230,15 +185,6 @@ export const withGaps: MutationOverTimeMockData = {
                                 totalCount: 8799,
                             },
                         ],
-                        [
-                            '2024-06',
-                            {
-                                type: 'value',
-                                count: 0,
-                                proportion: NaN,
-                                totalCount: 0,
-                            },
-                        ],
                         [
                             '2024-07',
                             {

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

@@ -21,6 +21,8 @@ import {
     usePreactTable,
 } from '../shared/tanstackTable/tanstackTable';
 
+const NON_BREAKING_SPACE = '\u00A0';
+
 export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataMap;
     colorScale: ColorScale;
@@ -176,7 +178,7 @@ const ProportionCell: FunctionComponent<{
     tooltipPosition: TooltipPosition;
     colorScale: ColorScale;
 }> = ({ value, mutation, date, tooltipPosition, colorScale }) => {
-    const proportion = value?.type === 'belowThreshold' ? 0 : value?.proportion;
+    const proportion = value?.type === 'belowThreshold' ? undefined : value?.proportion;
 
     return (
         <div className={'py-1 w-full h-full'}>
@@ -194,7 +196,9 @@ const ProportionCell: FunctionComponent<{
                     {value === null ? (
                         <span className='invisible'>No data</span>
                     ) : (
-                        <span className='invisible @[2rem]:visible'>{formatProportion(proportion ?? 0, 0)}</span>
+                        <span className='invisible @[2rem]:visible'>
+                            {proportion !== undefined ? formatProportion(proportion, 0) : NON_BREAKING_SPACE}
+                        </span>
                     )}
                 </div>
             </Tooltip>

package/src/preact/wastewater/mutationsOverTime/__mockData__/detailsAminAcidNonSegmented.json

@@ -0,0 +1,88 @@
+{
+    "data": [
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": null, \"C3422A\": 0.9598659873008728, \"A966C\": null, \"G6661A\": 0.5527499914169312, \"G7731A\": 0.9832900166511536, \"T4026G\": 0.9991809725761414, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-17",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": 1.0, \"C2554T\": null, \"C3422A\": 0.0, \"A966C\": null, \"G6661A\": 0.8785049915313721, \"G7731A\": 0.9855599999427795, \"T4026G\": null, \"T5260C\": 1.0, \"T5287C\": 0.9932659864425659}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": "{\"S4286C\": null, \"R346T\": 0.25, \"Q493E\": 0.60, \"G204P\": null}",
+            "date": "2024-11-17",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": 0.998993992805481, \"C2554T\": null, \"C3422A\": null, \"A966C\": null, \"G6661A\": 0.8917459845542908, \"G7731A\": 0.9770470261573792, \"T4026G\": 0.0, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": "{\"S4286C\": 0.42, \"R346T\": 0.22, \"Q493E\": 0.66, \"G204P\": null}",
+            "date": "2024-11-16",
+            "location": "Lugano",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": null, \"C3422A\": null, \"A966C\": null, \"G6661A\": 0.9476320147514343, \"G7731A\": 0.9809200167655945, \"T4026G\": 0.9992259740829468, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-18",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": 0.9978219866752625, \"C3422A\": null, \"A966C\": 1.0, \"G6661A\": null, \"G7731A\": null, \"T4026G\": null, \"T5260C\": null, \"T5287C\": null}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-14",
+            "location": "Genève",
+            "nucleotideMutationFrequency": "{\"A12183T\": null, \"C2554T\": 0.9994590282440186, \"C3422A\": 0.05333299934864044, \"A966C\": 1.0, \"G6661A\": 0.9282640218734741, \"G7731A\": 0.9803630113601685, \"T4026G\": 0.0, \"T5260C\": 0.9970409870147705, \"T5287C\": 0.996694028377533}",
+            "reference": "RSV-B"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Laupen",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": null, \"C10862T\": null, \"C12710T\": null, \"C3624T\": null, \"G11123A\": null, \"G3616A\": null, \"G7379A\": 0.9470750093460083, \"T11034A\": null, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-13",
+            "location": "Zürich",
+            "nucleotideMutationFrequency": "{\"A12668G\": 0.9988809823989868, \"A3564G\": null, \"C10862T\": 1.0, \"C12710T\": 0.9991809725761414, \"C3624T\": null, \"G11123A\": 1.0, \"G3616A\": null, \"G7379A\": 0.9414680004119873, \"T11034A\": 0.9988250136375427, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-16",
+            "location": "Zürich",
+            "nucleotideMutationFrequency": "{\"A12668G\": 0.999222993850708, \"A3564G\": 0.9998199939727783, \"C10862T\": 1.0, \"C12710T\": 0.9996299743652344, \"C3624T\": 0.9999099969863892, \"G11123A\": 1.0, \"G3616A\": 0.08799900114536285, \"G7379A\": null, \"T11034A\": 0.9970099925994873, \"T3483C\": 0.9993579983711243}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-16",
+            "location": "Chur",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": null, \"C10862T\": null, \"C12710T\": null, \"C3624T\": null, \"G11123A\": null, \"G3616A\": null, \"G7379A\": 0.6464089751243591, \"T11034A\": null, \"T3483C\": null}",
+            "reference": "RSV-A"
+        },
+        {
+            "aminoAcidMutationFrequency": null,
+            "date": "2024-11-18",
+            "location": "Basel",
+            "nucleotideMutationFrequency": "{\"A12668G\": null, \"A3564G\": 1.0, \"C10862T\": null, \"C12710T\": null, \"C3624T\": 1.0, \"G11123A\": null, \"G3616A\": 0.08222199976444244, \"G7379A\": null, \"T11034A\": null, \"T3483C\": 0.9998080134391785}",
+            "reference": "RSV-A"
+        }
+    ],
+    "info": {
+        "dataVersion": "1737327031",
+        "requestId": "5591b455-3d84-438c-8434-2e57ee2ad569",
+        "requestInfo": "RSV on api.wise-loculus.genspectrum.org at 2025-01-20T11:58:03.498206810",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}

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

@@ -8,6 +8,7 @@ import referenceGenome from '../../../lapisApi/__mockData__/referenceGenome.json
 import { LapisUrlContextProvider } from '../../LapisUrlContext';
 import { ReferenceGenomeContext } from '../../ReferenceGenomeContext';
 import details from './__mockData__/details.json';
+import detailsNonSegmented from './__mockData__/detailsAminAcidNonSegmented.json';
 import type { MutationsOverTimeProps } from '../../mutationsOverTime/mutations-over-time';
 import { playThatExpectsFinishedLoadingEvent } from '../../shared/stories/expectFinishedLoadingEvent';
 
@@ -113,6 +114,39 @@ export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
     },
 };
 
+export const AminoAcidsNonSegmented: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        sequenceType: 'amino acid',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'details',
+                        url: WISE_DETAILS_ENDPOINT,
+                        body: {
+                            fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: detailsNonSegmented,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvas }) => {
+        await expectMutationOnPage(canvas, 'G204P');
+        await expectMutationOnPage(canvas, 'R346T');
+        await expectMutationOnPage(canvas, 'Q493E');
+        await expectMutationOnPage(canvas, 'S4286C');
+    },
+};
+
 export const UsesMutationFilter: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     play: async ({ canvas, step }) => {

package/src/query/queryMutationsOverTime.ts

@@ -295,17 +295,34 @@ async function queryMutationsOverTimeDataDirectEndpoint(
             responseMutations.map((mutation, i) => [
                 mutation.code,
                 new Map(
-                    allDates.map((date, j): [string, MutationOverTimeMutationValue] => [
-                        date.dateString,
-                        {
-                            type: 'value',
-                            // 'coverage' in the API resp. is the number of seqs. that have a non-ambiguous symbol at position
-                            // 'count' in the API resp. is the number of seqs with the mutation
-                            proportion: apiResult.data.data[i][j].count / apiResult.data.data[i][j].coverage,
-                            count: apiResult.data.data[i][j].count,
-                            totalCount: totalCounts[j],
-                        },
-                    ]),
+                    allDates.map((date, j): [string, MutationOverTimeMutationValue] => {
+                        if (totalCounts[j] === 0) {
+                            return [date.dateString, null];
+                        }
+                        // 'count' in the API resp. is the number of seqs with the mutation
+                        const count = apiResult.data.data[i][j].count;
+                        // 'coverage' in the API resp. is the number of seqs. that have a non-ambiguous symbol at position
+                        const coverage = apiResult.data.data[i][j].coverage;
+                        const totalCount = totalCounts[j];
+                        if (coverage === 0) {
+                            return [
+                                date.dateString,
+                                {
+                                    type: 'belowThreshold',
+                                    totalCount,
+                                },
+                            ];
+                        }
+                        return [
+                            date.dateString,
+                            {
+                                type: 'value',
+                                proportion: count / coverage,
+                                count,
+                                totalCount,
+                            },
+                        ];
+                    }),
                 ),
             ]),
         ),

package/src/query/queryMutationsOverTimeNewEndpoint.spec.ts

@@ -290,12 +290,12 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
-                { type: 'value', proportion: 0, count: 0, totalCount: 0 },
+                null,
                 { type: 'value', proportion: 0, count: 0, totalCount: 13 },
             ],
             [
                 { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
-                { type: 'value', proportion: 0, count: 0, totalCount: 0 },
+                null,
                 { type: 'value', proportion: 0.3, count: 3, totalCount: 13 },
             ],
         ]);
@@ -1013,8 +1013,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: NaN, count: 0, totalCount: 11 },
-                { type: 'value', proportion: NaN, count: 0, totalCount: 12 },
+                { type: 'belowThreshold', totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
             ],
             [
                 { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
@@ -1135,8 +1135,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: NaN, count: 0, totalCount: 11 },
-                { type: 'value', proportion: NaN, count: 0, totalCount: 12 },
+                { type: 'belowThreshold', totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
             ],
             [
                 { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },

package/src/query/queryWastewaterMutationsOverTime.ts

@@ -57,7 +57,7 @@ function transformMutations(input: unknown): { mutation: Substitution; proportio
     }
 
     return Object.entries(mutationFrequency.data).map(([key, value]) => {
-        const mutation = SubstitutionClass.parse(key);
+        const mutation = SubstitutionClass.parse(key, true);
         if (mutation === null) {
             throw new Error(`Failed to parse mutation: "${key}"`);
         }

package/src/utils/mutations.ts

@@ -17,15 +17,19 @@ export interface MutationClass extends Mutation {
 const nucleotideChars = 'ACGTRYKMSWBDHVN';
 const aminoAcidChars = 'ACDEFGHIKLMNPQRSTVWY';
 
-function segmentPart(type: 'nucleotide' | 'aminoAcid') {
-    return type === 'aminoAcid' ? `(?<segment>[A-Z0-9_-]+):` : `((?<segment>[A-Z0-9_-]+)(?=:):)?`;
+function segmentPart(isOptional: boolean) {
+    const segmentPart = `(?<segment>[A-Z0-9_-]+):`;
+    if (isOptional) {
+        return `(${segmentPart})?`;
+    }
+    return segmentPart;
 }
 
-function buildSubstitutionRegex(type: 'nucleotide' | 'aminoAcid') {
+function buildSubstitutionRegex(type: 'nucleotide' | 'aminoAcid', segmentPartIsOptional: boolean) {
     const chars = type === 'nucleotide' ? nucleotideChars : aminoAcidChars;
 
     return new RegExp(
-        `^${segmentPart(type)}` +
+        `^${segmentPart(segmentPartIsOptional)}` +
             `(?<valueAtReference>[${chars}*])?` +
             `(?<position>\\d+)` +
             `(?<substitutionValue>[${chars}.*])?$`,
@@ -33,8 +37,9 @@ function buildSubstitutionRegex(type: 'nucleotide' | 'aminoAcid') {
     );
 }
 
-const nucleotideSubstitutionRegex = buildSubstitutionRegex('nucleotide');
-const aminoAcidSubstitutionRegex = buildSubstitutionRegex('aminoAcid');
+const nucleotideSubstitutionRegex = buildSubstitutionRegex('nucleotide', true);
+const aminoAcidSubstitutionRegex = buildSubstitutionRegex('aminoAcid', false);
+const aminoAcidSubstitutionWithoutSegmentRegex = buildSubstitutionRegex('aminoAcid', true);
 
 export interface Substitution extends Mutation {
     type: 'substitution';
@@ -74,10 +79,13 @@ export class SubstitutionClass implements MutationClass, Substitution {
         return this.code;
     }
 
-    static parse(mutationStr: string): SubstitutionClass | null {
+    static parse(mutationStr: string, segmentIsOptional: boolean = false): SubstitutionClass | null {
         const matchNucleotide = nucleotideSubstitutionRegex.exec(mutationStr);
         const matchAminoAcid = aminoAcidSubstitutionRegex.exec(mutationStr);
-        const match = matchNucleotide ?? matchAminoAcid;
+        const matchAminAcidWithoutSegment = segmentIsOptional
+            ? aminoAcidSubstitutionWithoutSegmentRegex.exec(mutationStr)
+            : undefined;
+        const match = matchNucleotide ?? matchAminoAcid ?? matchAminAcidWithoutSegment;
         if (match?.groups === undefined) {
             return null;
         }
@@ -94,7 +102,7 @@ function buildDeletionRegex(type: 'nucleotide' | 'aminoAcid') {
     const chars = type === 'nucleotide' ? nucleotideChars : aminoAcidChars;
 
     return new RegExp(
-        `^${segmentPart(type)}` + `(?<valueAtReference>[${chars}*])?` + `(?<position>\\d+)` + `(-)$`,
+        `^${segmentPart(type === 'nucleotide')}` + `(?<valueAtReference>[${chars}*])?` + `(?<position>\\d+)` + `(-)$`,
         'i',
     );
 }
@@ -158,7 +166,7 @@ function buildInsertionRegex(type: 'nucleotide' | 'aminoAcid') {
     const wildcardToken = `(?:\\.\\*)`;
 
     return new RegExp(
-        `^ins_${segmentPart(type)}(?<position>\\d+):(?<insertedSymbols>(?:[${chars}?*]|${wildcardToken})+)$`,
+        `^ins_${segmentPart(type === 'nucleotide')}(?<position>\\d+):(?<insertedSymbols>(?:[${chars}?*]|${wildcardToken})+)$`,
         'i',
     );
 }