arunavabasucom · arunavabasucom · Aug 20, 2025 · Jul 18, 2025 · Jul 18, 2025 · Jul 18, 2025
diff --git a/backend/requirements.txt b/backend/requirements.txt
@@ -1,6 +1,6 @@
 pandas==2.2.3
 numpy==1.26.4
-radis==0.16.2
+radis==0.16.3
 fastapi==0.101.0
 pytest==7.4.0
 httpx==0.24.1

diff --git a/backend/src/helpers/calculateSpectrum.py b/backend/src/helpers/calculateSpectrum.py
@@ -75,7 +75,7 @@ def calculate_spectrum(payload: Payload):
         sf.fetch_databank(
             source=spectrum_options["dbformat"],
             load_columns=spectrum_options["load_columns"],
-            # broadf_download=False, # TODO Uncomment when radis 0.16.3 is released to prevent unnecessary exomol db broad files downloads
+            broadf_download=False,
             ) 
 
         # 3. generate spectrum

diff --git a/frontend/src/components/FitForm.tsx b/frontend/src/components/FitForm.tsx
@@ -101,7 +101,12 @@
     } else {
       toggleshowNonEquilibriumSwitch(true);
     }
+    if (databaseWatch === Database.NIST) {
+      setValue("experimental_conditions.specie.molecule", "Co_II");
+    } else {
+      setValue("experimental_conditions.specie.molecule", "CO");
+    }
   }, [databaseWatch]);
 
   const modeWatch = watch("experimental_conditions.mode");
  React.useEffect(() => {
@@ -113,7 +118,7 @@
      setValue("simulate_slit", 5);
    }
    setDisableAddToPlotButton(true);
  }, [modeWatch]);

  //if spectrum data more than 1 than we disabble the add to plot button if user interact with wavelength unit field
  const WaveLengthUnitIsDirtyField = dirtyFields?.experimental_conditions?.wavelength_units;
@@ -126,11 +131,11 @@
        setDisableAddToPlotButton(false);
      }
    }
  }, [WaveLengthUnitIsDirtyField, spectra.length, wavelengthUnitWatch]);

  React.useEffect(() => {
    setSimulateSlitUnit(true);
  }, []);
  const handleBadResponse = (message: string) => {
    setError(message);
  };
@@ -321,7 +326,7 @@
    console.log("Current form values:", methods.getValues());
    console.log("Form errors:", methods.formState.errors);
    console.log("Is form valid:", methods.formState.isValid);
  }, [methods.formState.errors, methods.formState.isValid]);

  return (
    <FormProvider {...methods}>
@@ -354,26 +359,30 @@
             gap: 2,
             alignItems: { xs: "stretch", xl: "center" }
           }}>
-            <TGas />
+            <Grid xs={12} lg={4}>
+              <TGas />
+            </Grid>
             {selected_fit_parameters?.tgas ? <BoundingRanges fitParameter="tgas" /> : null}
           </Grid> :
-            <Grid >
+            <Grid xs={12} lg={4}>
               <FitCheckbox fitParameter="tgas" />
             </Grid>
           }
 
           {isNonEquilibrium ? (
-            <>
+            <Grid>
               {selected_fit_parameters?.trot ? <Grid sm={8} lg={12} sx={{
                 display: "flex",
                 flexDirection: { xs: "column", xl: "row" },
                 gap: 2,
                 alignItems: { xs: "stretch", xl: "center" }
               }}>
-                <TRot />
+                <Grid xs={12} lg={4}>
+                  <TRot />
+                </Grid>
                 {selected_fit_parameters?.trot ? <BoundingRanges fitParameter="trot" /> : null}
               </Grid> :
-                <Grid >
+                <Grid xs={12} lg={4}>
                   <FitCheckbox fitParameter="trot" />
                 </Grid>
               }
@@ -383,14 +392,16 @@
                 gap: 2,
                 alignItems: { xs: "stretch", xl: "center" }
               }}>
-                <TVib />
+                <Grid xs={12} lg={4}>
+                  <TVib />
+                </Grid>
                 {selected_fit_parameters?.tvib ? <BoundingRanges fitParameter="tvib" /> : null}
               </Grid> :
-                <Grid >
+                <Grid xs={12} lg={4}>
                   <FitCheckbox fitParameter="tvib" />
                 </Grid>
               }
-            </>
+            </Grid>
           ) : null}
 
           <Grid lg={12}>
@@ -401,10 +412,12 @@
                 gap: 2,
                 alignItems: { xs: "stretch", xl: "center" }
               }}>
-                <Pressure />
+                <Grid xs={12} lg={4}>
+                  <Pressure />
+                </Grid>
                 {selected_fit_parameters?.pressure ? <BoundingRanges fitParameter="pressure" /> : null}
               </Grid> :
-                <Grid >
+                <Grid xs={12} lg={4}>
                   <Pressure />
                 </Grid>
             }

diff --git a/frontend/src/components/FitSpectra.tsx b/frontend/src/components/FitSpectra.tsx
@@ -30,7 +30,7 @@ export const FitSpectra: React.FC = () => {
       />
       {error ? <ErrorAlert message={error} /> : null}
       <Grid container spacing={4}>
-        <Grid xs={12} sm={8} md={5} lg={5}>
+        <Grid xs={12} lg={4}>
           <FitForm
             setPlotSettings={setPlotSettings}
             setError={setError}
@@ -43,7 +43,7 @@ export const FitSpectra: React.FC = () => {
           />
         </Grid>
 
-        <Grid xs={12} sm={12} md={7} lg={7}>
+        <Grid xs={12} lg={8}>
           {loading ? (
             <div
               style={{

diff --git a/frontend/src/components/Form.tsx b/frontend/src/components/Form.tsx
@@ -88,7 +88,12 @@
     } else {
       toggleshowNonEquilibriumSwitch(true);
     }
+    if (databaseWatch === Database.NIST) {
+      setValue("species.0.molecule", "Co_II");
+    } else {
+      setValue("species.0.molecule", "CO");
+    }
   }, [databaseWatch]);
 
   const modeWatch = watch("mode");
  React.useEffect(() => {
@@ -100,7 +105,7 @@
      setValue("simulate_slit", 5);
    }
    setDisableAddToPlotButton(true);
  }, [modeWatch]);

  //if spectrum data more than 1 than we disabble the add to plot button if user interact with wavelength unit field
  const WaveLengthUnitIsDirtyField = dirtyFields.wavelength_units;
@@ -113,7 +118,7 @@
        setDisableAddToPlotButton(false);
      }
    }
  }, [WaveLengthUnitIsDirtyField, spectra.length, wavelengthUnitWatch]);

  console.log(wavelengthUnitWatch);
  React.useEffect(() => {
@@ -122,7 +127,7 @@
    } else {
      setSimulateSlitUnit(false);
    }
  }, [wavelengthUnitWatch, spectra.length]);
  const handleBadResponse = (message: string) => {
    setError(message);
  };

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Box,
   IconButton,
@@ -27,60 +28,96 @@ export const Header: React.FC = () => {
         backgroundColor: mode === "dark" ? "#272727" : "white",
       }}
     >
-      <Container maxWidth="xl" sx={{ py: 1 }}>
+      <Container maxWidth="xl" sx={{ py: { xs: 0.5, sm: 1 } }}>
         <Box
           sx={{
             display: "flex",
-            alignItems: "center",
+            flexDirection: { xs: "column", sm: "row" },
+            alignItems: { xs: "stretch", sm: "center" },
             justifyContent: "space-between",
             flexWrap: "wrap",
+            gap: { xs: 1, sm: 0 },
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-            <img src={logo} height={50} alt="Radish logo" />
-            <Typography level="h4" sx={{ fontWeight: 1000, color: mode === "dark" ? "white" : "black" }}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              justifyContent: { xs: "center", sm: "flex-start" },
+              mb: { xs: 1, sm: 0 },
+            }}
+          >
+            <img src={logo} height={40} style={{ maxWidth: 40 }} alt="Radish logo" />
+            <Typography
+              level="h4"
+              sx={{
+                fontWeight: 1000,
+                color: mode === "dark" ? "white" : "black",
+                fontSize: { xs: 22, sm: 28 },
+              }}
+            >
               Radis App
             </Typography>
           </Box>
 
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-            <Box sx={{ display: "flex", gap: 1 }}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: { xs: 1, sm: 2 },
+              flexDirection: { xs: "column", sm: "row" },
+              width: { xs: "100%", sm: "auto" },
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                gap: { xs: 1, sm: 1 },
+                flexDirection: { xs: "column", sm: "row" },
+                width: { xs: "100%", sm: "auto" },
+              }}
+            >
               <Button
                 component={Link}
                 to="/"
                 variant={location.pathname === "/" ? "solid" : "outlined"}
                 size="sm"
+                sx={{ width: { xs: "100%", sm: "auto" } }}
               >
-                Calc Spectrum
+                Spectrum Calculation
               </Button>
               <Button
                 component={Link}
                 to="/fit-spectra"
                 variant={location.pathname === "/fit-spectra" ? "solid" : "outlined"}
                 size="sm"
+                sx={{ width: { xs: "100%", sm: "auto" } }}
               >
-                Fit Spectrum
+                Spectrum Fitting
               </Button>
             </Box>
-            <IconButton
-              variant="plain"
-              onClick={() =>
-                (window.location.href = "https://github.com/suzil/radis-app")
-              }
-            >
-              <GitHubIcon sx={{ color: mode === "dark" ? "white" : "", fontSize: 28 }} />
-            </IconButton>
-            <IconButton
-              onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-            >
-              {mode === "dark" ? (
-                <DarkModeIcon />
-              ) : (
-                <LightModeIcon />
-              )}
-            </IconButton>
-            <Settings />
-            <InfoPopover />
+            <Box sx={{ display: "flex", gap: 1, mt: { xs: 1, sm: 0 }, justifyContent: { xs: "center", sm: "flex-start" } }}>
+              <IconButton
+                variant="plain"
+                onClick={() =>
+                  (window.location.href = "https://github.com/suzil/radis-app")
+                }
+              >
+                <GitHubIcon sx={{ color: mode === "dark" ? "white" : "", fontSize: 28 }} />
+              </IconButton>
+              <IconButton
+                onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+              >
+                {mode === "dark" ? (
+                  <DarkModeIcon />
+                ) : (
+                  <LightModeIcon />
+                )}
+              </IconButton>
+              <Settings />
+              <InfoPopover />
+            </Box>
           </Box>
         </Box>
       </Container>

diff --git a/frontend/src/components/Plot.tsx b/frontend/src/components/Plot.tsx
@@ -121,9 +121,9 @@ export const Plot_: React.FC<PlotProps> = ({
     species: Species[];
   }) => {
     if (wavelength_units === "u.nm") {
-      waveLabel = "Wavelength range (nm)";
+      waveLabel = "Wavelength (nm)";
     } else {
-      waveLabel = "Wavelength range (cm⁻¹)";
+      waveLabel = "Wavelength (cm⁻¹)";
     }
     const speciesFormatted = species
       .map(
@@ -150,8 +150,12 @@ export const Plot_: React.FC<PlotProps> = ({
       .map(s => `${s.species.map(specie => specie.molecule).join("_")}_${s.database}`)
       .join("_")}`;
 
+  const isMobile = typeof window !== "undefined" && /iPhone|Android|Mobile|iPad|iPod/i.test(navigator.userAgent);
+  const plotWidth = isMobile ? 650 : 1050;
+  const plotHeight = isMobile ? 450 : 650;
+
   return (
-    <>
+    <div style={{ overflowX: 'auto' }}>
       <style>
         {`
         .js-plotly-plot .updatemenu-button rect {
@@ -202,8 +206,8 @@ export const Plot_: React.FC<PlotProps> = ({
           })
         )}
         layout={{
-          width: 650,
-          height: 450,
+          width: plotWidth,
+          height: plotHeight,
           title: spectra.length === 1 ? "Spectrum" : "Spectra",
           font: { family: "Roboto", color: darkMode ? "#fff" : "#000" },
           plot_bgcolor: darkMode ? "#121212" : "#fff",
@@ -238,7 +242,7 @@ export const Plot_: React.FC<PlotProps> = ({
           },
         }}
       />
-    </>
+    </div>
   );
 };
 

diff --git a/frontend/src/components/PlotSpectra.tsx b/frontend/src/components/PlotSpectra.tsx
@@ -24,7 +24,7 @@ export const PlotSpectra: React.FC = () => {
       />
       {error ? <ErrorAlert message={error} /> : null}
       <Grid container spacing={4}>
-        <Grid xs={12} sm={8} md={5} lg={5}>
+        <Grid xs={12} lg={4}>
           <Form
             setPlotSettings={setPlotSettings}
             setError={setError}
@@ -35,7 +35,7 @@ export const PlotSpectra: React.FC = () => {
           />
         </Grid>
 
-        <Grid xs={12} sm={12} md={7} lg={7}>
+        <Grid xs={12} lg={8}>
           {loading ? (
             <div
               style={{

diff --git a/frontend/src/components/fields/MoleculeSelector/MoleculeSelector.tsx b/frontend/src/components/fields/MoleculeSelector/MoleculeSelector.tsx
@@ -57,7 +57,7 @@ export const MoleculeSelector: React.FC<MoleculeSelectorProps> = ({
 
   return (
     <FormControl>
-      <FormLabel>Molecule</FormLabel>
+      <FormLabel>{databaseWatch === Database.NIST ? "Specie" : "Molecule"}</FormLabel>
       <Autocomplete
         id="molecule-selector"
         variant="outlined"

diff --git a/frontend/src/components/fields/Species/Specie.tsx b/frontend/src/components/fields/Species/Specie.tsx
@@ -28,7 +28,7 @@ export const Specie: React.FC<SpeciesProps> = ({
 
     return (
         <Grid container spacing={3}>
-            <Grid xs={12} sm={6} md={4} xl={2}>
+            <Grid xs={12} sm={6} md={4} xl={3}>
                 <Controller
                     name="experimental_conditions.specie.molecule"
                     control={control}