Sort graph labels

Author: haralde

frontend/src/components/BarChart.tsx

@@ -46,6 +46,16 @@ const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4 }) => {
             },
         },
         plugins: {
+            legend: {
+                position: "right" as const,
+                align: "start" as const,
+                labels: {
+                    boxWidth: 12,
+                    padding: 6,
+                    font: { size: 11 },
+                },
+                maxWidth: 400,
+            },
             zoom: {
                 pan: {
                     enabled: false,

frontend/src/components/LabResultsPlot.tsx

@@ -18,31 +18,27 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
 }) => {
     const [plotComponents, setPlotComponents] = useState<string[]>([]);
 
-    const experimentChartData: ChartDataSet[] = selectedExperiments.map((exp, expIdx) => ({
-        label: exp.name,
-        color: getLabResultColor(expIdx, 0),
-        pattern: EXPERIMENT_PATTERNS[expIdx % EXPERIMENT_PATTERNS.length],
-        data: Object.entries(exp.finalConcentrations)
-            .filter(([, concentration]) => Number(concentration) !== 0)
-            .map(([x, y]) => ({ x, y }))
-            .sort((a, b) => a.x.localeCompare(b.x)),
-    }));
-
-    const simulationChartData: ChartDataSet[] = [];
+    const chartDatasets: ChartDataSet[] = [];
     selectedExperiments.forEach((exp, expIdx) => {
+        chartDatasets.push({
+            label: exp.name,
+            color: getLabResultColor(expIdx, 0),
+            pattern: EXPERIMENT_PATTERNS[expIdx % EXPERIMENT_PATTERNS.length],
+            data: Object.entries(exp.finalConcentrations)
+                .filter(([, concentration]) => Number(concentration) !== 0)
+                .map(([x, y]) => ({ x, y }))
+                .sort((a, b) => a.x.localeCompare(b.x)),
+        });
         const simulations = simulationQueries[exp.name] ?? [];
         simulations.forEach((simulation, simIdx) => {
             const chartDataSet = convertSimulationToChartData(simulation, exp.name);
+            chartDataSet.label = `– ${chartDataSet.label}`;
             chartDataSet.color = getLabResultColor(expIdx, simIdx + 1);
             chartDataSet.pattern = EXPERIMENT_PATTERNS[expIdx % EXPERIMENT_PATTERNS.length];
-            simulationChartData.push(chartDataSet);
+            chartDatasets.push(chartDataSet);
         });
     });
 
-    const chartDatasets: ChartDataSet[] = [...experimentChartData, ...simulationChartData].filter(
-        (ds): ds is ChartDataSet => ds !== undefined
-    );
-
     const allComponents = Array.from(new Set(chartDatasets.flatMap((ds) => ds.data.map((point) => point.x)))).sort();
 
     if (selectedExperiments.length === 0) {

frontend/tests/components/LabResultPlot.test.tsx

@@ -66,9 +66,9 @@ describe("LabResultsPlot Component", () => {
         expect(graphData.flatMap((d: ChartDataSet) => d.label)).toEqual(
             expect.arrayContaining([
                 "Experiment Gondor",
+                "– Narnia - Experiment Gondor",
+                "– Mordor - Experiment Gondor",
                 "Experiment Rohan",
-                "Narnia - Experiment Gondor",
-                "Mordor - Experiment Gondor",
             ])
         );
 
@@ -100,7 +100,7 @@ describe("LabResultsPlot Component", () => {
 
         expect(graphData[0].data).toEqual([{ x: "CO2", y: 0.4 }]);
 
-        expect(graphData[1].data).toEqual([{ x: "CO2", y: 0.3 }]);
+        expect(graphData[1].data).toEqual([]);
     });
 
     it("handles multiple component selection correctly", () => {
@@ -123,10 +123,7 @@ describe("LabResultsPlot Component", () => {
             { x: "H2O", y: 0.4 },
         ]);
 
-        expect(graphData[1].data).toEqual([
-            { x: "CO2", y: 0.3 },
-            { x: "H2O", y: 0.5 },
-        ]);
+        expect(graphData[1].data).toEqual([]);
     });
 
     it("shows all data when no components are filtered", () => {
@@ -142,8 +139,8 @@ describe("LabResultsPlot Component", () => {
         const graphData = JSON.parse(barChart.getAttribute("data-graph-data") || "[]");
 
         expect(graphData[0].data).toHaveLength(3);
-        expect(graphData[1].data).toHaveLength(3);
+        expect(graphData[1].data).toHaveLength(2);
         expect(graphData[2].data).toHaveLength(2);
-        expect(graphData[3].data).toHaveLength(2);
+        expect(graphData[3].data).toHaveLength(3);
     });
 });