@parca/profile 0.18.3 → 0.19.0

package/dist/useQuery.js

@@ -28,6 +28,7 @@ export const useQuery = (client, profileSource, reportType, options) => {
             options?.invertCallStack ?? false,
             options?.binaryFrameFilter ?? '',
             profileSource.excludeFunction ?? false,
+            options?.sandwichByFunction ?? '',
         ],
         queryFn: async () => {
             const req = profileSource.QueryRequest();
@@ -44,8 +45,9 @@ export const useQuery = (client, profileSource, reportType, options) => {
                 };
             }
             req.invertCallStack = options?.invertCallStack ?? false;
+            // Handle filter from ProfileSource (filter by function toolbar)
             const functionToFilter = req.filterQuery;
-            if (functionToFilter !== undefined) {
+            if (functionToFilter !== undefined && functionToFilter !== '') {
                 req.filter = [
                     ...req.filter,
                     {
@@ -64,6 +66,10 @@ export const useQuery = (client, profileSource, reportType, options) => {
                     },
                 ];
             }
+            // Handle sandwich view filter separately
+            if (options?.sandwichByFunction !== undefined) {
+                req.sandwichByFunction = options.sandwichByFunction;
+            }
             if (options?.binaryFrameFilter !== undefined && options?.binaryFrameFilter.length > 0) {
                 req.filter = [
                     ...req.filter,

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.16.130",
-    "@parca/components": "0.16.341",
+    "@parca/client": "0.17.0",
+    "@parca/components": "0.16.342",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.90",
+    "@parca/hooks": "0.0.91",
     "@parca/icons": "0.16.72",
     "@parca/parser": "0.16.79",
-    "@parca/store": "0.16.174",
-    "@parca/utilities": "0.0.99",
+    "@parca/store": "0.16.175",
+    "@parca/utilities": "0.0.100",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "53e4671f7b81c6fac99ef14e80dad4d3cdbacd54"
+  "gitHead": "f8b6abd23b6f0a18f9ee64a0bdb08ae43451849a"
 }

package/src/GraphTooltipArrow/useGraphTooltip/index.ts

@@ -61,15 +61,18 @@ export const useGraphTooltip = ({
   unit = unit ?? profileType.sampleUnit;
 
   const cumulative: bigint =
-    table.getChild(FIELD_CUMULATIVE)?.get(row) !== null
+    table.getChild(FIELD_CUMULATIVE)?.get(row) !== null &&
+    table.getChild(FIELD_CUMULATIVE)?.get(row) !== undefined
       ? BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row))
       : 0n;
   const flat: bigint =
-    table.getChild(FIELD_FLAT)?.get(row) !== null
+    table.getChild(FIELD_FLAT)?.get(row) !== null &&
+    table.getChild(FIELD_FLAT)?.get(row) !== undefined
       ? BigInt(table.getChild(FIELD_FLAT)?.get(row))
       : 0n;
   const diff: bigint =
-    table.getChild(FIELD_DIFF)?.get(row) !== null
+    table.getChild(FIELD_DIFF)?.get(row) !== null &&
+    table.getChild(FIELD_DIFF)?.get(row) !== undefined
       ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
       : 0n;
 

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -129,7 +129,11 @@ const RawUtilizationMetrics = ({
   const lineStrokeHover = '2px';
   const lineStrokeSelected = '3px';
 
-  const graphWidth = width - margin * 1.5 - margin / 2;
+  const graphWidth = useMemo(() => width - margin * 1.5 - margin / 2, [width, margin]);
+  const graphTransform = useMemo(() => {
+    // Adds 10px padding which aligns the graph on the grid
+    return `translate(10, 0) scale(${(graphWidth - 10) / graphWidth}, 1)`;
+  }, [graphWidth]);
 
   const paddedFrom = from;
   const paddedTo = to;
@@ -461,7 +465,7 @@ const RawUtilizationMetrics = ({
                 </text>
               </g>
             </g>
-            <g className="lines fill-transparent">
+            <g className="lines fill-transparent" transform={graphTransform}>
               {series.map((s, i) => {
                 const isLimit =
                   s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;

package/src/MetricsGraph/index.tsx

@@ -158,7 +158,11 @@ export const RawMetricsGraph = ({
     width = 0;
   }
 
-  const graphWidth = width - margin * 1.5 - margin / 2;
+  const graphWidth = useMemo(() => width - margin * 1.5 - margin / 2, [width, margin]);
+  const graphTransform = useMemo(() => {
+    // Adds 6px padding which aligns the graph on the grid
+    return `translate(6, 0) scale(${(graphWidth - 6) / graphWidth}, 1)`;
+  }, [graphWidth]);
 
   const series: Series[] = data.reduce<Series[]>(function (agg: Series[], s: MetricsSeriesPb) {
     if (s.labelset !== undefined) {
@@ -595,7 +599,11 @@ export const RawMetricsGraph = ({
                 </text>
               </g>
             </g>
-            <g className="lines fill-transparent">
+            <g
+              className="lines fill-transparent"
+              transform={graphTransform}
+              width={graphWidth - 100}
+            >
               {series.map((s, i) => (
                 <g key={i} className="line">
                   <MetricsSeries
@@ -618,6 +626,7 @@ export const RawMetricsGraph = ({
                 className="circle-group"
                 ref={metricPointRef}
                 style={{fill: color(highlighted.seriesIndex.toString())}}
+                transform={graphTransform}
               >
                 <MetricsCircle cx={highlighted.x} cy={highlighted.y} />
               </g>
@@ -630,6 +639,7 @@ export const RawMetricsGraph = ({
                     ? {fill: color(selected.seriesIndex.toString())}
                     : {}
                 }
+                transform={graphTransform}
               >
                 <MetricsCircle cx={selected.x} cy={selected.y} radius={5} />
               </g>

package/src/MetricsSeries/index.tsx

@@ -19,6 +19,7 @@ interface MetricsSeriesProps {
   color: string;
   strokeWidth: string;
   strokeDasharray?: string;
+  strokeLinecap?: React.CSSProperties['strokeLinecap'];
   xScale: (input: number) => number;
   yScale: (input: number) => number;
   onClick?: () => void;
@@ -30,6 +31,7 @@ const MetricsSeries = ({
   color,
   strokeWidth,
   strokeDasharray = '',
+  strokeLinecap = 'round',
   onClick,
 }: MetricsSeriesProps): JSX.Element => (
   <g className="line-group">
@@ -40,6 +42,7 @@ const MetricsSeries = ({
         stroke: color,
         strokeWidth,
         strokeDasharray,
+        strokeLinecap,
       }}
       onClick={onClick}
     />

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -37,6 +37,7 @@ interface ContextMenuProps {
   resetPath: () => void;
   hideMenu: () => void;
   hideBinary: (binaryToRemove: string) => void;
+  isSandwich?: boolean;
 }
 
 const ContextMenu = ({
@@ -51,6 +52,7 @@ const ContextMenu = ({
   unit,
   hideBinary,
   resetPath,
+  isSandwich = false,
 }: ContextMenuProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
   const {enableSourcesView, checkDebuginfoStatusHandler} = useParcaContext();
@@ -83,6 +85,10 @@ const ContextMenu = ({
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
+    'sandwich_function_name'
+  );
 
   if (contextMenuData === null) {
     return <></>;
@@ -159,7 +165,11 @@ const ContextMenu = ({
         id="show-in-table"
         onClick={() => {
           setSearchString(functionName);
-          setDashboardItems([...dashboardItems, 'table']);
+          if (isSandwich) {
+            setDashboardItems(['table']);
+          } else {
+            setDashboardItems([...dashboardItems, 'table']);
+          }
         }}
       >
         <div className="flex w-full items-center gap-2">
@@ -167,6 +177,18 @@ const ContextMenu = ({
           <div>Show in table</div>
         </div>
       </Item>
+      <Item
+        id="show-in-sandwich"
+        onClick={() => {
+          setSandwichFunctionName(functionName);
+          setDashboardItems(['sandwich']);
+        }}
+      >
+        <div className="flex w-full items-center gap-2">
+          <Icon icon="tdesign:sandwich-filled" />
+          <div>Show in sandwich</div>
+        </div>
+      </Item>
       <Item id="reset-view" onClick={handleResetView}>
         <div className="flex w-full items-center gap-2">
           <Icon icon="system-uicons:reset" />

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx

@@ -30,6 +30,7 @@ interface ContextMenuWrapperProps {
   hideMenu: () => void;
   hideBinary: (binaryToRemove: string) => void;
   unit?: string;
+  isSandwich?: boolean;
 }
 
 export interface ContextMenuWrapperRef {

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -61,6 +61,10 @@ export interface IcicleNodeProps {
   onClick: () => void;
   isIcicleChart: boolean;
   profileSource: ProfileSource;
+  isFlamegraph?: boolean;
+  isSandwich?: boolean;
+  maxDepth?: number;
+  tooltipId?: string;
 
   // Hovering row must only ever be used for highlighting similar nodes, otherwise it will cause performance issues as it causes the full iciclegraph to get rerendered every time the hovering row changes.
   hoveringRow?: number;
@@ -95,6 +99,10 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   setHoveringRow,
   isIcicleChart,
   profileSource,
+  isFlamegraph = false,
+  isSandwich = false,
+  maxDepth = 0,
+  tooltipId = 'default',
 }: IcicleNodeProps): React.JSX.Element {
   // get the columns to read from
   const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
@@ -162,8 +170,9 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
     return <></>;
   }
-  if (row === 0 && isIcicleChart) {
-    // The root node is not rendered in the icicle chart, so we return null.
+
+  if (row === 0 && (isIcicleChart || isSandwich)) {
+    // The root node is not rendered in the icicle chart or sandwich view, so we return null.
     return <></>;
   }
 
@@ -186,7 +195,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const onMouseEnter = (): void => {
     setHoveringRow(row);
     window.dispatchEvent(
-      new CustomEvent('icicle-tooltip-update', {
+      new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
         detail: {row},
       })
     );
@@ -195,7 +204,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const onMouseLeave = (): void => {
     setHoveringRow(undefined);
     window.dispatchEvent(
-      new CustomEvent('icicle-tooltip-update', {
+      new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
         detail: {row: null},
       })
     );
@@ -212,7 +221,27 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
       : selectedDepth > depth
       ? 0
       : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
-  const y = isIcicleChart ? (depth - 1) * height : depth * height;
+
+  const calculateY = (
+    isFlamegraph: boolean,
+    isSandwich: boolean,
+    isIcicleChart: boolean,
+    maxDepth: number,
+    depth: number,
+    height: number
+  ): number => {
+    if (isFlamegraph) {
+      return (maxDepth - depth) * height; // Flamegraph is inverted
+    }
+
+    if (isIcicleChart || isSandwich) {
+      return (depth - 1) * height;
+    }
+
+    return depth * height;
+  };
+
+  const y = calculateY(isFlamegraph, isSandwich, isIcicleChart, maxDepth, depth, height);
 
   return (
     <>

package/src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx

@@ -28,7 +28,8 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
   dockedMetainfo,
 }: MemoizedTooltipProps): React.JSX.Element | null {
   const [tooltipRow, setTooltipRow] = useState<number | null>(null);
-  const {table, total, totalUnfiltered, profileType, unit, compareAbsolute} = useTooltipContext();
+  const {table, total, totalUnfiltered, profileType, unit, compareAbsolute, tooltipId} =
+    useTooltipContext();
 
   // This component subscribes to tooltip updates through a callback
   // passed to the TooltipProvider, avoiding the need to lift state
@@ -37,11 +38,12 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
       setTooltipRow(event.detail.row);
     };
 
-    window.addEventListener('icicle-tooltip-update' as any, handleTooltipUpdate as any);
+    const eventName = `icicle-tooltip-update-${tooltipId}`;
+    window.addEventListener(eventName as any, handleTooltipUpdate as any);
     return () => {
-      window.removeEventListener('icicle-tooltip-update' as any, handleTooltipUpdate as any);
+      window.removeEventListener(eventName as any, handleTooltipUpdate as any);
     };
-  }, []);
+  }, [tooltipId]);
 
   if (dockedMetainfo) {
     return (

package/src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx

@@ -32,6 +32,7 @@ interface TooltipContextValue {
   compareAbsolute: boolean;
   updateTooltip: (row: number | null, x?: number, y?: number) => void;
   tooltipState: TooltipState;
+  tooltipId: string;
 }
 
 const TooltipContext = createContext<TooltipContextValue | null>(null);
@@ -53,6 +54,7 @@ interface TooltipProviderProps {
   unit?: string;
   compareAbsolute: boolean;
   onTooltipUpdate?: (state: TooltipState) => void;
+  tooltipId?: string;
 }
 
 export const TooltipProvider: React.FC<TooltipProviderProps> = ({
@@ -64,6 +66,7 @@ export const TooltipProvider: React.FC<TooltipProviderProps> = ({
   unit,
   compareAbsolute,
   onTooltipUpdate,
+  tooltipId = 'default',
 }) => {
   const tooltipStateRef = useRef<TooltipState>({row: null, x: 0, y: 0});
 
@@ -85,8 +88,9 @@ export const TooltipProvider: React.FC<TooltipProviderProps> = ({
       compareAbsolute,
       updateTooltip,
       tooltipState: tooltipStateRef.current,
+      tooltipId,
     }),
-    [table, total, totalUnfiltered, profileType, unit, compareAbsolute, updateTooltip]
+    [table, total, totalUnfiltered, profileType, unit, compareAbsolute, updateTooltip, tooltipId]
   );
 
   return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -74,6 +74,9 @@ interface IcicleGraphArrowProps {
   mappingsListFromMetadata: string[];
   compareAbsolute: boolean;
   isIcicleChart?: boolean;
+  isFlamegraph?: boolean;
+  isSandwich?: boolean;
+  tooltipId?: string;
 }
 
 export const getMappingColors = (
@@ -129,6 +132,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   mappingsListFromMetadata,
   compareAbsolute,
   isIcicleChart = false,
+  isFlamegraph = false,
+  isSandwich = false,
+  tooltipId = 'default',
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
     USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
@@ -249,7 +255,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   const depthColumn = table.getChild(FIELD_DEPTH);
   const maxDepth = getMaxDepth(depthColumn);
-  const height = (maxDepth + 1) * RowHeight;
+  const height = isSandwich ? maxDepth * RowHeight : (maxDepth + 1) * RowHeight;
 
   // To find the selected row, we must walk the current path and look at which
   // children of the current frame matches the path element exactly. Until the
@@ -284,6 +290,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
       profileType={profileType}
       unit={arrow.unit}
       compareAbsolute={compareAbsolute}
+      tooltipId={tooltipId}
     >
       <div className="relative">
         <ContextMenuWrapper
@@ -298,6 +305,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           hideBinary={hideBinary}
           unit={arrow.unit}
           profileType={profileType}
+          isSandwich={isSandwich}
         />
         <MemoizedTooltip contextElement={svg.current} dockedMetainfo={dockedMetainfo} />
         <svg
@@ -333,6 +341,10 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
               isIcicleChart={isIcicleChart}
               profileSource={profileSource}
+              isFlamegraph={isFlamegraph}
+              isSandwich={isSandwich}
+              maxDepth={maxDepth}
+              tooltipId={tooltipId}
             />
           ))}
         </svg>

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -167,7 +167,7 @@ export const getCurrentPathFrameData = (table: Table<any>, row: number): Current
     systemName: systemName ?? '',
     fileName: fileName ?? '',
     lineNumber: Number(lineNumber),
-    address: address,
+    address,
     inlined: inlined ?? false,
     labels: labels ?? undefined,
   };

package/src/ProfileIcicleGraph/index.tsx

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {LegacyRef, ReactNode, useEffect, useMemo, useState} from 'react';
+import React, {LegacyRef, ReactNode, useCallback, useEffect, useMemo, useState} from 'react';
 
+import cx from 'classnames';
 import {AnimatePresence, motion} from 'framer-motion';
 import {useMeasure} from 'react-use';
 
@@ -25,7 +26,7 @@ import {MergedProfileSource, ProfileSource} from '../ProfileSource';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {TimelineGuide} from '../TimelineGuide';
-import {FIELD_FUNCTION_NAME, IcicleGraphArrow} from './IcicleGraphArrow';
+import {IcicleGraphArrow} from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';
 import {CurrentPathFrame, boundsFromProfileSource} from './IcicleGraphArrow/utils';
 
@@ -49,6 +50,9 @@ interface ProfileIcicleGraphProps {
   metadataMappingFiles?: string[];
   metadataLoading?: boolean;
   isIcicleChart?: boolean;
+  isSandwichIcicleGraph?: boolean;
+  isFlamegraph?: boolean;
+  tooltipId?: string;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.Element => {
@@ -81,12 +85,32 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   metadataMappingFiles,
   isIcicleChart = false,
   profileSource,
+  isSandwichIcicleGraph = false,
+  isFlamegraph = false,
+  tooltipId,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [icicleChartRef, {height: icicleChartHeight}] = useMeasure();
 
+  // Create local state for paths when in sandwich view to avoid URL updates
+  const [localCurPathArrow, setLocalCurPathArrow] = useState<CurrentPathFrame[]>([]);
+
+  const setCurPathArrowWrapper = useCallback(
+    (path: CurrentPathFrame[]) => {
+      if (isSandwichIcicleGraph) {
+        setLocalCurPathArrow(path);
+      } else {
+        setNewCurPathArrow(path);
+      }
+    },
+    [isSandwichIcicleGraph, setNewCurPathArrow]
+  );
+
+  // Determine which paths to use based on isSandwichIcicleGraph flag
+  const effectiveCurPathArrow = isSandwichIcicleGraph ? localCurPathArrow : curPathArrow;
+
   const mappingsList = useMappingList(metadataMappingFiles);
 
   const [colorBy, setColorBy] = useURLState('color_by');
@@ -233,14 +257,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
               arrow={arrow}
               total={total}
               filtered={filtered}
-              curPath={curPathArrow}
-              setCurPath={setNewCurPathArrow}
+              curPath={effectiveCurPathArrow}
+              setCurPath={setCurPathArrowWrapper}
               profileType={profileType}
               isHalfScreen={isHalfScreen}
               mappingsListFromMetadata={mappingsList}
               compareAbsolute={isCompareAbsolute}
               isIcicleChart={isIcicleChart}
               profileSource={profileSource}
+              isFlamegraph={isFlamegraph}
+              isSandwich={isSandwichIcicleGraph}
+              tooltipId={tooltipId}
             />
           </div>
         </div>
@@ -253,8 +280,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     loading,
     width,
     filtered,
-    curPathArrow,
-    setNewCurPathArrow,
     profileType,
     isHalfScreen,
     isDarkMode,
@@ -265,6 +290,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     icicleChartHeight,
     icicleChartRef,
     iciclechartHelpText,
+    isFlamegraph,
+    isSandwichIcicleGraph,
+    effectiveCurPathArrow,
+    setCurPathArrowWrapper,
+    tooltipId,
   ]);
 
   useEffect(() => {
@@ -332,20 +362,22 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         transition={{duration: 0.5}}
       >
         {compareMode ? <DiffLegend /> : null}
-        <div className="min-h-48" id="h-icicle-graph">
+        <div className={cx(!isSandwichIcicleGraph ? 'min-h-48' : '')} id="h-icicle-graph">
           <>{icicleGraph}</>
         </div>
-        <p className="my-2 text-xs">
-          Showing {totalFormatted}{' '}
-          {isFiltered ? (
-            <span>
-              ({filteredPercentage}%) filtered of {totalUnfilteredFormatted}{' '}
-            </span>
-          ) : (
-            <></>
-          )}
-          values.{' '}
-        </p>
+        {!isSandwichIcicleGraph && (
+          <p className="my-2 text-xs">
+            Showing {totalFormatted}{' '}
+            {isFiltered ? (
+              <span>
+                ({filteredPercentage}%) filtered of {totalUnfilteredFormatted}{' '}
+              </span>
+            ) : (
+              <></>
+            )}
+            values.{' '}
+          </p>
+        )}
       </motion.div>
     </AnimatePresence>
   );

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -13,11 +13,13 @@
 
 import {Profiler, ProfilerOnRenderCallback} from 'react';
 
+import {QueryServiceClient} from '@parca/client';
 import {ConditionalWrapper} from '@parca/components';
 
 import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
 import {CurrentPathFrame} from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
+import Sandwich from '../../../Sandwich';
 import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
@@ -47,6 +49,7 @@ interface GetDashboardItemProps {
   perf?: {
     onRender?: ProfilerOnRenderCallback;
   };
+  queryClient?: QueryServiceClient;
 }
 
 export const getDashboardItem = ({
@@ -65,6 +68,7 @@ export const getDashboardItem = ({
   currentSearchString,
   setSearchString,
   perf,
+  queryClient,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'icicle':
@@ -142,6 +146,23 @@ export const getDashboardItem = ({
       ) : (
         <></>
       );
+    case 'sandwich':
+      return topTableData != null ? (
+        <Sandwich
+          total={total}
+          filtered={filtered}
+          loading={topTableData.loading}
+          data={topTableData.arrow?.record}
+          unit={topTableData.unit}
+          profileType={profileSource?.ProfileType()}
+          isHalfScreen={isHalfScreen}
+          metadataMappingFiles={flamegraphData.metadataMappingFiles}
+          profileSource={profileSource}
+          queryClient={queryClient}
+        />
+      ) : (
+        <></>
+      );
     case 'source':
       return sourceData != null ? (
         <SourceView