Migrate to next js

Signed-off-by: Anubhav <[email protected]>

frontend/.eslintrc.json

@@ -1,21 +1,24 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "import"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/errors",
-    "plugin:import/typescript",
-    "plugin:import/warnings",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "prettier"
-  ],
+  "extends": ["next/core-web-vitals","eslint:recommended",
+  "plugin:@typescript-eslint/eslint-recommended",
+  "plugin:@typescript-eslint/recommended",
+  "plugin:import/errors",
+  "plugin:import/typescript",
+  "plugin:import/warnings",
+  "plugin:prettier/recommended",
+  "plugin:react/recommended",
+  "prettier"],
+  "plugins": ["testing-library","@typescript-eslint", "import"],
   "overrides": [
+    // Only uses Testing Library lint rules in test files
     {
-      "files": ["**/*.tsx"],
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"],
       "rules": {
         "react/prop-types": "off",
         "@typescript-eslint/ban-ts-comment": "off"
@@ -25,4 +28,4 @@
   "rules": {
     "import/order": "error"
   }
-}
+}

frontend/.gitignore

@@ -8,19 +8,28 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# RADIS App logo type declaration
-!./src/.radis.d.ts
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+[http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.ts`.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/src/__test__/App.test.tsx → frontend/__test__/App.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable react/react-in-jsx-scope */
 import { render } from "@testing-library/react";
-import App from "../App";
+import App from "../app/App";
 test("renders the page", () => {
   render(<App />);
 });

frontend/src/__test__/Integration.test.tsx → frontend/__test__/Integration.test.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen } from "@testing-library/react";
-import App from "../App";
-import { Database as TDatabase } from "../components/types";
+import '@testing-library/jest-dom/extend-expect';
+import App from "../app/App";
+import { Database as TDatabase } from "../app/components/types";
 describe("testing: rendering slit switch based on mode ", () => {
   test("testing : when mode is  absorbance*  the simulate slit switch is not in  the DOM", () => {
     render(<App />);

frontend/src/__test__/unit_test/EqililibriumSwitch.test.tsx → frontend/__test__/unit_test/EqililibriumSwitch.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable react/react-in-jsx-scope */
 import { render, screen } from "@testing-library/react";
-import App from "../../App";
+import App from "../../app/App";
 describe("testing::equilibrium switch", () => {
   test("testing: equilibrium switch is in the DOM", () => {
     render(<App />);

frontend/src/__test__/unit_test/PathLength.test.tsx → frontend/__test__/unit_test/PathLength.test.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import App from "../../app/App";
 describe("testing pathLength field ", () => {
   test("testing pathLength field render with defaultValue and perfectly visible", () => {
     render(<App />);

frontend/src/__test__/unit_test/Pressure.test.tsx → frontend/__test__/unit_test/Pressure.test.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import App from "../../app/App";
 describe("testing pressure field ", () => {
   test("testing pressure field render with defaultValue and perfectly visible", () => {
     render(<App />);

frontend/src/__test__/unit_test/Tgas.test.tsx → frontend/__test__/unit_test/Tgas.test.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import App from "../../app/App";
 describe("testing tgas field ", () => {
   test("testing tgas field render with defaultValue and perfectly visible", () => {
     render(<App />);

frontend/src/__test__/unit_test/Trot.test.tsx → frontend/__test__/unit_test/Trot.test.tsx

@@ -2,36 +2,45 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import App from "../../app/App";
+
 describe("testing trot field ", () => {
   test("testing trot rendered but not visible if non-equilibrium-switch* is not checked", () => {
     render(<App />);
-    const input = screen.queryByTestId("trot-testid") as HTMLElement;
+    const input = screen.queryByTestId("trot-testid");
     expect(input).not.toBeInTheDocument();
   });
-  test("testing trot rendered and visible if non-equilibrium-switch* is checked", () => {
+
+  test("testing trot rendered and visible if non-equilibrium-switch* is checked", async () => {
     render(<App />);
     const button = screen.getByTestId("non-equilibrium-switch-testid");
     user.click(button);
-    const input = screen.queryByTestId("trot-testid") as HTMLElement;
+    // Use `waitFor` to wait for the input element to appear
+    const input = await screen.findByTestId("trot-testid");
     expect(input).toBeVisible();
     expect(input).toBeInTheDocument();
   });
-  test("testing trot rendering with defaultValue if non-equilibrium-switch* is checked", () => {
+
+  test("testing trot rendering with defaultValue if non-equilibrium-switch* is checked", async () => {
     render(<App />);
     const button = screen.getByTestId("non-equilibrium-switch-testid");
     user.click(button);
-    const input = screen.queryByTestId("trot-testid") as HTMLElement;
-    expect(input).toHaveValue(300);
+
+    // Use `waitFor` to wait for the input element to appear
+    const input = await screen.findByTestId("trot-testid");
+
+    expect(input).toHaveAttribute("value", "300");
   });
-  test("testing trot rendered with user* given value if non-equilibrium-switch* is checked", () => {
+
+  test("testing trot rendered with user* given value if non-equilibrium-switch* is checked", async () => {
     render(<App />);
     const button = screen.getByTestId("non-equilibrium-switch-testid");
     user.click(button);
-    const input = screen.queryByTestId("trot-testid") as HTMLElement;
-    fireEvent.input(input, {
-      target: { value: 100 },
-    });
+
+    // Use `waitFor` to wait for the input element to appear
+    const input = await screen.findByTestId("trot-testid");
+    fireEvent.input(input, { target: { value: 100 } });
+
     expect(input).toHaveValue(100);
   });
 });

frontend/src/__test__/unit_test/Tvib.test.tsx → frontend/__test__/unit_test/Tvib.test.tsx

@@ -2,33 +2,38 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import App from "../../app/App";
+
 describe("testing tvib field ", () => {
   test("testing tvib rendered but not visible if non-equilibrium-switch* is not checked", () => {
     render(<App />);
-    const input = screen.queryByTestId("tvib-testid") as HTMLElement;
+    const input = screen.queryByTestId("tvib-testid");
     expect(input).not.toBeInTheDocument();
   });
-  test("testing tvib rendered and visible if non-equilibrium-switch* is checked", () => {
+
+  test("testing tvib rendered and visible if non-equilibrium-switch* is checked", async () => {
     render(<App />);
     const button = screen.getByTestId("non-equilibrium-switch-testid");
     user.click(button);
-    const input = screen.queryByTestId("tvib-testid") as HTMLElement;
+    // Use `waitFor` to wait for the input element to appear
+    const input = await screen.findByTestId("tvib-testid");
     expect(input).toBeVisible();
     expect(input).toBeInTheDocument();
   });
-  test("testing tvib rendering with defaultValue if non-equilibrium-switch* is checked", () => {
+
+  test("testing tvib rendering with defaultValue if non-equilibrium-switch* is checked", async () => {
     render(<App />);
     const button = screen.getByTestId("non-equilibrium-switch-testid");
     user.click(button);
-    const input = screen.queryByTestId("tvib-testid") as HTMLElement;
+    const input = await screen.findByTestId("tvib-testid");
     expect(input).toHaveValue(300);
   });
-  test("testing tvib rendered with user* given value if non-equilibrium-switch* is checked", () => {
+
+  test("testing tvib rendered with user* given value if non-equilibrium-switch* is checked", async () => {
     render(<App />);
     const button = screen.getByTestId("non-equilibrium-switch-testid");
     user.click(button);
-    const input = screen.queryByTestId("tvib-testid") as HTMLElement;
+    const input = await screen.findByTestId("tvib-testid");
     fireEvent.input(input, {
       target: { value: 100 },
     });

frontend/src/App.tsx → frontend/app/App.tsx

@@ -10,18 +10,19 @@ import InfoIcon from "@mui/icons-material/Info";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
 import { makeStyles } from "@mui/styles";
-import "fontsource-roboto";
+// import "fontsource-roboto";
 import ReactGA from "react-ga4";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 import CssBaseline from "@mui/material/CssBaseline";
+import Image from "next/image";
 import { PlotSpectra } from "./components/PlotSpectra";
 import { palette } from "./constants";
 import logo from "./radis.png";
 
 /*#########INITIALIZING_GOOGLE_ANALYTICS###############*/
 ReactGA.initialize("G-V67HS7VB4R");
-ReactGA.send(window.location.pathname);
+// ReactGA.send(window.location.pathname);
 /*#########INITIALIZING_GOOGLE_ANALYTICS###############*/
 
 const ColorModeContext = React.createContext({
@@ -109,18 +110,17 @@ const Header: React.FC = () => {
       <Container maxWidth="xl">
         <Toolbar>
           <Box m={1}>
-            <img src={logo} height={50} alt="Radish logo" />
+            <Image src={logo} height={50} alt="Radish logo" />
           </Box>
           <Typography variant="h6" className={classes.title}>
             RADIS app
           </Typography>
-          <IconButton>
-            <GitHubIcon
-              style={{ color: "white", fontSize: "28" }}
-              onClick={() =>
-                (window.location.href = "https://github.com/suzil/radis-app")
-              }
-            />
+          <IconButton
+            onClick={() =>
+              (window.location.href = "https://github.com/suzil/radis-app")
+            }
+          >
+            <GitHubIcon style={{ color: "white", fontSize: "28" }} />
           </IconButton>
           <IconButton
             sx={{ ml: 1 }}

frontend/src/components/Plot.tsx → frontend/app/components/Plot.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import Plotly from "react-plotly.js";
-import { LayoutAxis } from "plotly.js";
+// import Plotly from "react-plotly.js";
+import dynamic from "next/dynamic";
+const Plotly = dynamic(() => import("react-plotly.js"), { ssr: false });
+import { LayoutAxis, UpdateMenu } from "plotly.js";
 import { PlotSettings, Spectrum } from "../constants";
 import { addSubscriptsToMolecule } from "../modules/molecule-subscripts";
 import { Species } from "./types";
@@ -49,7 +51,7 @@ export const Plot_: React.FC<PlotProps> = ({
   };
 
   //buttons to switch between log scale and linear scale
-  const updatemenus = [
+  const updatemenus: Partial<UpdateMenu>[] = [
     {
       type: "buttons",
       x: 0,
@@ -175,11 +177,9 @@ export const Plot_: React.FC<PlotProps> = ({
           title: { text: waveLabel },
           rangeslider: {
             // TODO: Update typing in DefinitelyTyped
-            // @ts-ignore
-            autorange: true,
-            // @ts-ignore
+            // autorange: true,
             yaxis: { rangemode: "auto" },
-          },
+          } as any,
           type: "linear",
         },
         yaxis,

frontend/src/components/fields/Species/Species.tsx → frontend/app/components/fields/Species/Species.tsx

@@ -70,9 +70,7 @@ export const Species: React.FC<SpeciesProps> = ({
             {index === 0 ? (
               <IconButton
                 color="primary"
-                onClick={() =>
-                  append({ molecule: undefined, mole_fraction: undefined })
-                }
+                onClick={() => append({ molecule: "", mole_fraction: 0 })}
               >
                 <AddIcon />
               </IconButton>

frontend/src/components/fields/WavenumberRangeSlider.tsx → frontend/app/components/fields/WavenumberRangeSlider.tsx

@@ -39,13 +39,18 @@ export const WavenumberRangeSlider: React.FC<WavelengthRangeSliderProps> = ({
     setUpperRange(value[1]);
   };
   const handleBlur = () => {
-    if (lowerRange > upperRange) {
+    if (lowerRange === "" || upperRange === "") {
       return;
     }
-    if (lowerRange < minRange) {
+    const lower = Number(lowerRange);
+    const upper = Number(upperRange);
+    if (lower > upper) {
+      return;
+    }
+    if (lower < minRange) {
       setLowerRange(minRange);
     }
-    if (upperRange > maxRange) {
+    if (upper > maxRange) {
       setUpperRange(maxRange);
     }
   };