@perses-dev/components 0.53.0-rc.0 → 0.53.0-rc.2

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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
@@ -23,9 +23,12 @@ Object.defineProperty(exports, "TimeRangeSelector", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
+const _Earth = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Earth"));
 const _core = require("@perses-dev/core");
 const _react = require("react");
 const _context = require("../context");
+const _timeZoneOption = require("../model/timeZoneOption");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const _DateTimeRangePicker = require("./DateTimeRangePicker");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
@@ -33,33 +36,81 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true }) {
-    const { timeZone } = (0, _context.useTimeZone)();
-    const anchorEl = (0, _react.useRef)(); // Used to position the absolute time range picker
-    // Control the open state of the absolute time range picker
+function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true, timeZone: timeZoneProp, timeZoneOptions, onTimeZoneChange }) {
+    const { timeZone: ctxTimeZone } = (0, _context.useTimeZone)();
+    const timeZone = timeZoneProp ?? ctxTimeZone;
+    const anchorEl = (0, _react.useRef)();
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
-    // Build the initial value of the absolute time range picker
     const convertedTimeRange = (0, _react.useMemo)(()=>{
         return (0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value;
     }, [
         value
     ]);
-    // Last option is the absolute time range option (custom)
-    // If the value is an absolute time range, we display this time range
-    // If the value is a relative time range, we make a default CustomTimeOption built from undefined value
     const lastOption = (0, _react.useMemo)(()=>(0, _utils.buildCustomTimeOption)((0, _core.isRelativeTimeRange)(value) ? undefined : value, timeZone), [
         value,
         timeZone
     ]);
-    // Control the open state of the select component to prevent the menu from closing when the custom date picker is
-    // opened.
-    //
-    // Note that the value state of the select is here for display only. The real value (the one from props) is managed
-    // by click events on each menu item.
-    // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...
     const [open, setOpen] = (0, _react.useState)(false);
+    const tzOptions = timeZoneOptions ?? (0, _timeZoneOption.getTimeZoneOptions)();
+    const [tzAnchorEl, setTzAnchorEl] = (0, _react.useState)(null);
+    const tzOpen = Boolean(tzAnchorEl);
+    const tzLabel = tzOptions.find((o)=>o.value === timeZone)?.display ?? timeZone;
+    const tzAutocompleteOptions = tzOptions.map((o)=>({
+            id: o.value,
+            label: o.display
+        }));
+    let tzAutocompleteValue = undefined;
+    {
+        const current = tzOptions.find((o)=>o.value === timeZone);
+        if (current) tzAutocompleteValue = {
+            id: current.value,
+            label: current.display
+        };
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
+                anchorEl: tzAnchorEl,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                },
+                open: tzOpen,
+                onClose: ()=>setTzAnchorEl(null),
+                sx: (theme)=>({
+                        padding: theme.spacing(1)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        p: 1,
+                        minWidth: 260
+                    },
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
+                        options: tzAutocompleteOptions,
+                        value: tzAutocompleteValue,
+                        onChange: (_e, option)=>{
+                            if (option) {
+                                const selected = tzOptions.find((o)=>o.value === option.id);
+                                if (selected) onTimeZoneChange?.(selected);
+                            }
+                            setTzAnchorEl(null);
+                        },
+                        disableClearable: true,
+                        renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                ...params,
+                                placeholder: "Search timezones",
+                                size: "small"
+                            })
+                    })
+                })
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
                 anchorEl: anchorEl.current,
                 anchorOrigin: {
@@ -78,7 +129,8 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                         setShowCustomDateSelector(false);
                         setOpen(false);
                     },
-                    onCancel: ()=>setShowCustomDateSelector(false)
+                    onCancel: ()=>setShowCustomDateSelector(false),
+                    timeZone: timeZone
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
@@ -92,12 +144,10 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                         'aria-label': `Select time range. Currently set to ${value}`
                     },
                     sx: {
-                        // `transform: none` prevents calendar icon from flipping over when menu is open
                         '.MuiSelect-icon': {
                             marginTop: '1px',
                             transform: 'none'
                         },
-                        // paddingRight creates more space for the calendar icon (it's a bigger icon)
                         '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
                             paddingRight: '36px'
                         },
@@ -107,6 +157,77 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                         } : {}
                     },
                     children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            disableRipple: true,
+                            onClick: (e)=>{
+                                e.preventDefault();
+                                e.stopPropagation();
+                            },
+                            sx: {
+                                cursor: 'default',
+                                '&:hover': {
+                                    backgroundColor: 'transparent'
+                                },
+                                py: 0.5,
+                                px: 1
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    width: '100%',
+                                    justifyContent: 'space-between'
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                        sx: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'flex-start'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                                sx: {
+                                                    typography: 'subtitle1'
+                                                },
+                                                children: "Time Range"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                                sx: {
+                                                    color: 'text.secondary',
+                                                    typography: 'caption',
+                                                    mt: 0.25
+                                                },
+                                                children: [
+                                                    "Timezone: ",
+                                                    tzLabel
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                        sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            pr: 1,
+                                            ml: 1.5
+                                        },
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                            size: "small",
+                                            "aria-label": "Select timezone",
+                                            onClick: (e)=>{
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                setTzAnchorEl(e.currentTarget);
+                                            },
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Earth.default, {
+                                                fontSize: "small"
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
                         timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                 value: (0, _utils.formatTimeRange)(item.value, timeZone),
                                 onClick: ()=>{

package/dist/cjs/TimeRangeSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/TimeRangeSelector/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -34,7 +34,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos }) {
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const transform = (0, _react.useRef)();
     const mousePos = (0, _tooltipmodel.useMousePosition)();
@@ -56,6 +56,7 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
         pinnedPos,
         chart,
         format,
+        seriesFormatMap,
         showAllSeries
     });
     if (nearbySeries.length === 0) {

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -25,7 +25,7 @@ const _material = require("@mui/material");
 const _Pin = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pin"));
 const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
 const _react = require("react");
-const _utils = require("../utils");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _tooltipmodel = require("./tooltip-model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -33,12 +33,15 @@ function _interop_require_default(obj) {
     };
 }
 const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
+    const { formatWithUserTimeZone } = (0, _TimeZoneProvider.useTimeZone)();
     const seriesTimeMs = nearbySeries[0]?.date ?? null;
     if (seriesTimeMs === null) {
         return null;
     }
     const formatTimeSeriesHeader = (timeMs)=>{
-        const { formattedTime, formattedDate } = (0, _utils.getDateAndTime)(timeMs);
+        const date = new Date(timeMs);
+        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -44,9 +44,6 @@ _export(exports, {
     },
     get legacyCheckforNearbySeries () {
         return legacyCheckforNearbySeries;
-    },
-    get legacyGetNearbySeriesData () {
-        return legacyGetNearbySeriesData;
     }
 });
 const _core = require("@perses-dev/core");
@@ -56,7 +53,8 @@ const _tooltipmodel = require("./tooltip-model");
 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) {
+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;
@@ -76,6 +74,23 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     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
+    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
+        ]);
+        const bufferPoint = chart.convertToPixel('grid', [
+            0,
+            cursorY + yBuffer
+        ]);
+        if (cursorPoint && bufferPoint && cursorPoint[1] !== undefined && bufferPoint[1] !== undefined) {
+            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];
@@ -86,7 +101,10 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
         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];
@@ -96,15 +114,59 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                 // TODO: ensure null values not displayed in tooltip
                 if (yValue !== undefined && yValue !== null) {
                     if (closestTimestamp === xValue) {
-                        if (cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
+                        // 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);
-                            const isClosestToCursor = isWithinPercentageRange({
-                                valueToCheck: cursorY,
-                                baseValue: yValue,
-                                percentage: percentRangeToCheck
-                            });
+                            // 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);
@@ -135,7 +197,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                                     seriesIndex: seriesIdx
                                 });
                             }
-                            const formattedY = (0, _core.formatValue)(yValue, format);
+                            const formattedY = (0, _core.formatValue)(yValue, seriesFormat);
                             currentNearbySeriesData.push({
                                 seriesIdx: seriesIdx,
                                 datumIdx: datumIdx,
@@ -251,7 +313,7 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, format) {
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart, format, showAllSeries = false }) {
+function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart, format, seriesFormatMap, showAllSeries = false }) {
     if (chart === undefined || mousePos === null) return _tooltipmodel.EMPTY_TOOLTIP_DATA;
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -275,7 +337,8 @@ function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart,
     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 pointInGrid = (0, _utils.getPointInGrid)(mousePos.plotCanvas.x, mousePos.plotCanvas.y, chart);
+    const cursorPixelY = mousePos.plotCanvas.y;
+    const pointInGrid = (0, _utils.getPointInGrid)(mousePos.plotCanvas.x, cursorPixelY, chart);
     if (pointInGrid !== null) {
         const chartModel = chart['_model'];
         const yAxisScale = chartModel.getComponent('yAxis').axis.scale;
@@ -298,54 +361,13 @@ function getNearbySeriesData({ mousePos, pinnedPos, data, seriesMapping, chart,
             totalSeries,
             showAllSeries
         });
-        return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, format);
+        // 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);
     }
     // no nearby series found
     return _tooltipmodel.EMPTY_TOOLTIP_DATA;
 }
-function legacyGetNearbySeriesData({ mousePos, pinnedPos, chartData, chart, format, showAllSeries = false }) {
-    if (chart === undefined || mousePos === null) return [];
-    // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
-    let cursorTargetMatchesChart = false;
-    if (mousePos.target !== null) {
-        const currentParent = mousePos.target.parentElement;
-        if (currentParent !== null) {
-            const currentGrandparent = currentParent.parentElement;
-            if (currentGrandparent !== null) {
-                const chartDom = chart.getDom();
-                if (chartDom === currentGrandparent) {
-                    cursorTargetMatchesChart = true;
-                }
-            }
-        }
-    }
-    // allows moving cursor inside tooltip without it fading away
-    if (pinnedPos !== null) {
-        mousePos = pinnedPos;
-        cursorTargetMatchesChart = true;
-    }
-    if (cursorTargetMatchesChart === false) return [];
-    if (chart['_model'] === undefined) return [];
-    const chartModel = chart['_model'];
-    const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;
-    const totalSeries = chartData.timeSeries.length;
-    const yBuffer = getYBuffer({
-        yInterval,
-        totalSeries,
-        showAllSeries
-    });
-    const pointInPixel = [
-        mousePos.plotCanvas.x ?? 0,
-        mousePos.plotCanvas.y ?? 0
-    ];
-    if (chart.containPixel('grid', pointInPixel)) {
-        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
-        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return legacyCheckforNearbySeries(chartData, pointInGrid, yBuffer, chart, format);
-        }
-    }
-    return [];
-}
 function isWithinPercentageRange({ valueToCheck, baseValue, percentage }) {
     const range = percentage / 100 * baseValue;
     const lowerBound = baseValue - range;

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TimeZoneSelector.js

@@ -0,0 +1,63 @@
+// Copyright 2026 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
+});
+Object.defineProperty(exports, "TimeZoneSelector", {
+    enumerable: true,
+    get: function() {
+        return TimeZoneSelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _timeZoneOption = require("./model/timeZoneOption");
+function TimeZoneSelector({ value, onChange, timeZoneOptions, variant = 'standard', heightPx, ...selectProps }) {
+    const options = (0, _react.useMemo)(()=>timeZoneOptions ?? (0, _timeZoneOption.getTimeZoneOptions)(), [
+        timeZoneOptions
+    ]);
+    const height = heightPx ? typeof heightPx === 'number' ? `${heightPx}px` : heightPx : undefined;
+    const handleChange = (selectedValue)=>{
+        const selectedOption = options.find((opt)=>opt.value === selectedValue);
+        if (selectedOption && onChange) {
+            onChange(selectedOption);
+        }
+    };
+    const sxStyles = (0, _react.useMemo)(()=>({
+            minWidth: variant === 'compact' ? '80px' : '150px',
+            ...height && {
+                lineHeight: height,
+                paddingY: 0
+            },
+            ...selectProps.sx
+        }), [
+        variant,
+        height,
+        selectProps.sx
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
+        ...selectProps,
+        value: value,
+        onChange: (event, _child)=>{
+            handleChange(event.target.value);
+        },
+        sx: sxStyles,
+        size: variant === 'compact' ? 'small' : 'medium',
+        children: options.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                value: option.value,
+                children: option.display
+            }, option.value))
+    });
+}

package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/ToolbarIconButton/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/TransformsEditor/TransformEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/TransformsEditor/TransformEditorContainer.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/TransformsEditor/TransformsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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