Add keyboard listener on dimensions popover

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, 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"
@@ -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,7 @@ const Dimension = ({ id, strong, rowFlavour }) => {
 
   return (
     <GridRow opacity={visible ? null : "weak"}>
+      <TextMicro>{index < 9 ? index + 1 : ""}</TextMicro>
       <Flex alignItems="center" gap={1} position="relative">
         <ColorBackground
           id={id}

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,8 +24,9 @@ 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;
+  justify-content: center;
 `
 
 const GridHeader = styled.div`
@@ -97,6 +99,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 +112,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 +145,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}>

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
       )}

src/components/line/popover/useKeyboardListener.js

@@ -0,0 +1,28 @@
+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]
+      if (!id) return
+      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