@parca/profile 0.19.139 → 0.19.142

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js

@@ -1,4 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _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,212 +27,676 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useCallback, useEffect, useRef, useState } from 'react';
+
+/* eslint-disable react-hooks/set-state-in-effect */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Menu } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileFlameGraph/FlameGraphArrow';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE } from '../../../ProfileFlameGraph/FlameGraphArrow';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
 import SwitchMenuItem from './SwitchMenuItem';
-const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValueForSortBy, activeValueForColorBy, activeValuesForLevel, value, disabled = false, icon, customSubmenu, renderAsDiv = false, }) => {
-    const menuRef = useRef(null);
-    const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
-    useEffect(() => {
-        if (items !== undefined && menuRef.current !== null) {
-            const rect = menuRef.current.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const menuWidth = 224; // w-56 = 14rem = 224px
-            const spaceOnRight = viewportWidth - rect.right;
-            const spaceOnLeft = rect.left;
-            // Open to the left if there's not enough space on the right but enough on the left
-            setShouldOpenLeft(spaceOnRight < menuWidth && spaceOnLeft >= menuWidth);
-        }
-    }, [items]);
-    let isActive = false;
-    if (isNested) {
-        if (activeValueForSortBy !== undefined && value === activeValueForSortBy) {
-            isActive = true;
-        }
-        if (activeValueForColorBy !== undefined && value === activeValueForColorBy) {
-            isActive = true;
-        }
-        if (activeValuesForLevel?.includes(value ?? '') ?? false) {
-            isActive = true;
-        }
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var _MenuItem = function MenuItem(_ref) {
+  'use no memo';
+
+  var label = _ref.label,
+    items = _ref.items,
+    onclick = _ref.onclick,
+    _onSelect = _ref.onSelect,
+    _ref$path = _ref.path,
+    path = _ref$path === void 0 ? [] : _ref$path,
+    id = _ref.id,
+    closeDropdown = _ref.closeDropdown,
+    _ref$isNested = _ref.isNested,
+    isNested = _ref$isNested === void 0 ? false : _ref$isNested,
+    activeValueForSortBy = _ref.activeValueForSortBy,
+    activeValueForColorBy = _ref.activeValueForColorBy,
+    activeValuesForLevel = _ref.activeValuesForLevel,
+    value = _ref.value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    icon = _ref.icon,
+    customSubmenu = _ref.customSubmenu,
+    _ref$renderAsDiv = _ref.renderAsDiv,
+    renderAsDiv = _ref$renderAsDiv === void 0 ? false : _ref$renderAsDiv;
+  var menuRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldOpenLeft = _useState2[0],
+    setShouldOpenLeft = _useState2[1];
+  useEffect(function () {
+    if (items !== undefined && menuRef.current !== null) {
+      var rect = menuRef.current.getBoundingClientRect();
+      var viewportWidth = window.innerWidth;
+      var menuWidth = 224; // w-56 = 14rem = 224px
+      var spaceOnRight = viewportWidth - rect.right;
+      var spaceOnLeft = rect.left;
+
+      // Open to the left if there's not enough space on the right but enough on the left
+      setShouldOpenLeft(spaceOnRight < menuWidth && spaceOnLeft >= menuWidth);
     }
-    const handleSelect = () => {
-        if (items === undefined) {
-            if (onclick !== undefined) {
-                onclick();
-                closeDropdown();
-            }
-            else {
-                onSelect([...path, label]);
-                closeDropdown();
-            }
+  }, [items]);
+  var isActive = false;
+  if (isNested) {
+    var _activeValuesForLevel;
+    if (activeValueForSortBy !== undefined && value === activeValueForSortBy) {
+      isActive = true;
+    }
+    if (activeValueForColorBy !== undefined && value === activeValueForColorBy) {
+      isActive = true;
+    }
+    if ((_activeValuesForLevel = activeValuesForLevel === null || activeValuesForLevel === void 0 ? void 0 : activeValuesForLevel.includes(value !== null && value !== void 0 ? value : '')) !== null && _activeValuesForLevel !== void 0 ? _activeValuesForLevel : false) {
+      isActive = true;
+    }
+  }
+  var handleSelect = function handleSelect() {
+    if (items === undefined) {
+      if (onclick !== undefined) {
+        onclick();
+        closeDropdown();
+      } else {
+        _onSelect([].concat(_toConsumableArray(path), [label]));
+        closeDropdown();
+      }
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "relative",
+    ref: menuRef,
+    children: /*#__PURE__*/_jsx(Menu, {
+      children: function children(_ref2) {
+        var close = _ref2.close;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Menu.Button, {
+            as: renderAsDiv ? 'div' : 'button',
+            className: "w-full text-left px-4 py-2 text-sm ".concat(disabled ? 'text-gray-400' : isActive ? 'text-white bg-indigo-400 hover:text-white' : 'text-white-600 hover:bg-indigo-600 hover:text-white', " flex justify-between items-center"),
+            onClick: handleSelect,
+            id: id,
+            disabled: disabled,
+            children: [customSubmenu !== undefined ? customSubmenu : /*#__PURE__*/_jsxs("span", {
+              className: "flex items-center",
+              children: [/*#__PURE__*/_jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+                  icon: icon,
+                  className: "h-4 w-4"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: label
+                })]
+              }), isActive && /*#__PURE__*/_jsx(Icon, {
+                icon: "heroicons-solid:check",
+                className: "ml-2 h-4 w-4"
+              })]
+            }), items !== undefined && /*#__PURE__*/_jsx(Icon, {
+              icon: "flowbite:caret-right-solid",
+              className: "h-[14px] w-[14px]"
+            })]
+          }), items !== undefined && /*#__PURE__*/_jsx(Menu.Items, {
+            className: "absolute top-0 w-56 mt-0 bg-white border border-gray-200 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 dark:border-gray-600 ".concat(shouldOpenLeft ? 'right-full mr-1 origin-top-left' : 'left-full ml-1 origin-top-right'),
+            children: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+              return /*#__PURE__*/_jsx(_MenuItem, _objectSpread(_objectSpread({}, item), {}, {
+                onSelect: function onSelect(selectedPath) {
+                  _onSelect([].concat(_toConsumableArray(path), _toConsumableArray(selectedPath)));
+                  close();
+                  closeDropdown();
+                },
+                path: [].concat(_toConsumableArray(path), [label]),
+                closeDropdown: closeDropdown,
+                isNested: true,
+                activeValueForSortBy: activeValueForSortBy,
+                activeValueForColorBy: activeValueForColorBy,
+                activeValuesForLevel: activeValuesForLevel
+              }), index);
+            })
+          })]
+        });
+      }
+    })
+  });
+};
+var MultiLevelDropdown = function MultiLevelDropdown(t0) {
+  var $ = _c(94);
+  var onSelect = t0.onSelect,
+    profileType = t0.profileType,
+    groupBy = t0.groupBy,
+    toggleGroupBy = t0.toggleGroupBy,
+    isTableVizOnly = t0.isTableVizOnly,
+    alignFunctionName = t0.alignFunctionName,
+    setAlignFunctionName = t0.setAlignFunctionName,
+    colorBy = t0.colorBy,
+    setColorBy = t0.setColorBy;
+  var dropdownRef = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldOpenLeft = _useState4[0],
+    setShouldOpenLeft = _useState4[1];
+  var t1;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t1 = {
+      defaultValue: FIELD_FUNCTION_NAME
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  var _useURLState = useURLState("sort_by", t1),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    storeSortBy = _useURLState2[0];
+  var _useURLState3 = useURLState("color_stack_legend"),
+    _useURLState4 = _slicedToArray(_useURLState3, 2),
+    colorStackLegend = _useURLState4[0],
+    setStoreColorStackLegend = _useURLState4[1];
+  var t2;
+  if ($[1] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = {
+      defaultValue: [],
+      alwaysReturnArray: true
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  var _useURLState5 = useURLState("hidden_binaries", t2),
+    _useURLState6 = _slicedToArray(_useURLState5, 2),
+    hiddenBinaries = _useURLState6[0],
+    setHiddenBinaries = _useURLState6[1];
+  var _useProfileViewContex = useProfileViewContext(),
+    compareMode = _useProfileViewContex.compareMode;
+  var _useUserPreference = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key),
+    _useUserPreference2 = _slicedToArray(_useUserPreference, 1),
+    colorProfileName = _useUserPreference2[0];
+  var isColorStackLegendEnabled = colorStackLegend === "true";
+  var isLeftAligned = alignFunctionName === "left";
+  var compareAbsoluteDefault = (profileType === null || profileType === void 0 ? void 0 : profileType.delta) === false ? "true" : "false";
+  var _useURLState7 = useURLState("compare_absolute"),
+    _useURLState8 = _slicedToArray(_useURLState7, 2),
+    t3 = _useURLState8[0],
+    setCompareAbsolute = _useURLState8[1];
+  var compareAbsolute = t3 === undefined ? compareAbsoluteDefault : t3;
+  var isCompareAbsolute = compareAbsolute === "true";
+  var t4;
+  var t5;
+  if ($[2] !== isTableVizOnly) {
+    t4 = function t4() {
+      var checkOverflow = function checkOverflow() {
+        if (dropdownRef.current !== null) {
+          var rect = dropdownRef.current.getBoundingClientRect();
+          var viewportWidth = window.innerWidth;
+          var menuWidth = isTableVizOnly ? 256 : 320;
+          var spaceOnRight = viewportWidth - rect.right;
+          var spaceOnLeft = rect.left;
+          setShouldOpenLeft(spaceOnRight < menuWidth && spaceOnLeft >= menuWidth);
         }
+      };
+      checkOverflow();
+      window.addEventListener("resize", checkOverflow);
+      return function () {
+        return window.removeEventListener("resize", checkOverflow);
+      };
     };
-    return (_jsx("div", { className: "relative", ref: menuRef, children: _jsx(Menu, { children: ({ close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { as: renderAsDiv ? 'div' : 'button', className: `w-full text-left px-4 py-2 text-sm ${disabled
-                            ? 'text-gray-400'
-                            : isActive
-                                ? 'text-white bg-indigo-400 hover:text-white'
-                                : 'text-white-600 hover:bg-indigo-600 hover:text-white'} flex justify-between items-center`, onClick: handleSelect, id: id, disabled: disabled, children: [customSubmenu !== undefined ? (customSubmenu) : (_jsxs("span", { className: "flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon !== undefined && _jsx(Icon, { icon: icon, className: "h-4 w-4" }), _jsx("span", { children: label })] }), isActive && _jsx(Icon, { icon: "heroicons-solid:check", className: "ml-2 h-4 w-4" })] })), items !== undefined && (_jsx(Icon, { icon: "flowbite:caret-right-solid", className: "h-[14px] w-[14px]" }))] }), items !== undefined && (_jsx(Menu.Items, { className: `absolute top-0 w-56 mt-0 bg-white border border-gray-200 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 dark:border-gray-600 ${shouldOpenLeft
-                            ? 'right-full mr-1 origin-top-left'
-                            : 'left-full ml-1 origin-top-right'}`, children: items?.map((item, index) => (_jsx(MenuItem, { ...item, onSelect: selectedPath => {
-                                onSelect([...path, ...selectedPath]);
-                                close();
-                                closeDropdown();
-                            }, path: [...path, label], closeDropdown: closeDropdown, isNested: true, activeValueForSortBy: activeValueForSortBy, activeValueForColorBy: activeValueForColorBy, activeValuesForLevel: activeValuesForLevel }, index))) }))] })) }) }));
-};
-const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isTableVizOnly, alignFunctionName, setAlignFunctionName, colorBy, setColorBy, }) => {
-    const dropdownRef = useRef(null);
-    const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
-    const [storeSortBy] = useURLState('sort_by', {
-        defaultValue: FIELD_FUNCTION_NAME,
+    t5 = [isTableVizOnly];
+    $[2] = isTableVizOnly;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t4 = $[3];
+    t5 = $[4];
+  }
+  useEffect(t4, t5);
+  var t6;
+  if ($[5] !== hiddenBinaries || $[6] !== setHiddenBinaries) {
+    t6 = function t6(index) {
+      var updatedBinaries = _toConsumableArray(hiddenBinaries);
+      updatedBinaries.splice(index, 1);
+      setHiddenBinaries(updatedBinaries);
+    };
+    $[5] = hiddenBinaries;
+    $[6] = setHiddenBinaries;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  var handleBinaryToggle = t6;
+  var t7;
+  if ($[8] !== setStoreColorStackLegend) {
+    t7 = function t7(value) {
+      setStoreColorStackLegend(value);
+    };
+    $[8] = setStoreColorStackLegend;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  var setColorStackLegend = t7;
+  var t8;
+  if ($[10] !== setHiddenBinaries) {
+    t8 = function t8() {
+      setHiddenBinaries([]);
+    };
+    $[10] = setHiddenBinaries;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  var resetLegend = t8;
+  var t9;
+  if ($[12] !== toggleGroupBy) {
+    t9 = {
+      label: "Function",
+      onclick: function onclick() {
+        return toggleGroupBy(FIELD_FUNCTION_NAME);
+      },
+      value: FIELD_FUNCTION_NAME
+    };
+    $[12] = toggleGroupBy;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  var t10;
+  if ($[14] !== toggleGroupBy) {
+    t10 = {
+      label: "Binary",
+      onclick: function onclick() {
+        return toggleGroupBy(FIELD_MAPPING_FILE);
+      },
+      value: FIELD_MAPPING_FILE
+    };
+    $[14] = toggleGroupBy;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  var t11;
+  if ($[16] !== toggleGroupBy) {
+    t11 = {
+      label: "Code",
+      onclick: function onclick() {
+        return toggleGroupBy(FIELD_FUNCTION_FILE_NAME);
+      },
+      value: FIELD_FUNCTION_FILE_NAME
+    };
+    $[16] = toggleGroupBy;
+    $[17] = t11;
+  } else {
+    t11 = $[17];
+  }
+  var t12;
+  if ($[18] !== toggleGroupBy) {
+    t12 = {
+      label: "Address",
+      onclick: function onclick() {
+        return toggleGroupBy(FIELD_LOCATION_ADDRESS);
+      },
+      value: FIELD_LOCATION_ADDRESS
+    };
+    $[18] = toggleGroupBy;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  var t13;
+  if ($[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t9) {
+    t13 = [t9, t10, t11, t12];
+    $[20] = t10;
+    $[21] = t11;
+    $[22] = t12;
+    $[23] = t9;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  var t14 = !!isTableVizOnly;
+  var t15;
+  if ($[25] !== t13 || $[26] !== t14) {
+    t15 = {
+      label: "Levels",
+      id: "h-levels-filter",
+      items: t13,
+      hide: t14,
+      icon: "heroicons-solid:bars-3"
+    };
+    $[25] = t13;
+    $[26] = t14;
+    $[27] = t15;
+  } else {
+    t15 = $[27];
+  }
+  var t16;
+  if ($[28] !== setColorBy) {
+    t16 = {
+      label: "Binary",
+      onclick: function onclick() {
+        return setColorBy("binary");
+      },
+      value: "binary"
+    };
+    $[28] = setColorBy;
+    $[29] = t16;
+  } else {
+    t16 = $[29];
+  }
+  var t17;
+  if ($[30] !== setColorBy) {
+    t17 = {
+      label: "Filename",
+      onclick: function onclick() {
+        return setColorBy("filename");
+      },
+      value: "filename"
+    };
+    $[30] = setColorBy;
+    $[31] = t17;
+  } else {
+    t17 = $[31];
+  }
+  var t18;
+  if ($[32] !== t16 || $[33] !== t17) {
+    t18 = {
+      label: "Color by",
+      id: "h-color-by-filter",
+      items: [t16, t17],
+      hide: false,
+      icon: "carbon:color-palette"
+    };
+    $[32] = t16;
+    $[33] = t17;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  var t19 = isColorStackLegendEnabled ? "Hide legend" : "Show legend";
+  var t20;
+  if ($[35] !== isColorStackLegendEnabled || $[36] !== setColorStackLegend) {
+    t20 = function t20() {
+      return setColorStackLegend(isColorStackLegendEnabled ? "false" : "true");
+    };
+    $[35] = isColorStackLegendEnabled;
+    $[36] = setColorStackLegend;
+    $[37] = t20;
+  } else {
+    t20 = $[37];
+  }
+  var t21 = compareMode || colorProfileName === "default";
+  var t22 = isColorStackLegendEnabled ? "ph:eye-closed" : "ph:eye";
+  var t23;
+  if ($[38] !== t19 || $[39] !== t20 || $[40] !== t21 || $[41] !== t22) {
+    t23 = {
+      label: t19,
+      onclick: t20,
+      hide: t21,
+      id: "h-show-legend-button",
+      icon: t22
+    };
+    $[38] = t19;
+    $[39] = t20;
+    $[40] = t21;
+    $[41] = t22;
+    $[42] = t23;
+  } else {
+    t23 = $[42];
+  }
+  var t24 = isLeftAligned ? "Right-align function names" : "Left-align function names";
+  var t25;
+  if ($[43] !== isLeftAligned || $[44] !== setAlignFunctionName) {
+    t25 = function t25() {
+      return setAlignFunctionName(isLeftAligned ? "right" : "left");
+    };
+    $[43] = isLeftAligned;
+    $[44] = setAlignFunctionName;
+    $[45] = t25;
+  } else {
+    t25 = $[45];
+  }
+  var t26 = !!isTableVizOnly;
+  var t27 = isLeftAligned ? "ic:outline-align-horizontal-right" : "ic:outline-align-horizontal-left";
+  var t28;
+  if ($[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27) {
+    t28 = {
+      label: t24,
+      onclick: t25,
+      id: "h-align-function-names",
+      hide: t26,
+      icon: t27
+    };
+    $[46] = t24;
+    $[47] = t25;
+    $[48] = t26;
+    $[49] = t27;
+    $[50] = t28;
+  } else {
+    t28 = $[50];
+  }
+  var t29 = isCompareAbsolute ? "Compare Relative" : "Compare Absolute";
+  var t30;
+  if ($[51] !== isCompareAbsolute || $[52] !== setCompareAbsolute) {
+    t30 = function t30() {
+      return setCompareAbsolute(isCompareAbsolute ? "false" : "true");
+    };
+    $[51] = isCompareAbsolute;
+    $[52] = setCompareAbsolute;
+    $[53] = t30;
+  } else {
+    t30 = $[53];
+  }
+  var t31 = !compareMode;
+  var t32 = isCompareAbsolute ? "fluent-mdl2:compare" : "fluent-mdl2:compare-uneven";
+  var t33;
+  if ($[54] !== t29 || $[55] !== t30 || $[56] !== t31 || $[57] !== t32) {
+    t33 = {
+      label: t29,
+      onclick: t30,
+      hide: t31,
+      icon: t32
+    };
+    $[54] = t29;
+    $[55] = t30;
+    $[56] = t31;
+    $[57] = t32;
+    $[58] = t33;
+  } else {
+    t33 = $[58];
+  }
+  var t34 = !!isTableVizOnly;
+  var t35;
+  if ($[59] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t35 = /*#__PURE__*/_jsx(SwitchMenuItem, {
+      label: "Dock graph tooltip",
+      id: "h-dock-graph-meta-info",
+      userPreferenceDetails: USER_PREFERENCES.GRAPH_METAINFO_DOCKED
     });
-    const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
-    const [hiddenBinaries, setHiddenBinaries] = useURLState('hidden_binaries', {
-        defaultValue: [],
-        alwaysReturnArray: true,
+    $[59] = t35;
+  } else {
+    t35 = $[59];
+  }
+  var t36;
+  if ($[60] !== t34) {
+    t36 = {
+      label: "Dock Graph MetaInfo",
+      hide: t34,
+      customSubmenu: t35,
+      renderAsDiv: true
+    };
+    $[60] = t34;
+    $[61] = t36;
+  } else {
+    t36 = $[61];
+  }
+  var t37 = !!isTableVizOnly;
+  var t38;
+  if ($[62] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t38 = /*#__PURE__*/_jsx(SwitchMenuItem, {
+      label: "Highlight similar stacks when hovering over a node",
+      id: "h-highlight-similar-stacks",
+      userPreferenceDetails: USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS
     });
-    const { compareMode } = useProfileViewContext();
-    const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const isColorStackLegendEnabled = colorStackLegend === 'true';
-    const isLeftAligned = alignFunctionName === 'left';
-    // By default, we want delta profiles (CPU) to be relatively compared.
-    // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
-    const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
-    const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState('compare_absolute');
-    const isCompareAbsolute = compareAbsolute === 'true';
-    useEffect(() => {
-        const checkOverflow = () => {
-            if (dropdownRef.current !== null) {
-                const rect = dropdownRef.current.getBoundingClientRect();
-                const viewportWidth = window.innerWidth;
-                const menuWidth = isTableVizOnly ? 256 : 320; // w-64 = 256px, w-80 = 320px
-                const spaceOnRight = viewportWidth - rect.right;
-                const spaceOnLeft = rect.left;
-                setShouldOpenLeft(spaceOnRight < menuWidth && spaceOnLeft >= menuWidth);
+    $[62] = t38;
+  } else {
+    t38 = $[62];
+  }
+  var t39;
+  if ($[63] !== t37) {
+    t39 = {
+      label: "Highlight similar stacks when hovering over a node",
+      hide: t37,
+      customSubmenu: t38,
+      renderAsDiv: true
+    };
+    $[63] = t37;
+    $[64] = t39;
+  } else {
+    t39 = $[64];
+  }
+  var t40 = hiddenBinaries === undefined || hiddenBinaries.length === 0;
+  var t41;
+  if ($[65] !== resetLegend) {
+    t41 = function t41() {
+      return resetLegend();
+    };
+    $[65] = resetLegend;
+    $[66] = t41;
+  } else {
+    t41 = $[66];
+  }
+  var t42;
+  if ($[67] !== t40 || $[68] !== t41) {
+    t42 = {
+      label: "Reset Legend",
+      hide: t40,
+      onclick: t41,
+      id: "h-reset-legend-button",
+      icon: "system-uicons:reset"
+    };
+    $[67] = t40;
+    $[68] = t41;
+    $[69] = t42;
+  } else {
+    t42 = $[69];
+  }
+  var t43;
+  if ($[70] !== handleBinaryToggle || $[71] !== hiddenBinaries) {
+    t43 = hiddenBinaries === null || hiddenBinaries === void 0 ? void 0 : hiddenBinaries.map(function (binary, index_0) {
+      return {
+        label: binary,
+        customSubmenu: /*#__PURE__*/_jsxs("div", {
+          className: "flex items-center gap-2 w-full",
+          children: [/*#__PURE__*/_jsx("input", {
+            id: binary,
+            name: binary,
+            type: "checkbox",
+            className: "h-4 w-4 rounded-md border-2 border-gray-300 text-indigo-600 focus:ring-indigo-600 focus:ring-offset-0 checked:bg-indigo-600 checked:border-indigo-600",
+            checked: hiddenBinaries === null || hiddenBinaries === void 0 ? void 0 : hiddenBinaries.includes(binary),
+            onChange: function onChange() {
+              return handleBinaryToggle(index_0);
             }
-        };
-        checkOverflow();
-        window.addEventListener('resize', checkOverflow);
-        return () => window.removeEventListener('resize', checkOverflow);
-    }, [isTableVizOnly]);
-    const handleBinaryToggle = (index) => {
-        const updatedBinaries = [...hiddenBinaries];
-        updatedBinaries.splice(index, 1);
-        setHiddenBinaries(updatedBinaries);
-    };
-    const setColorStackLegend = useCallback((value) => {
-        setStoreColorStackLegend(value);
-    }, [setStoreColorStackLegend]);
-    const resetLegend = () => {
-        setHiddenBinaries([]);
-    };
-    const menuItems = [
-        {
-            label: 'Levels',
-            id: 'h-levels-filter',
-            items: [
-                {
-                    label: 'Function',
-                    onclick: () => toggleGroupBy(FIELD_FUNCTION_NAME),
-                    value: FIELD_FUNCTION_NAME,
-                },
-                {
-                    label: 'Binary',
-                    onclick: () => toggleGroupBy(FIELD_MAPPING_FILE),
-                    value: FIELD_MAPPING_FILE,
-                },
-                {
-                    label: 'Code',
-                    onclick: () => toggleGroupBy(FIELD_FUNCTION_FILE_NAME),
-                    value: FIELD_FUNCTION_FILE_NAME,
-                },
-                {
-                    label: 'Address',
-                    onclick: () => toggleGroupBy(FIELD_LOCATION_ADDRESS),
-                    value: FIELD_LOCATION_ADDRESS,
-                },
-            ],
-            hide: !!isTableVizOnly,
-            icon: 'heroicons-solid:bars-3',
-        },
-        {
-            label: 'Color by',
-            id: 'h-color-by-filter',
-            items: [
-                {
-                    label: 'Binary',
-                    onclick: () => setColorBy('binary'),
-                    value: 'binary',
-                },
-                {
-                    label: 'Filename',
-                    onclick: () => setColorBy('filename'),
-                    value: 'filename',
-                },
-            ],
-            hide: false,
-            icon: 'carbon:color-palette',
-        },
-        {
-            label: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend',
-            onclick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'),
-            hide: compareMode || colorProfileName === 'default',
-            id: 'h-show-legend-button',
-            icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye',
-        },
-        {
-            label: isLeftAligned ? 'Right-align function names' : 'Left-align function names',
-            onclick: () => setAlignFunctionName(isLeftAligned ? 'right' : 'left'),
-            id: 'h-align-function-names',
-            hide: !!isTableVizOnly,
-            icon: isLeftAligned
-                ? 'ic:outline-align-horizontal-right'
-                : 'ic:outline-align-horizontal-left',
-        },
-        {
-            label: isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute',
-            onclick: () => setCompareAbsolute(isCompareAbsolute ? 'false' : 'true'),
-            hide: !compareMode,
-            icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven',
-        },
-        {
-            label: 'Dock Graph MetaInfo',
-            hide: !!isTableVizOnly,
-            customSubmenu: (_jsx(SwitchMenuItem, { label: "Dock graph tooltip", id: "h-dock-graph-meta-info", userPreferenceDetails: USER_PREFERENCES.GRAPH_METAINFO_DOCKED })),
-            renderAsDiv: true,
-        },
-        {
-            label: 'Highlight similar stacks when hovering over a node',
-            hide: !!isTableVizOnly,
-            customSubmenu: (_jsx(SwitchMenuItem, { label: "Highlight similar stacks when hovering over a node", id: "h-highlight-similar-stacks", userPreferenceDetails: USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS })),
-            renderAsDiv: true,
-        },
-        {
-            label: 'Reset Legend',
-            hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
-            onclick: () => resetLegend(),
-            id: 'h-reset-legend-button',
-            icon: 'system-uicons:reset',
-        },
-        {
-            label: 'Hidden Binaries',
-            id: 'h-hidden-binaries',
-            items: hiddenBinaries?.map((binary, index) => ({
-                label: binary,
-                customSubmenu: (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx("input", { id: binary, name: binary, type: "checkbox", className: "h-4 w-4 rounded-md border-2 border-gray-300 text-indigo-600 focus:ring-indigo-600 focus:ring-offset-0 checked:bg-indigo-600 checked:border-indigo-600", checked: hiddenBinaries?.includes(binary), onChange: () => handleBinaryToggle(index) }), _jsx("span", { children: binary })] })),
-            })),
-            hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
-            icon: 'ph:eye-closed',
-        },
-    ];
-    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", ref: dropdownRef, children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "pajamas:preferences", className: "w-4 h-4" }), _jsx("span", { children: "Preferences" })] }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), open && (_jsx(Menu.Items, { className: cx(isTableVizOnly ? 'w-64' : 'w-80', 'absolute z-50 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600', shouldOpenLeft ? 'right-0 origin-top-right' : 'left-0 origin-top-left'), children: menuItems
-                            .filter(item => item.hide !== undefined && !item.hide)
-                            .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy === undefined || colorBy === '' ? 'binary' : colorBy, activeValuesForLevel: groupBy, renderAsDiv: item.renderAsDiv }, index))) }))] })) }) }));
+          }), /*#__PURE__*/_jsx("span", {
+            children: binary
+          })]
+        })
+      };
+    });
+    $[70] = handleBinaryToggle;
+    $[71] = hiddenBinaries;
+    $[72] = t43;
+  } else {
+    t43 = $[72];
+  }
+  var t44 = hiddenBinaries === undefined || hiddenBinaries.length === 0;
+  var t45;
+  if ($[73] !== t43 || $[74] !== t44) {
+    t45 = {
+      label: "Hidden Binaries",
+      id: "h-hidden-binaries",
+      items: t43,
+      hide: t44,
+      icon: "ph:eye-closed"
+    };
+    $[73] = t43;
+    $[74] = t44;
+    $[75] = t45;
+  } else {
+    t45 = $[75];
+  }
+  var t46;
+  if ($[76] !== t15 || $[77] !== t18 || $[78] !== t23 || $[79] !== t28 || $[80] !== t33 || $[81] !== t36 || $[82] !== t39 || $[83] !== t42 || $[84] !== t45) {
+    t46 = [t15, t18, t23, t28, t33, t36, t39, t42, t45];
+    $[76] = t15;
+    $[77] = t18;
+    $[78] = t23;
+    $[79] = t28;
+    $[80] = t33;
+    $[81] = t36;
+    $[82] = t39;
+    $[83] = t42;
+    $[84] = t45;
+    $[85] = t46;
+  } else {
+    t46 = $[85];
+  }
+  var menuItems = t46;
+  var t47;
+  if ($[86] !== colorBy || $[87] !== groupBy || $[88] !== isTableVizOnly || $[89] !== menuItems || $[90] !== onSelect || $[91] !== shouldOpenLeft || $[92] !== storeSortBy) {
+    t47 = /*#__PURE__*/_jsx("div", {
+      className: "relative inline-block text-left",
+      id: "h-visualisation-toolbar-actions",
+      ref: dropdownRef,
+      children: /*#__PURE__*/_jsx(Menu, {
+        children: function children(t48) {
+          var open = t48.open,
+            close = t48.close;
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsxs(Menu.Button, {
+              className: "flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]",
+              children: [/*#__PURE__*/_jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/_jsx(Icon, {
+                  icon: "pajamas:preferences",
+                  className: "w-4 h-4"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "Preferences"
+                })]
+              }), /*#__PURE__*/_jsx("span", {
+                className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400",
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: "heroicons:chevron-down-20-solid",
+                  "aria-hidden": "true"
+                })
+              })]
+            }), open && /*#__PURE__*/_jsx(Menu.Items, {
+              className: cx(isTableVizOnly ? "w-64" : "w-80", "absolute z-50 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600", shouldOpenLeft ? "right-0 origin-top-right" : "left-0 origin-top-left"),
+              children: menuItems.filter(_temp).map(function (item_0, index_1) {
+                return /*#__PURE__*/_jsx(_MenuItem, _objectSpread(_objectSpread({}, item_0), {}, {
+                  onSelect: onSelect,
+                  closeDropdown: close,
+                  activeValueForSortBy: storeSortBy,
+                  activeValueForColorBy: colorBy === undefined || colorBy === "" ? "binary" : colorBy,
+                  activeValuesForLevel: groupBy,
+                  renderAsDiv: item_0.renderAsDiv
+                }), index_1);
+              })
+            })]
+          });
+        }
+      })
+    });
+    $[86] = colorBy;
+    $[87] = groupBy;
+    $[88] = isTableVizOnly;
+    $[89] = menuItems;
+    $[90] = onSelect;
+    $[91] = shouldOpenLeft;
+    $[92] = storeSortBy;
+    $[93] = t47;
+  } else {
+    t47 = $[93];
+  }
+  return t47;
 };
 export default MultiLevelDropdown;
+function _temp(item) {
+  return item.hide !== undefined && !item.hide;
+}