@parca/profile 0.19.140 → 0.19.143

package/dist/QueryControls/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { c as _c } from "react-compiler-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,6 +23,7 @@ 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 { useRef, useState } from 'react';
 import { Switch } from '@headlessui/react';
 import { Button, DateTimeRangePicker, useParcaContext } from '@parca/components';
@@ -21,50 +34,408 @@ import ProfileTypeSelector from '../ProfileTypeSelector';
 import { SelectWithRefresh } from '../SelectWithRefresh';
 import SimpleMatchers from '../SimpleMatchers/';
 import { useLabelNames } from '../hooks/useLabels';
-export function QueryControls({ profileType, timeRangeSelection, setTimeRangeSelection, setQueryExpression, searchDisabled, showProfileTypeSelector = false, showSumBySelector = false, showAdvancedMode = true, profileTypesData, profileTypesLoading = false, selectedProfileName, setProfileName, profileTypesError, externalProfilerComponent, setQueryBrowserMode, advancedModeForQueryBrowser = false, setAdvancedModeForQueryBrowser, queryBrowserRef, labels = [], sumBySelection = [], sumBySelectionLoading = false, setUserSumBySelection, sumByRef, queryClient, draftSelection, setDraftMatchers, draftParsedQuery, commitDraft, }) {
-    const { timezone } = useParcaContext();
-    const defaultQueryBrowserRef = useRef(null);
-    const actualQueryBrowserRef = queryBrowserRef ?? defaultQueryBrowserRef;
-    const [searchExecutedTimestamp, setSearchExecutedTimestamp] = useState(0);
-    const { refetch: refetchLabelNames } = useLabelNames(queryClient, profileType, timeRangeSelection.getFromMs(), timeRangeSelection.getToMs());
-    return (_jsxs("div", { className: "flex w-full flex-wrap items-start gap-2", ...testId(TEST_IDS.QUERY_CONTROLS_CONTAINER), children: [showProfileTypeSelector && (_jsxs("div", { children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.PROFILE_TYPE_LABEL), children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName ?? (() => { }), error: profileTypesError, disabled: externalProfilerComponent?.disableProfileTypesDropdown })] })), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1 mt-auto", ref: actualQueryBrowserRef, ...testId(TEST_IDS.QUERY_BROWSER_CONTAINER), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.QUERY_LABEL), children: "Query" }), showAdvancedMode && externalProfilerComponent?.disableExplorativeQuerying !== true && (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
-                                                setAdvancedModeForQueryBrowser?.(!advancedModeForQueryBrowser);
-                                                setQueryBrowserMode?.(advancedModeForQueryBrowser ? 'simple' : 'advanced');
-                                            }, className: `${advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'} relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`, ...testId(TEST_IDS.ADVANCED_MODE_SWITCH), children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'} pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] }), _jsx("label", { className: "text-xs", ...testId(TEST_IDS.QUERY_MODE_LABEL), children: "Advanced Mode" })] }))] }) }), externalProfilerComponent?.configuredLabelNames !== undefined &&
-                        externalProfilerComponent?.configuredLabelNames.length >= 1 ? (_jsx(PreSelectedMatchers, { labelNames: externalProfilerComponent.configuredLabelNames })) : showAdvancedMode && advancedModeForQueryBrowser ? (_jsx(MatchersInput, { setDraftMatchers: setDraftMatchers, draftParsedQuery: draftParsedQuery, commitDraft: commitDraft })) : (_jsx(SimpleMatchers, { queryBrowserRef: actualQueryBrowserRef, searchExecutedTimestamp: searchExecutedTimestamp, draftSelection: draftSelection, setDraftMatchers: setDraftMatchers, draftParsedQuery: draftParsedQuery }))] }), showSumBySelector && (_jsxs("div", { ...testId(TEST_IDS.SUM_BY_CONTAINER), children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", ...testId(TEST_IDS.SUM_BY_LABEL), children: "Sum by" }) }), _jsx(SelectWithRefresh, { id: "h-sum-by-selector", "data-testid": testId(TEST_IDS.SUM_BY_SELECT)['data-testid'], defaultValue: [], isMulti: true, isClearable: false, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: sumBySelection.map(sumBy => ({ label: sumBy, value: sumBy })), onChange: newValue => {
-                            setUserSumBySelection?.(newValue.map(option => option.value));
-                        }, placeholder: "Labels...", styles: {
-                            indicatorSeparator: () => ({ display: 'none' }),
-                            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: 50,
-                                minWidth: '320px',
-                                position: 'absolute',
-                            }),
-                        }, isLoading: sumBySelectionLoading, isDisabled: !profileType?.delta, 
-                        // @ts-expect-error
-                        ref: sumByRef, onKeyDown: e => {
-                            const currentRef = sumByRef?.current;
-                            if (currentRef == null) {
-                                return;
-                            }
-                            const inputRef = currentRef.inputRef;
-                            if (inputRef == null) {
-                                return;
-                            }
-                            if (e.key === 'Enter' &&
-                                inputRef.value === '' &&
-                                currentRef.state.focusedOptionId === null // menu is not open
-                            ) {
-                                setQueryExpression(true);
-                                currentRef.blur();
-                            }
-                        }, onRefresh: refetchLabelNames, refreshTitle: "Refresh label names", refreshTestId: "sum-by-refresh-button", menuTestId: TEST_IDS.SUM_BY_SELECT_FLYOUT })] })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection, timezone: timezone, ...testId(TEST_IDS.DATE_TIME_RANGE_PICKER) }), _jsxs("div", { children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.SEARCH_BUTTON_LABEL), children: "\u00A0" }), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
-                            e.preventDefault();
-                            setSearchExecutedTimestamp(Date.now());
-                            setQueryExpression(true);
-                        }, id: "h-matcher-search-button", ...testId(TEST_IDS.SEARCH_BUTTON), children: "Search" })] })] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function QueryControls(t0) {
+  var $ = _c(69);
+  var profileType = t0.profileType,
+    timeRangeSelection = t0.timeRangeSelection,
+    setTimeRangeSelection = t0.setTimeRangeSelection,
+    setQueryExpression = t0.setQueryExpression,
+    searchDisabled = t0.searchDisabled,
+    t1 = t0.showProfileTypeSelector,
+    t2 = t0.showSumBySelector,
+    t3 = t0.showAdvancedMode,
+    profileTypesData = t0.profileTypesData,
+    t4 = t0.profileTypesLoading,
+    selectedProfileName = t0.selectedProfileName,
+    setProfileName = t0.setProfileName,
+    profileTypesError = t0.profileTypesError,
+    externalProfilerComponent = t0.externalProfilerComponent,
+    setQueryBrowserMode = t0.setQueryBrowserMode,
+    t5 = t0.advancedModeForQueryBrowser,
+    setAdvancedModeForQueryBrowser = t0.setAdvancedModeForQueryBrowser,
+    queryBrowserRef = t0.queryBrowserRef,
+    t6 = t0.labels,
+    t7 = t0.sumBySelection,
+    t8 = t0.sumBySelectionLoading,
+    setUserSumBySelection = t0.setUserSumBySelection,
+    sumByRef = t0.sumByRef,
+    queryClient = t0.queryClient,
+    draftSelection = t0.draftSelection,
+    setDraftMatchers = t0.setDraftMatchers,
+    draftParsedQuery = t0.draftParsedQuery,
+    commitDraft = t0.commitDraft;
+  var showProfileTypeSelector = t1 === undefined ? false : t1;
+  var showSumBySelector = t2 === undefined ? false : t2;
+  var showAdvancedMode = t3 === undefined ? true : t3;
+  var profileTypesLoading = t4 === undefined ? false : t4;
+  var advancedModeForQueryBrowser = t5 === undefined ? false : t5;
+  var t9;
+  if ($[0] !== t6) {
+    t9 = t6 === undefined ? [] : t6;
+    $[0] = t6;
+    $[1] = t9;
+  } else {
+    t9 = $[1];
+  }
+  var labels = t9;
+  var t10;
+  if ($[2] !== t7) {
+    t10 = t7 === undefined ? [] : t7;
+    $[2] = t7;
+    $[3] = t10;
+  } else {
+    t10 = $[3];
+  }
+  var sumBySelection = t10;
+  var sumBySelectionLoading = t8 === undefined ? false : t8;
+  var _useParcaContext = useParcaContext(),
+    timezone = _useParcaContext.timezone;
+  var defaultQueryBrowserRef = useRef(null);
+  var actualQueryBrowserRef = queryBrowserRef !== null && queryBrowserRef !== void 0 ? queryBrowserRef : defaultQueryBrowserRef;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchExecutedTimestamp = _useState2[0],
+    setSearchExecutedTimestamp = _useState2[1];
+  var t11;
+  if ($[4] !== timeRangeSelection) {
+    t11 = timeRangeSelection.getFromMs();
+    $[4] = timeRangeSelection;
+    $[5] = t11;
+  } else {
+    t11 = $[5];
+  }
+  var t12;
+  if ($[6] !== timeRangeSelection) {
+    t12 = timeRangeSelection.getToMs();
+    $[6] = timeRangeSelection;
+    $[7] = t12;
+  } else {
+    t12 = $[7];
+  }
+  var _useLabelNames = useLabelNames(queryClient, profileType, t11, t12),
+    refetchLabelNames = _useLabelNames.refetch;
+  var t13;
+  if ($[8] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t13 = testId(TEST_IDS.QUERY_CONTROLS_CONTAINER);
+    $[8] = t13;
+  } else {
+    t13 = $[8];
+  }
+  var t14;
+  if ($[9] !== (externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.disableProfileTypesDropdown) || $[10] !== profileTypesData || $[11] !== profileTypesError || $[12] !== profileTypesLoading || $[13] !== selectedProfileName || $[14] !== setProfileName || $[15] !== showProfileTypeSelector) {
+    t14 = showProfileTypeSelector && /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({
+        className: "text-xs"
+      }, testId(TEST_IDS.PROFILE_TYPE_LABEL)), {}, {
+        children: "Profile type"
+      })), /*#__PURE__*/_jsx(ProfileTypeSelector, {
+        profileTypesData: profileTypesData,
+        loading: profileTypesLoading,
+        selectedKey: selectedProfileName,
+        onSelection: setProfileName !== null && setProfileName !== void 0 ? setProfileName : _temp,
+        error: profileTypesError,
+        disabled: externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.disableProfileTypesDropdown
+      })]
+    });
+    $[9] = externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.disableProfileTypesDropdown;
+    $[10] = profileTypesData;
+    $[11] = profileTypesError;
+    $[12] = profileTypesLoading;
+    $[13] = selectedProfileName;
+    $[14] = setProfileName;
+    $[15] = showProfileTypeSelector;
+    $[16] = t14;
+  } else {
+    t14 = $[16];
+  }
+  var t15;
+  if ($[17] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t15 = testId(TEST_IDS.QUERY_BROWSER_CONTAINER);
+    $[17] = t15;
+  } else {
+    t15 = $[17];
+  }
+  var t16;
+  if ($[18] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t16 = /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({
+      className: "text-xs"
+    }, testId(TEST_IDS.QUERY_LABEL)), {}, {
+      children: "Query"
+    }));
+    $[18] = t16;
+  } else {
+    t16 = $[18];
+  }
+  var t17;
+  if ($[19] !== advancedModeForQueryBrowser || $[20] !== (externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.disableExplorativeQuerying) || $[21] !== setAdvancedModeForQueryBrowser || $[22] !== setQueryBrowserMode || $[23] !== showAdvancedMode) {
+    t17 = showAdvancedMode && (externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.disableExplorativeQuerying) !== true && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Switch, _objectSpread(_objectSpread({
+        checked: advancedModeForQueryBrowser,
+        onChange: function onChange() {
+          setAdvancedModeForQueryBrowser === null || setAdvancedModeForQueryBrowser === void 0 || setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
+          setQueryBrowserMode === null || setQueryBrowserMode === void 0 || setQueryBrowserMode(advancedModeForQueryBrowser ? "simple" : "advanced");
+        },
+        className: "".concat(advancedModeForQueryBrowser ? "bg-indigo-600" : "bg-gray-400 dark:bg-gray-800", " relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75")
+      }, testId(TEST_IDS.ADVANCED_MODE_SWITCH)), {}, {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "sr-only",
+          children: "Use setting"
+        }), /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          className: "".concat(advancedModeForQueryBrowser ? "translate-x-6" : "translate-x-0", " pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out")
+        })]
+      })), /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({
+        className: "text-xs"
+      }, testId(TEST_IDS.QUERY_MODE_LABEL)), {}, {
+        children: "Advanced Mode"
+      }))]
+    });
+    $[19] = advancedModeForQueryBrowser;
+    $[20] = externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.disableExplorativeQuerying;
+    $[21] = setAdvancedModeForQueryBrowser;
+    $[22] = setQueryBrowserMode;
+    $[23] = showAdvancedMode;
+    $[24] = t17;
+  } else {
+    t17 = $[24];
+  }
+  var t18;
+  if ($[25] !== t17) {
+    t18 = /*#__PURE__*/_jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [t16, t17]
+      })
+    });
+    $[25] = t17;
+    $[26] = t18;
+  } else {
+    t18 = $[26];
+  }
+  var t19;
+  if ($[27] !== actualQueryBrowserRef || $[28] !== advancedModeForQueryBrowser || $[29] !== commitDraft || $[30] !== draftParsedQuery || $[31] !== draftSelection || $[32] !== externalProfilerComponent || $[33] !== searchExecutedTimestamp || $[34] !== setDraftMatchers || $[35] !== showAdvancedMode) {
+    t19 = (externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.configuredLabelNames) !== undefined && (externalProfilerComponent === null || externalProfilerComponent === void 0 ? void 0 : externalProfilerComponent.configuredLabelNames.length) >= 1 ? /*#__PURE__*/_jsx(PreSelectedMatchers, {
+      labelNames: externalProfilerComponent.configuredLabelNames
+    }) : showAdvancedMode && advancedModeForQueryBrowser ? /*#__PURE__*/_jsx(MatchersInput, {
+      setDraftMatchers: setDraftMatchers,
+      draftParsedQuery: draftParsedQuery,
+      commitDraft: commitDraft
+    }) : /*#__PURE__*/_jsx(SimpleMatchers, {
+      queryBrowserRef: actualQueryBrowserRef,
+      searchExecutedTimestamp: searchExecutedTimestamp,
+      draftSelection: draftSelection,
+      setDraftMatchers: setDraftMatchers,
+      draftParsedQuery: draftParsedQuery
+    });
+    $[27] = actualQueryBrowserRef;
+    $[28] = advancedModeForQueryBrowser;
+    $[29] = commitDraft;
+    $[30] = draftParsedQuery;
+    $[31] = draftSelection;
+    $[32] = externalProfilerComponent;
+    $[33] = searchExecutedTimestamp;
+    $[34] = setDraftMatchers;
+    $[35] = showAdvancedMode;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  var t20;
+  if ($[37] !== actualQueryBrowserRef || $[38] !== t18 || $[39] !== t19) {
+    t20 = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "w-full flex-1 flex flex-col gap-1 mt-auto",
+      ref: actualQueryBrowserRef
+    }, t15), {}, {
+      children: [t18, t19]
+    }));
+    $[37] = actualQueryBrowserRef;
+    $[38] = t18;
+    $[39] = t19;
+    $[40] = t20;
+  } else {
+    t20 = $[40];
+  }
+  var t21;
+  if ($[41] !== labels || $[42] !== profileType || $[43] !== refetchLabelNames || $[44] !== setQueryExpression || $[45] !== setUserSumBySelection || $[46] !== showSumBySelector || $[47] !== sumByRef || $[48] !== sumBySelection || $[49] !== sumBySelectionLoading) {
+    t21 = showSumBySelector && /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, testId(TEST_IDS.SUM_BY_CONTAINER)), {}, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "mb-0.5 mt-1.5 flex items-center justify-between",
+        children: /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({
+          className: "text-xs"
+        }, testId(TEST_IDS.SUM_BY_LABEL)), {}, {
+          children: "Sum by"
+        }))
+      }), /*#__PURE__*/_jsx(SelectWithRefresh, {
+        id: "h-sum-by-selector",
+        "data-testid": testId(TEST_IDS.SUM_BY_SELECT)["data-testid"],
+        defaultValue: [],
+        isMulti: true,
+        isClearable: false,
+        name: "colors",
+        options: labels.map(_temp2),
+        className: "parca-select-container text-sm w-full max-w-80",
+        classNamePrefix: "parca-select",
+        value: sumBySelection.map(_temp3),
+        onChange: function onChange(newValue) {
+          setUserSumBySelection === null || setUserSumBySelection === void 0 || setUserSumBySelection(newValue.map(_temp4));
+        },
+        placeholder: "Labels...",
+        styles: {
+          indicatorSeparator: _temp5,
+          menu: _temp6
+        },
+        isLoading: sumBySelectionLoading,
+        isDisabled: !(profileType !== null && profileType !== void 0 && profileType.delta),
+        ref: sumByRef,
+        onKeyDown: function onKeyDown(e) {
+          var currentRef = sumByRef === null || sumByRef === void 0 ? void 0 : sumByRef.current;
+          if (currentRef == null) {
+            return;
+          }
+          var inputRef = currentRef.inputRef;
+          if (inputRef == null) {
+            return;
+          }
+          if (e.key === "Enter" && inputRef.value === "" && currentRef.state.focusedOptionId === null) {
+            setQueryExpression(true);
+            currentRef.blur();
+          }
+        },
+        onRefresh: refetchLabelNames,
+        refreshTitle: "Refresh label names",
+        refreshTestId: "sum-by-refresh-button",
+        menuTestId: TEST_IDS.SUM_BY_SELECT_FLYOUT
+      })]
+    }));
+    $[41] = labels;
+    $[42] = profileType;
+    $[43] = refetchLabelNames;
+    $[44] = setQueryExpression;
+    $[45] = setUserSumBySelection;
+    $[46] = showSumBySelector;
+    $[47] = sumByRef;
+    $[48] = sumBySelection;
+    $[49] = sumBySelectionLoading;
+    $[50] = t21;
+  } else {
+    t21 = $[50];
+  }
+  var t22;
+  if ($[51] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t22 = testId(TEST_IDS.DATE_TIME_RANGE_PICKER);
+    $[51] = t22;
+  } else {
+    t22 = $[51];
+  }
+  var t23;
+  if ($[52] !== setTimeRangeSelection || $[53] !== timeRangeSelection || $[54] !== timezone) {
+    t23 = /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread({
+      onRangeSelection: setTimeRangeSelection,
+      range: timeRangeSelection,
+      timezone: timezone
+    }, t22));
+    $[52] = setTimeRangeSelection;
+    $[53] = timeRangeSelection;
+    $[54] = timezone;
+    $[55] = t23;
+  } else {
+    t23 = $[55];
+  }
+  var t24;
+  if ($[56] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t24 = /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({
+      className: "text-xs"
+    }, testId(TEST_IDS.SEARCH_BUTTON_LABEL)), {}, {
+      children: "\xA0"
+    }));
+    $[56] = t24;
+  } else {
+    t24 = $[56];
+  }
+  var t25;
+  if ($[57] !== setQueryExpression) {
+    t25 = function t25(e_0) {
+      e_0.preventDefault();
+      setSearchExecutedTimestamp(Date.now());
+      setQueryExpression(true);
+    };
+    $[57] = setQueryExpression;
+    $[58] = t25;
+  } else {
+    t25 = $[58];
+  }
+  var t26;
+  if ($[59] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t26 = testId(TEST_IDS.SEARCH_BUTTON);
+    $[59] = t26;
+  } else {
+    t26 = $[59];
+  }
+  var t27;
+  if ($[60] !== searchDisabled || $[61] !== t25) {
+    t27 = /*#__PURE__*/_jsxs("div", {
+      children: [t24, /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        disabled: searchDisabled,
+        onClick: t25,
+        id: "h-matcher-search-button"
+      }, t26), {}, {
+        children: "Search"
+      }))]
+    });
+    $[60] = searchDisabled;
+    $[61] = t25;
+    $[62] = t27;
+  } else {
+    t27 = $[62];
+  }
+  var t28;
+  if ($[63] !== t14 || $[64] !== t20 || $[65] !== t21 || $[66] !== t23 || $[67] !== t27) {
+    t28 = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "flex w-full flex-wrap items-start gap-2"
+    }, t13), {}, {
+      children: [t14, t20, t21, t23, t27]
+    }));
+    $[63] = t14;
+    $[64] = t20;
+    $[65] = t21;
+    $[66] = t23;
+    $[67] = t27;
+    $[68] = t28;
+  } else {
+    t28 = $[68];
+  }
+  return t28;
+}
+function _temp6(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: 50,
+    minWidth: "320px",
+    position: "absolute"
+  });
+}
+function _temp5() {
+  return {
+    display: "none"
+  };
+}
+function _temp4(option) {
+  return option.value;
+}
+function _temp3(sumBy) {
+  return {
+    label: sumBy,
+    value: sumBy
+  };
+}
+function _temp2(label) {
+  return {
+    label: label,
+    value: label
+  };
 }
+function _temp() {}

package/dist/Sandwich/components/CalleesSection.js

@@ -1,6 +1,56 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 React from 'react';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import ProfileFlameGraph from '../../ProfileFlameGraph';
-export function CalleesSection({ calleesRef, calleesFlamegraphData, profileSource, curPathArrow, setCurPathArrow, }) {
-    return (_jsxs("div", { className: "flex relative items-start flex-row", ref: calleesRef, ...testId(TEST_IDS.SANDWICH_CALLEES_SECTION), children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ['<-', " Callees"] }), _jsx(ProfileFlameGraph, { arrow: calleesFlamegraphData?.arrow, total: calleesFlamegraphData.total ?? BigInt(0), filtered: calleesFlamegraphData.filtered ?? BigInt(0), profileType: profileSource?.ProfileType(), loading: calleesFlamegraphData.loading, error: calleesFlamegraphData.error, isHalfScreen: true, width: calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: calleesFlamegraphData.metadataMappingFiles, metadataLoading: calleesFlamegraphData.metadataLoading, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
-}
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function CalleesSection(_ref) {
+  var _calleesFlamegraphDat, _calleesFlamegraphDat2;
+  var calleesRef = _ref.calleesRef,
+    calleesFlamegraphData = _ref.calleesFlamegraphData,
+    profileSource = _ref.profileSource,
+    curPathArrow = _ref.curPathArrow,
+    setCurPathArrow = _ref.setCurPathArrow;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "flex relative items-start flex-row",
+    ref: calleesRef
+  }, testId(TEST_IDS.SANDWICH_CALLEES_SECTION)), {}, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left",
+      children: ['<-', " Callees"]
+    }), /*#__PURE__*/_jsx(ProfileFlameGraph, {
+      arrow: calleesFlamegraphData === null || calleesFlamegraphData === void 0 ? void 0 : calleesFlamegraphData.arrow,
+      total: (_calleesFlamegraphDat = calleesFlamegraphData.total) !== null && _calleesFlamegraphDat !== void 0 ? _calleesFlamegraphDat : BigInt(0),
+      filtered: (_calleesFlamegraphDat2 = calleesFlamegraphData.filtered) !== null && _calleesFlamegraphDat2 !== void 0 ? _calleesFlamegraphDat2 : BigInt(0),
+      profileType: profileSource === null || profileSource === void 0 ? void 0 : profileSource.ProfileType(),
+      loading: calleesFlamegraphData.loading,
+      error: calleesFlamegraphData.error,
+      isHalfScreen: true,
+      width: calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0,
+      metadataMappingFiles: calleesFlamegraphData.metadataMappingFiles,
+      metadataLoading: calleesFlamegraphData.metadataLoading,
+      isInSandwichView: true,
+      curPathArrow: curPathArrow,
+      setNewCurPathArrow: setCurPathArrow,
+      profileSource: profileSource,
+      tooltipId: "callees"
+    })]
+  }));
+}