@genspectrum/dashboard-components 1.3.0 → 1.4.0

package/dist/util.d.ts

@@ -917,7 +917,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -925,7 +925,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -933,7 +933,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -941,7 +941,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -949,7 +949,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -957,7 +957,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -965,7 +965,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -973,7 +973,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -981,7 +981,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -989,7 +989,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -997,7 +997,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1005,7 +1005,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1013,7 +1013,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1021,7 +1021,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1053,7 +1053,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1093,11 +1093,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1105,7 +1104,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1113,10 +1112,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1124,7 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

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

@@ -0,0 +1,352 @@
+import { type MutationOverTimeMockData } from './mockConversion';
+
+export const withDisplayMutations: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            pangoLineage: 'JN.1*',
+            dateFrom: '2024-01-15',
+            dateTo: '2024-07-10',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'month',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+        useNewEndpoint: false,
+    },
+    response: {
+        overallMutationData: [
+            {
+                type: 'substitution',
+                mutation: {
+                    valueAtReference: 'A',
+                    substitutionValue: 'G',
+                    position: 19722,
+                    type: 'substitution',
+                    code: 'A19722G',
+                },
+                count: 10234,
+                proportion: 0.09900453714363107,
+            },
+            {
+                type: 'substitution',
+                mutation: {
+                    valueAtReference: 'G',
+                    substitutionValue: 'T',
+                    position: 21641,
+                    type: 'substitution',
+                    code: 'G21641T',
+                },
+                count: 4485,
+                proportion: 0.05001951709139575,
+            },
+            {
+                type: 'deletion',
+                mutation: {
+                    valueAtReference: 'T',
+                    position: 21653,
+                    type: 'deletion',
+                    code: 'T21653-',
+                },
+                count: 17169,
+                proportion: 0.16814713976514833,
+            },
+        ],
+        mutationOverTimeSerializedAsArray: {
+            data: [
+                [
+                    'A19722G',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 36,
+                                proportion: 0.0043859649122807015,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 194,
+                                proportion: 0.030082183284230114,
+                                totalCount: 6488,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 759,
+                                proportion: 0.08675277174534232,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 2921,
+                                proportion: 0.19071559153826065,
+                                totalCount: 15400,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 6318,
+                                proportion: 0.2995448511283899,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+                [
+                    'G21641T',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'value',
+                                count: 1625,
+                                proportion: 0.07085858806087297,
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'value',
+                                count: 419,
+                                proportion: 0.027931471235250985,
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 228,
+                                proportion: 0.03451930355791068,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 545,
+                                proportion: 0.10551790900290416,
+                                totalCount: 6488,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 666,
+                                proportion: 0.09498003422703936,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 732,
+                                proportion: 0.05598470363288719,
+                                totalCount: 15400,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 270,
+                                proportion: 0.013585589212035825,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+                [
+                    'T21653-',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 40,
+                                proportion: 0.004921259842519685,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 228,
+                                proportion: 0.03576470588235294,
+                                totalCount: 6488,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 1304,
+                                proportion: 0.151504589287789,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 4744,
+                                proportion: 0.31656212464967304,
+                                totalCount: 15400,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 10815,
+                                proportion: 0.5221610660486674,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+            ],
+            keysFirstAxis: [
+                [
+                    'A19722G',
+                    {
+                        type: 'substitution',
+                        code: 'A19722G',
+                        position: 19722,
+                        valueAtReference: 'A',
+                        substitutionValue: 'G',
+                    },
+                ],
+                [
+                    'G21641T',
+                    {
+                        type: 'substitution',
+                        code: 'G21641T',
+                        position: 21641,
+                        valueAtReference: 'G',
+                        substitutionValue: 'T',
+                    },
+                ],
+                [
+                    'T21653-',
+                    {
+                        type: 'deletion',
+                        code: 'T21653-',
+                        position: 21653,
+                        valueAtReference: 'T',
+                    },
+                ],
+            ],
+            keysSecondAxis: [
+                [
+                    '2024-01',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 1,
+                        dateString: '2024-01',
+                    },
+                ],
+                [
+                    '2024-02',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 2,
+                        dateString: '2024-02',
+                    },
+                ],
+                [
+                    '2024-03',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 3,
+                        dateString: '2024-03',
+                    },
+                ],
+                [
+                    '2024-04',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 4,
+                        dateString: '2024-04',
+                    },
+                ],
+                [
+                    '2024-05',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 5,
+                        dateString: '2024-05',
+                    },
+                ],
+                [
+                    '2024-06',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 6,
+                        dateString: '2024-06',
+                    },
+                ],
+                [
+                    '2024-07',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 7,
+                        dateString: '2024-07',
+                    },
+                ],
+            ],
+        },
+    },
+};

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -211,30 +211,6 @@ describe('getFilteredMutationOverTimeData', () => {
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
     });
 
-    it('should filter by displayMutations', () => {
-        const { data, overallMutationData } = prepareMutationOverTimeData([
-            someSubstitutionEntry,
-            anotherSubstitutionEntry,
-            someDeletionEntry,
-        ]);
-
-        const result = getFilteredMutationOverTimeData({
-            data,
-            overallMutationData,
-            displayedSegments: [],
-            displayedMutationTypes: [],
-            proportionInterval,
-            displayMutations: [anotherSubstitution.code, someDeletion.code],
-            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
-            sequenceType: 'nucleotide',
-            annotationProvider: () => {
-                return [];
-            },
-        });
-
-        expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
-    });
-
     it('should filter by mutation filter text value', () => {
         const { data, overallMutationData } = prepareMutationOverTimeData([
             someSubstitutionEntry,

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -8,7 +8,7 @@ import { type useMutationAnnotationsProvider } from '../MutationAnnotationsConte
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 import type { DisplayedSegment } from '../components/segment-selector';
 
-export const displayMutationsSchema = z.array(z.string()).min(1);
+export const displayMutationsSchema = z.array(z.string());
 export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
 
 export type MutationFilter = {
@@ -34,16 +34,12 @@ export function getFilteredMutationOverTimeData({
     displayedSegments,
     displayedMutationTypes,
     proportionInterval,
-    displayMutations,
     mutationFilterValue,
     sequenceType,
     annotationProvider,
 }: GetFilteredMutationOverTimeDataArgs) {
     const filteredData = new Map2dView(data);
 
-    const displayMutationsSet =
-        displayMutations === undefined ? null : new Set(displayMutations.map((it) => it.toUpperCase()));
-
     const mutationsToFilterOut = overallMutationData.filter((entry) => {
         if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
             return true;
@@ -52,10 +48,6 @@ export function getFilteredMutationOverTimeData({
             return true;
         }
 
-        if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code.toUpperCase())) {
-            return true;
-        }
-
         if (
             mutationOrAnnotationDoNotMatchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)
         ) {

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

@@ -7,11 +7,13 @@ import { defaultMockData } from './__mockData__/defaultMockData';
 import { getMutationOverTimeMock } from './__mockData__/mockConversion';
 import { noDataWhenNoMutationsAreInFilter } from './__mockData__/noDataWhenNoMutationsAreInFilter';
 import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
+import { withDisplayMutations } from './__mockData__/withDisplayMutations';
 
 const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
     getMutationOverTimeMock(defaultMockData),
     getMutationOverTimeMock(showsMessageWhenTooManyMutations),
     getMutationOverTimeMock(byWeek),
+    getMutationOverTimeMock(withDisplayMutations),
     getMutationOverTimeMock(aminoAcidMutationsByDay),
     getMutationOverTimeMock(noDataWhenNoMutationsAreInFilter),
 ];

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

@@ -83,7 +83,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
     ...componentProps
 }) => {
     const lapis = useLapisUrl();
-    const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
+    const { lapisFilter, sequenceType, granularity, lapisDateField, displayMutations } = componentProps;
 
     const messageToWorker: MutationOverTimeQuery = useMemo(() => {
         return {
@@ -92,9 +92,10 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
             granularity,
             lapisDateField,
             lapis,
+            displayMutations,
             useNewEndpoint,
         };
-    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType, useNewEndpoint]);
+    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType, displayMutations, useNewEndpoint]);
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeWorkerResponse>(
         messageToWorker,
@@ -160,7 +161,6 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
-            displayMutations: originalComponentProps.displayMutations,
             mutationFilterValue,
             sequenceType: originalComponentProps.sequenceType,
             annotationProvider,
@@ -171,7 +171,6 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         displayedSegments,
         displayedMutationTypes,
         proportionInterval,
-        originalComponentProps.displayMutations,
         originalComponentProps.sequenceType,
         mutationFilterValue,
         annotationProvider,