@genspectrum/dashboard-components 1.15.0 → 1.17.0

package/src/query/queryMutationsOverTime.ts

@@ -11,8 +11,8 @@ import {
     type TemporalGranularity,
 } from '../types';
 import { type Map2DContents } from '../utils/map2d';
-import { type Deletion, type Substitution, DeletionClass, SubstitutionClass } from '../utils/mutations';
-import { type Temporal } from '../utils/temporalClass';
+import { type Deletion, DeletionClass, type Substitution, SubstitutionClass } from '../utils/mutations';
+import { type Temporal, type TemporalClass } from '../utils/temporalClass';
 
 export type ProportionValue =
     | {
@@ -89,21 +89,19 @@ async function queryOverallMutationData({
     lapisFilter,
     sequenceType,
     lapis,
-    granularity,
     lapisDateField,
     includeMutations,
+    requestedDateRanges,
     signal,
 }: {
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     lapis: string;
-    granularity: TemporalGranularity;
     lapisDateField: string;
     includeMutations?: string[];
+    requestedDateRanges: TemporalClass[];
     signal?: AbortSignal;
 }) {
-    const requestedDateRanges = await queryDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
-
     if (requestedDateRanges.length === 0) {
         if (includeMutations) {
             return {
@@ -142,7 +140,11 @@ async function queryOverallMutationData({
     return dataPromise;
 }
 
-export async function queryMutationsOverTimeData(
+/**
+ * Phase 1: Fetch date buckets and the full sorted list of mutations above the threshold.
+ * This is cheap and does not depend on the current page.
+ */
+export async function queryMutationsOverTimeMetadata(
     lapisFilter: LapisFilter,
     sequenceType: SequenceType,
     lapis: string,
@@ -168,12 +170,38 @@ export async function queryMutationsOverTimeData(
         lapis,
         lapisDateField,
         includeMutations: displayMutations,
-        granularity,
+        requestedDateRanges,
+        signal,
     }).then((r) => r.content);
 
     overallMutationData.sort((a, b) => sortSubstitutionsAndDeletions(a.mutation, b.mutation));
 
-    const includeMutations = overallMutationData.map((value) => value.mutation.code);
+    return { overallMutationData, requestedDateRanges };
+}
+
+export type MutationsOverTimeMetadata = Awaited<ReturnType<typeof queryMutationsOverTimeMetadata>>;
+
+/**
+ * Phase 2: Fetch the time-series matrix for a specific slice of mutations (e.g. one page).
+ * Pass `requestedDateRanges` from Phase 1, plus a slice of mutation codes to fetch.
+ */
+export async function queryMutationsOverTimePage(
+    lapisFilter: LapisFilter,
+    lapis: string,
+    lapisDateField: string,
+    sequenceType: SequenceType,
+    requestedDateRanges: MutationsOverTimeMetadata['requestedDateRanges'],
+    includeMutationCodes: string[],
+    signal?: AbortSignal,
+) {
+    if (includeMutationCodes.length === 0 || requestedDateRanges.length === 0) {
+        return new BaseMutationOverTimeDataMap({
+            keysFirstAxis: new Map(),
+            keysSecondAxis: new Map(requestedDateRanges.map((date) => [date.dateString, date])),
+            data: new Map(),
+        });
+    }
+
     const apiResult = await fetchMutationsOverTime(
         lapis,
         {
@@ -182,34 +210,22 @@ export async function queryMutationsOverTimeData(
                 dateFrom: date.firstDay.toString(),
                 dateTo: date.lastDay.toString(),
             })),
-            includeMutations,
+            includeMutations: includeMutationCodes,
             dateField: lapisDateField,
         },
         sequenceType,
         signal,
     );
 
+    return buildMutationOverTimeDataMap(apiResult, requestedDateRanges);
+}
+
+function buildMutationOverTimeDataMap(
+    apiResult: Awaited<ReturnType<typeof fetchMutationsOverTime>>,
+    requestedDateRanges: MutationsOverTimeMetadata['requestedDateRanges'],
+) {
     const totalCounts = apiResult.data.totalCountsByDateRange;
     const responseMutations = apiResult.data.mutations.map(parseMutationCode);
-    const mutationEntries: SubstitutionOrDeletionEntry[] = responseMutations.map((mutation, i) => {
-        const numbers = {
-            count: overallMutationData[i].count,
-            proportion: overallMutationData[i].proportion,
-        };
-        if (mutation.type === 'deletion') {
-            return {
-                type: 'deletion',
-                mutation,
-                ...numbers,
-            };
-        } else {
-            return {
-                type: 'substitution',
-                mutation,
-                ...numbers,
-            };
-        }
-    });
 
     const mutationOverTimeData: Map2DContents<Substitution | Deletion, Temporal, ProportionValue> = {
         keysFirstAxis: new Map(responseMutations.map((mutation) => [mutation.code, mutation])),
@@ -251,10 +267,7 @@ export async function queryMutationsOverTimeData(
         ),
     };
 
-    return {
-        mutationOverTimeData: new BaseMutationOverTimeDataMap(mutationOverTimeData),
-        overallMutationData: mutationEntries,
-    };
+    return new BaseMutationOverTimeDataMap(mutationOverTimeData);
 }
 
 function parseMutationCode(code: string): SubstitutionClass | DeletionClass {

package/src/utilEntrypoint.ts

@@ -54,4 +54,4 @@ export {
 export { type MeanProportionInterval } from './preact/mutationsOverTime/mutations-over-time';
 export { type CustomColumn } from './preact/components/features-over-time-grid';
 
-export { type QueryDefinition } from './lapisApi/lapisTypes';
+export { type CountCoverageQuery } from './preact/queriesOverTime/queries-over-time';

package/src/utils/useControlledState.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'preact/hooks';
+
+/**
+ * For when state is supplied via an attribute to the web component,
+ * and we need to update the internal state when the attribute value changes
+ */
+export function useControlledState<S>(initialState: S) {
+    const [state, setState] = useState(initialState);
+
+    useEffect(() => {
+        setState(initialState);
+    }, [initialState]);
+
+    return [state, setState] as const;
+}

package/src/web-components/gs-app.ts

@@ -2,7 +2,6 @@ import { provide } from '@lit/context';
 import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import z from 'zod';
 
 import { lapisContext } from './lapis-context';
@@ -129,9 +128,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-app': AppComponent;
         }
     }
 }

package/src/web-components/input/gs-date-range-filter.tsx

@@ -1,7 +1,6 @@
 import flatpickrStyle from 'flatpickr/dist/flatpickr.css?inline';
 import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
@@ -144,9 +143,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DateRangeFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-lineage-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     type LineageFilterChangedEvent,
@@ -146,9 +145,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': LineageFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-location-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
@@ -110,9 +109,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': LocationFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-mutation-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
@@ -67,7 +66,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
      * All values provided must be valid mutations or insertions.
      * Invalid values will be ignored.
      */
-    @property({type: Object})
+    @property({ type: Object })
     initialValue:
         {
             nucleotideMutations: string[];
@@ -125,9 +124,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': MutationFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-number-range-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     type NumberRangeFilterChangedEvent,
@@ -140,9 +139,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': NumberRangeFilterComponent;
         }
     }
 }

package/src/web-components/input/gs-text-filter.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
 import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
@@ -100,9 +99,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': TextFilterComponent;
         }
     }
 }

package/src/web-components/mutation-annotations-context.ts

@@ -14,7 +14,9 @@ const mutationAnnotationSchema = z.object({
 });
 export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;
 
-export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema);
+export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema, {
+    errorMap: () => ({ message: 'invalid mutation annotations' }),
+});
 export type MutationAnnotations = z.infer<typeof mutationAnnotationsSchema>;
 
 export const mutationAnnotationsContext = createContext<MutationAnnotations>(Symbol('mutation-annotations-context'));

package/src/web-components/visualization/gs-aggregate.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Aggregate, type AggregateProps } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -131,9 +130,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': AggregateComponent;
         }
     }
 }

package/src/web-components/visualization/gs-genome-data-viewer.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { GenomeDataViewer } from '../../preact/genomeViewer/genome-data-viewer';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -53,9 +52,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': GenomeDataViewerComponent;
         }
     }
 }

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -137,9 +136,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': MutationComparisonComponent;
         }
     }
 }

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -6,10 +6,11 @@ import '../gs-app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
 import mockAminoAcidMutationsByDayAminoAcidMutations from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutations.json';
-import mockAminoAcidMutationsByDayAminoAcidMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutationsOverTime.json';
-import mockByWeekMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/byWeek/mutationsOverTime.json';
+import mockAminoAcidMutationsByDayAminoAcidMutationsOverTimePage1 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutationsByDay/aminoAcidMutationsOverTimePage1.json';
+import mockByWeekMutationsOverTimePage1 from '../../preact/mutationsOverTime/__mockData__/byWeek/mutationsOverTimePage1.json';
 import mockByWeekNucleotideMutations from '../../preact/mutationsOverTime/__mockData__/byWeek/nucleotideMutations.json';
-import mockDefaultMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/defaultMockData/mutationsOverTime.json';
+import mockDefaultMutationsOverTimePage1 from '../../preact/mutationsOverTime/__mockData__/defaultMockData/mutationsOverTimePage1.json';
+import mockDefaultMutationsOverTimePageSize20 from '../../preact/mutationsOverTime/__mockData__/defaultMockData/mutationsOverTimePageSize20.json';
 import mockDefaultNucleotideMutations from '../../preact/mutationsOverTime/__mockData__/defaultMockData/nucleotideMutations.json';
 import mockWithDisplayMutationsMutationsOverTime from '../../preact/mutationsOverTime/__mockData__/withDisplayMutations/mutationsOverTime.json';
 import { type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
@@ -91,11 +92,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
                     matcher: {
                         url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-15',
-                                dateTo: '2024-07-10',
-                            },
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
                             dateRanges: [
                                 { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
                                 { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
@@ -105,12 +102,67 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
                                 { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
                                 { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
                             ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C7113T',
+                                'C12616T',
+                                'A13121T',
+                                'G15372T',
+                                'G17334T',
+                                'T18453C',
+                                'A19722G',
+                                'T21653-',
+                            ],
+                            dateField: 'date',
+                        },
+                        response: {
+                            status: 200,
+                            body: mockDefaultMutationsOverTimePage1,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'downloadData',
+                        url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
+                        body: {
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+                            dateRanges: [
+                                { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
+                                { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
+                                { dateFrom: '2024-03-01', dateTo: '2024-03-31' },
+                                { dateFrom: '2024-04-01', dateTo: '2024-04-30' },
+                                { dateFrom: '2024-05-01', dateTo: '2024-05-31' },
+                                { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
+                                { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
+                            ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C7113T',
+                                'C12616T',
+                                'A13121T',
+                                'G15372T',
+                                'G17334T',
+                                'T18453C',
+                                'A19722G',
+                                'T21653-',
+                                'C21654-',
+                                'T21655-',
+                                'G22111T',
+                                'G22599C',
+                                'T22928C',
+                                'T23011-',
+                                'C23039G',
+                                'C23277T',
+                                'G24872T',
+                            ],
                             dateField: 'date',
                         },
-                        matchPartialBody: true,
                         response: {
                             status: 200,
-                            body: mockDefaultMutationsOverTime,
+                            body: mockDefaultMutationsOverTimePageSize20,
                         },
                     },
                 },
@@ -310,23 +362,30 @@ export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
                     matcher: {
                         url: `${LAPIS_URL}/component/nucleotideMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-15',
-                                dateTo: '2024-02-11',
-                            },
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' },
                             dateRanges: [
                                 { dateFrom: '2024-01-15', dateTo: '2024-01-21' },
                                 { dateFrom: '2024-01-22', dateTo: '2024-01-28' },
                                 { dateFrom: '2024-01-29', dateTo: '2024-02-04' },
                                 { dateFrom: '2024-02-05', dateTo: '2024-02-11' },
                             ],
+                            includeMutations: [
+                                'C44T',
+                                'C774T',
+                                'C1762A',
+                                'C11747T',
+                                'G17562T',
+                                'T18453C',
+                                'G21641T',
+                                'C23277T',
+                                'C29870A',
+                            ],
                             dateField: 'date',
                         },
                         matchPartialBody: true,
                         response: {
                             status: 200,
-                            body: mockByWeekMutationsOverTime,
+                            body: mockByWeekMutationsOverTimePage1,
                         },
                     },
                 },
@@ -365,11 +424,7 @@ export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>>
                     matcher: {
                         url: `${LAPIS_URL}/component/aminoAcidMutationsOverTime`,
                         body: {
-                            filters: {
-                                pangoLineage: 'JN.1*',
-                                dateFrom: '2024-01-20',
-                                dateTo: '2024-01-26',
-                            },
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' },
                             dateRanges: [
                                 { dateFrom: '2024-01-20', dateTo: '2024-01-20' },
                                 { dateFrom: '2024-01-21', dateTo: '2024-01-21' },
@@ -379,12 +434,13 @@ export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>>
                                 { dateFrom: '2024-01-25', dateTo: '2024-01-25' },
                                 { dateFrom: '2024-01-26', dateTo: '2024-01-26' },
                             ],
+                            includeMutations: ['ORF1a:T170I', 'ORF1a:F499L', 'S:T572I'],
                             dateField: 'date',
                         },
                         matchPartialBody: true,
                         response: {
                             status: 200,
-                            body: mockAminoAcidMutationsByDayAminoAcidMutationsOverTime,
+                            body: mockAminoAcidMutationsByDayAminoAcidMutationsOverTimePage1,
                         },
                     },
                 },

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -179,9 +178,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': MutationsOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-mutations.tsx

@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -88,11 +87,11 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Object })
     baselineLapisFilter:
         (Record<string, string | string[] | number | null | boolean | undefined> & {
-              nucleotideMutations?: string[];
-              aminoAcidMutations?: string[];
-              nucleotideInsertions?: string[];
-              aminoAcidInsertions?: string[];
-          })
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        })
         | undefined = undefined;
 
     /**
@@ -169,9 +168,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': MutationsComponent;
         }
     }
 }

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     NumberSequencesOverTime,
@@ -126,9 +125,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -193,9 +192,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': PrevalenceOverTimeComponent;
         }
     }
 }

package/src/web-components/visualization/gs-queries-over-time.tsx

@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { QueriesOverTime } from '../../preact/queriesOverTime/queries-over-time';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
@@ -148,9 +147,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-queries-over-time': QueriesOverTimeComponent;
         }
     }
 }