Re-render dimension popover on selected labels change

netdata · Jan 27, 2025 · 01f6a47 · 01f6a47
1 parent 892355c
commit 01f6a47
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 })
     },