@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/dist/index.js CHANGED
@@ -56,7 +56,7 @@ const FlameGraphContextMenu = ({
56
56
  search
57
57
  }) => {
58
58
  function renderItems() {
59
- const extraButtons = (getExtraContextMenuButtons == null ? undefined : getExtraContextMenuButtons(itemData, data.data, {
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 ? undefined : _a.packageName) || "";
478
+ return ((_a = match.groups) == null ? void 0 : _a.packageName) || "";
479
479
  }
480
480
  }
481
- return undefined;
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 = undefined;
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 = undefined;
642
+ collapsedItemRendered = void 0;
643
643
  }
644
644
  } else {
645
- collapsedItemRendered = undefined;
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 !== undefined && (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);
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(undefined);
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(undefined);
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 === undefined) {
801
- setTooltipItem(undefined);
802
- setMousePosition(undefined);
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(undefined);
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 ? undefined : _a.id) !== "flameGraphCanvasContainer_clickOutsideCheck") {
829
- setClickedItemData(undefined);
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) : undefined
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(undefined);
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 = undefined;
928
+ let found = void 0;
929
929
  while (next) {
930
930
  const node = next;
931
- next = undefined;
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.jsx(ui.Tooltip, { content: sandwichedLabel, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
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
- ] }) }, "sandwich")
997
+ ] }, "sandwich")
998
998
  );
999
999
  }
1000
1000
  if (focusedItem) {
1001
- const percentValue = totalTicks > 0 ? Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100 : 0;
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.jsx(ui.Tooltip, { content: focusedItem.label, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
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: iconName }),
1008
- "\xA0",
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
- ] }) }, "focus")
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
- display: "flex",
1050
- alignItems: "center",
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 : undefined;
1095
+ let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight : void 0;
1099
1096
  let totalViewTicks2 = totalProfileTicks2;
1100
- let levelsCallers2 = undefined;
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 ? undefined : _a[0]) == null ? undefined : _b.value) != null ? _c : 0;
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
- let canvas = null;
1141
- if (levelsCallers == null ? undefined : levelsCallers.length) {
1142
- canvas = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1143
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
1144
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
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.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
1160
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
1161
- /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
1162
- "Callees"
1163
- ] }),
1164
- /* @__PURE__ */ jsxRuntime.jsx(
1165
- FlameGraphCanvas,
1166
- {
1167
- ...commonCanvasProps,
1168
- root: levels[0][0],
1169
- depth: levels.length,
1170
- direction: "children",
1171
- collapsing: false
1172
- }
1173
- )
1174
- ] })
1175
- ] });
1176
- } else if (levels == null ? undefined : levels.length) {
1177
- canvas = /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
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 ? undefined : _a.length)) {
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 ? undefined : _b.length) {
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: undefined, items: roots, level: 0 }
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 ? undefined : _a.reduce((acc, node) => {
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 = undefined;
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) : undefined;
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) : undefined,
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 ? undefined : options.collapsingThreshold);
1340
- if (options == null ? undefined : options.collapsing) {
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 !== undefined) {
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 ? undefined : _a.length) {
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 ? undefined : data.fields.find((f) => f.name === name);
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 undefined;
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 ? undefined : _a.config) == null ? undefined : _b.type) == null ? undefined : _c.enum;
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 ? undefined : nodes.length)) {
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 ? undefined : onTableSort(s[0].displayName + "_" + (s[0].desc ? "desc" : "asc"));
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 : undefined;
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 ? undefined : _a.values[props.rowIndex];
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 ? undefined : symbol);
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(undefined);
2142
+ setFocusedItemData(void 0);
2152
2143
  setRangeMin(0);
2153
2144
  setRangeMax(1);
2154
2145
  }, [setFocusedItemData, setRangeMax, setRangeMin]);
2155
- const resetSandwich = react.useCallback(() => {
2156
- setSandwichItem(undefined);
2157
- }, [setSandwichItem]);
2146
+ function resetSandwich() {
2147
+ setSandwichItem(void 0);
2148
+ }
2158
2149
  react.useEffect(() => {
2159
- var _a;
2160
- if (!keepFocusOnDataChange) {
2161
- resetFocus();
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 ? undefined : onTableSymbolClick(symbol);
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 ? undefined : onViewSelected(view);
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 ? undefined : onTextAlignSelected(align);
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 ? undefined : dataContainer.isDiffFlamegraph()) ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
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 undefined;
2288
+ return void 0;
2325
2289
  }, [search, data]);
2326
2290
  }
2327
2291
  function getStyles(theme) {