From 892355cb7c0898673a518cb56d4bc707fe05d32f Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Mon, 27 Jan 2025 11:58:24 +0200
Subject: [PATCH 1/2] Add keyboard listener on dimensions popover

---
 src/components/line/popover/dimension.js      |  7 +++--
 src/components/line/popover/dimensions.js     | 10 ++++---
 .../line/popover/useKeyboardListener.js       | 27 +++++++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/components/line/popover/useKeyboardListener.js

diff --git a/src/components/line/popover/dimension.js b/src/components/line/popover/dimension.js
index f616f6ac..4257d113 100644
--- a/src/components/line/popover/dimension.js
+++ b/src/components/line/popover/dimension.js
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { Flex } from "@netdata/netdata-ui"
+import { Flex, Text } from "@netdata/netdata-ui"
 import Color, { ColorBar } from "@/components/line/dimensions/color"
 import Name from "@/components/line/dimensions/name"
 import Value, { Value as ValuePart } from "@/components/line/dimensions/value"
@@ -64,7 +64,7 @@ const AnnotationsValue = ({ children: annotations, showFull, ...rest }) => (
   </Flex>
 )
 
-const Dimension = ({ id, strong, rowFlavour }) => {
+const Dimension = ({ id, index, strong, rowFlavour }) => {
   const visible = useVisibleDimensionId(id)
 
   const chart = useChart()
@@ -73,6 +73,9 @@ const Dimension = ({ id, strong, rowFlavour }) => {
 
   return (
     <GridRow opacity={visible ? null : "weak"}>
+      <Flex flex="grow" alignItems="center">
+        <Text>{index < 9 ? index + 1 : ""}</Text>
+      </Flex>
       <Flex alignItems="center" gap={1} position="relative">
         <ColorBackground
           id={id}
diff --git a/src/components/line/popover/dimensions.js b/src/components/line/popover/dimensions.js
index f52aafd6..e82f12fb 100644
--- a/src/components/line/popover/dimensions.js
+++ b/src/components/line/popover/dimensions.js
@@ -6,6 +6,7 @@ import Units from "@/components/line/dimensions/units"
 import UpdateEvery from "./updateEvery"
 import Timestamp from "./timestamp"
 import Dimension from "./dimension"
+import useKeyboardListener from "./useKeyboardListener"
 
 const Container = styled(Flex).attrs({
   round: true,
@@ -23,7 +24,7 @@ const Container = styled(Flex).attrs({
 const Grid = styled.div`
   display: grid;
   width: 100%;
-  grid-template-columns: minmax(150px, max-content) 60px 60px minmax(80px, auto);
+  grid-template-columns: 30px minmax(150px, max-content) 60px 60px minmax(80px, auto);
   align-items: center;
 `
 
@@ -97,6 +98,8 @@ const Dimensions = () => {
 
   const rowFlavour = rowFlavours[row] || rowFlavours.default
 
+  useKeyboardListener({ chart, ids })
+
   return (
     <Container data-testid="chartPopover-dimensions" gap={2}>
       <Flex column gap={1}>
@@ -108,6 +111,7 @@ const Dimensions = () => {
       </Flex>
       <Grid gap={1} column>
         <GridHeader>
+          <TextMicro strong>Key</TextMicro>
           <TextMicro strong>Dimension</TextMicro>
           <TextMicro
             color={rowFlavour === rowFlavours.default ? "text" : "textLite"}
@@ -140,8 +144,8 @@ const Dimensions = () => {
             Info
           </TextMicro>
         </GridHeader>
-        {ids.map(id => (
-          <Dimension key={id} id={id} strong={row === id} rowFlavour={rowFlavour} />
+        {ids.map((id, index) => (
+          <Dimension key={id} id={id} index={index} strong={row === id} rowFlavour={rowFlavour} />
         ))}
       </Grid>
       <Flex flex={false} height={3}>
diff --git a/src/components/line/popover/useKeyboardListener.js b/src/components/line/popover/useKeyboardListener.js
new file mode 100644
index 00000000..feaa2fac
--- /dev/null
+++ b/src/components/line/popover/useKeyboardListener.js
@@ -0,0 +1,27 @@
+import { useCallback, useEffect } from "react"
+
+const digitRegexp = new RegExp(/^Digit\d+$/)
+
+const useKeyboardListener = ({ chart, ids }) => {
+  const keyDownHandler = useCallback(
+    e => {
+      const isDigit = digitRegexp.test(e.code)
+      if (!isDigit) return
+      const digit = e.code.replace(/^Digit/, "")
+      if (digit === null || isNaN(digit)) return
+      const id = ids[parseInt(digit) - 1]
+      const merge = e.shiftKey || e.ctrlKey || e.metaKey
+      chart.toggleDimensionId(id, { merge })
+    },
+    [chart, ids]
+  )
+
+  useEffect(() => {
+    window.addEventListener("keydown", keyDownHandler)
+    return () => {
+      window.removeEventListener("keydown", keyDownHandler)
+    }
+  }, [chart, ids])
+}
+
+export default useKeyboardListener

From 01f6a478079b29f1d18471797a68b80e51055479 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Mon, 27 Jan 2025 15:39:36 +0200
Subject: [PATCH 2/2] Re-render dimension popover on selected labels change

---
 src/components/line/popover/dimension.js           | 6 ++----
 src/components/line/popover/dimensions.js          | 1 +
 src/components/line/popover/index.js               | 6 +++++-
 src/components/line/popover/useKeyboardListener.js | 1 +
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/line/popover/dimension.js b/src/components/line/popover/dimension.js
index 4257d113..9332794c 100644
--- a/src/components/line/popover/dimension.js
+++ b/src/components/line/popover/dimension.js
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { Flex, Text } from "@netdata/netdata-ui"
+import { Flex, TextMicro } from "@netdata/netdata-ui"
 import Color, { ColorBar } from "@/components/line/dimensions/color"
 import Name from "@/components/line/dimensions/name"
 import Value, { Value as ValuePart } from "@/components/line/dimensions/value"
@@ -73,9 +73,7 @@ const Dimension = ({ id, index, strong, rowFlavour }) => {
 
   return (
     <GridRow opacity={visible ? null : "weak"}>
-      <Flex flex="grow" alignItems="center">
-        <Text>{index < 9 ? index + 1 : ""}</Text>
-      </Flex>
+      <TextMicro>{index < 9 ? index + 1 : ""}</TextMicro>
       <Flex alignItems="center" gap={1} position="relative">
         <ColorBackground
           id={id}
diff --git a/src/components/line/popover/dimensions.js b/src/components/line/popover/dimensions.js
index e82f12fb..45d408e4 100644
--- a/src/components/line/popover/dimensions.js
+++ b/src/components/line/popover/dimensions.js
@@ -26,6 +26,7 @@ const Grid = styled.div`
   width: 100%;
   grid-template-columns: 30px minmax(150px, max-content) 60px 60px minmax(80px, auto);
   align-items: center;
+  justify-content: center;
 `
 
 const GridHeader = styled.div`
diff --git a/src/components/line/popover/index.js b/src/components/line/popover/index.js
index 6f57902e..e795b56b 100644
--- a/src/components/line/popover/index.js
+++ b/src/components/line/popover/index.js
@@ -34,6 +34,10 @@ const Popover = ({ uiName }) => {
   targetRef.current = target
   updatePositionRef.current = useMakeUpdatePosition(target, dropRef, align, stretch)
 
+  const [dimKey, setDimKey] = useState(0)
+
+  chart.onAttributeChange("selectedLegendDimensions", () => setDimKey(prev => prev + 1))
+
   useEffect(() => {
     return unregister(
       chart.getUI(uiName).on("mousemove", event => {
@@ -79,7 +83,7 @@ const Popover = ({ uiName }) => {
           data-testid="drop"
           sx={{ pointerEvents: "none" }}
         >
-          <Dimensions uiName={uiName} data-testid="chartPopover" />
+          <Dimensions key={dimKey} uiName={uiName} data-testid="chartPopover" />
         </DropContainer>,
         el
       )}
diff --git a/src/components/line/popover/useKeyboardListener.js b/src/components/line/popover/useKeyboardListener.js
index feaa2fac..66bc403e 100644
--- a/src/components/line/popover/useKeyboardListener.js
+++ b/src/components/line/popover/useKeyboardListener.js
@@ -10,6 +10,7 @@ const useKeyboardListener = ({ chart, ids }) => {
       const digit = e.code.replace(/^Digit/, "")
       if (digit === null || isNaN(digit)) return
       const id = ids[parseInt(digit) - 1]
+      if (!id) return
       const merge = e.shiftKey || e.ctrlKey || e.metaKey
       chart.toggleDimensionId(id, { merge })
     },