@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileFlameChart/SamplesStrips/index.js

@@ -1,4 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 _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 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,6 +27,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { useMemo, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
@@ -21,147 +38,641 @@ import { Button, useParcaContext } from '@parca/components';
 import { TimelineGuide } from '../../TimelineGuide';
 import { SamplesGraph } from './SamplesGraph';
 import { createLabelSetComparator, labelSetToString } from './labelSetUtils';
-const STRIP_HEIGHT = 24;
-const LABEL_ROW_HEIGHT = 16; // text-xs label row above each strip
-const GAP = 4; // gap-1 between flex children
-const MAX_VISIBLE_STRIPS = 20;
-const LOADING_STRIP_COUNT = 8;
-const generateMockStripData = (bounds) => {
-    const stepMs = Math.max(Math.floor((bounds[1] - bounds[0]) / 240), 100);
-    const cpus = Array.from({ length: LOADING_STRIP_COUNT }, (_, i) => ({
-        labels: [{ name: 'cpu', value: String(i) }],
-    }));
-    let seed = 42;
-    const data = cpus.map(() => {
-        const points = [];
-        for (let ts = bounds[0]; ts < bounds[1]; ts += stepMs) {
-            seed = (seed * 16807 + 11) % 2147483647;
-            const value = (seed % 80) + 10;
-            seed = (seed * 16807 + 11) % 2147483647;
-            const sampleCount = (seed % 50) + 1;
-            points.push({ timestamp: ts, value, sampleCount });
-        }
-        return points;
-    });
-    return { cpus, data, stepMs };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var STRIP_HEIGHT = 24;
+var LABEL_ROW_HEIGHT = 16; // text-xs label row above each strip
+var GAP = 4; // gap-1 between flex children
+var MAX_VISIBLE_STRIPS = 20;
+var LOADING_STRIP_COUNT = 8;
+var generateMockStripData = function generateMockStripData(bounds) {
+  var stepMs = Math.max(Math.floor((bounds[1] - bounds[0]) / 240), 100);
+  var cpus = Array.from({
+    length: LOADING_STRIP_COUNT
+  }, function (_, i) {
+    return {
+      labels: [{
+        name: 'cpu',
+        value: String(i)
+      }]
+    };
+  });
+  var seed = 42;
+  var data = cpus.map(function () {
+    var points = [];
+    for (var ts = bounds[0]; ts < bounds[1]; ts += stepMs) {
+      seed = (seed * 16807 + 11) % 2147483647;
+      var value = seed % 80 + 10;
+      seed = (seed * 16807 + 11) % 2147483647;
+      var sampleCount = seed % 50 + 1;
+      points.push({
+        timestamp: ts,
+        value: value,
+        sampleCount: sampleCount
+      });
+    }
+    return points;
+  });
+  return {
+    cpus: cpus,
+    data: data,
+    stepMs: stepMs
+  };
 };
-const getTimelineGuideHeight = (cpusCount, collapsedCount) => {
-    const expandedCount = cpusCount - collapsedCount;
-    // Each expanded strip: label row + graph height
-    // Each collapsed strip: min-h-5 (20px)
-    // Gaps between strips (gap-1 = 4px)
-    const expandedTotal = expandedCount * (LABEL_ROW_HEIGHT + STRIP_HEIGHT);
-    const collapsedTotal = collapsedCount * 20; // min-h-5
-    const gaps = cpusCount * GAP + 20; // timeline header
-    return expandedTotal + collapsedTotal + gaps;
+var getTimelineGuideHeight = function getTimelineGuideHeight(cpusCount, collapsedCount) {
+  var expandedCount = cpusCount - collapsedCount;
+  // Each expanded strip: label row + graph height
+  // Each collapsed strip: min-h-5 (20px)
+  // Gaps between strips (gap-1 = 4px)
+  var expandedTotal = expandedCount * (LABEL_ROW_HEIGHT + STRIP_HEIGHT);
+  var collapsedTotal = collapsedCount * 20; // min-h-5
+  var gaps = cpusCount * GAP + 20; // timeline header
+  return expandedTotal + collapsedTotal + gaps;
 };
-const stickyPx = 0;
-const SamplesGraphContainer = ({ isSelected, isCollapsed, label: labelStr, width, onToggleCollapse, data, selectionBounds, setSelectionBounds, color, stepMs, onDragStart, dragState, stripIndex, isAnyDragActive, timeBounds, loading, }) => {
-    const { isIntersecting, ref } = useIntersectionObserver({
-        rootMargin: `${stickyPx}px 0px 0px 0px`,
+var stickyPx = 0;
+var SamplesGraphContainer = function SamplesGraphContainer(t0) {
+  var $ = _c(36);
+  var isSelected = t0.isSelected,
+    isCollapsed = t0.isCollapsed,
+    labelStr = t0.label,
+    width = t0.width,
+    onToggleCollapse = t0.onToggleCollapse,
+    data = t0.data,
+    selectionBounds = t0.selectionBounds,
+    setSelectionBounds = t0.setSelectionBounds,
+    color = t0.color,
+    stepMs = t0.stepMs,
+    _onDragStart = t0.onDragStart,
+    dragState = t0.dragState,
+    stripIndex = t0.stripIndex,
+    isAnyDragActive = t0.isAnyDragActive,
+    timeBounds = t0.timeBounds,
+    loading = t0.loading;
+  var t1;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t1 = {
+      rootMargin: "".concat(stickyPx, "px 0px 0px 0px")
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  var _useIntersectionObser = useIntersectionObserver(t1),
+    isIntersecting = _useIntersectionObser.isIntersecting,
+    ref = _useIntersectionObser.ref;
+  var isSticky = isSelected && isIntersecting;
+  var t2 = !isSelected;
+  var t3;
+  if ($[1] !== isSelected || $[2] !== isSticky || $[3] !== t2) {
+    t3 = cx("min-h-5", {
+      relative: t2,
+      "sticky z-30 bg-white dark:bg-black bg-opacity-75": isSelected,
+      "!bg-opacity-100": isSticky
     });
-    const isSticky = useMemo(() => {
-        return isSelected && isIntersecting;
-    }, [isSelected, isIntersecting]);
-    return (_jsxs("div", { className: cx('min-h-5', {
-            relative: !isSelected,
-            'sticky z-30 bg-white dark:bg-black bg-opacity-75': isSelected,
-            '!bg-opacity-100': isSticky,
-        }), style: { width: width ?? 1468, top: isSelected ? stickyPx : undefined }, ref: ref, children: [_jsx("div", { className: "text-xs flex gap-[2px] items-center px-1 cursor-pointer text-gray-600 dark:text-gray-400", onClick: loading === true ? undefined : onToggleCollapse, children: loading === true ? (_jsx("div", { className: "h-3 w-24 rounded bg-gray-200 dark:bg-gray-700 mb-1" })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow', className: "shrink-0" }), labelStr] })) }), !isCollapsed ? (_jsx(SamplesGraph, { data: data, height: STRIP_HEIGHT, width: width ?? 1468, fill: color(labelStr), selectionBounds: selectionBounds, setSelectionBounds: setSelectionBounds, stepMs: stepMs, onDragStart: (startX) => onDragStart(stripIndex, startX), dragState: dragState?.stripIndex === stripIndex ? dragState : undefined, isAnyDragActive: isAnyDragActive, timeBounds: timeBounds })) : null] }, labelStr));
+    $[1] = isSelected;
+    $[2] = isSticky;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  var t4 = width !== null && width !== void 0 ? width : 1468;
+  var t5 = isSelected ? stickyPx : undefined;
+  var t6;
+  if ($[5] !== t4 || $[6] !== t5) {
+    t6 = {
+      width: t4,
+      top: t5
+    };
+    $[5] = t4;
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  var t7 = loading === true ? undefined : onToggleCollapse;
+  var t8;
+  if ($[8] !== isCollapsed || $[9] !== labelStr || $[10] !== loading) {
+    t8 = loading === true ? /*#__PURE__*/_jsx("div", {
+      className: "h-3 w-24 rounded bg-gray-200 dark:bg-gray-700 mb-1"
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: isCollapsed ? "bxs:right-arrow" : "bxs:down-arrow",
+        className: "shrink-0"
+      }), labelStr]
+    });
+    $[8] = isCollapsed;
+    $[9] = labelStr;
+    $[10] = loading;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  var t9;
+  if ($[12] !== t7 || $[13] !== t8) {
+    t9 = /*#__PURE__*/_jsx("div", {
+      className: "text-xs flex gap-[2px] items-center px-1 cursor-pointer text-gray-600 dark:text-gray-400",
+      onClick: t7,
+      children: t8
+    });
+    $[12] = t7;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  var t10;
+  if ($[15] !== color || $[16] !== data || $[17] !== dragState || $[18] !== isAnyDragActive || $[19] !== isCollapsed || $[20] !== labelStr || $[21] !== _onDragStart || $[22] !== selectionBounds || $[23] !== setSelectionBounds || $[24] !== stepMs || $[25] !== stripIndex || $[26] !== timeBounds || $[27] !== width) {
+    t10 = !isCollapsed ? /*#__PURE__*/_jsx(SamplesGraph, {
+      data: data,
+      height: STRIP_HEIGHT,
+      width: width !== null && width !== void 0 ? width : 1468,
+      fill: color(labelStr),
+      selectionBounds: selectionBounds,
+      setSelectionBounds: setSelectionBounds,
+      stepMs: stepMs,
+      onDragStart: function onDragStart(startX) {
+        return _onDragStart(stripIndex, startX);
+      },
+      dragState: (dragState === null || dragState === void 0 ? void 0 : dragState.stripIndex) === stripIndex ? dragState : undefined,
+      isAnyDragActive: isAnyDragActive,
+      timeBounds: timeBounds
+    }) : null;
+    $[15] = color;
+    $[16] = data;
+    $[17] = dragState;
+    $[18] = isAnyDragActive;
+    $[19] = isCollapsed;
+    $[20] = labelStr;
+    $[21] = _onDragStart;
+    $[22] = selectionBounds;
+    $[23] = setSelectionBounds;
+    $[24] = stepMs;
+    $[25] = stripIndex;
+    $[26] = timeBounds;
+    $[27] = width;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  var t11;
+  if ($[29] !== labelStr || $[30] !== ref || $[31] !== t10 || $[32] !== t3 || $[33] !== t6 || $[34] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: t3,
+      style: t6,
+      ref: ref,
+      children: [t9, t10]
+    }, labelStr);
+    $[29] = labelStr;
+    $[30] = ref;
+    $[31] = t10;
+    $[32] = t3;
+    $[33] = t6;
+    $[34] = t9;
+    $[35] = t11;
+  } else {
+    t11 = $[35];
+  }
+  return t11;
 };
-export const SamplesStrip = ({ loading, cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }) => {
-    const { isDarkMode } = useParcaContext();
-    const effectiveLoading = loading === true;
-    // When loading, use mock data to render a pixel-perfect skeleton
-    const mockData = useMemo(() => (effectiveLoading && bounds[0] !== bounds[1] ? generateMockStripData(bounds) : null), [effectiveLoading, bounds]);
-    const effectiveCpus = mockData?.cpus ?? cpus;
-    const effectiveData = mockData?.data ?? data;
-    const effectiveStepMs = mockData?.stepMs ?? stepMs;
-    const [collapsedLabels, setCollapsedLabels] = useState(new Set());
-    const [showAll, setShowAll] = useState(false);
-    const [dragState, setDragState] = useState(undefined);
-    const containerRef = useRef(null);
-    const isDragging = dragState !== undefined;
-    const { compare, keyOrder } = useMemo(() => createLabelSetComparator(effectiveCpus), [effectiveCpus]);
-    const sortedItems = useMemo(() => {
-        const items = effectiveCpus.map((cpu, i) => ({
-            cpu,
-            data: effectiveData[i],
-            label: labelSetToString(cpu, keyOrder),
-        }));
-        return items.sort((a, b) => compare(a.cpu, b.cpu));
-    }, [effectiveCpus, effectiveData, compare, keyOrder]);
-    const hasMore = useMemo(() => sortedItems.length > MAX_VISIBLE_STRIPS, [sortedItems]);
-    const visibleItems = useMemo(() => (showAll || !hasMore ? sortedItems : sortedItems.slice(0, MAX_VISIBLE_STRIPS)), [sortedItems, showAll, hasMore]);
-    // Deterministic color: hash the label string so the same label always gets the same color
-    // regardless of render order. When loading, use muted gray.
-    const color = useMemo(() => {
-        if (effectiveLoading) {
-            return (_label) => (isDarkMode ? '#374151' : '#d1d5db');
-        }
-        const palette = d3.schemeObservable10;
-        const hashStr = (s) => {
-            let h = 0;
-            for (let i = 0; i < s.length; i++) {
-                h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
-            }
-            return Math.abs(h);
+export var SamplesStrip = function SamplesStrip(t0) {
+  var _mockData$cpus, _mockData$data, _mockData$stepMs;
+  var $ = _c(95);
+  var loading = t0.loading,
+    cpus = t0.cpus,
+    data = t0.data,
+    selectedTimeframe = t0.selectedTimeframe,
+    onSelectedTimeframe = t0.onSelectedTimeframe,
+    width = t0.width,
+    bounds = t0.bounds,
+    stepMs = t0.stepMs;
+  var _useParcaContext = useParcaContext(),
+    isDarkMode = _useParcaContext.isDarkMode;
+  var effectiveLoading = loading === true;
+  var t1;
+  if ($[0] !== bounds || $[1] !== effectiveLoading) {
+    t1 = effectiveLoading && bounds[0] !== bounds[1] ? generateMockStripData(bounds) : null;
+    $[0] = bounds;
+    $[1] = effectiveLoading;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  var mockData = t1;
+  var effectiveCpus = (_mockData$cpus = mockData === null || mockData === void 0 ? void 0 : mockData.cpus) !== null && _mockData$cpus !== void 0 ? _mockData$cpus : cpus;
+  var effectiveData = (_mockData$data = mockData === null || mockData === void 0 ? void 0 : mockData.data) !== null && _mockData$data !== void 0 ? _mockData$data : data;
+  var effectiveStepMs = (_mockData$stepMs = mockData === null || mockData === void 0 ? void 0 : mockData.stepMs) !== null && _mockData$stepMs !== void 0 ? _mockData$stepMs : stepMs;
+  var t2;
+  if ($[3] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = new Set();
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  var _useState = useState(t2),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsedLabels = _useState2[0],
+    setCollapsedLabels = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAll = _useState4[0],
+    setShowAll = _useState4[1];
+  var _useState5 = useState(undefined),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragState = _useState6[0],
+    setDragState = _useState6[1];
+  var containerRef = useRef(null);
+  var isDragging = dragState !== undefined;
+  var t3;
+  if ($[4] !== effectiveCpus) {
+    t3 = createLabelSetComparator(effectiveCpus);
+    $[4] = effectiveCpus;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  var _t = t3,
+    compare = _t.compare,
+    keyOrder = _t.keyOrder;
+  var t4;
+  if ($[6] !== compare || $[7] !== effectiveCpus || $[8] !== effectiveData || $[9] !== keyOrder) {
+    var _t2;
+    if ($[11] !== effectiveData || $[12] !== keyOrder) {
+      _t2 = function _t2(cpu, i) {
+        return {
+          cpu: cpu,
+          data: effectiveData[i],
+          label: labelSetToString(cpu, keyOrder)
         };
-        return (label) => palette[hashStr(label) % palette.length];
-    }, [effectiveLoading, isDarkMode]);
-    const handleDragStart = (stripIndex, startX) => {
-        setDragState({ stripIndex, startX, currentX: startX });
+      };
+      $[11] = effectiveData;
+      $[12] = keyOrder;
+      $[13] = _t2;
+    } else {
+      _t2 = $[13];
+    }
+    var items = effectiveCpus.map(_t2);
+    var _t3;
+    if ($[14] !== compare) {
+      _t3 = function _t3(a, b) {
+        return compare(a.cpu, b.cpu);
+      };
+      $[14] = compare;
+      $[15] = _t3;
+    } else {
+      _t3 = $[15];
+    }
+    t4 = items.sort(_t3);
+    $[6] = compare;
+    $[7] = effectiveCpus;
+    $[8] = effectiveData;
+    $[9] = keyOrder;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  var sortedItems = t4;
+  var hasMore = sortedItems.length > MAX_VISIBLE_STRIPS;
+  var t5;
+  if ($[16] !== hasMore || $[17] !== showAll || $[18] !== sortedItems) {
+    t5 = showAll || !hasMore ? sortedItems : sortedItems.slice(0, MAX_VISIBLE_STRIPS);
+    $[16] = hasMore;
+    $[17] = showAll;
+    $[18] = sortedItems;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  var visibleItems = t5;
+  var t6;
+  bb0: {
+    if (effectiveLoading) {
+      var _t4;
+      if ($[20] !== isDarkMode) {
+        _t4 = function _t4(_label) {
+          return isDarkMode ? "#374151" : "#d1d5db";
+        };
+        $[20] = isDarkMode;
+        $[21] = _t4;
+      } else {
+        _t4 = $[21];
+      }
+      t6 = _t4;
+      break bb0;
+    }
+    var palette = d3.schemeObservable10;
+    var hashStr = _temp;
+    var _t5;
+    if ($[22] === Symbol["for"]("react.memo_cache_sentinel")) {
+      _t5 = function _t5(label) {
+        return palette[hashStr(label) % palette.length];
+      };
+      $[22] = _t5;
+    } else {
+      _t5 = $[22];
+    }
+    t6 = _t5;
+  }
+  var color = t6;
+  var t7;
+  if ($[23] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t7 = function t7(stripIndex, startX) {
+      setDragState({
+        stripIndex: stripIndex,
+        startX: startX,
+        currentX: startX
+      });
     };
-    const handleMouseMove = (e) => {
-        if (dragState === undefined || containerRef.current === null)
-            return;
-        const rect = containerRef.current.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        // Clamp to container bounds
-        const clampedX = Math.max(0, Math.min(x, width ?? rect.width));
-        setDragState({ ...dragState, currentX: clampedX });
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  var handleDragStart = t7;
+  var t8;
+  if ($[24] !== dragState || $[25] !== width) {
+    t8 = function t8(e) {
+      if (dragState === undefined || containerRef.current === null) {
+        return;
+      }
+      var rect = containerRef.current.getBoundingClientRect();
+      var x = e.clientX - rect.left;
+      var clampedX = Math.max(0, Math.min(x, width !== null && width !== void 0 ? width : rect.width));
+      setDragState(_objectSpread(_objectSpread({}, dragState), {}, {
+        currentX: clampedX
+      }));
     };
-    const handleMouseUp = (e) => {
-        if (dragState === undefined || containerRef.current === null)
-            return;
-        const rect = containerRef.current.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const clampedX = Math.max(0, Math.min(x, width ?? rect.width));
-        const { stripIndex, startX } = dragState;
-        if (startX !== clampedX) {
-            const start = Math.min(startX, clampedX);
-            const end = Math.max(startX, clampedX);
-            // Convert pixel positions to timestamps
-            const innerWidth = width ?? rect.width;
-            const startTs = bounds[0] + (start / innerWidth) * (bounds[1] - bounds[0]);
-            const endTs = bounds[0] + (end / innerWidth) * (bounds[1] - bounds[0]);
-            onSelectedTimeframe(visibleItems[stripIndex].cpu, [startTs, endTs]);
-        }
-        setDragState(undefined);
+    $[24] = dragState;
+    $[25] = width;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  var handleMouseMove = t8;
+  var t9;
+  if ($[27] !== bounds || $[28] !== dragState || $[29] !== onSelectedTimeframe || $[30] !== visibleItems || $[31] !== width) {
+    t9 = function t9(e_0) {
+      if (dragState === undefined || containerRef.current === null) {
+        return;
+      }
+      var rect_0 = containerRef.current.getBoundingClientRect();
+      var x_0 = e_0.clientX - rect_0.left;
+      var clampedX_0 = Math.max(0, Math.min(x_0, width !== null && width !== void 0 ? width : rect_0.width));
+      var stripIndex_0 = dragState.stripIndex,
+        startX_0 = dragState.startX;
+      if (startX_0 !== clampedX_0) {
+        var start = Math.min(startX_0, clampedX_0);
+        var end = Math.max(startX_0, clampedX_0);
+        var innerWidth = width !== null && width !== void 0 ? width : rect_0.width;
+        var startTs = bounds[0] + start / innerWidth * (bounds[1] - bounds[0]);
+        var endTs = bounds[0] + end / innerWidth * (bounds[1] - bounds[0]);
+        onSelectedTimeframe(visibleItems[stripIndex_0].cpu, [startTs, endTs]);
+      }
+      setDragState(undefined);
     };
-    const handleMouseLeave = () => {
-        setDragState(undefined);
+    $[27] = bounds;
+    $[28] = dragState;
+    $[29] = onSelectedTimeframe;
+    $[30] = visibleItems;
+    $[31] = width;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  var handleMouseUp = t9;
+  var t10;
+  if ($[33] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t10 = function t10() {
+      setDragState(undefined);
     };
-    if (!effectiveLoading && effectiveData.length === 0) {
-        return (_jsx("span", { className: "flex justify-center my-10", children: "There is no data matching your filter criteria, please try changing the filter." }));
+    $[33] = t10;
+  } else {
+    t10 = $[33];
+  }
+  var handleMouseLeave = t10;
+  if (!effectiveLoading && effectiveData.length === 0) {
+    var _t6;
+    if ($[34] === Symbol["for"]("react.memo_cache_sentinel")) {
+      _t6 = /*#__PURE__*/_jsx("span", {
+        className: "flex justify-center my-10",
+        children: "There is no data matching your filter criteria, please try changing the filter."
+      });
+      $[34] = _t6;
+    } else {
+      _t6 = $[34];
     }
-    return (_jsxs("div", { ref: containerRef, className: cx('flex flex-col gap-1 relative my-0', {
-            'cursor-ew-resize': isDragging,
-            'animate-pulse pointer-events-none': effectiveLoading,
-        }), style: { width: width ?? '100%' }, onMouseMove: effectiveLoading ? undefined : handleMouseMove, onMouseUp: effectiveLoading ? undefined : handleMouseUp, onMouseLeave: effectiveLoading ? undefined : handleMouseLeave, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(visibleItems.length, [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length), margin: 1, elevateGuideLines: true }), visibleItems.map((item, i) => {
-                const isCollapsed = collapsedLabels.has(item.label);
-                const isSelected = isEqual(item.cpu, selectedTimeframe?.labels);
-                return (_jsx(SamplesGraphContainer, { isSelected: isSelected, isCollapsed: isCollapsed, label: item.label, width: width, data: item.data, onToggleCollapse: () => {
-                        const newCollapsedLabels = new Set(collapsedLabels);
-                        if (collapsedLabels.has(item.label)) {
-                            newCollapsedLabels.delete(item.label);
-                        }
-                        else {
-                            newCollapsedLabels.add(item.label);
-                        }
-                        setCollapsedLabels(newCollapsedLabels);
-                    }, selectionBounds: isSelected ? selectedTimeframe?.bounds : undefined, setSelectionBounds: newBounds => {
-                        onSelectedTimeframe(item.cpu, newBounds);
-                    }, color: color, stepMs: effectiveStepMs, onDragStart: handleDragStart, dragState: dragState, stripIndex: i, isAnyDragActive: isDragging, timeBounds: bounds, loading: effectiveLoading }, item.label));
-            }), hasMore && !showAll && (_jsxs(Button, { variant: "secondary", onClick: () => setShowAll(true), className: "w-fit mx-auto mt-2", children: ["Show all ", sortedItems.length, " rows"] }))] }));
+    return _t6;
+  }
+  var t11;
+  if ($[35] !== effectiveLoading || $[36] !== isDragging) {
+    t11 = cx("flex flex-col gap-1 relative my-0", {
+      "cursor-ew-resize": isDragging,
+      "animate-pulse pointer-events-none": effectiveLoading
+    });
+    $[35] = effectiveLoading;
+    $[36] = isDragging;
+    $[37] = t11;
+  } else {
+    t11 = $[37];
+  }
+  var t12 = width !== null && width !== void 0 ? width : "100%";
+  var t13;
+  if ($[38] !== t12) {
+    t13 = {
+      width: t12
+    };
+    $[38] = t12;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+  var t14 = effectiveLoading ? undefined : handleMouseMove;
+  var t15 = effectiveLoading ? undefined : handleMouseUp;
+  var t16 = effectiveLoading ? undefined : handleMouseLeave;
+  var t17;
+  if ($[40] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t17 = BigInt(0);
+    $[40] = t17;
+  } else {
+    t17 = $[40];
+  }
+  var t18 = bounds[1] - bounds[0];
+  var t19;
+  if ($[41] !== t18) {
+    t19 = BigInt(t18);
+    $[41] = t18;
+    $[42] = t19;
+  } else {
+    t19 = $[42];
+  }
+  var t20;
+  if ($[43] !== t19) {
+    t20 = [t17, t19];
+    $[43] = t19;
+    $[44] = t20;
+  } else {
+    t20 = $[44];
+  }
+  var t21 = width !== null && width !== void 0 ? width : 1468;
+  var t22 = visibleItems.length;
+  var t23;
+  if ($[45] !== collapsedLabels) {
+    t23 = _toConsumableArray(collapsedLabels);
+    $[45] = collapsedLabels;
+    $[46] = t23;
+  } else {
+    t23 = $[46];
+  }
+  var t24;
+  if ($[47] !== t23 || $[48] !== visibleItems) {
+    t24 = t23.filter(function (l) {
+      return visibleItems.some(function (item) {
+        return item.label === l;
+      });
+    });
+    $[47] = t23;
+    $[48] = visibleItems;
+    $[49] = t24;
+  } else {
+    t24 = $[49];
+  }
+  var t25;
+  if ($[50] !== t24.length || $[51] !== visibleItems.length) {
+    t25 = getTimelineGuideHeight(t22, t24.length);
+    $[50] = t24.length;
+    $[51] = visibleItems.length;
+    $[52] = t25;
+  } else {
+    t25 = $[52];
+  }
+  var t26;
+  if ($[53] !== t20 || $[54] !== t21 || $[55] !== t25) {
+    t26 = /*#__PURE__*/_jsx(TimelineGuide, {
+      bounds: t20,
+      width: t21,
+      height: t25,
+      margin: 1,
+      elevateGuideLines: true
+    });
+    $[53] = t20;
+    $[54] = t21;
+    $[55] = t25;
+    $[56] = t26;
+  } else {
+    t26 = $[56];
+  }
+  var t27;
+  if ($[57] !== bounds || $[58] !== collapsedLabels || $[59] !== color || $[60] !== dragState || $[61] !== effectiveLoading || $[62] !== effectiveStepMs || $[63] !== isDragging || $[64] !== onSelectedTimeframe || $[65] !== (selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.bounds) || $[66] !== (selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.labels) || $[67] !== visibleItems || $[68] !== width) {
+    var _t7;
+    if ($[70] !== bounds || $[71] !== collapsedLabels || $[72] !== color || $[73] !== dragState || $[74] !== effectiveLoading || $[75] !== effectiveStepMs || $[76] !== isDragging || $[77] !== onSelectedTimeframe || $[78] !== (selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.bounds) || $[79] !== (selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.labels) || $[80] !== width) {
+      _t7 = function _t7(item_0, i_1) {
+        var isCollapsed = collapsedLabels.has(item_0.label);
+        var isSelected = isEqual(item_0.cpu, selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.labels);
+        return /*#__PURE__*/_jsx(SamplesGraphContainer, {
+          isSelected: isSelected,
+          isCollapsed: isCollapsed,
+          label: item_0.label,
+          width: width,
+          data: item_0.data,
+          onToggleCollapse: function onToggleCollapse() {
+            var newCollapsedLabels = new Set(collapsedLabels);
+            if (collapsedLabels.has(item_0.label)) {
+              newCollapsedLabels["delete"](item_0.label);
+            } else {
+              newCollapsedLabels.add(item_0.label);
+            }
+            setCollapsedLabels(newCollapsedLabels);
+          },
+          selectionBounds: isSelected ? selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.bounds : undefined,
+          setSelectionBounds: function setSelectionBounds(newBounds) {
+            onSelectedTimeframe(item_0.cpu, newBounds);
+          },
+          color: color,
+          stepMs: effectiveStepMs,
+          onDragStart: handleDragStart,
+          dragState: dragState,
+          stripIndex: i_1,
+          isAnyDragActive: isDragging,
+          timeBounds: bounds,
+          loading: effectiveLoading
+        }, item_0.label);
+      };
+      $[70] = bounds;
+      $[71] = collapsedLabels;
+      $[72] = color;
+      $[73] = dragState;
+      $[74] = effectiveLoading;
+      $[75] = effectiveStepMs;
+      $[76] = isDragging;
+      $[77] = onSelectedTimeframe;
+      $[78] = selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.bounds;
+      $[79] = selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.labels;
+      $[80] = width;
+      $[81] = _t7;
+    } else {
+      _t7 = $[81];
+    }
+    t27 = visibleItems.map(_t7);
+    $[57] = bounds;
+    $[58] = collapsedLabels;
+    $[59] = color;
+    $[60] = dragState;
+    $[61] = effectiveLoading;
+    $[62] = effectiveStepMs;
+    $[63] = isDragging;
+    $[64] = onSelectedTimeframe;
+    $[65] = selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.bounds;
+    $[66] = selectedTimeframe === null || selectedTimeframe === void 0 ? void 0 : selectedTimeframe.labels;
+    $[67] = visibleItems;
+    $[68] = width;
+    $[69] = t27;
+  } else {
+    t27 = $[69];
+  }
+  var t28;
+  if ($[82] !== hasMore || $[83] !== showAll || $[84] !== sortedItems.length) {
+    t28 = hasMore && !showAll && /*#__PURE__*/_jsxs(Button, {
+      variant: "secondary",
+      onClick: function onClick() {
+        return setShowAll(true);
+      },
+      className: "w-fit mx-auto mt-2",
+      children: ["Show all ", sortedItems.length, " rows"]
+    });
+    $[82] = hasMore;
+    $[83] = showAll;
+    $[84] = sortedItems.length;
+    $[85] = t28;
+  } else {
+    t28 = $[85];
+  }
+  var t29;
+  if ($[86] !== t11 || $[87] !== t13 || $[88] !== t14 || $[89] !== t15 || $[90] !== t16 || $[91] !== t26 || $[92] !== t27 || $[93] !== t28) {
+    t29 = /*#__PURE__*/_jsxs("div", {
+      ref: containerRef,
+      className: t11,
+      style: t13,
+      onMouseMove: t14,
+      onMouseUp: t15,
+      onMouseLeave: t16,
+      children: [t26, t27, t28]
+    });
+    $[86] = t11;
+    $[87] = t13;
+    $[88] = t14;
+    $[89] = t15;
+    $[90] = t16;
+    $[91] = t26;
+    $[92] = t27;
+    $[93] = t28;
+    $[94] = t29;
+  } else {
+    t29 = $[94];
+  }
+  return t29;
 };
+function _temp(s) {
+  var h = 0;
+  for (var i_0 = 0; i_0 < s.length; i_0++) {
+    h = Math.imul(31, h) + s.charCodeAt(i_0) | 0;
+  }
+  return Math.abs(h);
+}