Improve column overview in phase table

We make the header two rows and a vertical line separates initial and
final. Both states will initially contain all phases in addition to a
Total column. We apply filters:

1. Only show a column if there are any value >0 (removes aq phase
   initial, as there is only co2 feed)
2. Only show total if there are more than 1 column with any value >0
   (removes total phase for initial, as aq is already removed)

Author: lars-petter-hauge

frontend/src/components/Simulation/PhaseResultTable.tsx

@@ -12,16 +12,44 @@ function unitLabel(phase: Phase): string {
     return phase.kind === "aqueous" ? "wt%" : "ppm";
 }
 
-function ConvertUnitAccordingToPhase(phase: Phase): Record<string, number> {
+function convertUnitAccordingToPhase(phase: Phase): Record<string, number> {
     if (phase.kind === "aqueous") {
         return ppmMolToWeightPercent(phase.concentrations);
     }
     return phase.concentrations;
 }
 
-const PhaseResultTable: React.FC<PhaseResultTableProps> = ({ initialConcentrations, phases }) => {
-    const phaseDisplayData = phases.map((phase) => ConvertUnitAccordingToPhase(phase));
+function phaseLabel(phase: Phase): string {
+    return phase.kind === "aqueous" ? "Aqueous" : "CO2-rich";
+}
+
+function sortPhases(phases: Phase[]): Phase[] {
+    return [...phases].sort((a, b) => {
+        if (a.kind === "co2-rich" && b.kind === "aqueous") return -1;
+        if (a.kind === "aqueous" && b.kind === "co2-rich") return 1;
+        return 0;
+    });
+}
+
+interface PhaseGroup {
+    label: string;
+    phases: Phase[];
+    displayData: Record<string, number>[];
+    showTotal: boolean;
+}
 
+function buildPhaseGroup(label: string, phases: Phase[]): PhaseGroup {
+    const sorted = sortPhases(phases);
+    const visible = sorted.filter((phase) => Object.values(phase.concentrations).some((v) => v > 0));
+    return {
+        label,
+        phases: visible,
+        displayData: visible.map((phase) => convertUnitAccordingToPhase(phase)),
+        showTotal: visible.length > 1,
+    };
+}
+
+const PhaseResultTable: React.FC<PhaseResultTableProps> = ({ initialConcentrations, phases }) => {
     const allComponents = Array.from(
         new Set([
             ...Object.keys(initialConcentrations),
@@ -35,29 +63,79 @@ const PhaseResultTable: React.FC<PhaseResultTableProps> = ({ initialConcentratio
         return init >= 0.001 || hasSignificantPhaseValue;
     });
 
+    const initialPhases: Phase[] = [
+        { kind: "co2-rich", fraction: 1, concentrations: initialConcentrations },
+        { kind: "aqueous", fraction: 0, concentrations: {} },
+    ];
+
+    const groups: PhaseGroup[] = [buildPhaseGroup("Initial", initialPhases), buildPhaseGroup("Final", phases)];
+
+    const separatorStyle = { borderLeft: "2px solid #dcdcdc" };
+
     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} [{unitLabel(phase)}] ({formatPhaseFraction(phase.fraction)})
+                    <Table.Cell rowSpan={2}>Component</Table.Cell>
+                    {groups.map((group, gi) => (
+                        <Table.Cell
+                            key={group.label}
+                            colSpan={group.phases.length + (group.showTotal ? 1 : 0)}
+                            style={{ textAlign: "center", ...(gi > 0 ? separatorStyle : {}) }}
+                        >
+                            {group.label}
                         </Table.Cell>
                     ))}
                 </Table.Row>
+                <Table.Row>
+                    {groups.map((group, gi) =>
+                        group.phases
+                            .map((phase, pi) => (
+                                <Table.Cell
+                                    key={`${group.label}-${phase.kind}`}
+                                    style={gi > 0 && pi === 0 ? separatorStyle : undefined}
+                                >
+                                    {`${phaseLabel(phase)} [${unitLabel(phase)}]${phase.fraction < 1 ? ` (${formatPhaseFraction(phase.fraction)})` : ""}`}
+                                </Table.Cell>
+                            ))
+                            .concat(
+                                group.showTotal
+                                    ? [<Table.Cell key={`${group.label}-total`}>Total [ppm]</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>
-                        {phaseDisplayData.map((concentrations, idx) => (
-                            <Table.Cell key={phases[idx].kind}>
-                                {formatConcentration(concentrations[key] ?? 0)}
-                            </Table.Cell>
-                        ))}
+                        {groups.map((group, gi) =>
+                            group.displayData
+                                .map((concentrations, pi) => (
+                                    <Table.Cell
+                                        key={`${group.label}-${group.phases[pi].kind}`}
+                                        style={gi > 0 && pi === 0 ? separatorStyle : undefined}
+                                    >
+                                        {formatConcentration(concentrations[key] ?? 0)}
+                                    </Table.Cell>
+                                ))
+                                .concat(
+                                    group.showTotal
+                                        ? [
+                                              <Table.Cell key={`${group.label}-total`}>
+                                                  {formatConcentration(
+                                                      group.phases.reduce(
+                                                          (sum, phase) =>
+                                                              sum + (phase.concentrations[key] ?? 0) * phase.fraction,
+                                                          0
+                                                      )
+                                                  )}
+                                              </Table.Cell>,
+                                          ]
+                                        : []
+                                )
+                        )}
                     </Table.Row>
                 ))}
             </Table.Body>