@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileFlameChart/SamplesStrips/SamplesGraph/index.js

@@ -1,4 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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,158 +21,333 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import * as d3 from 'd3';
-const DraggingWindow = ({ dragStart, currentX, }) => {
-    const start = useMemo(() => Math.min(dragStart ?? 0, currentX ?? 0), [dragStart, currentX]);
-    const width = useMemo(() => Math.abs((dragStart ?? 0) - (currentX ?? 0)), [dragStart, currentX]);
-    if (dragStart === undefined || currentX === undefined) {
-        return null;
-    }
-    return (_jsx("div", { style: { height: '100%', width, left: start }, className: cx('bg-gray-500 absolute top-0 opacity-50 border-x-2 border-gray-900 dark:border-gray-100') }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DraggingWindow = function DraggingWindow(t0) {
+  var $ = _c(9);
+  var dragStart = t0.dragStart,
+    currentX = t0.currentX;
+  var start = Math.min(dragStart !== null && dragStart !== void 0 ? dragStart : 0, currentX !== null && currentX !== void 0 ? currentX : 0);
+  var t1;
+  if ($[0] !== currentX || $[1] !== dragStart) {
+    t1 = Math.abs((dragStart !== null && dragStart !== void 0 ? dragStart : 0) - (currentX !== null && currentX !== void 0 ? currentX : 0));
+    $[0] = currentX;
+    $[1] = dragStart;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  var width = t1;
+  if (dragStart === undefined || currentX === undefined) {
+    return null;
+  }
+  var t2;
+  if ($[3] !== start || $[4] !== width) {
+    t2 = {
+      height: "100%",
+      width: width,
+      left: start
+    };
+    $[3] = start;
+    $[4] = width;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  var t3;
+  if ($[6] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t3 = cx("bg-gray-500 absolute top-0 opacity-50 border-x-2 border-gray-900 dark:border-gray-100");
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  var t4;
+  if ($[7] !== t2) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      style: t2,
+      className: t3
+    });
+    $[7] = t2;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
 };
-const ZoomWindow = ({ zoomWindow, onZoomWindowChange, setIsHoveringDragHandle, }) => {
-    const windowStartHandleRef = useRef(null);
-    const windowEndHandleRef = useRef(null);
-    const [zoomWindowState, setZoomWindowState] = useState(zoomWindow);
-    const [dragginStart, setDraggingStart] = useState(false);
-    const [draggingEnd, setDraggingEnd] = useState(false);
-    useEffect(() => {
-        if (zoomWindow === undefined ||
-            zoomWindowState === undefined ||
-            zoomWindow[0] !== zoomWindowState[0] ||
-            zoomWindow[1] !== zoomWindowState[1]) {
-            setZoomWindowState(zoomWindow);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [zoomWindow]);
-    if (zoomWindowState === undefined) {
-        return null;
+var ZoomWindow = function ZoomWindow(_ref) {
+  var zoomWindow = _ref.zoomWindow,
+    onZoomWindowChange = _ref.onZoomWindowChange,
+    setIsHoveringDragHandle = _ref.setIsHoveringDragHandle;
+  var windowStartHandleRef = useRef(null);
+  var windowEndHandleRef = useRef(null);
+  var _useState = useState(zoomWindow),
+    _useState2 = _slicedToArray(_useState, 2),
+    zoomWindowState = _useState2[0],
+    setZoomWindowState = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragginStart = _useState4[0],
+    setDraggingStart = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    draggingEnd = _useState6[0],
+    setDraggingEnd = _useState6[1];
+  useEffect(function () {
+    if (zoomWindow === undefined || zoomWindowState === undefined || zoomWindow[0] !== zoomWindowState[0] || zoomWindow[1] !== zoomWindowState[1]) {
+      setZoomWindowState(zoomWindow);
     }
-    const beforeWidth = zoomWindowState[0];
-    const afterStart = zoomWindowState[1];
-    return (_jsx("div", { className: "absolute w-full h-full", onMouseMove: e => {
-            if (dragginStart) {
-                const [x] = d3.pointer(e);
-                if (x >= afterStart - 10) {
-                    return;
-                }
-                const newStart = Math.min(x, afterStart);
-                const newEnd = Math.max(x, afterStart);
-                setZoomWindowState([newStart, newEnd]);
-            }
-            if (draggingEnd) {
-                const [x] = d3.pointer(e);
-                if (x <= beforeWidth + 10) {
-                    return;
-                }
-                const newStart = Math.min(x, beforeWidth);
-                const newEnd = Math.max(x, beforeWidth);
-                setZoomWindowState([newStart, newEnd]);
-            }
-        }, onMouseLeave: () => {
-            setDraggingStart(false);
-            setDraggingEnd(false);
-        }, onMouseUp: () => {
-            if (dragginStart) {
-                setDraggingStart(false);
-            }
-            if (draggingEnd) {
-                setDraggingEnd(false);
-            }
-            if (zoomWindowState[0] === zoomWindow?.[0] && zoomWindowState[1] === zoomWindow?.[1]) {
-                return;
-            }
-            onZoomWindowChange(zoomWindowState);
-            setZoomWindowState(undefined);
-        }, children: _jsxs("div", { style: {
-                height: '100%',
-                width: zoomWindowState[1] - zoomWindowState[0],
-                left: zoomWindowState[0],
-            }, className: cx('bg-gray-500/50 dark:bg-gray-400/90 absolute top-0 border-x-2 border-gray-900 dark:border-gray-100 z-20'), children: [_jsx("div", { className: "w-3 h-4 absolute top-0 left-[-7px] rounded-b bg-gray-200 dark:bg-gray-600  cursor-ew-resize flex justify-center z-30", onMouseDown: e => {
-                        setDraggingStart(true);
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }, ref: windowStartHandleRef, onMouseEnter: () => {
-                        setIsHoveringDragHandle(true);
-                    }, onMouseLeave: () => {
-                        setIsHoveringDragHandle(false);
-                    }, children: _jsx(Icon, { icon: "si:drag-handle-line", className: "rotate-90", fontSize: 16 }) }), _jsx("div", { className: "w-3 h-4 absolute top-0 rounded-b bg-gray-200 dark:bg-gray-600 cursor-ew-resize flex justify-center right-[-7px]", onMouseDown: e => {
-                        setDraggingEnd(true);
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }, ref: windowEndHandleRef, onMouseEnter: () => {
-                        setIsHoveringDragHandle(true);
-                    }, onMouseLeave: () => {
-                        setIsHoveringDragHandle(false);
-                    }, children: _jsx(Icon, { icon: "si:drag-handle-line", className: "rotate-90", fontSize: 16 }) })] }) }));
-};
-export const SamplesGraph = ({ data, height, width, marginLeft = 0, marginRight = 0, marginBottom = 0, marginTop = 0, fill = 'gray', selectionBounds, setSelectionBounds, stepMs, onDragStart, dragState, isAnyDragActive = false, timeBounds, }) => {
-    const [mousePosition, setMousePosition] = useState(undefined);
-    const [isHoveringDragHandle, setIsHoveringDragHandle] = useState(false);
-    // use the bounds from props if provided, else compute from data
-    const xDomain = timeBounds ?? d3.extent(data, d => d.timestamp);
-    const x = d3.scaleUtc(xDomain, [marginLeft, width - marginRight]);
-    // Calculate sample count range for opacity scaling
-    const sampleCounts = data.map(d => Number(d.sampleCount ?? 1));
-    const maxSampleCount = Math.max(...sampleCounts);
-    const minSampleCount = Math.min(...sampleCounts);
-    // Create opacity scale: more samples = higher opacity
-    const opacityScale = d3
-        .scaleLinear()
-        .domain([minSampleCount, maxSampleCount])
-        .range([0.5, 1.0])
-        .clamp(true);
-    const zoomWindow = useMemo(() => {
-        if (selectionBounds === undefined) {
-            return undefined;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomWindow]);
+  if (zoomWindowState === undefined) {
+    return null;
+  }
+  var beforeWidth = zoomWindowState[0];
+  var afterStart = zoomWindowState[1];
+  return /*#__PURE__*/_jsx("div", {
+    className: "absolute w-full h-full",
+    onMouseMove: function onMouseMove(e) {
+      if (dragginStart) {
+        var _d3$pointer = d3.pointer(e),
+          _d3$pointer2 = _slicedToArray(_d3$pointer, 1),
+          x = _d3$pointer2[0];
+        if (x >= afterStart - 10) {
+          return;
         }
-        return [x(selectionBounds[0]), x(selectionBounds[1])];
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectionBounds]);
-    const setSelectionBoundsWithScaling = ([startPx, endPx]) => {
-        setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
-    };
-    return (_jsxs("div", { style: { height, width }, className: "relative", onMouseMove: e => {
-            // Only track hover position when no drag is active anywhere
-            if (isAnyDragActive)
-                return;
-            const [xPos, yPos] = d3.pointer(e);
-            if (xPos >= marginLeft &&
-                xPos <= width - marginRight &&
-                yPos >= marginTop &&
-                yPos <= height - marginBottom) {
-                setMousePosition([xPos, yPos]);
-            }
-            else {
-                setMousePosition(undefined);
-            }
-        }, onMouseLeave: () => {
-            // Only clear hover position, drag is managed by parent
-            setMousePosition(undefined);
-        }, onMouseDown: e => {
-            // only left mouse button
-            if (e.button !== 0) {
-                return;
-            }
-            // X/Y coordinate array relative to element
-            const rel = d3.pointer(e);
-            const xCoordinate = rel[0];
-            if (xCoordinate >= 0 && onDragStart !== undefined) {
-                onDragStart(xCoordinate);
-            }
-            e.stopPropagation();
-            e.preventDefault();
-        }, children: [_jsx("div", { style: { height, width: 2, left: mousePosition?.[0] ?? -1 }, className: cx('bg-gray-700/75 dark:bg-gray-200/75 absolute top-0', {
-                    hidden: mousePosition === undefined || isAnyDragActive || isHoveringDragHandle,
-                }) }), _jsx(DraggingWindow, { dragStart: dragState?.startX, currentX: dragState?.currentX }), _jsx(ZoomWindow, { zoomWindow: zoomWindow, width: width, onZoomWindowChange: setSelectionBoundsWithScaling, setIsHoveringDragHandle: setIsHoveringDragHandle }), _jsxs("svg", { style: { width: '100%', height: '100%' }, children: [_jsx("rect", { x: marginLeft, y: 0, width: width - marginLeft - marginRight, height: height, fill: fill, fillOpacity: 0.1 }), _jsx("g", { children: data.map((d, i) => {
-                            const xPosition = x(d.timestamp);
-                            // Use stepMs for bucket width
-                            const rectWidth = x(d.timestamp + stepMs) - xPosition;
-                            // Calculate opacity based on sample count
-                            const opacity = opacityScale(Number(d.sampleCount ?? 1));
-                            return (_jsx("rect", { x: xPosition, y: 0, width: rectWidth, height: height, fill: fill, fillOpacity: opacity }, i));
-                        }) })] })] }));
+        var newStart = Math.min(x, afterStart);
+        var newEnd = Math.max(x, afterStart);
+        setZoomWindowState([newStart, newEnd]);
+      }
+      if (draggingEnd) {
+        var _d3$pointer3 = d3.pointer(e),
+          _d3$pointer4 = _slicedToArray(_d3$pointer3, 1),
+          _x = _d3$pointer4[0];
+        if (_x <= beforeWidth + 10) {
+          return;
+        }
+        var _newStart = Math.min(_x, beforeWidth);
+        var _newEnd = Math.max(_x, beforeWidth);
+        setZoomWindowState([_newStart, _newEnd]);
+      }
+    },
+    onMouseLeave: function onMouseLeave() {
+      setDraggingStart(false);
+      setDraggingEnd(false);
+    },
+    onMouseUp: function onMouseUp() {
+      if (dragginStart) {
+        setDraggingStart(false);
+      }
+      if (draggingEnd) {
+        setDraggingEnd(false);
+      }
+      if (zoomWindowState[0] === (zoomWindow === null || zoomWindow === void 0 ? void 0 : zoomWindow[0]) && zoomWindowState[1] === (zoomWindow === null || zoomWindow === void 0 ? void 0 : zoomWindow[1])) {
+        return;
+      }
+      onZoomWindowChange(zoomWindowState);
+      setZoomWindowState(undefined);
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      style: {
+        height: '100%',
+        width: zoomWindowState[1] - zoomWindowState[0],
+        left: zoomWindowState[0]
+      },
+      className: cx('bg-gray-500/50 dark:bg-gray-400/90 absolute top-0 border-x-2 border-gray-900 dark:border-gray-100 z-20'),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "w-3 h-4 absolute top-0 left-[-7px] rounded-b bg-gray-200 dark:bg-gray-600  cursor-ew-resize flex justify-center z-30",
+        onMouseDown: function onMouseDown(e) {
+          setDraggingStart(true);
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        ref: windowStartHandleRef,
+        onMouseEnter: function onMouseEnter() {
+          setIsHoveringDragHandle(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          setIsHoveringDragHandle(false);
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "si:drag-handle-line",
+          className: "rotate-90",
+          fontSize: 16
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "w-3 h-4 absolute top-0 rounded-b bg-gray-200 dark:bg-gray-600 cursor-ew-resize flex justify-center right-[-7px]",
+        onMouseDown: function onMouseDown(e) {
+          setDraggingEnd(true);
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        ref: windowEndHandleRef,
+        onMouseEnter: function onMouseEnter() {
+          setIsHoveringDragHandle(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          setIsHoveringDragHandle(false);
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "si:drag-handle-line",
+          className: "rotate-90",
+          fontSize: 16
+        })
+      })]
+    })
+  });
 };
+export var SamplesGraph = function SamplesGraph(_ref2) {
+  var _mousePosition$;
+  var data = _ref2.data,
+    height = _ref2.height,
+    width = _ref2.width,
+    _ref2$marginLeft = _ref2.marginLeft,
+    marginLeft = _ref2$marginLeft === void 0 ? 0 : _ref2$marginLeft,
+    _ref2$marginRight = _ref2.marginRight,
+    marginRight = _ref2$marginRight === void 0 ? 0 : _ref2$marginRight,
+    _ref2$marginBottom = _ref2.marginBottom,
+    marginBottom = _ref2$marginBottom === void 0 ? 0 : _ref2$marginBottom,
+    _ref2$marginTop = _ref2.marginTop,
+    marginTop = _ref2$marginTop === void 0 ? 0 : _ref2$marginTop,
+    _ref2$fill = _ref2.fill,
+    fill = _ref2$fill === void 0 ? 'gray' : _ref2$fill,
+    selectionBounds = _ref2.selectionBounds,
+    setSelectionBounds = _ref2.setSelectionBounds,
+    stepMs = _ref2.stepMs,
+    onDragStart = _ref2.onDragStart,
+    dragState = _ref2.dragState,
+    _ref2$isAnyDragActive = _ref2.isAnyDragActive,
+    isAnyDragActive = _ref2$isAnyDragActive === void 0 ? false : _ref2$isAnyDragActive,
+    timeBounds = _ref2.timeBounds;
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    mousePosition = _useState8[0],
+    setMousePosition = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isHoveringDragHandle = _useState0[0],
+    setIsHoveringDragHandle = _useState0[1];
+
+  // use the bounds from props if provided, else compute from data
+  var xDomain = timeBounds !== null && timeBounds !== void 0 ? timeBounds : d3.extent(data, function (d) {
+    return d.timestamp;
+  });
+  var x = d3.scaleUtc(xDomain, [marginLeft, width - marginRight]);
+
+  // Calculate sample count range for opacity scaling
+  var sampleCounts = data.map(function (d) {
+    var _d$sampleCount;
+    return Number((_d$sampleCount = d.sampleCount) !== null && _d$sampleCount !== void 0 ? _d$sampleCount : 1);
+  });
+  var maxSampleCount = Math.max.apply(Math, _toConsumableArray(sampleCounts));
+  var minSampleCount = Math.min.apply(Math, _toConsumableArray(sampleCounts));
+
+  // Create opacity scale: more samples = higher opacity
+  var opacityScale = d3.scaleLinear().domain([minSampleCount, maxSampleCount]).range([0.5, 1.0]).clamp(true);
+  var zoomWindow = useMemo(function () {
+    if (selectionBounds === undefined) {
+      return undefined;
+    }
+    return [x(selectionBounds[0]), x(selectionBounds[1])];
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectionBounds]);
+  var setSelectionBoundsWithScaling = function setSelectionBoundsWithScaling(_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      startPx = _ref4[0],
+      endPx = _ref4[1];
+    setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      height: height,
+      width: width
+    },
+    className: "relative",
+    onMouseMove: function onMouseMove(e) {
+      // Only track hover position when no drag is active anywhere
+      if (isAnyDragActive) return;
+      var _d3$pointer5 = d3.pointer(e),
+        _d3$pointer6 = _slicedToArray(_d3$pointer5, 2),
+        xPos = _d3$pointer6[0],
+        yPos = _d3$pointer6[1];
+      if (xPos >= marginLeft && xPos <= width - marginRight && yPos >= marginTop && yPos <= height - marginBottom) {
+        setMousePosition([xPos, yPos]);
+      } else {
+        setMousePosition(undefined);
+      }
+    },
+    onMouseLeave: function onMouseLeave() {
+      // Only clear hover position, drag is managed by parent
+      setMousePosition(undefined);
+    },
+    onMouseDown: function onMouseDown(e) {
+      // only left mouse button
+      if (e.button !== 0) {
+        return;
+      }
+
+      // X/Y coordinate array relative to element
+      var rel = d3.pointer(e);
+      var xCoordinate = rel[0];
+      if (xCoordinate >= 0 && onDragStart !== undefined) {
+        onDragStart(xCoordinate);
+      }
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        height: height,
+        width: 2,
+        left: (_mousePosition$ = mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition[0]) !== null && _mousePosition$ !== void 0 ? _mousePosition$ : -1
+      },
+      className: cx('bg-gray-700/75 dark:bg-gray-200/75 absolute top-0', {
+        hidden: mousePosition === undefined || isAnyDragActive || isHoveringDragHandle
+      })
+    }), /*#__PURE__*/_jsx(DraggingWindow, {
+      dragStart: dragState === null || dragState === void 0 ? void 0 : dragState.startX,
+      currentX: dragState === null || dragState === void 0 ? void 0 : dragState.currentX
+    }), /*#__PURE__*/_jsx(ZoomWindow, {
+      zoomWindow: zoomWindow,
+      width: width,
+      onZoomWindowChange: setSelectionBoundsWithScaling,
+      setIsHoveringDragHandle: setIsHoveringDragHandle
+    }), /*#__PURE__*/_jsxs("svg", {
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: marginLeft,
+        y: 0,
+        width: width - marginLeft - marginRight,
+        height: height,
+        fill: fill,
+        fillOpacity: 0.1
+      }), /*#__PURE__*/_jsx("g", {
+        children: data.map(function (d, i) {
+          var _d$sampleCount2;
+          var xPosition = x(d.timestamp);
+          // Use stepMs for bucket width
+          var rectWidth = x(d.timestamp + stepMs) - xPosition;
+
+          // Calculate opacity based on sample count
+          var opacity = opacityScale(Number((_d$sampleCount2 = d.sampleCount) !== null && _d$sampleCount2 !== void 0 ? _d$sampleCount2 : 1));
+          return /*#__PURE__*/_jsx("rect", {
+            x: xPosition,
+            y: 0,
+            width: rectWidth,
+            height: height,
+            fill: fill,
+            fillOpacity: opacity
+          }, i);
+        })
+      })]
+    })]
+  });
+};

package/dist/ProfileFlameChart/SamplesStrips/SamplesStrips.stories.js

@@ -1,4 +1,15 @@
-import { jsx as _jsx } 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; }
 // 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,47 +22,70 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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.
+
 // eslint-disable-next-line import/named
 import { useArgs } from '@storybook/preview-api';
+// eslint-disable-next-line import/named
+
 import { SamplesStrip } from './index';
+import { jsx as _jsx } from "react/jsx-runtime";
 function seededRandom(seed) {
-    return () => {
-        seed = (seed * 16807) % 2147483647;
-        return (seed - 1) / 2147483646;
-    };
+  return function () {
+    seed = seed * 16807 % 2147483647;
+    return (seed - 1) / 2147483646;
+  };
 }
-const mockData = [[], [], []];
-const random = seededRandom(42);
-for (let i = 0; i < 200; i++) {
-    for (let j = 0; j < mockData.length; j++) {
-        mockData[j].push({
-            timestamp: 1731326092000 + i * 100,
-            value: Math.floor(random() * 100),
-        });
-    }
+var mockData = [[], [], []];
+var random = seededRandom(42);
+for (var i = 0; i < 200; i++) {
+  for (var j = 0; j < mockData.length; j++) {
+    mockData[j].push({
+      timestamp: 1731326092000 + i * 100,
+      value: Math.floor(random() * 100)
+    });
+  }
 }
-const meta = {
-    title: 'components/SamplesStrip',
-    component: SamplesStrip,
+var meta = {
+  title: 'components/SamplesStrip',
+  component: SamplesStrip
 };
 export default meta;
-export const ThreeCPUStrips = {
-    args: {
-        cpus: Array.from(mockData, (_, i) => ({ labels: [{ name: 'cpuid', value: i + 1 }] })),
-        data: mockData,
-        selectedTimeframe: { index: 1, bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp] },
-        onSelectedTimeframe: (index, bounds) => {
-            console.log('onSelectedTimeframe', index, bounds);
-        },
-        bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
-        stepMs: 100,
+export var ThreeCPUStrips = {
+  args: {
+    cpus: Array.from(mockData, function (_, i) {
+      return {
+        labels: [{
+          name: 'cpuid',
+          value: i + 1
+        }]
+      };
+    }),
+    data: mockData,
+    selectedTimeframe: {
+      index: 1,
+      bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp]
     },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onSelectedTimeframe = (index, bounds) => {
-            args.onSelectedTimeframe(index, bounds);
-            setArgs({ ...args, selectedTimeframe: { index, bounds } });
-        };
-        return _jsx(SamplesStrip, { ...args, onSelectedTimeframe: onSelectedTimeframe });
+    onSelectedTimeframe: function onSelectedTimeframe(index, bounds) {
+      console.log('onSelectedTimeframe', index, bounds);
     },
-};
+    bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
+    stepMs: 100
+  },
+  render: function Component(args) {
+    var _useArgs = useArgs(),
+      _useArgs2 = _slicedToArray(_useArgs, 2),
+      setArgs = _useArgs2[1];
+    var onSelectedTimeframe = function onSelectedTimeframe(index, bounds) {
+      args.onSelectedTimeframe(index, bounds);
+      setArgs(_objectSpread(_objectSpread({}, args), {}, {
+        selectedTimeframe: {
+          index: index,
+          bounds: bounds
+        }
+      }));
+    };
+    return /*#__PURE__*/_jsx(SamplesStrip, _objectSpread(_objectSpread({}, args), {}, {
+      onSelectedTimeframe: onSelectedTimeframe
+    }));
+  }
+};

package/dist/ProfileFlameChart/SamplesStrips/index.d.ts

@@ -6,10 +6,10 @@ interface Props {
     loading?: boolean;
     cpus: LabelSet[];
     data: DataPoint[][];
-    selectedTimeframe: {
+    selectedTimeframe?: {
         labels: LabelSet;
         bounds: NumberDuo;
-    } | null;
+    };
     onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
     width?: number;
     bounds: NumberDuo;

package/dist/ProfileFlameChart/SamplesStrips/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,EAAE;QACjB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,GAAG,IAAI,CAAC;IACT,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAyKd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAyKd,CAAC"}