@parca/profile 0.18.4 → 0.19.0

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

@@ -14,16 +14,20 @@ export const TableToolbar = ({ profileType, total, filtered, clearSelection, cur
 export const IcicleGraphToolbar = ({ curPath, setNewCurPath }) => {
     return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end", children: _jsxs(Button, { variant: "neutral", className: "gap-2 w-max h-fit", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset graph", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }) }) }));
 };
+export const SandwichIcicleGraphToolbar = ({ resetSandwichFunctionName, sandwichFunctionName, }) => {
+    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, }) => {
+export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, preferencesModal, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, resetSandwichFunctionName, sandwichFunctionName, }) => {
     const { dashboardItems } = useDashboard();
     const isTableViz = dashboardItems?.includes('table');
     const isGraphViz = dashboardItems?.includes('icicle');
+    const isSandwichIcicleGraphViz = dashboardItems?.includes('sandwich');
     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: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _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 })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _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 })] }))] }));
 };

package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts

@@ -13,6 +13,7 @@ export interface DropdownItem {
 export interface InnerAction {
     text: string;
     onClick: () => void;
+    isDisabled?: boolean;
 }
 export declare function contructItemsFromArray(items: any[]): DropdownItem[];
 declare const Dropdown: ({ items, selectedKey, onSelection, placeholder, width, className, loading, primary, disabled, icon, id, }: {

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,8GAYX;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OAuDP,CAAC;AAwEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,8GAYX;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OAuDP,CAAC;AAwEF,eAAe,QAAQ,CAAC"}

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

@@ -40,6 +40,6 @@ const DropdownOption = ({ option }) => {
     return (_jsx(Listbox.Option, { id: option.id ?? `h-select-option-${option.key}`, disabled: option.disabled ?? false, className: ({ active }) => cx(active && 'bg-indigo-600 text-white', 'relative flex cursor-default select-none py-2 px-3'), value: option.key, children: ({ selected, active, disabled }) => (_jsxs("div", { className: "relative flex items-center w-full justify-between", onMouseEnter: () => setIsMouseOver(true), onMouseLeave: () => setIsMouseOver(false), children: [isMouseOver && disabled && option.disabledText != null ? (_jsxs("div", { className: "absolute top-[-60px] text-gray-500 dark:text-gray-400 text-xs bg-white dark:bg-black border rounded p-2 z-100 w-52 text-center", onMouseEnter: () => setIsMouseOver(false), children: [option.disabledText, _jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full h-0 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent" })] })) : null, _jsx("div", { className: "flex items-center", children: _jsx("span", { className: cx(selected ? 'font-semibold' : 'font-normal', disabled && 'opacity-50'), children: option.element.expanded }) }), option.innerAction !== undefined && (_jsxs(Button, { variant: "neutral", className: "p-[6px]", onClick: e => {
                         e.stopPropagation();
                         option.innerAction?.onClick();
-                    }, disabled: disabled, children: [option.innerAction.text, option.innerAction.text === 'Add Panel' && (_jsx(Icon, { icon: "ic:baseline-plus", className: "w-[14px] h-[14px] ml-2" }))] })), selected ? (_jsx("span", { className: cx(active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4'), children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) })) : null] })) }, option.key));
+                    }, disabled: disabled || option.innerAction.isDisabled, children: [option.innerAction.text, option.innerAction.text === 'Add Panel' && (_jsx(Icon, { icon: "ic:baseline-plus", className: "w-[14px] h-[14px] ml-2" }))] })), selected ? (_jsx("span", { className: cx(active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4'), children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) })) : null] })) }, option.key));
 };
 export default Dropdown;

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":"AAkBA,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,OAwHlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAkBA,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,OAmIlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -11,6 +11,7 @@ const ViewSelector = ({ profileSource }) => {
     const allItems = [
         { key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table') },
         { key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
+        { key: 'sandwich', label: 'sandwich', canBeSelected: !dashboardItems.includes('sandwich') },
     ];
     if (enableicicleCharts) {
         allItems.push({
@@ -35,6 +36,14 @@ 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
+            };
+        }
         return {
             text: !item.canBeSelected && item.key === 'source'
                 ? 'Add Panel'

package/dist/ProfileView/hooks/useVisualizationState.d.ts

@@ -8,10 +8,14 @@ export declare const useVisualizationState: () => {
     setSearchString: (searchString: string | undefined) => void;
     colorStackLegend: string | undefined;
     colorBy: string;
+    setColorBy: (colorBy: string) => void;
     groupBy: string[];
     setGroupBy: (keys: string[]) => void;
     toggleGroupBy: (key: string) => void;
     clearSelection: () => void;
     setGroupByLabels: (labels: string[]) => void;
+    sandwichFunctionName: string | undefined;
+    setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
+    resetSandwichFunctionName: () => void;
 };
 //# sourceMappingURL=useVisualizationState.d.ts.map

package/dist/ProfileView/hooks/useVisualizationState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CA0D9C,CAAC"}
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CAqEvC,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -22,11 +22,12 @@ export const useVisualizationState = () => {
     });
     const [currentSearchString, setSearchString] = useURLState('search_string');
     const [colorStackLegend] = useURLState('color_stack_legend');
-    const [colorBy] = useURLState('color_by');
+    const [colorBy, setColorBy] = useURLState('color_by');
     const [groupBy, setStoreGroupBy] = useURLState('group_by', {
         defaultValue: [FIELD_FUNCTION_NAME],
         alwaysReturnArray: true,
     });
+    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const setGroupBy = useCallback((keys) => {
         setStoreGroupBy(keys);
     }, [setStoreGroupBy]);
@@ -41,6 +42,9 @@ export const useVisualizationState = () => {
     const clearSelection = useCallback(() => {
         setSearchString?.('');
     }, [setSearchString]);
+    const resetSandwichFunctionName = useCallback(() => {
+        setSandwichFunctionName(undefined);
+    }, [setSandwichFunctionName]);
     return {
         curPath,
         setCurPath,
@@ -50,10 +54,14 @@ export const useVisualizationState = () => {
         setSearchString,
         colorStackLegend,
         colorBy: colorBy ?? '',
+        setColorBy,
         groupBy,
         setGroupBy,
         toggleGroupBy,
         setGroupByLabels,
         clearSelection,
+        sandwichFunctionName,
+        setSandwichFunctionName,
+        resetSandwichFunctionName,
     };
 };

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,OAkIzB,CAAC"}
+{"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"}

package/dist/ProfileView/index.js

@@ -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, } = useVisualizationState();
+    const { curPath, setCurPath, curPathArrow, setCurPathArrow, currentSearchString, setSearchString, colorStackLegend, colorBy, groupBy, toggleGroupBy, clearSelection, setGroupByLabels, sandwichFunctionName, setSandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
     const { colorMappings } = useProfileMetadata({
         flamegraphArrow: flamegraphData.arrow,
         metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -55,6 +55,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
             currentSearchString,
             setSearchString,
             perf,
+            queryClient,
         });
     };
     const actionButtons = {
@@ -62,5 +63,5 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
         table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
     };
     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 }), 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, 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 }) })] }) }) }));
 };

package/dist/ProfileView/types/visualization.d.ts

@@ -31,7 +31,7 @@ export interface SourceData {
     data?: Source;
     error?: any;
 }
-export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart';
+export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart' | 'sandwich';
 export interface ProfileViewProps {
     total: bigint;
     filtered: bigint;

package/dist/ProfileView/types/visualization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE5F,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC"}
+{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,WAAW,GACX,OAAO,GACP,QAAQ,GACR,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC"}

package/dist/ProfileViewWithData.js

@@ -86,7 +86,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
     });
     const { perf } = useParcaContext();
     const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
-        skip: !dashboardItems.includes('table'),
+        skip: !dashboardItems.includes('table') && !dashboardItems.includes('sandwich'),
         binaryFrameFilter,
     });
     const { isLoading: callgraphLoading, response: callgraphResponse, error: callgraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type FlamegraphArrow } from '@parca/client';
+import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { type ProfileSource } from '../../ProfileSource';
+interface CalleesSectionProps {
+    calleesRef: React.RefObject<HTMLDivElement>;
+    isHalfScreen: boolean;
+    calleesFlamegraphResponse?: {
+        report: {
+            oneofKind: string;
+            flamegraphArrow?: FlamegraphArrow;
+        };
+        total?: string;
+    };
+    calleesFlamegraphLoading: boolean;
+    calleesFlamegraphError: any;
+    filtered: bigint;
+    profileSource: ProfileSource;
+    curPathArrow: CurrentPathFrame[];
+    setCurPathArrow: (path: CurrentPathFrame[]) => void;
+    metadataMappingFiles?: string[];
+}
+export declare function CalleesSection({ calleesRef, isHalfScreen, 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

@@ -0,0 +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"}

package/dist/Sandwich/components/CalleesSection.js

@@ -0,0 +1,11 @@
+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, }) {
+    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" })] }));
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type FlamegraphArrow } from '@parca/client';
+import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { type ProfileSource } from '../../ProfileSource';
+interface CallersSectionProps {
+    callersRef: React.RefObject<HTMLDivElement>;
+    isHalfScreen: boolean;
+    callersFlamegraphResponse?: {
+        report: {
+            oneofKind: string;
+            flamegraphArrow?: FlamegraphArrow;
+        };
+        total?: string;
+    };
+    callersFlamegraphLoading: boolean;
+    callersFlamegraphError: any;
+    filtered: bigint;
+    profileSource: ProfileSource;
+    curPathArrow: CurrentPathFrame[];
+    setCurPathArrow: (path: CurrentPathFrame[]) => void;
+    metadataMappingFiles?: string[];
+}
+export declare function CallersSection({ callersRef, isHalfScreen, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CallersSectionProps): JSX.Element;
+export {};
+//# sourceMappingURL=CallersSection.d.ts.map

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

@@ -0,0 +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"}

package/dist/Sandwich/components/CallersSection.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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" })] }));
+}

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

@@ -0,0 +1,21 @@
+import { type ColumnDef, type Row as RowType } from '@tanstack/table-core';
+import { type Row } from '../../Table';
+import { ColumnName, DataRow } from '../../Table/utils/functions';
+interface TableSectionProps {
+    rows: Row[];
+    columns: Array<ColumnDef<Row>>;
+    initialSorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+    selectedRow: RowType<Row> | null;
+    onRowClick: (row: DataRow) => void;
+    shouldHighlightRow: (row: Row) => boolean;
+    enableHighlighting: boolean;
+    columnVisibility: Record<ColumnName, boolean>;
+    height?: number;
+    sandwichFunctionName?: string;
+}
+export declare function TableSection({ rows, columns, initialSorting, selectedRow, onRowClick, shouldHighlightRow, enableHighlighting, columnVisibility, height, sandwichFunctionName, }: TableSectionProps): JSX.Element;
+export {};
+//# sourceMappingURL=TableSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/TableSection.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAIzE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,OAAO,EAAa,MAAM,6BAA6B,CAAC;AAE5E,UAAU,iBAAiB;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,cAAc,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IACnD,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;IAC1C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,oBAAoB,GACrB,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsBjC"}

package/dist/Sandwich/components/TableSection.js

@@ -0,0 +1,7 @@
+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, }) {
+    console.log(height);
+    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 }) }));
+}

package/dist/Sandwich/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { QueryServiceClient } from '@parca/client';
+import { ProfileType } from '@parca/parser';
+import { ProfileSource } from '../ProfileSource';
+interface Props {
+    data?: Uint8Array;
+    total: bigint;
+    filtered: bigint;
+    profileType?: ProfileType;
+    loading: boolean;
+    isHalfScreen: boolean;
+    unit?: string;
+    metadataMappingFiles?: string[];
+    queryClient?: QueryServiceClient;
+    profileSource: ProfileSource;
+}
+declare const Sandwich: React.NamedExoticComponent<Props>;
+export default Sandwich;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/Sandwich/index.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 React, { useCallback, 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 { useCurrentColorProfile } from '@parca/hooks';
+import { isSearchMatch } from '@parca/utilities';
+import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
+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 currentColorProfile = useCurrentColorProfile();
+    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const { isDarkMode } = useParcaContext();
+    const [selectedRow, setSelectedRow] = useState(null);
+    const callersRef = React.useRef(null);
+    const calleesRef = React.useRef(null);
+    const callersCalleesContainerRef = useRef(null);
+    const [tableHeight, setTableHeight] = useState(undefined);
+    const { compareMode } = useProfileViewContext();
+    const { colorBy, setColorBy, curPathArrow, setCurPathArrow } = useVisualizationState();
+    const nodeTrimThreshold = useMemo(() => {
+        let width = 
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        // subtract the padding
+        width = width - 12 - 16 - 12;
+        return (1 / width) * 100;
+    }, []);
+    const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+        nodeTrimThreshold,
+        groupBy: [FIELD_FUNCTION_NAME],
+        invertCallStack: true,
+        binaryFrameFilter: [],
+        sandwichByFunction: sandwichFunctionName,
+        skip: sandwichFunctionName === undefined,
+    });
+    const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+        nodeTrimThreshold,
+        groupBy: [FIELD_FUNCTION_NAME],
+        invertCallStack: false,
+        binaryFrameFilter: [],
+        sandwichByFunction: sandwichFunctionName,
+        skip: sandwichFunctionName === undefined,
+    });
+    const table = useMemo(() => {
+        if (loading || data == null) {
+            return null;
+        }
+        return tableFromIPC(data);
+    }, [data, loading]);
+    const mappingsList = useMappingList(metadataMappingFiles);
+    const filenamesList = useFilenamesList(table);
+    const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
+    // 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]);
+    const { colorByColors, colorByValue } = useColorManagement({
+        isDarkMode,
+        currentColorProfile,
+        mappingsList,
+        filenamesList,
+        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 [];
+        }
+        return processRowData({
+            table,
+            colorByColors,
+            colorBy: colorByValue,
+        });
+    }, [table, colorByColors, colorByValue]);
+    useEffect(() => {
+        if (sandwichFunctionName !== undefined && selectedRow == null) {
+            // find the row with the sandwichFunctionName
+            const row = rows.find(row => {
+                return row.name.trim() === sandwichFunctionName.trim();
+            });
+            if (row != null) {
+                setSelectedRow(row);
+            }
+        }
+    }, [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") }) }));
+});
+export default Sandwich;

package/dist/Sandwich/utils/processRowData.d.ts

@@ -0,0 +1,11 @@
+import { type Table } from 'apache-arrow';
+import { type colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
+import { type DataRow } from '../../Table/utils/functions';
+interface ProcessRowDataProps {
+    table: Table | null;
+    colorByColors: colorByColors;
+    colorBy: string;
+}
+export declare function processRowData({ table, colorByColors, colorBy }: ProcessRowDataProps): DataRow[];
+export {};
+//# sourceMappingURL=processRowData.d.ts.map

package/dist/Sandwich/utils/processRowData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processRowData.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/utils/processRowData.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,KAAK,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,4DAA4D,CAAC;AAY9F,OAAO,EAAuB,KAAK,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAE/E,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,EAAE,mBAAmB,GAAG,OAAO,EAAE,CA0C9F"}