From 7103b35568bb7046f162c30fcd3e8a8f4f54c532 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 4 Sep 2024 17:45:31 +0200
Subject: [PATCH] Add "Show exemplars" button (doesn't do anything yet)

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

diff --git a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
index f5e2bffbfb..628183bd6a 100644
--- a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
+++ b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
@@ -205,82 +205,88 @@ const QueryPanel: FC<PanelProps> = ({ idx, metricNames }) => {
               />
             </Group>
 
-            <SegmentedControl
-              onChange={(value) =>
-                dispatch(
-                  setVisualizer({
-                    idx,
-                    visualizer: {
-                      ...panel.visualizer,
-                      displayMode: value as GraphDisplayMode,
-                    },
-                  })
-                )
-              }
-              value={panel.visualizer.displayMode}
-              data={[
-                {
-                  value: GraphDisplayMode.Lines,
-                  label: (
-                    <Center>
-                      <IconChartLine style={iconStyle} />
-                      <Box ml={10}>Unstacked</Box>
-                    </Center>
-                  ),
-                },
-                {
-                  value: GraphDisplayMode.Stacked,
-                  label: (
-                    <Center>
-                      <IconChartAreaFilled style={iconStyle} />
-                      <Box ml={10}>Stacked</Box>
-                    </Center>
-                  ),
-                },
-                {
-                  value: GraphDisplayMode.Heatmap,
-                  label: (
-                    <Center>
-                      <IconChartGridDots style={iconStyle} />
-                      <Box ml={10}>Heatmap</Box>
-                    </Center>
-                  ),
-                },
-              ]}
-            />
-            {/* <Switch color="gray" defaultChecked label="Show exemplars" /> */}
-            {/* <Switch
-              checked={panel.visualizer.showExemplars}
-              onChange={(event) =>
-                dispatch(
-                  setVisualizer({
-                    idx,
-                    visualizer: {
-                      ...panel.visualizer,
-                      showExemplars: event.currentTarget.checked,
-                    },
-                  })
-                )
-              }
-              color={"rgba(34,139,230,.1)"}
-              size="md"
-              label="Show exemplars"
-              thumbIcon={
-                panel.visualizer.showExemplars ? (
-                  <IconCheck
-                    style={{ width: "0.9rem", height: "0.9rem" }}
-                    color={"rgba(34,139,230,.1)"}
-                    stroke={3}
-                  />
-                ) : (
-                  <IconX
-                    style={{ width: "0.9rem", height: "0.9rem" }}
-                    color="rgba(34,139,230,.1)"
-                    stroke={3}
-                  />
-                )
-              }
-            /> */}
+            <Group gap="lg">
+              <Button
+                variant="subtle"
+                color="gray.9"
+                size="xs"
+                leftSection={
+                  panel.visualizer.showExemplars ? (
+                    <IconCheckbox
+                      style={{
+                        width: "1.5em",
+                        height: "1.5em",
+                        marginRight: -1,
+                      }}
+                    />
+                  ) : (
+                    <IconSquare
+                      style={{
+                        width: "1.3em",
+                        height: "1.3em",
+                      }}
+                    />
+                  )
+                }
+                onClick={() =>
+                  dispatch(
+                    setVisualizer({
+                      idx,
+                      visualizer: {
+                        ...panel.visualizer,
+                        showExemplars: !panel.visualizer.showExemplars,
+                      },
+                    })
+                  )
+                }
+              >
+                Show exemplars
+              </Button>
+
+              <SegmentedControl
+                onChange={(value) =>
+                  dispatch(
+                    setVisualizer({
+                      idx,
+                      visualizer: {
+                        ...panel.visualizer,
+                        displayMode: value as GraphDisplayMode,
+                      },
+                    })
+                  )
+                }
+                value={panel.visualizer.displayMode}
+                data={[
+                  {
+                    value: GraphDisplayMode.Lines,
+                    label: (
+                      <Center>
+                        <IconChartLine style={iconStyle} />
+                        <Box ml={10}>Unstacked</Box>
+                      </Center>
+                    ),
+                  },
+                  {
+                    value: GraphDisplayMode.Stacked,
+                    label: (
+                      <Center>
+                        <IconChartAreaFilled style={iconStyle} />
+                        <Box ml={10}>Stacked</Box>
+                      </Center>
+                    ),
+                  },
+                  // {
+                  //   value: GraphDisplayMode.Heatmap,
+                  //   label: (
+                  //     <Center>
+                  //       <IconChartGridDots style={iconStyle} />
+                  //       <Box ml={10}>Heatmap</Box>
+                  //     </Center>
+                  //   ),
+                  // },
+                ]}
+              />
+            </Group>
           </Group>
           <Space h="lg" />
           <Graph