@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/cjs/TimeSeriesTooltip/{TimeSeriesTooltip.js → LineChartTooltip.js}

@@ -14,13 +14,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeSeriesTooltip", {
+Object.defineProperty(exports, "LineChartTooltip", {
     enumerable: true,
-    get: ()=>TimeSeriesTooltip
+    get: ()=>LineChartTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
 const _tooltipContent = require("./TooltipContent");
 const _tooltipHeader = require("./TooltipHeader");
@@ -32,46 +32,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
@@ -84,7 +45,7 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     // Get series nearby the cursor and pass into tooltip content children.
-    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+    const nearbySeries = (0, _nearbySeries.legacyGetNearbySeriesData)({
         mousePos,
         chartData,
         pinnedPos,
@@ -117,7 +78,8 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
                     visibility: 'visible',
                     opacity: 1,
                     transition: 'all 0.1s ease-out',
-                    zIndex: theme.zIndex.tooltip,
+                    // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+                    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
                     overflow: 'hidden',
                     '&:hover': {
                         overflowY: 'auto'

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -0,0 +1,87 @@
+// Copyright 2023 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, "TimeChartTooltip", {
+    enumerable: true,
+    get: ()=>TimeChartTooltip
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
+const _tooltipModel = require("./tooltip-model");
+const _utils = require("./utils");
+const _nearbySeries = require("./nearby-series");
+const _tooltipHeader = require("./TooltipHeader");
+const _tooltipContent = require("./TooltipContent");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
+    const mousePos = (0, _tooltipModel.useMousePosition)();
+    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
+    const isTooltipPinned = pinnedPos !== null;
+    if (mousePos === null || mousePos.target === null || data === null) return null;
+    // Ensure user is hovering over a chart before checking for nearby series.
+    if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
+    const chart = chartRef.current;
+    var ref;
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+        mousePos,
+        data,
+        seriesMapping,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
+    if (nearbySeries.length === 0) {
+        return null;
+    }
+    const totalSeries = data.length;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            ref: tooltipRef,
+            sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos),
+            style: {
+                transform: cursorTransform
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
+            })
+        })
+    });
+});

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -22,17 +22,16 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _pin = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pin"));
 const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _react = require("react");
+const _dateFns = require("date-fns");
 const _tooltipModel = require("./tooltip-model");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ _react.default.memo(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
     var ref;
-    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
     var ref1;
     const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
     if (seriesTimeMs === null) {
@@ -40,8 +39,8 @@ const TooltipHeader = /*#__PURE__*/ _react.default.memo(function TooltipHeader({
     }
     const formatTimeSeriesHeader = (timeMs)=>{
         const date = new Date(timeMs);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
+        const formattedDate = (0, _dateFns.format)(date, 'MMM dd, yyyy - ');
+        const formattedTime = (0, _dateFns.format)(date, 'HH:mm:ss');
         return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
@@ -96,7 +95,7 @@ const TooltipHeader = /*#__PURE__*/ _react.default.memo(function TooltipHeader({
                         children: [
                             showAllSeriesToggle && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
-                                gap: 1,
+                                gap: 0.5,
                                 alignItems: "center",
                                 sx: {
                                     textAlign: 'right'
@@ -106,7 +105,7 @@ const TooltipHeader = /*#__PURE__*/ _react.default.memo(function TooltipHeader({
                                         sx: {
                                             fontSize: 11
                                         },
-                                        children: "Show All?"
+                                        children: "Show All"
                                     }),
                                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
                                         checked: showAllSeries,
@@ -119,6 +118,9 @@ const TooltipHeader = /*#__PURE__*/ _react.default.memo(function TooltipHeader({
                                         sx: (theme)=>({
                                                 '& .MuiSwitch-switchBase': {
                                                     color: theme.palette.common.white
+                                                },
+                                                '& .MuiSwitch-track': {
+                                                    backgroundColor: theme.palette.common.white
                                                 }
                                             })
                                     })

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -14,10 +14,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./TimeSeriesTooltip"), exports);
+_exportStar(require("./LineChartTooltip"), exports);
 _exportStar(require("./SeriesInfo"), exports);
 _exportStar(require("./SeriesLabelsStack"), exports);
 _exportStar(require("./SeriesMarker"), exports);
+_exportStar(require("./TimeChartTooltip"), exports);
 _exportStar(require("./TooltipContent"), exports);
 _exportStar(require("./TooltipHeader"), exports);
 _exportStar(require("./nearby-series"), exports);

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

@@ -24,16 +24,134 @@ _export(exports, {
     INCREASE_NEARBY_SERIES_MULTIPLIER: ()=>INCREASE_NEARBY_SERIES_MULTIPLIER,
     DYNAMIC_NEARBY_SERIES_MULTIPLIER: ()=>DYNAMIC_NEARBY_SERIES_MULTIPLIER,
     SHOW_FEWER_SERIES_LIMIT: ()=>SHOW_FEWER_SERIES_LIMIT,
-    checkforNearbySeries: ()=>checkforNearbySeries,
+    checkforNearbyTimeSeries: ()=>checkforNearbyTimeSeries,
+    legacyCheckforNearbySeries: ()=>legacyCheckforNearbySeries,
     getNearbySeriesData: ()=>getNearbySeriesData,
+    legacyGetNearbySeriesData: ()=>legacyGetNearbySeriesData,
     isWithinPercentageRange: ()=>isWithinPercentageRange,
     getYBuffer: ()=>getYBuffer
 });
+const _core = require("@perses-dev/core");
 const _model = require("../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 checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
+function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit) {
+    const currentNearbySeriesData = [];
+    var ref;
+    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
+    var ref1;
+    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    if (cursorX === null || cursorY === null) return currentNearbySeriesData;
+    if (!Array.isArray(data)) return currentNearbySeriesData;
+    // TODO: better way to calc xBuffer for longer time ranges
+    // const xBuffer = cursorX * 0.0000005;
+    const nearbySeriesIndexes = [];
+    const emphasizedSeriesIndexes = [];
+    const nonEmphasizedSeriesIndexes = [];
+    const totalSeries = data.length;
+    let closestTimestamp = null;
+    let closestDistance = Infinity;
+    // find the timestamp with data that is closest to cursorX
+    for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
+        const currentSeries = seriesMapping[seriesIdx];
+        if (currentSeries === undefined) break;
+        const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
+        if (currentDataset == null) break;
+        const currentDatasetValues = currentDataset.values;
+        for (const [timestamp] of currentDatasetValues){
+            const distance = Math.abs(timestamp - cursorX);
+            if (distance < closestDistance) {
+                closestTimestamp = timestamp;
+                closestDistance = distance;
+            }
+        }
+        if (currentDatasetValues === undefined || !Array.isArray(currentDatasetValues)) break;
+        const lineSeries = currentSeries;
+        const currentSeriesName = lineSeries.name ? lineSeries.name.toString() : '';
+        var _color;
+        const markerColor = (_color = lineSeries.color) !== null && _color !== void 0 ? _color : '#000';
+        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 (cursorX < xValue + xBuffer && cursorX > xValue - xBuffer) {
+                    if (closestTimestamp === xValue) {
+                        if (cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
+                            // 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
+                            });
+                            if (isClosestToCursor) {
+                                emphasizedSeriesIndexes.push(seriesIdx);
+                            } else {
+                                nonEmphasizedSeriesIndexes.push(seriesIdx);
+                                // ensure series not close to cursor are not highlighted
+                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                    chart.dispatchAction({
+                                        type: 'downplay',
+                                        seriesIndex: seriesIdx
+                                    });
+                                }
+                            }
+                            // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
+                            // const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
+                            const formattedY = (0, _core.formatValue)(yValue, unit);
+                            currentNearbySeriesData.push({
+                                seriesIdx: seriesIdx,
+                                datumIdx: datumIdx,
+                                seriesName: currentSeriesName,
+                                date: closestTimestamp,
+                                x: xValue,
+                                y: yValue,
+                                formattedY: formattedY,
+                                markerColor: markerColor.toString(),
+                                isClosestToCursor
+                            });
+                            nearbySeriesIndexes.push(seriesIdx);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+        // Clears emphasis state of all lines that are not emphasized.
+        // Emphasized is a subset of just the nearby series that are closest to cursor.
+        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.
+            chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: emphasizedSeriesIndexes,
+                notBlur: false,
+                escapeConnect: true
+            });
+        } else {
+            // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+            chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: nearbySeriesIndexes,
+                notBlur: true,
+                escapeConnect: true
+            });
+        }
+    }
+    return currentNearbySeriesData;
+}
+function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     const currentNearbySeriesData = [];
     var ref;
     const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
@@ -84,7 +202,7 @@ function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
                                 }
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
-                                const formattedY = (0, _model.formatValue)(yValue, unit);
+                                const formattedY = (0, _core.formatValue)(yValue, unit);
                                 currentNearbySeriesData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,
@@ -117,20 +235,22 @@ function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
             chart.dispatchAction({
                 type: 'highlight',
                 seriesIndex: emphasizedSeriesIndexes,
-                notBlur: false
+                notBlur: false,
+                escapeConnect: true
             });
         } else {
             // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
             chart.dispatchAction({
                 type: 'highlight',
                 seriesIndex: nearbySeriesIndexes,
-                notBlur: true
+                notBlur: true,
+                escapeConnect: true
             });
         }
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , showAllSeries =false  }) {
+function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , unit , showAllSeries =false  }) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -152,10 +272,10 @@ function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit ,
         cursorTargetMatchesChart = true;
     }
     if (cursorTargetMatchesChart === false) return [];
-    if (chart['_model'] === undefined) return [];
+    if (chart['_model'] === undefined || data === null) return [];
     const chartModel = chart['_model'];
     const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;
-    const totalSeries = chartData.timeSeries.length;
+    const totalSeries = data.length;
     const yBuffer = getYBuffer({
         yInterval,
         totalSeries,
@@ -169,17 +289,51 @@ function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit ,
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
         if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
+            return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit);
         }
     }
-    // clear all highlighted series when cursor exits canvas
-    // https://echarts.apache.org/en/api.html#action.downplay
-    for(let i = 0; i < totalSeries; i++){
-        if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
-            chart.dispatchAction({
-                type: 'downplay',
-                seriesIndex: i
-            });
+    return [];
+}
+function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , 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
+    });
+    var _x, _y;
+    const pointInPixel = [
+        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
+        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _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, unit);
         }
     }
     return [];

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -14,9 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "assembleTransform", {
-    enumerable: true,
-    get: ()=>assembleTransform
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    assembleTransform: ()=>assembleTransform,
+    getTooltipStyles: ()=>getTooltipStyles
 });
 const _tooltipModel = require("./tooltip-model");
 function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
@@ -43,3 +49,29 @@ function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, toolt
     // reposition so tooltip is never too close to right side of chart or left side of browser window
     return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipModel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
 }
+function getTooltipStyles(theme, pinnedPos) {
+    var ref;
+    var ref1;
+    return {
+        minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
+        maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
+        maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+        padding: 0,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
+        borderRadius: '6px',
+        color: '#fff',
+        fontSize: '11px',
+        visibility: 'visible',
+        opacity: 1,
+        transition: 'all 0.1s ease-out',
+        // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+        zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
+        overflow: 'hidden',
+        '&:hover': {
+            overflowY: 'auto'
+        }
+    };
+}

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -20,10 +20,10 @@ Object.defineProperty(exports, "UnitSelector", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _model = require("../model");
-const _utils = require("../model/units/utils");
+const _core = require("@perses-dev/core");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
-const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
+const _settingsAutocomplete = require("../SettingsAutocomplete");
+const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
@@ -31,26 +31,32 @@ const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
 }).filter((config)=>!config.disableSelectorOption);
 const DECIMAL_PLACES_OPTIONS = [
     {
+        id: 'default',
         label: 'Default',
         decimal_places: undefined
     },
     {
+        id: '0',
         label: '0',
         decimal_places: 0
     },
     {
+        id: '1',
         label: '1',
         decimal_places: 1
     },
     {
+        id: '2',
         label: '2',
         decimal_places: 2
     },
     {
+        id: '3',
         label: '3',
         decimal_places: 3
     },
     {
+        id: '4',
         label: '4',
         decimal_places: 4
     }
@@ -59,8 +65,8 @@ function getOptionByDecimalPlaces(decimal_places) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
 }
 function UnitSelector({ value , onChange  }) {
-    const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
-    const hasAbbreviate = (0, _model.isUnitWithAbbreviate)(value);
+    const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
+    const hasAbbreviate = (0, _core.isUnitWithAbbreviate)(value);
     const handleKindChange = (_, newValue)=>{
         onChange({
             kind: newValue.id
@@ -82,55 +88,36 @@ function UnitSelector({ value , onChange  }) {
             });
         }
     };
-    const kindConfig = _model.UNIT_CONFIG[value.kind];
+    const kindConfig = _core.UNIT_CONFIG[value.kind];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Abbreviate",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                    checked: hasAbbreviate ? (0, _utils.shouldAbbreviate)(value.abbreviate) : false,
+                    checked: hasAbbreviate ? (0, _core.shouldAbbreviate)(value.abbreviate) : false,
                     onChange: handleAbbreviateChange,
                     disabled: !hasAbbreviate
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Unit",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
                     value: {
                         id: value.kind,
                         ...kindConfig
                     },
                     options: KIND_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
                     groupBy: (option)=>option.group,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
-                    renderOption: (renderOptsProps, option)=>{
-                        // Custom option needed to get some increased left padding to make
-                        // the items more distinct from the group label.
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
-                            ...renderOptsProps,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                paddingLeft: (theme)=>theme.spacing(1),
-                                children: option.label
-                            })
-                        });
-                    },
                     onChange: handleKindChange,
                     disableClearable: true
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Decimals",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
                     value: getOptionByDecimalPlaces(value.decimal_places),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
-                    isOptionEqualToValue: (option, value)=>option.label === value.label,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     onChange: handleDecimalPlacesChange,
                     disabled: !hasDecimalPlaces,
                     disableClearable: true