Resolve TODO: Add isotope field to species

backend/__tests__/helpers/payload_data.py

@@ -2,7 +2,8 @@
     "species": [
         {
             "molecule": "CO",
-            "mole_fraction": 0.2
+            "mole_fraction": 0.2,
+            "isotope": "1,2,3",
         }
     ],
     "mode": "absorbance",

backend/src/helpers/calculateSpectrum.py

@@ -13,8 +13,7 @@ def calculate_spectrum(payload: Payload):
         mole_fraction={
             species.molecule: species.mole_fraction for species in payload.species
         },
-        # TODO: Hard-coding "1,2,3" as the isotopologue for the time-being
-        isotope={species.molecule: "1,2,3" for species in payload.species},
+        isotope={species.molecule: species.isotope for species in payload.species},
         pressure=payload.pressure * eval(payload.pressure_units),
         Tgas=payload.tgas,
         Tvib=payload.tvib,

backend/src/models/species.py

@@ -3,3 +3,4 @@
 class Species(BaseModel):
     molecule: str
     mole_fraction: float
+    isotope: str

frontend/src/components/Form.tsx

@@ -68,7 +68,9 @@ export const Form: React.FunctionComponent<FormProps> = ({
   //TODO - we need to make it global
 
   const methods = useForm<FormValues>({
-    defaultValues: { species: [{ molecule: "CO", mole_fraction: 0.1 }] },
+    defaultValues: {
+      species: [{ molecule: "CO", mole_fraction: 0.1, isotope: "1,2,3" }],
+    },
     resolver: yupResolver(formSchema),
   });
 

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

@@ -30,6 +30,7 @@ export const Species: React.FC<SpeciesProps> = ({
     <Grid container spacing={3}>
       {fields.map((field, index) => (
         <React.Fragment key={field.id}>
+          {/* Molecule Selector Field */}
           <Grid item xs={6}>
             <Controller
               name={`species.${index}.molecule` as const}
@@ -39,7 +40,7 @@ export const Species: React.FC<SpeciesProps> = ({
                   validationError={formState.errors?.species?.[index]?.molecule}
                   control={control}
                   value={field.value}
-                  onChange={(_, value) => {
+                  onChange={(value) => {
                     field.onChange(value);
                   }}
                   autofocus={index !== 0}
@@ -49,7 +50,9 @@ export const Species: React.FC<SpeciesProps> = ({
               )}
             />
           </Grid>
-          <Grid item xs={4}>
+
+          {/* Mole Fraction Field */}
+          <Grid item xs={5}>
             <Controller
               name={`species.${index}.mole_fraction` as const}
               control={control}
@@ -81,6 +84,35 @@ export const Species: React.FC<SpeciesProps> = ({
               )}
             />
           </Grid>
+
+          {/* Isotope Field */}
+          <Grid item xs={10}>
+            <Controller
+              name={`species.${index}.isotope` as const}
+              control={control}
+              render={({ field: { onChange, value }, formState }) => (
+                <FormControl>
+                  <FormLabel>Isotopes</FormLabel>
+                  <Input
+                    id="isotope-input"
+                    error={!!formState.errors?.species?.[index]?.isotope}
+                    value={value}
+                    onChange={(e) => {
+                      onChange(e.target.value);
+                    }}
+                    placeholder="e.g., all or 1,2,3"
+                  />
+                  {formState.errors?.species?.[index]?.isotope && (
+                    <FormHelperText sx={{ color: "red" }}>
+                      {formState.errors?.species?.[index]?.isotope?.message}
+                    </FormHelperText>
+                  )}
+                </FormControl>
+              )}
+            />
+          </Grid>
+
+          {/* Add/Remove Species Buttons */}
           <Grid item xs={2} style={{ marginTop: 24 }}>
             {index === 0 ? (
               <IconButton

frontend/src/components/types.ts

@@ -1,6 +1,7 @@
 export type Species = {
   molecule: string;
   mole_fraction: number;
+  isotope: string;
 };
 
 export enum Database {

frontend/src/modules/form-schema.ts

@@ -59,6 +59,13 @@ export const formSchema = yup.object().shape({
         .number()
         .required("Mole fraction must be defined")
         .typeError("Mole fraction must be defined"),
+      isotope: yup
+        .string()
+        .required("Isotope is required")
+        .matches(
+          /^(\d+,)*\d+$|^all$/,
+          "Invalid format. Use 'all' or numbers separated by commas."
+        ),
     })
   ),
   simulate_slit: yup