@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.js

@@ -1,4 +1,3 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,153 +10,225 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
 import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
 import { selectBinaries, useAppSelector } from '@parca/store';
 import 'react-contexify/dist/ReactContexify.css';
 import TextWithEllipsis from './TextWithEllipsis';
-import { FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, FIELD_VALUE_OFFSET, } from './index';
+import { FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, FIELD_VALUE_OFFSET } from './index';
 import useNodeColor from './useNodeColor';
 import { arrowToString, boundsFromProfileSource, nodeLabel } from './utils';
-export const RowHeight = 26;
-export const flameRectStyles = {
-    cursor: 'pointer',
-    transition: 'opacity .15s linear',
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var RowHeight = 26;
+export var flameRectStyles = {
+  cursor: 'pointer',
+  transition: 'opacity .15s linear'
 };
-export const fadedFlameRectStyles = {
-    cursor: 'pointer',
-    transition: 'opacity .15s linear',
-    opacity: '0.5',
+export var fadedFlameRectStyles = {
+  cursor: 'pointer',
+  transition: 'opacity .15s linear',
+  opacity: '0.5'
 };
-export const FlameNode = React.memo(function FlameNodeNoMemo({ table, row, colors, colorBy, height, totalWidth, darkMode, compareMode, colorForSimilarNodes, selectedRow, onClick, onContextMenu, hoveringRow, setHoveringRow, isFlameChart, profileSource, isRenderedAsFlamegraph = false, isInSandwichView = false, maxDepth = 0, effectiveDepth, tooltipId = 'default', }) {
-    // Memoize column references - only changes when table changes
-    const columns = useMemo(() => ({
-        mapping: table.getChild(FIELD_MAPPING_FILE),
-        functionName: table.getChild(FIELD_FUNCTION_NAME),
-        cumulative: table.getChild(FIELD_CUMULATIVE),
-        depth: table.getChild(FIELD_DEPTH),
-        diff: table.getChild(FIELD_DIFF),
-        filename: table.getChild(FIELD_FUNCTION_FILE_NAME),
-        valueOffset: table.getChild(FIELD_VALUE_OFFSET),
-        ts: table.getChild(FIELD_TIMESTAMP),
-    }), [table]);
-    // get the actual values from the columns
-    const binaries = useAppSelector(selectBinaries);
-    // Memoize row data extraction - only changes when table or row changes
-    const rowData = useMemo(() => {
-        const mappingFile = arrowToString(columns.mapping?.get(row));
-        const functionName = arrowToString(columns.functionName?.get(row));
-        const cumulative = columns.cumulative?.get(row) != null ? BigInt(columns.cumulative?.get(row)) : 0n;
-        const diff = columns.diff?.get(row) != null ? BigInt(columns.diff?.get(row)) : null;
-        const filename = arrowToString(columns.filename?.get(row));
-        const depth = columns.depth?.get(row) ?? 0;
-        const valueOffset = columns.valueOffset?.get(row) !== null && columns.valueOffset?.get(row) !== undefined
-            ? BigInt(columns.valueOffset?.get(row))
-            : 0n;
-        return { mappingFile, functionName, cumulative, diff, filename, depth, valueOffset };
-    }, [columns, row]);
-    const { mappingFile, functionName, cumulative, diff, filename, depth, valueOffset } = rowData;
-    const colorAttribute = colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
-    // Memoize hovering name lookup
-    const hoveringName = useMemo(() => {
-        return hoveringRow !== undefined ? arrowToString(columns.functionName?.get(hoveringRow)) : '';
-    }, [columns.functionName, hoveringRow]);
-    const shouldBeHighlighted = functionName != null && hoveringName != null && functionName === hoveringName;
-    const colorResult = useNodeColor({
-        isDarkMode: darkMode,
-        compareMode,
-        cumulative,
-        diff,
-        colorsMap: colors,
-        colorAttribute,
-    });
-    const name = useMemo(() => {
-        return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
-    }, [table, row, binaries]);
-    // Memoize selection data - only changes when selectedRow changes
-    const selectionData = useMemo(() => {
-        const selectionOffset = columns.valueOffset?.get(selectedRow) !== null &&
-            columns.valueOffset?.get(selectedRow) !== undefined
-            ? BigInt(columns.valueOffset?.get(selectedRow))
-            : 0n;
-        const selectionCumulative = columns.cumulative?.get(selectedRow) !== null
-            ? BigInt(columns.cumulative?.get(selectedRow))
-            : 0n;
-        const selectedDepth = columns.depth?.get(selectedRow);
-        const total = columns.cumulative?.get(selectedRow);
-        return { selectionOffset, selectionCumulative, selectedDepth, total };
-    }, [columns, selectedRow]);
-    const { selectionOffset, selectionCumulative, selectedDepth, total } = selectionData;
-    // Memoize tsBounds - only changes when profileSource changes
-    const tsBounds = useMemo(() => boundsFromProfileSource(profileSource), [profileSource]);
-    // Memoize event handlers
-    const onMouseEnter = useCallback(() => {
-        setHoveringRow(row);
-        window.dispatchEvent(new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
-            detail: { row },
-        }));
-    }, [setHoveringRow, row, tooltipId]);
-    const onMouseLeave = useCallback(() => {
-        setHoveringRow(undefined);
-        window.dispatchEvent(new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
-            detail: { row: null },
-        }));
-    }, [setHoveringRow, tooltipId]);
-    const handleContextMenu = useCallback((e) => {
-        onContextMenu(e, row);
-    }, [onContextMenu, row]);
-    // Early returns - all hooks must be called before this point
-    // Hide frames beyond effective depth limit
-    if (effectiveDepth !== undefined && depth > effectiveDepth) {
-        return _jsx(_Fragment, {});
-    }
-    if (valueOffset + cumulative <= selectionOffset ||
-        valueOffset >= selectionOffset + selectionCumulative) {
-        // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
-        return _jsx(_Fragment, {});
-    }
-    if (row === 0 && (isFlameChart || isInSandwichView)) {
-        // The root node is not rendered in the flame chart or sandwich view, so we return null.
-        return _jsx(_Fragment, {});
+export var FlameNode = /*#__PURE__*/React.memo(function FlameNodeNoMemo(_ref) {
+  var table = _ref.table,
+    row = _ref.row,
+    colors = _ref.colors,
+    colorBy = _ref.colorBy,
+    height = _ref.height,
+    totalWidth = _ref.totalWidth,
+    darkMode = _ref.darkMode,
+    compareMode = _ref.compareMode,
+    colorForSimilarNodes = _ref.colorForSimilarNodes,
+    selectedRow = _ref.selectedRow,
+    onClick = _ref.onClick,
+    onContextMenu = _ref.onContextMenu,
+    hoveringRow = _ref.hoveringRow,
+    setHoveringRow = _ref.setHoveringRow,
+    isFlameChart = _ref.isFlameChart,
+    profileSource = _ref.profileSource,
+    _ref$isRenderedAsFlam = _ref.isRenderedAsFlamegraph,
+    isRenderedAsFlamegraph = _ref$isRenderedAsFlam === void 0 ? false : _ref$isRenderedAsFlam,
+    _ref$isInSandwichView = _ref.isInSandwichView,
+    isInSandwichView = _ref$isInSandwichView === void 0 ? false : _ref$isInSandwichView,
+    _ref$maxDepth = _ref.maxDepth,
+    maxDepth = _ref$maxDepth === void 0 ? 0 : _ref$maxDepth,
+    effectiveDepth = _ref.effectiveDepth,
+    _ref$tooltipId = _ref.tooltipId,
+    tooltipId = _ref$tooltipId === void 0 ? 'default' : _ref$tooltipId;
+  // Memoize column references - only changes when table changes
+  var columns = useMemo(function () {
+    return {
+      mapping: table.getChild(FIELD_MAPPING_FILE),
+      functionName: table.getChild(FIELD_FUNCTION_NAME),
+      cumulative: table.getChild(FIELD_CUMULATIVE),
+      depth: table.getChild(FIELD_DEPTH),
+      diff: table.getChild(FIELD_DIFF),
+      filename: table.getChild(FIELD_FUNCTION_FILE_NAME),
+      valueOffset: table.getChild(FIELD_VALUE_OFFSET),
+      ts: table.getChild(FIELD_TIMESTAMP)
+    };
+  }, [table]);
+
+  // get the actual values from the columns
+  var binaries = useAppSelector(selectBinaries);
+
+  // Memoize row data extraction - only changes when table or row changes
+  var rowData = useMemo(function () {
+    var _columns$mapping, _columns$functionName, _columns$cumulative, _columns$cumulative2, _columns$diff, _columns$diff2, _columns$filename, _columns$depth$get, _columns$depth, _columns$valueOffset, _columns$valueOffset2, _columns$valueOffset3;
+    var mappingFile = arrowToString((_columns$mapping = columns.mapping) === null || _columns$mapping === void 0 ? void 0 : _columns$mapping.get(row));
+    var functionName = arrowToString((_columns$functionName = columns.functionName) === null || _columns$functionName === void 0 ? void 0 : _columns$functionName.get(row));
+    var cumulative = ((_columns$cumulative = columns.cumulative) === null || _columns$cumulative === void 0 ? void 0 : _columns$cumulative.get(row)) != null ? BigInt((_columns$cumulative2 = columns.cumulative) === null || _columns$cumulative2 === void 0 ? void 0 : _columns$cumulative2.get(row)) : 0n;
+    var diff = ((_columns$diff = columns.diff) === null || _columns$diff === void 0 ? void 0 : _columns$diff.get(row)) != null ? BigInt((_columns$diff2 = columns.diff) === null || _columns$diff2 === void 0 ? void 0 : _columns$diff2.get(row)) : null;
+    var filename = arrowToString((_columns$filename = columns.filename) === null || _columns$filename === void 0 ? void 0 : _columns$filename.get(row));
+    var depth = (_columns$depth$get = (_columns$depth = columns.depth) === null || _columns$depth === void 0 ? void 0 : _columns$depth.get(row)) !== null && _columns$depth$get !== void 0 ? _columns$depth$get : 0;
+    var valueOffset = ((_columns$valueOffset = columns.valueOffset) === null || _columns$valueOffset === void 0 ? void 0 : _columns$valueOffset.get(row)) !== null && ((_columns$valueOffset2 = columns.valueOffset) === null || _columns$valueOffset2 === void 0 ? void 0 : _columns$valueOffset2.get(row)) !== undefined ? BigInt((_columns$valueOffset3 = columns.valueOffset) === null || _columns$valueOffset3 === void 0 ? void 0 : _columns$valueOffset3.get(row)) : 0n;
+    return {
+      mappingFile: mappingFile,
+      functionName: functionName,
+      cumulative: cumulative,
+      diff: diff,
+      filename: filename,
+      depth: depth,
+      valueOffset: valueOffset
+    };
+  }, [columns, row]);
+  var mappingFile_0 = rowData.mappingFile,
+    functionName_0 = rowData.functionName,
+    cumulative_0 = rowData.cumulative,
+    diff_0 = rowData.diff,
+    filename_0 = rowData.filename,
+    depth_0 = rowData.depth,
+    valueOffset_0 = rowData.valueOffset;
+  var colorAttribute = colorBy === 'filename' ? filename_0 : colorBy === 'binary' ? mappingFile_0 : null;
+
+  // Memoize hovering name lookup
+  var hoveringName = useMemo(function () {
+    var _columns$functionName2;
+    return hoveringRow !== undefined ? arrowToString((_columns$functionName2 = columns.functionName) === null || _columns$functionName2 === void 0 ? void 0 : _columns$functionName2.get(hoveringRow)) : '';
+  }, [columns.functionName, hoveringRow]);
+  var shouldBeHighlighted = functionName_0 != null && hoveringName != null && functionName_0 === hoveringName;
+  var colorResult = useNodeColor({
+    isDarkMode: darkMode,
+    compareMode: compareMode,
+    cumulative: cumulative_0,
+    diff: diff_0,
+    colorsMap: colors,
+    colorAttribute: colorAttribute
+  });
+  var name = useMemo(function () {
+    return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
+  }, [table, row, binaries]);
+
+  // Memoize selection data - only changes when selectedRow changes
+  var selectionData = useMemo(function () {
+    var _columns$valueOffset4, _columns$valueOffset5, _columns$valueOffset6, _columns$cumulative3, _columns$cumulative4, _columns$depth2, _columns$cumulative5;
+    var selectionOffset = ((_columns$valueOffset4 = columns.valueOffset) === null || _columns$valueOffset4 === void 0 ? void 0 : _columns$valueOffset4.get(selectedRow)) !== null && ((_columns$valueOffset5 = columns.valueOffset) === null || _columns$valueOffset5 === void 0 ? void 0 : _columns$valueOffset5.get(selectedRow)) !== undefined ? BigInt((_columns$valueOffset6 = columns.valueOffset) === null || _columns$valueOffset6 === void 0 ? void 0 : _columns$valueOffset6.get(selectedRow)) : 0n;
+    var selectionCumulative = ((_columns$cumulative3 = columns.cumulative) === null || _columns$cumulative3 === void 0 ? void 0 : _columns$cumulative3.get(selectedRow)) !== null ? BigInt((_columns$cumulative4 = columns.cumulative) === null || _columns$cumulative4 === void 0 ? void 0 : _columns$cumulative4.get(selectedRow)) : 0n;
+    var selectedDepth = (_columns$depth2 = columns.depth) === null || _columns$depth2 === void 0 ? void 0 : _columns$depth2.get(selectedRow);
+    var total = (_columns$cumulative5 = columns.cumulative) === null || _columns$cumulative5 === void 0 ? void 0 : _columns$cumulative5.get(selectedRow);
+    return {
+      selectionOffset: selectionOffset,
+      selectionCumulative: selectionCumulative,
+      selectedDepth: selectedDepth,
+      total: total
+    };
+  }, [columns, selectedRow]);
+  var selectionOffset_0 = selectionData.selectionOffset,
+    selectionCumulative_0 = selectionData.selectionCumulative,
+    selectedDepth_0 = selectionData.selectedDepth,
+    total_0 = selectionData.total;
+
+  // Memoize tsBounds - only changes when profileSource changes
+  var tsBounds = useMemo(function () {
+    return boundsFromProfileSource(profileSource);
+  }, [profileSource]);
+
+  // Memoize event handlers
+  var onMouseEnter = useCallback(function () {
+    setHoveringRow(row);
+    window.dispatchEvent(new CustomEvent("flame-tooltip-update-".concat(tooltipId), {
+      detail: {
+        row: row
+      }
+    }));
+  }, [setHoveringRow, row, tooltipId]);
+  var onMouseLeave = useCallback(function () {
+    setHoveringRow(undefined);
+    window.dispatchEvent(new CustomEvent("flame-tooltip-update-".concat(tooltipId), {
+      detail: {
+        row: null
+      }
+    }));
+  }, [setHoveringRow, tooltipId]);
+  var handleContextMenu = useCallback(function (e) {
+    onContextMenu(e, row);
+  }, [onContextMenu, row]);
+
+  // Early returns - all hooks must be called before this point
+  // Hide frames beyond effective depth limit
+  if (effectiveDepth !== undefined && depth_0 > effectiveDepth) {
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+  if (valueOffset_0 + cumulative_0 <= selectionOffset_0 || valueOffset_0 >= selectionOffset_0 + selectionCumulative_0) {
+    // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+  if (row === 0 && (isFlameChart || isInSandwichView)) {
+    // The root node is not rendered in the flame chart or sandwich view, so we return null.
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+
+  // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
+  var totalRatio = cumulative_0 > total_0 ? 1 : Number(cumulative_0) / Number(total_0);
+  var width = isFlameChart ? Number(cumulative_0) / (Number(tsBounds[1]) - Number(tsBounds[0])) * totalWidth : totalRatio * totalWidth;
+  if (width <= 1) {
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+  var styles = selectedDepth_0 !== undefined && selectedDepth_0 > depth_0 ? fadedFlameRectStyles : flameRectStyles;
+  var ts = columns.ts !== null ? Number(columns.ts.get(row)) : 0;
+  var x = isFlameChart && columns.ts !== null ? (ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0])) * totalWidth : selectedDepth_0 > depth_0 ? 0 : (Number(valueOffset_0) - Number(selectionOffset_0)) / Number(total_0) * totalWidth;
+  var calculateY = function calculateY(isRenderedAsFlamegraph_0, isInSandwichView_0, isFlameChart_0, maxDepth_0, depth_1, height_0) {
+    if (isRenderedAsFlamegraph_0) {
+      return (maxDepth_0 - depth_1) * height_0; // Flamegraph is inverted
     }
-    // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
-    const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
-    const width = isFlameChart
-        ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
-        : totalRatio * totalWidth;
-    if (width <= 1) {
-        return _jsx(_Fragment, {});
+    if (isFlameChart_0 || isInSandwichView_0) {
+      return (depth_1 - 1) * height_0;
     }
-    const styles = selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
-    const ts = columns.ts !== null ? Number(columns.ts.get(row)) : 0;
-    const x = isFlameChart && columns.ts !== null
-        ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
-        : selectedDepth > depth
-            ? 0
-            : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
-    const calculateY = (isRenderedAsFlamegraph, isInSandwichView, isFlameChart, maxDepth, depth, height) => {
-        if (isRenderedAsFlamegraph) {
-            return (maxDepth - depth) * height; // Flamegraph is inverted
-        }
-        if (isFlameChart || isInSandwichView) {
-            return (depth - 1) * height;
-        }
-        return depth * height;
-    };
-    const y = calculateY(isRenderedAsFlamegraph, isInSandwichView, isFlameChart, effectiveDepth ?? maxDepth, depth, height);
-    return (_jsx(_Fragment, { children: _jsxs("g", { id: row === 0 ? 'root-span' : undefined, transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick, onContextMenu: handleContextMenu, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, style: {
-                        fill: colorResult,
-                    }, className: cx(shouldBeHighlighted
-                        ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
-                        : 'stroke-white dark:stroke-gray-700') }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx(TextWithEllipsis, { text: name, x: 5, y: 15, width: width - 10 }) }))] }) }));
-}, (prevProps, nextProps) => {
-    // Only re-render if the relevant props have changed
-    return (prevProps.row === nextProps.row &&
-        prevProps.selectedRow === nextProps.selectedRow &&
-        prevProps.hoveringRow === nextProps.hoveringRow &&
-        prevProps.totalWidth === nextProps.totalWidth &&
-        prevProps.height === nextProps.height &&
-        prevProps.effectiveDepth === nextProps.effectiveDepth &&
-        prevProps.colorBy === nextProps.colorBy &&
-        prevProps.colors === nextProps.colors);
-});
+    return depth_1 * height_0;
+  };
+  var y = calculateY(isRenderedAsFlamegraph, isInSandwichView, isFlameChart, effectiveDepth !== null && effectiveDepth !== void 0 ? effectiveDepth : maxDepth, depth_0, height);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("g", {
+      id: row === 0 ? 'root-span' : undefined,
+      transform: "translate(".concat(x + 1, ", ").concat(y + 1, ")"),
+      style: styles,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClick,
+      onContextMenu: handleContextMenu,
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height,
+        style: {
+          fill: colorResult
+        },
+        className: cx(shouldBeHighlighted ? "".concat(colorForSimilarNodes, " stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6") : 'stroke-white dark:stroke-gray-700')
+      }), width > 5 && /*#__PURE__*/_jsx("svg", {
+        width: width - 5,
+        height: height,
+        children: /*#__PURE__*/_jsx(TextWithEllipsis, {
+          text: name,
+          x: 5,
+          y: 15,
+          width: width - 10 // Subtract padding from available width
+        })
+      })]
+    })
+  });
+}, function (prevProps, nextProps) {
+  // Only re-render if the relevant props have changed
+  return prevProps.row === nextProps.row && prevProps.selectedRow === nextProps.selectedRow && prevProps.hoveringRow === nextProps.hoveringRow && prevProps.totalWidth === nextProps.totalWidth && prevProps.height === nextProps.height && prevProps.effectiveDepth === nextProps.effectiveDepth && prevProps.colorBy === nextProps.colorBy && prevProps.colors === nextProps.colors;
+});

package/dist/ProfileFlameGraph/FlameGraphArrow/MemoizedTooltip.js

@@ -1,4 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { c as _c } from "react-compiler-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,46 +17,135 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { memo, useEffect, useState } from 'react';
+
+import React, { memo, useEffect, useState } from 'react';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
 import { useTooltipContext } from './TooltipContext';
-export const MemoizedTooltip = memo(function MemoizedTooltip({ contextElement, dockedMetainfo, }) {
-    const [tooltipRow, setTooltipRow] = useState(null);
-    const { table, total, totalUnfiltered, profileType, unit, compareAbsolute, tooltipId } = useTooltipContext();
-    // This component subscribes to tooltip updates through a callback
-    // passed to the TooltipProvider, avoiding the need to lift state
-    useEffect(() => {
-        const handleTooltipUpdate = (event) => {
-            setTooltipRow(event.detail.row);
-        };
-        const eventName = `flame-tooltip-update-${tooltipId}`;
-        // Delay to ensure all DOM updates and React renders are complete
-        // This fixes the race condition in sandwich view
-        const timeoutId = setTimeout(() => {
-            window.addEventListener(eventName, handleTooltipUpdate);
-        }, 200);
-        return () => {
-            clearTimeout(timeoutId);
-            window.removeEventListener(eventName, handleTooltipUpdate);
-        };
-    }, [tooltipId, table]);
-    // Re-render when contextElement becomes available (fixes sandwich view timing issue)
-    useEffect(() => {
-        // Force re-render when contextElement transitions from null to valid element
-        // This ensures tooltips work immediately in sandwich view
-    }, [contextElement, tooltipId]);
-    if (dockedMetainfo) {
-        return (_jsx(DockedGraphTooltip, { table: table, row: tooltipRow, total: total, totalUnfiltered: totalUnfiltered, profileType: profileType, unit: unit, compareAbsolute: compareAbsolute }));
-    }
-    if (tooltipRow === null) {
-        return null;
-    }
-    // Fix for sandwich view tooltip issue: Don't render tooltip if contextElement is null
-    // This happens when the SVG ref isn't ready yet during initial sandwich view render
-    if (contextElement === null) {
-        return null;
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MemoizedTooltip = /*#__PURE__*/memo(function MemoizedTooltip(t0) {
+  var $ = _c(27);
+  var contextElement = t0.contextElement,
+    dockedMetainfo = t0.dockedMetainfo;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipRow = _useState2[0],
+    setTooltipRow = _useState2[1];
+  var _useTooltipContext = useTooltipContext(),
+    table = _useTooltipContext.table,
+    total = _useTooltipContext.total,
+    totalUnfiltered = _useTooltipContext.totalUnfiltered,
+    profileType = _useTooltipContext.profileType,
+    unit = _useTooltipContext.unit,
+    compareAbsolute = _useTooltipContext.compareAbsolute,
+    tooltipId = _useTooltipContext.tooltipId;
+  var t1;
+  if ($[0] !== tooltipId) {
+    t1 = function t1() {
+      var handleTooltipUpdate = function handleTooltipUpdate(event) {
+        setTooltipRow(event.detail.row);
+      };
+      var eventName = "flame-tooltip-update-".concat(tooltipId);
+      var timeoutId = setTimeout(function () {
+        window.addEventListener(eventName, handleTooltipUpdate);
+      }, 200);
+      return function () {
+        clearTimeout(timeoutId);
+        window.removeEventListener(eventName, handleTooltipUpdate);
+      };
+    };
+    $[0] = tooltipId;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  var t2;
+  if ($[2] !== table || $[3] !== tooltipId) {
+    t2 = [tooltipId, table];
+    $[2] = table;
+    $[3] = tooltipId;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  var t3;
+  if ($[5] !== contextElement || $[6] !== tooltipId) {
+    t3 = [contextElement, tooltipId];
+    $[5] = contextElement;
+    $[6] = tooltipId;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  useEffect(_temp, t3);
+  if (dockedMetainfo) {
+    var _t;
+    if ($[8] !== compareAbsolute || $[9] !== profileType || $[10] !== table || $[11] !== tooltipRow || $[12] !== total || $[13] !== totalUnfiltered || $[14] !== unit) {
+      _t = /*#__PURE__*/_jsx(DockedGraphTooltip, {
+        table: table,
+        row: tooltipRow,
+        total: total,
+        totalUnfiltered: totalUnfiltered,
+        profileType: profileType,
+        unit: unit,
+        compareAbsolute: compareAbsolute
+      });
+      $[8] = compareAbsolute;
+      $[9] = profileType;
+      $[10] = table;
+      $[11] = tooltipRow;
+      $[12] = total;
+      $[13] = totalUnfiltered;
+      $[14] = unit;
+      $[15] = _t;
+    } else {
+      _t = $[15];
     }
-    return (_jsx(GraphTooltipArrow, { contextElement: contextElement, children: _jsx(GraphTooltipArrowContent, { table: table, row: tooltipRow, isFixed: false, total: total, totalUnfiltered: totalUnfiltered, profileType: profileType, unit: unit, compareAbsolute: compareAbsolute }) }));
+    return _t;
+  }
+  if (tooltipRow === null) {
+    return null;
+  }
+  if (contextElement === null) {
+    return null;
+  }
+  var t4;
+  if ($[16] !== compareAbsolute || $[17] !== profileType || $[18] !== table || $[19] !== tooltipRow || $[20] !== total || $[21] !== totalUnfiltered || $[22] !== unit) {
+    t4 = /*#__PURE__*/_jsx(GraphTooltipArrowContent, {
+      table: table,
+      row: tooltipRow,
+      isFixed: false,
+      total: total,
+      totalUnfiltered: totalUnfiltered,
+      profileType: profileType,
+      unit: unit,
+      compareAbsolute: compareAbsolute
+    });
+    $[16] = compareAbsolute;
+    $[17] = profileType;
+    $[18] = table;
+    $[19] = tooltipRow;
+    $[20] = total;
+    $[21] = totalUnfiltered;
+    $[22] = unit;
+    $[23] = t4;
+  } else {
+    t4 = $[23];
+  }
+  var t5;
+  if ($[24] !== contextElement || $[25] !== t4) {
+    t5 = /*#__PURE__*/_jsx(GraphTooltipArrow, {
+      contextElement: contextElement,
+      children: t4
+    });
+    $[24] = contextElement;
+    $[25] = t4;
+    $[26] = t5;
+  } else {
+    t5 = $[26];
+  }
+  return t5;
 });
+function _temp() {}