chore(website): bump react, react-dom and @types/react in /website

website/package.json

@@ -28,8 +28,8 @@
         "axios": "^1.7.9",
         "dayjs": "^1.11.13",
         "patch-package": "^8.0.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "react-toastify": "^11.0.2",
         "uuid": "^11.0.5",
         "winston": "^3.17.0",
@@ -47,8 +47,8 @@
         "@playwright/test": "^1.49.1",
         "@tanstack/eslint-plugin-query": "^5.62.16",
         "@types/node": "^22.10.6",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.6",
+        "@types/react-dom": "^19.0.3",
         "@types/topojson-specification": "^1.0.5",
         "@typescript-eslint/eslint-plugin": "^8.20.0",
         "@typescript-eslint/parser": "^8.20.0",

website/src/components/genspectrum/GsDateRangeSelector.tsx

@@ -19,7 +19,7 @@ export function GsDateRangeSelector({
     earliestDate?: string;
     width?: string;
 }) {
-    const dateRangeSelectorRef = useRef<HTMLElement>();
+    const dateRangeSelectorRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const handleDateRangeOptionChange = (event: DateRangeOptionChangedEvent) => {
@@ -57,7 +57,7 @@ export function GsDateRangeSelector({
     return (
         <gs-date-range-selector
             ref={dateRangeSelectorRef}
-            dateRangeOptions={JSON.stringify(dateRangeOptions)}
+            dateRangeOptions={dateRangeOptions}
             earliestDate={earliestDate}
             initialValue={isCustom ? undefined : initialValue?.label}
             initialDateFrom={isCustom ? initialValue.dateFrom : undefined}

website/src/components/genspectrum/GsLineageFilter.tsx

@@ -15,7 +15,7 @@ export function GsLineageFilter<Lineage extends string>({
     width?: string;
     onLineageChange?: (lineage: { [key in Lineage]: string | undefined }) => void;
 }) {
-    const lineageFilterRef = useRef<HTMLElement>();
+    const lineageFilterRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const handleLineageChange = (event: CustomEvent) => {

website/src/components/genspectrum/GsLocationFilter.tsx

@@ -15,7 +15,7 @@ export function GsLocationFilter<Field extends string>({
     onLocationChange?: (location: { [key in Field]: string | undefined }) => void;
     initialValue?: string;
 }) {
-    const locationFilterRef = useRef<HTMLElement>();
+    const locationFilterRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const handleLocationChange = (event: CustomEvent) => {
@@ -36,7 +36,7 @@ export function GsLocationFilter<Field extends string>({
 
     return (
         <gs-location-filter
-            fields={JSON.stringify(fields)}
+            fields={fields}
             placeholderText={placeholderText}
             width={width}
             ref={locationFilterRef}

website/src/components/genspectrum/GsMutationFilter.tsx

@@ -36,11 +36,5 @@ export function GsMutationFilter({
         };
     }, [onMutationChange]);
 
-    return (
-        <gs-mutation-filter
-            width={width}
-            initialValue={JSON.stringify(initialValue)}
-            ref={mutationFilterRef}
-        ></gs-mutation-filter>
-    );
+    return <gs-mutation-filter width={width} initialValue={initialValue} ref={mutationFilterRef}></gs-mutation-filter>;
 }

website/src/components/genspectrum/GsNumberSequencesOverTime.tsx

@@ -26,9 +26,9 @@ export function GsNumberSequencesOverTime({
 }) {
     return (
         <gs-number-sequences-over-time
-            lapisFilter={JSON.stringify(lapisFilter)}
+            lapisFilter={lapisFilter}
             lapisDateField={lapisDateField}
-            views={JSON.stringify(views)}
+            views={views}
             width={width}
             height={height}
             granularity={granularity}

website/src/components/genspectrum/GsPrevalenceOverTime.tsx

@@ -32,12 +32,12 @@ export function GsPrevalenceOverTime({
 }) {
     return (
         <gs-prevalence-over-time
-            numeratorFilter={JSON.stringify(numeratorFilter)}
-            denominatorFilter={JSON.stringify(denominatorFilter)}
+            numeratorFilter={numeratorFilter}
+            denominatorFilter={denominatorFilter}
             granularity={granularity}
             smoothingWindow={smoothingWindow}
-            views={JSON.stringify(views)}
-            confidenceIntervalMethods={JSON.stringify(confidenceIntervalMethods)}
+            views={views}
+            confidenceIntervalMethods={confidenceIntervalMethods}
             width={width}
             height={height}
             lapisDateField={lapisDateField}

website/src/components/genspectrum/GsTextInput.tsx

@@ -15,20 +15,20 @@ export function GsTextInput<LapisField extends string>({
     onInputChange?: (input: { [key in LapisField]: string | undefined }) => void;
     initialValue?: string | undefined;
 }) {
-    const textInputRef = useRef<HTMLElement>();
+    const textInputRef = useRef<HTMLElement>(null);
 
     useEffect(() => {
         const handleTextInputChange = (event: CustomEvent) => {
             onInputChange(event.detail);
         };
 
         const currentInputRef = textInputRef.current;
-        if (currentInputRef !== undefined) {
+        if (currentInputRef) {
             currentInputRef.addEventListener('gs-text-input-changed', handleTextInputChange);
         }
 
         return () => {
-            if (currentInputRef !== undefined) {
+            if (currentInputRef) {
                 currentInputRef.removeEventListener('gs-text-input-changed', handleTextInputChange);
             }
         };

website/src/styles/containers/Modal.tsx

@@ -13,7 +13,7 @@ const modalSize = {
 type ModalProps = (
     | {
           /** set this when using from React and open it via `modalRef.current?.showModal()` */
-          modalRef: RefObject<HTMLDialogElement>;
+          modalRef: RefObject<HTMLDialogElement | null>;
           id?: undefined;
       }
     | {