@genspectrum/dashboard-components 1.14.1 → 1.14.2

package/dist/util.d.ts

@@ -1106,11 +1106,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;
     }
 }
 
@@ -1118,7 +1114,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>;
         }
     }
 }
@@ -1126,10 +1122,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1137,7 +1130,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1145,10 +1138,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1156,7 +1146,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1164,10 +1154,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1175,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1183,11 +1170,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1195,7 +1178,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1203,11 +1186,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1215,7 +1194,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1223,7 +1202,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1231,7 +1210,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>;
         }
     }
 }
@@ -1239,7 +1218,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison': MutationComparisonComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1247,7 +1226,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1255,7 +1234,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-queries-over-time': QueriesOverTimeComponent;
     }
 }
 
@@ -1263,7 +1242,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1271,7 +1250,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1279,7 +1258,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1287,7 +1266,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1295,7 +1274,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1303,7 +1282,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1311,7 +1294,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1319,7 +1302,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1327,7 +1313,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>;
         }
     }
 }
@@ -1335,7 +1321,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1343,7 +1332,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1351,7 +1340,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1359,7 +1351,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1367,7 +1359,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1375,7 +1371,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1383,7 +1379,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-queries-over-time': QueriesOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1391,7 +1391,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.14.1",
+    "version": "1.14.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -126,7 +126,6 @@
         "depcheck": "^1.4.7",
         "eslint": "^9.31.0",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jest": "^28.2.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-storybook": "^0.12.0",

package/src/preact/components/features-over-time-grid.tsx

@@ -30,7 +30,7 @@ export type CustomColumn = z.infer<typeof customColumnSchema>;
 export interface FeatureRenderer<D> {
     asString(value: D): string;
     renderRowLabel(value: D): JSX.Element;
-    renderTooltip(value: D, temporal: Temporal, proportionValue: ProportionValue | undefined): JSX.Element;
+    renderTooltip(value: D, temporal: Temporal, proportionValue: ProportionValue): JSX.Element;
 }
 
 export interface FeaturesOverTimeGridProps<F> {
@@ -99,12 +99,20 @@ function FeaturesOverTimeGrid<F>({
                     </div>
                 ),
                 cell: ({ getValue, row, column, table }) => {
-                    const value = getValue();
+                    const valueRaw = getValue();
+                    const value = valueRaw ?? null;
                     const rowIndex = row.index;
                     const columnIndex = column.getIndex();
                     const numberOfRows = table.getRowModel().rows.length;
                     const numberOfColumns = table.getAllColumns().length;
 
+                    if (valueRaw === undefined) {
+                        // eslint-disable-next-line no-console -- We want to warn that something might be wrong.
+                        console.error(
+                            `Found undefined value for ${row.original.feature} - ${date.dateString}. This shouldn't happen.`,
+                        );
+                    }
+
                     const tooltip = featureRenderer.renderTooltip(row.original.feature, date, value);
 
                     return (

package/src/preact/wastewater/mutationsOverTime/computeWastewaterMutationsOverTimeDataPerLocation.spec.ts

@@ -156,4 +156,59 @@ describe('groupMutationDataByLocation', () => {
 
         expect(location1Data.getFirstAxisKeys()).to.deep.equal([mutation1, mutation2, mutation3]);
     });
+
+    test('should backfill missing mutation-date combinations with explicit null', () => {
+        const input: WastewaterData = [
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-01'),
+                nucleotideMutationFrequency: [
+                    { mutation: mutation1, proportion: 0.1 },
+                    // mutation2 missing for this date
+                ],
+                aminoAcidMutationFrequency: [],
+            },
+            {
+                location: location1,
+                date: temporalCache.getYearMonthDay('2025-01-02'),
+                nucleotideMutationFrequency: [
+                    // mutation1 missing for this date
+                    { mutation: mutation2, proportion: 0.2 },
+                ],
+                aminoAcidMutationFrequency: [],
+            },
+        ];
+
+        const result = groupMutationDataByLocation(input, 'nucleotide');
+
+        expect(result).to.have.length(1);
+        const location1Data = result[0].data;
+
+        // Both mutations should appear in all dates
+        expect(location1Data.getFirstAxisKeys()).to.deep.equal([mutation1, mutation2]);
+        expect(location1Data.getSecondAxisKeys()).to.deep.equal([
+            temporalCache.getYearMonthDay('2025-01-01'),
+            temporalCache.getYearMonthDay('2025-01-02'),
+        ]);
+
+        // Verify backfilled nulls (not undefined)
+        expect(location1Data.get(mutation1, temporalCache.getYearMonthDay('2025-01-02'))).to.equal(null);
+        expect(location1Data.get(mutation2, temporalCache.getYearMonthDay('2025-01-01'))).to.equal(null);
+
+        // Verify actual values still present
+        expect(location1Data.get(mutation1, temporalCache.getYearMonthDay('2025-01-01'))).to.deep.equal({
+            type: 'wastewaterValue',
+            proportion: 0.1,
+        });
+        expect(location1Data.get(mutation2, temporalCache.getYearMonthDay('2025-01-02'))).to.deep.equal({
+            type: 'wastewaterValue',
+            proportion: 0.2,
+        });
+
+        // Verify the complete grid with getAsArray
+        expect(location1Data.getAsArray()).to.deep.equal([
+            [{ type: 'wastewaterValue', proportion: 0.1 }, null],
+            [null, { type: 'wastewaterValue', proportion: 0.2 }],
+        ]);
+    });
 });

package/src/preact/wastewater/mutationsOverTime/computeWastewaterMutationsOverTimeDataPerLocation.ts

@@ -21,15 +21,26 @@ export async function computeWastewaterMutationsOverTimeDataPerLocation(
 
 export function groupMutationDataByLocation(data: WastewaterData, sequenceType: 'nucleotide' | 'amino acid') {
     const locationMap = new Map<string, MutationOverTimeDataMap<TemporalClass>>();
+    // Track all unique mutations and dates per location for backfilling
+    const locationMutations = new Map<string, Set<string>>();
+    const locationDates = new Map<string, Set<string>>();
+
+    // First pass: populate sparse data and track all keys
     for (const row of data) {
         if (!locationMap.has(row.location)) {
             locationMap.set(row.location, new BaseMutationOverTimeDataMap<TemporalClass>());
+            locationMutations.set(row.location, new Set());
+            locationDates.set(row.location, new Set());
         }
         const map = locationMap.get(row.location)!;
+        const mutations = locationMutations.get(row.location)!;
+        const dates = locationDates.get(row.location)!;
 
         const mutationFrequencies =
             sequenceType === 'nucleotide' ? row.nucleotideMutationFrequency : row.aminoAcidMutationFrequency;
         for (const mutation of mutationFrequencies) {
+            dates.add(row.date.dateString);
+            mutations.add(mutation.mutation.code);
             map.set(
                 mutation.mutation,
                 row.date,
@@ -38,6 +49,21 @@ export function groupMutationDataByLocation(data: WastewaterData, sequenceType:
         }
     }
 
+    // Second pass: backfill missing cells with explicit null
+    for (const [location, map] of locationMap.entries()) {
+        const allMutations = Array.from(locationMutations.get(location)!);
+        const allDates = Array.from(locationDates.get(location)!).map((dateStr) => map.keysSecondAxis.get(dateStr)!);
+
+        for (const mutationCode of allMutations) {
+            const mutation = map.keysFirstAxis.get(mutationCode)!;
+            for (const date of allDates) {
+                if (map.get(mutation, date) === undefined) {
+                    map.set(mutation, date, null);
+                }
+            }
+        }
+    }
+
     return [...locationMap.entries()].map(([location, data]) => ({
         location,
         data: new SortedMap2d(