Update results tables to handle phases

Author: lars-petter-hauge

frontend/src/components/BarChart.tsx

@@ -20,6 +20,8 @@ const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4, xLabel,
 
     const allX = Array.from(new Set(graphData.flatMap((ds) => ds.data.map((point) => point.x))));
 
+    const hasStacking = graphData.some((ds) => ds.stack);
+
     const datasets = graphData.map((ds, idx) => ({
         label: ds.label,
         hidden: ds.hidden || false,
@@ -30,6 +32,7 @@ const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4, xLabel,
         backgroundColor: ds.pattern
             ? createBarPattern(ds.color ?? getDistributedColor(idx, graphData.length), ds.pattern)
             : (ds.color ?? getDistributedColor(idx, graphData.length)),
+        ...(ds.stack ? { stack: ds.stack } : {}),
     }));
 
     const chartData = {
@@ -79,6 +82,7 @@ const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4, xLabel,
             y: {
                 grid: { display: true },
                 title: { display: !!yLabel, text: yLabel ?? "" },
+                stacked: hasStacking,
             },
         },
     };

frontend/src/components/Simulation/PhaseResultTable.tsx

@@ -0,0 +1,54 @@
+import { Table } from "@equinor/eds-core-react";
+import { Phase } from "@/dto/SimulationResults";
+import { formatConcentration, formatPhaseFraction } from "@/functions/Formatting";
+
+interface PhaseResultTableProps {
+    initialConcentrations: Record<string, number>;
+    phases: Phase[];
+}
+
+const PhaseResultTable: React.FC<PhaseResultTableProps> = ({ initialConcentrations, phases }) => {
+    const allComponents = Array.from(
+        new Set([
+            ...Object.keys(initialConcentrations),
+            ...phases.flatMap((phase) => Object.keys(phase.concentrations)),
+        ])
+    );
+
+    const visibleComponents = allComponents.filter((key) => {
+        const init = initialConcentrations[key] ?? 0;
+        const hasSignificantPhaseValue = phases.some((phase) => (phase.concentrations[key] ?? 0) >= 0.001);
+        return init >= 0.001 || hasSignificantPhaseValue;
+    });
+
+    return (
+        <Table>
+            <Table.Head>
+                <Table.Row>
+                    <Table.Cell>Component</Table.Cell>
+                    <Table.Cell>Initial (ppm)</Table.Cell>
+                    {phases.map((phase) => (
+                        <Table.Cell key={phase.kind}>
+                            {phase.kind} ({formatPhaseFraction(phase.fraction)})
+                        </Table.Cell>
+                    ))}
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>
+                {visibleComponents.map((key) => (
+                    <Table.Row key={key}>
+                        <Table.Cell>{key}</Table.Cell>
+                        <Table.Cell>{formatConcentration(initialConcentrations[key] ?? 0)}</Table.Cell>
+                        {phases.map((phase) => (
+                            <Table.Cell key={phase.kind}>
+                                {formatConcentration(phase.concentrations[key] ?? 0)}
+                            </Table.Cell>
+                        ))}
+                    </Table.Row>
+                ))}
+            </Table.Body>
+        </Table>
+    );
+};
+
+export default PhaseResultTable;

frontend/src/components/Simulation/Results.tsx

@@ -2,10 +2,10 @@ 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/Simulation/ConcResultTable";
+import PhaseResultTable from "@/components/Simulation/PhaseResultTable";
 import Reactions from "../../pages/Reactions";
 import { MassBalanceError } from "@/components/Simulation/MassBalanceError";
-import { extractPlotData, formatPhaseFraction } from "@/functions/Formatting";
+import { extractPlotData } from "@/functions/Formatting";
 import BarChart from "@/components/BarChart";
 import GenericTable from "@/components/GenericTable";
 
@@ -68,40 +68,28 @@ const Results: React.FC<ResultsProps> = ({ simulationResults }) => {
     simulationResults.results.forEach((result, modelIndex) => {
         const modelId = simulationResults.input.models[modelIndex]?.modelId || `Model ${modelIndex + 1}`;
         const modelPrefix = simulationResults.results.length > 1 ? `${modelId}: ` : "";
+        const initialConcentrations = simulationResults.input.concentrations;
 
-        for (const phase of result.phases) {
-            const hasConcentrations = Object.keys(phase.concentrations).length > 0;
-            if (!hasConcentrations) continue;
+        const phasesWithConcentrations = result.phases.filter((phase) => Object.keys(phase.concentrations).length > 0);
 
-            panelTabs.push(`${modelPrefix}${phase.kind} (${formatPhaseFraction(phase.fraction)})`);
-
-            const initialConcentrations = simulationResults.input.concentrations;
+        if (phasesWithConcentrations.length > 0) {
+            panelTabs.push(`${modelPrefix}Phases`);
 
             panelContents.push(
-                <Tabs.Panel key={`phase-${modelIndex}-${phase.kind}`}>
+                <Tabs.Panel key={`phases-${modelIndex}`}>
                     <MassBalanceError
                         initialPhases={[{ kind: "aqueous", fraction: 1, concentrations: initialConcentrations }]}
                         finalPhases={result.phases}
                     />
 
                     <BarChart
                         aspectRatio={2}
-                        graphData={extractPlotData({
-                            ...simulationResults,
-                            results: [{ phases: [phase], panels: [] }],
-                            input: {
-                                ...simulationResults.input,
-                                concentrations: initialConcentrations,
-                            },
-                        })}
+                        graphData={extractPlotData(initialConcentrations, phasesWithConcentrations)}
                         xLabel="Components"
                         yLabel="Concentration (ppm)"
                     />
 
-                    <ResultConcTable
-                        initialConcentrations={initialConcentrations}
-                        finalConcentrations={phase.concentrations}
-                    />
+                    <PhaseResultTable initialConcentrations={initialConcentrations} phases={phasesWithConcentrations} />
                 </Tabs.Panel>
             );
         }

frontend/src/dto/ChartData.ts

@@ -12,6 +12,7 @@ export interface ChartDataSet {
     hidden?: boolean;
     color?: string;
     pattern?: BarPattern;
+    stack?: string;
 }
 export interface TabulatedResultRow {
     [key: string]: number | string;

frontend/src/functions/Formatting.tsx

@@ -1,4 +1,4 @@
-import { SimulationResults, getCo2RichConcentrations } from "@/dto/SimulationResults";
+import { SimulationResults, Phase, getCo2RichConcentrations } from "@/dto/SimulationResults";
 import { ChartDataSet, TabulatedResultRow } from "@/dto/ChartData";
 import { ExperimentResult } from "@/dto/ExperimentResult";
 
@@ -48,37 +48,33 @@ export const convertToSubscripts = (chemicalFormula: string): React.ReactNode =>
     return <p>{result}</p>;
 };
 
-export const extractPlotData = (simulationResults: SimulationResults) => {
-    const inputConcentrations = simulationResults.input.concentrations;
-    const finalConcentrations = getCo2RichConcentrations(simulationResults.results[0]?.phases);
-    const keys = Object.keys(finalConcentrations).filter(
-        (key) => (inputConcentrations[key] ?? 0) >= 0.001 || (finalConcentrations[key] ?? 0) >= 0.001
+export const extractPlotData = (inputConcentrations: Record<string, number>, phases: Phase[]): ChartDataSet[] => {
+    const allKeys = Array.from(
+        new Set([...Object.keys(inputConcentrations), ...phases.flatMap((phase) => Object.keys(phase.concentrations))])
+    );
+    const keys = allKeys.filter(
+        (key) =>
+            (inputConcentrations[key] ?? 0) >= 0.001 ||
+            phases.some((phase) => (phase.concentrations[key] ?? 0) >= 0.001)
     );
 
-    const initial = keys.map((key) => ({ x: key, y: inputConcentrations[key] }));
-    const final = keys.map((key) => ({ x: key, y: finalConcentrations[key] }));
-    const change = keys.map((key) => ({
-        x: key,
-        y: finalConcentrations[key] - (inputConcentrations[key] ?? 0),
-    }));
-
-    return [
-        {
-            label: "Change",
-            data: change,
-            hidden: false,
-        },
+    const datasets: ChartDataSet[] = [
         {
             label: "Initial",
-            data: initial,
-            hidden: true,
-        },
-        {
-            label: "Final",
-            data: final,
-            hidden: true,
+            data: keys.map((key) => ({ x: key, y: inputConcentrations[key] ?? 0 })),
+            stack: "initial",
         },
+        ...phases.map((phase) => ({
+            label: `${phase.kind} (${formatPhaseFraction(phase.fraction)})`,
+            data: keys.map((key) => ({
+                x: key,
+                y: (phase.concentrations[key] ?? 0) * phase.fraction,
+            })),
+            stack: "output",
+        })),
     ];
+
+    return datasets;
 };
 
 export const convertSimulationToChartData = (simulation: SimulationResults, experimentName: string): ChartDataSet => {