mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2026-04-11 08:41:03 +02:00
Code Issues Projects Releases Wiki Activity

UI: Fix tooltip Y-offset drift for multiple graph panels

Browse Source 
getBoundingClientRect() was cached in the setSize hook, which only fires
on chart creation/resize. The cached viewport-relative coordinates became
stale after scrolling, causing the tooltip to appear increasingly offset
on charts further down the page.

Fixed by calling getBoundingClientRect() on every setCursor invocation to
always get accurate viewport-relative coordinates.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2026-03-04 14:51:26 +01:00
parent 5a02b92c0e
commit 2aebd269bc
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/ui/mantine-ui/src/pages/query/uPlotChartHelpers.ts
View File

@ -83,8 +83,6 @@ const formatLabels = (labels: { [key: string]: string }): string => `
const tooltipPlugin = (useLocalTime: boolean, data: AlignedData) => {
let over: HTMLDivElement;
let boundingLeft: number;
let boundingTop: number;
let selectedSeriesIdx: number | null = null;
const overlay = document.createElement("div");
@ -111,12 +109,6 @@ const tooltipPlugin = (useLocalTime: boolean, data: AlignedData) => {
destroy: () => {
overlay.remove();
},
// When the chart is resized, store the bounding box of the overlay.
setSize: () => {
const bbox = over.getBoundingClientRect();
boundingLeft = bbox.left;
boundingTop = bbox.top;
},
// When a series is selected by hovering close to it, store the
// index of the selected series, so we can update the hover tooltip
// in setCursor.
@ -150,8 +142,12 @@ const tooltipPlugin = (useLocalTime: boolean, data: AlignedData) => {
}
const color = series.stroke(u, selectedSeriesIdx);
const x = left + boundingLeft;
const y = top + boundingTop;
// Get the bounding rect fresh on every cursor move to account for
// page scrolling, which would otherwise cause a growing Y offset
// for charts further down the page.
const bbox = over.getBoundingClientRect();
const x = left + bbox.left;
const y = top + bbox.top;
overlay.innerHTML = `
<div class="date">${formatTimestamp(ts, useLocalTime)}</div>