@grafana/flamegraph 11.5.0-221668 → 11.5.0

package/dist/index.js

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