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,33 @@ import { SimulationResults, getCo2RichConcentrations } from "@/dto/SimulationRes
 import { ChartDataSet, TabulatedResultRow } from "@/dto/ChartData";
 import { ExperimentResult } from "@/dto/ExperimentResult";
 
+// Adaptive precision: finds enough decimals to show a small value
+// e.g. gap=0.0001 → 5 decimals, gap=0.05 → 2 decimals
+const adaptiveDecimals = (gap: number, max = 6): number =>
+    Math.min(Math.max(1, Math.ceil(-Math.log10(gap)) + 1), max);
+
+export const formatPhaseFraction = (fraction: number): string => {
+    const percent = fraction * 100;
+
+    if (percent === 0 || percent === 100) return `${percent.toFixed(1)}%`;
+
+    if (percent < 1e-5) {
+        return `${percent.toExponential(2)}%`;
+    }
+
+    if (percent < 0.1) {
+        return `${percent.toFixed(adaptiveDecimals(percent))}%`;
+    }
+
+    if (percent > 99.9) {
+        const gap = 100 - percent;
+        if (gap < 1e-5) return "≈100%";
+        return `${percent.toFixed(adaptiveDecimals(gap))}%`;
+    }
+
+    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,41 @@ 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%");
+        expect(formatPhaseFraction(0.999999999)).toBe("≈100%");
+    });
+
+    it("should show decimal percentage for small values", () => {
+        expect(formatPhaseFraction(0.000001)).toBe("0.00010%");
+        expect(formatPhaseFraction(0.00001)).toBe("0.0010%");
+        expect(formatPhaseFraction(0.0001)).toBe("0.010%");
+    });
+
+    it("should show scientific notation for extremely small values", () => {
+        expect(formatPhaseFraction(0.0000001)).toBe("1.00e-5%");
+        expect(formatPhaseFraction(0.00000001)).toBe("1.00e-6%");
+    });
+
+    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" }] },