Incorporate phases in frontend

Author: lars-petter-hauge

backend/src/acidwatch_api/models/datamodel.py

@@ -36,10 +36,14 @@ class Phase(_BaseModel):
 
 
 class Simulation(_BaseModel):
-    phases: list[Phase]
+    concentrations: dict[str, int | float]
     conditions: Conditions = Field(default_factory=Conditions)
     models: list[ModelInput] = Field(min_length=1)
 
+    @property
+    def phases(self) -> list[Phase]:
+        return [Phase(kind="co2-rich", fraction=1.0, concentrations=self.concentrations)]
+
 
 class ModelResult(_BaseModel):
     phases: list[Phase]

backend/src/acidwatch_api/routes/models.py

@@ -217,7 +217,9 @@ def get_result_for_simulation(
         )
 
     simulation_input = Simulation(
-        phases=db_simulation.phases,
+        concentrations=_phases_to_concentrations(
+            [Phase(**p) for p in db_simulation.phases]
+        ),
         conditions=Conditions(**(db_simulation.conditions or {})),
         models=model_inputs,
     )
@@ -275,7 +277,7 @@ async def run_simulation(
         except ValueError as exc:
             raise HTTPException(status_code=422, detail=exc.args)
 
-    concentrations = _phases_to_concentrations(create_simulation.phases)
+    concentrations = create_simulation.concentrations
     try:
         adapters[0].validate_concentrations(concentrations)
     except InputError as exc:

backend/tests/test_models_endpoints.py

@@ -126,7 +126,7 @@ def test_dummy_model_only_valid_substances_are_present(
 ):
     monkeypatch.setattr(dummy_model, "valid_substances", valid_substances)
     simulation = {
-        "phases": _make_phases(concentrations),
+        "concentrations": concentrations,
         "models": [{"modelId": dummy_model.model_id, "parameters": {}}],
     }
     response = client.post(
@@ -301,7 +301,7 @@ async def run(self):
     response = client.post(
         "/simulations/",
         json={
-            "phases": _make_phases({}),
+            "concentrations": {},
             "models": [
                 {"modelId": dummy_model.model_id, "parameters": input_parameters}
             ],
@@ -324,7 +324,7 @@ async def run(self):
         assert response.json() == {
             "status": "done",
             "input": {
-                "phases": _make_phases({}),
+                "concentrations": {},
                 "conditions": {"temperature": 25.0, "pressure": 10.0},
                 "models": [
                     {
@@ -351,7 +351,7 @@ async def run(self):
 def test_running_empty_list_of_models_is_an_error(client):
     response = client.post(
         "/simulations",
-        json={"phases": _make_phases({"H2O": 2.0}), "models": []},
+        json={"concentrations": {"H2O": 2.0}, "models": []},
     )
     assert response.status_code == 422
 
@@ -385,7 +385,7 @@ def test_running_empty_list_of_models_is_an_error(client):
 )
 def test_running_models(client, input_models, result_concentrations):
     simulation_input = {
-        "phases": _make_phases({"H2O": 1}),
+        "concentrations": {"H2O": 1},
         "models": input_models,
     }
 
@@ -434,7 +434,7 @@ def test_running_models(client, input_models, result_concentrations):
 )
 def test_failing_model(client, input_models, result):
     simulation_input = {
-        "phases": _make_phases({"H2O": 1}),
+        "concentrations": {"H2O": 1},
         "models": input_models,
     }
 
@@ -512,7 +512,7 @@ def test_results_order(client, sql_session, swap):
     assert response.json() == {
         "status": "done",
         "input": {
-            "phases": _make_phases({}),
+            "concentrations": {},
             "conditions": {"temperature": 25.0, "pressure": 10.0},
             "models": [first_model, second_model],
         },

frontend/src/components/ParityPlots.tsx

@@ -16,7 +16,7 @@ const buildParityDatasets = (
         const simulations = simulationsPerExperiment[exp.name] ?? [];
         simulations.forEach((sim) => {
             const modelId = sim.input.models[0].modelId;
-            const modelled = sim.results[0]?.concentrations?.[component] ?? 0;
+            const modelled = sim.results[0]?.phases.find((p) => p.kind === "co2-rich")?.concentrations?.[component] ?? 0;
             (byModel[modelId] ??= []).push({ x: measured, y: modelled });
         });
     });

frontend/src/components/Simulation/MassBalanceError.tsx

@@ -1,5 +1,6 @@
 import { Accordion, Card, Table, Typography } from "@equinor/eds-core-react";
 import { useEffect, useState } from "react";
+import { Phase } from "@/dto/SimulationResults";
 
 const ERROR_THRESHOLD = 1e-3;
 
@@ -127,13 +128,24 @@ export function getMassBalanceError(
     return { error, initMasses, finalMasses, substances };
 }
 
+export function mergePhasesConcentrations(phases: Phase[]): Record<string, number> {
+    const merged: Record<string, number> = {};
+    for (const phase of phases) {
+        for (const [substance, conc] of Object.entries(phase.concentrations)) {
+            merged[substance] = (merged[substance] ?? 0) + conc * phase.fraction;
+        }
+    }
+    return merged;
+}
+
 interface MassBalanceErrorProps {
     initial: Record<string, number>;
-    final: Record<string, number>;
+    phases: Phase[];
 }
 
-export function MassBalanceError({ initial, final }: MassBalanceErrorProps) {
+export function MassBalanceError({ initial, phases }: MassBalanceErrorProps) {
     const [isExpanded, setExpanded] = useState<boolean>(false);
+    const final = mergePhasesConcentrations(phases);
     const { error, initMasses, finalMasses, substances } = getMassBalanceError(initial, final);
     const significantError = error >= 1;
 

frontend/src/components/Simulation/Results.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Tabs, Typography } from "@equinor/eds-core-react";
 import { useState } from "react";
-import { Panel, SimulationResults } from "@/dto/SimulationResults";
+import { Panel, Phase, SimulationResults } from "@/dto/SimulationResults";
 import ResultConcTable from "@/components/Simulation/ConcResultTable";
 import Reactions from "../../pages/Reactions";
 import { MassBalanceError } from "@/components/Simulation/MassBalanceError";
@@ -69,26 +69,23 @@ const Results: React.FC<ResultsProps> = ({ simulationResults }) => {
         const modelId = simulationResults.input.models[modelIndex]?.modelId || `Model ${modelIndex + 1}`;
         const modelPrefix = simulationResults.results.length > 1 ? `${modelId}: ` : "";
 
-        const hasConcentrations = Object.keys(result.concentrations).length > 0;
-        if (hasConcentrations) {
-            panelTabs.push(`${modelPrefix}Output concentrations`);
+        for (const phase of result.phases) {
+            const hasConcentrations = Object.keys(phase.concentrations).length > 0;
+            if (!hasConcentrations) continue;
 
-            // For the first model, compare with input concentrations
-            // For subsequent models, compare with previous model's output
-            const initialConcentrations =
-                modelIndex === 0
-                    ? simulationResults.input.concentrations
-                    : simulationResults.results[modelIndex - 1].concentrations;
+            panelTabs.push(`${modelPrefix}${phase.kind} (${(phase.fraction * 100).toFixed(1)}%)`);
+
+            const initialConcentrations = simulationResults.input.concentrations;
 
             panelContents.push(
-                <Tabs.Panel key={`conc-${modelIndex}`}>
-                    <MassBalanceError initial={initialConcentrations} final={result.concentrations} />
+                <Tabs.Panel key={`phase-${modelIndex}-${phase.kind}`}>
+                    <MassBalanceError initial={initialConcentrations} phases={result.phases} />
 
                     <BarChart
                         aspectRatio={2}
                         graphData={extractPlotData({
                             ...simulationResults,
-                            results: [result],
+                            results: [{ phases: [phase], panels: [] }],
                             input: {
                                 ...simulationResults.input,
                                 concentrations: initialConcentrations,
@@ -100,7 +97,7 @@ const Results: React.FC<ResultsProps> = ({ simulationResults }) => {
 
                     <ResultConcTable
                         initialConcentrations={initialConcentrations}
-                        finalConcentrations={result.concentrations}
+                        finalConcentrations={phase.concentrations}
                     />
                 </Tabs.Panel>
             );

frontend/src/dto/SimulationResults.ts

@@ -29,12 +29,19 @@ const TablePanel = z.object({
 export const Panel = z.discriminatedUnion("type", [TextPanel, JsonPanel, ReactionPathsPanel, TablePanel]);
 export type Panel = z.infer<typeof Panel>;
 
+export const Phase = z.object({
+    kind: z.enum(["aqueous", "co2-rich"]),
+    fraction: z.number(),
+    concentrations: z.record(z.string(), z.number()),
+});
+export type Phase = z.infer<typeof Phase>;
+
 export const SimulationResults = z.object({
     status: z.enum(["done", "pending"]),
     input: ModelInput,
     results: z.array(
         z.object({
-            concentrations: z.record(z.string(), z.number()),
+            phases: z.array(Phase),
             panels: z.array(Panel),
         })
     ),

frontend/src/functions/Formatting.tsx

@@ -15,7 +15,8 @@ export const convertToSubscripts = (chemicalFormula: string): React.ReactNode =>
 
 export const extractPlotData = (simulationResults: SimulationResults) => {
     const inputConcentrations = simulationResults.input.concentrations;
-    const finalConcentrations = simulationResults.results[0].concentrations;
+    const firstPhase = simulationResults.results[0]?.phases[0];
+    const finalConcentrations = firstPhase?.concentrations ?? {};
     const keys = Object.keys(finalConcentrations).filter(
         (key) => (inputConcentrations[key] ?? 0) >= 0.001 || (finalConcentrations[key] ?? 0) >= 0.001
     );
@@ -47,9 +48,11 @@ export const extractPlotData = (simulationResults: SimulationResults) => {
 };
 
 export const convertSimulationToChartData = (simulation: SimulationResults, experimentName: string): ChartDataSet => {
+    const firstPhase = simulation.results[0]?.phases[0];
+    const concentrations = firstPhase?.concentrations ?? {};
     return {
         label: `${simulation.input.models[0].modelId} - ${experimentName}`,
-        data: Object.entries(simulation.results[0].concentrations)
+        data: Object.entries(concentrations)
             .filter(([, y]) => y !== 0)
             .map(([x, y]) => ({ x, y })),
     };
@@ -87,11 +90,12 @@ export const convertSimulationQueriesResultToTabulatedData = (
 
     Object.entries(simulationResultsPerExperiment).forEach(([experimentName, simulations]) => {
         simulations.forEach((simulation) => {
+            const firstPhase = simulation.results[0]?.phases[0];
             tabulatedData.push(
                 buildTabulatedRow(
                     `${simulation.input.models[0].modelId || "Unknown"} - ${experimentName}`,
                     simulation.input.concentrations,
-                    simulation.results[0].concentrations,
+                    firstPhase?.concentrations ?? {},
                     { ...simulation.input.conditions, ...simulation.input.models[0].parameters }
                 )
             );

frontend/src/pages/Compare.tsx

@@ -116,17 +116,17 @@ const Compare: React.FC = () => {
     const simulationResults = queries.map((q) => q.data as SimulationResults);
 
     const comparisons: SimulationComparison[] = simulationResults.map((result, index) => {
-        // Find the last result that has concentrations
-        const finalOutput = [...result.results]
+        const finalResult = [...result.results]
             .reverse()
-            .find((r) => r.concentrations && Object.keys(r.concentrations).length > 0);
+            .find((r) => r.phases.length > 0);
+        const co2RichPhase = finalResult?.phases.find((p) => p.kind === "co2-rich");
         const firstModel = result.input.models[0];
 
         return {
             id: simulationIds[index],
             modelName: firstModel?.modelId || "Unknown",
             inputConcentrations: result.input.concentrations || {},
-            outputConcentrations: finalOutput?.concentrations || {},
+            outputConcentrations: co2RichPhase?.concentrations || {},
         };
     });