Sort compounds in barchart

Author: haralde

frontend/src/components/LabResultsPlot.tsx

@@ -16,7 +16,9 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({ selectedExperiments, si
     const chartDatasets: ChartDataSet[] = useMemo(() => {
         const experimentDatasets = selectedExperiments.map((exp) => ({
             label: exp.name,
-            data: Object.entries(exp.finalConcentrations).map(([x, y]) => ({ x, y })),
+            data: Object.entries(exp.finalConcentrations)
+                .map(([x, y]) => ({ x, y }))
+                .sort((a, b) => a.x.localeCompare(b.x)),
         }));
 
         return [...experimentDatasets, ...simulationQueries].filter((ds): ds is ChartDataSet => ds !== undefined);
@@ -30,7 +32,7 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({ selectedExperiments, si
         </Card>
     );
 
-    const allComponents = Array.from(new Set(chartDatasets.flatMap((ds) => ds.data.map((point) => point.x))));
+    const allComponents = Array.from(new Set(chartDatasets.flatMap((ds) => ds.data.map((point) => point.x)))).sort();
 
     if (selectedExperiments.length === 0) {
         return (

frontend/tests/components/LabResultPlot.test.tsx

@@ -72,9 +72,9 @@ describe("LabResultsPlot Component", () => {
         expect(graphData[0]).toEqual({
             label: "Experiment 1",
             data: [
+                { x: "CH4", y: 0.1 },
                 { x: "CO2", y: 0.4 },
                 { x: "H2O", y: 0.4 },
-                { x: "CH4", y: 0.1 },
             ],
         });