@parca/profile 0.19.140 → 0.19.143

package/dist/MetricsGraph/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { c as _c } from "react-compiler-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,7 +23,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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.
-import { Fragment, useCallback, useId, useMemo, useRef, useState } from 'react';
+
+import React, { Fragment, useCallback, useId, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
@@ -24,214 +37,550 @@ import MetricsSeries from '../MetricsSeries';
 import MetricsContextMenu from './MetricsContextMenu';
 import MetricsInfoPanel from './MetricsInfoPanel';
 import MetricsTooltip from './MetricsTooltip';
-const MetricsGraph = ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width = 0, height = 0, margin = 0, selectedPoint, contextMenuItems, renderTooltipContent, }) => {
-    const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
-    return (_jsxs("div", { className: "relative", ...testId(TEST_IDS.METRICS_GRAPH), onClick: () => isInfoPanelOpen && setIsInfoPanelOpen(false), children: [_jsx("div", { className: "absolute right-0 top-0", children: _jsx(MetricsInfoPanel, { isInfoPanelOpen: isInfoPanelOpen, onInfoIconClick: () => setIsInfoPanelOpen(true) }) }), _jsx(RawMetricsGraph, { data: data, from: from, to: to, onSampleClick: onSampleClick, setTimeRange: setTimeRange, yAxisLabel: yAxisLabel, yAxisUnit: yAxisUnit, width: width, height: height, margin: margin, selectedPoint: selectedPoint, contextMenuItems: contextMenuItems, renderTooltipContent: renderTooltipContent })] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var MetricsGraph = function MetricsGraph(t0) {
+  var $ = _c(24);
+  var data = t0.data,
+    from = t0.from,
+    to = t0.to,
+    onSampleClick = t0.onSampleClick,
+    setTimeRange = t0.setTimeRange,
+    yAxisLabel = t0.yAxisLabel,
+    yAxisUnit = t0.yAxisUnit,
+    t1 = t0.width,
+    t2 = t0.height,
+    t3 = t0.margin,
+    selectedPoint = t0.selectedPoint,
+    contextMenuItems = t0.contextMenuItems,
+    renderTooltipContent = t0.renderTooltipContent;
+  var width = t1 === undefined ? 0 : t1;
+  var height = t2 === undefined ? 0 : t2;
+  var margin = t3 === undefined ? 0 : t3;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInfoPanelOpen = _useState2[0],
+    setIsInfoPanelOpen = _useState2[1];
+  var t4;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t4 = testId(TEST_IDS.METRICS_GRAPH);
+    $[0] = t4;
+  } else {
+    t4 = $[0];
+  }
+  var t5;
+  if ($[1] !== isInfoPanelOpen) {
+    t5 = function t5() {
+      return isInfoPanelOpen && setIsInfoPanelOpen(false);
+    };
+    $[1] = isInfoPanelOpen;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  var t6;
+  if ($[3] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t6 = function t6() {
+      return setIsInfoPanelOpen(true);
+    };
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  var t7;
+  if ($[4] !== isInfoPanelOpen) {
+    t7 = /*#__PURE__*/_jsx("div", {
+      className: "absolute right-0 top-0",
+      children: /*#__PURE__*/_jsx(MetricsInfoPanel, {
+        isInfoPanelOpen: isInfoPanelOpen,
+        onInfoIconClick: t6
+      })
+    });
+    $[4] = isInfoPanelOpen;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  var t8;
+  if ($[6] !== contextMenuItems || $[7] !== data || $[8] !== from || $[9] !== height || $[10] !== margin || $[11] !== onSampleClick || $[12] !== renderTooltipContent || $[13] !== selectedPoint || $[14] !== setTimeRange || $[15] !== to || $[16] !== width || $[17] !== yAxisLabel || $[18] !== yAxisUnit) {
+    t8 = /*#__PURE__*/_jsx(RawMetricsGraph, {
+      data: data,
+      from: from,
+      to: to,
+      onSampleClick: onSampleClick,
+      setTimeRange: setTimeRange,
+      yAxisLabel: yAxisLabel,
+      yAxisUnit: yAxisUnit,
+      width: width,
+      height: height,
+      margin: margin,
+      selectedPoint: selectedPoint,
+      contextMenuItems: contextMenuItems,
+      renderTooltipContent: renderTooltipContent
+    });
+    $[6] = contextMenuItems;
+    $[7] = data;
+    $[8] = from;
+    $[9] = height;
+    $[10] = margin;
+    $[11] = onSampleClick;
+    $[12] = renderTooltipContent;
+    $[13] = selectedPoint;
+    $[14] = setTimeRange;
+    $[15] = to;
+    $[16] = width;
+    $[17] = yAxisLabel;
+    $[18] = yAxisUnit;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  var t9;
+  if ($[20] !== t5 || $[21] !== t7 || $[22] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "relative"
+    }, t4), {}, {
+      onClick: t5,
+      children: [t7, t8]
+    }));
+    $[20] = t5;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  return t9;
 };
 export default MetricsGraph;
-export const parseValue = (value) => {
-    const val = parseFloat(value);
-    // "+Inf", "-Inf", "+Inf" will be parsed into NaN by parseFloat(). They
-    // can't be graphed, so show them as gaps (null).
-    return isNaN(val) ? null : val;
+export var parseValue = function parseValue(value) {
+  var val = parseFloat(value);
+  // "+Inf", "-Inf", "+Inf" will be parsed into NaN by parseFloat(). They
+  // can't be graphed, so show them as gaps (null).
+  return isNaN(val) ? null : val;
 };
-const lineStroke = '1px';
-const lineStrokeHover = '2px';
-export const RawMetricsGraph = ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width, height = 50, margin = 0, selectedPoint, contextMenuItems, renderTooltipContent, }) => {
-    const { timezone } = useParcaContext();
-    const graph = useRef(null);
-    const [dragging, setDragging] = useState(false);
-    const [hovering, setHovering] = useState(false);
-    const [relPos, setRelPos] = useState(-1);
-    const [pos, setPos] = useState([0, 0]);
-    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-    const metricPointRef = useRef(null);
-    const idForContextMenu = useId();
-    if (width === undefined || width == null) {
-        width = 0;
-    }
-    const graphWidth = useMemo(() => width - margin * 1.5 - margin / 2, [width, margin]);
-    const graphTransform = useMemo(() => {
-        // Adds 6px padding which aligns the graph on the grid
-        return `translate(6, 0) scale(${(graphWidth - 6) / graphWidth}, 1)`;
-    }, [graphWidth]);
-    const series = data;
-    const extentsY = series.map(function (s) {
-        return d3.extent(s.values, function (d) {
-            return d[1]; // d[1] is the value
-        });
-    });
-    const minY = d3.min(extentsY, function (d) {
-        return d[0];
+var lineStroke = '1px';
+var lineStrokeHover = '2px';
+export var RawMetricsGraph = function RawMetricsGraph(_ref) {
+  var _series$highlighted$s, _series$highlighted$s2, _series$selected$seri, _series$selected$seri2;
+  var data = _ref.data,
+    from = _ref.from,
+    to = _ref.to,
+    onSampleClick = _ref.onSampleClick,
+    setTimeRange = _ref.setTimeRange,
+    yAxisLabel = _ref.yAxisLabel,
+    yAxisUnit = _ref.yAxisUnit,
+    width = _ref.width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 50 : _ref$height,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 0 : _ref$margin,
+    selectedPoint = _ref.selectedPoint,
+    contextMenuItems = _ref.contextMenuItems,
+    renderTooltipContent = _ref.renderTooltipContent;
+  var _useParcaContext = useParcaContext(),
+    timezone = _useParcaContext.timezone;
+  var graph = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hovering = _useState6[0],
+    setHovering = _useState6[1];
+  var _useState7 = useState(-1),
+    _useState8 = _slicedToArray(_useState7, 2),
+    relPos = _useState8[0],
+    setRelPos = _useState8[1];
+  var _useState9 = useState([0, 0]),
+    _useState0 = _slicedToArray(_useState9, 2),
+    pos = _useState0[0],
+    setPos = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isContextMenuOpen = _useState10[0],
+    setIsContextMenuOpen = _useState10[1];
+  var metricPointRef = useRef(null);
+  var idForContextMenu = useId();
+  if (width === undefined || width == null) {
+    width = 0;
+  }
+  var graphWidth = useMemo(function () {
+    return width - margin * 1.5 - margin / 2;
+  }, [width, margin]);
+  var graphTransform = useMemo(function () {
+    // Adds 6px padding which aligns the graph on the grid
+    return "translate(6, 0) scale(".concat((graphWidth - 6) / graphWidth, ", 1)");
+  }, [graphWidth]);
+  var series = data;
+  var extentsY = series.map(function (s) {
+    return d3.extent(s.values, function (d) {
+      return d[1]; // d[1] is the value
     });
-    const maxY = d3.max(extentsY, function (d) {
-        return d[1];
-    });
-    /* Scale */
-    const xScale = d3.scaleUtc().domain([from, to]).range([0, graphWidth]);
-    const yScale = d3
-        .scaleLinear()
-        // tslint:disable-next-line
-        .domain([minY, maxY])
-        .range([height - margin, 0])
-        .nice();
-    // Create deterministic color mapping based on series IDs
-    const color = useMemo(() => d3.scaleOrdinal(d3.schemeCategory10), []);
-    const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
-    const closestPoint = useMemo(() => {
-        // Guard against empty series
-        if (series.length === 0) {
-            return null;
-        }
-        const closestPointPerSeries = series.map(function (s) {
-            if (s.values.length === 0) {
-                return {
-                    pointIndex: undefined,
-                    distance: Infinity,
-                };
-            }
-            const distances = s.values.map(d => {
-                const x = xScale(d[0]) + margin / 2; // d[0] is timestamp_ms
-                const y = yScale(d[1]) - margin / 3; // d[1] is value
-                // Cartesian distance from the mouse position to the point
-                return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
-            });
-            const pointIndex = d3.minIndex(distances);
-            const minDistance = pointIndex != null ? distances[pointIndex] : Infinity;
-            return {
-                pointIndex,
-                distance: minDistance,
-            };
-        });
-        const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
-        if (closestSeriesIndex == null || closestPointPerSeries[closestSeriesIndex] == null) {
-            return null;
-        }
-        const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
-        if (pointIndex == null) {
-            return null;
-        }
-        return {
-            seriesIndex: closestSeriesIndex,
-            pointIndex,
-        };
-    }, [pos, series, xScale, yScale, margin]);
-    const highlighted = useMemo(() => {
-        if (series.length === 0 || closestPoint == null) {
-            return null;
-        }
-        const point = series[closestPoint.seriesIndex].values[closestPoint.pointIndex];
-        return {
-            seriesIndex: closestPoint.seriesIndex,
-            pointIndex: closestPoint.pointIndex,
-            x: xScale(point[0]),
-            y: yScale(point[1]),
-        };
-    }, [closestPoint, series, xScale, yScale]);
-    const selected = useMemo(() => {
-        if (series.length === 0 || selectedPoint == null) {
-            return null;
-        }
-        const point = series[selectedPoint.seriesIndex].values[selectedPoint.pointIndex];
+  });
+  var minY = d3.min(extentsY, function (d_0) {
+    return d_0[0];
+  });
+  var maxY = d3.max(extentsY, function (d_1) {
+    return d_1[1];
+  });
+
+  /* Scale */
+  var xScale = d3.scaleUtc().domain([from, to]).range([0, graphWidth]);
+  var yScale = d3.scaleLinear()
+  // tslint:disable-next-line
+  .domain([minY, maxY]).range([height - margin, 0]).nice();
+
+  // Create deterministic color mapping based on series IDs
+  var color = useMemo(function () {
+    return d3.scaleOrdinal(d3.schemeCategory10);
+  }, []);
+  var l = d3.line(function (d_2) {
+    return xScale(d_2[0]);
+  }, function (d_3) {
+    return yScale(d_3[1]);
+  });
+  var closestPoint = useMemo(function () {
+    // Guard against empty series
+    if (series.length === 0) {
+      return null;
+    }
+    var closestPointPerSeries = series.map(function (s_0) {
+      if (s_0.values.length === 0) {
         return {
-            seriesIndex: selectedPoint.seriesIndex,
-            pointIndex: selectedPoint.pointIndex,
-            x: xScale(point[0]),
-            y: yScale(point[1]),
+          pointIndex: undefined,
+          distance: Infinity
         };
-    }, [selectedPoint, series, xScale, yScale]);
-    const onMouseDown = (e) => {
-        // only left mouse button
-        if (e.button !== 0) {
-            return;
-        }
-        // X/Y coordinate array relative to svg
-        const rel = pointer(e);
-        const xCoordinate = rel[0];
-        const xCoordinateWithoutMargin = xCoordinate - margin;
-        if (xCoordinateWithoutMargin >= 0) {
-            setRelPos(xCoordinateWithoutMargin);
-            setDragging(true);
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    const handleClosestPointClick = () => {
-        if (closestPoint != null) {
-            onSampleClick(closestPoint);
-        }
+      }
+      var distances = s_0.values.map(function (d_4) {
+        var x = xScale(d_4[0]) + margin / 2; // d[0] is timestamp_ms
+        var y = yScale(d_4[1]) - margin / 3; // d[1] is value
+
+        // Cartesian distance from the mouse position to the point
+        return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
+      });
+      var pointIndex = d3.minIndex(distances);
+      var minDistance = pointIndex != null ? distances[pointIndex] : Infinity;
+      return {
+        pointIndex: pointIndex,
+        distance: minDistance
+      };
+    });
+    var closestSeriesIndex = d3.minIndex(closestPointPerSeries, function (s_1) {
+      return s_1.distance;
+    });
+    if (closestSeriesIndex == null || closestPointPerSeries[closestSeriesIndex] == null) {
+      return null;
+    }
+    var pointIndex_0 = closestPointPerSeries[closestSeriesIndex].pointIndex;
+    if (pointIndex_0 == null) {
+      return null;
+    }
+    return {
+      seriesIndex: closestSeriesIndex,
+      pointIndex: pointIndex_0
     };
-    const onMouseUp = (e) => {
-        setDragging(false);
-        if (relPos === -1) {
-            // MouseDown happened outside of this element.
-            return;
-        }
-        // This is a normal click. We tolerate tiny movements to still be a
-        // click as they can occur when clicking based on user feedback.
-        if (Math.abs(relPos - pos[0]) <= 1) {
-            handleClosestPointClick();
-            setRelPos(-1);
-            return;
-        }
-        let startPos = relPos;
-        let endPos = pos[0];
-        if (startPos > endPos) {
-            startPos = pos[0];
-            endPos = relPos;
-        }
-        const startCorrection = 10;
-        const endCorrection = 30;
-        const firstTime = xScale.invert(startPos - startCorrection).valueOf();
-        const secondTime = xScale.invert(endPos - endCorrection).valueOf();
-        setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
-        setRelPos(-1);
-        e.stopPropagation();
-        e.preventDefault();
+  }, [pos, series, xScale, yScale, margin]);
+  var highlighted = useMemo(function () {
+    if (series.length === 0 || closestPoint == null) {
+      return null;
+    }
+    var point = series[closestPoint.seriesIndex].values[closestPoint.pointIndex];
+    return {
+      seriesIndex: closestPoint.seriesIndex,
+      pointIndex: closestPoint.pointIndex,
+      x: xScale(point[0]),
+      y: yScale(point[1])
     };
-    const throttledSetPos = throttle(setPos, 20);
-    const onMouseMove = (e) => {
-        if (isContextMenuOpen) {
-            return;
-        }
-        // X/Y coordinate array relative to svg
-        const rel = pointer(e);
-        const xCoordinate = rel[0];
-        const xCoordinateWithoutMargin = xCoordinate - margin;
-        const yCoordinate = rel[1];
-        const yCoordinateWithoutMargin = yCoordinate - margin;
-        throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
+  }, [closestPoint, series, xScale, yScale]);
+  var selected = useMemo(function () {
+    if (series.length === 0 || selectedPoint == null) {
+      return null;
+    }
+    var point_0 = series[selectedPoint.seriesIndex].values[selectedPoint.pointIndex];
+    return {
+      seriesIndex: selectedPoint.seriesIndex,
+      pointIndex: selectedPoint.pointIndex,
+      x: xScale(point_0[0]),
+      y: yScale(point_0[1])
     };
-    const MENU_ID = `metrics-context-menu-${idForContextMenu}`;
-    const { show } = useContextMenu({
-        id: MENU_ID,
+  }, [selectedPoint, series, xScale, yScale]);
+  var onMouseDown = function onMouseDown(e) {
+    // only left mouse button
+    if (e.button !== 0) {
+      return;
+    }
+
+    // X/Y coordinate array relative to svg
+    var rel = pointer(e);
+    var xCoordinate = rel[0];
+    var xCoordinateWithoutMargin = xCoordinate - margin;
+    if (xCoordinateWithoutMargin >= 0) {
+      setRelPos(xCoordinateWithoutMargin);
+      setDragging(true);
+    }
+    e.stopPropagation();
+    e.preventDefault();
+  };
+  var handleClosestPointClick = function handleClosestPointClick() {
+    if (closestPoint != null) {
+      onSampleClick(closestPoint);
+    }
+  };
+  var onMouseUp = function onMouseUp(e_0) {
+    setDragging(false);
+    if (relPos === -1) {
+      // MouseDown happened outside of this element.
+      return;
+    }
+
+    // This is a normal click. We tolerate tiny movements to still be a
+    // click as they can occur when clicking based on user feedback.
+    if (Math.abs(relPos - pos[0]) <= 1) {
+      handleClosestPointClick();
+      setRelPos(-1);
+      return;
+    }
+    var startPos = relPos;
+    var endPos = pos[0];
+    if (startPos > endPos) {
+      startPos = pos[0];
+      endPos = relPos;
+    }
+    var startCorrection = 10;
+    var endCorrection = 30;
+    var firstTime = xScale.invert(startPos - startCorrection).valueOf();
+    var secondTime = xScale.invert(endPos - endCorrection).valueOf();
+    setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
+    setRelPos(-1);
+    e_0.stopPropagation();
+    e_0.preventDefault();
+  };
+  var throttledSetPos = throttle(setPos, 20);
+  var onMouseMove = function onMouseMove(e_1) {
+    if (isContextMenuOpen) {
+      return;
+    }
+
+    // X/Y coordinate array relative to svg
+    var rel_0 = pointer(e_1);
+    var xCoordinate_0 = rel_0[0];
+    var xCoordinateWithoutMargin_0 = xCoordinate_0 - margin;
+    var yCoordinate = rel_0[1];
+    var yCoordinateWithoutMargin = yCoordinate - margin;
+    throttledSetPos([xCoordinateWithoutMargin_0, yCoordinateWithoutMargin]);
+  };
+  var MENU_ID = "metrics-context-menu-".concat(idForContextMenu);
+  var _useContextMenu = useContextMenu({
+      id: MENU_ID
+    }),
+    show = _useContextMenu.show;
+  var displayMenu = useCallback(function (e_2) {
+    show({
+      event: e_2
     });
-    const displayMenu = useCallback((e) => {
-        show({
-            event: e,
-        });
-    }, [show]);
-    const trackVisibility = (isVisible) => {
-        setIsContextMenuOpen(isVisible);
-    };
-    return (_jsxs(_Fragment, { children: [contextMenuItems != null && (_jsx(MetricsContextMenu, { menuId: MENU_ID, closestPoint: closestPoint, series: series, trackVisibility: trackVisibility, menuItems: contextMenuItems })), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, contextElement: graph.current, content: renderTooltipContent?.(highlighted.seriesIndex, highlighted.pointIndex) })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
-                    setHovering(true);
-                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i, allTicks) => {
-                                            let decimals = 2;
-                                            const intervalBetweenTicks = allTicks[1] - allTicks[0];
-                                            if (intervalBetweenTicks < 1) {
-                                                const precision = getPrecision(intervalBetweenTicks);
-                                                decimals = precision;
-                                            }
-                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
-                                                        /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                        transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, yAxisUnit, decimals) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
-                                        }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: yAxisLabel }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
-                                                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", transform: graphTransform, width: graphWidth - 100, children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(s.id), strokeWidth: (hovering && highlighted != null && i === highlighted.seriesIndex) ||
-                                                s.highlighted === true
-                                                ? lineStrokeHover
-                                                : lineStroke, xScale: xScale, yScale: yScale }) }, s.id))) }), hovering && highlighted != null && (_jsx("g", { className: "circle-group", ref: metricPointRef, style: { fill: color(series[highlighted.seriesIndex]?.id ?? '0') }, transform: graphTransform, children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) })), selected != null && (_jsx("g", { className: "circle-group", style: selected?.seriesIndex != null
-                                        ? { fill: color(series[selected.seriesIndex]?.id ?? '0') }
-                                        : {}, transform: graphTransform, children: _jsx(MetricsCircle, { cx: selected.x, cy: selected.y, radius: 5 }) }))] })] }) })] }));
-};
+  }, [show]);
+  var trackVisibility = function trackVisibility(isVisible) {
+    setIsContextMenuOpen(isVisible);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [contextMenuItems != null && /*#__PURE__*/_jsx(MetricsContextMenu, {
+      menuId: MENU_ID,
+      closestPoint: closestPoint,
+      series: series,
+      trackVisibility: trackVisibility,
+      menuItems: contextMenuItems
+    }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && /*#__PURE__*/_jsx("div", {
+      onMouseMove: onMouseMove,
+      onMouseEnter: function onMouseEnter() {
+        return setHovering(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovering(false);
+      },
+      children: !isContextMenuOpen && /*#__PURE__*/_jsx(MetricsTooltip, {
+        x: pos[0] + margin,
+        y: pos[1] + margin,
+        contextElement: graph.current,
+        content: renderTooltipContent === null || renderTooltipContent === void 0 ? void 0 : renderTooltipContent(highlighted.seriesIndex, highlighted.pointIndex)
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      ref: graph,
+      onMouseEnter: function onMouseEnter() {
+        setHovering(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovering(false);
+      },
+      onContextMenu: displayMenu,
+      children: /*#__PURE__*/_jsxs("svg", {
+        width: "".concat(width, "px"),
+        height: "".concat(height + margin, "px"),
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseMove: onMouseMove,
+        children: [/*#__PURE__*/_jsx("g", {
+          transform: "translate(".concat(margin, ", 0)"),
+          children: dragging && /*#__PURE__*/_jsx("g", {
+            className: "zoom-time-rect",
+            children: /*#__PURE__*/_jsx("rect", {
+              className: "bar",
+              x: pos[0] - relPos < 0 ? pos[0] : relPos,
+              y: 0,
+              height: height,
+              width: Math.abs(pos[0] - relPos),
+              fill: 'rgba(0, 0, 0, 0.125)'
+            })
+          })
+        }), /*#__PURE__*/_jsxs("g", {
+          transform: "translate(".concat(margin * 1.5, ", ").concat(margin / 1.5, ")"),
+          children: [/*#__PURE__*/_jsxs("g", {
+            className: "y axis",
+            textAnchor: "end",
+            fontSize: "10",
+            fill: "none",
+            children: [yScale.ticks(5).map(function (d_5, i, allTicks) {
+              var decimals = 2;
+              var intervalBetweenTicks = allTicks[1] - allTicks[0];
+              if (intervalBetweenTicks < 1) {
+                var precision = getPrecision(intervalBetweenTicks);
+                decimals = precision;
+              }
+              return /*#__PURE__*/_jsxs(Fragment, {
+                children: [/*#__PURE__*/_jsxs("g", {
+                  className: "tick"
+                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */,
+                  transform: "translate(0, ".concat(yScale(d_5), ")"),
+                  children: [/*#__PURE__*/_jsx("line", {
+                    className: "stroke-gray-300 dark:stroke-gray-500",
+                    x2: -6
+                  }), /*#__PURE__*/_jsx("text", {
+                    fill: "currentColor",
+                    x: -9,
+                    dy: '0.32em',
+                    children: valueFormatter(d_5, yAxisUnit, decimals)
+                  })]
+                }, "tick-".concat(i)), /*#__PURE__*/_jsx("g", {
+                  children: /*#__PURE__*/_jsx("line", {
+                    className: "stroke-gray-300 dark:stroke-gray-500",
+                    x1: xScale(from),
+                    x2: xScale(to),
+                    y1: yScale(d_5),
+                    y2: yScale(d_5)
+                  })
+                }, "grid-".concat(i))]
+              }, "".concat(i.toString(), "-").concat(d_5.toString()));
+            }), /*#__PURE__*/_jsx("line", {
+              className: "stroke-gray-300 dark:stroke-gray-500",
+              x1: 0,
+              x2: 0,
+              y1: 0,
+              y2: height - margin
+            }), /*#__PURE__*/_jsx("line", {
+              className: "stroke-gray-300 dark:stroke-gray-500",
+              x1: xScale(to),
+              x2: xScale(to),
+              y1: 0,
+              y2: height - margin
+            }), /*#__PURE__*/_jsx("g", {
+              transform: "translate(".concat(-margin, ", ").concat((height - margin) / 2, ") rotate(270)"),
+              children: /*#__PURE__*/_jsx("text", {
+                fill: "currentColor",
+                dy: "-0.7em",
+                className: "text-sm capitalize",
+                textAnchor: "middle",
+                children: yAxisLabel
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("g", {
+            className: "x axis",
+            fill: "none",
+            fontSize: "10",
+            textAnchor: "middle",
+            transform: "translate(0,".concat(height - margin, ")"),
+            children: [xScale.ticks(5).map(function (d_6, i_0) {
+              return /*#__PURE__*/_jsxs(Fragment, {
+                children: [/*#__PURE__*/_jsxs("g", {
+                  className: "tick"
+                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */,
+                  transform: "translate(".concat(xScale(d_6), ", 0)"),
+                  children: [/*#__PURE__*/_jsx("line", {
+                    y2: 6,
+                    className: "stroke-gray-300 dark:stroke-gray-500"
+                  }), /*#__PURE__*/_jsx("text", {
+                    fill: "currentColor",
+                    dy: ".71em",
+                    y: 9,
+                    children: formatDate(d_6, formatForTimespan(from, to), timezone)
+                  })]
+                }, "tick-".concat(i_0)), /*#__PURE__*/_jsx("g", {
+                  children: /*#__PURE__*/_jsx("line", {
+                    className: "stroke-gray-300 dark:stroke-gray-500",
+                    x1: xScale(d_6),
+                    x2: xScale(d_6),
+                    y1: 0,
+                    y2: -height + margin
+                  })
+                }, "grid-".concat(i_0))]
+              }, "".concat(i_0.toString(), "-").concat(d_6.toString()));
+            }), /*#__PURE__*/_jsx("line", {
+              className: "stroke-gray-300 dark:stroke-gray-500",
+              x1: 0,
+              x2: graphWidth,
+              y1: 0,
+              y2: 0
+            }), /*#__PURE__*/_jsx("g", {
+              transform: "translate(".concat((width - 2.5 * margin) / 2, ", ").concat(margin / 2, ")"),
+              children: /*#__PURE__*/_jsx("text", {
+                fill: "currentColor",
+                dy: ".71em",
+                y: 5,
+                className: "text-sm",
+                children: "Time"
+              })
+            })]
+          }), /*#__PURE__*/_jsx("g", {
+            className: "lines fill-transparent",
+            transform: graphTransform,
+            width: graphWidth - 100,
+            children: series.map(function (s_2, i_1) {
+              return /*#__PURE__*/_jsx("g", {
+                className: "line",
+                children: /*#__PURE__*/_jsx(MetricsSeries, {
+                  data: s_2,
+                  line: l,
+                  color: color(s_2.id),
+                  strokeWidth: hovering && highlighted != null && i_1 === highlighted.seriesIndex || s_2.highlighted === true ? lineStrokeHover : lineStroke,
+                  xScale: xScale,
+                  yScale: yScale
+                })
+              }, s_2.id);
+            })
+          }), hovering && highlighted != null && /*#__PURE__*/_jsx("g", {
+            className: "circle-group",
+            ref: metricPointRef,
+            style: {
+              fill: color((_series$highlighted$s = (_series$highlighted$s2 = series[highlighted.seriesIndex]) === null || _series$highlighted$s2 === void 0 ? void 0 : _series$highlighted$s2.id) !== null && _series$highlighted$s !== void 0 ? _series$highlighted$s : '0')
+            },
+            transform: graphTransform,
+            children: /*#__PURE__*/_jsx(MetricsCircle, {
+              cx: highlighted.x,
+              cy: highlighted.y
+            })
+          }), selected != null && /*#__PURE__*/_jsx("g", {
+            className: "circle-group",
+            style: (selected === null || selected === void 0 ? void 0 : selected.seriesIndex) != null ? {
+              fill: color((_series$selected$seri = (_series$selected$seri2 = series[selected.seriesIndex]) === null || _series$selected$seri2 === void 0 ? void 0 : _series$selected$seri2.id) !== null && _series$selected$seri !== void 0 ? _series$selected$seri : '0')
+            } : {},
+            transform: graphTransform,
+            children: /*#__PURE__*/_jsx(MetricsCircle, {
+              cx: selected.x,
+              cy: selected.y,
+              radius: 5
+            })
+          })]
+        })]
+      })
+    })]
+  });
+};