Show brighter graph line colors in dark mode

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/pages/query/ColorPool.ts

@@ -1,4 +1,11 @@
-export const colorPool = [
+import { lighten } from "@mantine/core";
+
+export const getSeriesColor = (idx: number, light: boolean): string => {
+  const color = colorPool[idx % colorPool.length];
+  return light ? color : lighten(color, 0.4);
+};
+
+const colorPool = [
   "#008000",
   "#008080",
   "#800000",

web/ui/mantine-ui/src/pages/query/UPlotChart.tsx

@@ -9,7 +9,7 @@ import "uplot/dist/uPlot.min.css";
 import "./uplot.css";
 import { formatTimestamp } from "../../lib/formatTime";
 import { computePosition, shift, flip, offset } from "@floating-ui/dom";
-import { colorPool } from "./ColorPool";
+import { getSeriesColor } from "./ColorPool";
 import { useSettings } from "../../state/settingsSlice";
 import { useComputedColorScheme } from "@mantine/core";
 
@@ -266,9 +266,10 @@ const getOptions = (
       fill: (
         _u: uPlot,
         seriesIdx: number
-      ): CSSStyleDeclaration["borderColor"] => {
+      ): CSSStyleDeclaration["borderColor"] =>
-        return colorPool[(seriesIdx - 1) % colorPool.length];
+        // Because the index here is coming from uPlot, we need to subtract 1. Series 0
-      },
+        // represents the X axis, so we need to skip it.
+        getSeriesColor(seriesIdx - 1, light),
     },
   },
   // @ts-expect-error - uPlot enum types don't work across module boundaries,
@@ -317,12 +318,15 @@ const getOptions = (
   ],
   series: [
     {},
-    ...result.map((r, idx) => ({
+    ...result.map(
-      label: formatSeries(r.metric),
+      (r, idx): uPlot.Series => ({
-      width: 2,
+        label: formatSeries(r.metric),
-      labels: r.metric,
+        width: 1.5,
-      stroke: colorPool[idx % colorPool.length],
+        // @ts-expect-error - uPlot doesn't have a field for labels, but we just attach some anyway.
-    })),
+        labels: r.metric,
+        stroke: getSeriesColor(idx, light),
+      })
+    ),
   ],
   hooks: {
     setSelect: [