@parca/profile 0.19.139 → 0.19.142

package/dist/ProfileFlameGraph/FlameGraphArrow/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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; }
 // 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,7 +23,8 @@ import { jsx as _jsx, jsxs as _jsxs } 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, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
+
+import React, { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { tableFromIPC } from '@uwdata/flechette';
 import { useContextMenu } from 'react-contexify';
 import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext } from '@parca/components';
@@ -31,194 +44,398 @@ import { useBatchedRendering } from './useBatchedRendering';
 import { useScrollViewport } from './useScrollViewport';
 import { useVisibleNodes } from './useVisibleNodes';
 import { useZoom } from './useZoom';
-import { boundsFromProfileSource, extractFeature, extractFilenameFeature, getCurrentPathFrameData, getMaxDepth, isCurrentPathFrameMatch, } from './utils';
-export const FIELD_LABELS_ONLY = 'labels_only';
-export const FIELD_MAPPING_FILE = 'mapping_file';
-export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
-export const FIELD_LOCATION_ADDRESS = 'location_address';
-export const FIELD_LOCATION_LINE = 'location_line';
-export const FIELD_INLINED = 'inlined';
-export const FIELD_TIMESTAMP = 'timestamp';
-export const FIELD_DURATION = 'duration';
-export const FIELD_GROUPBY_METADATA = 'groupby_metadata';
-export const FIELD_FUNCTION_NAME = 'function_name';
-export const FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
-export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
-export const FIELD_FUNCTION_START_LINE = 'function_startline';
-export const FIELD_CHILDREN = 'children';
-export const FIELD_LABELS = 'labels';
-export const FIELD_CUMULATIVE = 'cumulative';
-export const FIELD_FLAT = 'flat';
-export const FIELD_DIFF = 'diff';
-export const FIELD_PARENT = 'parent';
-export const FIELD_DEPTH = 'depth';
-export const FIELD_VALUE_OFFSET = 'value_offset';
-export const getMappingColors = (mappingsList, isDarkMode, currentColorProfile) => {
-    const mappingFeatures = mappingsList.map(mapping => extractFeature(mapping));
-    const colors = {};
-    Object.entries(mappingFeatures).forEach(([_, feature]) => {
-        colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
-    });
-    return colors;
+import { boundsFromProfileSource, extractFeature, extractFilenameFeature, getCurrentPathFrameData, getMaxDepth, isCurrentPathFrameMatch } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var FIELD_LABELS_ONLY = 'labels_only';
+export var FIELD_MAPPING_FILE = 'mapping_file';
+export var FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
+export var FIELD_LOCATION_ADDRESS = 'location_address';
+export var FIELD_LOCATION_LINE = 'location_line';
+export var FIELD_INLINED = 'inlined';
+export var FIELD_TIMESTAMP = 'timestamp';
+export var FIELD_DURATION = 'duration';
+export var FIELD_GROUPBY_METADATA = 'groupby_metadata';
+export var FIELD_FUNCTION_NAME = 'function_name';
+export var FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
+export var FIELD_FUNCTION_FILE_NAME = 'function_file_name';
+export var FIELD_FUNCTION_START_LINE = 'function_startline';
+export var FIELD_CHILDREN = 'children';
+export var FIELD_LABELS = 'labels';
+export var FIELD_CUMULATIVE = 'cumulative';
+export var FIELD_FLAT = 'flat';
+export var FIELD_DIFF = 'diff';
+export var FIELD_PARENT = 'parent';
+export var FIELD_DEPTH = 'depth';
+export var FIELD_VALUE_OFFSET = 'value_offset';
+export var getMappingColors = function getMappingColors(mappingsList, isDarkMode, currentColorProfile) {
+  var mappingFeatures = mappingsList.map(function (mapping) {
+    return extractFeature(mapping);
+  });
+  var colors = {};
+  Object.entries(mappingFeatures).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      _ = _ref2[0],
+      feature = _ref2[1];
+    colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
+  });
+  return colors;
+};
+export var getFilenameColors = function getFilenameColors(filenamesList, isDarkMode, currentColorProfile) {
+  var filenameFeatures = filenamesList.map(function (filename) {
+    return extractFilenameFeature(filename);
+  });
+  var colors = {};
+  Object.entries(filenameFeatures).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      _ = _ref4[0],
+      feature = _ref4[1];
+    colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
+  });
+  return colors;
 };
-export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile) => {
-    const filenameFeatures = filenamesList.map(filename => extractFilenameFeature(filename));
-    const colors = {};
-    Object.entries(filenameFeatures).forEach(([_, feature]) => {
-        colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
+var noop = function noop() {};
+export var FlameGraphArrow = /*#__PURE__*/memo(function FlameGraphArrow(_ref5) {
+  var _table$getChild2;
+  var arrow = _ref5.arrow,
+    total = _ref5.total,
+    filtered = _ref5.filtered,
+    width = _ref5.width,
+    setCurPath = _ref5.setCurPath,
+    curPath = _ref5.curPath,
+    profileType = _ref5.profileType,
+    profileSource = _ref5.profileSource,
+    compareAbsolute = _ref5.compareAbsolute,
+    _ref5$isFlameChart = _ref5.isFlameChart,
+    isFlameChart = _ref5$isFlameChart === void 0 ? false : _ref5$isFlameChart,
+    _ref5$isRenderedAsFla = _ref5.isRenderedAsFlamegraph,
+    isRenderedAsFlamegraph = _ref5$isRenderedAsFla === void 0 ? false : _ref5$isRenderedAsFla,
+    _ref5$isInSandwichVie = _ref5.isInSandwichView,
+    isInSandwichView = _ref5$isInSandwichVie === void 0 ? false : _ref5$isInSandwichVie,
+    isHalfScreen = _ref5.isHalfScreen,
+    _ref5$tooltipId = _ref5.tooltipId,
+    tooltipId = _ref5$tooltipId === void 0 ? 'default' : _ref5$tooltipId,
+    maxFrameCount = _ref5.maxFrameCount,
+    _ref5$isExpanded = _ref5.isExpanded,
+    isExpanded = _ref5$isExpanded === void 0 ? false : _ref5$isExpanded,
+    mappingsListFromMetadata = _ref5.mappingsListFromMetadata,
+    filenamesListFromMetadata = _ref5.filenamesListFromMetadata,
+    colorBy = _ref5.colorBy,
+    zoomControlsRef = _ref5.zoomControlsRef;
+  var _useUserPreference = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key),
+    _useUserPreference2 = _slicedToArray(_useUserPreference, 1),
+    highlightSimilarStacksPreference = _useUserPreference2[0];
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveringRow = _useState2[0],
+    setHoveringRow = _useState2[1];
+  var _useUserPreference3 = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key),
+    _useUserPreference4 = _slicedToArray(_useUserPreference3, 1),
+    dockedMetainfo = _useUserPreference4[0];
+  var _useParcaContext = useParcaContext(),
+    perf = _useParcaContext.perf,
+    isDarkMode = _useParcaContext.isDarkMode;
+  var table = useMemo(function () {
+    var result = tableFromIPC(alignedUint8Array(arrow.record), {
+      useBigInt: true
     });
+    if ((perf === null || perf === void 0 ? void 0 : perf.setMeasurement) != null) {
+      perf.setMeasurement('flamegraph.node_count', result.numRows);
+    }
+    return result;
+  }, [arrow, perf]);
+  var svg = useRef(null);
+  var containerRef = useRef(null);
+  var renderStartTime = useRef(0);
+  var hasInitialRenderCompleted = useRef(false);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    svgElement = _useState4[0],
+    setSvgElement = _useState4[1];
+  var _useProfileFilters = useProfileFilters(),
+    excludeBinary = _useProfileFilters.excludeBinary;
+  var _useProfileViewContex = useProfileViewContext(),
+    compareMode = _useProfileViewContex.compareMode;
+  var currentColorProfile = useCurrentColorProfile();
+  var colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
+  var colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
+  var filenameColors = useMemo(function () {
+    var colors = getFilenameColors(filenamesListFromMetadata, isDarkMode, currentColorProfile);
     return colors;
-};
-const noop = () => { };
-export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, compareAbsolute, isFlameChart = false, isRenderedAsFlamegraph = false, isInSandwichView = false, isHalfScreen, tooltipId = 'default', maxFrameCount, isExpanded = false, mappingsListFromMetadata, filenamesListFromMetadata, colorBy, zoomControlsRef, }) {
-    const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
-    const [hoveringRow, setHoveringRow] = useState(undefined);
-    const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
-    const { perf, isDarkMode } = useParcaContext();
-    const table = useMemo(() => {
-        const result = tableFromIPC(alignedUint8Array(arrow.record), { useBigInt: true });
-        if (perf?.setMeasurement != null) {
-            perf.setMeasurement('flamegraph.node_count', result.numRows);
-        }
-        return result;
-    }, [arrow, perf]);
-    const svg = useRef(null);
-    const containerRef = useRef(null);
-    const renderStartTime = useRef(0);
-    const hasInitialRenderCompleted = useRef(false);
-    const [svgElement, setSvgElement] = useState(null);
-    const { excludeBinary } = useProfileFilters();
-    const { compareMode } = useProfileViewContext();
-    const currentColorProfile = useCurrentColorProfile();
-    const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
-    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
-    const filenameColors = useMemo(() => {
-        const colors = getFilenameColors(filenamesListFromMetadata, isDarkMode, currentColorProfile);
-        return colors;
-    }, [isDarkMode, filenamesListFromMetadata, currentColorProfile]);
-    const mappingColors = useMemo(() => {
-        const colors = getMappingColors(mappingsListFromMetadata, isDarkMode, currentColorProfile);
-        return colors;
-    }, [isDarkMode, mappingsListFromMetadata, currentColorProfile]);
-    const colorByList = {
-        filename: filenameColors,
-        binary: mappingColors,
-    };
-    const colorByColors = colorByList[colorByValue];
-    const MENU_ID = 'flame-graph-context-menu';
-    const contextMenuRef = useRef(null);
-    const { show, hideAll } = useContextMenu({
-        id: MENU_ID,
+  }, [isDarkMode, filenamesListFromMetadata, currentColorProfile]);
+  var mappingColors = useMemo(function () {
+    var colors_0 = getMappingColors(mappingsListFromMetadata, isDarkMode, currentColorProfile);
+    return colors_0;
+  }, [isDarkMode, mappingsListFromMetadata, currentColorProfile]);
+  var colorByList = {
+    filename: filenameColors,
+    binary: mappingColors
+  };
+  var colorByColors = colorByList[colorByValue];
+  var MENU_ID = 'flame-graph-context-menu';
+  var contextMenuRef = useRef(null);
+  var _useContextMenu = useContextMenu({
+      id: MENU_ID
+    }),
+    show = _useContextMenu.show,
+    hideAll = _useContextMenu.hideAll;
+  var displayMenu = useCallback(function (e, row) {
+    var _contextMenuRef$curre;
+    e.preventDefault();
+    // Race condition fix: Use callback to ensure context menu shows only after
+    // row state has been updated and propagated through the hook chain.
+    // This prevents empty function names on first click.
+    (_contextMenuRef$curre = contextMenuRef.current) === null || _contextMenuRef$curre === void 0 || _contextMenuRef$curre.setRow(row, function () {
+      show({
+        event: e
+      });
     });
-    const displayMenu = useCallback((e, row) => {
-        e.preventDefault();
-        // Race condition fix: Use callback to ensure context menu shows only after
-        // row state has been updated and propagated through the hook chain.
-        // This prevents empty function names on first click.
-        contextMenuRef.current?.setRow(row, () => {
-            show({
-                event: e,
-            });
-        });
-    }, [show]);
-    const hideBinary = (binaryToRemove) => {
-        // Add a new frame filter to hide this binary using the new ProfileFilters system
-        excludeBinary(binaryToRemove);
-    };
-    const handleRowClick = useCallback((row) => {
-        if (isFlameChart) {
-            // In flame charts, we don't want to expand the node, so we return early.
-            return;
-        }
-        // Walk down the stack starting at row until we reach the root (row 0).
-        const path = [];
-        let currentRow = row;
-        while (currentRow > 0) {
-            const frame = getCurrentPathFrameData(table, currentRow);
-            path.push(frame);
-            currentRow = table.getChild(FIELD_PARENT)?.get(currentRow) ?? 0;
-        }
-        // Reverse the path so that the root is first.
-        path.reverse();
-        setCurPath(path);
-    }, [table, setCurPath, isFlameChart]);
-    const depthColumn = table.getChild(FIELD_DEPTH);
-    const maxDepth = getMaxDepth(depthColumn);
-    const rootCumulative = table.getChild(FIELD_CUMULATIVE)?.get(0);
-    const isEmptySandwichView = isInSandwichView && table.numRows > 0 && (rootCumulative === null || rootCumulative === 0n);
-    // Apply frame limit if maxFrameCount is provided and not expanded
-    const effectiveDepth = maxFrameCount !== undefined && !isExpanded ? Math.min(maxDepth, maxFrameCount) : maxDepth;
-    // Use deferred value to prevent UI blocking when expanding frames
-    const deferredEffectiveDepth = useDeferredValue(effectiveDepth);
-    const totalHeight = isInSandwichView
-        ? deferredEffectiveDepth * RowHeight
-        : (deferredEffectiveDepth + 1) * RowHeight;
-    // Get the viewport of the container, this is used to determine which rows are visible.
-    const viewport = useScrollViewport(containerRef);
-    const isZoomEnabled = isFlameChart;
-    const { zoomLevel, zoomIn, zoomOut, resetZoom, zoomToPosition, setZoomWithScroll, scrollLeftRef } = useZoom(isZoomEnabled ? containerRef : { current: null });
-    const zoomedWidth = isZoomEnabled ? Math.round((width ?? 1) * zoomLevel) : width ?? 0;
-    // Reset zoom when the data changes (e.g. new query, different time range)
-    useEffect(() => {
-        resetZoom();
-    }, [table, resetZoom]);
-    // To find the selected row, we must walk the current path and look at which
-    // children of the current frame matches the path element exactly. Until the
-    // end, the row we find at the end is our selected row.
-    let currentRow = 0;
-    for (const frame of curPath) {
-        let childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(currentRow) ?? []);
+  }, [show]);
+  var hideBinary = function hideBinary(binaryToRemove) {
+    // Add a new frame filter to hide this binary using the new ProfileFilters system
+    excludeBinary(binaryToRemove);
+  };
+  var handleRowClick = useCallback(function (row_0) {
+    if (isFlameChart) {
+      // In flame charts, we don't want to expand the node, so we return early.
+      return;
+    }
+    // Walk down the stack starting at row until we reach the root (row 0).
+    var path = [];
+    var currentRow = row_0;
+    while (currentRow > 0) {
+      var _table$getChild$get, _table$getChild;
+      var frame = getCurrentPathFrameData(table, currentRow);
+      path.push(frame);
+      currentRow = (_table$getChild$get = (_table$getChild = table.getChild(FIELD_PARENT)) === null || _table$getChild === void 0 ? void 0 : _table$getChild.get(currentRow)) !== null && _table$getChild$get !== void 0 ? _table$getChild$get : 0;
+    }
+
+    // Reverse the path so that the root is first.
+    path.reverse();
+    setCurPath(path);
+  }, [table, setCurPath, isFlameChart]);
+  var depthColumn = table.getChild(FIELD_DEPTH);
+  var maxDepth = getMaxDepth(depthColumn);
+  var rootCumulative = (_table$getChild2 = table.getChild(FIELD_CUMULATIVE)) === null || _table$getChild2 === void 0 ? void 0 : _table$getChild2.get(0);
+  var isEmptySandwichView = isInSandwichView && table.numRows > 0 && (rootCumulative === null || rootCumulative === 0n);
+
+  // Apply frame limit if maxFrameCount is provided and not expanded
+  var effectiveDepth = maxFrameCount !== undefined && !isExpanded ? Math.min(maxDepth, maxFrameCount) : maxDepth;
+
+  // Use deferred value to prevent UI blocking when expanding frames
+  var deferredEffectiveDepth = useDeferredValue(effectiveDepth);
+  var totalHeight = isInSandwichView ? deferredEffectiveDepth * RowHeight : (deferredEffectiveDepth + 1) * RowHeight;
+
+  // Get the viewport of the container, this is used to determine which rows are visible.
+  var viewport = useScrollViewport(containerRef);
+  var isZoomEnabled = isFlameChart;
+  var _useZoom = useZoom(isZoomEnabled ? containerRef : {
+      current: null
+    }),
+    zoomLevel = _useZoom.zoomLevel,
+    zoomIn = _useZoom.zoomIn,
+    zoomOut = _useZoom.zoomOut,
+    resetZoom = _useZoom.resetZoom,
+    zoomToPosition = _useZoom.zoomToPosition,
+    setZoomWithScroll = _useZoom.setZoomWithScroll,
+    scrollLeftRef = _useZoom.scrollLeftRef;
+  var zoomedWidth = isZoomEnabled ? Math.round((width !== null && width !== void 0 ? width : 1) * zoomLevel) : width !== null && width !== void 0 ? width : 0;
+
+  // Reset zoom when the data changes (e.g. new query, different time range)
+  useEffect(function () {
+    resetZoom();
+  }, [table, resetZoom]);
+
+  // To find the selected row, we must walk the current path and look at which
+  // children of the current frame matches the path element exactly. Until the
+  // end, the row we find at the end is our selected row.
+  var currentRow_0 = 0;
+  var _iterator = _createForOfIteratorHelper(curPath),
+    _step;
+  try {
+    var _loop = function _loop() {
+        var _table$getChild$get2, _table$getChild3;
+        var frame_0 = _step.value;
+        var childRows = Array.from((_table$getChild$get2 = (_table$getChild3 = table.getChild(FIELD_CHILDREN)) === null || _table$getChild3 === void 0 ? void 0 : _table$getChild3.get(currentRow_0)) !== null && _table$getChild$get2 !== void 0 ? _table$getChild$get2 : []);
         if (childRows.length === 0) {
-            // If there are no children, we can stop here.
-            break;
+          // If there are no children, we can stop here.
+          return 0; // break
         }
-        childRows = childRows.filter(c => isCurrentPathFrameMatch(table, c, frame));
+        childRows = childRows.filter(function (c) {
+          return isCurrentPathFrameMatch(table, c, frame_0);
+        });
         if (childRows.length === 0) {
-            // If there are no children that match the current path frame, we can stop here.
-            break;
+          // If there are no children that match the current path frame, we can stop here.
+          return 0; // break
         }
         if (childRows.length > 1) {
-            // If there are multiple children that match the current path frame, we can stop here.
-            // This is a case where the path is ambiguous and we cannot determine a single row.
-            break;
+          // If there are multiple children that match the current path frame, we can stop here.
+          // This is a case where the path is ambiguous and we cannot determine a single row.
+          return 0; // break
         }
         // If there is exactly one child that matches the current path frame, we can continue.
-        currentRow = childRows[0];
+        currentRow_0 = childRows[0];
+      },
+      _ret;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _ret = _loop();
+      if (_ret === 0) break;
     }
-    const selectedRow = currentRow;
-    const visibleNodes = useVisibleNodes({
-        table,
-        viewport,
-        total,
-        width: zoomedWidth,
-        selectedRow,
-        effectiveDepth: deferredEffectiveDepth,
-    });
-    // Add nodes in incremental batches to avoid blocking the UI
-    const { items: batchedNodes, isComplete: isBatchingComplete } = useBatchedRendering(visibleNodes, {
-        batchSize: 500,
-    });
-    if (isBatchingComplete) {
-        hasInitialRenderCompleted.current = true;
-    }
-    // Show skeleton only during initial load, not during scroll updates
-    const showSkeleton = !hasInitialRenderCompleted.current && batchedNodes.length !== visibleNodes.length;
-    useEffect(() => {
-        if (perf?.markInteraction != null) {
-            renderStartTime.current = performance.now();
-        }
-    }, [table, width, curPath, perf]);
-    useEffect(() => {
-        setSvgElement(svg.current);
-    }, [tooltipId]);
-    if (isEmptySandwichView) {
-        return _jsx("div", { className: "mx-auto text-center", children: "No matching samples found" });
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var selectedRow = currentRow_0;
+  var visibleNodes = useVisibleNodes({
+    table: table,
+    viewport: viewport,
+    total: total,
+    width: zoomedWidth,
+    selectedRow: selectedRow,
+    effectiveDepth: deferredEffectiveDepth
+  });
+
+  // Add nodes in incremental batches to avoid blocking the UI
+  var _useBatchedRendering = useBatchedRendering(visibleNodes, {
+      batchSize: 500
+    }),
+    batchedNodes = _useBatchedRendering.items,
+    isBatchingComplete = _useBatchedRendering.isComplete;
+  if (isBatchingComplete) {
+    hasInitialRenderCompleted.current = true;
+  }
+
+  // Show skeleton only during initial load, not during scroll updates
+  var showSkeleton = !hasInitialRenderCompleted.current && batchedNodes.length !== visibleNodes.length;
+  useEffect(function () {
+    if ((perf === null || perf === void 0 ? void 0 : perf.markInteraction) != null) {
+      renderStartTime.current = performance.now();
     }
-    return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [isZoomEnabled && (_jsx(ZoomControls, { zoomLevel: zoomLevel, zoomIn: zoomIn, zoomOut: zoomOut, resetZoom: resetZoom, portalRef: zoomControlsRef })), _jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isInSandwichView: isInSandwichView }), _jsx(MemoizedTooltip, { contextElement: svgElement, dockedMetainfo: dockedMetainfo }), showSkeleton && (_jsx("div", { className: "absolute inset-0 z-10", children: isRenderedAsFlamegraph ? (_jsx(SandwichFlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) : (_jsx(FlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) })), isZoomEnabled && (_jsx(MiniMap, { containerRef: containerRef, table: table, width: width ?? 0, zoomedWidth: zoomedWidth, totalHeight: totalHeight, maxDepth: deferredEffectiveDepth, colorByColors: colorByColors, colorBy: colorByValue, profileSource: profileSource, isDarkMode: isDarkMode, scrollLeft: viewport.scrollLeft, scrollLeftRef: scrollLeftRef, onZoomToPosition: zoomToPosition, onSetZoomWithScroll: setZoomWithScroll })), _jsx("div", { ref: containerRef, className: `${isZoomEnabled ? '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' : ''} will-change-transform webkit-overflow-scrolling-touch contain ${!isZoomEnabled ? 'overflow-auto' : ''}`, style: {
-                        width: width ?? '100%',
-                        ...(isZoomEnabled ? { overflowX: 'scroll', overflowY: 'auto' } : {}),
-                        contain: 'layout style paint',
-                        visibility: !showSkeleton ? 'visible' : 'hidden',
-                    }, children: _jsxs("div", { children: [isFlameChart && (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: zoomedWidth, height: totalHeight, margin: 0, ticks: 12, timeUnit: "nanoseconds" })), _jsx("svg", { className: "relative font-robotoMono", width: zoomedWidth, height: totalHeight, preserveAspectRatio: "xMinYMid", ref: svg, children: batchedNodes.map(row => (_jsx(FlameNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: zoomedWidth, height: RowHeight, darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => handleRowClick(row), onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) })] }) })] }) }));
+  }, [table, width, curPath, perf]);
+  useEffect(function () {
+    setSvgElement(svg.current);
+  }, [tooltipId]);
+  if (isEmptySandwichView) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "mx-auto text-center",
+      children: "No matching samples found"
+    });
+  }
+  return /*#__PURE__*/_jsx(TooltipProvider, {
+    table: table,
+    total: total,
+    totalUnfiltered: total + filtered,
+    profileType: profileType,
+    unit: arrow.unit,
+    compareAbsolute: compareAbsolute,
+    tooltipId: tooltipId,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "relative",
+      children: [isZoomEnabled && /*#__PURE__*/_jsx(ZoomControls, {
+        zoomLevel: zoomLevel,
+        zoomIn: zoomIn,
+        zoomOut: zoomOut,
+        resetZoom: resetZoom,
+        portalRef: zoomControlsRef
+      }), /*#__PURE__*/_jsx(ContextMenuWrapper, {
+        ref: contextMenuRef,
+        menuId: MENU_ID,
+        table: table,
+        total: total,
+        totalUnfiltered: total + filtered,
+        compareAbsolute: compareAbsolute,
+        resetPath: function resetPath() {
+          return setCurPath([]);
+        },
+        hideMenu: hideAll,
+        hideBinary: hideBinary,
+        unit: arrow.unit,
+        profileType: profileType,
+        isInSandwichView: isInSandwichView
+      }), /*#__PURE__*/_jsx(MemoizedTooltip, {
+        contextElement: svgElement,
+        dockedMetainfo: dockedMetainfo
+      }), showSkeleton && /*#__PURE__*/_jsx("div", {
+        className: "absolute inset-0 z-10",
+        children: isRenderedAsFlamegraph ? /*#__PURE__*/_jsx(SandwichFlameGraphSkeleton, {
+          isHalfScreen: isHalfScreen,
+          isDarkMode: isDarkMode
+        }) : /*#__PURE__*/_jsx(FlameGraphSkeleton, {
+          isHalfScreen: isHalfScreen,
+          isDarkMode: isDarkMode
+        })
+      }), isZoomEnabled && /*#__PURE__*/_jsx(MiniMap, {
+        containerRef: containerRef,
+        table: table,
+        width: width !== null && width !== void 0 ? width : 0,
+        zoomedWidth: zoomedWidth,
+        totalHeight: totalHeight,
+        maxDepth: deferredEffectiveDepth,
+        colorByColors: colorByColors,
+        colorBy: colorByValue,
+        profileSource: profileSource,
+        isDarkMode: isDarkMode,
+        scrollLeft: viewport.scrollLeft,
+        scrollLeftRef: scrollLeftRef,
+        onZoomToPosition: zoomToPosition,
+        onSetZoomWithScroll: setZoomWithScroll
+      }), /*#__PURE__*/_jsx("div", {
+        ref: containerRef,
+        className: "".concat(isZoomEnabled ? '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' : '', " will-change-transform webkit-overflow-scrolling-touch contain ").concat(!isZoomEnabled ? 'overflow-auto' : ''),
+        style: _objectSpread(_objectSpread({
+          width: width !== null && width !== void 0 ? width : '100%'
+        }, isZoomEnabled ? {
+          overflowX: 'scroll',
+          overflowY: 'auto'
+        } : {}), {}, {
+          contain: 'layout style paint',
+          visibility: !showSkeleton ? 'visible' : 'hidden'
+        }),
+        children: /*#__PURE__*/_jsxs("div", {
+          children: [isFlameChart && /*#__PURE__*/_jsx(TimelineGuide, {
+            bounds: boundsFromProfileSource(profileSource),
+            width: zoomedWidth,
+            height: totalHeight,
+            margin: 0,
+            ticks: 12,
+            timeUnit: "nanoseconds"
+          }), /*#__PURE__*/_jsx("svg", {
+            className: "relative font-robotoMono",
+            width: zoomedWidth,
+            height: totalHeight,
+            preserveAspectRatio: "xMinYMid",
+            ref: svg,
+            children: batchedNodes.map(function (row_1) {
+              return /*#__PURE__*/_jsx(FlameNode, {
+                table: table,
+                row: row_1,
+                colors: colorByColors,
+                colorBy: colorByValue,
+                totalWidth: zoomedWidth,
+                height: RowHeight,
+                darkMode: isDarkMode,
+                compareMode: compareMode,
+                colorForSimilarNodes: colorForSimilarNodes,
+                selectedRow: selectedRow,
+                onClick: function onClick() {
+                  return handleRowClick(row_1);
+                },
+                onContextMenu: displayMenu,
+                hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined,
+                setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop,
+                isFlameChart: isFlameChart,
+                profileSource: profileSource,
+                isRenderedAsFlamegraph: isRenderedAsFlamegraph,
+                isInSandwichView: isInSandwichView,
+                maxDepth: maxDepth,
+                effectiveDepth: deferredEffectiveDepth,
+                tooltipId: tooltipId
+              }, row_1);
+            })
+          })]
+        })
+      })]
+    })
+  });
 });
-export default FlameGraphArrow;
+export default FlameGraphArrow;

package/dist/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBatchedRendering.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.ts"],"names":[],"mappings":"AAeA,UAAU,0BAA0B;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,yBAAyB,CAAC,CAAC;IACnC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;CACrB;AAGD,eAAO,MAAM,mBAAmB,GAAI,CAAC,EACnC,OAAO,CAAC,EAAE,EACV,UAAS,0BAA+B,KACvC,yBAAyB,CAAC,CAAC,CAqD7B,CAAC"}
+{"version":3,"file":"useBatchedRendering.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.ts"],"names":[],"mappings":"AAiBA,UAAU,0BAA0B;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,yBAAyB,CAAC,CAAC;IACnC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;CACrB;AAGD,eAAO,MAAM,mBAAmB,GAAI,CAAC,EACnC,OAAO,CAAC,EAAE,EACV,UAAS,0BAA+B,KACvC,yBAAyB,CAAC,CAAC,CAsD7B,CAAC"}