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