@parca/profile 0.19.139 → 0.19.142

package/dist/Sandwich/components/CallersSection.js

@@ -1,4 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 _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; }
 // 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,38 +19,100 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useMemo } from 'react';
+
+import React, { useMemo } from 'react';
 import { tableFromIPC } from '@uwdata/flechette';
 import { Tooltip } from 'react-tooltip';
 import { Button } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import ProfileFlameGraph from '../../ProfileFlameGraph';
 import { alignedUint8Array } from '../../utils';
-const FIELD_DEPTH = 'depth';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var FIELD_DEPTH = 'depth';
 function getMaxDepth(depthColumn) {
-    if (depthColumn === null)
-        return 0;
-    let max = 0;
-    for (const val of depthColumn) {
-        const numVal = Number(val);
-        if (numVal > max)
-            max = numVal;
+  if (depthColumn === null) return 0;
+  var max = 0;
+  var _iterator = _createForOfIteratorHelper(depthColumn),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var val = _step.value;
+      var numVal = Number(val);
+      if (numVal > max) max = numVal;
     }
-    return max;
-}
-export function CallersSection({ callersRef, callersFlamegraphData, profileSource, curPathArrow, setCurPathArrow, isExpanded, setIsExpanded, defaultMaxFrames, }) {
-    const maxDepth = useMemo(() => {
-        if (callersFlamegraphData?.arrow != null) {
-            const table = tableFromIPC(alignedUint8Array(callersFlamegraphData.arrow.record), {
-                useBigInt: true,
-            });
-            const depthColumn = table.getChild(FIELD_DEPTH);
-            return getMaxDepth(depthColumn);
-        }
-        return 0;
-    }, [callersFlamegraphData]);
-    const shouldShowButton = maxDepth > defaultMaxFrames;
-    return (_jsxs(_Fragment, { children: [shouldShowButton && (_jsxs(Button, { variant: "neutral", onClick: () => setIsExpanded(!isExpanded), className: "absolute right-8 top-[-46px] z-10", type: "button", children: [_jsx("span", { "data-tooltip-content": !isExpanded
-                            ? `This profile has ${maxDepth} frames, showing only the top ${defaultMaxFrames} frames. Click to show more frames.`
-                            : `This profile has ${maxDepth} frames, showing all frames. Click to hide frames.`, "data-tooltip-id": "show-more-frames", children: isExpanded ? 'Hide frames' : 'Show more frames' }), _jsx(Tooltip, { id: "show-more-frames" })] })), _jsxs("div", { className: "flex relative flex-row overflow-hidden", ref: callersRef, ...testId(TEST_IDS.SANDWICH_CALLERS_SECTION), children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0", children: ["Callers ", '->'] }), _jsx("div", { className: "flex-1 overflow-hidden relative", children: _jsx(ProfileFlameGraph, { arrow: callersFlamegraphData?.arrow, total: callersFlamegraphData.total ?? BigInt(0), filtered: callersFlamegraphData.filtered ?? BigInt(0), profileType: profileSource?.ProfileType(), loading: callersFlamegraphData.loading, error: callersFlamegraphData.error, isHalfScreen: true, width: callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: callersFlamegraphData.metadataMappingFiles, metadataLoading: callersFlamegraphData.metadataLoading, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isRenderedAsFlamegraph: true, profileSource: profileSource, tooltipId: "callers", maxFrameCount: defaultMaxFrames, isExpanded: isExpanded }) })] })] }));
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return max;
 }
+export function CallersSection(_ref) {
+  var _callersFlamegraphDat, _callersFlamegraphDat2;
+  var callersRef = _ref.callersRef,
+    callersFlamegraphData = _ref.callersFlamegraphData,
+    profileSource = _ref.profileSource,
+    curPathArrow = _ref.curPathArrow,
+    setCurPathArrow = _ref.setCurPathArrow,
+    isExpanded = _ref.isExpanded,
+    setIsExpanded = _ref.setIsExpanded,
+    defaultMaxFrames = _ref.defaultMaxFrames;
+  var maxDepth = useMemo(function () {
+    if ((callersFlamegraphData === null || callersFlamegraphData === void 0 ? void 0 : callersFlamegraphData.arrow) != null) {
+      var table = tableFromIPC(alignedUint8Array(callersFlamegraphData.arrow.record), {
+        useBigInt: true
+      });
+      var depthColumn = table.getChild(FIELD_DEPTH);
+      return getMaxDepth(depthColumn);
+    }
+    return 0;
+  }, [callersFlamegraphData]);
+  var shouldShowButton = maxDepth > defaultMaxFrames;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [shouldShowButton && /*#__PURE__*/_jsxs(Button, {
+      variant: "neutral",
+      onClick: function onClick() {
+        return setIsExpanded(!isExpanded);
+      },
+      className: "absolute right-8 top-[-46px] z-10",
+      type: "button",
+      children: [/*#__PURE__*/_jsx("span", {
+        "data-tooltip-content": !isExpanded ? "This profile has ".concat(maxDepth, " frames, showing only the top ").concat(defaultMaxFrames, " frames. Click to show more frames.") : "This profile has ".concat(maxDepth, " frames, showing all frames. Click to hide frames."),
+        "data-tooltip-id": "show-more-frames",
+        children: isExpanded ? 'Hide frames' : 'Show more frames'
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        id: "show-more-frames"
+      })]
+    }), /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "flex relative flex-row overflow-hidden",
+      ref: callersRef
+    }, testId(TEST_IDS.SANDWICH_CALLERS_SECTION)), {}, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0",
+        children: ["Callers ", '->']
+      }), /*#__PURE__*/_jsx("div", {
+        className: "flex-1 overflow-hidden relative",
+        children: /*#__PURE__*/_jsx(ProfileFlameGraph, {
+          arrow: callersFlamegraphData === null || callersFlamegraphData === void 0 ? void 0 : callersFlamegraphData.arrow,
+          total: (_callersFlamegraphDat = callersFlamegraphData.total) !== null && _callersFlamegraphDat !== void 0 ? _callersFlamegraphDat : BigInt(0),
+          filtered: (_callersFlamegraphDat2 = callersFlamegraphData.filtered) !== null && _callersFlamegraphDat2 !== void 0 ? _callersFlamegraphDat2 : BigInt(0),
+          profileType: profileSource === null || profileSource === void 0 ? void 0 : profileSource.ProfileType(),
+          loading: callersFlamegraphData.loading,
+          error: callersFlamegraphData.error,
+          isHalfScreen: true,
+          width: callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0,
+          metadataMappingFiles: callersFlamegraphData.metadataMappingFiles,
+          metadataLoading: callersFlamegraphData.metadataLoading,
+          isInSandwichView: true,
+          curPathArrow: curPathArrow,
+          setNewCurPathArrow: setCurPathArrow,
+          isRenderedAsFlamegraph: true,
+          profileSource: profileSource,
+          tooltipId: "callers",
+          maxFrameCount: defaultMaxFrames,
+          isExpanded: isExpanded
+        })
+      })]
+    }))]
+  });
+}

package/dist/Sandwich/components/TableSection.js

@@ -1,6 +1,79 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { Table as TableComponent } from '@parca/components';
 import { ROW_HEIGHT } from '../../Table/utils/functions';
-export function TableSection({ rows, columns, initialSorting, selectedRow, onRowClick, shouldHighlightRow, enableHighlighting, columnVisibility, height, sandwichFunctionName, }) {
-    return (_jsx("div", { style: { height: height !== undefined ? `${height}px` : '80vh' }, className: `font-robotoMono cursor-pointer ${selectedRow != null && sandwichFunctionName !== undefined ? 'w-[50%]' : 'w-full'}`, children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, usePointerCursor: true, onRowClick: onRowClick, shouldHighlightRow: shouldHighlightRow, enableHighlighting: enableHighlighting, estimatedRowHeight: ROW_HEIGHT, columnVisibility: columnVisibility }) }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TableSection(t0) {
+  var $ = _c(14);
+  var rows = t0.rows,
+    columns = t0.columns,
+    initialSorting = t0.initialSorting,
+    selectedRow = t0.selectedRow,
+    onRowClick = t0.onRowClick,
+    shouldHighlightRow = t0.shouldHighlightRow,
+    enableHighlighting = t0.enableHighlighting,
+    columnVisibility = t0.columnVisibility,
+    height = t0.height,
+    sandwichFunctionName = t0.sandwichFunctionName;
+  var t1 = height !== undefined ? "".concat(height, "px") : "80vh";
+  var t2;
+  if ($[0] !== t1) {
+    t2 = {
+      height: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  var t3 = "font-robotoMono cursor-pointer ".concat(selectedRow != null && sandwichFunctionName !== undefined ? "w-[50%]" : "w-full");
+  var t4;
+  if ($[2] !== columnVisibility || $[3] !== columns || $[4] !== enableHighlighting || $[5] !== initialSorting || $[6] !== onRowClick || $[7] !== rows || $[8] !== shouldHighlightRow) {
+    t4 = /*#__PURE__*/_jsx(TableComponent, {
+      data: rows,
+      columns: columns,
+      initialSorting: initialSorting,
+      usePointerCursor: true,
+      onRowClick: onRowClick,
+      shouldHighlightRow: shouldHighlightRow,
+      enableHighlighting: enableHighlighting,
+      estimatedRowHeight: ROW_HEIGHT,
+      columnVisibility: columnVisibility
+    });
+    $[2] = columnVisibility;
+    $[3] = columns;
+    $[4] = enableHighlighting;
+    $[5] = initialSorting;
+    $[6] = onRowClick;
+    $[7] = rows;
+    $[8] = shouldHighlightRow;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  var t5;
+  if ($[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+    t5 = /*#__PURE__*/_jsx("div", {
+      style: t2,
+      className: t3,
+      children: t4
+    });
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+}

package/dist/Sandwich/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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,6 +23,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, { useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useURLState } from '@parca/components';
@@ -19,15 +32,115 @@ import { useDashboard } from '../ProfileView/context/DashboardContext';
 import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
 import { CalleesSection } from './components/CalleesSection';
 import { CallersSection } from './components/CallersSection';
-const Sandwich = React.memo(function Sandwich({ sandwichData, profileSource, }) {
-    const { dashboardItems } = useDashboard();
-    const [sandwichFunctionName] = useURLState('sandwich_function_name');
-    const callersRef = React.useRef(null);
-    const calleesRef = React.useRef(null);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const defaultMaxFrames = 10;
-    const callersCalleesContainerRef = useRef(null);
-    const { curPathArrow, setCurPathArrow } = useVisualizationState();
-    return (_jsx("section", { className: "flex flex-row h-full w-full", ...testId(TEST_IDS.SANDWICH_CONTAINER), children: _jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx("div", { className: "relative flex flex-row", children: sandwichFunctionName !== undefined ? (_jsxs("div", { className: "w-full flex flex-col", ref: callersCalleesContainerRef, children: [_jsx(CallersSection, { callersRef: callersRef, callersFlamegraphData: sandwichData.callers, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, isExpanded: isExpanded, setIsExpanded: setIsExpanded, defaultMaxFrames: defaultMaxFrames }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, calleesFlamegraphData: sandwichData.callees, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", ...testId(TEST_IDS.SANDWICH_NO_FUNCTION_SELECTED), children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table') ? ('Please select a function to view its callers and callees.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var Sandwich = /*#__PURE__*/React.memo(function Sandwich(t0) {
+  var $ = _c(12);
+  var sandwichData = t0.sandwichData,
+    profileSource = t0.profileSource;
+  var _useDashboard = useDashboard(),
+    dashboardItems = _useDashboard.dashboardItems;
+  var _useURLState = useURLState("sandwich_function_name"),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    sandwichFunctionName = _useURLState2[0];
+  var callersRef = React.useRef(null);
+  var calleesRef = React.useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var callersCalleesContainerRef = useRef(null);
+  var _useVisualizationStat = useVisualizationState(),
+    curPathArrow = _useVisualizationStat.curPathArrow,
+    setCurPathArrow = _useVisualizationStat.setCurPathArrow;
+  var t1;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t1 = testId(TEST_IDS.SANDWICH_CONTAINER);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  var t2;
+  var t3;
+  var t4;
+  if ($[1] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = {
+      display: "none",
+      opacity: 0
+    };
+    t3 = {
+      display: "block",
+      opacity: 1
+    };
+    t4 = {
+      duration: 0.5
+    };
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t2 = $[1];
+    t3 = $[2];
+    t4 = $[3];
+  }
+  var t5;
+  if ($[4] !== curPathArrow || $[5] !== dashboardItems || $[6] !== isExpanded || $[7] !== profileSource || $[8] !== sandwichData || $[9] !== sandwichFunctionName || $[10] !== setCurPathArrow) {
+    t5 = /*#__PURE__*/_jsx("section", _objectSpread(_objectSpread({
+      className: "flex flex-row h-full w-full"
+    }, t1), {}, {
+      children: /*#__PURE__*/_jsx(AnimatePresence, {
+        children: /*#__PURE__*/_jsx(motion.div, {
+          className: "h-full w-full",
+          initial: t2,
+          animate: t3,
+          transition: t4,
+          children: /*#__PURE__*/_jsx("div", {
+            className: "relative flex flex-row",
+            children: sandwichFunctionName !== undefined ? /*#__PURE__*/_jsxs("div", {
+              className: "w-full flex flex-col",
+              ref: callersCalleesContainerRef,
+              children: [/*#__PURE__*/_jsx(CallersSection, {
+                callersRef: callersRef,
+                callersFlamegraphData: sandwichData.callers,
+                profileSource: profileSource,
+                curPathArrow: curPathArrow,
+                setCurPathArrow: setCurPathArrow,
+                isExpanded: isExpanded,
+                setIsExpanded: setIsExpanded,
+                defaultMaxFrames: 10
+              }), /*#__PURE__*/_jsx("div", {
+                className: "h-4"
+              }), /*#__PURE__*/_jsx(CalleesSection, {
+                calleesRef: calleesRef,
+                calleesFlamegraphData: sandwichData.callees,
+                profileSource: profileSource,
+                curPathArrow: curPathArrow,
+                setCurPathArrow: setCurPathArrow
+              })]
+            }) : /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+              className: "items-center justify-center flex h-full w-full"
+            }, testId(TEST_IDS.SANDWICH_NO_FUNCTION_SELECTED)), {}, {
+              children: /*#__PURE__*/_jsx("p", {
+                className: "text-sm",
+                children: dashboardItems.includes("table") ? "Please select a function to view its callers and callees." : /*#__PURE__*/_jsxs(_Fragment, {
+                  children: ["Use the right-click menu on the Flame", " ", dashboardItems.includes("flamegraph") ? "Graph" : "Chart", " to choose a function to view its callers and callees."]
+                })
+              })
+            }))
+          })
+        }, "sandwich-loaded")
+      })
+    }));
+    $[4] = curPathArrow;
+    $[5] = dashboardItems;
+    $[6] = isExpanded;
+    $[7] = profileSource;
+    $[8] = sandwichData;
+    $[9] = sandwichFunctionName;
+    $[10] = setCurPathArrow;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
 });
-export default Sandwich;
+export default Sandwich;

package/dist/Sandwich/utils/processRowData.js

@@ -10,44 +10,53 @@
 // 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 { FIELD_CUMULATIVE, FIELD_CUMULATIVE_DIFF, FIELD_FLAT, FIELD_FLAT_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_FUNCTION_SYSTEM_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../Table';
+
+import { FIELD_CUMULATIVE, FIELD_CUMULATIVE_DIFF, FIELD_FLAT, FIELD_FLAT_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_FUNCTION_SYSTEM_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE } from '../../Table';
 import { RowName, getRowColor } from '../../Table/utils/functions';
-export function processRowData({ table, colorByColors, colorBy }) {
-    if (table == null || table.numRows === 0) {
-        return [];
-    }
-    const flatColumn = table.getChild(FIELD_FLAT);
-    const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
-    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-    const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
-    const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
-    const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
-    const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
-    const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
-    const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
-    const getRow = (i) => {
-        const flat = flatColumn?.get(i) ?? 0n;
-        const flatDiff = flatDiffColumn?.get(i) ?? 0n;
-        const cumulative = cumulativeColumn?.get(i) ?? 0n;
-        const cumulativeDiff = cumulativeDiffColumn?.get(i) ?? 0n;
-        const functionSystemName = functionSystemNameColumn?.get(i) ?? '';
-        const functionFileName = functionFileNameColumn?.get(i) ?? '';
-        const mappingFile = mappingFileColumn?.get(i) ?? '';
-        return {
-            id: i,
-            colorProperty: {
-                color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
-                mappingFile,
-            },
-            name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
-            flat,
-            flatDiff,
-            cumulative,
-            cumulativeDiff,
-            functionSystemName,
-            functionFileName,
-            mappingFile,
-        };
+export function processRowData(_ref) {
+  var table = _ref.table,
+    colorByColors = _ref.colorByColors,
+    colorBy = _ref.colorBy;
+  if (table == null || table.numRows === 0) {
+    return [];
+  }
+  var flatColumn = table.getChild(FIELD_FLAT);
+  var flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
+  var cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+  var cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
+  var functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+  var functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
+  var functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+  var mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
+  var locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
+  var getRow = function getRow(i) {
+    var _flatColumn$get, _flatDiffColumn$get, _cumulativeColumn$get, _cumulativeDiffColumn, _functionSystemNameCo, _functionFileNameColu, _mappingFileColumn$ge;
+    var flat = (_flatColumn$get = flatColumn === null || flatColumn === void 0 ? void 0 : flatColumn.get(i)) !== null && _flatColumn$get !== void 0 ? _flatColumn$get : 0n;
+    var flatDiff = (_flatDiffColumn$get = flatDiffColumn === null || flatDiffColumn === void 0 ? void 0 : flatDiffColumn.get(i)) !== null && _flatDiffColumn$get !== void 0 ? _flatDiffColumn$get : 0n;
+    var cumulative = (_cumulativeColumn$get = cumulativeColumn === null || cumulativeColumn === void 0 ? void 0 : cumulativeColumn.get(i)) !== null && _cumulativeColumn$get !== void 0 ? _cumulativeColumn$get : 0n;
+    var cumulativeDiff = (_cumulativeDiffColumn = cumulativeDiffColumn === null || cumulativeDiffColumn === void 0 ? void 0 : cumulativeDiffColumn.get(i)) !== null && _cumulativeDiffColumn !== void 0 ? _cumulativeDiffColumn : 0n;
+    var functionSystemName = (_functionSystemNameCo = functionSystemNameColumn === null || functionSystemNameColumn === void 0 ? void 0 : functionSystemNameColumn.get(i)) !== null && _functionSystemNameCo !== void 0 ? _functionSystemNameCo : '';
+    var functionFileName = (_functionFileNameColu = functionFileNameColumn === null || functionFileNameColumn === void 0 ? void 0 : functionFileNameColumn.get(i)) !== null && _functionFileNameColu !== void 0 ? _functionFileNameColu : '';
+    var mappingFile = (_mappingFileColumn$ge = mappingFileColumn === null || mappingFileColumn === void 0 ? void 0 : mappingFileColumn.get(i)) !== null && _mappingFileColumn$ge !== void 0 ? _mappingFileColumn$ge : '';
+    return {
+      id: i,
+      colorProperty: {
+        color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+        mappingFile: mappingFile
+      },
+      name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
+      flat: flat,
+      flatDiff: flatDiff,
+      cumulative: cumulative,
+      cumulativeDiff: cumulativeDiff,
+      functionSystemName: functionSystemName,
+      functionFileName: functionFileName,
+      mappingFile: mappingFile
     };
-    return Array.from({ length: table.numRows }, (_, i) => getRow(i));
-}
+  };
+  return Array.from({
+    length: table.numRows
+  }, function (_, i) {
+    return getRow(i);
+  });
+}