@grafana/flamegraph 11.5.0-221668 → 11.5.0
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.
- package/README.md +11 -12
- package/dist/esm/FlameGraph/FlameGraph.js +36 -41
- package/dist/esm/FlameGraph/FlameGraph.js.map +1 -1
- package/dist/esm/FlameGraph/FlameGraphCanvas.js +12 -12
- package/dist/esm/FlameGraph/FlameGraphCanvas.js.map +1 -1
- package/dist/esm/FlameGraph/FlameGraphContextMenu.js +1 -1
- package/dist/esm/FlameGraph/FlameGraphContextMenu.js.map +1 -1
- package/dist/esm/FlameGraph/FlameGraphMetadata.js +10 -13
- package/dist/esm/FlameGraph/FlameGraphMetadata.js.map +1 -1
- package/dist/esm/FlameGraph/colors.js +2 -2
- package/dist/esm/FlameGraph/colors.js.map +1 -1
- package/dist/esm/FlameGraph/dataTransform.js +11 -11
- package/dist/esm/FlameGraph/dataTransform.js.map +1 -1
- package/dist/esm/FlameGraph/rendering.js +4 -4
- package/dist/esm/FlameGraph/rendering.js.map +1 -1
- package/dist/esm/FlameGraph/treeTransforms.js +4 -4
- package/dist/esm/FlameGraph/treeTransforms.js.map +1 -1
- package/dist/esm/FlameGraphContainer.js +12 -40
- package/dist/esm/FlameGraphContainer.js.map +1 -1
- package/dist/esm/TopTable/FlameGraphTopTableContainer.js +4 -4
- package/dist/esm/TopTable/FlameGraphTopTableContainer.js.map +1 -1
- package/dist/index.d.ts +1 -5
- package/dist/index.js +95 -131
- package/dist/index.js.map +1 -1
- package/package.json +11 -11
package/dist/index.js
CHANGED
@@ -56,7 +56,7 @@ const FlameGraphContextMenu = ({
|
|
56
56
|
search
|
57
57
|
}) => {
|
58
58
|
function renderItems() {
|
59
|
-
const extraButtons = (getExtraContextMenuButtons == null ?
|
59
|
+
const extraButtons = (getExtraContextMenuButtons == null ? void 0 : getExtraContextMenuButtons(itemData, data.data, {
|
60
60
|
selectedView,
|
61
61
|
isDiff: data.isDiffFlamegraph(),
|
62
62
|
search,
|
@@ -475,10 +475,10 @@ function getPackageName(name) {
|
|
475
475
|
for (const [_, matcher] of matchers) {
|
476
476
|
const match = name.match(matcher);
|
477
477
|
if (match) {
|
478
|
-
return ((_a = match.groups) == null ?
|
478
|
+
return ((_a = match.groups) == null ? void 0 : _a.packageName) || "";
|
479
479
|
}
|
480
480
|
}
|
481
|
-
return
|
481
|
+
return void 0;
|
482
482
|
}
|
483
483
|
|
484
484
|
function useFlameRender(options) {
|
@@ -620,7 +620,7 @@ function walkTree(root, direction, data, totalViewTicks, rangeMin, rangeMax, wra
|
|
620
620
|
const stack = [];
|
621
621
|
stack.push({ item: root, levelOffset: 0 });
|
622
622
|
const pixelsPerTick = wrapperWidth * window.devicePixelRatio / totalViewTicks / (rangeMax - rangeMin);
|
623
|
-
let collapsedItemRendered =
|
623
|
+
let collapsedItemRendered = void 0;
|
624
624
|
while (stack.length > 0) {
|
625
625
|
const { item, levelOffset } = stack.shift();
|
626
626
|
let curBarTicks = item.value;
|
@@ -639,10 +639,10 @@ function walkTree(root, direction, data, totalViewTicks, rangeMin, rangeMax, wra
|
|
639
639
|
offsetModifier = direction === "children" ? -1 : 1;
|
640
640
|
skipRender = true;
|
641
641
|
} else {
|
642
|
-
collapsedItemRendered =
|
642
|
+
collapsedItemRendered = void 0;
|
643
643
|
}
|
644
644
|
} else {
|
645
|
-
collapsedItemRendered =
|
645
|
+
collapsedItemRendered = void 0;
|
646
646
|
}
|
647
647
|
if (!skipRender) {
|
648
648
|
const barX = getBarX(item.start, totalViewTicks, rangeMin, pixelsPerTick);
|
@@ -665,7 +665,7 @@ function useColorFunction(totalTicks, totalTicksRight, colorScheme, theme, muted
|
|
665
665
|
if (muted && !matchedLabels) {
|
666
666
|
return mutedColor;
|
667
667
|
}
|
668
|
-
const barColor = item.valueRight !==
|
668
|
+
const barColor = item.valueRight !== void 0 && (colorScheme === ColorSchemeDiff.Default || colorScheme === ColorSchemeDiff.DiffColorBlind) ? getBarColorByDiff(item.value, item.valueRight, totalTicks, totalTicksRight, colorScheme) : colorScheme === ColorScheme.ValueBased ? getBarColorByValue(item.value, totalTicks, rangeMin, rangeMax) : getBarColorByPackage(label, theme);
|
669
669
|
if (matchedLabels) {
|
670
670
|
return matchedLabels.has(label) ? barColor.toHslString() : mutedColor;
|
671
671
|
}
|
@@ -769,7 +769,7 @@ const FlameGraphCanvas = ({
|
|
769
769
|
});
|
770
770
|
const onGraphClick = react.useCallback(
|
771
771
|
(e) => {
|
772
|
-
setTooltipItem(
|
772
|
+
setTooltipItem(void 0);
|
773
773
|
const pixelsPerTick = graphRef.current.clientWidth / totalViewTicks / (rangeMax - rangeMin);
|
774
774
|
const item = convertPixelCoordinatesToBarCoordinates(
|
775
775
|
{ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },
|
@@ -789,7 +789,7 @@ const FlameGraphCanvas = ({
|
|
789
789
|
label: data.getLabel(item.itemIndexes[0])
|
790
790
|
});
|
791
791
|
} else {
|
792
|
-
setClickedItemData(
|
792
|
+
setClickedItemData(void 0);
|
793
793
|
}
|
794
794
|
},
|
795
795
|
[data, rangeMin, rangeMax, totalViewTicks, root, direction, depth, collapsedMap]
|
@@ -797,9 +797,9 @@ const FlameGraphCanvas = ({
|
|
797
797
|
const [mousePosition, setMousePosition] = react.useState();
|
798
798
|
const onGraphMouseMove = react.useCallback(
|
799
799
|
(e) => {
|
800
|
-
if (clickedItemData ===
|
801
|
-
setTooltipItem(
|
802
|
-
setMousePosition(
|
800
|
+
if (clickedItemData === void 0) {
|
801
|
+
setTooltipItem(void 0);
|
802
|
+
setMousePosition(void 0);
|
803
803
|
const pixelsPerTick = graphRef.current.clientWidth / totalViewTicks / (rangeMax - rangeMin);
|
804
804
|
const item = convertPixelCoordinatesToBarCoordinates(
|
805
805
|
{ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },
|
@@ -820,13 +820,13 @@ const FlameGraphCanvas = ({
|
|
820
820
|
[rangeMin, rangeMax, totalViewTicks, clickedItemData, setMousePosition, root, direction, depth, collapsedMap]
|
821
821
|
);
|
822
822
|
const onGraphMouseLeave = react.useCallback(() => {
|
823
|
-
setTooltipItem(
|
823
|
+
setTooltipItem(void 0);
|
824
824
|
}, []);
|
825
825
|
react.useEffect(() => {
|
826
826
|
const handleOnClick = (e) => {
|
827
827
|
var _a;
|
828
|
-
if (e.target instanceof HTMLElement && ((_a = e.target.parentElement) == null ?
|
829
|
-
setClickedItemData(
|
828
|
+
if (e.target instanceof HTMLElement && ((_a = e.target.parentElement) == null ? void 0 : _a.id) !== "flameGraphCanvasContainer_clickOutsideCheck") {
|
829
|
+
setClickedItemData(void 0);
|
830
830
|
}
|
831
831
|
};
|
832
832
|
window.addEventListener("click", handleOnClick);
|
@@ -850,7 +850,7 @@ const FlameGraphCanvas = ({
|
|
850
850
|
item: tooltipItem,
|
851
851
|
data,
|
852
852
|
totalTicks: totalViewTicks,
|
853
|
-
collapseConfig: tooltipItem ? collapsedMap.get(tooltipItem) :
|
853
|
+
collapseConfig: tooltipItem ? collapsedMap.get(tooltipItem) : void 0
|
854
854
|
}
|
855
855
|
),
|
856
856
|
!showFlameGraphOnly && clickedItemData && /* @__PURE__ */ jsxRuntime.jsx(
|
@@ -861,7 +861,7 @@ const FlameGraphCanvas = ({
|
|
861
861
|
collapsing,
|
862
862
|
collapseConfig: collapsedMap.get(clickedItemData.item),
|
863
863
|
onMenuItemClick: () => {
|
864
|
-
setClickedItemData(
|
864
|
+
setClickedItemData(void 0);
|
865
865
|
},
|
866
866
|
onItemFocus: () => {
|
867
867
|
setRangeMin(clickedItemData.item.start / totalViewTicks);
|
@@ -925,10 +925,10 @@ const convertPixelCoordinatesToBarCoordinates = (pos, root, direction, depth, pi
|
|
925
925
|
let next = root;
|
926
926
|
let currentLevel = direction === "children" ? 0 : depth - 1;
|
927
927
|
const levelIndex = Math.floor(pos.y / (PIXELS_PER_LEVEL / window.devicePixelRatio));
|
928
|
-
let found =
|
928
|
+
let found = void 0;
|
929
929
|
while (next) {
|
930
930
|
const node = next;
|
931
|
-
next =
|
931
|
+
next = void 0;
|
932
932
|
if (currentLevel === levelIndex) {
|
933
933
|
found = node;
|
934
934
|
break;
|
@@ -976,7 +976,7 @@ const FlameGraphMetadata = react.memo(
|
|
976
976
|
);
|
977
977
|
if (sandwichedLabel) {
|
978
978
|
parts.push(
|
979
|
-
/* @__PURE__ */ jsxRuntime.
|
979
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
980
980
|
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
|
981
981
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
|
982
982
|
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "gf-show-context" }),
|
@@ -994,18 +994,17 @@ const FlameGraphMetadata = react.memo(
|
|
994
994
|
}
|
995
995
|
)
|
996
996
|
] })
|
997
|
-
] }
|
997
|
+
] }, "sandwich")
|
998
998
|
);
|
999
999
|
}
|
1000
1000
|
if (focusedItem) {
|
1001
|
-
const percentValue =
|
1002
|
-
const iconName = percentValue > 0 ? "eye" : "exclamation-circle";
|
1001
|
+
const percentValue = Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100;
|
1003
1002
|
parts.push(
|
1004
|
-
/* @__PURE__ */ jsxRuntime.
|
1003
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
1005
1004
|
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
|
1006
1005
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
|
1007
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name:
|
1008
|
-
"
|
1006
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "eye" }),
|
1007
|
+
" ",
|
1009
1008
|
percentValue,
|
1010
1009
|
"% of total",
|
1011
1010
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -1020,7 +1019,7 @@ const FlameGraphMetadata = react.memo(
|
|
1020
1019
|
}
|
1021
1020
|
)
|
1022
1021
|
] })
|
1023
|
-
] }
|
1022
|
+
] }, "focus")
|
1024
1023
|
);
|
1025
1024
|
}
|
1026
1025
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.metadata, children: parts });
|
@@ -1046,10 +1045,8 @@ const getStyles$4 = (theme) => ({
|
|
1046
1045
|
margin: theme.spacing(0, 0.5)
|
1047
1046
|
}),
|
1048
1047
|
metadata: css.css({
|
1049
|
-
|
1050
|
-
|
1051
|
-
justifyContent: "center",
|
1052
|
-
margin: "8px 0"
|
1048
|
+
margin: "8px 0",
|
1049
|
+
textAlign: "center"
|
1053
1050
|
}),
|
1054
1051
|
metadataPillName: css.css({
|
1055
1052
|
label: "metadataPillName",
|
@@ -1095,14 +1092,14 @@ const FlameGraph = ({
|
|
1095
1092
|
if (data) {
|
1096
1093
|
let levels2 = data.getLevels();
|
1097
1094
|
let totalProfileTicks2 = levels2.length ? levels2[0][0].value : 0;
|
1098
|
-
let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight :
|
1095
|
+
let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight : void 0;
|
1099
1096
|
let totalViewTicks2 = totalProfileTicks2;
|
1100
|
-
let levelsCallers2 =
|
1097
|
+
let levelsCallers2 = void 0;
|
1101
1098
|
if (sandwichItem) {
|
1102
1099
|
const [callers, callees] = data.getSandwichLevels(sandwichItem);
|
1103
1100
|
levels2 = callees;
|
1104
1101
|
levelsCallers2 = callers;
|
1105
|
-
totalViewTicks2 = (_c = (_b = (_a = callees[0]) == null ?
|
1102
|
+
totalViewTicks2 = (_c = (_b = (_a = callees[0]) == null ? void 0 : _a[0]) == null ? void 0 : _b.value) != null ? _c : 0;
|
1106
1103
|
}
|
1107
1104
|
setLevels(levels2);
|
1108
1105
|
setLevelsCallers(levelsCallers2);
|
@@ -1137,45 +1134,40 @@ const FlameGraph = ({
|
|
1137
1134
|
search,
|
1138
1135
|
selectedView
|
1139
1136
|
};
|
1140
|
-
|
1141
|
-
|
1142
|
-
|
1143
|
-
|
1144
|
-
/* @__PURE__ */ jsxRuntime.
|
1145
|
-
"Callers",
|
1146
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
|
1147
|
-
] }),
|
1148
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
1149
|
-
FlameGraphCanvas,
|
1150
|
-
{
|
1151
|
-
...commonCanvasProps,
|
1152
|
-
root: levelsCallers[levelsCallers.length - 1][0],
|
1153
|
-
depth: levelsCallers.length,
|
1154
|
-
direction: "parents",
|
1155
|
-
collapsing: false
|
1156
|
-
}
|
1157
|
-
)
|
1137
|
+
const canvas = levelsCallers ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
1138
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
|
1139
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
|
1140
|
+
"Callers",
|
1141
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
|
1158
1142
|
] }),
|
1159
|
-
/* @__PURE__ */ jsxRuntime.
|
1160
|
-
|
1161
|
-
|
1162
|
-
|
1163
|
-
|
1164
|
-
|
1165
|
-
|
1166
|
-
|
1167
|
-
|
1168
|
-
|
1169
|
-
|
1170
|
-
|
1171
|
-
|
1172
|
-
|
1173
|
-
|
1174
|
-
] })
|
1175
|
-
|
1176
|
-
|
1177
|
-
|
1178
|
-
|
1143
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
1144
|
+
FlameGraphCanvas,
|
1145
|
+
{
|
1146
|
+
...commonCanvasProps,
|
1147
|
+
root: levelsCallers[levelsCallers.length - 1][0],
|
1148
|
+
depth: levelsCallers.length,
|
1149
|
+
direction: "parents",
|
1150
|
+
collapsing: false
|
1151
|
+
}
|
1152
|
+
)
|
1153
|
+
] }),
|
1154
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
|
1155
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
|
1156
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
|
1157
|
+
"Callees"
|
1158
|
+
] }),
|
1159
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
1160
|
+
FlameGraphCanvas,
|
1161
|
+
{
|
1162
|
+
...commonCanvasProps,
|
1163
|
+
root: levels[0][0],
|
1164
|
+
depth: levels.length,
|
1165
|
+
direction: "children",
|
1166
|
+
collapsing: false
|
1167
|
+
}
|
1168
|
+
)
|
1169
|
+
] })
|
1170
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
|
1179
1171
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.graph, children: [
|
1180
1172
|
/* @__PURE__ */ jsxRuntime.jsx(
|
1181
1173
|
FlameGraphMetadata,
|
@@ -1227,7 +1219,7 @@ function mergeParentSubtrees(roots, data) {
|
|
1227
1219
|
function getParentSubtrees(roots) {
|
1228
1220
|
return roots.map((r) => {
|
1229
1221
|
var _a, _b;
|
1230
|
-
if (!((_a = r.parents) == null ?
|
1222
|
+
if (!((_a = r.parents) == null ? void 0 : _a.length)) {
|
1231
1223
|
return r;
|
1232
1224
|
}
|
1233
1225
|
const newRoot = {
|
@@ -1248,7 +1240,7 @@ function getParentSubtrees(roots) {
|
|
1248
1240
|
newNode.value = args.child.value;
|
1249
1241
|
args.child.parents = [newNode];
|
1250
1242
|
}
|
1251
|
-
if ((_b = args.parent.parents) == null ?
|
1243
|
+
if ((_b = args.parent.parents) == null ? void 0 : _b.length) {
|
1252
1244
|
stack.push({ child: newNode, parent: args.parent.parents[0] });
|
1253
1245
|
}
|
1254
1246
|
}
|
@@ -1260,7 +1252,7 @@ function mergeSubtrees(roots, data, direction = "children") {
|
|
1260
1252
|
const oppositeDirection = direction === "parents" ? "children" : "parents";
|
1261
1253
|
const levels = [];
|
1262
1254
|
const stack = [
|
1263
|
-
{ previous:
|
1255
|
+
{ previous: void 0, items: roots, level: 0 }
|
1264
1256
|
];
|
1265
1257
|
while (stack.length) {
|
1266
1258
|
const args = stack.shift();
|
@@ -1279,7 +1271,7 @@ function mergeSubtrees(roots, data, direction = "children") {
|
|
1279
1271
|
levels[args.level].push(newItem);
|
1280
1272
|
if (args.previous) {
|
1281
1273
|
newItem[oppositeDirection] = [args.previous];
|
1282
|
-
const prevSiblingsVal = ((_a = args.previous[direction]) == null ?
|
1274
|
+
const prevSiblingsVal = ((_a = args.previous[direction]) == null ? void 0 : _a.reduce((acc, node) => {
|
1283
1275
|
return acc + node.value;
|
1284
1276
|
}, 0)) || 0;
|
1285
1277
|
newItem.start = args.previous.start + prevSiblingsVal;
|
@@ -1305,11 +1297,11 @@ function mergeSubtrees(roots, data, direction = "children") {
|
|
1305
1297
|
function nestedSetToLevels(container, options) {
|
1306
1298
|
const levels = [];
|
1307
1299
|
let offset = 0;
|
1308
|
-
let parent =
|
1300
|
+
let parent = void 0;
|
1309
1301
|
const uniqueLabels = {};
|
1310
1302
|
for (let i = 0; i < container.data.length; i++) {
|
1311
1303
|
const currentLevel = container.getLevel(i);
|
1312
|
-
const prevLevel = i > 0 ? container.getLevel(i - 1) :
|
1304
|
+
const prevLevel = i > 0 ? container.getLevel(i - 1) : void 0;
|
1313
1305
|
levels[currentLevel] = levels[currentLevel] || [];
|
1314
1306
|
if (prevLevel && prevLevel >= currentLevel) {
|
1315
1307
|
const lastSibling = levels[currentLevel][levels[currentLevel].length - 1];
|
@@ -1319,7 +1311,7 @@ function nestedSetToLevels(container, options) {
|
|
1319
1311
|
const newItem = {
|
1320
1312
|
itemIndexes: [i],
|
1321
1313
|
value: container.getValue(i) + container.getValueRight(i),
|
1322
|
-
valueRight: container.isDiffFlamegraph() ? container.getValueRight(i) :
|
1314
|
+
valueRight: container.isDiffFlamegraph() ? container.getValueRight(i) : void 0,
|
1323
1315
|
start: offset,
|
1324
1316
|
parents: parent && [parent],
|
1325
1317
|
children: [],
|
@@ -1336,8 +1328,8 @@ function nestedSetToLevels(container, options) {
|
|
1336
1328
|
parent = newItem;
|
1337
1329
|
levels[currentLevel].push(newItem);
|
1338
1330
|
}
|
1339
|
-
const collapsedMapContainer = new CollapsedMapBuilder(options == null ?
|
1340
|
-
if (options == null ?
|
1331
|
+
const collapsedMapContainer = new CollapsedMapBuilder(options == null ? void 0 : options.collapsingThreshold);
|
1332
|
+
if (options == null ? void 0 : options.collapsing) {
|
1341
1333
|
collapsedMapContainer.addTree(levels[0][0]);
|
1342
1334
|
}
|
1343
1335
|
return [levels, uniqueLabels, collapsedMapContainer.getCollapsedMap()];
|
@@ -1384,7 +1376,7 @@ class CollapsedMapBuilder {
|
|
1384
1376
|
constructor(threshold) {
|
1385
1377
|
this.map = /* @__PURE__ */ new Map();
|
1386
1378
|
this.threshold = 0.99;
|
1387
|
-
if (threshold !==
|
1379
|
+
if (threshold !== void 0) {
|
1388
1380
|
this.threshold = threshold;
|
1389
1381
|
}
|
1390
1382
|
}
|
@@ -1393,7 +1385,7 @@ class CollapsedMapBuilder {
|
|
1393
1385
|
const stack = [root];
|
1394
1386
|
while (stack.length) {
|
1395
1387
|
const current = stack.shift();
|
1396
|
-
if ((_a = current.parents) == null ?
|
1388
|
+
if ((_a = current.parents) == null ? void 0 : _a.length) {
|
1397
1389
|
this.addItem(current, current.parents[0]);
|
1398
1390
|
}
|
1399
1391
|
if (current.children.length) {
|
@@ -1441,7 +1433,7 @@ function checkFields(data) {
|
|
1441
1433
|
const wrongTypeFields = [];
|
1442
1434
|
for (const field of fields) {
|
1443
1435
|
const [name, types] = field;
|
1444
|
-
const frameField = data == null ?
|
1436
|
+
const frameField = data == null ? void 0 : data.fields.find((f) => f.name === name);
|
1445
1437
|
if (!frameField) {
|
1446
1438
|
missingFields.push(name);
|
1447
1439
|
continue;
|
@@ -1456,7 +1448,7 @@ function checkFields(data) {
|
|
1456
1448
|
missingFields
|
1457
1449
|
};
|
1458
1450
|
}
|
1459
|
-
return
|
1451
|
+
return void 0;
|
1460
1452
|
}
|
1461
1453
|
class FlameGraphDataContainer {
|
1462
1454
|
constructor(data, options, theme = data$1.createTheme()) {
|
@@ -1478,7 +1470,7 @@ class FlameGraphDataContainer {
|
|
1478
1470
|
"Malformed dataFrame: both valueRight and selfRight has to be present if one of them is present."
|
1479
1471
|
);
|
1480
1472
|
}
|
1481
|
-
const enumConfig = (_c = (_b = (_a = this.labelField) == null ?
|
1473
|
+
const enumConfig = (_c = (_b = (_a = this.labelField) == null ? void 0 : _a.config) == null ? void 0 : _b.type) == null ? void 0 : _c.enum;
|
1482
1474
|
if (enumConfig) {
|
1483
1475
|
this.labelDisplayProcessor = data$1.getDisplayProcessor({ field: this.labelField, theme });
|
1484
1476
|
this.uniqueLabels = enumConfig.text || [];
|
@@ -1536,7 +1528,7 @@ class FlameGraphDataContainer {
|
|
1536
1528
|
}
|
1537
1529
|
getSandwichLevels(label) {
|
1538
1530
|
const nodes = this.getNodesWithLabel(label);
|
1539
|
-
if (!(nodes == null ?
|
1531
|
+
if (!(nodes == null ? void 0 : nodes.length)) {
|
1540
1532
|
return [[], []];
|
1541
1533
|
}
|
1542
1534
|
const callers = mergeParentSubtrees(nodes, this);
|
@@ -1903,7 +1895,7 @@ const FlameGraphTopTableContainer = react.memo(
|
|
1903
1895
|
initialSortBy: sort,
|
1904
1896
|
onSortByChange: (s) => {
|
1905
1897
|
if (s && s.length) {
|
1906
|
-
onTableSort == null ?
|
1898
|
+
onTableSort == null ? void 0 : onTableSort(s[0].displayName + "_" + (s[0].desc ? "desc" : "asc"));
|
1907
1899
|
}
|
1908
1900
|
setSort(s);
|
1909
1901
|
},
|
@@ -1953,7 +1945,7 @@ function buildTableDataFrame(data, table, width, onSymbolClick, onSearch, onSand
|
|
1953
1945
|
];
|
1954
1946
|
const levels = data.getLevels();
|
1955
1947
|
const totalTicks = levels.length ? levels[0][0].value : 0;
|
1956
|
-
const totalTicksRight = levels.length ? levels[0][0].valueRight :
|
1948
|
+
const totalTicksRight = levels.length ? levels[0][0].valueRight : void 0;
|
1957
1949
|
for (let key in table) {
|
1958
1950
|
actionField.values.push(null);
|
1959
1951
|
symbolField.values.push(key);
|
@@ -2048,7 +2040,7 @@ function createActionField(onSandwich, onSearch, search, sandwichItem) {
|
|
2048
2040
|
function ActionCell(props) {
|
2049
2041
|
var _a;
|
2050
2042
|
const styles = getStylesActionCell();
|
2051
|
-
const symbol = (_a = props.frame.fields.find((f) => f.name === "Symbol")) == null ?
|
2043
|
+
const symbol = (_a = props.frame.fields.find((f) => f.name === "Symbol")) == null ? void 0 : _a.values[props.rowIndex];
|
2052
2044
|
const isSearched = props.search === symbol;
|
2053
2045
|
const isSandwiched = props.sandwichItem === symbol;
|
2054
2046
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actionCellWrapper, children: [
|
@@ -2074,7 +2066,7 @@ function ActionCell(props) {
|
|
2074
2066
|
variant: isSandwiched ? "primary" : "secondary",
|
2075
2067
|
"aria-label": isSandwiched ? "Remove from sandwich view" : "Show in sandwich view",
|
2076
2068
|
onClick: () => {
|
2077
|
-
props.onSandwich(isSandwiched ?
|
2069
|
+
props.onSandwich(isSandwiched ? void 0 : symbol);
|
2078
2070
|
}
|
2079
2071
|
}
|
2080
2072
|
)
|
@@ -2118,7 +2110,6 @@ const FlameGraphContainer = ({
|
|
2118
2110
|
vertical,
|
2119
2111
|
showFlameGraphOnly,
|
2120
2112
|
disableCollapsing,
|
2121
|
-
keepFocusOnDataChange,
|
2122
2113
|
getExtraContextMenuButtons
|
2123
2114
|
}) => {
|
2124
2115
|
const [focusedItemData, setFocusedItemData] = react.useState();
|
@@ -2148,50 +2139,23 @@ const FlameGraphContainer = ({
|
|
2148
2139
|
}
|
2149
2140
|
}, [selectedView, setSelectedView, containerWidth, vertical]);
|
2150
2141
|
const resetFocus = react.useCallback(() => {
|
2151
|
-
setFocusedItemData(
|
2142
|
+
setFocusedItemData(void 0);
|
2152
2143
|
setRangeMin(0);
|
2153
2144
|
setRangeMax(1);
|
2154
2145
|
}, [setFocusedItemData, setRangeMax, setRangeMin]);
|
2155
|
-
|
2156
|
-
setSandwichItem(
|
2157
|
-
}
|
2146
|
+
function resetSandwich() {
|
2147
|
+
setSandwichItem(void 0);
|
2148
|
+
}
|
2158
2149
|
react.useEffect(() => {
|
2159
|
-
|
2160
|
-
|
2161
|
-
|
2162
|
-
resetSandwich();
|
2163
|
-
return;
|
2164
|
-
}
|
2165
|
-
if (dataContainer && focusedItemData) {
|
2166
|
-
const item = (_a = dataContainer.getNodesWithLabel(focusedItemData.label)) == null ? undefined : _a[0];
|
2167
|
-
if (item) {
|
2168
|
-
setFocusedItemData({ ...focusedItemData, item });
|
2169
|
-
const levels = dataContainer.getLevels();
|
2170
|
-
const totalViewTicks = levels.length ? levels[0][0].value : 0;
|
2171
|
-
setRangeMin(item.start / totalViewTicks);
|
2172
|
-
setRangeMax((item.start + item.value) / totalViewTicks);
|
2173
|
-
} else {
|
2174
|
-
setFocusedItemData({
|
2175
|
-
...focusedItemData,
|
2176
|
-
item: {
|
2177
|
-
start: 0,
|
2178
|
-
value: 0,
|
2179
|
-
itemIndexes: [],
|
2180
|
-
children: [],
|
2181
|
-
level: 0
|
2182
|
-
}
|
2183
|
-
});
|
2184
|
-
setRangeMin(0);
|
2185
|
-
setRangeMax(1);
|
2186
|
-
}
|
2187
|
-
}
|
2188
|
-
}, [dataContainer, keepFocusOnDataChange]);
|
2150
|
+
resetFocus();
|
2151
|
+
resetSandwich();
|
2152
|
+
}, [data, resetFocus]);
|
2189
2153
|
const onSymbolClick = react.useCallback(
|
2190
2154
|
(symbol) => {
|
2191
2155
|
if (search === symbol) {
|
2192
2156
|
setSearch("");
|
2193
2157
|
} else {
|
2194
|
-
onTableSymbolClick == null ?
|
2158
|
+
onTableSymbolClick == null ? void 0 : onTableSymbolClick(symbol);
|
2195
2159
|
setSearch(symbol);
|
2196
2160
|
resetFocus();
|
2197
2161
|
}
|
@@ -2274,7 +2238,7 @@ const FlameGraphContainer = ({
|
|
2274
2238
|
selectedView,
|
2275
2239
|
setSelectedView: (view) => {
|
2276
2240
|
setSelectedView(view);
|
2277
|
-
onViewSelected == null ?
|
2241
|
+
onViewSelected == null ? void 0 : onViewSelected(view);
|
2278
2242
|
},
|
2279
2243
|
containerWidth,
|
2280
2244
|
onReset: () => {
|
@@ -2284,7 +2248,7 @@ const FlameGraphContainer = ({
|
|
2284
2248
|
textAlign,
|
2285
2249
|
onTextAlignChange: (align) => {
|
2286
2250
|
setTextAlign(align);
|
2287
|
-
onTextAlignSelected == null ?
|
2251
|
+
onTextAlignSelected == null ? void 0 : onTextAlignSelected(align);
|
2288
2252
|
},
|
2289
2253
|
showResetButton: Boolean(focusedItemData || sandwichItem),
|
2290
2254
|
colorScheme,
|
@@ -2302,7 +2266,7 @@ const FlameGraphContainer = ({
|
|
2302
2266
|
);
|
2303
2267
|
};
|
2304
2268
|
function useColorScheme(dataContainer) {
|
2305
|
-
const defaultColorScheme = (dataContainer == null ?
|
2269
|
+
const defaultColorScheme = (dataContainer == null ? void 0 : dataContainer.isDiffFlamegraph()) ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
|
2306
2270
|
const [colorScheme, setColorScheme] = react.useState(defaultColorScheme);
|
2307
2271
|
react.useEffect(() => {
|
2308
2272
|
setColorScheme(defaultColorScheme);
|
@@ -2321,7 +2285,7 @@ function useLabelSearch(search, data) {
|
|
2321
2285
|
}
|
2322
2286
|
return foundLabels;
|
2323
2287
|
}
|
2324
|
-
return
|
2288
|
+
return void 0;
|
2325
2289
|
}, [search, data]);
|
2326
2290
|
}
|
2327
2291
|
function getStyles(theme) {
|