@parca/profile 0.19.139 → 0.19.142

package/dist/ProfileFlameGraph/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, 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 _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,11 +23,12 @@ import { jsx as _jsx, Fragment as _Fragment, 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 { useCallback, useEffect, useMemo, useState } from 'react';
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useMeasure } from 'react-use';
-import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext, useURLState, } from '@parca/components';
+import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
 import DiffLegend from '../ProfileView/components/DiffLegend';
@@ -23,153 +36,316 @@ import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext
 import { useProfileMetadata } from '../ProfileView/hooks/useProfileMetadata';
 import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
 import { FlameGraphArrow } from './FlameGraphArrow';
-const numberFormatter = new Intl.NumberFormat('en-US');
-const ErrorContent = ({ errorMessage }) => {
-    return (_jsx("div", { className: "flex flex-col justify-center p-10 text-center gap-6 text-sm", children: errorMessage }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var numberFormatter = new Intl.NumberFormat('en-US');
+var ErrorContent = function ErrorContent(t0) {
+  var $ = _c(2);
+  var errorMessage = t0.errorMessage;
+  var t1;
+  if ($[0] !== errorMessage) {
+    t1 = /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col justify-center p-10 text-center gap-6 text-sm",
+      children: errorMessage
+    });
+    $[0] = errorMessage;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 };
-export const validateFlameChartQuery = (profileSource) => {
-    const isNonDelta = !profileSource.ProfileType().delta;
-    const duration = profileSource.mergeTo - profileSource.mergeFrom;
-    const isDurationTooLong = duration > 900000000000n; // 15 minutes in nanoseconds
-    return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
+export var validateFlameChartQuery = function validateFlameChartQuery(profileSource) {
+  var isNonDelta = !profileSource.ProfileType().delta;
+  var duration = profileSource.mergeTo - profileSource.mergeFrom;
+  var isDurationTooLong = duration > 900000000000n; // 15 minutes in nanoseconds
+  return {
+    isValid: !isNonDelta && !isDurationTooLong,
+    isNonDelta: isNonDelta,
+    isDurationTooLong: isDurationTooLong
+  };
 };
-const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart = false, profileSource, isInSandwichView = false, isRenderedAsFlamegraph = false, tooltipId, maxFrameCount, isExpanded = false, metadataLoading = false, zoomControlsRef, }) {
-    const { onError, authenticationErrorMessage, isDarkMode, flamechartHelpText } = useParcaContext();
-    const { compareMode } = useProfileViewContext();
-    const [isLoading, setIsLoading] = useState(true);
-    const [flameChartRef] = useMeasure();
-    const { colorBy, setColorBy } = useVisualizationState();
-    // Create local state for paths when in sandwich view to avoid URL updates
-    const [localCurPathArrow, setLocalCurPathArrow] = useState([]);
-    const setCurPathArrowWrapper = useCallback((path) => {
-        if (isInSandwichView) {
-            setLocalCurPathArrow(path);
-        }
-        else {
-            setNewCurPathArrow(path);
-        }
-    }, [isInSandwichView, setNewCurPathArrow]);
-    // Determine which paths to use based on isInSandwichView flag
-    const effectiveCurPathArrow = isInSandwichView ? localCurPathArrow : curPathArrow;
-    const { mappingsList, filenamesList } = useProfileMetadata({
-        flamegraphArrow: arrow,
-        metadataMappingFiles,
-        metadataLoading,
-        colorBy,
+var ProfileFlameGraph = function ProfileFlameGraphNonMemo(_ref) {
+  var arrow = _ref.arrow,
+    total = _ref.total,
+    filtered = _ref.filtered,
+    curPathArrow = _ref.curPathArrow,
+    setNewCurPathArrow = _ref.setNewCurPathArrow,
+    profileType = _ref.profileType,
+    loading = _ref.loading,
+    error = _ref.error,
+    width = _ref.width,
+    isHalfScreen = _ref.isHalfScreen,
+    metadataMappingFiles = _ref.metadataMappingFiles,
+    _ref$isFlameChart = _ref.isFlameChart,
+    isFlameChart = _ref$isFlameChart === void 0 ? false : _ref$isFlameChart,
+    profileSource = _ref.profileSource,
+    _ref$isInSandwichView = _ref.isInSandwichView,
+    isInSandwichView = _ref$isInSandwichView === void 0 ? false : _ref$isInSandwichView,
+    _ref$isRenderedAsFlam = _ref.isRenderedAsFlamegraph,
+    isRenderedAsFlamegraph = _ref$isRenderedAsFlam === void 0 ? false : _ref$isRenderedAsFlam,
+    tooltipId = _ref.tooltipId,
+    maxFrameCount = _ref.maxFrameCount,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    _ref$metadataLoading = _ref.metadataLoading,
+    metadataLoading = _ref$metadataLoading === void 0 ? false : _ref$metadataLoading,
+    zoomControlsRef = _ref.zoomControlsRef;
+  var _useParcaContext = useParcaContext(),
+    onError = _useParcaContext.onError,
+    authenticationErrorMessage = _useParcaContext.authenticationErrorMessage,
+    isDarkMode = _useParcaContext.isDarkMode,
+    flamechartHelpText = _useParcaContext.flamechartHelpText;
+  var _useProfileViewContex = useProfileViewContext(),
+    compareMode = _useProfileViewContex.compareMode;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 1),
+    flameChartRef = _useMeasure2[0];
+  var _useVisualizationStat = useVisualizationState(),
+    colorBy = _useVisualizationStat.colorBy,
+    setColorBy = _useVisualizationStat.setColorBy;
+
+  // Create local state for paths when in sandwich view to avoid URL updates
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localCurPathArrow = _useState4[0],
+    setLocalCurPathArrow = _useState4[1];
+  var setCurPathArrowWrapper = useCallback(function (path) {
+    if (isInSandwichView) {
+      setLocalCurPathArrow(path);
+    } else {
+      setNewCurPathArrow(path);
+    }
+  }, [isInSandwichView, setNewCurPathArrow]);
+
+  // Determine which paths to use based on isInSandwichView flag
+  var effectiveCurPathArrow = isInSandwichView ? localCurPathArrow : curPathArrow;
+  var _useProfileMetadata = useProfileMetadata({
+      flamegraphArrow: arrow,
+      metadataMappingFiles: metadataMappingFiles,
+      metadataLoading: metadataLoading,
+      colorBy: colorBy
+    }),
+    mappingsList = _useProfileMetadata.mappingsList,
+    filenamesList = _useProfileMetadata.filenamesList;
+
+  // By default, we want delta profiles (CPU) to be relatively compared.
+  // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
+  var compareAbsoluteDefault = (profileType === null || profileType === void 0 ? void 0 : profileType.delta) === false ? 'true' : 'false';
+  var _useURLState = useURLState('compare_absolute'),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    _useURLState2$ = _useURLState2[0],
+    compareAbsolute = _useURLState2$ === void 0 ? compareAbsoluteDefault : _useURLState2$;
+  var isCompareAbsolute = compareAbsolute === 'true';
+  var mappingsListCount = useMemo(function () {
+    return mappingsList.filter(function (m) {
+      return m !== '';
+    }).length;
+  }, [mappingsList]);
+  var _useMemo = useMemo(function () {
+      var _arrow$trimmed;
+      if (arrow === undefined) {
+        return ['0', '0', false, '0', '0', false, '0', '0'];
+      }
+      var trimmed = (_arrow$trimmed = arrow === null || arrow === void 0 ? void 0 : arrow.trimmed) !== null && _arrow$trimmed !== void 0 ? _arrow$trimmed : 0n;
+      var totalUnfiltered = total + filtered;
+      // safeguard against division by zero
+      var totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1n;
+      return [numberFormatter.format(total), numberFormatter.format(totalUnfiltered), trimmed > 0, numberFormatter.format(trimmed), numberFormatter.format(divide(trimmed * 100n, totalUnfilteredDivisor)), filtered > 0, numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor))];
+    }, [arrow, filtered, total]),
+    _useMemo2 = _slicedToArray(_useMemo, 7),
+    totalFormatted = _useMemo2[0],
+    totalUnfilteredFormatted = _useMemo2[1],
+    isTrimmed = _useMemo2[2],
+    trimmedFormatted = _useMemo2[3],
+    trimmedPercentage = _useMemo2[4],
+    isFiltered = _useMemo2[5],
+    filteredPercentage = _useMemo2[6];
+  var loadingState = !loading && arrow !== undefined && metadataMappingFiles !== undefined;
+
+  // If there is only one mapping file, we want to color by filename by default.
+  useEffect(function () {
+    if (mappingsListCount === 1 && colorBy !== 'filename') {
+      setColorBy('filename');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mappingsListCount]);
+  useEffect(function () {
+    if (loadingState) {
+      setIsLoading(false);
+    } else {
+      setIsLoading(true);
+    }
+  }, [loadingState]);
+  var flameGraph = useMemo(function () {
+    var _ref2 = isFlameChart ? validateFlameChartQuery(profileSource) : {
+        isValid: true,
+        isNonDelta: false,
+        isDurationTooLong: false
+      },
+      isFlameChartValid = _ref2.isValid,
+      isNonDelta = _ref2.isNonDelta,
+      isDurationTooLong = _ref2.isDurationTooLong;
+    var isInvalidFlameChartQuery = isFlameChart && !isFlameChartValid;
+    if (isLoading && !isInvalidFlameChartQuery) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "h-auto overflow-clip",
+        "data-testid": TEST_IDS.FLAMEGRAPH_SKELETON,
+        children: isRenderedAsFlamegraph ? /*#__PURE__*/_jsx(SandwichFlameGraphSkeleton, {
+          isHalfScreen: isHalfScreen,
+          isDarkMode: isDarkMode
+        }) : /*#__PURE__*/_jsx(FlameGraphSkeleton, {
+          isHalfScreen: isHalfScreen,
+          isDarkMode: isDarkMode
+        })
+      });
+    }
+
+    // Do necessary checks to ensure that flame chart can be rendered for this query.
+    if (isInvalidFlameChartQuery) {
+      if (isNonDelta) {
+        return /*#__PURE__*/_jsx(ErrorContent, {
+          errorMessage: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("span", {
+              children: "To use the Flame chart, please switch to a Delta profile."
+            }), flamechartHelpText !== null && flamechartHelpText !== void 0 ? flamechartHelpText : null]
+          })
+        });
+      } else if (isDurationTooLong) {
+        return /*#__PURE__*/_jsx(ErrorContent, {
+          errorMessage: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("span", {
+              children: "Flame chart is unavailable for queries longer than 15 minutes. Please select a point in the metrics graph to continue."
+            }), flamechartHelpText !== null && flamechartHelpText !== void 0 ? flamechartHelpText : null]
+          })
+        });
+      } else {
+        return /*#__PURE__*/_jsx(ErrorContent, {
+          errorMessage: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("span", {
+              children: "The Flame chart is not available for this query."
+            }), flamechartHelpText !== null && flamechartHelpText !== void 0 ? flamechartHelpText : null]
+          })
+        });
+      }
+    }
+    if (arrow === undefined) return /*#__PURE__*/_jsx("div", {
+      className: "mx-auto text-center",
+      children: "No data..."
+    });
+    if (total === 0n && !loading) return /*#__PURE__*/_jsx("div", {
+      className: "mx-auto text-center",
+      children: "Profile has no samples"
     });
-    // By default, we want delta profiles (CPU) to be relatively compared.
-    // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
-    const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
-    const [compareAbsolute = compareAbsoluteDefault] = useURLState('compare_absolute');
-    const isCompareAbsolute = compareAbsolute === 'true';
-    const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
-    const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
-        if (arrow === undefined) {
-            return ['0', '0', false, '0', '0', false, '0', '0'];
-        }
-        const trimmed = arrow?.trimmed ?? 0n;
-        const totalUnfiltered = total + filtered;
-        // safeguard against division by zero
-        const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1n;
-        return [
-            numberFormatter.format(total),
-            numberFormatter.format(totalUnfiltered),
-            trimmed > 0,
-            numberFormatter.format(trimmed),
-            numberFormatter.format(divide(trimmed * 100n, totalUnfilteredDivisor)),
-            filtered > 0,
-            numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor)),
-        ];
-    }, [arrow, filtered, total]);
-    const loadingState = !loading && arrow !== undefined && metadataMappingFiles !== undefined;
-    // If there is only one mapping file, we want to color by filename by default.
-    useEffect(() => {
-        if (mappingsListCount === 1 && colorBy !== 'filename') {
-            setColorBy('filename');
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mappingsListCount]);
-    useEffect(() => {
-        if (loadingState) {
-            setIsLoading(false);
-        }
-        else {
-            setIsLoading(true);
-        }
-    }, [loadingState]);
-    const flameGraph = useMemo(() => {
-        const { isValid: isFlameChartValid, isNonDelta, isDurationTooLong, } = isFlameChart
-            ? validateFlameChartQuery(profileSource)
-            : { isValid: true, isNonDelta: false, isDurationTooLong: false };
-        const isInvalidFlameChartQuery = isFlameChart && !isFlameChartValid;
-        if (isLoading && !isInvalidFlameChartQuery) {
-            return (_jsx("div", { className: "h-auto overflow-clip", "data-testid": TEST_IDS.FLAMEGRAPH_SKELETON, children: isRenderedAsFlamegraph ? (_jsx(SandwichFlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) : (_jsx(FlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) }));
-        }
-        // Do necessary checks to ensure that flame chart can be rendered for this query.
-        if (isInvalidFlameChartQuery) {
-            if (isNonDelta) {
-                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "To use the Flame chart, please switch to a Delta profile." }), flamechartHelpText ?? null] }) }));
-            }
-            else if (isDurationTooLong) {
-                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "Flame chart is unavailable for queries longer than 15 minutes. Please select a point in the metrics graph to continue." }), flamechartHelpText ?? null] }) }));
-            }
-            else {
-                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "The Flame chart is not available for this query." }), flamechartHelpText ?? null] }) }));
-            }
-        }
-        if (arrow === undefined)
-            return _jsx("div", { className: "mx-auto text-center", children: "No data..." });
-        if (total === 0n && !loading)
-            return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
-        if (arrow !== undefined) {
-            return (_jsx("div", { className: "relative", children: _jsx("div", { ref: flameChartRef, children: _jsx(FlameGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: effectiveCurPathArrow, setCurPath: setCurPathArrowWrapper, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, filenamesListFromMetadata: filenamesList, compareAbsolute: isCompareAbsolute, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, tooltipId: tooltipId, maxFrameCount: maxFrameCount, isExpanded: isExpanded, colorBy: colorBy, zoomControlsRef: zoomControlsRef }) }) }));
-        }
-    }, [
-        isLoading,
-        arrow,
-        total,
-        loading,
-        width,
-        filtered,
-        profileType,
-        isHalfScreen,
-        isDarkMode,
-        isCompareAbsolute,
-        isFlameChart,
-        profileSource,
-        flameChartRef,
-        flamechartHelpText,
-        isRenderedAsFlamegraph,
-        isInSandwichView,
-        effectiveCurPathArrow,
-        setCurPathArrowWrapper,
-        tooltipId,
-        maxFrameCount,
-        isExpanded,
-        mappingsList,
-        filenamesList,
-        colorBy,
-        zoomControlsRef,
-    ]);
-    useEffect(() => {
-        if (isTrimmed) {
-            console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
-        }
-    }, [isTrimmed, trimmedFormatted, trimmedPercentage]);
-    if (error != null) {
-        onError?.(error);
-        if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
-            return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
-        }
-        // Check for specific merge errors
-        const errorMessageLower = error.message?.toLowerCase() ?? '';
-        const isMergeError = errorMessageLower.includes('failed to merge flame chart records');
-        const isTimestampError = errorMessageLower.includes('multiple samples for the same timestamp is not allowed');
-        if (isMergeError || isTimestampError) {
-            return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: "Unable to display overlapping data" }), _jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "The selected data contains overlapping samples from multiple nodes or threads that cannot be merged." }), _jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "To view this data, please apply more specific filters:" }), _jsxs("ul", { className: "list-disc list-inside text-left max-w-md mx-auto text-gray-600 dark:text-gray-400", children: [_jsx("li", { children: "Select a specific node from the node selector" }), _jsx("li", { children: "Filter by either CPU or thread" })] })] }) }));
-        }
-        return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: capitalizeOnlyFirstLetter(error.message) }), isFlameChart ? flamechartHelpText ?? null : null] }) }));
+    if (arrow !== undefined) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "relative",
+        children: /*#__PURE__*/_jsx("div", {
+          ref: flameChartRef,
+          children: /*#__PURE__*/_jsx(FlameGraphArrow, {
+            width: width,
+            arrow: arrow,
+            total: total,
+            filtered: filtered,
+            curPath: effectiveCurPathArrow,
+            setCurPath: setCurPathArrowWrapper,
+            profileType: profileType,
+            isHalfScreen: isHalfScreen,
+            mappingsListFromMetadata: mappingsList,
+            filenamesListFromMetadata: filenamesList,
+            compareAbsolute: isCompareAbsolute,
+            isFlameChart: isFlameChart,
+            profileSource: profileSource,
+            isRenderedAsFlamegraph: isRenderedAsFlamegraph,
+            isInSandwichView: isInSandwichView,
+            tooltipId: tooltipId,
+            maxFrameCount: maxFrameCount,
+            isExpanded: isExpanded,
+            colorBy: colorBy,
+            zoomControlsRef: zoomControlsRef
+          })
+        })
+      });
+    }
+  }, [isLoading, arrow, total, loading, width, filtered, profileType, isHalfScreen, isDarkMode, isCompareAbsolute, isFlameChart, profileSource, flameChartRef, flamechartHelpText, isRenderedAsFlamegraph, isInSandwichView, effectiveCurPathArrow, setCurPathArrowWrapper, tooltipId, maxFrameCount, isExpanded, mappingsList, filenamesList, colorBy, zoomControlsRef]);
+  useEffect(function () {
+    if (isTrimmed) {
+      console.info("Trimmed ".concat(trimmedFormatted, " (").concat(trimmedPercentage, "%) too small values."));
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className: cx(!isInSandwichView ? 'min-h-48' : ''), id: "h-flame-graph", ...testId(TEST_IDS.FLAMEGRAPH_CONTAINER), children: _jsx(_Fragment, { children: flameGraph }) }), !isInSandwichView && (_jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] }, "flame-graph-loaded") }));
+  }, [isTrimmed, trimmedFormatted, trimmedPercentage]);
+  if (error != null) {
+    var _error$message$toLowe, _error$message;
+    onError === null || onError === void 0 || onError(error);
+    if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
+      return /*#__PURE__*/_jsx(ErrorContent, {
+        errorMessage: authenticationErrorMessage
+      });
+    }
+
+    // Check for specific merge errors
+    var errorMessageLower = (_error$message$toLowe = (_error$message = error.message) === null || _error$message === void 0 ? void 0 : _error$message.toLowerCase()) !== null && _error$message$toLowe !== void 0 ? _error$message$toLowe : '';
+    var isMergeError = errorMessageLower.includes('failed to merge flame chart records');
+    var isTimestampError = errorMessageLower.includes('multiple samples for the same timestamp is not allowed');
+    if (isMergeError || isTimestampError) {
+      return /*#__PURE__*/_jsx(ErrorContent, {
+        errorMessage: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "font-semibold",
+            children: "Unable to display overlapping data"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "text-gray-600 dark:text-gray-400",
+            children: "The selected data contains overlapping samples from multiple nodes or threads that cannot be merged."
+          }), /*#__PURE__*/_jsx("span", {
+            className: "text-gray-600 dark:text-gray-400",
+            children: "To view this data, please apply more specific filters:"
+          }), /*#__PURE__*/_jsxs("ul", {
+            className: "list-disc list-inside text-left max-w-md mx-auto text-gray-600 dark:text-gray-400",
+            children: [/*#__PURE__*/_jsx("li", {
+              children: "Select a specific node from the node selector"
+            }), /*#__PURE__*/_jsx("li", {
+              children: "Filter by either CPU or thread"
+            })]
+          })]
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx(ErrorContent, {
+      errorMessage: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: capitalizeOnlyFirstLetter(error.message)
+        }), isFlameChart ? flamechartHelpText !== null && flamechartHelpText !== void 0 ? flamechartHelpText : null : null]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimatePresence, {
+    children: /*#__PURE__*/_jsxs(motion.div, {
+      className: "relative h-full w-full",
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      transition: {
+        duration: 0.5
+      },
+      children: [compareMode ? /*#__PURE__*/_jsx(DiffLegend, {}) : null, /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+        className: cx(!isInSandwichView ? 'min-h-48' : ''),
+        id: "h-flame-graph"
+      }, testId(TEST_IDS.FLAMEGRAPH_CONTAINER)), {}, {
+        children: /*#__PURE__*/_jsx(_Fragment, {
+          children: flameGraph
+        })
+      })), !isInSandwichView && /*#__PURE__*/_jsxs("p", {
+        className: "my-2 text-xs",
+        children: ["Showing ", totalFormatted, ' ', isFiltered ? /*#__PURE__*/_jsxs("span", {
+          children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' ']
+        }) : /*#__PURE__*/_jsx(_Fragment, {}), "values.", ' ']
+      })]
+    }, "flame-graph-loaded")
+  });
 };
-export default ProfileFlameGraph;
+export default ProfileFlameGraph;