@parca/profile 0.19.12 → 0.19.14

package/src/MatchersInput/index.tsx

@@ -33,6 +33,8 @@ interface MatchersInputProps {
   runQuery: () => void;
   currentQuery: Query;
   profileType: string;
+  start?: number;
+  end?: number;
 }
 
 export interface ILabelNamesResult {
@@ -55,7 +57,7 @@ export const useLabelNames = (
   const metadata = useGrpcMetadata();
 
   const {data, isLoading, error} = useGrpcQuery<LabelsResponse>({
-    key: ['labelNames', profileType, match?.join(',')],
+    key: ['labelNames', profileType, match?.join(','), start, end],
     queryFn: async () => {
       const request: LabelsRequest = {match: match !== undefined ? match : []};
       if (start !== undefined && end !== undefined) {
@@ -89,14 +91,20 @@ interface UseLabelValues {
 export const useLabelValues = (
   client: QueryServiceClient,
   labelName: string,
-  profileType: string
+  profileType: string,
+  start?: number,
+  end?: number
 ): UseLabelValues => {
   const metadata = useGrpcMetadata();
 
   const {data, isLoading, error} = useGrpcQuery<string[]>({
-    key: ['labelValues', labelName, profileType],
+    key: ['labelValues', labelName, profileType, start, end],
     queryFn: async () => {
       const request: ValuesRequest = {labelName, match: [], profileType};
+      if (start !== undefined && end !== undefined) {
+        request.start = millisToProtoTimestamp(start);
+        request.end = millisToProtoTimestamp(end);
+      }
       const {response} = await client.values(request, {meta: metadata});
       return sanitizeLabelValue(response.labelValues);
     },
@@ -321,7 +329,12 @@ const MatchersInput = ({
 
 export default function MatchersInputWithProvider(props: MatchersInputProps): JSX.Element {
   return (
-    <LabelsProvider queryClient={props.queryClient} profileType={props.profileType}>
+    <LabelsProvider
+      queryClient={props.queryClient}
+      profileType={props.profileType}
+      start={props.start}
+      end={props.end}
+    >
       <MatchersInput {...props} />
     </LabelsProvider>
   );

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -13,6 +13,7 @@
 
 import {Icon} from '@iconify/react';
 import {Table} from 'apache-arrow';
+import cx from 'classnames';
 import {Item, Menu, Separator, Submenu} from 'react-contexify';
 import {Tooltip} from 'react-tooltip';
 
@@ -144,7 +145,15 @@ const ContextMenu = ({
   const nonEmptyValuesToCopy = valuesToCopy.filter(({value}) => value !== '');
 
   return (
-    <Menu id={menuId} theme={isDarkMode ? 'dark' : ''} className="w-[250px]">
+    <Menu
+      id={menuId}
+      theme={isDarkMode ? 'dark' : ''}
+      className={cx(
+        dashboardItems.includes('sandwich')
+          ? 'min-w-[350px] w-[350px]'
+          : 'min-w-[260px] w-fit-content'
+      )}
+    >
       <Item
         id="view-source-file"
         onClick={handleViewSourceFile}
@@ -181,14 +190,21 @@ const ContextMenu = ({
         <Item
           id="show-in-sandwich"
           onClick={() => {
+            if (dashboardItems.includes('sandwich')) {
+              setSandwichFunctionName(functionName);
+              return;
+            }
+
             setSandwichFunctionName(functionName);
-            setDashboardItems(['sandwich']);
+            setDashboardItems([...dashboardItems, 'sandwich']);
           }}
         >
           <div className="flex w-full items-center gap-2">
             <Icon icon="tdesign:sandwich-filled" />
             <div className="relative">
-              Show in sandwich
+              {dashboardItems.includes('sandwich')
+                ? 'Focus sandwich on this frame.'
+                : 'Show in sandwich'}
               <span className="absolute top-[-2px] text-xs lowercase text-red-500">
                 &nbsp;alpha
               </span>

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx

@@ -34,15 +34,23 @@ interface ContextMenuWrapperProps {
 }
 
 export interface ContextMenuWrapperRef {
-  setRow: (row: number) => void;
+  setRow: (row: number, callback?: () => void) => void;
 }
 
 const ContextMenuWrapper = forwardRef<ContextMenuWrapperRef, ContextMenuWrapperProps>(
   (props, ref) => {
+    // Fix for race condition: Always render ContextMenu to maintain component tree stability
+    // but use callback timing to ensure correct data is available when menu shows
     const [row, setRow] = useState(0);
 
     useImperativeHandle(ref, () => ({
-      setRow,
+      setRow: (newRow: number, callback?: () => void) => {
+        setRow(newRow);
+        // Execute callback after state update using requestAnimationFrame
+        if (callback != null) {
+          requestAnimationFrame(callback);
+        }
+      },
     }));
 
     return <ContextMenu {...props} row={row} />;

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -64,6 +64,7 @@ export interface IcicleNodeProps {
   isFlamegraph?: boolean;
   isSandwich?: boolean;
   maxDepth?: number;
+  effectiveDepth?: 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.
@@ -102,6 +103,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   isFlamegraph = false,
   isSandwich = false,
   maxDepth = 0,
+  effectiveDepth,
   tooltipId = 'default',
 }: IcicleNodeProps): React.JSX.Element {
   // get the columns to read from
@@ -115,12 +117,15 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const tsColumn = table.getChild(FIELD_TIMESTAMP);
 
   // get the actual values from the columns
+  const binaries = useAppSelector(selectBinaries);
+
   const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
   const functionName: string | null = arrowToString(functionNameColumn?.get(row));
   const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
   const diff: bigint | null = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
   const filename: string | null = arrowToString(filenameColumn?.get(row));
   const depth: number = depthColumn?.get(row) ?? 0;
+
   const valueOffset: bigint =
     valueOffsetColumn?.get(row) !== null && valueOffsetColumn?.get(row) !== undefined
       ? BigInt(valueOffsetColumn?.get(row))
@@ -136,7 +141,6 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const shouldBeHighlighted =
     functionName != null && hoveringName != null && functionName === hoveringName;
 
-  const binaries = useAppSelector(selectBinaries);
   const colorResult = useNodeColor({
     isDarkMode: darkMode,
     compareMode,
@@ -145,6 +149,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     colorsMap,
     colorAttribute,
   });
+
   const name = useMemo(() => {
     return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
   }, [table, row, binaries]);
@@ -156,6 +161,11 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     return {isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name)};
   }, [searchString, name]);
 
+  // Hide frames beyond effective depth limit
+  if (effectiveDepth !== undefined && depth > effectiveDepth) {
+    return <></>;
+  }
+
   const selectionOffset =
     valueOffsetColumn?.get(selectedRow) !== null &&
     valueOffsetColumn?.get(selectedRow) !== undefined
@@ -241,7 +251,14 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     return depth * height;
   };
 
-  const y = calculateY(isFlamegraph, isSandwich, isIcicleChart, maxDepth, depth, height);
+  const y = calculateY(
+    isFlamegraph,
+    isSandwich,
+    isIcicleChart,
+    effectiveDepth ?? maxDepth,
+    depth,
+    height
+  );
 
   return (
     <>

package/src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx

@@ -39,11 +39,24 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
     };
 
     const eventName = `icicle-tooltip-update-${tooltipId}`;
-    window.addEventListener(eventName as any, handleTooltipUpdate as any);
+
+    // Delay to ensure all DOM updates and React renders are complete
+    // This fixes the race condition in sandwich view
+    const timeoutId = setTimeout(() => {
+      window.addEventListener(eventName as any, handleTooltipUpdate as any);
+    }, 200);
+
     return () => {
+      clearTimeout(timeoutId);
       window.removeEventListener(eventName as any, handleTooltipUpdate as any);
     };
-  }, [tooltipId]);
+  }, [tooltipId, table]);
+
+  // Re-render when contextElement becomes available (fixes sandwich view timing issue)
+  useEffect(() => {
+    // Force re-render when contextElement transitions from null to valid element
+    // This ensures tooltips work immediately in sandwich view
+  }, [contextElement, tooltipId]);
 
   if (dockedMetainfo) {
     return (
@@ -63,6 +76,11 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
     return null;
   }
 
+  // Fix for sandwich view tooltip issue: Don't render tooltip if contextElement is null
+  // This happens when the SVG ref isn't ready yet during initial sandwich view render
+  if (contextElement === null) {
+    return null;
+  }
   return (
     <GraphTooltipArrow contextElement={contextElement}>
       <GraphTooltipArrowContent

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -11,7 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {memo, useCallback, useMemo, useRef, useState} from 'react';
+import React, {
+  memo,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
@@ -77,6 +85,8 @@ interface IcicleGraphArrowProps {
   isFlamegraph?: boolean;
   isSandwich?: boolean;
   tooltipId?: string;
+  maxFrameCount?: number;
+  isExpanded?: boolean;
 }
 
 export const getMappingColors = (
@@ -135,6 +145,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   isFlamegraph = false,
   isSandwich = false,
   tooltipId = 'default',
+  maxFrameCount,
+  isExpanded = false,
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
     USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
@@ -148,6 +160,12 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   }, [arrow]);
   const svg = useRef(null);
 
+  const [svgElement, setSvgElement] = useState<SVGSVGElement | null>(null);
+
+  useEffect(() => {
+    setSvgElement(svg.current);
+  }, [tooltipId]);
+
   const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
 
   const [currentSearchString] = useURLState('search_string');
@@ -215,9 +233,14 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   });
   const displayMenu = useCallback(
     (e: React.MouseEvent, row: number): void => {
-      contextMenuRef.current?.setRow(row);
-      show({
-        event: e,
+      e.preventDefault();
+      // Race condition fix: Use callback to ensure context menu shows only after
+      // row state has been updated and propagated through the hook chain.
+      // This prevents empty function names on first click.
+      contextMenuRef.current?.setRow(row, () => {
+        show({
+          event: e,
+        });
       });
     },
     [show]
@@ -255,7 +278,17 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   const depthColumn = table.getChild(FIELD_DEPTH);
   const maxDepth = getMaxDepth(depthColumn);
-  const height = isSandwich ? maxDepth * RowHeight : (maxDepth + 1) * RowHeight;
+
+  // Apply frame limit if maxFrameCount is provided and not expanded
+  const effectiveDepth =
+    maxFrameCount !== undefined && !isExpanded ? Math.min(maxDepth, maxFrameCount) : maxDepth;
+
+  // Use deferred value to prevent UI blocking when expanding frames
+  const deferredEffectiveDepth = useDeferredValue(effectiveDepth);
+
+  const height = isSandwich
+    ? deferredEffectiveDepth * RowHeight
+    : (deferredEffectiveDepth + 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
@@ -307,7 +340,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           profileType={profileType}
           isSandwich={isSandwich}
         />
-        <MemoizedTooltip contextElement={svg.current} dockedMetainfo={dockedMetainfo} />
+        <MemoizedTooltip contextElement={svgElement} dockedMetainfo={dockedMetainfo} />
         <svg
           className="font-robotoMono"
           width={width}
@@ -344,6 +377,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               isFlamegraph={isFlamegraph}
               isSandwich={isSandwich}
               maxDepth={maxDepth}
+              effectiveDepth={deferredEffectiveDepth}
               tooltipId={tooltipId}
             />
           ))}

package/src/ProfileIcicleGraph/index.tsx

@@ -18,7 +18,12 @@ import {AnimatePresence, motion} from 'framer-motion';
 import {useMeasure} from 'react-use';
 
 import {FlamegraphArrow} from '@parca/client';
-import {IcicleGraphSkeleton, useParcaContext, useURLState} from '@parca/components';
+import {
+  FlamegraphSkeleton,
+  IcicleGraphSkeleton,
+  useParcaContext,
+  useURLState,
+} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
 
@@ -53,6 +58,8 @@ interface ProfileIcicleGraphProps {
   isSandwichIcicleGraph?: boolean;
   isFlamegraph?: boolean;
   tooltipId?: string;
+  maxFrameCount?: number;
+  isExpanded?: boolean;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.Element => {
@@ -88,6 +95,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   isSandwichIcicleGraph = false,
   isFlamegraph = false,
   tooltipId,
+  maxFrameCount,
+  isExpanded = false,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
@@ -184,10 +193,15 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       ? validateIcicleChartQuery(profileSource as MergedProfileSource)
       : {isValid: true, isNonDelta: false, isDurationTooLong: false};
     const isInvalidIcicleChartQuery = isIcicleChart && !isIcicleChartValid;
+
     if (isLoading && !isInvalidIcicleChartQuery) {
       return (
         <div className="h-auto overflow-clip">
-          <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+          {isFlamegraph ? (
+            <FlamegraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+          ) : (
+            <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+          )}
         </div>
       );
     }
@@ -268,6 +282,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
               isFlamegraph={isFlamegraph}
               isSandwich={isSandwichIcicleGraph}
               tooltipId={tooltipId}
+              maxFrameCount={maxFrameCount}
+              isExpanded={isExpanded}
             />
           </div>
         </div>
@@ -295,6 +311,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     effectiveCurPathArrow,
     setCurPathArrowWrapper,
     tooltipId,
+    maxFrameCount,
+    isExpanded,
   ]);
 
   useEffect(() => {

package/src/ProfileSelector/QueryControls.tsx

@@ -148,6 +148,8 @@ export function QueryControls({
             runQuery={setQueryExpression}
             currentQuery={query}
             queryClient={queryClient}
+            start={timeRangeSelection.getFromMs()}
+            end={timeRangeSelection.getToMs()}
           />
         ) : advancedModeForQueryBrowser ? (
           <MatchersInput
@@ -156,6 +158,8 @@ export function QueryControls({
             currentQuery={query}
             profileType={selectedProfileName}
             queryClient={queryClient}
+            start={timeRangeSelection.getFromMs()}
+            end={timeRangeSelection.getToMs()}
           />
         ) : (
           <SimpleMatchers
@@ -166,6 +170,8 @@ export function QueryControls({
             profileType={selectedProfileName}
             queryBrowserRef={queryBrowserRef}
             queryClient={queryClient}
+            start={timeRangeSelection.getFromMs()}
+            end={timeRangeSelection.getToMs()}
           />
         )}
       </div>

package/src/ProfileSelector/index.tsx

@@ -170,10 +170,20 @@ const ProfileSelector = ({
     return Query.parse(querySelection.expression).profileType();
   }, [querySelection.expression]);
 
-  const {loading: labelNamesLoading, result} = useLabelNames(queryClient, profileType.toString());
+  const from = timeRangeSelection.getFromMs();
+  const to = timeRangeSelection.getToMs();
+
+  const {loading: labelNamesLoading, result} = useLabelNames(
+    queryClient,
+    profileType.toString(),
+    from,
+    to
+  );
   const {loading: selectedLabelNamesLoading, result: selectedLabelNamesResult} = useLabelNames(
     queryClient,
-    selectedProfileType.toString()
+    selectedProfileType.toString(),
+    from,
+    to
   );
 
   const labels = useMemo(() => {

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

@@ -155,7 +155,6 @@ export const getDashboardItem = ({
           data={topTableData.arrow?.record}
           unit={topTableData.unit}
           profileType={profileSource?.ProfileType()}
-          isHalfScreen={isHalfScreen}
           metadataMappingFiles={flamegraphData.metadataMappingFiles}
           profileSource={profileSource}
           queryClient={queryClient}

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

@@ -182,11 +182,17 @@ const ShareButton = ({
             element={
               <Button
                 variant="neutral"
-                className="flex items-center gap-2"
+                className="flex items-center gap-2 pr-[1.7rem]"
                 id="h-share-dropdown-button"
               >
-                <Icon icon="material-symbols:share" className="h-4 w-4" />
-                Share
+                <div className="flex items-center gap-2">
+                  <Icon icon="material-symbols:share" className="w-4 h-4" />
+
+                  <span>Share</span>
+                </div>
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400">
+                  <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />
+                </div>
               </Button>
             }
           >

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

@@ -16,7 +16,7 @@ import {FC} from 'react';
 import {Icon} from '@iconify/react';
 
 import {QueryServiceClient} from '@parca/client';
-import {Button, UserPreferencesModal} from '@parca/components';
+import {Button} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 
 import {CurrentPathFrame} from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
@@ -52,8 +52,6 @@ export interface VisualisationToolbarProps {
   setGroupByLabels: (labels: string[]) => void;
   showVisualizationSelector?: boolean;
   sandwichFunctionName?: string;
-  setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
-  resetSandwichFunctionName: () => void;
 }
 
 export interface TableToolbarProps {
@@ -150,7 +148,6 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   groupByLabels,
   setGroupByLabels,
   profileType,
-  preferencesModal,
   profileSource,
   queryClient,
   onDownloadPProf,
@@ -163,17 +160,13 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   currentSearchString,
   clearSelection,
   showVisualizationSelector = true,
-  resetSandwichFunctionName,
-  sandwichFunctionName,
 }) => {
   const {dashboardItems} = useDashboard();
 
   const isTableViz = dashboardItems?.includes('table');
   const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
   const isGraphViz = dashboardItems?.includes('icicle');
-  const isSandwichIcicleGraphViz = dashboardItems?.includes('sandwich');
-
-  const isTableView = isTableVizOnly || isSandwichIcicleGraphViz;
+  const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
 
   const req = profileSource?.QueryRequest();
   if (req !== null && req !== undefined) {
@@ -186,7 +179,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
     <>
       <div className="flex w-full justify-between items-end">
         <div className="flex gap-3 items-end">
-          {!isTableView && (
+          {isGraphViz && (
             <>
               <GroupByDropdown
                 groupBy={groupBy}
@@ -203,13 +196,12 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
           {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
         </div>
         <div className="flex gap-3">
-          {preferencesModal === true && <UserPreferencesModal />}
           <MultiLevelDropdown
             groupBy={groupBy}
             toggleGroupBy={toggleGroupBy}
             profileType={profileType}
             onSelect={() => {}}
-            isTableVizOnly={isTableView}
+            isTableVizOnly={isTableVizOnly}
           />
 
           <ShareButton
@@ -224,13 +216,14 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
           {showVisualizationSelector ? <ViewSelector profileSource={profileSource} /> : null}
         </div>
       </div>
-      {isGraphViz && !isTableViz && (
+
+      {isGraphVizOnly && (
         <>
           <Divider />
           <IcicleGraphToolbar curPath={curPath} setNewCurPath={setNewCurPath} />
         </>
       )}
-      {isTableViz && !isGraphViz && (
+      {isTableVizOnly && (
         <>
           <Divider />
           <TableToolbar
@@ -242,15 +235,6 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
           />
         </>
       )}
-      {isSandwichIcicleGraphViz && (
-        <>
-          <Divider />
-          <SandwichIcicleGraphToolbar
-            resetSandwichFunctionName={resetSandwichFunctionName}
-            sandwichFunctionName={sandwichFunctionName}
-          />
-        </>
-      )}
     </>
   );
 };

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

@@ -29,6 +29,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
       alwaysReturnArray: true,
     }
   );
+  const [, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
   const {enableSourcesView, enableSandwichView} = useParcaContext();
 
   const allItems: Array<{
@@ -38,8 +39,8 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
     supportingText?: string;
     disabledText?: string;
   }> = [
-    {key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table')},
     {key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
+    {key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table')},
     {
       key: 'iciclechart',
       label: (
@@ -105,14 +106,8 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
   }): InnerAction | undefined => {
     if (dashboardItems.length === 1 && item.key === dashboardItems[0]) return undefined;
 
-    // For sandwich view, return a no-op action
-    if (item.key === 'sandwich') {
-      return {
-        text: 'Add Panel',
-        onClick: () => {},
-        isDisabled: true, // Custom property to control button state
-      };
-    }
+    // If we already have 2 panels and this item isn't selected, don't show any action
+    if (dashboardItems.length >= 2 && !dashboardItems.includes(item.key)) return undefined;
 
     return {
       text:
@@ -120,12 +115,20 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
           ? 'Add Panel'
           : item.canBeSelected
           ? 'Add Panel'
-          : 'Close Panel',
+          : dashboardItems.includes(item.key)
+          ? 'Close Panel'
+          : 'Add Panel',
       onClick: () => {
         if (item.canBeSelected) {
           setDashboardItems([...dashboardItems, item.key]);
         } else {
-          setDashboardItems(dashboardItems.filter(v => v !== item.key));
+          const newDashboardItems = dashboardItems.filter(v => v !== item.key);
+          setDashboardItems(newDashboardItems);
+
+          // Reset sandwich function name when removing sandwich panel
+          if (item.key === 'sandwich') {
+            setSandwichFunctionName(undefined);
+          }
         }
       },
       isDisabled: dashboardItems.length === 1 && dashboardItems.includes('sandwich'),
@@ -142,6 +145,12 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
 
   const onSelection = (value: string): void => {
     const isOnlyChart = dashboardItems.length === 1;
+
+    if (isOnlyChart && value === 'sandwich') {
+      setDashboardItems([...dashboardItems, value]);
+      return;
+    }
+
     if (isOnlyChart) {
       setDashboardItems([value]);
       return;

package/src/ProfileView/context/DashboardContext.tsx

@@ -30,10 +30,16 @@ export const DashboardProvider: FC<PropsWithChildren> = ({children}) => {
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
+  const [, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
   const handleClosePanel = (visualizationType: VisualizationType): void => {
     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;