diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 09779708..35e8631d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; import { BrowserRouter as Router, Navigate, Route, Routes } from "react-router-dom"; import TopBar from "./components/TopBar"; import Dashboard from "./pages/Home"; -import ErrorDialog from "./components/ErrorDialog"; import LabResults from "./pages/LabResults"; import HelpPage from "./pages/HelpPage"; import DynamicBreadcrumbs from "./components/DynamicBreadcrumbs"; @@ -63,7 +62,6 @@ const Layout: React.FC = () => ( - ); diff --git a/frontend/src/components/ErrorDialog.tsx b/frontend/src/components/ErrorDialog.tsx deleted file mode 100644 index 27b70859..00000000 --- a/frontend/src/components/ErrorDialog.tsx +++ /dev/null @@ -1,28 +0,0 @@ -// frontend/src/components/ErrorDialog.tsx -import React from "react"; -import { Dialog as EDS_Dialog, Button, Typography } from "@equinor/eds-core-react"; -import { useErrorStore } from "@/hooks/useErrorState"; - -const ErrorDialog: React.FC = () => { - const { error, setError } = useErrorStore(); - - const handleClose = () => { - setError(null); - }; - - return ( - - - Error - - - {error} - - - - - - ); -}; - -export default ErrorDialog; diff --git a/frontend/src/components/ConcResultTable.tsx b/frontend/src/components/Simulation/ConcResultTable.tsx similarity index 100% rename from frontend/src/components/ConcResultTable.tsx rename to frontend/src/components/Simulation/ConcResultTable.tsx diff --git a/frontend/src/components/Simulation/InputStep.tsx b/frontend/src/components/Simulation/InputStep.tsx new file mode 100644 index 00000000..80343bf4 --- /dev/null +++ b/frontend/src/components/Simulation/InputStep.tsx @@ -0,0 +1,23 @@ +import { ModelConfig } from "@/dto/FormConfig"; +import React from "react"; +import ModelInputs from "./ModelInputs"; +import noModelImage from "@/assets/no-model-light.svg"; +import CenteredImage from "@/components/CenteredImage"; + +type InputStepProps = { + currentPrimaryModel?: ModelConfig; + currentSecondaryModel?: ModelConfig; + setModelInput: (modelInput: any) => void; +}; + +const InputStep: React.FC = ({ currentPrimaryModel, currentSecondaryModel, setModelInput }) => { + const selectedModel = currentPrimaryModel || currentSecondaryModel; + + if (selectedModel !== undefined) { + return ; + } else { + return ; + } +}; + +export default InputStep; diff --git a/frontend/src/components/MassBalanceError.tsx b/frontend/src/components/Simulation/MassBalanceError.tsx similarity index 100% rename from frontend/src/components/MassBalanceError.tsx rename to frontend/src/components/Simulation/MassBalanceError.tsx diff --git a/frontend/src/components/ModelInputs.tsx b/frontend/src/components/Simulation/ModelInputs.tsx similarity index 98% rename from frontend/src/components/ModelInputs.tsx rename to frontend/src/components/Simulation/ModelInputs.tsx index 8783b2b9..3c9969a4 100644 --- a/frontend/src/components/ModelInputs.tsx +++ b/frontend/src/components/Simulation/ModelInputs.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, useState } from "react"; import { ModelConfig } from "@/dto/FormConfig"; import { Autocomplete, Button, NativeSelect, TextField, Typography } from "@equinor/eds-core-react"; -import ConvertibleTextField from "./ConvertibleTextField"; +import ConvertibleTextField from "../ConvertibleTextField"; import { FORMULA_TO_NAME_MAPPER } from "@/constants/formula_map"; import { MetaTooltip } from "@/functions/Tooltip"; import { Columns } from "@/components/styles"; diff --git a/frontend/src/components/ModelSelect.tsx b/frontend/src/components/Simulation/ModelSelect.tsx similarity index 100% rename from frontend/src/components/ModelSelect.tsx rename to frontend/src/components/Simulation/ModelSelect.tsx diff --git a/frontend/src/components/Simulation/ResultStep.tsx b/frontend/src/components/Simulation/ResultStep.tsx new file mode 100644 index 00000000..70c32564 --- /dev/null +++ b/frontend/src/components/Simulation/ResultStep.tsx @@ -0,0 +1,44 @@ +import { convertSimulationQueriesResultToTabulatedData, convertTabulatedDataToCSVFormat } from "@/functions/Formatting"; +import DownloadButton from "../DownloadButton"; +import { SimulationResults } from "@/dto/SimulationResults"; +import Working from "./Working"; +import NoResults from "./NoResults"; +import Results from "./Results"; + +type ResultStepProps = { + simulationResults?: SimulationResults; + isLoading: boolean; +}; +const ResultStep: React.FC = ({ simulationResults, isLoading }) => { + if (isLoading) { + return ; + } else if (simulationResults === undefined) { + return ; + } else { + return ( + <> + +
+ +
+ + ); + } +}; + +export default ResultStep; diff --git a/frontend/src/components/Results.tsx b/frontend/src/components/Simulation/Results.tsx similarity index 94% rename from frontend/src/components/Results.tsx rename to frontend/src/components/Simulation/Results.tsx index b6186721..59e25c26 100644 --- a/frontend/src/components/Results.tsx +++ b/frontend/src/components/Simulation/Results.tsx @@ -2,9 +2,9 @@ import React from "react"; import { Tabs, Typography } from "@equinor/eds-core-react"; import { useState } from "react"; import { Panel, SimulationResults } from "@/dto/SimulationResults"; -import ResultConcTable from "@/components/ConcResultTable"; -import Reactions from "../pages/Reactions"; -import { MassBalanceError } from "@/components/MassBalanceError"; +import ResultConcTable from "@/components/Simulation/ConcResultTable"; +import Reactions from "../../pages/Reactions"; +import { MassBalanceError } from "@/components/Simulation/MassBalanceError"; import { extractPlotData } from "@/functions/Formatting"; import BarChart from "@/components/BarChart"; import GenericTable from "@/components/GenericTable"; diff --git a/frontend/src/hooks/useErrorState.ts b/frontend/src/hooks/useErrorState.ts deleted file mode 100644 index 5826cbfa..00000000 --- a/frontend/src/hooks/useErrorState.ts +++ /dev/null @@ -1,12 +0,0 @@ -// frontend/src/store/useErrorStore.ts -import { create } from "zustand"; - -interface ErrorState { - error: string | null; - setError: (error: string | null) => void; -} - -export const useErrorStore = create((set) => ({ - error: null, - setError: (error) => set({ error }), -})); diff --git a/frontend/src/hooks/useSecondaryModelQuery.ts b/frontend/src/hooks/useSecondaryModelQuery.ts index 793e7857..752d5506 100644 --- a/frontend/src/hooks/useSecondaryModelQuery.ts +++ b/frontend/src/hooks/useSecondaryModelQuery.ts @@ -69,7 +69,7 @@ export const useSecondaryModelQuery = ({ return { secondaryResults, - isLoadingSecondary: isStartingSecondary || isLoadingSecondaryResults, + isSecondaryLoading: isStartingSecondary || isLoadingSecondaryResults, secondaryError: startError || resultsError, hasSecondaryResults: !!secondaryResults, secondarySimulationId, diff --git a/frontend/src/pages/Models.tsx b/frontend/src/pages/Models.tsx index dd8e24a3..8bfff04d 100644 --- a/frontend/src/pages/Models.tsx +++ b/frontend/src/pages/Models.tsx @@ -1,23 +1,17 @@ -import React, { ReactNode, useState, useEffect } from "react"; -import ModelSelect from "@/components/ModelSelect"; +import React, { useState, useEffect } from "react"; +import ModelSelect from "@/components/Simulation/ModelSelect"; import { ModelConfig } from "@/dto/FormConfig"; -import ModelInputs from "@/components/ModelInputs"; -import Results from "@/components/Results"; import { useAvailableModels } from "@/contexts/ModelContext"; -import NoResults from "@/components/Simulation/NoResults"; -import Working from "@/components/Simulation/Working"; import { useMutation, useQuery } from "@tanstack/react-query"; import { getResultForSimulation, ResultIsPending, startSimulation } from "@/api/api"; import Step from "@/components/Step"; import { MainContainer } from "@/components/styles"; -import CenteredImage from "@/components/CenteredImage"; -import noModelImage from "@/assets/no-model-light.svg"; import { useNavigate, useParams } from "react-router-dom"; -import DownloadButton from "@/components/DownloadButton"; -import { convertSimulationQueriesResultToTabulatedData, convertTabulatedDataToCSVFormat } from "@/functions/Formatting"; import { simulationHistory } from "@/hooks/useSimulationHistory.ts"; import { getModelInputStore } from "@/hooks/useModelInputStore"; import { useSecondaryModelQuery } from "@/hooks/useSecondaryModelQuery"; +import InputStep from "@/components/Simulation/InputStep"; +import ResultStep from "@/components/Simulation/ResultStep"; const Models: React.FC = () => { const [currentPrimaryModel, setCurrentPrimaryModel] = useState(undefined); @@ -38,7 +32,7 @@ const Models: React.FC = () => { }, }); - const { data, isLoading } = useQuery({ + const { data, isLoading: isPrimaryLoading } = useQuery({ queryKey: ["simulation", simulationId], queryFn: () => getResultForSimulation(simulationId!), enabled: simulationId !== undefined, @@ -49,10 +43,10 @@ const Models: React.FC = () => { let simulationResults = data; useEffect(() => { - if (simulationId && !isLoading) { + if (simulationId && !isPrimaryLoading) { simulationHistory.finalizeEntry(simulationId); } - }, [simulationId, isLoading]); + }, [simulationId, isPrimaryLoading]); useEffect(() => { if (simulationResults && models.length > 0) { @@ -79,62 +73,17 @@ const Models: React.FC = () => { simulationResults !== undefined && currentSecondaryModel !== undefined && currentPrimaryModel !== undefined, }); - let inputsStep: ReactNode | null = null; - - if (currentPrimaryModel === undefined && currentSecondaryModel === undefined) { - inputsStep = ; - } else if (currentPrimaryModel !== undefined && currentSecondaryModel === undefined) { - inputsStep = ; - } else if (currentPrimaryModel === undefined && currentSecondaryModel !== undefined) { - inputsStep = ; - } else if (currentPrimaryModel !== undefined && currentSecondaryModel !== undefined) { - inputsStep = ; - - if (secondaryModelResults.hasSecondaryResults) { - simulationResults = { - ...simulationResults, - status: simulationResults?.status ?? "done", - modelInput: simulationResults?.modelInput ?? { concentrations: {}, parameters: {}, modelId: "" }, - finalConcentrations: simulationResults?.finalConcentrations ?? {}, - panels: [ - ...(simulationResults?.panels ?? []), - ...(secondaryModelResults.secondaryResults?.panels ?? []), - ], - }; - } - } - - let resultsStep: ReactNode | null = null; - if (isLoading || (currentSecondaryModel !== undefined && secondaryModelResults.isLoadingSecondary)) { - resultsStep = ; - } else if (simulationResults === undefined) { - resultsStep = ; - } else { - resultsStep = ( - <> - -
- -
- - ); + if (secondaryModelResults.hasSecondaryResults) { + simulationResults = { + ...simulationResults, + status: simulationResults?.status ?? "done", + modelInput: simulationResults?.modelInput ?? { concentrations: {}, parameters: {}, modelId: "" }, + finalConcentrations: simulationResults?.finalConcentrations ?? {}, + panels: [...(simulationResults?.panels ?? []), ...(secondaryModelResults.secondaryResults?.panels ?? [])], + }; } + const isLoading = isPrimaryLoading || secondaryModelResults.isSecondaryLoading; return ( { setCurrentSecondaryModel={setCurrentSecondaryModel} /> - {inputsStep} + - {resultsStep} +
); diff --git a/frontend/tests/components/MassBalanceError.test.tsx b/frontend/tests/components/MassBalanceError.test.tsx index 8616097d..d121541a 100644 --- a/frontend/tests/components/MassBalanceError.test.tsx +++ b/frontend/tests/components/MassBalanceError.test.tsx @@ -1,5 +1,5 @@ import { describe, it, expect } from "vitest"; -import { getMasses, getMassBalanceError } from "@/components/MassBalanceError"; +import { getMasses, getMassBalanceError } from "@/components/Simulation/MassBalanceError"; describe("getMasses", () => { it("empty", () => {