@parca/profile 0.19.24 → 0.19.25

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.25](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.24...@parca/profile@0.19.25) (2025-07-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.24](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.23...@parca/profile@0.19.24) (2025-07-17)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileView/components/ColorStackLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAarC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,oCAA0C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAyGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAarC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,oCAA0C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAuGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileView/components/ColorStackLegend.js

@@ -33,7 +33,6 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
             .filter(f => f.type === 'frame' && f.field === 'binary')
             .map(f => f.value);
     }, [appliedFilters]);
-    console.log('currentBinaryFilters', currentBinaryFilters);
     const mappingsList = useMappingList(mappings);
     const mappingColors = useMemo(() => {
         const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);

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

@@ -2,7 +2,7 @@ import { ProfilerOnRenderCallback } from 'react';
 import { QueryServiceClient } from '@parca/client';
 import { CurrentPathFrame } from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { ProfileSource } from '../../../ProfileSource';
-import type { FlamegraphData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
+import type { FlamegraphData, SandwichData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
 interface GetDashboardItemProps {
     type: VisualizationType;
     isHalfScreen: boolean;
@@ -10,6 +10,7 @@ interface GetDashboardItemProps {
     flamegraphData: FlamegraphData;
     flamechartData: FlamegraphData;
     topTableData?: TopTableData;
+    sandwichData: SandwichData;
     sourceData?: SourceData;
     profileSource: ProfileSource;
     total: bigint;
@@ -23,6 +24,6 @@ interface GetDashboardItemProps {
     };
     queryClient?: QueryServiceClient;
 }
-export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, perf, queryClient, }: GetDashboardItemProps) => JSX.Element;
+export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, sandwichData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, perf, }: GetDashboardItemProps) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAIrD,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;IACF,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,GAAI,oLAe9B,qBAAqB,KAAG,GAAG,CAAC,OAyG9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAIrD,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;IACF,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,GAAI,qLAe9B,qBAAqB,KAAG,GAAG,CAAC,OA+F9B,CAAC"}

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

@@ -17,7 +17,7 @@ import ProfileFlameGraph from '../../../ProfileFlameGraph';
 import Sandwich from '../../../Sandwich';
 import { SourceView } from '../../../SourceView';
 import { Table } from '../../../Table';
-export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, perf, queryClient, }) => {
+export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, sandwichData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, perf, }) => {
     switch (type) {
         case 'flamegraph':
             return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
@@ -37,7 +37,7 @@ export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphDat
         case 'table':
             return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles })) : (_jsx(_Fragment, {}));
         case 'sandwich':
-            return topTableData != null ? (_jsx(Sandwich, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), metadataMappingFiles: flamegraphData.metadataMappingFiles, profileSource: profileSource, queryClient: queryClient })) : (_jsx(_Fragment, {}));
+            return topTableData != null ? (_jsx(Sandwich, { profileSource: profileSource, sandwichData: sandwichData })) : (_jsx(_Fragment, {}));
         case 'source':
             return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered })) : (_jsx(_Fragment, {}));
         default:

package/dist/ProfileView/index.d.ts

@@ -1,3 +1,3 @@
 import type { ProfileViewProps } from './types/visualization';
-export declare const ProfileView: ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, sandwichData, }: ProfileViewProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"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,GAAI,mLAazB,gBAAgB,KAAG,GAAG,CAAC,OA8HzB,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,GAAI,iMAczB,gBAAgB,KAAG,GAAG,CAAC,OA+HzB,CAAC"}

package/dist/ProfileView/index.js

@@ -23,7 +23,7 @@ import { DashboardProvider } from './context/DashboardContext';
 import { ProfileViewContextProvider } from './context/ProfileViewContext';
 import { useProfileMetadata } from './hooks/useProfileMetadata';
 import { useVisualizationState } from './hooks/useVisualizationState';
-export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, sandwichData, }) => {
     const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
     const { curPath, setCurPath, curPathArrow, setCurPathArrow, colorStackLegend, colorBy, groupBy, toggleGroupBy, setGroupByLabels, sandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
@@ -38,6 +38,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
         (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
     const getDashboardItemByType = ({ type, isHalfScreen, }) => {
         return getDashboardItem({
+            sandwichData,
             type,
             isHalfScreen,
             dimensions,

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

@@ -1,8 +1,7 @@
-import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow } from '@parca/client';
+import { FlamegraphArrow, QueryServiceClient, Source, TableArrow } from '@parca/client';
 import { ProfileSource } from '../../ProfileSource';
 export interface FlamegraphData {
     loading: boolean;
-    data?: Flamegraph;
     arrow?: FlamegraphArrow;
     total?: bigint;
     filtered?: bigint;
@@ -19,26 +18,23 @@ export interface TopTableData {
     error?: any;
     unit?: string;
 }
-export interface CallgraphData {
-    loading: boolean;
-    data?: CallgraphType;
-    total?: bigint;
-    filtered?: bigint;
-    error?: any;
-}
 export interface SourceData {
     loading: boolean;
     data?: Source;
     error?: any;
 }
+export interface SandwichData {
+    callees: FlamegraphData;
+    callers: FlamegraphData;
+}
 export type VisualizationType = 'flamegraph' | 'callgraph' | 'table' | 'source' | 'flamechart' | 'sandwich';
 export interface ProfileViewProps {
     total: bigint;
     filtered: bigint;
     flamegraphData: FlamegraphData;
     flamechartData: FlamegraphData;
+    sandwichData: SandwichData;
     topTableData?: TopTableData;
-    callgraphData?: CallgraphData;
     sourceData?: SourceData;
     profileSource: ProfileSource;
     queryClient?: QueryServiceClient;

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,GACzB,YAAY,GACZ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,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"}
+{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,eAAe,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAC,MAAM,eAAe,CAAC;AAEtF,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,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,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,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,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAM1E,OAAO,EAAsB,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAMnE,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,mBAAmB,GAAI,4DAIjC,wBAAwB,KAAG,GAAG,CAAC,OA0QjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAM1E,OAAO,EAAsB,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAMnE,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,mBAAmB,GAAI,4DAIjC,wBAAwB,KAAG,GAAG,CAAC,OA6SjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileViewWithData.js

@@ -32,6 +32,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         defaultValue: [FIELD_FUNCTION_NAME],
         alwaysReturnArray: true,
     });
+    const [sandwichFunctionName] = useURLState('sandwich_function_name');
     const [invertStack] = useURLState('invert_call_stack');
     const invertCallStack = invertStack === 'true';
     const [pprofDownloading, setPprofDownloading] = useState(false);
@@ -88,16 +89,28 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         skip: !dashboardItems.includes('table') && !dashboardItems.includes('sandwich'),
         protoFilters,
     });
-    const { isLoading: callgraphLoading, response: callgraphResponse, error: callgraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
-        skip: !dashboardItems.includes('callgraph'),
-        protoFilters,
-    });
     const { isLoading: sourceLoading, response: sourceResponse, error: sourceError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
         skip: !dashboardItems.includes('source'),
         sourceBuildID,
         sourceFilename,
         protoFilters,
     });
+    const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+        nodeTrimThreshold,
+        groupBy: [FIELD_FUNCTION_NAME],
+        invertCallStack: true,
+        sandwichByFunction: sandwichFunctionName,
+        skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+        protoFilters,
+    });
+    const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+        nodeTrimThreshold,
+        groupBy: [FIELD_FUNCTION_NAME],
+        invertCallStack: false,
+        sandwichByFunction: sandwichFunctionName,
+        skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+        protoFilters,
+    });
     useEffect(() => {
         if ((!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
             flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
@@ -106,17 +119,12 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         if (!tableLoading && tableResponse?.report.oneofKind === 'tableArrow') {
             perf?.markInteraction('table render', tableResponse.total);
         }
-        if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
-            perf?.markInteraction('Callgraph render', callgraphResponse.total);
-        }
         if (!sourceLoading && sourceResponse?.report.oneofKind === 'source') {
             perf?.markInteraction('Source render', sourceResponse.total);
         }
     }, [
         flamegraphLoading,
         flamegraphResponse,
-        callgraphResponse,
-        callgraphLoading,
         tableLoading,
         tableResponse,
         sourceLoading,
@@ -152,10 +160,6 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         total = BigInt(tableResponse.total);
         filtered = BigInt(tableResponse.filtered);
     }
-    else if (callgraphResponse !== null) {
-        total = BigInt(callgraphResponse.total);
-        filtered = BigInt(callgraphResponse.filtered);
-    }
     else if (sourceResponse !== null) {
         total = BigInt(sourceResponse.total);
         filtered = BigInt(sourceResponse.filtered);
@@ -164,11 +168,16 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         total = BigInt(flamechartResponse.total);
         filtered = BigInt(flamechartResponse.filtered);
     }
+    else if (callersFlamegraphResponse !== null) {
+        total = BigInt(callersFlamegraphResponse.total);
+        filtered = BigInt(callersFlamegraphResponse.filtered);
+    }
+    else if (calleesFlamegraphResponse !== null) {
+        total = BigInt(calleesFlamegraphResponse.total);
+        filtered = BigInt(calleesFlamegraphResponse.filtered);
+    }
     return (_jsx(ProfileView, { total: total, filtered: filtered, flamegraphData: {
             loading: flamegraphLoading && profileMetadataLoading,
-            data: flamegraphResponse?.report.oneofKind === 'flamegraph'
-                ? flamegraphResponse?.report?.flamegraph
-                : undefined,
             arrow: flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
                 ? flamegraphResponse?.report?.flamegraphArrow
                 : undefined,
@@ -206,18 +215,39 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
             unit: tableResponse?.report.oneofKind === 'tableArrow'
                 ? tableResponse.report.tableArrow.unit
                 : '',
-        }, callgraphData: {
-            loading: callgraphLoading,
-            data: callgraphResponse?.report.oneofKind === 'callgraph'
-                ? callgraphResponse?.report?.callgraph
-                : undefined,
-            error: callgraphError,
         }, sourceData: {
             loading: sourceLoading,
             data: sourceResponse?.report.oneofKind === 'source'
                 ? sourceResponse?.report?.source
                 : undefined,
             error: sourceError,
+        }, sandwichData: {
+            callees: {
+                arrow: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                    ? calleesFlamegraphResponse?.report?.flamegraphArrow
+                    : undefined,
+                loading: calleesFlamegraphLoading,
+                error: calleesFlamegraphError,
+                total: BigInt(calleesFlamegraphResponse?.total ?? '0'),
+                filtered: BigInt(calleesFlamegraphResponse?.filtered ?? '0'),
+                metadataMappingFiles: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+                    ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+                    : undefined,
+                metadataLoading: profileMetadataLoading,
+            },
+            callers: {
+                arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                    ? callersFlamegraphResponse?.report?.flamegraphArrow
+                    : undefined,
+                loading: callersFlamegraphLoading,
+                error: callersFlamegraphError,
+                total: BigInt(callersFlamegraphResponse?.total ?? '0'),
+                filtered: BigInt(callersFlamegraphResponse?.filtered ?? '0'),
+                metadataMappingFiles: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+                    ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+                    : undefined,
+                metadataLoading: profileMetadataLoading,
+            },
         }, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading, showVisualizationSelector: showVisualizationSelector }));
 };
 export default ProfileViewWithData;

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

@@ -1,24 +1,15 @@
 import React from 'react';
-import { type FlamegraphArrow } from '@parca/client';
 import { type CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { type ProfileSource } from '../../ProfileSource';
+import { FlamegraphData } from '../../ProfileView/types/visualization';
 interface CalleesSectionProps {
     calleesRef: React.RefObject<HTMLDivElement>;
-    calleesFlamegraphResponse?: {
-        report: {
-            oneofKind: string;
-            flamegraphArrow?: FlamegraphArrow;
-        };
-        total?: string;
-    };
-    calleesFlamegraphLoading: boolean;
-    calleesFlamegraphError: any;
-    filtered: bigint;
+    calleesFlamegraphData: FlamegraphData;
     profileSource: ProfileSource;
     curPathArrow: CurrentPathFrame[];
     setCurPathArrow: (path: CurrentPathFrame[]) => void;
     metadataMappingFiles?: string[];
 }
-export declare function CalleesSection({ calleesRef, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CalleesSectionProps): JSX.Element;
+export declare function CalleesSection({ calleesRef, calleesFlamegraphData, profileSource, curPathArrow, setCurPathArrow, }: 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,+CAA+C,CAAC;AACpF,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"}
+{"version":3,"file":"CalleesSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CalleesSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,uCAAuC,CAAC;AAErE,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,qBAAqB,EAAE,cAAc,CAAC;IACtC,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,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,eAAe,GAChB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA2BnC"}

package/dist/Sandwich/components/CalleesSection.js

@@ -1,7 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import ProfileFlameGraph from '../../ProfileFlameGraph';
-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(ProfileFlameGraph, { 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 ? calleesRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
+export function CalleesSection({ calleesRef, calleesFlamegraphData, profileSource, curPathArrow, setCurPathArrow, }) {
+    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(ProfileFlameGraph, { arrow: calleesFlamegraphData?.arrow, total: calleesFlamegraphData.total ?? BigInt(0), filtered: calleesFlamegraphData.filtered ?? BigInt(0), profileType: profileSource?.ProfileType(), loading: calleesFlamegraphData.loading, error: calleesFlamegraphData.error, isHalfScreen: true, width: calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: calleesFlamegraphData.metadataMappingFiles, metadataLoading: calleesFlamegraphData.metadataLoading, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
 }

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

@@ -1,27 +1,17 @@
 import React from 'react';
-import { type FlamegraphArrow } from '@parca/client';
 import { type CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { type ProfileSource } from '../../ProfileSource';
+import { FlamegraphData } from '../../ProfileView/types/visualization';
 interface CallersSectionProps {
     callersRef: React.RefObject<HTMLDivElement>;
-    callersFlamegraphResponse?: {
-        report: {
-            oneofKind: string;
-            flamegraphArrow?: FlamegraphArrow;
-        };
-        total?: string;
-    };
-    callersFlamegraphLoading: boolean;
-    callersFlamegraphError: any;
-    filtered: bigint;
+    callersFlamegraphData: FlamegraphData;
     profileSource: ProfileSource;
     curPathArrow: CurrentPathFrame[];
     setCurPathArrow: (path: CurrentPathFrame[]) => void;
-    metadataMappingFiles?: string[];
     isExpanded: boolean;
     setIsExpanded: (isExpanded: boolean) => void;
     defaultMaxFrames: number;
 }
-export declare function CallersSection({ callersRef, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, isExpanded, setIsExpanded, defaultMaxFrames, }: CallersSectionProps): JSX.Element;
+export declare function CallersSection({ callersRef, callersFlamegraphData, profileSource, curPathArrow, setCurPathArrow, 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,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAInD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AACpF,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"}
+{"version":3,"file":"CallersSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CallersSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAQrC,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,uCAAuC,CAAC;AAerE,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,qBAAqB,EAAE,cAAc,CAAC;IACtC,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,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,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,UAAU,EACV,aAAa,EACb,gBAAgB,GACjB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAiEnC"}

package/dist/Sandwich/components/CallersSection.js

@@ -28,20 +28,17 @@ function getMaxDepth(depthColumn) {
     }
     return max;
 }
-export function CallersSection({ callersRef, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, isExpanded, setIsExpanded, defaultMaxFrames, }) {
+export function CallersSection({ callersRef, callersFlamegraphData, profileSource, curPathArrow, setCurPathArrow, isExpanded, setIsExpanded, defaultMaxFrames, }) {
     const maxDepth = useMemo(() => {
-        if (callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow' &&
-            callersFlamegraphResponse?.report?.flamegraphArrow != null) {
-            const table = tableFromIPC(callersFlamegraphResponse.report.flamegraphArrow.record);
+        if (callersFlamegraphData?.arrow != null) {
+            const table = tableFromIPC(callersFlamegraphData.arrow.record);
             const depthColumn = table.getChild(FIELD_DEPTH);
             return getMaxDepth(depthColumn);
         }
         return 0;
-    }, [callersFlamegraphResponse]);
+    }, [callersFlamegraphData]);
     const shouldShowButton = maxDepth > defaultMaxFrames;
     return (_jsxs(_Fragment, { children: [shouldShowButton && (_jsxs(Button, { variant: "neutral", onClick: () => setIsExpanded(!isExpanded), className: "absolute right-8 top-[-46px] z-10", type: "button", children: [_jsx("span", { "data-tooltip-content": !isExpanded
                             ? `This profile has ${maxDepth} frames, showing only the top ${defaultMaxFrames} frames. Click to show more frames.`
-                            : `This profile has ${maxDepth} frames, showing all frames. Click to hide frames.`, "data-tooltip-id": "show-more-frames", children: isExpanded ? 'Hide frames' : 'Show more frames' }), _jsx(Tooltip, { id: "show-more-frames" })] })), _jsxs("div", { className: "flex relative flex-row overflow-hidden", ref: callersRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0", children: ["Callers ", '->'] }), _jsx("div", { className: "flex-1 overflow-hidden relative", children: _jsx(ProfileFlameGraph, { arrow: 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, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isRenderedAsFlamegraph: true, profileSource: profileSource, tooltipId: "callers", maxFrameCount: defaultMaxFrames, isExpanded: isExpanded }) })] })] }));
+                            : `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(ProfileFlameGraph, { arrow: callersFlamegraphData?.arrow, total: callersFlamegraphData.total ?? BigInt(0), filtered: callersFlamegraphData.filtered ?? BigInt(0), profileType: profileSource?.ProfileType(), loading: callersFlamegraphData.loading, error: callersFlamegraphData.error, isHalfScreen: true, width: callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: callersFlamegraphData.metadataMappingFiles, metadataLoading: callersFlamegraphData.metadataLoading, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isRenderedAsFlamegraph: true, profileSource: profileSource, tooltipId: "callers", maxFrameCount: defaultMaxFrames, isExpanded: isExpanded }) })] })] }));
 }

package/dist/Sandwich/index.d.ts

@@ -1,17 +1,9 @@
 import React from 'react';
-import { QueryServiceClient } from '@parca/client';
-import { ProfileType } from '@parca/parser';
 import { ProfileSource } from '../ProfileSource';
+import { SandwichData } from '../ProfileView/types/visualization';
 interface Props {
-    data?: Uint8Array;
-    total: bigint;
-    filtered: bigint;
-    profileType?: ProfileType;
-    loading: boolean;
-    unit?: string;
-    metadataMappingFiles?: string[];
-    queryClient?: QueryServiceClient;
     profileSource: ProfileSource;
+    sandwichData: SandwichData;
 }
 declare const Sandwich: React.NamedExoticComponent<Props>;
 export default Sandwich;

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,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;AAW/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,mCAmNZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAC,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAIhE,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,mCAoEZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/Sandwich/index.js

@@ -11,120 +11,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { tableFromIPC } from 'apache-arrow';
+import React, { useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { QueryRequest_ReportType } from '@parca/client';
-import { useParcaContext, useURLState } from '@parca/components';
-import { useCurrentColorProfile } from '@parca/hooks';
-import useMappingList, { useFilenamesList, } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
-import { useProfileFilters } from '../ProfileView/components/ProfileFilters/useProfileFilters';
+import { useURLState } from '@parca/components';
 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 { useQuery } from '../useQuery';
 import { CalleesSection } from './components/CalleesSection';
 import { CallersSection } from './components/CallersSection';
-import { processRowData } from './utils/processRowData';
-const Sandwich = React.memo(function Sandwich({ data, filtered, profileType, loading, unit, metadataMappingFiles, queryClient, profileSource, }) {
-    const currentColorProfile = useCurrentColorProfile();
+const Sandwich = React.memo(function Sandwich({ sandwichData, profileSource, }) {
     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 { 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 { protoFilters } = useProfileFilters();
-    const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
-        nodeTrimThreshold,
-        groupBy: [FIELD_FUNCTION_NAME],
-        invertCallStack: true,
-        sandwichByFunction: sandwichFunctionName,
-        skip: sandwichFunctionName === undefined,
-        protoFilters,
-    });
-    const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
-        nodeTrimThreshold,
-        groupBy: [FIELD_FUNCTION_NAME],
-        invertCallStack: false,
-        sandwichByFunction: sandwichFunctionName,
-        skip: sandwichFunctionName === undefined,
-        protoFilters,
-    });
-    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 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]);
-    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.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
+    const { curPathArrow, setCurPathArrow } = useVisualizationState();
+    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, callersFlamegraphData: sandwichData.callers, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, isExpanded: isExpanded, setIsExpanded: setIsExpanded, defaultMaxFrames: defaultMaxFrames }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, calleesFlamegraphData: sandwichData.callees, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table') ? ('Please select a function to view its callers and callees.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
 });
 export default Sandwich;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.24",
+  "version": "0.19.25",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.3",
-    "@parca/components": "0.16.351",
+    "@parca/components": "0.16.352",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.96",
+    "@parca/hooks": "0.0.97",
     "@parca/icons": "0.16.72",
     "@parca/parser": "0.16.79",
-    "@parca/store": "0.16.180",
-    "@parca/utilities": "0.0.104",
+    "@parca/store": "0.16.181",
+    "@parca/utilities": "0.0.105",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -78,5 +78,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "a14a290bb5329cb3faaf18c171f1278df2821bda"
+  "gitHead": "cc47470182d39d477dbb43ba2304be48a4356ecf"
 }