From 631890b38e515b8af896c4bb251a9955855dec2c Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 5 Mar 2025 10:17:15 +0100
Subject: [PATCH] Add graph legend series toggling instructions again (#16164)

Addresses part of https://github.com/prometheus/prometheus/issues/16162

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../mantine-ui/src/pages/query/UPlotChart.tsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx b/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
index f105cb54d6..befaaa783e 100644
--- a/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
+++ b/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
@@ -5,7 +5,7 @@ import { GraphDisplayMode } from "../../state/queryPageSlice";
 import uPlot from "uplot";
 import UplotReact from "uplot-react";
 import { useSettings } from "../../state/settingsSlice";
-import { useComputedColorScheme } from "@mantine/core";
+import { useComputedColorScheme, Text } from "@mantine/core";
 
 import "uplot/dist/uPlot.min.css";
 import "./uplot.css";
@@ -88,11 +88,16 @@ const UPlotChart: FC<UPlotChartProps> = ({
   }
 
   return (
-    <UplotReact
-      options={options}
-      data={processedData}
-      className={classes.uplotChart}
-    />
+    <>
+      <UplotReact
+        options={options}
+        data={processedData}
+        className={classes.uplotChart}
+      />
+      <Text fz="xs" c="dimmed" ml={40} mt={-25} mb="lg">
+        Click: hide single series, Ctrl+click: show single series
+      </Text>
+    </>
   );
 };