@grafana/flamegraph 11.5.1 → 11.6.0-221763

package/dist/index.js

@@ -56,7 +56,7 @@ const FlameGraphContextMenu = ({
   search
 }) => {
   function renderItems() {
-    const extraButtons = (getExtraContextMenuButtons == null ? void 0 : getExtraContextMenuButtons(itemData, data.data, {
+    const extraButtons = (getExtraContextMenuButtons == null ? undefined : getExtraContextMenuButtons(itemData, data.data, {
       selectedView,
       isDiff: data.isDiffFlamegraph(),
       search,
@@ -475,10 +475,10 @@ function getPackageName(name) {
   for (const [_, matcher] of matchers) {
     const match = name.match(matcher);
     if (match) {
-      return ((_a = match.groups) == null ? void 0 : _a.packageName) || "";
+      return ((_a = match.groups) == null ? undefined : _a.packageName) || "";
     }
   }
-  return void 0;
+  return undefined;
 }
 
 function useFlameRender(options) {
@@ -620,7 +620,7 @@ function walkTree(root, direction, data, totalViewTicks, rangeMin, rangeMax, wra
   const stack = [];
   stack.push({ item: root, levelOffset: 0 });
   const pixelsPerTick = wrapperWidth * window.devicePixelRatio / totalViewTicks / (rangeMax - rangeMin);
-  let collapsedItemRendered = void 0;
+  let collapsedItemRendered = undefined;
   while (stack.length > 0) {
     const { item, levelOffset } = stack.shift();
     let curBarTicks = item.value;
@@ -639,10 +639,10 @@ function walkTree(root, direction, data, totalViewTicks, rangeMin, rangeMax, wra
         offsetModifier = direction === "children" ? -1 : 1;
         skipRender = true;
       } else {
-        collapsedItemRendered = void 0;
+        collapsedItemRendered = undefined;
       }
     } else {
-      collapsedItemRendered = void 0;
+      collapsedItemRendered = undefined;
     }
     if (!skipRender) {
       const barX = getBarX(item.start, totalViewTicks, rangeMin, pixelsPerTick);
@@ -665,7 +665,7 @@ function useColorFunction(totalTicks, totalTicksRight, colorScheme, theme, muted
       if (muted && !matchedLabels) {
         return mutedColor;
       }
-      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);
+      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);
       if (matchedLabels) {
         return matchedLabels.has(label) ? barColor.toHslString() : mutedColor;
       }
@@ -769,7 +769,7 @@ const FlameGraphCanvas = ({
   });
   const onGraphClick = react.useCallback(
     (e) => {
-      setTooltipItem(void 0);
+      setTooltipItem(undefined);
       const pixelsPerTick = graphRef.current.clientWidth / totalViewTicks / (rangeMax - rangeMin);
       const item = convertPixelCoordinatesToBarCoordinates(
         { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },
@@ -789,7 +789,7 @@ const FlameGraphCanvas = ({
           label: data.getLabel(item.itemIndexes[0])
         });
       } else {
-        setClickedItemData(void 0);
+        setClickedItemData(undefined);
       }
     },
     [data, rangeMin, rangeMax, totalViewTicks, root, direction, depth, collapsedMap]
@@ -797,9 +797,9 @@ const FlameGraphCanvas = ({
   const [mousePosition, setMousePosition] = react.useState();
   const onGraphMouseMove = react.useCallback(
     (e) => {
-      if (clickedItemData === void 0) {
-        setTooltipItem(void 0);
-        setMousePosition(void 0);
+      if (clickedItemData === undefined) {
+        setTooltipItem(undefined);
+        setMousePosition(undefined);
         const pixelsPerTick = graphRef.current.clientWidth / totalViewTicks / (rangeMax - rangeMin);
         const item = convertPixelCoordinatesToBarCoordinates(
           { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },
@@ -820,13 +820,13 @@ const FlameGraphCanvas = ({
     [rangeMin, rangeMax, totalViewTicks, clickedItemData, setMousePosition, root, direction, depth, collapsedMap]
   );
   const onGraphMouseLeave = react.useCallback(() => {
-    setTooltipItem(void 0);
+    setTooltipItem(undefined);
   }, []);
   react.useEffect(() => {
     const handleOnClick = (e) => {
       var _a;
-      if (e.target instanceof HTMLElement && ((_a = e.target.parentElement) == null ? void 0 : _a.id) !== "flameGraphCanvasContainer_clickOutsideCheck") {
-        setClickedItemData(void 0);
+      if (e.target instanceof HTMLElement && ((_a = e.target.parentElement) == null ? undefined : _a.id) !== "flameGraphCanvasContainer_clickOutsideCheck") {
+        setClickedItemData(undefined);
       }
     };
     window.addEventListener("click", handleOnClick);
@@ -850,7 +850,7 @@ const FlameGraphCanvas = ({
         item: tooltipItem,
         data,
         totalTicks: totalViewTicks,
-        collapseConfig: tooltipItem ? collapsedMap.get(tooltipItem) : void 0
+        collapseConfig: tooltipItem ? collapsedMap.get(tooltipItem) : undefined
       }
     ),
     !showFlameGraphOnly && clickedItemData && /* @__PURE__ */ jsxRuntime.jsx(
@@ -861,7 +861,7 @@ const FlameGraphCanvas = ({
         collapsing,
         collapseConfig: collapsedMap.get(clickedItemData.item),
         onMenuItemClick: () => {
-          setClickedItemData(void 0);
+          setClickedItemData(undefined);
         },
         onItemFocus: () => {
           setRangeMin(clickedItemData.item.start / totalViewTicks);
@@ -925,10 +925,10 @@ const convertPixelCoordinatesToBarCoordinates = (pos, root, direction, depth, pi
   let next = root;
   let currentLevel = direction === "children" ? 0 : depth - 1;
   const levelIndex = Math.floor(pos.y / (PIXELS_PER_LEVEL / window.devicePixelRatio));
-  let found = void 0;
+  let found = undefined;
   while (next) {
     const node = next;
-    next = void 0;
+    next = undefined;
     if (currentLevel === levelIndex) {
       found = node;
       break;
@@ -976,7 +976,7 @@ const FlameGraphMetadata = react.memo(
     );
     if (sandwichedLabel) {
       parts.push(
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: sandwichedLabel, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "gf-show-context" }),
@@ -994,17 +994,18 @@ const FlameGraphMetadata = react.memo(
               }
             )
           ] })
-        ] }, "sandwich")
+        ] }) }, "sandwich")
       );
     }
     if (focusedItem) {
-      const percentValue = Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100;
+      const percentValue = totalTicks > 0 ? Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100 : 0;
+      const iconName = percentValue > 0 ? "eye" : "exclamation-circle";
       parts.push(
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: focusedItem.label, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "eye" }),
-            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: iconName }),
+            "\xA0",
             percentValue,
             "% of total",
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1019,7 +1020,7 @@ const FlameGraphMetadata = react.memo(
               }
             )
           ] })
-        ] }, "focus")
+        ] }) }, "focus")
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.metadata, children: parts });
@@ -1045,8 +1046,10 @@ const getStyles$4 = (theme) => ({
     margin: theme.spacing(0, 0.5)
   }),
   metadata: css.css({
-    margin: "8px 0",
-    textAlign: "center"
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "8px 0"
   }),
   metadataPillName: css.css({
     label: "metadataPillName",
@@ -1092,14 +1095,14 @@ const FlameGraph = ({
     if (data) {
       let levels2 = data.getLevels();
       let totalProfileTicks2 = levels2.length ? levels2[0][0].value : 0;
-      let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight : void 0;
+      let totalProfileTicksRight2 = levels2.length ? levels2[0][0].valueRight : undefined;
       let totalViewTicks2 = totalProfileTicks2;
-      let levelsCallers2 = void 0;
+      let levelsCallers2 = undefined;
       if (sandwichItem) {
         const [callers, callees] = data.getSandwichLevels(sandwichItem);
         levels2 = callees;
         levelsCallers2 = callers;
-        totalViewTicks2 = (_c = (_b = (_a = callees[0]) == null ? void 0 : _a[0]) == null ? void 0 : _b.value) != null ? _c : 0;
+        totalViewTicks2 = (_c = (_b = (_a = callees[0]) == null ? undefined : _a[0]) == null ? undefined : _b.value) != null ? _c : 0;
       }
       setLevels(levels2);
       setLevelsCallers(levelsCallers2);
@@ -1134,40 +1137,45 @@ const FlameGraph = ({
     search,
     selectedView
   };
-  const canvas = levelsCallers ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
-        "Callers",
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FlameGraphCanvas,
-        {
-          ...commonCanvasProps,
-          root: levelsCallers[levelsCallers.length - 1][0],
-          depth: levelsCallers.length,
-          direction: "parents",
-          collapsing: false
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
-        "Callees"
+  let canvas = null;
+  if (levelsCallers == null ? undefined : levelsCallers.length) {
+    canvas = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
+          "Callers",
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlameGraphCanvas,
+          {
+            ...commonCanvasProps,
+            root: levelsCallers[levelsCallers.length - 1][0],
+            depth: levelsCallers.length,
+            direction: "parents",
+            collapsing: false
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FlameGraphCanvas,
-        {
-          ...commonCanvasProps,
-          root: levels[0][0],
-          depth: levels.length,
-          direction: "children",
-          collapsing: false
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
+          "Callees"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlameGraphCanvas,
+          {
+            ...commonCanvasProps,
+            root: levels[0][0],
+            depth: levels.length,
+            direction: "children",
+            collapsing: false
+          }
+        )
+      ] })
+    ] });
+  } else if (levels == null ? undefined : levels.length) {
+    canvas = /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.graph, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       FlameGraphMetadata,
@@ -1219,7 +1227,7 @@ function mergeParentSubtrees(roots, data) {
 function getParentSubtrees(roots) {
   return roots.map((r) => {
     var _a, _b;
-    if (!((_a = r.parents) == null ? void 0 : _a.length)) {
+    if (!((_a = r.parents) == null ? undefined : _a.length)) {
       return r;
     }
     const newRoot = {
@@ -1240,7 +1248,7 @@ function getParentSubtrees(roots) {
         newNode.value = args.child.value;
         args.child.parents = [newNode];
       }
-      if ((_b = args.parent.parents) == null ? void 0 : _b.length) {
+      if ((_b = args.parent.parents) == null ? undefined : _b.length) {
         stack.push({ child: newNode, parent: args.parent.parents[0] });
       }
     }
@@ -1252,7 +1260,7 @@ function mergeSubtrees(roots, data, direction = "children") {
   const oppositeDirection = direction === "parents" ? "children" : "parents";
   const levels = [];
   const stack = [
-    { previous: void 0, items: roots, level: 0 }
+    { previous: undefined, items: roots, level: 0 }
   ];
   while (stack.length) {
     const args = stack.shift();
@@ -1271,7 +1279,7 @@ function mergeSubtrees(roots, data, direction = "children") {
     levels[args.level].push(newItem);
     if (args.previous) {
       newItem[oppositeDirection] = [args.previous];
-      const prevSiblingsVal = ((_a = args.previous[direction]) == null ? void 0 : _a.reduce((acc, node) => {
+      const prevSiblingsVal = ((_a = args.previous[direction]) == null ? undefined : _a.reduce((acc, node) => {
         return acc + node.value;
       }, 0)) || 0;
       newItem.start = args.previous.start + prevSiblingsVal;
@@ -1297,11 +1305,11 @@ function mergeSubtrees(roots, data, direction = "children") {
 function nestedSetToLevels(container, options) {
   const levels = [];
   let offset = 0;
-  let parent = void 0;
+  let parent = undefined;
   const uniqueLabels = {};
   for (let i = 0; i < container.data.length; i++) {
     const currentLevel = container.getLevel(i);
-    const prevLevel = i > 0 ? container.getLevel(i - 1) : void 0;
+    const prevLevel = i > 0 ? container.getLevel(i - 1) : undefined;
     levels[currentLevel] = levels[currentLevel] || [];
     if (prevLevel && prevLevel >= currentLevel) {
       const lastSibling = levels[currentLevel][levels[currentLevel].length - 1];
@@ -1311,7 +1319,7 @@ function nestedSetToLevels(container, options) {
     const newItem = {
       itemIndexes: [i],
       value: container.getValue(i) + container.getValueRight(i),
-      valueRight: container.isDiffFlamegraph() ? container.getValueRight(i) : void 0,
+      valueRight: container.isDiffFlamegraph() ? container.getValueRight(i) : undefined,
       start: offset,
       parents: parent && [parent],
       children: [],
@@ -1328,8 +1336,8 @@ function nestedSetToLevels(container, options) {
     parent = newItem;
     levels[currentLevel].push(newItem);
   }
-  const collapsedMapContainer = new CollapsedMapBuilder(options == null ? void 0 : options.collapsingThreshold);
-  if (options == null ? void 0 : options.collapsing) {
+  const collapsedMapContainer = new CollapsedMapBuilder(options == null ? undefined : options.collapsingThreshold);
+  if (options == null ? undefined : options.collapsing) {
     collapsedMapContainer.addTree(levels[0][0]);
   }
   return [levels, uniqueLabels, collapsedMapContainer.getCollapsedMap()];
@@ -1376,7 +1384,7 @@ class CollapsedMapBuilder {
   constructor(threshold) {
     this.map = /* @__PURE__ */ new Map();
     this.threshold = 0.99;
-    if (threshold !== void 0) {
+    if (threshold !== undefined) {
       this.threshold = threshold;
     }
   }
@@ -1385,7 +1393,7 @@ class CollapsedMapBuilder {
     const stack = [root];
     while (stack.length) {
       const current = stack.shift();
-      if ((_a = current.parents) == null ? void 0 : _a.length) {
+      if ((_a = current.parents) == null ? undefined : _a.length) {
         this.addItem(current, current.parents[0]);
       }
       if (current.children.length) {
@@ -1433,7 +1441,7 @@ function checkFields(data) {
   const wrongTypeFields = [];
   for (const field of fields) {
     const [name, types] = field;
-    const frameField = data == null ? void 0 : data.fields.find((f) => f.name === name);
+    const frameField = data == null ? undefined : data.fields.find((f) => f.name === name);
     if (!frameField) {
       missingFields.push(name);
       continue;
@@ -1448,7 +1456,7 @@ function checkFields(data) {
       missingFields
     };
   }
-  return void 0;
+  return undefined;
 }
 class FlameGraphDataContainer {
   constructor(data, options, theme = data$1.createTheme()) {
@@ -1470,7 +1478,7 @@ class FlameGraphDataContainer {
         "Malformed dataFrame: both valueRight and selfRight has to be present if one of them is present."
       );
     }
-    const enumConfig = (_c = (_b = (_a = this.labelField) == null ? void 0 : _a.config) == null ? void 0 : _b.type) == null ? void 0 : _c.enum;
+    const enumConfig = (_c = (_b = (_a = this.labelField) == null ? undefined : _a.config) == null ? undefined : _b.type) == null ? undefined : _c.enum;
     if (enumConfig) {
       this.labelDisplayProcessor = data$1.getDisplayProcessor({ field: this.labelField, theme });
       this.uniqueLabels = enumConfig.text || [];
@@ -1528,7 +1536,7 @@ class FlameGraphDataContainer {
   }
   getSandwichLevels(label) {
     const nodes = this.getNodesWithLabel(label);
-    if (!(nodes == null ? void 0 : nodes.length)) {
+    if (!(nodes == null ? undefined : nodes.length)) {
       return [[], []];
     }
     const callers = mergeParentSubtrees(nodes, this);
@@ -1895,7 +1903,7 @@ const FlameGraphTopTableContainer = react.memo(
           initialSortBy: sort,
           onSortByChange: (s) => {
             if (s && s.length) {
-              onTableSort == null ? void 0 : onTableSort(s[0].displayName + "_" + (s[0].desc ? "desc" : "asc"));
+              onTableSort == null ? undefined : onTableSort(s[0].displayName + "_" + (s[0].desc ? "desc" : "asc"));
             }
             setSort(s);
           },
@@ -1945,7 +1953,7 @@ function buildTableDataFrame(data, table, width, onSymbolClick, onSearch, onSand
     ];
     const levels = data.getLevels();
     const totalTicks = levels.length ? levels[0][0].value : 0;
-    const totalTicksRight = levels.length ? levels[0][0].valueRight : void 0;
+    const totalTicksRight = levels.length ? levels[0][0].valueRight : undefined;
     for (let key in table) {
       actionField.values.push(null);
       symbolField.values.push(key);
@@ -2040,7 +2048,7 @@ function createActionField(onSandwich, onSearch, search, sandwichItem) {
 function ActionCell(props) {
   var _a;
   const styles = getStylesActionCell();
-  const symbol = (_a = props.frame.fields.find((f) => f.name === "Symbol")) == null ? void 0 : _a.values[props.rowIndex];
+  const symbol = (_a = props.frame.fields.find((f) => f.name === "Symbol")) == null ? undefined : _a.values[props.rowIndex];
   const isSearched = props.search === symbol;
   const isSandwiched = props.sandwichItem === symbol;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actionCellWrapper, children: [
@@ -2066,7 +2074,7 @@ function ActionCell(props) {
         variant: isSandwiched ? "primary" : "secondary",
         "aria-label": isSandwiched ? "Remove from sandwich view" : "Show in sandwich view",
         onClick: () => {
-          props.onSandwich(isSandwiched ? void 0 : symbol);
+          props.onSandwich(isSandwiched ? undefined : symbol);
         }
       }
     )
@@ -2110,6 +2118,7 @@ const FlameGraphContainer = ({
   vertical,
   showFlameGraphOnly,
   disableCollapsing,
+  keepFocusOnDataChange,
   getExtraContextMenuButtons
 }) => {
   const [focusedItemData, setFocusedItemData] = react.useState();
@@ -2139,23 +2148,50 @@ const FlameGraphContainer = ({
     }
   }, [selectedView, setSelectedView, containerWidth, vertical]);
   const resetFocus = react.useCallback(() => {
-    setFocusedItemData(void 0);
+    setFocusedItemData(undefined);
     setRangeMin(0);
     setRangeMax(1);
   }, [setFocusedItemData, setRangeMax, setRangeMin]);
-  function resetSandwich() {
-    setSandwichItem(void 0);
-  }
+  const resetSandwich = react.useCallback(() => {
+    setSandwichItem(undefined);
+  }, [setSandwichItem]);
   react.useEffect(() => {
-    resetFocus();
-    resetSandwich();
-  }, [data, resetFocus]);
+    var _a;
+    if (!keepFocusOnDataChange) {
+      resetFocus();
+      resetSandwich();
+      return;
+    }
+    if (dataContainer && focusedItemData) {
+      const item = (_a = dataContainer.getNodesWithLabel(focusedItemData.label)) == null ? undefined : _a[0];
+      if (item) {
+        setFocusedItemData({ ...focusedItemData, item });
+        const levels = dataContainer.getLevels();
+        const totalViewTicks = levels.length ? levels[0][0].value : 0;
+        setRangeMin(item.start / totalViewTicks);
+        setRangeMax((item.start + item.value) / totalViewTicks);
+      } else {
+        setFocusedItemData({
+          ...focusedItemData,
+          item: {
+            start: 0,
+            value: 0,
+            itemIndexes: [],
+            children: [],
+            level: 0
+          }
+        });
+        setRangeMin(0);
+        setRangeMax(1);
+      }
+    }
+  }, [dataContainer, keepFocusOnDataChange]);
   const onSymbolClick = react.useCallback(
     (symbol) => {
       if (search === symbol) {
         setSearch("");
       } else {
-        onTableSymbolClick == null ? void 0 : onTableSymbolClick(symbol);
+        onTableSymbolClick == null ? undefined : onTableSymbolClick(symbol);
         setSearch(symbol);
         resetFocus();
       }
@@ -2238,7 +2274,7 @@ const FlameGraphContainer = ({
           selectedView,
           setSelectedView: (view) => {
             setSelectedView(view);
-            onViewSelected == null ? void 0 : onViewSelected(view);
+            onViewSelected == null ? undefined : onViewSelected(view);
           },
           containerWidth,
           onReset: () => {
@@ -2248,7 +2284,7 @@ const FlameGraphContainer = ({
           textAlign,
           onTextAlignChange: (align) => {
             setTextAlign(align);
-            onTextAlignSelected == null ? void 0 : onTextAlignSelected(align);
+            onTextAlignSelected == null ? undefined : onTextAlignSelected(align);
           },
           showResetButton: Boolean(focusedItemData || sandwichItem),
           colorScheme,
@@ -2266,7 +2302,7 @@ const FlameGraphContainer = ({
   );
 };
 function useColorScheme(dataContainer) {
-  const defaultColorScheme = (dataContainer == null ? void 0 : dataContainer.isDiffFlamegraph()) ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
+  const defaultColorScheme = (dataContainer == null ? undefined : dataContainer.isDiffFlamegraph()) ? ColorSchemeDiff.Default : ColorScheme.PackageBased;
   const [colorScheme, setColorScheme] = react.useState(defaultColorScheme);
   react.useEffect(() => {
     setColorScheme(defaultColorScheme);
@@ -2285,7 +2321,7 @@ function useLabelSearch(search, data) {
       }
       return foundLabels;
     }
-    return void 0;
+    return undefined;
   }, [search, data]);
 }
 function getStyles(theme) {