Skip to content

Commit

Permalink
Merge pull request #619 from arunavabasu-03/download_molecule
Browse files Browse the repository at this point in the history 
feature to download the spectrum file (.spec)
  • Loading branch information
@suzil
suzil authored Aug 22, 2022
2 parents 1592872 + de597dd commit 2b754ff
Show file tree
Hide file tree
Showing 4 changed files with 292 additions and 133 deletions.
1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"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.4.2",
"web-vitals": "^2.1.0",
"yup": "^0.32.11"
Expand Down
287 changes: 183 additions & 104 deletions frontend/src/components/CalcSpectrum.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { Controller, useForm } from "react-hook-form";
import Switch from "@mui/material/Switch";
import FormControlLabel from "@mui/material/FormControlLabel";
import CircularProgress from "@mui/material/CircularProgress";
import Button from "@mui/material/Button";
import LoadingBar from "react-top-loading-bar";
import { CalcSpectrumPlotData, CalcSpectrumResponseData } from "../constants";
import { FormValues } from "./types";
import { Database } from "./fields/Database";
Expand All @@ -22,7 +24,6 @@ import { WavenumberRangeSlider } from "./fields/WavenumberRangeSlider";
import { CalcSpectrumButton } from "./fields/CalSpectrumButtom";
import { CalcSpectrumPlot } from "./CalcSpectrumPlot";
import { ErrorAlert } from "./ErrorAlert";

interface Response<T> {
data?: T;
error?: string;
Expand All @@ -41,6 +42,8 @@ export const CalcSpectrum: React.FC = () => {
const [useGesia, setUseGesia] = useState(false);
const [useSlit, setUseSlit] = useState(false); // checking that user wants to apply the slit function or not in available modes
const [useSimulateSlitFunction, setUseSimulateSlitFunction] = useState(false); // checking the mode and enable or disable slit feature

const [progress, setProgress] = useState(0); //control the progress bar
const Schema = yup.object().shape({
useNonEqi: yup.boolean(),
use_simulate_slit: yup.boolean(),
Expand Down Expand Up @@ -120,12 +123,16 @@ export const CalcSpectrum: React.FC = () => {
defaultValues: { species: [{ molecule: "CO", mole_fraction: 0.1 }] },
resolver: yupResolver(Schema),
});
const [downloadButton, setDownloadButton] = useState(true);

const handleBadResponse = (message: string) => {
setCalcSpectrumResponse(undefined);
setError(message);
};
const onSubmit = async (data: FormValues): Promise<void> => {
const onSubmit = async (
data: FormValues,
endpoint: string
): Promise<void> => {
if (useSlit == true) {
if (data.mode === "radiance_noslit") {
data.mode = "radiance";
Expand All @@ -134,41 +141,85 @@ export const CalcSpectrum: React.FC = () => {
data.mode = "transmittance";
}
}

setDownloadButton(true);
setLoading(true);
console.log(data);
setError(undefined);

setPlotData({
max_wavenumber_range: data.max_wavenumber_range,
min_wavenumber_range: data.min_wavenumber_range,
mode: data.mode,
species: data.species,
});

import(/* webpackIgnore: true */ "./config.js").then(async (module) => {
const rawResponse = await axios.post(
module.apiEndpoint + `calculate-spectrum`,
data
);
if (
rawResponse.data.data === undefined &&
rawResponse.data.error === undefined
) {
handleBadResponse("Bad response from backend!");
} else {
if (endpoint === "calculate-spectrum") {
setProgress(30);

const rawResponse = await axios({
url: module.apiEndpoint + `calculate-spectrum`,
method: "POST",
data: data,
headers: {
"Content-Type": "application/json",
},
});
if (
rawResponse.data.data === undefined &&
rawResponse.data.error === undefined
) {
handleBadResponse("Bad response from backend!");
setDownloadButton(true);
} else {
const response = await rawResponse.data;
if (response.error) {
handleBadResponse(response.error);
setDownloadButton(true);
} else {
setCalcSpectrumResponse(response);
setDownloadButton(false);
}
}

setProgress(100);
setLoading(false);
}

if (endpoint === "download-spectrum") {
setProgress(30);
setLoading(false);
const rawResponse = await axios({
url: module.apiEndpoint + `download-spectrum`,
method: "POST",
responseType: "blob",
data: data,
headers: {
"Content-Type": "application/json",
},
});
const url = window.URL.createObjectURL(new Blob([rawResponse.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute(
"download",
`${data.mode}_${data.min_wavenumber_range}_${data.max_wavenumber_range}.spec`
);
document.body.appendChild(link);
link.click();
setDownloadButton(false);
const response = await rawResponse.data;
if (response.error) {
handleBadResponse(response.error);
} else {
setCalcSpectrumResponse(response);
setDownloadButton(false);
}
setDownloadButton(false);
setProgress(100);
}
setLoading(false); //setLoading(false) is called after the response is received
});
};

const databaseWatch = watch("database");
const modeWatch = watch("mode");

React.useEffect(() => {
if (databaseWatch === "geisa") {
setUseGesia(true);
Expand All @@ -187,6 +238,21 @@ export const CalcSpectrum: React.FC = () => {
}
}, [databaseWatch, modeWatch]);

//downloadButton
const DownloadSpectrum: React.FC = () => (
<Button
id="down-spectrum-button"
disabled={downloadButton}
variant="contained"
color="primary"
onClick={handleSubmit((data) => {
onSubmit(data, `download-spectrum`);
})}
>
Download
</Button>
);
//equilibrium-switch
const UseNonEquilibriumCalculations = () => (
<Controller
name="useNonEqi"
Expand Down Expand Up @@ -215,6 +281,7 @@ export const CalcSpectrum: React.FC = () => {
)}
/>
);
//slit-switch
const UseSimulateSlit = () => (
<Controller
name="use_simulate_slit"
Expand Down Expand Up @@ -242,107 +309,119 @@ export const CalcSpectrum: React.FC = () => {
/>
);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{error ? <ErrorAlert message={error} /> : null}
<Grid container spacing={2}>
<Grid item xs={12} sm={8} md={5} lg={4}>
<Grid container spacing={3}>
<Grid item xs={12} sm={8} md={5} lg={5}>
<Database control={control}></Database>
</Grid>
<Grid item xs={12} sm={8} md={5} lg={6}>
<Mode control={control} />
</Grid>
<Grid item xs={12}>
<WavenumberRangeSlider
minRange={500}
maxRange={10000}
control={control}
setValue={setValue}
/>
</Grid>

<Grid item sm={8} lg={4}>
<TGas control={control} />
</Grid>
<>
<LoadingBar
color="#f11946"
progress={progress}
onLoaderFinished={() => setProgress(0)}
/>
<form
onSubmit={handleSubmit((data) => onSubmit(data, `calculate-spectrum`))}
>
{error ? <ErrorAlert message={error} /> : null}
<Grid container spacing={2}>
<Grid item xs={12} sm={8} md={5} lg={4}>
<Grid container spacing={3}>
<Grid item xs={12} sm={8} md={5} lg={5}>
<Database control={control}></Database>
</Grid>
<Grid item xs={12} sm={8} md={5} lg={6}>
<Mode control={control} />
</Grid>
<Grid item xs={12}>
<WavenumberRangeSlider
minRange={500}
maxRange={10000}
control={control}
setValue={setValue}
/>
</Grid>

{isNonEquilibrium ? (
<>
<Grid item sm={8} lg={3}>
<TRot control={control} />
</Grid>
<Grid item sm={8} lg={3}>
<TVib control={control} />
</Grid>
</>
) : null}
<Grid item sm={8} lg={4}>
<TGas control={control} />
</Grid>

<Grid item sm={8} lg={5}>
<Pressure control={control} />
</Grid>
{isNonEquilibrium ? (
<>
<Grid item sm={8} lg={3}>
<TRot control={control} />
</Grid>
<Grid item sm={8} lg={3}>
<TVib control={control} />
</Grid>
</>
) : null}

<Grid item sm={8} lg={3}>
<PathLength control={control} />
</Grid>
<Grid item sm={8} lg={5}>
<Pressure control={control} />
</Grid>

<Grid item xs={12}>
<Species
isNonEquilibrium={false}
control={control}
isGeisa={false}
/>
</Grid>
<Grid item sm={8} lg={3}>
<PathLength control={control} />
</Grid>

{useSimulateSlitFunction ? (
<Grid item xs={12}>
<UseSimulateSlit />
<Species
isNonEquilibrium={isNonEquilibrium}
control={control}
isGeisa={useGesia}
/>
</Grid>
) : null}

{useSimulateSlitFunction ? (
useSlit ? (
{useSimulateSlitFunction ? (
<Grid item xs={12}>
<UseSimulateSlit />
</Grid>
) : null}

{useSimulateSlitFunction ? (
useSlit ? (
<Grid item xs={12}>
<SimulateSlit control={control} />
</Grid>
) : null
) : null}
{useGesia ? null : (
<Grid item xs={12}>
<SimulateSlit control={control} />
<UseNonEquilibriumCalculations />
</Grid>
) : null
) : null}
{useGesia ? null : (
)}

<Grid item xs={12}>
<UseNonEquilibriumCalculations />
<CalcSpectrumButton />
</Grid>
<Grid item xs={12}>
<DownloadSpectrum />
</Grid>
)}

<Grid item xs={12}>
<CalcSpectrumButton />
</Grid>
</Grid>
</Grid>

<Grid item xs={12} sm={5} md={7} lg={8}>
{loading ? (
<div
style={{
display: "flex",
justifyContent: "center",
marginTop: 230,
}}
>
<CircularProgress />
</div>
) : (
calcSpectrumResponse?.data &&
plotData?.species && (
<CalcSpectrumPlot
data={calcSpectrumResponse.data}
species={plotData.species}
min_wavenumber_range={plotData.min_wavenumber_range}
max_wavenumber_range={plotData.max_wavenumber_range}
mode={plotData.mode}
/>
)
)}
<Grid item xs={12} sm={5} md={7} lg={8}>
{loading ? (
<div
style={{
display: "flex",
justifyContent: "center",
marginTop: 230,
}}
>
<CircularProgress />
</div>
) : (
calcSpectrumResponse?.data &&
plotData?.species && (
<CalcSpectrumPlot
data={calcSpectrumResponse.data}
species={plotData.species}
min_wavenumber_range={plotData.min_wavenumber_range}
max_wavenumber_range={plotData.max_wavenumber_range}
mode={plotData.mode}
/>
)
)}
</Grid>
</Grid>
</Grid>
</form>
</form>
</>
);
};
Loading

0 comments on commit 2b754ff

Please sign in to comment.