@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileView/components/DiffLegend.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, 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 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,41 +23,172 @@ 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 { Fragment, useState } from 'react';
 import { Popover, Transition } from '@headlessui/react';
 import { usePopper } from 'react-popper';
 import { selectDarkMode, useAppSelector } from '@parca/store';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor } from '@parca/utilities';
-const transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
-const DiffLegendBar = ({ onMouseEnter, onMouseLeave, }) => {
-    const isDarkMode = useAppSelector(selectDarkMode);
-    return (_jsx("div", { className: "m-2 flex items-center", children: transparencyValues.map(value => {
-            const valueAsPercentage = value / 100;
-            const absoluteValue = Math.abs(valueAsPercentage);
-            return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "h-4 w-8", style: {
-                    backgroundColor: absoluteValue === 0
-                        ? getNewSpanColor(isDarkMode)
-                        : valueAsPercentage > 0
-                            ? getIncreasedSpanColor(absoluteValue, isDarkMode)
-                            : getReducedSpanColor(absoluteValue, isDarkMode),
-                } }, valueAsPercentage));
-        }) }));
-};
-const DiffLegend = () => {
-    const [showLegendTooltip, setShowLegendTooltip] = useState(false);
-    const [popperElement, setPopperElement] = useState(null);
-    const [referenceElement, setReferenceElement] = useState(null);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
-        placement: 'auto-start',
-        strategy: 'absolute',
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
+var DiffLegendBar = function DiffLegendBar(t0) {
+  var $ = _c(6);
+  var onMouseEnter = t0.onMouseEnter,
+    onMouseLeave = t0.onMouseLeave;
+  var isDarkMode = useAppSelector(selectDarkMode);
+  var t1;
+  if ($[0] !== isDarkMode || $[1] !== onMouseEnter || $[2] !== onMouseLeave) {
+    t1 = transparencyValues.map(function (value) {
+      var valueAsPercentage = value / 100;
+      var absoluteValue = Math.abs(valueAsPercentage);
+      return /*#__PURE__*/_jsx("div", {
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        className: "h-4 w-8",
+        style: {
+          backgroundColor: absoluteValue === 0 ? getNewSpanColor(isDarkMode) : valueAsPercentage > 0 ? getIncreasedSpanColor(absoluteValue, isDarkMode) : getReducedSpanColor(absoluteValue, isDarkMode)
+        }
+      }, valueAsPercentage);
+    });
+    $[0] = isDarkMode;
+    $[1] = onMouseEnter;
+    $[2] = onMouseLeave;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  var t2;
+  if ($[4] !== t1) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      className: "m-2 flex items-center",
+      children: t1
     });
-    const handleMouseEnter = () => {
-        setShowLegendTooltip(true);
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+};
+var DiffLegend = function DiffLegend() {
+  var $ = _c(9);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLegendTooltip = _useState2[0],
+    setShowLegendTooltip = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    popperElement = _useState4[0],
+    setPopperElement = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    referenceElement = _useState6[0],
+    setReferenceElement = _useState6[1];
+  var t0;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t0 = {
+      placement: "auto-start",
+      strategy: "absolute"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  var _usePopper = usePopper(referenceElement, popperElement, t0),
+    styles = _usePopper.styles,
+    attributes = _usePopper.attributes;
+  var t1;
+  if ($[1] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t1 = function t1() {
+      setShowLegendTooltip(true);
     };
-    const handleMouseLeave = () => {
-        setShowLegendTooltip(false);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  var handleMouseEnter = t1;
+  var t2;
+  if ($[2] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = function t2() {
+      setShowLegendTooltip(false);
     };
-    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", id: "h-diff-legend", ...testId(TEST_IDS.DIFF_LEGEND), children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential flame graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  var handleMouseLeave = t2;
+  var t3;
+  if ($[3] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t3 = testId(TEST_IDS.DIFF_LEGEND);
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  var t4;
+  if ($[4] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      ref: setReferenceElement,
+      className: "flex items-center justify-center",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "Better"
+      }), /*#__PURE__*/_jsx(DiffLegendBar, {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }), /*#__PURE__*/_jsx("span", {
+        children: "Worse"
+      })]
+    });
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  var t5;
+  if ($[5] !== attributes.popper || $[6] !== showLegendTooltip || $[7] !== styles.popper) {
+    t5 = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "mt-1 mb-2 hidden md:block",
+      id: "h-diff-legend"
+    }, t3), {}, {
+      children: [t4, /*#__PURE__*/_jsx(Popover, {
+        className: "relative",
+        children: function children() {
+          return /*#__PURE__*/_jsx(Transition, {
+            show: showLegendTooltip,
+            as: Fragment,
+            enter: "transition ease-out duration-200",
+            enterFrom: "opacity-0 translate-y-1",
+            enterTo: "opacity-100 translate-y-0",
+            leave: "transition ease-in duration-150",
+            leaveFrom: "opacity-100 translate-y-0",
+            leaveTo: "opacity-0 translate-y-1",
+            children: /*#__PURE__*/_jsx(Popover.Panel, _objectSpread(_objectSpread({
+              ref: setPopperElement,
+              style: styles.popper
+            }, attributes.popper), {}, {
+              children: /*#__PURE__*/_jsx("div", {
+                className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
+                children: /*#__PURE__*/_jsxs("div", {
+                  className: "bg-gray-50 p-4 dark:bg-gray-800",
+                  children: [/*#__PURE__*/_jsx("div", {
+                    className: "flex items-center justify-center"
+                  }), /*#__PURE__*/_jsx("span", {
+                    className: "block text-sm text-gray-500 dark:text-gray-50",
+                    children: "This is a differential flame graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got."
+                  })]
+                })
+              })
+            }))
+          });
+        }
+      })]
+    }));
+    $[5] = attributes.popper;
+    $[6] = showLegendTooltip;
+    $[7] = styles.popper;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
 };
-export default DiffLegend;
+export default DiffLegend;

package/dist/ProfileView/components/GroupByLabelsDropdown/index.js

@@ -1,4 +1,10 @@
-import { jsx as _jsx, 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 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); }
+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,62 +17,200 @@ 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 { TEST_IDS, testId } from '@parca/test-utils';
 import { FIELD_LABELS } from '../../../ProfileFlameGraph/FlameGraphArrow';
 import { SelectWithRefresh } from '../../../SelectWithRefresh';
-const GroupByLabelsDropdown = ({ labels, groupBy, setGroupByLabels, metadataRefetch, metadataLoading, label = 'Group by', }) => {
-    return (_jsxs("div", { className: "flex flex-col relative", ...testId(TEST_IDS.GROUP_BY_CONTAINER), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("label", { className: "text-sm", ...testId(TEST_IDS.GROUP_BY_LABEL), children: label }) }), _jsx(SelectWithRefresh, { isMulti: true, defaultMenuIsOpen: false, defaultValue: undefined, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm rounded-md bg-white", classNamePrefix: "parca-select", onRefresh: metadataRefetch, refreshTitle: "Refresh label names", refreshTestId: "group-by-refresh-button", menuTestId: TEST_IDS.GROUP_BY_SELECT_FLYOUT, value: (groupBy ?? [])
-                    .filter(l => l.startsWith(FIELD_LABELS))
-                    .map(l => ({ value: l, label: l.slice(FIELD_LABELS.length + 1) })), onChange: newValue => {
-                    setGroupByLabels(newValue.map(option => option.value));
-                }, placeholder: "Select labels...", isLoading: metadataLoading, styles: {
-                    menu: provided => ({
-                        ...provided,
-                        marginBottom: 0,
-                        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-                        marginTop: 10,
-                        zIndex: 1000,
-                        minWidth: '320px',
-                        position: 'absolute',
-                    }),
-                    control: provided => ({
-                        ...provided,
-                        position: 'relative',
-                        boxShadow: 'none',
-                        borderBottom: '1px solid #e2e8f0',
-                        borderRight: '1px solid #e2e8f0',
-                        borderLeft: '1px solid #e2e8f0',
-                        borderTop: '1px solid #e2e8f0',
-                        minWidth: '156px',
-                        width: 'max-content',
-                        minHeight: '38px',
-                        ':hover': {
-                            borderColor: '#e2e8f0',
-                            borderBottomLeftRadius: 0,
-                            borderBottomRightRadius: 0,
-                        },
-                    }),
-                    valueContainer: provided => ({
-                        ...provided,
-                        flexWrap: 'nowrap',
-                        overflowX: 'auto',
-                        padding: '2px 8px',
-                    }),
-                    multiValue: provided => ({
-                        ...provided,
-                        flex: '0 0 auto',
-                    }),
-                    option: provided => ({
-                        ...provided,
-                        ':hover': {
-                            backgroundColor: '#4f46e5',
-                            color: '#ffffff',
-                        },
-                        ':focus': {
-                            backgroundColor: '#4f46e5',
-                            color: '#ffffff',
-                        },
-                    }),
-                } })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GroupByLabelsDropdown = function GroupByLabelsDropdown(t0) {
+  var $ = _c(20);
+  var labels = t0.labels,
+    groupBy = t0.groupBy,
+    setGroupByLabels = t0.setGroupByLabels,
+    metadataRefetch = t0.metadataRefetch,
+    metadataLoading = t0.metadataLoading,
+    t1 = t0.label;
+  var label = t1 === undefined ? "Group by" : t1;
+  var t2;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = testId(TEST_IDS.GROUP_BY_CONTAINER);
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  var t3;
+  if ($[1] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t3 = testId(TEST_IDS.GROUP_BY_LABEL);
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  var t4;
+  if ($[2] !== label) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({
+        className: "text-sm"
+      }, t3), {}, {
+        children: label
+      }))
+    });
+    $[2] = label;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  var t5;
+  if ($[4] !== labels) {
+    t5 = labels.map(_temp);
+    $[4] = labels;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  var t6;
+  if ($[6] !== groupBy) {
+    t6 = (groupBy !== null && groupBy !== void 0 ? groupBy : []).filter(_temp2).map(_temp3);
+    $[6] = groupBy;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  var t7;
+  if ($[8] !== setGroupByLabels) {
+    t7 = function t7(newValue) {
+      setGroupByLabels(newValue.map(_temp4));
+    };
+    $[8] = setGroupByLabels;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  var t8;
+  if ($[10] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t8 = {
+      menu: _temp5,
+      control: _temp6,
+      valueContainer: _temp7,
+      multiValue: _temp8,
+      option: _temp9
+    };
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  var t9;
+  if ($[11] !== metadataLoading || $[12] !== metadataRefetch || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+    t9 = /*#__PURE__*/_jsx(SelectWithRefresh, {
+      isMulti: true,
+      defaultMenuIsOpen: false,
+      defaultValue: undefined,
+      name: "labels",
+      options: t5,
+      className: "parca-select-container text-sm rounded-md bg-white",
+      classNamePrefix: "parca-select",
+      onRefresh: metadataRefetch,
+      refreshTitle: "Refresh label names",
+      refreshTestId: "group-by-refresh-button",
+      menuTestId: TEST_IDS.GROUP_BY_SELECT_FLYOUT,
+      value: t6,
+      onChange: t7,
+      placeholder: "Select labels...",
+      isLoading: metadataLoading,
+      styles: t8
+    });
+    $[11] = metadataLoading;
+    $[12] = metadataRefetch;
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  var t10;
+  if ($[17] !== t4 || $[18] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "flex flex-col relative"
+    }, t2), {}, {
+      children: [t4, t9]
+    }));
+    $[17] = t4;
+    $[18] = t9;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  return t10;
 };
 export default GroupByLabelsDropdown;
+function _temp(label_0) {
+  return {
+    label: label_0,
+    value: "".concat(FIELD_LABELS, ".").concat(label_0)
+  };
+}
+function _temp2(l) {
+  return l.startsWith(FIELD_LABELS);
+}
+function _temp3(l_0) {
+  return {
+    value: l_0,
+    label: l_0.slice(FIELD_LABELS.length + 1)
+  };
+}
+function _temp4(option) {
+  return option.value;
+}
+function _temp5(provided) {
+  return _objectSpread(_objectSpread({}, provided), {}, {
+    marginBottom: 0,
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    marginTop: 10,
+    zIndex: 1000,
+    minWidth: "320px",
+    position: "absolute"
+  });
+}
+function _temp6(provided_0) {
+  return _objectSpread(_objectSpread({}, provided_0), {}, {
+    position: "relative",
+    boxShadow: "none",
+    borderBottom: "1px solid #e2e8f0",
+    borderRight: "1px solid #e2e8f0",
+    borderLeft: "1px solid #e2e8f0",
+    borderTop: "1px solid #e2e8f0",
+    minWidth: "156px",
+    width: "max-content",
+    minHeight: "38px",
+    ":hover": {
+      borderColor: "#e2e8f0",
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  });
+}
+function _temp7(provided_1) {
+  return _objectSpread(_objectSpread({}, provided_1), {}, {
+    flexWrap: "nowrap",
+    overflowX: "auto",
+    padding: "2px 8px"
+  });
+}
+function _temp8(provided_2) {
+  return _objectSpread(_objectSpread({}, provided_2), {}, {
+    flex: "0 0 auto"
+  });
+}
+function _temp9(provided_3) {
+  return _objectSpread(_objectSpread({}, provided_3), {}, {
+    ":hover": {
+      backgroundColor: "#4f46e5",
+      color: "#ffffff"
+    },
+    ":focus": {
+      backgroundColor: "#4f46e5",
+      color: "#ffffff"
+    }
+  });
+}

package/dist/ProfileView/components/InvertCallStack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OAyB/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileView/components/InvertCallStack/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, 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 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,19 +23,95 @@ 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 { Icon } from '@iconify/react';
-import { useQueryState } from 'nuqs';
-import { Button } from '@parca/components';
+import { Button, useURLState } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
-import { invertCallStackParser } from '../../../hooks/urlParsers';
 import { useResetFlameGraphState } from '../../hooks/useResetFlameGraphState';
-const InvertCallStack = () => {
-    const [isInvert, setInvertStack] = useQueryState('invert_call_stack', invertCallStackParser);
-    const resetFlameGraphState = useResetFlameGraphState();
-    const handleSetInvert = (value) => {
-        void setInvertStack(value);
-        resetFlameGraphState();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var InvertCallStack = function InvertCallStack() {
+  var $ = _c(14);
+  var _useURLState = useURLState("invert_call_stack"),
+    _useURLState2 = _slicedToArray(_useURLState, 2),
+    t0 = _useURLState2[0],
+    setInvertStack = _useURLState2[1];
+  var invertStack = t0 === undefined ? "" : t0;
+  var isInvert = invertStack === "true";
+  var resetFlameGraphState = useResetFlameGraphState();
+  var t1;
+  if ($[0] !== resetFlameGraphState || $[1] !== setInvertStack) {
+    t1 = function t1(value) {
+      setInvertStack(value ? "true" : "");
+      resetFlameGraphState();
+    };
+    $[0] = resetFlameGraphState;
+    $[1] = setInvertStack;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  var handleSetInvert = t1;
+  var t2;
+  if ($[3] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx("label", {
+      className: "text-sm",
+      children: "\xA0"
+    });
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  var t3;
+  if ($[4] !== handleSetInvert || $[5] !== isInvert) {
+    t3 = function t3() {
+      return handleSetInvert(!isInvert);
     };
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { className: "text-sm", children: "\u00A0" }), _jsxs(Button, { variant: "neutral", className: "flex items-center gap-2 whitespace-nowrap", onClick: () => handleSetInvert(!isInvert), id: "h-invert-call-stack", ...testId(TEST_IDS.INVERT_CALL_STACK_BUTTON), children: [_jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', className: "h-4 w-4" }), isInvert ? 'Original' : 'Invert', " Call Stack"] })] }));
+    $[4] = handleSetInvert;
+    $[5] = isInvert;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  var t4;
+  if ($[7] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t4 = testId(TEST_IDS.INVERT_CALL_STACK_BUTTON);
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  var t5 = isInvert ? "ph:sort-ascending" : "ph:sort-descending";
+  var t6;
+  if ($[8] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Icon, {
+      icon: t5,
+      className: "h-4 w-4"
+    });
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  var t7 = isInvert ? "Original" : "Invert";
+  var t8;
+  if ($[10] !== t3 || $[11] !== t6 || $[12] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col",
+      children: [t2, /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
+        variant: "neutral",
+        className: "flex items-center gap-2 whitespace-nowrap",
+        onClick: t3,
+        id: "h-invert-call-stack"
+      }, t4), {}, {
+        children: [t6, t7, " Call Stack"]
+      }))]
+    });
+    $[10] = t3;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  return t8;
 };
-export default InvertCallStack;
+export default InvertCallStack;