Add suffix of ppm to be explicit

backend/src/acidwatch_api/models/example_adapter.py

@@ -43,8 +43,8 @@ class ExampleAdapter(BaseAdapter):
     # The exception is CO2, which must not be specified as it's the solvent.
     #
     # Note that all concentrations provided to the adapter through
-    # self.concentrations will be in the unit PPM. Likewise, all concentrations
-    # provided in the results will be treated as PPM by the frontend. Make sure
+    # self.concentrations will be in the unit mol PPM. Likewise, all concentrations
+    # provided in the results will be treated as mol PPM by the frontend. Make sure
     # to adhere to this unit in the adapter interface.
     valid_substances = ["H2O"]
 

frontend/src/components/GridSimulation/CompareGridSimulations.tsx

@@ -66,8 +66,9 @@ const CompareSection: React.FC<CompareSectionProps> = ({ results, modelIndex, ph
     });
 
     const axisSubstances = new Set(results.map((r) => r.axes[0]?.substance).filter(Boolean));
-    const xAxisLabel = axisSubstances.size === 1 ? `${[...axisSubstances][0]} (ppm)` : "Varied concentration (ppm)";
-    const unit = phaseKind === "aqueous" ? "wt%" : "ppm";
+    const xAxisLabel =
+        axisSubstances.size === 1 ? `${[...axisSubstances][0]} (ppm·mol)` : "Varied concentration (ppm·mol)";
+    const unit = phaseKind === "aqueous" ? "wt%" : "ppm·mol";
 
     return (
         <>

frontend/src/components/GridSimulation/GridResults.tsx

@@ -65,7 +65,7 @@ const GridPhaseChart: React.FC<GridPhaseChartProps> = ({ result, modelIndex, pha
                     xValues={xValues}
                     series={series}
                     xAxisLabel={`${xAxisSubstance} (ppm)`}
-                    yAxisLabel={`Output concentration (${phaseKind === "aqueous" ? "wt%" : "ppm"})`}
+                    yAxisLabel={`Output concentration (${phaseKind === "aqueous" ? "wt%" : "ppm·mol"})`}
                     aspectRatio={2}
                 />
             )}

frontend/src/components/LabResultsPlot.tsx

@@ -57,7 +57,7 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
                     data: ds.data.filter((point) => plotComponents.length === 0 || plotComponents.includes(point.x)),
                 }))}
                 aspectRatio={4}
-                yLabel="Concentration (ppm)"
+                yLabel="Concentration (ppm·mol)"
                 xLabel="Components"
             />
             <div style={{ marginBottom: "20px" }}>

frontend/src/components/ParityPlots.tsx

@@ -66,8 +66,8 @@ const ParityPlots: React.FC<ParityPlotsProps> = ({ availableComponents, experime
                         {comp && (
                             <ScatterPlot
                                 datasets={buildParityDatasets(experiments, simulationsPerExperiment, comp)}
-                                xLabel={`Measured ${comp} (ppm)`}
-                                yLabel={`Modelled ${comp} (ppm)`}
+                                xLabel={`Measured ${comp} (ppm·mol)`}
+                                yLabel={`Modelled ${comp} (ppm·mol)`}
                                 showDiagonal
                             />
                         )}

frontend/src/components/Simulation/ModelInputs.tsx

@@ -170,7 +170,7 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
                                     id="gridMin0"
                                     type="number"
                                     label="From"
-                                    unit="ppm"
+                                    unit="ppm·mol"
                                     step="any"
                                     min={0}
                                     max={PPM_MAX}
@@ -183,7 +183,7 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
                                     id="gridMax0"
                                     type="number"
                                     label="To"
-                                    unit="ppm"
+                                    unit="ppm·mol"
                                     step="any"
                                     min={0}
                                     max={PPM_MAX}
@@ -199,7 +199,7 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
                                     id="gridStep0"
                                     type="number"
                                     label="Step"
-                                    unit="ppm"
+                                    unit="ppm·mol"
                                     step="any"
                                     min={0.001}
                                     value={stepStr}
@@ -309,7 +309,7 @@ const ModelInputs: React.FC<{
                                     opacity: invalid || isGridded ? 0.6 : 1,
                                 }}
                                 step="any"
-                                unit="ppm"
+                                unit="ppm·mol"
                                 max={PPM_MAX}
                                 value={value}
                                 disabled={isGridded}

frontend/src/components/Simulation/PhaseResultTable.tsx

@@ -10,7 +10,7 @@ interface PhaseResultTableProps {
 }
 
 function unitLabel(phase: Phase): string {
-    return phase.kind === "aqueous" ? "wt%" : "ppm";
+    return phase.kind === "aqueous" ? "wt%" : "ppm·mol";
 }
 
 function convertUnitAccordingToPhase(phase: Phase): Record<string, number> {
@@ -109,7 +109,7 @@ const PhaseResultTable: React.FC<PhaseResultTableProps> = ({ initialConcentratio
                             </Table.Cell>
                         ));
                         if (group.showTotal) {
-                            cells.push(<Table.Cell key={`${group.label}-total`}>Total [ppm]</Table.Cell>);
+                            cells.push(<Table.Cell key={`${group.label}-total`}>Total [ppm·mol]</Table.Cell>);
                         }
                         return cells;
                     })}

frontend/src/components/Simulation/Results.tsx

@@ -89,7 +89,7 @@ const ModelResultTabs: React.FC<ModelResultTabsProps> = ({ simulationResults, mo
                         aspectRatio={2}
                         graphData={extractPlotData(initialConcentrations, phasesWithConcentrations)}
                         xLabel="Components"
-                        yLabel="Concentration (ppm)"
+                        yLabel="Concentration (ppm·mol)"
                     />
 
                     <PhaseResultTable initialConcentrations={initialConcentrations} phases={phasesWithConcentrations} />

frontend/src/pages/Compare.tsx

@@ -198,7 +198,7 @@ const CompareSimulations: React.FC<{ simulationIds: string[] }> = ({ simulationI
                 Output Concentrations
             </Typography>
 
-            <BarChart graphData={chartData} aspectRatio={3} xLabel="Components" yLabel="Concentration (ppm)" />
+            <BarChart graphData={chartData} aspectRatio={3} xLabel="Components" yLabel="Concentration (ppm·mol)" />
 
             <Typography variant="h5" style={{ marginBottom: "1rem" }}>
                 Concentration Values (≥ 0.01)