Update Deps and required changes

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version: 25
 
       - name: Install python dependencies
         run: |

data-viewer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24-alpine AS base
+FROM node:25-alpine AS base
 
 FROM base AS deps
 RUN apk add --no-cache libc6-compat

data-viewer/cypress/e2e/basic-loading/loading.cy.js

@@ -1,7 +1,7 @@
 describe("Basic loading tests for test nexus file", () => {
   beforeEach(() => {
     cy.visit(
-      "http://localhost:3000/view/mari/20024/MAR29531_10.5meV_sa.nxspe",
+      "http://localhost:3000/view/MARI/20024/MAR29531_10.5meV_sa.nxspe",
       { failOnStatusCode: false },
     );
   });
@@ -18,7 +18,7 @@ describe("Test for loading nexus file with space in name", () => {
   beforeEach(() => {
     // This URL DOES have a whitespace, but the underline in most IDEs makes it look like an underscore
     cy.visit(
-      "http://localhost:3000/view/mari/20024/MAR29531 10.5meV_sa.nxspe",
+      "http://localhost:3000/view/MARI/20024/MAR29531 10.5meV_sa.nxspe",
       { failOnStatusCode: false },
     );
   });

data-viewer/cypress/support/component.ts

@@ -1,6 +1,6 @@
 import "./commands";
 
-import { mount } from "cypress/react18";
+import { mount } from "cypress/react";
 
 declare global {
   namespace Cypress {

data-viewer/package.json

@@ -9,24 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
-    "@h5web/app": "^12.0.1",
-    "@mui/material": "6.1.4",
-    "@mui/styled-engine-sc": "6.1.4",
-    "next": "14.2.30",
-    "react": "^18",
-    "react-dom": "^18",
-    "styled-components": "6.1.13"
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@h5web/app": "^16.0.1",
+    "@mui/material": "7.3.8",
+    "@mui/styled-engine-sc": "7.3.8",
+    "next": "14.2.35",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "6.3.11"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18",
-    "cypress": "^13.15.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.5",
-    "prettier": "^3.3.3",
+    "@types/node": "^25",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19",
+    "cypress": "^15.11.0",
+    "eslint": "^10",
+    "eslint-config-next": "16.1.6",
+    "prettier": "^3.8.1",
     "typescript": "^5"
   }
 }

data-viewer/src/app/view/[instrument]/[experimentNumber]/[filename]/page.tsx

@@ -2,18 +2,24 @@ import NexusViewer from "@/components/NexusViewer";
 import "../../../../globals.css";
 import TextViewer from "@/components/TextViewer";
 
-export default function DataPage({
+export default async function DataPage({
   params,
 }: {
-  params: { instrument: string; experimentNumber: string; filename: string };
+  params: Promise<{
+    instrument: string;
+    experimentNumber: string;
+    filename: string;
+  }>;
 }) {
   // We expect a route of /instrument_name/experiment_number/filename
   // This will result in a slug list of [instrument_name, experiment_number, filename]
-  const { instrument, experimentNumber, filename } = params;
+
+  const { instrument, experimentNumber, filename } = await params;
+
   const fileExtension = filename.split(".").pop() ?? "";
   const apiUrl = process.env.API_URL ?? "http://localhost:8000";
-  // Files to be viewed with the TextViewer, as text files
   const textFiles: Array<string> = ["txt", "csv", "gss", "abc", "prm"];
+
   return (
     <main className="h5-container">
       {textFiles.includes(fileExtension) ? (

data-viewer/src/components/NexusViewer.tsx

@@ -1,106 +1,109 @@
 "use client";
 import "@h5web/app/dist/styles.css";
-import { App, H5GroveProvider } from "@h5web/app";
-import { useEffect, useState } from "react";
+import { App, H5GroveProvider, createBasicFetcher } from "@h5web/app";
+import { useEffect, useState, useMemo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { CircularProgress, Stack } from "@mui/material";
 import { FileQueryUrl } from "@/components/utils/FileQueryUrl";
 import { Fallback } from "@/components/utils/FallbackPage";
 
 export default function NexusViewer(props: {
-  filename: string;
-  apiUrl: string;
-  instrument?: string;
-  experimentNumber?: string;
-  userNumber?: string;
+    filename: string;
+    apiUrl: string;
+    instrument?: string;
+    experimentNumber?: string;
+    userNumber?: string;
 }) {
-  // We need to turn the env var into a full url as the h5provider can not take just the route.
-  // Typically, we expect API_URL env var to be /plottingapi in staging and production
-  const [filepath, setFilePath] = useState<string>("");
-  const [token, setToken] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(true);
-  const [groveApiUrl, setApiUrl] = useState<string>(props.apiUrl);
+    // We need to turn the env var into a full url as the h5provider can not take just the route.
+    // Typically, we expect API_URL env var to be /plottingapi in staging and production
+    const [filepath, setFilePath] = useState<string>("");
+    const [token, setToken] = useState<string>("");
+    const [loading, setLoading] = useState<boolean>(true);
+    const [groveApiUrl, setApiUrl] = useState<string>(props.apiUrl);
 
-  useEffect(() => {
-    setLoading(true);
-    const loadedToken = localStorage.getItem("scigateway:token") ?? "";
-    setToken(loadedToken);
-    setApiUrl(
-      props.apiUrl.includes("localhost")
-        ? props.apiUrl
-        : `${window.location.protocol}//${window.location.hostname}/plottingapi`,
-    );
+    useEffect(() => {
+        setLoading(true);
+        const loadedToken = localStorage.getItem("scigateway:token") ?? "";
+        setToken(loadedToken);
+        setApiUrl(
+            props.apiUrl.includes("localhost")
+                ? props.apiUrl
+                : `${window.location.protocol}//${window.location.hostname}/plottingapi`,
+        );
 
-    const fileQueryUrl = FileQueryUrl(
-      props.apiUrl,
-      props.instrument,
-      props.experimentNumber,
-      props.userNumber,
-    );
-    if (fileQueryUrl == null) {
-      throw new Error(
-        "The API file query URL was not rendered correctly and returned null",
-      );
-    }
+        const fileQueryUrl = FileQueryUrl(
+            props.apiUrl,
+            props.instrument,
+            props.experimentNumber,
+            props.userNumber,
+        );
+        if (fileQueryUrl == null) {
+            throw new Error(
+                "The API file query URL was not rendered correctly and returned null",
+            );
+        }
 
-    const fileQueryParams = `filename=${props.filename}`;
-    const headers: { [key: string]: string } = {
-      "Content-Type": "application/json",
-    };
-    if (loadedToken != "") {
-      headers["Authorization"] = `Bearer ${loadedToken}`;
-    }
+        const fileQueryParams = `filename=${props.filename}`;
+        const headers: { [key: string]: string } = {
+            "Content-Type": "application/json",
+        };
+        if (loadedToken != "") {
+            headers["Authorization"] = `Bearer ${loadedToken}`;
+        }
 
-    fetch(`${fileQueryUrl}?${fileQueryParams}`, { method: "GET", headers })
-      .then((res) => res.text())
-      .then((data) => {
-        const filepath_to_use = data
-          .split("%20")
-          .join(" ")
-          .split("%C")
-          .join(",")
-          .replace(/"/g, "");
-        setFilePath(filepath_to_use);
-      })
-      .catch((error) => Error(error))
-      .finally(() => setLoading(false));
-  }, [
-    props.apiUrl,
-    props.instrument,
-    props.experimentNumber,
-    props.userNumber,
-    props.filename,
-  ]);
+        fetch(`${fileQueryUrl}?${fileQueryParams}`, { method: "GET", headers })
+            .then((res) => res.text())
+            .then((data) => {
+                const filepath_to_use = data
+                    .split("%20")
+                    .join(" ")
+                    .split("%C")
+                    .join(",")
+                    .replace(/"/g, "");
+                setFilePath(filepath_to_use);
+            })
+            .catch((error) => Error(error))
+            .finally(() => setLoading(false));
+    }, [
+        props.apiUrl,
+        props.instrument,
+        props.experimentNumber,
+        props.userNumber,
+        props.filename,
+    ]);
 
-  return (
-    <ErrorBoundary FallbackComponent={Fallback}>
-      {loading ? (
-        <Stack
-          spacing={2}
-          sx={{
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100%",
-            width: "100%",
-          }}
-        >
-          <p>Finding your file</p>
-          <CircularProgress />
-        </Stack>
-      ) : (
-        <H5GroveProvider
-          url={groveApiUrl}
-          filepath={filepath}
-          axiosConfig={{
-            params: { file: filepath },
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-          }}
-        >
-          <App propagateErrors />
-        </H5GroveProvider>
-      )}
-    </ErrorBoundary>
-  );
-}
+    const fetcher = useMemo(() => {
+        const headers: Record<string, string> = {};
+        if (token) {
+            headers["Authorization"] = `Bearer ${token}`;
+        }
+        return createBasicFetcher({ headers });
+    }, [token]);
+
+    return (
+        <ErrorBoundary FallbackComponent={Fallback}>
+            {loading ? (
+                <Stack
+                    spacing={2}
+                    sx={{
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "100%",
+                        width: "100%",
+                    }}
+                >
+                    <p>Finding your file</p>
+                    <CircularProgress />
+                </Stack>
+            ) : (
+                <H5GroveProvider
+                    url={groveApiUrl}
+                    filepath={filepath}
+                    fetcher={fetcher}
+                >
+                    <App propagateErrors />
+                </H5GroveProvider>
+            )}
+        </ErrorBoundary>
+    );
+}

data-viewer/tsconfig.json

@@ -32,9 +32,12 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "cypress",
+    "cypress.config.ts"
   ]
 }