Migration to Next js

frontend/.eslintrc.json

@@ -11,7 +11,8 @@
     "plugin:import/warnings",
     "plugin:prettier/recommended",
     "plugin:react/recommended",
-    "prettier"
+    "prettier",
+    "next/core-web-vitals"
   ],
   "overrides": [
     {

frontend/.gitignore

@@ -8,6 +8,10 @@
 # testing
 /coverage
 
+#next.js
+/.next/
+/out/
+
 # production
 /build
 
@@ -24,3 +28,6 @@ yarn-error.log*
 
 # RADIS App logo type declaration
 !./src/.radis.d.ts
+
+#typescript
+next-env.d.ts

frontend/src/App.tsx → frontend/components/App.tsx

@@ -15,13 +15,13 @@ 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 { PlotSpectra } from "./components/PlotSpectra";
+import Image from 'next/image';
+import { PlotSpectra } from "./src_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,7 +109,12 @@ const Header: React.FC = () => {
       <Container maxWidth="xl">
         <Toolbar>
           <Box m={1}>
-            <img src={logo} height={50} alt="Radish logo" />
+            {/* <img src={logo} height={50} alt="Radish logo" /> */}
+            <Image src="/images/radis.png" 
+               alt="Radish logo"
+               height={50} 
+               width={20}
+        />
           </Box>
           <Typography variant="h6" className={classes.title}>
             RADIS app

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

@@ -2,7 +2,7 @@
 /* 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 { Database as TDatabase } from "../src_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/constants.ts → frontend/components/constants.ts

@@ -1,4 +1,4 @@
-import { Species } from "./components/types";
+import { Species } from "./src_components/types";
 
 export const palette = {
   primary: {

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

@@ -1,5 +1,6 @@
 import React from "react";
-import Plotly from "react-plotly.js";
+// import Plotly from "react-plotly.js";
+import dynamic from "next/dynamic";
 import { LayoutAxis } from "plotly.js";
 import { PlotSettings, Spectrum } from "../constants";
 import { addSubscriptsToMolecule } from "../modules/molecule-subscripts";
@@ -10,6 +11,8 @@ export interface PlotProps {
   plotSettings: PlotSettings;
 }
 
+const Plotly = dynamic(() => import("react-plotly.js"), { ssr: false, })
+
 const plotColors = [
   "#f50057",
   "#3f51b5",

frontend/src/components/fields/MoleculeSelector/MoleculeSelector.tsx → frontend/components/src_components/fields/MoleculeSelector/MoleculeSelector.tsx

@@ -6,8 +6,8 @@ import {
   addSubscriptsToMolecule,
   removeSubscriptsFromMolecule,
 } from "../../../modules/molecule-subscripts";
-import "./index.css";
 import { Database, FormValues } from "../../types";
+import styles from "./index1.module.css"
 import {
   moleculeOptionsEquimolecules,
   moleculeOptionsNonequimolecules,
@@ -51,7 +51,7 @@ export const MoleculeSelector: React.FC<MoleculeSelectorProps> = ({
   return (
     <Autocomplete
       id="molecule-selector"
-      className="MoleculeSelector"
+      className={styles.MoleculeSelector}
       options={moleculeOptions.map((molecule) =>
         addSubscriptsToMolecule(molecule)
       )}

frontend/components/src_components/fields/MoleculeSelector/molecules.tsx

@@ -0,0 +1,124 @@
+export const moleculeOptionsEquimolecules = [
+    "C2H2",
+    "C2H4",
+    "C2H6",
+    "C2N2",
+    "C4H2",
+    "CF4",
+    "CH3Br",
+    "CH3Cl",
+    "CH3CN",
+    "CH3OH",
+    "CH4",
+    "ClO",
+    "ClONO2",
+    "CO",
+    "CO2",
+    "COCl2",
+    "COF2",
+    "CS",
+    "H2",
+    "H2CO",
+    "H2O",
+    "H2O2",
+    "H2S",
+    "HBr",
+    "HC3N",
+    "HCl",
+    "HCN",
+    "HCOOH",
+    "HF",
+    "HI",
+    "HNO3",
+    "HO2",
+    "HOBr",
+    "HOCl",
+    "N2",
+    "N2O",
+    "NH3",
+    "NO",
+    "NO+",
+    "NO2",
+    "O",
+    "O2",
+    "O3",
+    "OCS",
+    "OH",
+    "PH3",
+    "SF6",
+    "SO2",
+    "SO3",
+  ];
+
+  export const moleculeOptionsNonequimolecules = ["CO", "CO2"];
+
+  export const moleculeOptionsGesia = [
+    "CO2",
+    "CO",
+    "COF2",
+    "CH4",
+    "CLO",
+    "C2H6",
+    "CH3D",
+    "C2H2",
+    "C2H4",
+    "C3H8",
+    "C2N2",
+    "C4H2",
+    "CLONO2",
+    "CH3BR",
+    "CH3OH",
+    "C6H6",
+    "C2HD",
+    "CF4",
+    "CH3CN",
+    "COFCL",
+    "CH3I",
+    "CH3F",
+    "CH3CL",
+    "C3H4",
+    "H2O",
+    "HF",
+    "HCL",
+    "HBR",
+    "HI",
+    "HNO3",
+    "H2CO",
+    "HCN",
+    "HC3N",
+    "HOCL",
+    "H2O2",
+    "H2S",
+    "HCOOH",
+    "HO2",
+    "HNC",
+    "HDO",
+    "HONO",
+    "H2C3H2",
+    "N2O",
+    "NO",
+    "NH3",
+    "NO2",
+    "NO+",
+    "O2",
+    "O3",
+    "OH",
+    "PH3",
+    "OCS",
+    "GEH4",
+    "N2",
+    "SO2",
+    "SF6",
+    "SO3",
+    "RUO4",
+  ];
+  export const moleculeOptionsHitemp = [
+    "CO2",
+    "CO",
+    "H2O",
+    "NO2",
+    "NO",
+    "OH",
+    "CH4",
+  ];
+

frontend/components/src_components/types.tsx

@@ -0,0 +1,29 @@
+export type Species = {
+    molecule: string;
+    mole_fraction: number;
+  };
+
+  export enum Database {
+    HITRAN = "hitran",
+    GEISA = "geisa",
+    HITEMP = "hitemp",
+  }
+
+  export type FormValues = {
+    mode: string;
+    database: Database;
+    species: Species[];
+    min_wavenumber_range: number;
+    max_wavenumber_range: number;
+    tgas: number;
+    tvib?: number;
+    trot?: number;
+    pressure: number;
+    path_length: number;
+    simulate_slit?: number;
+    use_simulate_slit: boolean;
+    wavelength_units: string;
+    pressure_units: string;
+    path_length_units: string;
+  };
+

frontend/lib/gtag.ts

@@ -0,0 +1,24 @@
+export const GA_TRACKING_ID = "G-V67HS7VB4R";
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: URL): void => {
+  window.gtag("config", GA_TRACKING_ID, {
+    page_path: url,
+  });
+};
+
+type GTagEvent = {
+  action: string;
+  category: string;
+  label: string;
+  value: number;
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }: GTagEvent): void => {
+  window.gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value,
+  });
+};

frontend/package.json

@@ -12,28 +12,28 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "13.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
     "axios": "0.27.2",
     "dotenv": "^16.0.3",
     "fontsource-roboto": "4.0.0",
+    "next": "^13.2.4",
     "plotly.js": "2.13.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga4": "^1.4.1",
     "react-hook-form": "7.33.1",
     "react-plotly.js": "2.5.1",
-    "react-scripts": "5.0.1",
     "react-top-loading-bar": "2.1.0",
     "typescript": "4.7.4",
     "web-vitals": "3.0.3",
     "yup": "0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
     "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext js,ts,tsx,jsx"
+    "lint": "next lint"
   },
   "eslintConfig": {
     "extends": [
@@ -54,12 +54,14 @@
     ]
   },
   "devDependencies": {
+    "@types/gtag.js": "^0.0.12",
     "@types/jest": "29.1.2",
     "@types/node": "16.11.45",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@types/react-plotly.js": "2.5.1",
     "eslint": "8.20.0",
+    "eslint-config-next": "^13.2.4",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",

frontend/pages/_app.tsx

@@ -0,0 +1,27 @@
+import type { AppProps } from 'next/app'
+import React from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import * as gtag from "../lib/gtag";
+import '../styles/styles.css'
+const isProduction = process.env.NODE_ENV === "production";
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url: URL) => {
+      /* invoke analytics function only for production */
+      if (isProduction) gtag.pageview(url);
+    };
+    router.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
+  return (
+  <>
+    <Component {...pageProps} />
+  </>
+  )
+}