@parca/profile 0.19.12 → 0.19.13

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/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"}

package/dist/Table/TableContextMenu.js

@@ -0,0 +1,38 @@
+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 { Icon } from '@iconify/react';
+import cx from 'classnames';
+import { Item, Menu } from 'react-contexify';
+import 'react-contexify/dist/ReactContexify.css';
+import { useParcaContext, useURLState } from '@parca/components';
+const TableContextMenu = ({ menuId, row }) => {
+    const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const { enableSandwichView, isDarkMode } = useParcaContext();
+    const onSandwichViewSelect = () => {
+        if (row?.name != null && row.name.length > 0) {
+            setSandwichFunctionName(row.name.trim());
+            if (!dashboardItems.includes('sandwich')) {
+                setDashboardItems([...dashboardItems, 'sandwich']);
+            }
+        }
+    };
+    const isMenuDisabled = row === null || enableSandwichView !== true;
+    return (_jsx(Menu, { id: menuId, theme: isDarkMode ? 'dark' : '', className: cx(dashboardItems.includes('sandwich') ? 'min-w-[350px] w-[350px]' : 'min-w-[260px] w-[260px]'), children: _jsx(Item, { id: "sandwich-view", onClick: onSandwichViewSelect, disabled: isMenuDisabled, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "tdesign:sandwich-filled" }), _jsxs("div", { className: "relative", children: [dashboardItems.includes('sandwich')
+                                ? 'Focus sandwich on this frame.'
+                                : 'Show in sandwich', _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })] }) }) }));
+};
+export default TableContextMenu;

package/dist/Table/TableContextMenuWrapper.d.ts

@@ -0,0 +1,10 @@
+import { type Row } from '.';
+interface TableContextMenuWrapperProps {
+    menuId: string;
+}
+export interface TableContextMenuWrapperRef {
+    setRow: (row: Row | null, callback?: () => void) => void;
+}
+declare const TableContextMenuWrapper: import("react").ForwardRefExoticComponent<TableContextMenuWrapperProps & import("react").RefAttributes<TableContextMenuWrapperRef>>;
+export default TableContextMenuWrapper;
+//# sourceMappingURL=TableContextMenuWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAG3B,UAAU,4BAA4B;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,QAAA,MAAM,uBAAuB,qIAiB3B,CAAC;AAIH,eAAe,uBAAuB,CAAC"}

package/dist/Table/TableContextMenuWrapper.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } 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 { forwardRef, useImperativeHandle, useState } from 'react';
+import TableContextMenu from './TableContextMenu';
+const TableContextMenuWrapper = forwardRef(({ menuId }, ref) => {
+    const [row, setRow] = useState(null);
+    useImperativeHandle(ref, () => ({
+        setRow: (newRow, callback) => {
+            setRow(newRow);
+            // Execute callback after state update using requestAnimationFrame
+            if (callback != null) {
+                requestAnimationFrame(callback);
+            }
+        },
+    }));
+    return _jsx(TableContextMenu, { menuId: menuId, row: row });
+});
+TableContextMenuWrapper.displayName = 'TableContextMenuWrapper';
+export default TableContextMenuWrapper;

package/dist/Table/hooks/useTableConfiguration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableConfiguration.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableConfiguration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAKxE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,IAAI,CAAC;AAG5B,OAAO,EAA2B,KAAK,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE7E,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,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,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,0BAA0B,GAAG,kBAAkB,CAqMjD"}
+{"version":3,"file":"useTableConfiguration.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableConfiguration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAKxE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,IAAI,CAAC;AAE5B,OAAO,EAA2B,KAAK,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE7E,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,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,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,0BAA0B,GAAG,kBAAkB,CA+KjD"}

package/dist/Table/hooks/useTableConfiguration.js

@@ -13,20 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
 import { createColumnHelper } from '@tanstack/table-core';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useURLState } from '@parca/components';
 import { valueFormatter } from '@parca/utilities';
 import { ColorCell } from '../ColorCell';
-import MoreDropdown from '../MoreDropdown';
 import { addPlusSign, ratioString } from '../utils/functions';
 export function useTableConfiguration({ unit = '', total, filtered, compareMode, }) {
     const columnHelper = createColumnHelper();
     const [tableColumns] = useURLState('table_columns', {
         alwaysReturnArray: true,
     });
-    const [dashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
-    const { enableSandwichView } = useParcaContext();
     const [columnVisibility, setColumnVisibility] = useState(() => {
         return {
             color: true,
@@ -176,21 +171,8 @@ export function useTableConfiguration({ unit = '', total, filtered, compareMode,
                 cell: info => info.getValue(),
             }),
         ];
-        if (dashboardItems.length === 1 &&
-            dashboardItems[0] === 'table' &&
-            enableSandwichView === true) {
-            baseColumns.unshift(columnHelper.accessor('moreActions', {
-                id: 'moreActions',
-                header: '',
-                cell: info => {
-                    return _jsx(MoreDropdown, { functionName: info.row.original.name });
-                },
-                size: 10,
-                enableSorting: false,
-            }));
-        }
         return baseColumns;
-    }, [unit, total, filtered, columnHelper, dashboardItems, enableSandwichView]);
+    }, [unit, total, filtered, columnHelper]);
     const initialSorting = useMemo(() => {
         return [
             {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,KAAK,wCA6MhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAa/E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAU1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,KAAK,wCA0RhB,CAAC;AAEH,eAAe,KAAK,CAAC"}