chore(website): update to React 19

website/package.json

@@ -36,8 +36,8 @@
         "dayjs": "^1.11.20",
         "katex": "^0.16.38",
         "patch-package": "^8.0.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "react-katex": "^3.1.0",
         "react-toastify": "^11.0.5",
         "uuid": "^11.1.0",
@@ -60,8 +60,8 @@
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.5.2",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
         "@types/react-katex": "^3.0.4",
         "@types/topojson-specification": "^1.0.5",
         "@typescript-eslint/eslint-plugin": "^8.57.1",

website/src/components/genspectrum/AdvancedQueryFilter.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type FC, useEffect, useState } from 'react';
+import { type InputEvent, type FC, useEffect, useState } from 'react';
 
 export const advancedQueryUrlParamForVariant = 'advancedQueryVariant';
 export const advancedQueryUrlParam = 'advancedQuery';
@@ -29,8 +29,8 @@ export const AdvancedQueryFilter: FC<AdvancedQueryFilterProps> = ({ value, onInp
                 className='input input-bordered w-full'
                 placeholder={'Advanced query: A123T & ins_123:TA'}
                 value={inputValue}
-                onInput={(event: ChangeEvent<HTMLInputElement>) => {
-                    const newValue = event.target.value;
+                onInput={(event: InputEvent<HTMLInputElement>) => {
+                    const newValue = event.currentTarget.value;
                     setInputValue(newValue === '' ? undefined : newValue);
                 }}
                 onBlur={() => {

website/src/components/genspectrum/GsAggregate.tsx

@@ -17,9 +17,9 @@ export const GsAggregate: FC<GsAggregateProps> = ({ title, height, fields, lapis
     return (
         <ComponentWrapper title={title} height={height}>
             <gs-aggregate
-                views={JSON.stringify(views)}
-                fields={JSON.stringify(fields)}
-                lapisFilter={JSON.stringify(lapisFilter)}
+                views={views}
+                fields={fields}
+                lapisFilter={lapisFilter}
                 pageSize={pageSize ?? defaultTablePageSize}
                 width='100%'
                 height={height ? '100%' : undefined}

website/src/components/genspectrum/GsDateRangeFilter.tsx

@@ -24,7 +24,7 @@ export function GsDateRangeFilter({
     dateRangeOptions?: DateRangeOption[];
     width?: string;
 }) {
-    const dateRangeSelectorRef = useRef<HTMLElement>();
+    const dateRangeSelectorRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const currentDateRangeSelectorRef = dateRangeSelectorRef.current;
@@ -73,8 +73,8 @@ export function GsDateRangeFilter({
     return (
         <gs-date-range-filter
             ref={dateRangeSelectorRef}
-            dateRangeOptions={JSON.stringify(dateRangeOptions)}
-            value={JSON.stringify(isCustom ? value : value?.label)}
+            dateRangeOptions={dateRangeOptions}
+            value={(isCustom ? value : value?.label) ?? null}
             lapisDateField={lapisDateField}
             width={width}
         ></gs-date-range-filter>

website/src/components/genspectrum/GsLineageFilter.tsx

@@ -24,7 +24,7 @@ export function GsLineageFilter<Lineage extends string>({
     hideCounts?: true;
     multiSelect?: true;
 }) {
-    const lineageFilterRef = useRef<HTMLElement>();
+    const lineageFilterRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const currentLineageFilterRef = lineageFilterRef.current;
@@ -63,16 +63,14 @@ export function GsLineageFilter<Lineage extends string>({
         };
     }, [onLineageMultiChange]);
 
-    const valueProperty = value === undefined ? (multiSelect ? '[]' : '') : multiSelect ? JSON.stringify(value) : value;
-
     return (
         <gs-lineage-filter
             lapisField={lapisField}
             placeholderText={placeholderText}
-            value={valueProperty}
+            value={value ?? (multiSelect ? [] : '')}
             width={width}
             ref={lineageFilterRef}
-            lapisFilter={JSON.stringify(lapisFilter)}
+            lapisFilter={lapisFilter}
             hideCounts={hideCounts}
             multiSelect={multiSelect}
         ></gs-lineage-filter>

website/src/components/genspectrum/GsLocationFilter.tsx

@@ -22,7 +22,7 @@ export function GsLocationFilter<Field extends string>({
     value?: LapisLocation;
     hideCounts?: true;
 }) {
-    const locationFilterRef = useRef<HTMLElement>();
+    const locationFilterRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const currentLocationFilterRef = locationFilterRef.current;
@@ -42,12 +42,12 @@ export function GsLocationFilter<Field extends string>({
 
     return (
         <gs-location-filter
-            fields={JSON.stringify(fields)}
+            fields={fields}
             placeholderText={placeholderText}
-            lapisFilter={JSON.stringify(lapisFilter)}
+            lapisFilter={lapisFilter}
             width={width}
             ref={locationFilterRef}
-            value={JSON.stringify(value)}
+            value={value}
             hideCounts={hideCounts}
         ></gs-location-filter>
     );

website/src/components/genspectrum/GsMutationComparison.tsx

@@ -1,4 +1,4 @@
-import type { NamedLapisFilter, SequenceType } from '@genspectrum/dashboard-components/util';
+import { type NamedLapisFilter, type SequenceType, views } from '@genspectrum/dashboard-components/util';
 import type { FC } from 'react';
 
 import { defaultTablePageSize } from '../../views/View';
@@ -23,9 +23,9 @@ export const GsMutationComparison: FC<GsMutationComparisonProps> = ({
             height={height}
         >
             <gs-mutation-comparison
-                lapisFilters={JSON.stringify(lapisFilters)}
+                lapisFilters={lapisFilters}
                 sequenceType={sequenceType}
-                views='["venn", "table"]'
+                views={[views.venn, views.table]}
                 pageSize={pageSize ?? defaultTablePageSize}
                 width='100%'
                 height={height ? '100%' : undefined}

website/src/components/genspectrum/GsMutationFilter.tsx

@@ -20,7 +20,7 @@ export function GsMutationFilter({
     enabledMutationTypes?: MutationType[];
     onMutationChange: (mutationFilter: MutationFilter | undefined) => void;
 }) {
-    const mutationFilterRef = useRef<HTMLElement>();
+    const mutationFilterRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const currentMutationFilterRef = mutationFilterRef.current;
@@ -48,10 +48,8 @@ export function GsMutationFilter({
             </div>
             <gs-mutation-filter
                 width={width}
-                initialValue={JSON.stringify(initialValue ?? [])}
-                enabledMutationTypes={
-                    enabledMutationTypes !== undefined ? JSON.stringify(enabledMutationTypes) : undefined
-                }
+                initialValue={initialValue ?? []}
+                enabledMutationTypes={enabledMutationTypes}
                 ref={mutationFilterRef}
             ></gs-mutation-filter>
         </label>

website/src/components/genspectrum/GsMutations.tsx

@@ -1,4 +1,4 @@
-import { type LapisFilter, type SequenceType } from '@genspectrum/dashboard-components/util';
+import { type LapisFilter, type SequenceType, views } from '@genspectrum/dashboard-components/util';
 import { type FC } from 'react';
 
 import { defaultTablePageSize } from '../../views/View.ts';
@@ -25,12 +25,10 @@ export const GsMutations: FC<GsMutationsProps> = ({
             height={height}
         >
             <gs-mutations
-                lapisFilter={JSON.stringify(lapisFilter)}
-                baselineLapisFilter={
-                    baselineLapisFilter === undefined ? undefined : JSON.stringify(baselineLapisFilter)
-                }
+                lapisFilter={lapisFilter}
+                baselineLapisFilter={baselineLapisFilter}
                 sequenceType={sequenceType}
-                views='["grid", "table", "insertions"]'
+                views={[views.grid, views.table, views.insertions]}
                 pageSize={pageSize ?? defaultTablePageSize}
                 width='100%'
                 height={height ? '100%' : undefined}

website/src/components/genspectrum/GsMutationsOverTime.tsx

@@ -43,18 +43,16 @@ export const GsMutationsOverTime: FC<GsMutationsOverTimeProps> = ({
             <gs-mutations-over-time
                 width='100%'
                 height={height ? '100%' : undefined}
-                lapisFilter={JSON.stringify(lapisFilter)}
+                lapisFilter={lapisFilter}
                 sequenceType={sequenceType}
-                views={JSON.stringify([views.grid])}
+                views={[views.grid]}
                 granularity={granularity}
                 lapisDateField={lapisDateField}
-                displayMutations={displayMutations ? JSON.stringify(displayMutations) : undefined}
+                displayMutations={displayMutations}
                 hideGaps={hideGaps}
-                pageSizes={JSON.stringify(pageSizes ?? [10, 20, 30, 40, 50])}
-                initialMeanProportionInterval={
-                    initialMeanProportionInterval ? JSON.stringify(initialMeanProportionInterval) : undefined
-                }
-                customColumns={customColumns ? JSON.stringify(customColumns) : undefined}
+                pageSizes={pageSizes ?? [10, 20, 30, 40, 50]}
+                initialMeanProportionInterval={initialMeanProportionInterval}
+                customColumns={customColumns}
             ></gs-mutations-over-time>
         </ComponentWrapper>
     );

website/src/components/genspectrum/GsNumerRangeFilter.tsx → website/src/components/genspectrum/GsNumberRangeFilter.tsx

@@ -8,7 +8,7 @@ import {
 import { useEffect, useRef } from 'react';
 import '@genspectrum/dashboard-components/components';
 
-export function GsNumerRangeFilter({
+export function GsNumberRangeFilter({
     lapisField,
     width,
     onNumberRangeChanged = () => {},
@@ -27,11 +27,11 @@ export function GsNumerRangeFilter({
     sliderMax?: number;
     sliderStep?: number;
 }) {
-    const numberRangeFilterRef = useRef<HTMLElement>();
+    const numberRangeFilterRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const currentInputRef = numberRangeFilterRef.current;
-        if (currentInputRef === undefined) {
+        if (currentInputRef === null) {
             return;
         }
 
@@ -57,7 +57,7 @@ export function GsNumerRangeFilter({
             ref={numberRangeFilterRef}
             lapisField={lapisField}
             width={width}
-            value={JSON.stringify(value ?? {})}
+            value={value ?? {}}
             sliderMin={sliderMin}
             sliderMax={sliderMax}
             sliderStep={sliderStep}

website/src/components/genspectrum/GsNumberSequencesOverTime.tsx

@@ -29,9 +29,9 @@ export function GsNumberSequencesOverTime({
     return (
         <ComponentWrapper title='Number sequences' height={height}>
             <gs-number-sequences-over-time
-                lapisFilters={JSON.stringify(lapisFilters)}
+                lapisFilters={lapisFilters}
                 lapisDateField={lapisDateField}
-                views={JSON.stringify(views)}
+                views={views}
                 width={width}
                 height={height}
                 granularity={granularity}

website/src/components/genspectrum/GsPrevalenceOverTime.tsx

@@ -40,12 +40,12 @@ export const GsPrevalenceOverTime: FC<GsPrevalenceOverTimeProps> = ({
     return (
         <ComponentWrapper title='Prevalence over time' height={height}>
             <gs-prevalence-over-time
-                numeratorFilters={JSON.stringify(numeratorFilters)}
-                denominatorFilter={JSON.stringify(denominatorFilter)}
+                numeratorFilters={numeratorFilters}
+                denominatorFilter={denominatorFilter}
                 granularity={granularity}
                 smoothingWindow={smoothingWindow}
-                views={JSON.stringify(views)}
-                confidenceIntervalMethods={JSON.stringify(confidenceIntervalMethods)}
+                views={views}
+                confidenceIntervalMethods={confidenceIntervalMethods}
                 width={width}
                 height={height ? '100%' : undefined}
                 lapisDateField={lapisDateField}

website/src/components/genspectrum/GsQueriesOverTime.tsx

@@ -43,17 +43,15 @@ export const GsQueriesOverTime: FC<GsQueriesOverTimeProps> = ({
             <gs-queries-over-time
                 width='100%'
                 height={height ? '100%' : undefined}
-                lapisFilter={JSON.stringify(lapisFilter)}
-                queries={JSON.stringify(queries)}
-                views={JSON.stringify([views.grid])}
+                lapisFilter={lapisFilter}
+                queries={queries}
+                views={[views.grid]}
                 granularity={granularity}
                 lapisDateField={lapisDateField}
                 hideGaps={hideGaps}
-                pageSizes={JSON.stringify(pageSizes ?? [10, 20, 30, 40, 50])}
-                initialMeanProportionInterval={
-                    initialMeanProportionInterval ? JSON.stringify(initialMeanProportionInterval) : undefined
-                }
-                customColumns={customColumns ? JSON.stringify(customColumns) : undefined}
+                pageSizes={pageSizes ?? [10, 20, 30, 40, 50]}
+                initialMeanProportionInterval={initialMeanProportionInterval}
+                customColumns={customColumns}
             ></gs-queries-over-time>
         </ComponentWrapper>
     );

website/src/components/genspectrum/GsRelativeGrowthAdvantage.tsx

@@ -20,9 +20,9 @@ export const GsRelativeGrowthAdvantage: FC<GsRelativeGrowthAdvantageProps> = ({
     return (
         <ComponentWrapper title='Relative growth advantage' height={height}>
             <gs-relative-growth-advantage
-                numeratorFilter={JSON.stringify(numeratorFilter)}
-                denominatorFilter={JSON.stringify(denominatorFilter)}
-                generationTime='7'
+                numeratorFilter={numeratorFilter}
+                denominatorFilter={denominatorFilter}
+                generationTime={7}
                 pageSize={defaultTablePageSize}
                 width='100%'
                 height={height ? '100%' : undefined}

website/src/components/genspectrum/GsSequencesByLocation.tsx

@@ -1,4 +1,4 @@
-import { type LapisFilter } from '@genspectrum/dashboard-components/util';
+import { type LapisFilter, views } from '@genspectrum/dashboard-components/util';
 import type { FC } from 'react';
 
 import { getSequencesByLocationMapData } from '../../util/getSequencesByLocationMapData';
@@ -30,20 +30,20 @@ export const GsSequencesByLocation: FC<GsSequencesByLocationProps> = ({
                 <gs-sequences-by-location
                     key={mapName} // Force remount when mapName changes - otherwise React seems to set props to null that were set before which is invalid for the web component
                     lapisLocationField={lapisLocationField}
-                    lapisFilter={JSON.stringify(lapisFilter)}
+                    lapisFilter={lapisFilter}
                     pageSize={pageSize ?? defaultTablePageSize}
-                    views={JSON.stringify(['table'])}
+                    views={[views.table]}
                     width='100%'
                     height={height ? '100%' : undefined}
                 />
             ) : (
                 <gs-sequences-by-location
                     key={mapName}
                     lapisLocationField={lapisLocationField}
-                    lapisFilter={JSON.stringify(lapisFilter)}
+                    lapisFilter={lapisFilter}
                     pageSize={pageSize ?? defaultTablePageSize}
-                    views={JSON.stringify(['map', 'table'])}
-                    mapSource={JSON.stringify(mapData.mapSource)}
+                    views={[views.map, views.table]}
+                    mapSource={mapData.mapSource}
                     width='100%'
                     height={height ? '100%' : undefined}
                     zoom={mapData.zoom}

website/src/components/genspectrum/GsStatistics.tsx

@@ -13,8 +13,8 @@ export const GsStatistics: FC<GsStatisticsProps> = ({ numeratorFilter, denominat
         <div className='h-56 sm:h-32'>
             <ComponentHeadline title='Stats' />
             <gs-statistics
-                numeratorFilter={JSON.stringify(numeratorFilter)}
-                denominatorFilter={JSON.stringify(denominatorFilter)}
+                numeratorFilter={numeratorFilter}
+                denominatorFilter={denominatorFilter}
                 width='100%'
                 height='100%'
             />

website/src/components/genspectrum/GsTextFilter.tsx

@@ -20,7 +20,7 @@ export function GsTextFilter<LapisField extends string>({
     value?: string | undefined;
     hideCounts?: true;
 }) {
-    const textInputRef = useRef<HTMLElement>();
+    const textInputRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const currentInputRef = textInputRef.current;
@@ -43,7 +43,7 @@ export function GsTextFilter<LapisField extends string>({
             ref={textInputRef}
             lapisField={lapisField}
             placeholderText={placeholderText}
-            lapisFilter={JSON.stringify(lapisFilter)}
+            lapisFilter={lapisFilter}
             width={width}
             value={value ?? ''}
             hideCounts={hideCounts}

website/src/components/genspectrum/VariantQueryFilter.tsx

@@ -1,11 +1,11 @@
-import type { ChangeEventHandler } from 'react';
+import type { InputEventHandler } from 'react';
 
 export function VariantQueryFilter({
     value,
     onInput,
 }: {
     value?: string;
-    onInput?: ChangeEventHandler<HTMLInputElement>;
+    onInput?: InputEventHandler<HTMLInputElement>;
 }) {
     return (
         <label className='form-control'>