@perses-dev/components 0.54.0-beta.9 → 0.54.0-rc.0

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -49,35 +49,220 @@ _export(exports, {
 const _model = require("../model");
 const _utils = require("../utils");
 const _tooltipmodel = require("./tooltip-model");
+const _utils1 = require("./utils");
 const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
 const SHOW_FEWER_SERIES_LIMIT = 5;
-function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format, seriesFormatMap, // in the case of multi-axis, we need the cursor Y position in pixel space
-cursorPixelY) {
-    const currentNearbySeriesData = [];
-    const cursorX = pointInGrid[0] ?? null;
-    const cursorY = pointInGrid[1] ?? null;
-    if (cursorX === null || cursorY === null) return currentNearbySeriesData;
-    if (chart.dispatchAction === undefined) return currentNearbySeriesData;
-    if (!Array.isArray(data)) return currentNearbySeriesData;
+function gatherCandidates(data, seriesMapping, closestTimestamp, cursorX, cursorY, cursorXPixel, cursorPixelY, yBuffer, yBufferPixels, chart) {
+    const candidates = [];
+    const totalSeries = data.length;
+    const stackTotals = new Map();
+    let sortedTimestamps = [];
+    const firstValues = data[0]?.values;
+    if (firstValues && firstValues.length > 0) {
+        const seen = new Set();
+        for (const [ts] of firstValues){
+            if (!seen.has(ts)) {
+                seen.add(ts);
+                sortedTimestamps.push(ts);
+            }
+        }
+        sortedTimestamps = sortedTimestamps.sort((a, b)=>a - b);
+    }
+    // Bar-only indexes: ECharts groups bars independently of lines, so bar-relative index and count must exclude line series.
+    const barSeriesIndexes = [];
+    for(let i = 0; i < totalSeries; i++){
+        if ((seriesMapping[i]?.type ?? 'line') === 'bar') barSeriesIndexes.push(i);
+    }
+    // Computed once outside the loop — both depend only on the timestamp, not the series index.
+    let barBandwidth = null;
+    let barCenterPixelX = null;
+    if (barSeriesIndexes.length > 0 && cursorXPixel !== null) {
+        barBandwidth = (0, _utils1.calculateBarBandwidth)(closestTimestamp, sortedTimestamps, chart);
+        barCenterPixelX = (0, _utils1.getPixelXFromGrid)(closestTimestamp, chart);
+    }
+    for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
+        const currentSeries = seriesMapping[seriesIdx];
+        if (!currentSeries) continue;
+        const currentDataset = data[seriesIdx];
+        if (!currentDataset) continue;
+        const currentDatasetValues = currentDataset.values;
+        if (!currentDatasetValues || !Array.isArray(currentDatasetValues)) continue;
+        const seriesType = currentSeries.type ?? 'line';
+        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
+        const seriesId = currentSeries.id ? currentSeries.id.toString() : '';
+        const markerColor = (currentSeries.color ?? '#000').toString();
+        let datumIdx = -1;
+        let xValue = 0;
+        let yValue;
+        for(let i = 0; i < currentDatasetValues.length; i++){
+            const tuple = currentDatasetValues[i];
+            if (!tuple) continue;
+            if (tuple[0] === closestTimestamp) {
+                datumIdx = i;
+                xValue = tuple[0];
+                yValue = tuple[1];
+                break;
+            }
+        }
+        if (datumIdx === -1) continue;
+        if (yValue === null || yValue === undefined) continue;
+        let isCandidate = false;
+        let visualY = yValue;
+        let distance = Infinity;
+        if (seriesType === 'line') {
+            visualY = (0, _utils1.calculateVisualYForSeries)(seriesIdx, yValue, seriesMapping, stackTotals);
+            if (cursorPixelY !== undefined && yBufferPixels !== null) {
+                try {
+                    const dataPointPixel = chart.convertToPixel({
+                        seriesIndex: seriesIdx
+                    }, [
+                        datumIdx,
+                        visualY
+                    ]);
+                    if (dataPointPixel && dataPointPixel[1] !== undefined) {
+                        const pixelDistance = Math.abs(cursorPixelY - dataPointPixel[1]);
+                        isCandidate = pixelDistance <= yBufferPixels;
+                        distance = pixelDistance;
+                    } else {
+                        const verticalDistance = Math.abs(visualY - cursorY);
+                        isCandidate = verticalDistance <= yBuffer;
+                        distance = verticalDistance;
+                    }
+                } catch  {
+                    const verticalDistance = Math.abs(visualY - cursorY);
+                    isCandidate = verticalDistance <= yBuffer;
+                    distance = verticalDistance;
+                }
+            } else {
+                const verticalDistance = Math.abs(visualY - cursorY);
+                isCandidate = verticalDistance <= yBuffer;
+                distance = verticalDistance;
+            }
+        } else if (seriesType === 'bar') {
+            if (cursorXPixel === null || barBandwidth === null || barCenterPixelX === null) continue;
+            const barRelativeIdx = barSeriesIndexes.indexOf(seriesIdx);
+            if (barRelativeIdx === -1) continue;
+            const segmentBounds = (0, _utils1.calculateBarSegmentBounds)(barRelativeIdx, barBandwidth, barCenterPixelX, barSeriesIndexes.length);
+            const isWithinXBounds = cursorXPixel >= segmentBounds.left && cursorXPixel <= segmentBounds.right;
+            if (!isWithinXBounds) continue;
+            const stackId = currentSeries.stack;
+            let isHoveringYBounds = true;
+            if (stackId) {
+                const stackIdStr = stackId.toString();
+                const visualYBottom = stackTotals.get(stackIdStr) ?? 0;
+                visualY = (0, _utils1.calculateVisualYForSeries)(seriesIdx, yValue, seriesMapping, stackTotals);
+                const yBounds = (0, _utils1.calculateBarYBounds)(visualYBottom, visualY, chart);
+                if (yBounds) {
+                    const cursorYPixel = chart.convertToPixel('grid', [
+                        0,
+                        cursorY
+                    ]);
+                    if (cursorYPixel && cursorYPixel[1] !== undefined) {
+                        isHoveringYBounds = cursorYPixel[1] >= yBounds.top && cursorYPixel[1] <= yBounds.bottom;
+                    }
+                }
+            } else {
+                visualY = yValue;
+            }
+            if (!isHoveringYBounds) continue;
+            const segmentCenter = (segmentBounds.left + segmentBounds.right) / 2;
+            distance = Math.abs(cursorXPixel - segmentCenter);
+            isCandidate = true;
+        }
+        if (isCandidate) {
+            candidates.push({
+                seriesIdx,
+                datumIdx,
+                seriesId,
+                seriesName: currentSeriesName,
+                date: closestTimestamp,
+                markerColor,
+                x: xValue,
+                y: yValue,
+                visualY,
+                distance
+            });
+        }
+    }
+    return candidates;
+}
+function findClosestCandidate(candidates) {
+    if (candidates.length === 0) return null;
+    let winner = null;
+    for (const candidate of candidates){
+        if (winner === null || candidate.distance < winner.distance) {
+            winner = candidate;
+        }
+    }
+    return winner;
+}
+function processCandidates(candidates, winner, format, seriesFormatMap, chart, nonCandidateSeriesIndexes) {
     const nearbySeriesIndexes = [];
     const emphasizedSeriesIndexes = [];
-    const nonEmphasizedSeriesIndexes = [];
+    const nonEmphasizedSeriesIndexes = [
+        ...nonCandidateSeriesIndexes
+    ];
     const emphasizedDatapoints = [];
     const duplicateDatapoints = [];
-    const totalSeries = data.length;
     const yValueCounts = new Map();
-    // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+    const result = [];
+    for (const candidate of candidates){
+        const seriesFormat = seriesFormatMap?.get(candidate.seriesId) ?? format;
+        // Use raw y, not visualY — visualY is for proximity detection only.
+        const displayY = candidate.y;
+        const formattedY = (0, _model.formatValue)(displayY, seriesFormat);
+        const isClosestToCursor = winner !== null && candidate.seriesIdx === winner.seriesIdx;
+        if (isClosestToCursor) {
+            emphasizedSeriesIndexes.push(candidate.seriesIdx);
+            const duplicateValuesCount = yValueCounts.get(displayY) ?? 0;
+            yValueCounts.set(displayY, duplicateValuesCount + 1);
+            if (duplicateValuesCount > 0) {
+                duplicateDatapoints.push({
+                    seriesIndex: candidate.seriesIdx,
+                    dataIndex: candidate.datumIdx,
+                    seriesName: candidate.seriesName,
+                    yValue: displayY
+                });
+            }
+            emphasizedDatapoints.push({
+                seriesIndex: candidate.seriesIdx,
+                dataIndex: candidate.datumIdx,
+                seriesName: candidate.seriesName,
+                yValue: displayY
+            });
+        } else {
+            nonEmphasizedSeriesIndexes.push(candidate.seriesIdx);
+        }
+        result.push({
+            seriesIdx: candidate.seriesIdx,
+            datumIdx: candidate.datumIdx,
+            seriesName: candidate.seriesName,
+            date: candidate.date,
+            x: candidate.x,
+            y: displayY,
+            formattedY,
+            markerColor: candidate.markerColor,
+            isClosestToCursor
+        });
+        nearbySeriesIndexes.push(candidate.seriesIdx);
+    }
+    (0, _utils.batchDispatchNearbySeriesActions)(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints);
+    return result;
+}
+function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format, seriesFormatMap, // in the case of multi-axis, we need the cursor Y position in pixel space
+cursorPixelY, cursorXPixel) {
+    const cursorX = pointInGrid[0] ?? null;
+    const cursorY = pointInGrid[1] ?? null;
+    if (cursorX === null || cursorY === null) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
+    if (chart.dispatchAction === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
+    if (!Array.isArray(data)) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
+    // All series share the same x-axis timestamps (enforced by getCommonTimeScale).
     const firstTimeSeriesValues = data[0]?.values;
     const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
-    if (closestTimestamp === null) {
-        return _tooltipmodel.EMPTY_TOOLTIP_DATA;
-    }
-    // For multi-axis support: convert yBuffer to pixel space for consistent comparison
-    // This allows us to compare series on different Y axes fairly
+    if (closestTimestamp === null) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     let yBufferPixels = null;
     if (cursorPixelY !== undefined) {
-        // Convert a point at cursorY and cursorY + yBuffer to pixels to get the buffer in pixel space
         const cursorPoint = chart.convertToPixel('grid', [
             0,
             cursorY
@@ -90,133 +275,16 @@ cursorPixelY) {
             yBufferPixels = Math.abs(bufferPoint[1] - cursorPoint[1]);
         }
     }
-    // find the timestamp with data that is closest to cursorX
-    for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
-        const currentSeries = seriesMapping[seriesIdx];
-        if (!currentSeries) break;
-        const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
-        if (!currentDataset) break;
-        const currentDatasetValues = currentDataset.values;
-        if (currentDatasetValues === undefined || !Array.isArray(currentDatasetValues)) break;
-        const lineSeries = currentSeries;
-        const currentSeriesName = lineSeries.name ? lineSeries.name.toString() : '';
-        const seriesId = lineSeries.id ? lineSeries.id.toString() : '';
-        const markerColor = lineSeries.color ?? '#000';
-        // Get the format for this series (from seriesFormatMap or fallback to default format)
-        const seriesFormat = seriesFormatMap?.get(seriesId) ?? format;
-        if (Array.isArray(data)) {
-            for(let datumIdx = 0; datumIdx < currentDatasetValues.length; datumIdx++){
-                const nearbyTimeSeries = currentDatasetValues[datumIdx];
-                if (nearbyTimeSeries === undefined || !Array.isArray(nearbyTimeSeries)) break;
-                const xValue = nearbyTimeSeries[0];
-                const yValue = nearbyTimeSeries[1];
-                // TODO: ensure null values not displayed in tooltip
-                if (yValue !== undefined && yValue !== null) {
-                    if (closestTimestamp === xValue) {
-                        // Check if this series is nearby the cursor
-                        let isNearby = false;
-                        // For multi-axis: compare in pixel space
-                        if (cursorPixelY !== undefined && yBufferPixels !== null) {
-                            const dataPointPixel = chart.convertToPixel({
-                                seriesIndex: seriesIdx
-                            }, [
-                                datumIdx,
-                                yValue
-                            ]);
-                            if (dataPointPixel && dataPointPixel[1] !== undefined) {
-                                const pixelDistance = Math.abs(cursorPixelY - dataPointPixel[1]);
-                                isNearby = pixelDistance <= yBufferPixels;
-                            } else {
-                                // Fallback to data-space comparison for primary axis
-                                isNearby = cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer;
-                            }
-                        } else {
-                            // Fallback to original data-space comparison
-                            isNearby = cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer;
-                        }
-                        if (isNearby) {
-                            // show fewer bold series in tooltip when many total series
-                            const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;
-                            const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);
-                            // For isClosestToCursor, also use pixel space for multi-axis
-                            let isClosestToCursor = false;
-                            if (cursorPixelY !== undefined) {
-                                const dataPointPixel = chart.convertToPixel({
-                                    seriesIndex: seriesIdx
-                                }, [
-                                    datumIdx,
-                                    yValue
-                                ]);
-                                if (dataPointPixel && dataPointPixel[1] !== undefined) {
-                                    const pixelDistance = Math.abs(cursorPixelY - dataPointPixel[1]);
-                                    // Use percentage of buffer for "closest" determination
-                                    const tightBufferPixels = (yBufferPixels ?? 50) * (percentRangeToCheck / 100);
-                                    isClosestToCursor = pixelDistance <= Math.max(tightBufferPixels, 5);
-                                } else {
-                                    isClosestToCursor = isWithinPercentageRange({
-                                        valueToCheck: cursorY,
-                                        baseValue: yValue,
-                                        percentage: percentRangeToCheck
-                                    });
-                                }
-                            } else {
-                                isClosestToCursor = isWithinPercentageRange({
-                                    valueToCheck: cursorY,
-                                    baseValue: yValue,
-                                    percentage: percentRangeToCheck
-                                });
-                            }
-                            if (isClosestToCursor) {
-                                // shows as bold in tooltip, customize 'emphasis' options in getTimeSeries util
-                                emphasizedSeriesIndexes.push(seriesIdx);
-                                // Used to determine which datapoint to apply select styles to.
-                                // Accounts for cases where lines may be rendered directly on top of eachother.
-                                const duplicateValuesCount = yValueCounts.get(yValue) ?? 0;
-                                yValueCounts.set(yValue, duplicateValuesCount + 1);
-                                if (duplicateValuesCount > 0) {
-                                    duplicateDatapoints.push({
-                                        seriesIndex: seriesIdx,
-                                        dataIndex: datumIdx,
-                                        seriesName: currentSeriesName,
-                                        yValue: yValue
-                                    });
-                                }
-                                // keep track of all bold datapoints in tooltip so that 'select' state only applied to topmost
-                                emphasizedDatapoints.push({
-                                    seriesIndex: seriesIdx,
-                                    dataIndex: datumIdx,
-                                    seriesName: currentSeriesName,
-                                    yValue: yValue
-                                });
-                            } else {
-                                nonEmphasizedSeriesIndexes.push(seriesIdx);
-                                // ensure series far away from cursor are not highlighted
-                                chart.dispatchAction({
-                                    type: 'downplay',
-                                    seriesIndex: seriesIdx
-                                });
-                            }
-                            const formattedY = (0, _model.formatValue)(yValue, seriesFormat);
-                            currentNearbySeriesData.push({
-                                seriesIdx: seriesIdx,
-                                datumIdx: datumIdx,
-                                seriesName: currentSeriesName,
-                                date: closestTimestamp,
-                                x: xValue,
-                                y: yValue,
-                                formattedY: formattedY,
-                                markerColor: markerColor.toString(),
-                                isClosestToCursor
-                            });
-                            nearbySeriesIndexes.push(seriesIdx);
-                        }
-                    }
-                }
-            }
-        }
+    const resolvedCursorXPixel = cursorXPixel ?? (0, _utils1.getPixelXFromGrid)(closestTimestamp, chart);
+    const candidates = gatherCandidates(data, seriesMapping, closestTimestamp, cursorX, cursorY, resolvedCursorXPixel, cursorPixelY, yBuffer, yBufferPixels, chart);
+    const winner = findClosestCandidate(candidates);
+    const candidateIndexes = new Set();
+    for (const candidate of candidates)candidateIndexes.add(candidate.seriesIdx);
+    const nonCandidateSeriesIndexes = [];
+    for(let idx = 0; idx < data.length; idx++){
+        if (!candidateIndexes.has(idx)) nonCandidateSeriesIndexes.push(idx);
     }
-    (0, _utils.batchDispatchNearbySeriesActions)(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints);
-    return currentNearbySeriesData;
+    return processCandidates(candidates, winner, format, seriesFormatMap, chart, nonCandidateSeriesIndexes);
 }
 function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     const currentNearbySeriesData = [];
@@ -334,24 +402,22 @@ function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart,
         cursorTargetMatchesChart = true;
     }
     if (cursorTargetMatchesChart === false || data === null || chart['_model'] === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
-    // mousemove position undefined when not hovering over chart canvas
     if (mousePos.plotCanvas.x === undefined || mousePos.plotCanvas.y === undefined) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     const cursorPixelY = mousePos.plotCanvas.y;
-    const pointInGrid = (0, _utils.getPointInGrid)(mousePos.plotCanvas.x, cursorPixelY, chart);
+    const cursorXPixel = mousePos.plotCanvas.x;
+    const pointInGrid = (0, _utils.getPointInGrid)(cursorXPixel, cursorPixelY, chart);
     if (pointInGrid !== null) {
         const chartModel = chart['_model'];
         const yAxisScale = chartModel.getComponent('yAxis').axis.scale;
         const isLogScale = yAxisScale.type === 'log';
         let yInterval = yAxisScale._interval;
-        // For logarithmic scales, convert the log interval to actual data range
+        // For log scales, convert from log-space extent to actual data range and use 1% as the interval.
         if (isLogScale && yAxisScale.base) {
             const logBase = yAxisScale.base;
             const extent = yAxisScale._extent;
-            // Calculate actual data range from log extent
-            // extent is in log space (e.g., [0, 2] for 10^0 to 10^2)
+            // e.g. extent [0, 2] → 10^0..10^2
             const actualMin = logBase ** extent[0];
             const actualMax = logBase ** extent[1];
-            // Use a fraction of the actual range as the interval
             yInterval = (actualMax - actualMin) / 100;
         }
         const totalSeries = data.length;
@@ -360,9 +426,8 @@ function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart,
             totalSeries,
             showAllSeries
         });
-        // Detect if chart has multiple Y-axes by checking if any series uses yAxisIndex > 0
         const hasMultipleYAxes = seriesMapping.some((series)=>series.yAxisIndex !== undefined && series.yAxisIndex > 0);
-        return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format, seriesFormatMap, hasMultipleYAxes ? cursorPixelY : undefined);
+        return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format, seriesFormatMap, hasMultipleYAxes ? cursorPixelY : undefined, cursorXPixel);
     }
     // no nearby series found
     return _tooltipmodel.EMPTY_TOOLTIP_DATA;

package/dist/cjs/TimeSeriesTooltip/types.js

@@ -0,0 +1,16 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -24,6 +24,21 @@ _export(exports, {
     get assembleTransform () {
         return assembleTransform;
     },
+    get calculateBarBandwidth () {
+        return calculateBarBandwidth;
+    },
+    get calculateBarSegmentBounds () {
+        return calculateBarSegmentBounds;
+    },
+    get calculateBarYBounds () {
+        return calculateBarYBounds;
+    },
+    get calculateVisualYForSeries () {
+        return calculateVisualYForSeries;
+    },
+    get getPixelXFromGrid () {
+        return getPixelXFromGrid;
+    },
     get getTooltipStyles () {
         return getTooltipStyles;
     }
@@ -39,6 +54,9 @@ function assembleTransform(mousePos, pinnedPos, tooltipHeight, tooltipWidth, con
         mousePos = pinnedPos;
     }
     if (mousePos.plotCanvas.x === undefined) return undefined;
+    // Fall back to max size before the resize observer reports a real measurement.
+    const effectiveHeight = tooltipHeight > 0 ? tooltipHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT;
+    const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : _tooltipmodel.TOOLTIP_MAX_WIDTH;
     let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor
     let y = mousePos.page.y + cursorPaddingY;
     // If containerElement is defined, adjust coordinates relative to the container
@@ -48,18 +66,18 @@ function assembleTransform(mousePos, pinnedPos, tooltipHeight, tooltipWidth, con
         y = y - containerRect.top + containerElement.scrollTop;
         // Ensure tooltip does not go out of the container's bottom
         const containerBottom = containerRect.top + containerElement.scrollHeight;
-        if (y + tooltipHeight > containerBottom) {
-            y = Math.max(containerBottom - tooltipHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
+        if (y + effectiveHeight > containerBottom) {
+            y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
         }
     } else {
         // Ensure tooltip does not go out of the screen on the bottom
-        if (y + tooltipHeight > window.innerHeight + window.scrollY) {
-            y = Math.max(window.innerHeight + window.scrollY - tooltipHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
+        if (y + effectiveHeight > window.innerHeight + window.scrollY) {
+            y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
         }
     }
     // Ensure tooltip does not go out of the screen on the right
-    if (x + tooltipWidth > window.innerWidth) {
-        x = mousePos.page.x - tooltipWidth - cursorPaddingX; // Move to the left of the cursor
+    if (x + effectiveWidth > window.innerWidth) {
+        x = mousePos.page.x - effectiveWidth - cursorPaddingX; // Move to the left of the cursor
     }
     // Ensure tooltip does not go out of the screen on the left
     if (x < cursorPaddingX) {
@@ -87,8 +105,9 @@ function getTooltipStyles(theme, pinnedPos, maxHeight) {
         fontSize: '11px',
         visibility: 'visible',
         opacity: 1,
-        transition: 'all 0.1s ease-out',
-        // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+        // Animating transform causes intermediate positions outside the viewport; animate opacity/visibility instead.
+        transition: 'opacity 0.1s ease-out, visibility 0.1s ease-out',
+        // Pinned tooltip should not float above the drawer/sticky header.
         zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
         overflow: 'hidden',
         '&:hover': {
@@ -96,3 +115,85 @@ function getTooltipStyles(theme, pinnedPos, maxHeight) {
         }
     };
 }
+function getPixelXFromGrid(timestamp, chart) {
+    try {
+        const pixelCoords = chart.convertToPixel('grid', [
+            timestamp,
+            0
+        ]);
+        return pixelCoords?.[0] ?? null;
+    } catch  {
+        return null;
+    }
+}
+function calculateVisualYForSeries(seriesIdx, yValue, seriesMapping, stackTotals) {
+    const currentSeries = seriesMapping[seriesIdx];
+    if (!currentSeries) return yValue;
+    const stackId = currentSeries.stack;
+    if (!stackId) {
+        return yValue;
+    }
+    const stackIdStr = stackId.toString();
+    const currentTotal = stackTotals.get(stackIdStr) ?? 0;
+    const newTotal = currentTotal + yValue;
+    stackTotals.set(stackIdStr, newTotal);
+    return newTotal;
+}
+function calculateBarBandwidth(timestamp, sortedTimestamps, chart) {
+    const currentIdx = sortedTimestamps.indexOf(timestamp);
+    if (currentIdx === -1) {
+        return 20;
+    }
+    const prevTimestamp = currentIdx > 0 ? sortedTimestamps[currentIdx - 1] ?? null : null;
+    const nextTimestamp = currentIdx < sortedTimestamps.length - 1 ? sortedTimestamps[currentIdx + 1] ?? null : null;
+    const currentPixelX = getPixelXFromGrid(timestamp, chart);
+    if (currentPixelX === null) return 20;
+    let leftBound;
+    let rightBound;
+    if (prevTimestamp !== null && nextTimestamp !== null) {
+        const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;
+        const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;
+        leftBound = (currentPixelX + prevPixelX) / 2;
+        rightBound = (currentPixelX + nextPixelX) / 2;
+    } else if (prevTimestamp !== null) {
+        const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;
+        leftBound = (currentPixelX + prevPixelX) / 2;
+        rightBound = currentPixelX + (currentPixelX - leftBound);
+    } else if (nextTimestamp !== null) {
+        const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;
+        rightBound = (currentPixelX + nextPixelX) / 2;
+        leftBound = currentPixelX - (rightBound - currentPixelX);
+    } else {
+        return 20;
+    }
+    return Math.max(1, rightBound - leftBound);
+}
+function calculateBarSegmentBounds(barRelativeIdx, bandwidth, centerPixelX, barCount) {
+    const count = Math.max(1, barCount);
+    const segmentWidth = bandwidth / count;
+    const segmentLeft = centerPixelX - bandwidth / 2 + barRelativeIdx * segmentWidth;
+    return {
+        left: segmentLeft,
+        right: segmentLeft + segmentWidth
+    };
+}
+function calculateBarYBounds(visualYBottom, visualYTop, chart) {
+    try {
+        const bottomPixel = chart.convertToPixel('grid', [
+            0,
+            visualYBottom
+        ]);
+        const topPixel = chart.convertToPixel('grid', [
+            0,
+            visualYTop
+        ]);
+        if (!bottomPixel || !topPixel || bottomPixel[1] === undefined || topPixel[1] === undefined) return null;
+        // Y increases downward in pixels; min/max normalizes the mapping for negative bar values.
+        return {
+            top: Math.min(topPixel[1], bottomPixel[1]),
+            bottom: Math.max(topPixel[1], bottomPixel[1])
+        };
+    } catch  {
+        return null;
+    }
+}

package/dist/cjs/utils/chart-actions.js

@@ -108,12 +108,20 @@ function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasized
             escapeConnect: true
         });
     }
-    // Clears emphasis state of all lines that are not emphasized.
-    // Emphasized is a subset of just the nearby series that are closest to cursor.
+    // Blanket downplay clears axis-triggered emphasis (enlarged "big point" markers) before
+    // re-applying emphasis to only the winner series.
+    // https://echarts.apache.org/en/api.html#action.downplay
     chart.dispatchAction({
-        type: 'downplay',
-        seriesIndex: nonEmphasizedSeriesIndexes
+        type: 'downplay'
     });
+    // Clears emphasis state of all lines that are not emphasized.
+    // Emphasized is a subset of just the nearby series that are closest to cursor.
+    if (nonEmphasizedSeriesIndexes.length > 0) {
+        chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: nonEmphasizedSeriesIndexes
+        });
+    }
     // https://echarts.apache.org/en/api.html#action.highlight
     if (emphasizedSeriesIndexes.length > 0) {
         // Fadeout opacity of all series not closest to cursor.

package/dist/cjs/utils/request-interpolation.js

@@ -29,6 +29,7 @@ _export(exports, {
     }
 });
 const _variableinterpolation = require("./variable-interpolation");
+const _regexp = require("./regexp");
 function expandQueryParamValue(value, variableState) {
     // If value is an array, process each element
     if (Array.isArray(value)) {
@@ -40,13 +41,30 @@ function expandQueryParamValue(value, variableState) {
     // Find the first multi-value variable that should expand to repeated keys
     for (const [varName, format] of variablesMap){
         const varState = variableState[varName];
-        if (!varState || !Array.isArray(varState.value)) continue;
+        if (!varState) continue;
+        const options = varState.options ?? [];
+        const allOptionValues = options.map((o)=>o.value);
+        const isArray = Array.isArray(varState.value);
+        const isCustomAllValue = varState.customAllValue !== undefined;
+        let expandValues;
+        if (isArray) {
+            expandValues = varState.value;
+        } else if (isCustomAllValue) {
+            try {
+                const regex = (0, _regexp.createRegexFromString)(varState.customAllValue);
+                const matched = options.filter((o)=>regex.test(o.value)).map((o)=>o.value);
+                expandValues = matched.length > 0 ? matched : allOptionValues;
+            } catch  {
+                expandValues = allOptionValues;
+            }
+        }
+        if (!expandValues) continue;
         // If format is queryparam or not specified (default for query params), expand to array
         if (!format || format === _variableinterpolation.InterpolationFormat.QUERYPARAM) {
             // Build syntax patterns for this variable reference
             const simpleSyntax = '$' + varName;
             const bracketSyntax = format ? '${' + varName + ':' + format + '}' : '${' + varName + '}';
-            return varState.value.map((singleValue)=>{
+            return expandValues.map((singleValue)=>{
                 let text = valueString;
                 // Replace the variable reference with the raw value directly.
                 // We cannot use replaceVariables here because it would apply QUERYPARAM format