Fix percentage formatting

Author: lars-petter-hauge

frontend/src/components/Simulation/Results.tsx

@@ -5,7 +5,7 @@ import { Panel, SimulationResults } from "@/dto/SimulationResults";
 import ResultConcTable from "@/components/Simulation/ConcResultTable";
 import Reactions from "../../pages/Reactions";
 import { MassBalanceError } from "@/components/Simulation/MassBalanceError";
-import { extractPlotData } from "@/functions/Formatting";
+import { extractPlotData, formatPhaseFraction } from "@/functions/Formatting";
 import BarChart from "@/components/BarChart";
 import GenericTable from "@/components/GenericTable";
 
@@ -73,7 +73,7 @@ const Results: React.FC<ResultsProps> = ({ simulationResults }) => {
             const hasConcentrations = Object.keys(phase.concentrations).length > 0;
             if (!hasConcentrations) continue;
 
-            panelTabs.push(`${modelPrefix}${phase.kind} (${(phase.fraction * 100).toFixed(1)}%)`);
+            panelTabs.push(`${modelPrefix}${phase.kind} (${formatPhaseFraction(phase.fraction)})`);
 
             const initialConcentrations = simulationResults.input.concentrations;
 

frontend/src/functions/Formatting.tsx

@@ -2,6 +2,23 @@ import { SimulationResults, getCo2RichConcentrations } from "@/dto/SimulationRes
 import { ChartDataSet, TabulatedResultRow } from "@/dto/ChartData";
 import { ExperimentResult } from "@/dto/ExperimentResult";
 
+export const formatPhaseFraction = (fraction: number): string => {
+    const percent = fraction * 100;
+
+    if (percent === 0 || percent === 100) return `${percent.toFixed(1)}%`;
+
+    if (percent < 0.1) {
+        return `${percent.toExponential(2)} wt%`;
+    }
+
+    if (percent > 99.9) {
+        const decimals = Math.max(1, Math.ceil(-Math.log10(100 - percent)) + 1);
+        return `${percent.toFixed(Math.min(decimals, 6))}%`;
+    }
+
+    return `${percent.toFixed(1)}%`;
+};
+
 export const formatConcentration = (value: number | undefined | null): string => {
     if (value === undefined || value === null) return "-";
 

frontend/tests/functions/Formatting.test.tsx

@@ -4,6 +4,7 @@ import {
     convertSimulationToChartData,
     convertSimulationQueriesResultToTabulatedData,
     convertExperimentResultsToTabulatedData,
+    formatPhaseFraction,
 } from "@/functions/Formatting";
 import { SimulationResults } from "@/dto/SimulationResults";
 import { ExperimentResult } from "@/dto/ExperimentResult";
@@ -33,6 +34,34 @@ describe("convertToSubscripts", () => {
     });
 });
 
+describe("formatPhaseFraction", () => {
+    it("should show normal percentage for mid-range values", () => {
+        expect(formatPhaseFraction(0.5)).toBe("50.0%");
+        expect(formatPhaseFraction(0.123)).toBe("12.3%");
+    });
+
+    it("should show exact 0 and 100", () => {
+        expect(formatPhaseFraction(0)).toBe("0.0%");
+        expect(formatPhaseFraction(1)).toBe("100.0%");
+    });
+
+    it("should show extra precision for values very close to 100%", () => {
+        expect(formatPhaseFraction(0.999999)).toBe("99.99990%");
+        expect(formatPhaseFraction(0.9999)).toBe("99.990%");
+        expect(formatPhaseFraction(0.999)).toBe("99.9%");
+    });
+
+    it("should show scientific notation wt% for very small values", () => {
+        expect(formatPhaseFraction(0.000001)).toBe("1.00e-4 wt%");
+        expect(formatPhaseFraction(0.0000001)).toBe("1.00e-5 wt%");
+    });
+
+    it("should show normal percentage for small but not tiny values", () => {
+        expect(formatPhaseFraction(0.05)).toBe("5.0%");
+        expect(formatPhaseFraction(0.001)).toBe("0.1%");
+    });
+});
+
 describe("convertingSimulationToChartData", () => {
     const simulation: SimulationResults = {
         input: { concentrations: { CO: 0.5, H20: 0.7 }, models: [{ parameters: {}, modelId: "Narnia" }] },