@grafana/flamegraph 11.6.0-224787 → 11.6.0-225357

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 ? void 0 : getExtraContextMenuButtons(itemData, data.data, {
59
+ const extraButtons = (getExtraContextMenuButtons == null ? undefined : 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 ? void 0 : _a.packageName) || "";
478
+ return ((_a = match.groups) == null ? undefined : _a.packageName) || "";
479
479
  }
480
480
  }
481
- return void 0;
481
+ return undefined;
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 = void 0;
623
+ let collapsedItemRendered = undefined;
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 = void 0;
642
+ collapsedItemRendered = undefined;
643
643
  }
644
644
  } else {
645
- collapsedItemRendered = void 0;
645
+ collapsedItemRendered = undefined;
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 !== 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);
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);
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(void 0);
772
+ setTooltipItem(undefined);
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(void 0);
792
+ setClickedItemData(undefined);
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 === void 0) {
801
- setTooltipItem(void 0);
802
- setMousePosition(void 0);
800
+ if (clickedItemData === undefined) {
801
+ setTooltipItem(undefined);
802
+ setMousePosition(undefined);
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(void 0);
823
+ setTooltipItem(undefined);
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 ? void 0 : _a.id) !== "flameGraphCanvasContainer_clickOutsideCheck") {
829
- setClickedItemData(void 0);
828
+ if (e.target instanceof HTMLElement && ((_a = e.target.parentElement) == null ? undefined : _a.id) !== "flameGraphCanvasContainer_clickOutsideCheck") {
829
+ setClickedItemData(undefined);
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) : void 0
853
+ collapseConfig: tooltipItem ? collapsedMap.get(tooltipItem) : undefined
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(void 0);
864
+ setClickedItemData(undefined);
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 = void 0;
928
+ let found = undefined;
929
929
  while (next) {
930
930
  const node = next;
931
- next = void 0;
931
+ next = undefined;
932
932
  if (currentLevel === levelIndex) {
933
933
  found = node;
934
934
  break;
@@ -1095,14 +1095,14 @@ const FlameGraph = ({
1095
1095
  if (data) {
1096
1096
  let levels2 = data.getLevels();
1097
1097
  let totalProfileTicks2 = levels2.length ? levels2[0][0].value : 0;
1098
- let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight : void 0;
1098
+ let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight : undefined;
1099
1099
  let totalViewTicks2 = totalProfileTicks2;
1100
- let levelsCallers2 = void 0;
1100
+ let levelsCallers2 = undefined;
1101
1101
  if (sandwichItem) {
1102
1102
  const [callers, callees] = data.getSandwichLevels(sandwichItem);
1103
1103
  levels2 = callees;
1104
1104
  levelsCallers2 = callers;
1105
- totalViewTicks2 = (_c = (_b = (_a = callees[0]) == null ? void 0 : _a[0]) == null ? void 0 : _b.value) != null ? _c : 0;
1105
+ totalViewTicks2 = (_c = (_b = (_a = callees[0]) == null ? undefined : _a[0]) == null ? undefined : _b.value) != null ? _c : 0;
1106
1106
  }
1107
1107
  setLevels(levels2);
1108
1108
  setLevelsCallers(levelsCallers2);
@@ -1138,7 +1138,7 @@ const FlameGraph = ({
1138
1138
  selectedView
1139
1139
  };
1140
1140
  let canvas = null;
1141
- if (levelsCallers == null ? void 0 : levelsCallers.length) {
1141
+ if (levelsCallers == null ? undefined : levelsCallers.length) {
1142
1142
  canvas = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1143
1143
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
1144
1144
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
@@ -1173,7 +1173,7 @@ const FlameGraph = ({
1173
1173
  )
1174
1174
  ] })
1175
1175
  ] });
1176
- } else if (levels == null ? void 0 : levels.length) {
1176
+ } else if (levels == null ? undefined : levels.length) {
1177
1177
  canvas = /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
1178
1178
  }
1179
1179
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.graph, children: [
@@ -1227,7 +1227,7 @@ function mergeParentSubtrees(roots, data) {
1227
1227
  function getParentSubtrees(roots) {
1228
1228
  return roots.map((r) => {
1229
1229
  var _a, _b;
1230
- if (!((_a = r.parents) == null ? void 0 : _a.length)) {
1230
+ if (!((_a = r.parents) == null ? undefined : _a.length)) {
1231
1231
  return r;
1232
1232
  }
1233
1233
  const newRoot = {
@@ -1248,7 +1248,7 @@ function getParentSubtrees(roots) {
1248
1248
  newNode.value = args.child.value;
1249
1249
  args.child.parents = [newNode];
1250
1250
  }
1251
- if ((_b = args.parent.parents) == null ? void 0 : _b.length) {
1251
+ if ((_b = args.parent.parents) == null ? undefined : _b.length) {
1252
1252
  stack.push({ child: newNode, parent: args.parent.parents[0] });
1253
1253
  }
1254
1254
  }
@@ -1260,7 +1260,7 @@ function mergeSubtrees(roots, data, direction = "children") {
1260
1260
  const oppositeDirection = direction === "parents" ? "children" : "parents";
1261
1261
  const levels = [];
1262
1262
  const stack = [
1263
- { previous: void 0, items: roots, level: 0 }
1263
+ { previous: undefined, items: roots, level: 0 }
1264
1264
  ];
1265
1265
  while (stack.length) {
1266
1266
  const args = stack.shift();
@@ -1279,7 +1279,7 @@ function mergeSubtrees(roots, data, direction = "children") {
1279
1279
  levels[args.level].push(newItem);
1280
1280
  if (args.previous) {
1281
1281
  newItem[oppositeDirection] = [args.previous];
1282
- const prevSiblingsVal = ((_a = args.previous[direction]) == null ? void 0 : _a.reduce((acc, node) => {
1282
+ const prevSiblingsVal = ((_a = args.previous[direction]) == null ? undefined : _a.reduce((acc, node) => {
1283
1283
  return acc + node.value;
1284
1284
  }, 0)) || 0;
1285
1285
  newItem.start = args.previous.start + prevSiblingsVal;
@@ -1305,11 +1305,11 @@ function mergeSubtrees(roots, data, direction = "children") {
1305
1305
  function nestedSetToLevels(container, options) {
1306
1306
  const levels = [];
1307
1307
  let offset = 0;
1308
- let parent = void 0;
1308
+ let parent = undefined;
1309
1309
  const uniqueLabels = {};
1310
1310
  for (let i = 0; i < container.data.length; i++) {
1311
1311
  const currentLevel = container.getLevel(i);
1312
- const prevLevel = i > 0 ? container.getLevel(i - 1) : void 0;
1312
+ const prevLevel = i > 0 ? container.getLevel(i - 1) : undefined;
1313
1313
  levels[currentLevel] = levels[currentLevel] || [];
1314
1314
  if (prevLevel && prevLevel >= currentLevel) {
1315
1315
  const lastSibling = levels[currentLevel][levels[currentLevel].length - 1];
@@ -1319,7 +1319,7 @@ function nestedSetToLevels(container, options) {
1319
1319
  const newItem = {
1320
1320
  itemIndexes: [i],
1321
1321
  value: container.getValue(i) + container.getValueRight(i),
1322
- valueRight: container.isDiffFlamegraph() ? container.getValueRight(i) : void 0,
1322
+ valueRight: container.isDiffFlamegraph() ? container.getValueRight(i) : undefined,
1323
1323
  start: offset,
1324
1324
  parents: parent && [parent],
1325
1325
  children: [],
@@ -1336,8 +1336,8 @@ function nestedSetToLevels(container, options) {
1336
1336
  parent = newItem;
1337
1337
  levels[currentLevel].push(newItem);
1338
1338
  }
1339
- const collapsedMapContainer = new CollapsedMapBuilder(options == null ? void 0 : options.collapsingThreshold);
1340
- if (options == null ? void 0 : options.collapsing) {
1339
+ const collapsedMapContainer = new CollapsedMapBuilder(options == null ? undefined : options.collapsingThreshold);
1340
+ if (options == null ? undefined : options.collapsing) {
1341
1341
  collapsedMapContainer.addTree(levels[0][0]);
1342
1342
  }
1343
1343
  return [levels, uniqueLabels, collapsedMapContainer.getCollapsedMap()];
@@ -1384,7 +1384,7 @@ class CollapsedMapBuilder {
1384
1384
  constructor(threshold) {
1385
1385
  this.map = /* @__PURE__ */ new Map();
1386
1386
  this.threshold = 0.99;
1387
- if (threshold !== void 0) {
1387
+ if (threshold !== undefined) {
1388
1388
  this.threshold = threshold;
1389
1389
  }
1390
1390
  }
@@ -1393,7 +1393,7 @@ class CollapsedMapBuilder {
1393
1393
  const stack = [root];
1394
1394
  while (stack.length) {
1395
1395
  const current = stack.shift();
1396
- if ((_a = current.parents) == null ? void 0 : _a.length) {
1396
+ if ((_a = current.parents) == null ? undefined : _a.length) {
1397
1397
  this.addItem(current, current.parents[0]);
1398
1398
  }
1399
1399
  if (current.children.length) {
@@ -1441,7 +1441,7 @@ function checkFields(data) {
1441
1441
  const wrongTypeFields = [];
1442
1442
  for (const field of fields) {
1443
1443
  const [name, types] = field;
1444
- const frameField = data == null ? void 0 : data.fields.find((f) => f.name === name);
1444
+ const frameField = data == null ? undefined : data.fields.find((f) => f.name === name);
1445
1445
  if (!frameField) {
1446
1446
  missingFields.push(name);
1447
1447
  continue;
@@ -1456,7 +1456,7 @@ function checkFields(data) {
1456
1456
  missingFields
1457
1457
  };
1458
1458
  }
1459
- return void 0;
1459
+ return undefined;
1460
1460
  }
1461
1461
  class FlameGraphDataContainer {
1462
1462
  constructor(data, options, theme = data$1.createTheme()) {
@@ -1478,7 +1478,7 @@ class FlameGraphDataContainer {
1478
1478
  "Malformed dataFrame: both valueRight and selfRight has to be present if one of them is present."
1479
1479
  );
1480
1480
  }
1481
- const enumConfig = (_c = (_b = (_a = this.labelField) == null ? void 0 : _a.config) == null ? void 0 : _b.type) == null ? void 0 : _c.enum;
1481
+ const enumConfig = (_c = (_b = (_a = this.labelField) == null ? undefined : _a.config) == null ? undefined : _b.type) == null ? undefined : _c.enum;
1482
1482
  if (enumConfig) {
1483
1483
  this.labelDisplayProcessor = data$1.getDisplayProcessor({ field: this.labelField, theme });
1484
1484
  this.uniqueLabels = enumConfig.text || [];
@@ -1536,7 +1536,7 @@ class FlameGraphDataContainer {
1536
1536
  }
1537
1537
  getSandwichLevels(label) {
1538
1538
  const nodes = this.getNodesWithLabel(label);
1539
- if (!(nodes == null ? void 0 : nodes.length)) {
1539
+ if (!(nodes == null ? undefined : nodes.length)) {
1540
1540
  return [[], []];
1541
1541
  }
1542
1542
  const callers = mergeParentSubtrees(nodes, this);
@@ -1903,7 +1903,7 @@ const FlameGraphTopTableContainer = react.memo(
1903
1903
  initialSortBy: sort,
1904
1904
  onSortByChange: (s) => {
1905
1905
  if (s && s.length) {
1906
- onTableSort == null ? void 0 : onTableSort(s[0].displayName + "_" + (s[0].desc ? "desc" : "asc"));
1906
+ onTableSort == null ? undefined : onTableSort(s[0].displayName + "_" + (s[0].desc ? "desc" : "asc"));
1907
1907
  }
1908
1908
  setSort(s);
1909
1909
  },
@@ -1953,7 +1953,7 @@ function buildTableDataFrame(data, table, width, onSymbolClick, onSearch, onSand
1953
1953
  ];
1954
1954
  const levels = data.getLevels();
1955
1955
  const totalTicks = levels.length ? levels[0][0].value : 0;
1956
- const totalTicksRight = levels.length ? levels[0][0].valueRight : void 0;
1956
+ const totalTicksRight = levels.length ? levels[0][0].valueRight : undefined;
1957
1957
  for (let key in table) {
1958
1958
  actionField.values.push(null);
1959
1959
  symbolField.values.push(key);
@@ -2048,7 +2048,7 @@ function createActionField(onSandwich, onSearch, search, sandwichItem) {
2048
2048
  function ActionCell(props) {
2049
2049
  var _a;
2050
2050
  const styles = getStylesActionCell();
2051
- const symbol = (_a = props.frame.fields.find((f) => f.name === "Symbol")) == null ? void 0 : _a.values[props.rowIndex];
2051
+ const symbol = (_a = props.frame.fields.find((f) => f.name === "Symbol")) == null ? undefined : _a.values[props.rowIndex];
2052
2052
  const isSearched = props.search === symbol;
2053
2053
  const isSandwiched = props.sandwichItem === symbol;
2054
2054
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actionCellWrapper, children: [
@@ -2074,7 +2074,7 @@ function ActionCell(props) {
2074
2074
  variant: isSandwiched ? "primary" : "secondary",
2075
2075
  "aria-label": isSandwiched ? "Remove from sandwich view" : "Show in sandwich view",
2076
2076
  onClick: () => {
2077
- props.onSandwich(isSandwiched ? void 0 : symbol);
2077
+ props.onSandwich(isSandwiched ? undefined : symbol);
2078
2078
  }
2079
2079
  }
2080
2080
  )
@@ -2148,12 +2148,12 @@ const FlameGraphContainer = ({
2148
2148
  }
2149
2149
  }, [selectedView, setSelectedView, containerWidth, vertical]);
2150
2150
  const resetFocus = react.useCallback(() => {
2151
- setFocusedItemData(void 0);
2151
+ setFocusedItemData(undefined);
2152
2152
  setRangeMin(0);
2153
2153
  setRangeMax(1);
2154
2154
  }, [setFocusedItemData, setRangeMax, setRangeMin]);
2155
2155
  const resetSandwich = react.useCallback(() => {
2156
- setSandwichItem(void 0);
2156
+ setSandwichItem(undefined);
2157
2157
  }, [setSandwichItem]);
2158
2158
  react.useEffect(() => {
2159
2159
  var _a;
@@ -2163,7 +2163,7 @@ const FlameGraphContainer = ({
2163
2163
  return;
2164
2164
  }
2165
2165
  if (dataContainer && focusedItemData) {
2166
- const item = (_a = dataContainer.getNodesWithLabel(focusedItemData.label)) == null ? void 0 : _a[0];
2166
+ const item = (_a = dataContainer.getNodesWithLabel(focusedItemData.label)) == null ? undefined : _a[0];
2167
2167
  if (item) {
2168
2168
  setFocusedItemData({ ...focusedItemData, item });
2169
2169
  const levels = dataContainer.getLevels();
@@ -2191,7 +2191,7 @@ const FlameGraphContainer = ({
2191
2191
  if (search === symbol) {
2192
2192
  setSearch("");
2193
2193
  } else {
2194
- onTableSymbolClick == null ? void 0 : onTableSymbolClick(symbol);
2194
+ onTableSymbolClick == null ? undefined : onTableSymbolClick(symbol);
2195
2195
  setSearch(symbol);
2196
2196
  resetFocus();
2197
2197
  }
@@ -2274,7 +2274,7 @@ const FlameGraphContainer = ({
2274
2274
  selectedView,
2275
2275
  setSelectedView: (view) => {
2276
2276
  setSelectedView(view);
2277
- onViewSelected == null ? void 0 : onViewSelected(view);
2277
+ onViewSelected == null ? undefined : onViewSelected(view);
2278
2278
  },
2279
2279
  containerWidth,
2280
2280
  onReset: () => {
@@ -2284,7 +2284,7 @@ const FlameGraphContainer = ({
2284
2284
  textAlign,
2285
2285
  onTextAlignChange: (align) => {
2286
2286
  setTextAlign(align);
2287
- onTextAlignSelected == null ? void 0 : onTextAlignSelected(align);
2287
+ onTextAlignSelected == null ? undefined : onTextAlignSelected(align);
2288
2288
  },
2289
2289
  showResetButton: Boolean(focusedItemData || sandwichItem),
2290
2290
  colorScheme,
@@ -2302,7 +2302,7 @@ const FlameGraphContainer = ({
2302
2302
  );
2303
2303
  };
2304
2304
  function useColorScheme(dataContainer) {
2305
- const defaultColorScheme = (dataContainer == null ? void 0 : dataContainer.isDiffFlamegraph()) ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
2305
+ const defaultColorScheme = (dataContainer == null ? undefined : dataContainer.isDiffFlamegraph()) ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
2306
2306
  const [colorScheme, setColorScheme] = react.useState(defaultColorScheme);
2307
2307
  react.useEffect(() => {
2308
2308
  setColorScheme(defaultColorScheme);
@@ -2321,7 +2321,7 @@ function useLabelSearch(search, data) {
2321
2321
  }
2322
2322
  return foundLabels;
2323
2323
  }
2324
- return void 0;
2324
+ return undefined;
2325
2325
  }, [search, data]);
2326
2326
  }
2327
2327
  function getStyles(theme) {