@parca/profile 0.19.12 → 0.19.14

package/dist/ProfileView/components/Toolbars/index.d.ts

@@ -25,8 +25,6 @@ export interface VisualisationToolbarProps {
     setGroupByLabels: (labels: string[]) => void;
     showVisualizationSelector?: boolean;
     sandwichFunctionName?: string;
-    setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
-    resetSandwichFunctionName: () => void;
 }
 export interface TableToolbarProps {
     profileType?: ProfileType;

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,+BAA+B;IAC9C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAiB1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAmB1E,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA6G9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,+BAA+B;IAC9C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAiB1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAmB1E,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+F9D,CAAC"}

package/dist/ProfileView/components/Toolbars/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
-import { Button, UserPreferencesModal } from '@parca/components';
+import { Button } from '@parca/components';
 import { useDashboard } from '../../context/DashboardContext';
 import GroupByDropdown from '../ActionButtons/GroupByDropdown';
 import FilterByFunctionButton from '../FilterByFunctionButton';
@@ -19,18 +19,17 @@ export const SandwichIcicleGraphToolbar = ({ resetSandwichFunctionName, sandwich
     return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end justify-between", children: _jsx(Button, { color: "neutral", onClick: () => resetSandwichFunctionName(), className: "w-auto", variant: "neutral", disabled: sandwichFunctionName === undefined || sandwichFunctionName.length === 0, children: "Reset view" }) }) }));
 };
 const Divider = () => (_jsx("div", { className: "border-t mt-4 border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }));
-export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, preferencesModal, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, resetSandwichFunctionName, sandwichFunctionName, }) => {
+export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, }) => {
     const { dashboardItems } = useDashboard();
     const isTableViz = dashboardItems?.includes('table');
     const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
     const isGraphViz = dashboardItems?.includes('icicle');
-    const isSandwichIcicleGraphViz = dashboardItems?.includes('sandwich');
-    const isTableView = isTableVizOnly || isSandwichIcicleGraphViz;
+    const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
     const req = profileSource?.QueryRequest();
     if (req !== null && req !== undefined) {
         req.groupBy = {
             fields: groupBy ?? [],
         };
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [!isTableView && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableView }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] })), isSandwichIcicleGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(SandwichIcicleGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
 };

package/dist/ProfileView/components/ViewSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,sBAAqB,KAAK,KAAG,GAAG,CAAC,OA4IlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,sBAAqB,KAAK,KAAG,GAAG,CAAC,OAqJlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileView/components/ViewSelector/index.js

@@ -5,10 +5,11 @@ const ViewSelector = ({ profileSource }) => {
     const [dashboardItems = ['icicle'], setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
+    const [, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const { enableSourcesView, enableSandwichView } = useParcaContext();
     const allItems = [
-        { key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table') },
         { key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
+        { key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table') },
         {
             key: 'iciclechart',
             label: (_jsxs("span", { className: "relative", children: ["Iciclechart", _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })),
@@ -38,26 +39,28 @@ const ViewSelector = ({ profileSource }) => {
     const getInnerActionForItem = (item) => {
         if (dashboardItems.length === 1 && item.key === dashboardItems[0])
             return undefined;
-        // For sandwich view, return a no-op action
-        if (item.key === 'sandwich') {
-            return {
-                text: 'Add Panel',
-                onClick: () => { },
-                isDisabled: true, // Custom property to control button state
-            };
-        }
+        // If we already have 2 panels and this item isn't selected, don't show any action
+        if (dashboardItems.length >= 2 && !dashboardItems.includes(item.key))
+            return undefined;
         return {
             text: !item.canBeSelected && item.key === 'source'
                 ? 'Add Panel'
                 : item.canBeSelected
                     ? 'Add Panel'
-                    : 'Close Panel',
+                    : dashboardItems.includes(item.key)
+                        ? 'Close Panel'
+                        : 'Add Panel',
             onClick: () => {
                 if (item.canBeSelected) {
                     setDashboardItems([...dashboardItems, item.key]);
                 }
                 else {
-                    setDashboardItems(dashboardItems.filter(v => v !== item.key));
+                    const newDashboardItems = dashboardItems.filter(v => v !== item.key);
+                    setDashboardItems(newDashboardItems);
+                    // Reset sandwich function name when removing sandwich panel
+                    if (item.key === 'sandwich') {
+                        setSandwichFunctionName(undefined);
+                    }
                 }
             },
             isDisabled: dashboardItems.length === 1 && dashboardItems.includes('sandwich'),
@@ -72,6 +75,10 @@ const ViewSelector = ({ profileSource }) => {
     }));
     const onSelection = (value) => {
         const isOnlyChart = dashboardItems.length === 1;
+        if (isOnlyChart && value === 'sandwich') {
+            setDashboardItems([...dashboardItems, value]);
+            return;
+        }
         if (isOnlyChart) {
             setDashboardItems([value]);
             return;

package/dist/ProfileView/context/DashboardContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/DashboardContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CAwBnD,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC"}
+{"version":3,"file":"DashboardContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/DashboardContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CA8BnD,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC"}

package/dist/ProfileView/context/DashboardContext.js

@@ -18,9 +18,14 @@ export const DashboardProvider = ({ children }) => {
     const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
+    const [, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const handleClosePanel = (visualizationType) => {
         const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
         setDashboardItems(newDashboardItems);
+        // Reset sandwich function name when closing sandwich panel
+        if (visualizationType === 'sandwich') {
+            setSandwichFunctionName(undefined);
+        }
     };
     const isMultiPanelView = dashboardItems.length > 1;
     return (_jsx(DashboardContext.Provider, { value: {

package/dist/ProfileView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,eAAO,MAAM,WAAW,sLAarB,gBAAgB,KAAG,GAAG,CAAC,OAyIzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,eAAO,MAAM,WAAW,sLAarB,gBAAgB,KAAG,GAAG,CAAC,OA4IzB,CAAC"}

package/dist/ProfileView/index.js

@@ -18,7 +18,7 @@ import ColorStackLegend from './components/ColorStackLegend';
 import { getDashboardItem } from './components/DashboardItems';
 import { DashboardLayout } from './components/DashboardLayout';
 import { ProfileHeader } from './components/ProfileHeader';
-import { IcicleGraphToolbar, TableToolbar, VisualisationToolbar } from './components/Toolbars';
+import { IcicleGraphToolbar, SandwichIcicleGraphToolbar, TableToolbar, VisualisationToolbar, } from './components/Toolbars';
 import { DashboardProvider } from './context/DashboardContext';
 import { ProfileViewContextProvider } from './context/ProfileViewContext';
 import { useProfileMetadata } from './hooks/useProfileMetadata';
@@ -26,7 +26,7 @@ import { useVisualizationState } from './hooks/useVisualizationState';
 export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }) => {
     const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
-    const { curPath, setCurPath, curPathArrow, setCurPathArrow, currentSearchString, setSearchString, colorStackLegend, colorBy, groupBy, toggleGroupBy, clearSelection, setGroupByLabels, sandwichFunctionName, setSandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
+    const { curPath, setCurPath, curPathArrow, setCurPathArrow, currentSearchString, setSearchString, colorStackLegend, colorBy, groupBy, toggleGroupBy, clearSelection, setGroupByLabels, sandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
     const { colorMappings } = useProfileMetadata({
         flamegraphArrow: flamegraphData.arrow,
         metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -61,7 +61,8 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
     const actionButtons = {
         icicle: _jsx(IcicleGraphToolbar, { curPath: curPathArrow, setNewCurPath: setCurPathArrow }),
         table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
+        sandwich: (_jsx(SandwichIcicleGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })),
     };
     const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
-    return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPathArrow, setNewCurPath: setCurPathArrow, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector, sandwichFunctionName: sandwichFunctionName, setSandwichFunctionName: setSandwichFunctionName, resetSandwichFunctionName: resetSandwichFunctionName }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
+    return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPathArrow, setNewCurPath: setCurPathArrow, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector, sandwichFunctionName: sandwichFunctionName }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
 };

package/dist/Sandwich/components/CalleesSection.d.ts

@@ -4,7 +4,6 @@ import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow
 import { type ProfileSource } from '../../ProfileSource';
 interface CalleesSectionProps {
     calleesRef: React.RefObject<HTMLDivElement>;
-    isHalfScreen: boolean;
     calleesFlamegraphResponse?: {
         report: {
             oneofKind: string;
@@ -20,6 +19,6 @@ interface CalleesSectionProps {
     setCurPathArrow: (path: CurrentPathFrame[]) => void;
     metadataMappingFiles?: string[];
 }
-export declare function CalleesSection({ calleesRef, isHalfScreen, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CalleesSectionProps): JSX.Element;
+export declare function CalleesSection({ calleesRef, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CalleesSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=CalleesSection.d.ts.map

package/dist/Sandwich/components/CalleesSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalleesSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CalleesSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAmCnC"}
+{"version":3,"file":"CalleesSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CalleesSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA+BnC"}

package/dist/Sandwich/components/CalleesSection.js

@@ -1,11 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import ProfileIcicleGraph from '../../ProfileIcicleGraph';
-export function CalleesSection({ calleesRef, isHalfScreen, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }) {
+export function CalleesSection({ calleesRef, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }) {
     return (_jsxs("div", { className: "flex relative items-start flex-row", ref: calleesRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ['<-', " Callees"] }), _jsx(ProfileIcicleGraph, { arrow: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
                     ? calleesFlamegraphResponse?.report?.flamegraphArrow
-                    : undefined, total: BigInt(calleesFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: calleesFlamegraphLoading, error: calleesFlamegraphError, isHalfScreen: true, width: calleesRef.current != null
-                    ? isHalfScreen
-                        ? (calleesRef.current.getBoundingClientRect().width - 54) / 2
-                        : calleesRef.current.getBoundingClientRect().width - 16
-                    : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
+                    : undefined, total: BigInt(calleesFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: calleesFlamegraphLoading, error: calleesFlamegraphError, isHalfScreen: true, width: calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
 }

package/dist/Sandwich/components/CallersSection.d.ts

@@ -4,7 +4,6 @@ import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow
 import { type ProfileSource } from '../../ProfileSource';
 interface CallersSectionProps {
     callersRef: React.RefObject<HTMLDivElement>;
-    isHalfScreen: boolean;
     callersFlamegraphResponse?: {
         report: {
             oneofKind: string;
@@ -19,7 +18,10 @@ interface CallersSectionProps {
     curPathArrow: CurrentPathFrame[];
     setCurPathArrow: (path: CurrentPathFrame[]) => void;
     metadataMappingFiles?: string[];
+    isExpanded: boolean;
+    setIsExpanded: (isExpanded: boolean) => void;
+    defaultMaxFrames: number;
 }
-export declare function CallersSection({ callersRef, isHalfScreen, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CallersSectionProps): JSX.Element;
+export declare function CallersSection({ callersRef, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, isExpanded, setIsExpanded, defaultMaxFrames, }: CallersSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=CallersSection.d.ts.map

package/dist/Sandwich/components/CallersSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallersSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CallersSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAoCnC"}
+{"version":3,"file":"CallersSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CallersSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAInD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAevD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,UAAU,EACV,aAAa,EACb,gBAAgB,GACjB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwEnC"}

package/dist/Sandwich/components/CallersSection.js

@@ -1,11 +1,47 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 { useMemo } from 'react';
+import { tableFromIPC } from 'apache-arrow';
+import { Tooltip } from 'react-tooltip';
+import { Button } from '@parca/components';
 import ProfileIcicleGraph from '../../ProfileIcicleGraph';
-export function CallersSection({ callersRef, isHalfScreen, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }) {
-    return (_jsxs("div", { className: "flex relative flex-row", ref: callersRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ["Callers ", '->'] }), _jsx(ProfileIcicleGraph, { arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                    ? callersFlamegraphResponse?.report?.flamegraphArrow
-                    : undefined, total: BigInt(callersFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: callersFlamegraphLoading, error: callersFlamegraphError, isHalfScreen: true, width: callersRef.current != null
-                    ? isHalfScreen
-                        ? (callersRef.current.getBoundingClientRect().width - 54) / 2
-                        : callersRef.current.getBoundingClientRect().width - 16
-                    : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isFlamegraph: true, profileSource: profileSource, tooltipId: "callers" })] }));
+const 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;
+    }
+    return max;
+}
+export function CallersSection({ callersRef, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, isExpanded, setIsExpanded, defaultMaxFrames, }) {
+    const maxDepth = useMemo(() => {
+        if (callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow' &&
+            callersFlamegraphResponse?.report?.flamegraphArrow != null) {
+            const table = tableFromIPC(callersFlamegraphResponse.report.flamegraphArrow.record);
+            const depthColumn = table.getChild(FIELD_DEPTH);
+            return getMaxDepth(depthColumn);
+        }
+        return 0;
+    }, [callersFlamegraphResponse]);
+    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, 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(ProfileIcicleGraph, { arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                                ? callersFlamegraphResponse?.report?.flamegraphArrow
+                                : undefined, total: BigInt(callersFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: callersFlamegraphLoading, error: callersFlamegraphError, isHalfScreen: true, width: callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isFlamegraph: true, profileSource: profileSource, tooltipId: "callers", maxFrameCount: defaultMaxFrames, isExpanded: isExpanded }) })] })] }));
 }

package/dist/Sandwich/components/TableSection.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 w-full cursor-pointer ${selectedRow != null && sandwichFunctionName !== undefined ? 'w-[50%]' : ''}`, children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, usePointerCursor: true, onRowClick: onRowClick, shouldHighlightRow: shouldHighlightRow, enableHighlighting: enableHighlighting, estimatedRowHeight: ROW_HEIGHT, columnVisibility: columnVisibility }) }));
+    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 }) }));
 }

package/dist/Sandwich/index.d.ts

@@ -8,7 +8,6 @@ interface Props {
     filtered: bigint;
     profileType?: ProfileType;
     loading: boolean;
-    isHalfScreen: boolean;
     unit?: string;
     metadataMappingFiles?: string[];
     queryClient?: QueryServiceClient;

package/dist/Sandwich/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAM1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAa/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,mCA6RZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAMlE,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAK1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAU/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,mCA2MZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/Sandwich/index.js

@@ -11,34 +11,32 @@ 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
 import { QueryRequest_ReportType } from '@parca/client';
-import { TableSkeleton, useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext, useURLState } from '@parca/components';
 import { useCurrentColorProfile } from '@parca/hooks';
-import { isSearchMatch } from '@parca/utilities';
 import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
-import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
+import { useDashboard } from '../ProfileView/context/DashboardContext';
 import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
 import { FIELD_FUNCTION_NAME } from '../Table';
 import { useColorManagement } from '../Table/hooks/useColorManagement';
-import { useTableConfiguration } from '../Table/hooks/useTableConfiguration';
 import { useQuery } from '../useQuery';
 import { CalleesSection } from './components/CalleesSection';
 import { CallersSection } from './components/CallersSection';
-import { TableSection } from './components/TableSection';
 import { processRowData } from './utils/processRowData';
-const Sandwich = React.memo(function Sandwich({ data, total, filtered, profileType, loading, isHalfScreen, unit, metadataMappingFiles, queryClient, profileSource, }) {
+const Sandwich = React.memo(function Sandwich({ data, filtered, profileType, loading, unit, metadataMappingFiles, queryClient, profileSource, }) {
     const currentColorProfile = useCurrentColorProfile();
-    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const { dashboardItems } = useDashboard();
+    const [sandwichFunctionName] = useURLState('sandwich_function_name');
     const { isDarkMode } = useParcaContext();
     const [selectedRow, setSelectedRow] = useState(null);
     const callersRef = React.useRef(null);
     const calleesRef = React.useRef(null);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const defaultMaxFrames = 10;
     const callersCalleesContainerRef = useRef(null);
-    const [tableHeight, setTableHeight] = useState(undefined);
-    const { compareMode } = useProfileViewContext();
     const { colorBy, setColorBy, curPathArrow, setCurPathArrow } = useVisualizationState();
     const nodeTrimThreshold = useMemo(() => {
         let width = 
@@ -88,13 +86,6 @@ const Sandwich = React.memo(function Sandwich({ data, total, filtered, profileTy
         colorBy,
     });
     unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
-    const tableConfig = useTableConfiguration({
-        unit,
-        total,
-        filtered,
-        compareMode,
-    });
-    const { columns, initialSorting, columnVisibility } = tableConfig;
     const rows = useMemo(() => {
         if (table == null || table.numRows === 0) {
             return [];
@@ -116,67 +107,24 @@ const Sandwich = React.memo(function Sandwich({ data, total, filtered, profileTy
             }
         }
     }, [sandwichFunctionName, rows, selectedRow]);
-    // Update table height based on callers/callees container height
-    useEffect(() => {
-        const updateTableHeight = () => {
-            if (callersCalleesContainerRef.current != null) {
-                const containerHeight = callersCalleesContainerRef.current.getBoundingClientRect().height;
-                setTableHeight(containerHeight);
-            }
-        };
-        // Initial measurement
-        updateTableHeight();
-        // Update on window resize
-        window.addEventListener('resize', updateTableHeight);
-        // Use ResizeObserver if available for more accurate updates
-        let resizeObserver = null;
-        if (callersCalleesContainerRef.current != null && 'ResizeObserver' in window) {
-            resizeObserver = new ResizeObserver(updateTableHeight);
-            resizeObserver.observe(callersCalleesContainerRef.current);
-        }
-        return () => {
-            window.removeEventListener('resize', updateTableHeight);
-            if (resizeObserver != null) {
-                resizeObserver.disconnect();
-            }
-        };
-    }, [sandwichFunctionName, callersFlamegraphResponse, calleesFlamegraphResponse]);
-    const onRowClick = useCallback((row) => {
-        setSelectedRow(row);
-        setSandwichFunctionName(row.name.trim());
-    }, [setSandwichFunctionName]);
-    const enableHighlighting = useMemo(() => {
-        return sandwichFunctionName != null && sandwichFunctionName?.length > 0;
-    }, [sandwichFunctionName]);
-    const shouldHighlightRow = useCallback((row) => {
-        if (!('name' in row)) {
-            return false;
-        }
-        const name = row.name;
-        return isSearchMatch(sandwichFunctionName, name);
-    }, [sandwichFunctionName]);
-    if (loading) {
-        return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
-    }
-    if (rows.length === 0) {
-        return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
-    }
-    return (_jsx("section", { className: "flex flex-row h-full w-full", 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: _jsxs("div", { className: "relative flex flex-row", children: [_jsx(TableSection, { rows: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, selectedRow: selectedRow, onRowClick: onRowClick, shouldHighlightRow: shouldHighlightRow, enableHighlighting: enableHighlighting, height: tableHeight, sandwichFunctionName: sandwichFunctionName }), sandwichFunctionName !== undefined && (_jsxs("div", { className: "w-[50%] flex flex-col", ref: callersCalleesContainerRef, children: [_jsx(CallersSection, { callersRef: callersRef, isHalfScreen: isHalfScreen, callersFlamegraphResponse: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                                        ? {
-                                            report: {
-                                                oneofKind: 'flamegraphArrow',
-                                                flamegraphArrow: callersFlamegraphResponse.report.flamegraphArrow,
-                                            },
-                                            total: callersFlamegraphResponse.total?.toString() ?? '0',
-                                        }
-                                        : undefined, callersFlamegraphLoading: callersFlamegraphLoading, callersFlamegraphError: callersFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, isHalfScreen: isHalfScreen, calleesFlamegraphResponse: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                                        ? {
-                                            report: {
-                                                oneofKind: 'flamegraphArrow',
-                                                flamegraphArrow: calleesFlamegraphResponse.report.flamegraphArrow,
-                                            },
-                                            total: calleesFlamegraphResponse.total?.toString() ?? '0',
-                                        }
-                                        : undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] }))] }) }, "sandwich-loaded") }) }));
+    return (_jsx("section", { className: "flex flex-row h-full w-full", 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, callersFlamegraphResponse: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                                    ? {
+                                        report: {
+                                            oneofKind: 'flamegraphArrow',
+                                            flamegraphArrow: callersFlamegraphResponse.report.flamegraphArrow,
+                                        },
+                                        total: callersFlamegraphResponse.total?.toString() ?? '0',
+                                    }
+                                    : undefined, callersFlamegraphLoading: callersFlamegraphLoading, callersFlamegraphError: callersFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles, isExpanded: isExpanded, setIsExpanded: setIsExpanded, defaultMaxFrames: defaultMaxFrames }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, calleesFlamegraphResponse: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                                    ? {
+                                        report: {
+                                            oneofKind: 'flamegraphArrow',
+                                            flamegraphArrow: calleesFlamegraphResponse.report.flamegraphArrow,
+                                        },
+                                        total: calleesFlamegraphResponse.total?.toString() ?? '0',
+                                    }
+                                    : undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table')
+                                ? 'Please select a function to view its callers and callees.'
+                                : 'Use the right-click menu on the flame graph to choose a function to view its callers and callees.' }) })) }) }, "sandwich-loaded") }) }));
 });
 export default Sandwich;

package/dist/SimpleMatchers/index.d.ts

@@ -8,6 +8,8 @@ interface Props {
     currentQuery: Query;
     profileType: string;
     queryBrowserRef: React.RefObject<HTMLDivElement>;
+    start?: number;
+    end?: number;
 }
 export declare const transformLabelsForSelect: (labelNames: string[]) => SelectItem[];
 export default function SimpleMathersWithProvider(props: Props): JSX.Element;

package/dist/SimpleMatchers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAKpC,OAAe,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAClD;AAoBD,eAAO,MAAM,wBAAwB,eAAgB,MAAM,EAAE,KAAG,UAAU,EAQzE,CAAC;AAwVF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkB3E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAKpC,OAAe,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAoBD,eAAO,MAAM,wBAAwB,eAAgB,MAAM,EAAE,KAAG,UAAU,EAQzE,CAAC;AAoWF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB3E"}

package/dist/SimpleMatchers/index.js

@@ -16,7 +16,7 @@ import { Icon } from '@iconify/react';
 import { useQueryClient } from '@tanstack/react-query';
 import cx from 'classnames';
 import { useGrpcMetadata } from '@parca/components';
-import { sanitizeLabelValue } from '@parca/utilities';
+import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
 import { LabelProvider, useLabels } from '../contexts/SimpleMatchersLabelContext';
 import { useUtilizationLabels } from '../contexts/UtilizationLabelsContext';
 import Select from './Select';
@@ -68,7 +68,7 @@ const operatorOptions = [
         },
     },
 ];
-const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileType, queryBrowserRef, }) => {
+const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileType, queryBrowserRef, start, end, }) => {
     const utilizationLabels = useUtilizationLabels();
     const [queryRows, setQueryRows] = useState([
         { labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false },
@@ -85,8 +85,18 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
             return [];
         }
         try {
-            const values = await reactQueryClient.fetchQuery([labelName, profileType], async () => {
-                const response = await queryClient.values({ labelName, match: [], profileType }, { meta: metadata }).response;
+            const values = await reactQueryClient.fetchQuery([labelName, profileType, start, end], async () => {
+                const response = await queryClient.values({
+                    labelName,
+                    match: [],
+                    profileType,
+                    ...(start !== undefined && end !== undefined
+                        ? {
+                            start: millisToProtoTimestamp(start),
+                            end: millisToProtoTimestamp(end),
+                        }
+                        : {}),
+                }, { meta: metadata }).response;
                 const sanitizedValues = sanitizeLabelValue(response.labelValues);
                 return sanitizedValues;
             }, {
@@ -98,7 +108,7 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
             console.error('Error fetching label values:', error);
             return [];
         }
-    }, [queryClient, metadata, profileType, reactQueryClient]);
+    }, [queryClient, metadata, profileType, reactQueryClient, start, end]);
     const fetchLabelValuesUtilization = useCallback(async (labelName) => {
         return (await utilizationLabels?.utilizationFetchLabelValues?.(labelName)) ?? [];
     }, [utilizationLabels]);
@@ -242,5 +252,5 @@ export default function SimpleMathersWithProvider(props) {
         const matchers = props.currentQuery.matchers;
         return matchers.map(matcher => matcher.key);
     }, [props.currentQuery]);
-    return (_jsx(LabelProvider, { queryClient: props.queryClient, profileType: props.profileType, labelNameFromMatchers: labelNameFromMatchers, children: _jsx(SimpleMatchers, { ...props }) }));
+    return (_jsx(LabelProvider, { queryClient: props.queryClient, profileType: props.profileType, labelNameFromMatchers: labelNameFromMatchers, start: props.start, end: props.end, children: _jsx(SimpleMatchers, { ...props }) }));
 }

package/dist/Table/MoreDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,qBAAoB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA6DlF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,qBAAoB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA4DlF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Table/MoreDropdown.js

@@ -16,14 +16,13 @@ import { Icon } from '@iconify/react';
 import { useParcaContext, useURLState } from '@parca/components';
 const MoreDropdown = ({ functionName }) => {
     const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
     const { enableSandwichView } = useParcaContext();
     const onSandwichViewSelect = () => {
         setSandwichFunctionName(functionName.trim());
-        setDashboardItems(['sandwich']);
+        setDashboardItems([...dashboardItems, 'sandwich']);
     };
     const menuItems = [];
     if (enableSandwichView === true) {

package/dist/Table/TableContextMenu.d.ts

@@ -0,0 +1,9 @@
+import 'react-contexify/dist/ReactContexify.css';
+import { type Row } from '.';
+interface TableContextMenuProps {
+    menuId: string;
+    row: Row | null;
+}
+declare const TableContextMenu: ({ menuId, row }: TableContextMenuProps) => React.JSX.Element;
+export default TableContextMenu;
+//# sourceMappingURL=TableContextMenu.d.ts.map

package/dist/Table/TableContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,yCAAyC,CAAC;AAIjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAE3B,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;CACjB;AAED,QAAA,MAAM,gBAAgB,oBAAmB,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAuC1E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}