@parca/profile 0.19.140 → 0.19.143

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/dist/GraphTooltipArrow/Content.js +224 -30
  3. package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js +192 -33
  4. package/dist/GraphTooltipArrow/ExpandOnHoverValue.js +53 -3
  5. package/dist/GraphTooltipArrow/index.d.ts.map +1 -1
  6. package/dist/GraphTooltipArrow/index.js +86 -56
  7. package/dist/GraphTooltipArrow/useGraphTooltip/index.js +37 -37
  8. package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js +94 -68
  9. package/dist/MatchersInput/SuggestionItem.js +91 -12
  10. package/dist/MatchersInput/SuggestionsList.d.ts +2 -1
  11. package/dist/MatchersInput/SuggestionsList.d.ts.map +1 -1
  12. package/dist/MatchersInput/SuggestionsList.js +371 -157
  13. package/dist/MatchersInput/SuggestionsList.test.d.ts +2 -0
  14. package/dist/MatchersInput/SuggestionsList.test.d.ts.map +1 -0
  15. package/dist/MatchersInput/index.js +308 -115
  16. package/dist/MetricsCircle/index.js +39 -3
  17. package/dist/MetricsGraph/MetricsContextMenu/index.js +119 -19
  18. package/dist/MetricsGraph/MetricsInfoPanel/index.js +81 -20
  19. package/dist/MetricsGraph/MetricsTooltip/index.d.ts.map +1 -1
  20. package/dist/MetricsGraph/MetricsTooltip/index.js +107 -74
  21. package/dist/MetricsGraph/index.js +552 -203
  22. package/dist/MetricsGraph/useMetricsGraphDimensions.js +46 -25
  23. package/dist/MetricsGraph/utils/colorMapping.js +24 -17
  24. package/dist/MetricsSeries/index.js +70 -7
  25. package/dist/PreSelectedMatchers/index.d.ts.map +1 -1
  26. package/dist/PreSelectedMatchers/index.js +249 -102
  27. package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts.map +1 -1
  28. package/dist/ProfileExplorer/ProfileExplorerCompare.js +240 -45
  29. package/dist/ProfileExplorer/ProfileExplorerSingle.js +98 -11
  30. package/dist/ProfileExplorer/index.js +183 -32
  31. package/dist/ProfileFlameChart/SamplesStrips/SamplesGraph/index.js +333 -148
  32. package/dist/ProfileFlameChart/SamplesStrips/SamplesStrips.stories.js +69 -35
  33. package/dist/ProfileFlameChart/SamplesStrips/index.js +645 -134
  34. package/dist/ProfileFlameChart/SamplesStrips/labelSetUtils.js +114 -55
  35. package/dist/ProfileFlameChart/index.js +260 -126
  36. package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenu.js +283 -85
  37. package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.js +56 -20
  38. package/dist/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.js +211 -140
  39. package/dist/ProfileFlameGraph/FlameGraphArrow/MemoizedTooltip.js +133 -38
  40. package/dist/ProfileFlameGraph/FlameGraphArrow/MiniMap.js +261 -216
  41. package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.d.ts.map +1 -1
  42. package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.js +71 -45
  43. package/dist/ProfileFlameGraph/FlameGraphArrow/TooltipContext.d.ts.map +1 -1
  44. package/dist/ProfileFlameGraph/FlameGraphArrow/TooltipContext.js +58 -28
  45. package/dist/ProfileFlameGraph/FlameGraphArrow/ZoomControls.d.ts.map +1 -1
  46. package/dist/ProfileFlameGraph/FlameGraphArrow/ZoomControls.js +59 -8
  47. package/dist/ProfileFlameGraph/FlameGraphArrow/index.js +396 -179
  48. package/dist/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.d.ts.map +1 -1
  49. package/dist/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.js +68 -50
  50. package/dist/ProfileFlameGraph/FlameGraphArrow/useMappingList.js +62 -38
  51. package/dist/ProfileFlameGraph/FlameGraphArrow/useNodeColor.js +14 -6
  52. package/dist/ProfileFlameGraph/FlameGraphArrow/useScrollViewport.js +124 -82
  53. package/dist/ProfileFlameGraph/FlameGraphArrow/useVisibleNodes.js +160 -98
  54. package/dist/ProfileFlameGraph/FlameGraphArrow/useZoom.js +232 -112
  55. package/dist/ProfileFlameGraph/FlameGraphArrow/utils.js +137 -114
  56. package/dist/ProfileFlameGraph/benchmarks/benchdata/populateData.js +85 -0
  57. package/dist/ProfileFlameGraph/index.js +322 -147
  58. package/dist/ProfileMetricsGraph/hooks/useQueryRange.js +140 -32
  59. package/dist/ProfileMetricsGraph/index.js +515 -256
  60. package/dist/ProfileSelector/CompareButton.js +132 -12
  61. package/dist/ProfileSelector/MetricsGraphSection.js +228 -63
  62. package/dist/ProfileSelector/index.d.ts +1 -1
  63. package/dist/ProfileSelector/index.d.ts.map +1 -1
  64. package/dist/ProfileSelector/index.js +734 -142
  65. package/dist/ProfileSelector/useAutoQuerySelector.d.ts +1 -3
  66. package/dist/ProfileSelector/useAutoQuerySelector.d.ts.map +1 -1
  67. package/dist/ProfileSelector/useAutoQuerySelector.js +280 -132
  68. package/dist/ProfileSource.js +230 -163
  69. package/dist/ProfileTypeSelector/index.js +214 -125
  70. package/dist/ProfileView/components/ActionButtons/GroupByDropdown.js +50 -4
  71. package/dist/ProfileView/components/ActionButtons/SortByDropdown.js +137 -32
  72. package/dist/ProfileView/components/ColorStackLegend.js +182 -54
  73. package/dist/ProfileView/components/DashboardItems/index.js +87 -28
  74. package/dist/ProfileView/components/DashboardLayout/index.js +108 -16
  75. package/dist/ProfileView/components/DiffLegend.js +172 -29
  76. package/dist/ProfileView/components/GroupByLabelsDropdown/index.js +199 -55
  77. package/dist/ProfileView/components/InvertCallStack/index.js +97 -9
  78. package/dist/ProfileView/components/ProfileFilters/filterPresets.js +260 -315
  79. package/dist/ProfileView/components/ProfileFilters/index.js +518 -215
  80. package/dist/ProfileView/components/ProfileFilters/useProfileFilters.js +370 -306
  81. package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.js +191 -118
  82. package/dist/ProfileView/components/ProfileHeader/index.js +105 -11
  83. package/dist/ProfileView/components/ShareButton/ResultBox.js +119 -16
  84. package/dist/ProfileView/components/ShareButton/index.js +352 -62
  85. package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts.map +1 -1
  86. package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js +664 -192
  87. package/dist/ProfileView/components/Toolbars/SwitchMenuItem.js +94 -7
  88. package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.js +196 -155
  89. package/dist/ProfileView/components/Toolbars/index.js +441 -21
  90. package/dist/ProfileView/components/ViewSelector/Dropdown.js +233 -22
  91. package/dist/ProfileView/components/ViewSelector/index.js +186 -82
  92. package/dist/ProfileView/components/VisualizationContainer/index.d.ts.map +1 -1
  93. package/dist/ProfileView/components/VisualizationContainer/index.js +52 -7
  94. package/dist/ProfileView/components/VisualizationPanel.js +185 -8
  95. package/dist/ProfileView/context/DashboardContext.js +74 -26
  96. package/dist/ProfileView/context/ProfileViewContext.js +56 -15
  97. package/dist/ProfileView/hooks/useAutoSelectDimension.js +71 -41
  98. package/dist/ProfileView/hooks/useProfileMetadata.js +50 -18
  99. package/dist/ProfileView/hooks/useResetFlameGraphState.js +31 -10
  100. package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.js +71 -27
  101. package/dist/ProfileView/hooks/useResetStateOnSeriesChange.js +53 -17
  102. package/dist/ProfileView/hooks/useVisualizationState.js +229 -69
  103. package/dist/ProfileView/index.js +383 -45
  104. package/dist/ProfileView/types/visualization.js +1 -13
  105. package/dist/ProfileView/utils/colorUtils.js +8 -7
  106. package/dist/ProfileViewWithData.js +319 -225
  107. package/dist/QueryControls/index.js +418 -47
  108. package/dist/Sandwich/components/CalleesSection.js +54 -4
  109. package/dist/Sandwich/components/CallersSection.js +97 -27
  110. package/dist/Sandwich/components/TableSection.js +77 -4
  111. package/dist/Sandwich/index.js +125 -12
  112. package/dist/Sandwich/utils/processRowData.js +48 -39
  113. package/dist/SelectWithRefresh/index.js +102 -28
  114. package/dist/SimpleMatchers/Select.js +520 -187
  115. package/dist/SimpleMatchers/index.js +590 -288
  116. package/dist/SourceView/Highlighter.js +230 -70
  117. package/dist/SourceView/LineNo.js +72 -17
  118. package/dist/SourceView/index.js +177 -101
  119. package/dist/SourceView/lang-detector/ext-to-lang.json +798 -798
  120. package/dist/SourceView/lang-detector/index.js +28 -14
  121. package/dist/SourceView/useSelectedLineRange.js +72 -20
  122. package/dist/Table/ColorCell.js +42 -1
  123. package/dist/Table/ColumnsVisibility.js +114 -6
  124. package/dist/Table/MoreDropdown.js +107 -21
  125. package/dist/Table/TableContextMenu.js +144 -134
  126. package/dist/Table/TableContextMenuWrapper.js +59 -14
  127. package/dist/Table/hooks/useColorManagement.js +58 -16
  128. package/dist/Table/hooks/useTableConfiguration.d.ts.map +1 -1
  129. package/dist/Table/hooks/useTableConfiguration.js +323 -167
  130. package/dist/Table/index.js +217 -123
  131. package/dist/Table/utils/functions.js +169 -144
  132. package/dist/Table/utils/topAndBottomExpandedRowModel.js +69 -52
  133. package/dist/TimelineGuide/index.js +209 -16
  134. package/dist/TopTable/benchmarks/benchdata/populateData.js +91 -0
  135. package/dist/TopTable/index.js +325 -121
  136. package/dist/contexts/LabelsQueryProvider.js +94 -32
  137. package/dist/contexts/UnifiedLabelsContext.js +114 -49
  138. package/dist/contexts/utils.js +37 -15
  139. package/dist/hooks/urlParsers.js +27 -15
  140. package/dist/hooks/useColorBy.js +47 -10
  141. package/dist/hooks/useCompareModeMeta.js +112 -62
  142. package/dist/hooks/useDashboardItems.js +52 -11
  143. package/dist/hooks/useLabels.js +295 -52
  144. package/dist/hooks/useQueryState.d.ts +1 -1
  145. package/dist/hooks/useQueryState.d.ts.map +1 -1
  146. package/dist/hooks/useQueryState.js +375 -329
  147. package/dist/index.js +11 -6
  148. package/dist/testdata/fg-diff.json +3750 -0
  149. package/dist/testdata/fg-simple.json +1879 -0
  150. package/dist/testdata/link_data.json +56 -0
  151. package/dist/testdata/tabular.json +30 -0
  152. package/dist/testdata/test_flamegraph.json +26846 -0
  153. package/dist/testdata/test_graph.json +53 -0
  154. package/dist/useDelayedLoader.js +32 -18
  155. package/dist/useGrpcQuery/index.js +71 -11
  156. package/dist/useHasProfileData.js +90 -12
  157. package/dist/useQuery.js +205 -64
  158. package/dist/useSumBy.d.ts.map +1 -1
  159. package/dist/useSumBy.js +294 -138
  160. package/dist/utils.js +62 -30
  161. package/package.json +9 -9
  162. package/src/GraphTooltipArrow/index.tsx +3 -0
  163. package/src/MatchersInput/SuggestionsList.test.tsx +70 -0
  164. package/src/MatchersInput/SuggestionsList.tsx +11 -10
  165. package/src/MatchersInput/index.tsx +1 -1
  166. package/src/MetricsGraph/MetricsTooltip/index.tsx +22 -34
  167. package/src/PreSelectedMatchers/index.tsx +3 -0
  168. package/src/ProfileExplorer/ProfileExplorerCompare.tsx +9 -2
  169. package/src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx +3 -0
  170. package/src/ProfileFlameGraph/FlameGraphArrow/TooltipContext.tsx +3 -0
  171. package/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx +3 -0
  172. package/src/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.ts +3 -0
  173. package/src/ProfileSelector/index.tsx +31 -9
  174. package/src/ProfileSelector/useAutoQuerySelector.ts +64 -42
  175. package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx +3 -0
  176. package/src/ProfileView/components/VisualizationContainer/index.tsx +3 -0
  177. package/src/Table/hooks/useTableConfiguration.tsx +7 -13
  178. package/src/hooks/useQueryState.ts +18 -3
  179. package/src/useDelayedLoader.ts +10 -10
  180. package/src/useSumBy.ts +12 -18
  181. package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.test.js +0 -455
  182. package/dist/hooks/useQueryState.test.js +0 -868
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  // Copyright 2022 The Parca Authors
3
3
  // Licensed under the Apache License, Version 2.0 (the "License");
4
4
  // you may not use this file except in compliance with the License.
@@ -11,25 +11,86 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
11
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
12
  // See the License for the specific language governing permissions and
13
13
  // limitations under the License.
14
+
14
15
  import { Icon } from '@iconify/react';
15
- const MetricsInfoPanel = ({ isInfoPanelOpen, onInfoIconClick, }) => {
16
- const items = [
17
- {
18
- header: 'Click',
19
- description: 'To select a profile at a specific point in time',
20
- icon: 'iconoir:mouse-button-left',
21
- },
22
- {
23
- header: 'Click & drag',
24
- description: 'To select profile samples over a period of time',
25
- icon: 'bi:arrows',
26
- },
27
- {
28
- header: 'Right click',
29
- description: 'To easily add labels to the query',
30
- icon: 'iconoir:mouse-button-right',
31
- },
32
- ];
33
- return (_jsx("div", { children: isInfoPanelOpen ? (_jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(Icon, { icon: "material-symbols:info", width: 25, height: 25, className: "cursor-pointer text-gray-400" }), _jsx("div", { className: "items-space-around flex flex-col justify-start gap-4 rounded-md border border-gray-200 bg-gray-50 p-4 shadow-md dark:border-gray-500 dark:bg-gray-800", children: items.map(({ header, description, icon }) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: _jsx(Icon, { icon: icon, width: 30, height: 30, className: "text-indigo-600 dark:text-indigo-500" }) }), _jsxs("div", { className: "flex flex-col items-start", children: [_jsx("div", { className: "text-md font-medium dark:text-gray-300", children: header }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: description })] })] }, header))) })] })) : (_jsx(Icon, { icon: "material-symbols:info-outline", width: 25, height: 25, onClick: onInfoIconClick, className: "cursor-pointer text-gray-400" })) }));
16
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
17
+ var MetricsInfoPanel = function MetricsInfoPanel(t0) {
18
+ var $ = _c(4);
19
+ var isInfoPanelOpen = t0.isInfoPanelOpen,
20
+ onInfoIconClick = t0.onInfoIconClick;
21
+ var t1;
22
+ if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
23
+ t1 = [{
24
+ header: "Click",
25
+ description: "To select a profile at a specific point in time",
26
+ icon: "iconoir:mouse-button-left"
27
+ }, {
28
+ header: "Click & drag",
29
+ description: "To select profile samples over a period of time",
30
+ icon: "bi:arrows"
31
+ }, {
32
+ header: "Right click",
33
+ description: "To easily add labels to the query",
34
+ icon: "iconoir:mouse-button-right"
35
+ }];
36
+ $[0] = t1;
37
+ } else {
38
+ t1 = $[0];
39
+ }
40
+ var items = t1;
41
+ var t2;
42
+ if ($[1] !== isInfoPanelOpen || $[2] !== onInfoIconClick) {
43
+ t2 = /*#__PURE__*/_jsx("div", {
44
+ children: isInfoPanelOpen ? /*#__PURE__*/_jsxs("div", {
45
+ className: "flex flex-col items-end gap-1",
46
+ children: [/*#__PURE__*/_jsx(Icon, {
47
+ icon: "material-symbols:info",
48
+ width: 25,
49
+ height: 25,
50
+ className: "cursor-pointer text-gray-400"
51
+ }), /*#__PURE__*/_jsx("div", {
52
+ className: "items-space-around flex flex-col justify-start gap-4 rounded-md border border-gray-200 bg-gray-50 p-4 shadow-md dark:border-gray-500 dark:bg-gray-800",
53
+ children: items.map(_temp)
54
+ })]
55
+ }) : /*#__PURE__*/_jsx(Icon, {
56
+ icon: "material-symbols:info-outline",
57
+ width: 25,
58
+ height: 25,
59
+ onClick: onInfoIconClick,
60
+ className: "cursor-pointer text-gray-400"
61
+ })
62
+ });
63
+ $[1] = isInfoPanelOpen;
64
+ $[2] = onInfoIconClick;
65
+ $[3] = t2;
66
+ } else {
67
+ t2 = $[3];
68
+ }
69
+ return t2;
34
70
  };
35
71
  export default MetricsInfoPanel;
72
+ function _temp(t0) {
73
+ var header = t0.header,
74
+ description = t0.description,
75
+ icon = t0.icon;
76
+ return /*#__PURE__*/_jsxs("div", {
77
+ className: "flex items-center gap-2",
78
+ children: [/*#__PURE__*/_jsx("div", {
79
+ children: /*#__PURE__*/_jsx(Icon, {
80
+ icon: icon,
81
+ width: 30,
82
+ height: 30,
83
+ className: "text-indigo-600 dark:text-indigo-500"
84
+ })
85
+ }), /*#__PURE__*/_jsxs("div", {
86
+ className: "flex flex-col items-start",
87
+ children: [/*#__PURE__*/_jsx("div", {
88
+ className: "text-md font-medium dark:text-gray-300",
89
+ children: header
90
+ }), /*#__PURE__*/_jsx("div", {
91
+ className: "text-sm text-gray-600 dark:text-gray-400",
92
+ children: description
93
+ })]
94
+ })]
95
+ }, header);
96
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAuBA,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAkCD,QAAA,MAAM,cAAc,GAAI,mCAAiC,KAAK,KAAG,GAAG,CAAC,OAiEpE,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAyBA,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AA6BD,QAAA,MAAM,cAAc,GAAI,mCAAiC,KAAK,KAAG,GAAG,CAAC,OAwDpE,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1,4 +1,15 @@
1
- import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
1
+ 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); }
2
+ 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; }
3
+ 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; }
4
+ 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; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
6
+ 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); }
7
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
8
+ 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."); }
9
+ 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; } }
10
+ 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; }
11
+ 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; } }
12
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
2
13
  // Copyright 2022 The Parca Authors
3
14
  // Licensed under the Apache License, Version 2.0 (the "License");
4
15
  // you may not use this file except in compliance with the License.
@@ -11,82 +22,104 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
11
22
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
23
  // See the License for the specific language governing permissions and
13
24
  // limitations under the License.
14
- import { useEffect, useMemo, useState } from 'react';
25
+
26
+ /* eslint-disable react-hooks/refs */
27
+
28
+ import { useLayoutEffect, useRef, useState } from 'react';
15
29
  import { usePopper } from 'react-popper';
16
30
  import { TEST_IDS, testId } from '@parca/test-utils';
17
- const virtualElement = {
18
- getBoundingClientRect: () => {
19
- const emptyRect = {
20
- width: 0,
21
- height: 0,
22
- top: 0,
23
- right: 0,
24
- bottom: 0,
25
- left: 0,
26
- x: 0,
27
- y: 0,
28
- toJSON: () => ({}),
29
- };
30
- return emptyRect;
31
- },
31
+ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
32
+ var emptyRect = {
33
+ width: 0,
34
+ height: 0,
35
+ top: 0,
36
+ right: 0,
37
+ bottom: 0,
38
+ left: 0,
39
+ x: 0,
40
+ y: 0,
41
+ toJSON: function toJSON() {
42
+ return {};
43
+ }
32
44
  };
33
- const createDomRect = (x, y) => {
34
- const domRect = {
35
- width: 0,
36
- height: 0,
37
- top: y,
38
- right: x,
39
- bottom: y,
40
- left: x,
41
- x,
42
- y,
43
- toJSON: () => ({}),
44
- };
45
- return domRect;
45
+ var createDomRect = function createDomRect(x, y) {
46
+ var domRect = {
47
+ width: 0,
48
+ height: 0,
49
+ top: y,
50
+ right: x,
51
+ bottom: y,
52
+ left: x,
53
+ x: x,
54
+ y: y,
55
+ toJSON: function toJSON() {
56
+ return {};
57
+ }
58
+ };
59
+ return domRect;
46
60
  };
47
- const MetricsTooltip = ({ x, y, contextElement, content }) => {
48
- const [popperElement, setPopperElement] = useState(null);
49
- const { styles, attributes, update } = usePopper(virtualElement, popperElement, {
50
- placement: 'auto-start',
51
- strategy: 'absolute',
52
- modifiers: [
53
- {
54
- name: 'preventOverflow',
55
- options: {
56
- boundary: contextElement ?? undefined,
57
- },
58
- },
59
- {
60
- name: 'offset',
61
- options: {
62
- offset: [15, 15],
63
- },
64
- },
65
- ],
66
- });
67
- useMemo(() => {
68
- virtualElement.getBoundingClientRect = () => {
69
- const domRect = contextElement?.getBoundingClientRect() ?? {
70
- width: 0,
71
- height: 0,
72
- top: 0,
73
- right: 0,
74
- bottom: 0,
75
- left: 0,
76
- x: 0,
77
- y: 0,
78
- toJSON: () => ({}),
79
- };
80
- return createDomRect(domRect.x + x, domRect.y + y);
81
- };
82
- }, [x, y, contextElement]);
83
- useEffect(() => {
84
- void update?.();
85
- }, [x, y, update]);
86
- // Don't render anything if content is null or undefined
87
- if (content == null) {
88
- return _jsx(_Fragment, {});
61
+ var MetricsTooltip = function MetricsTooltip(_ref) {
62
+ 'use no memo';
63
+
64
+ var x = _ref.x,
65
+ y = _ref.y,
66
+ contextElement = _ref.contextElement,
67
+ content = _ref.content;
68
+ var _useState = useState(null),
69
+ _useState2 = _slicedToArray(_useState, 2),
70
+ popperElement = _useState2[0],
71
+ setPopperElement = _useState2[1];
72
+ var virtualElementRef = useRef({
73
+ getBoundingClientRect: function getBoundingClientRect() {
74
+ return emptyRect;
89
75
  }
90
- return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, ...testId(TEST_IDS.METRICS_GRAPH_TOOLTIP), className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2", children: content }) }) }) }));
76
+ });
77
+ var _usePopper = usePopper(virtualElementRef.current, popperElement, {
78
+ placement: 'auto-start',
79
+ strategy: 'absolute',
80
+ modifiers: [{
81
+ name: 'preventOverflow',
82
+ options: {
83
+ boundary: contextElement !== null && contextElement !== void 0 ? contextElement : undefined
84
+ }
85
+ }, {
86
+ name: 'offset',
87
+ options: {
88
+ offset: [15, 15]
89
+ }
90
+ }]
91
+ }),
92
+ styles = _usePopper.styles,
93
+ attributes = _usePopper.attributes,
94
+ update = _usePopper.update;
95
+ useLayoutEffect(function () {
96
+ virtualElementRef.current.getBoundingClientRect = function () {
97
+ var _getBoundingClientRec;
98
+ var domRect = (_getBoundingClientRec = contextElement === null || contextElement === void 0 ? void 0 : contextElement.getBoundingClientRect()) !== null && _getBoundingClientRec !== void 0 ? _getBoundingClientRec : emptyRect;
99
+ return createDomRect(domRect.x + x, domRect.y + y);
100
+ };
101
+ void (update === null || update === void 0 ? void 0 : update());
102
+ }, [x, y, contextElement, update]);
103
+
104
+ // Don't render anything if content is null or undefined
105
+ if (content == null) {
106
+ return /*#__PURE__*/_jsx(_Fragment, {});
107
+ }
108
+ return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({
109
+ ref: setPopperElement,
110
+ style: styles.popper
111
+ }, attributes.popper), testId(TEST_IDS.METRICS_GRAPH_TOOLTIP)), {}, {
112
+ className: "z-50",
113
+ children: /*#__PURE__*/_jsx("div", {
114
+ className: "flex max-w-lg",
115
+ children: /*#__PURE__*/_jsx("div", {
116
+ className: "m-auto",
117
+ children: /*#__PURE__*/_jsx("div", {
118
+ className: "border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2",
119
+ children: content
120
+ })
121
+ })
122
+ })
123
+ }));
91
124
  };
92
- export default MetricsTooltip;
125
+ export default MetricsTooltip;