@parca/profile 0.19.12 → 0.19.13

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/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;

package/src/ProfileView/index.tsx

@@ -19,7 +19,12 @@ import ColorStackLegend from './components/ColorStackLegend';
 import {getDashboardItem} from './components/DashboardItems';
 import {DashboardLayout} from './components/DashboardLayout';
 import {ProfileHeader} from './components/ProfileHeader';
-import {IcicleGraphToolbar, TableToolbar, VisualisationToolbar} from './components/Toolbars';
+import {
+  IcicleGraphToolbar,
+  SandwichIcicleGraphToolbar,
+  TableToolbar,
+  VisualisationToolbar,
+} from './components/Toolbars';
 import {DashboardProvider} from './context/DashboardContext';
 import {ProfileViewContextProvider} from './context/ProfileViewContext';
 import {useProfileMetadata} from './hooks/useProfileMetadata';
@@ -63,7 +68,6 @@ export const ProfileView = ({
     clearSelection,
     setGroupByLabels,
     sandwichFunctionName,
-    setSandwichFunctionName,
     resetSandwichFunctionName,
   } = useVisualizationState();
 
@@ -119,6 +123,12 @@ export const ProfileView = ({
         currentSearchString={currentSearchString}
       />
     ),
+    sandwich: (
+      <SandwichIcicleGraphToolbar
+        resetSandwichFunctionName={resetSandwichFunctionName}
+        sandwichFunctionName={sandwichFunctionName}
+      />
+    ),
   };
 
   const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
@@ -154,8 +164,6 @@ export const ProfileView = ({
             setGroupByLabels={setGroupByLabels}
             showVisualizationSelector={showVisualizationSelector}
             sandwichFunctionName={sandwichFunctionName}
-            setSandwichFunctionName={setSandwichFunctionName}
-            resetSandwichFunctionName={resetSandwichFunctionName}
           />
 
           {isColorStackLegendEnabled && (

package/src/Sandwich/components/CalleesSection.tsx

@@ -21,7 +21,6 @@ import {type ProfileSource} from '../../ProfileSource';
 
 interface CalleesSectionProps {
   calleesRef: React.RefObject<HTMLDivElement>;
-  isHalfScreen: boolean;
   calleesFlamegraphResponse?: {
     report: {
       oneofKind: string;
@@ -40,7 +39,6 @@ interface CalleesSectionProps {
 
 export function CalleesSection({
   calleesRef,
-  isHalfScreen,
   calleesFlamegraphResponse,
   calleesFlamegraphLoading,
   calleesFlamegraphError,
@@ -68,11 +66,7 @@ export function CalleesSection({
         error={calleesFlamegraphError}
         isHalfScreen={true}
         width={
-          calleesRef.current != null
-            ? isHalfScreen
-              ? (calleesRef.current.getBoundingClientRect().width - 54) / 2
-              : calleesRef.current.getBoundingClientRect().width - 16
-            : 0
+          calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0
         }
         metadataMappingFiles={metadataMappingFiles}
         metadataLoading={false}

package/src/Sandwich/components/CallersSection.tsx

@@ -11,17 +11,33 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, {useMemo} from 'react';
+
+import {Vector, tableFromIPC} from 'apache-arrow';
+import {Tooltip} from 'react-tooltip';
 
 import {type FlamegraphArrow} from '@parca/client';
+import {Button} from '@parca/components';
 
 import ProfileIcicleGraph from '../../ProfileIcicleGraph';
 import {type CurrentPathFrame} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import {type ProfileSource} from '../../ProfileSource';
 
+const FIELD_DEPTH = 'depth';
+
+function getMaxDepth(depthColumn: Vector<any> | null): number {
+  if (depthColumn === null) return 0;
+
+  let max = 0;
+  for (const val of depthColumn) {
+    const numVal = Number(val);
+    if (numVal > max) max = numVal;
+  }
+  return max;
+}
+
 interface CallersSectionProps {
   callersRef: React.RefObject<HTMLDivElement>;
-  isHalfScreen: boolean;
   callersFlamegraphResponse?: {
     report: {
       oneofKind: string;
@@ -36,11 +52,13 @@ interface CallersSectionProps {
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
   metadataMappingFiles?: string[];
+  isExpanded: boolean;
+  setIsExpanded: (isExpanded: boolean) => void;
+  defaultMaxFrames: number;
 }
 
 export function CallersSection({
   callersRef,
-  isHalfScreen,
   callersFlamegraphResponse,
   callersFlamegraphLoading,
   callersFlamegraphError,
@@ -49,40 +67,79 @@ export function CallersSection({
   curPathArrow,
   setCurPathArrow,
   metadataMappingFiles,
+  isExpanded,
+  setIsExpanded,
+  defaultMaxFrames,
 }: CallersSectionProps): JSX.Element {
+  const maxDepth = useMemo(() => {
+    if (
+      callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow' &&
+      callersFlamegraphResponse?.report?.flamegraphArrow != null
+    ) {
+      const table = tableFromIPC(callersFlamegraphResponse.report.flamegraphArrow.record);
+      const depthColumn = table.getChild(FIELD_DEPTH);
+      return getMaxDepth(depthColumn);
+    }
+    return 0;
+  }, [callersFlamegraphResponse]);
+
+  const shouldShowButton = maxDepth > defaultMaxFrames;
+
   return (
-    <div className="flex relative flex-row" ref={callersRef}>
-      <div className="[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left">
-        Callers {'->'}
+    <>
+      {shouldShowButton && (
+        <Button
+          variant="neutral"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="absolute right-8 top-[-46px] z-10"
+          type="button"
+        >
+          <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"
+          >
+            {isExpanded ? 'Hide frames' : 'Show more frames'}
+          </span>
+          <Tooltip id="show-more-frames" />
+        </Button>
+      )}
+      <div className="flex relative flex-row overflow-hidden" ref={callersRef}>
+        <div className="[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0">
+          Callers {'->'}
+        </div>
+        <div className="flex-1 overflow-hidden relative">
+          <ProfileIcicleGraph
+            arrow={
+              callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                ? callersFlamegraphResponse?.report?.flamegraphArrow
+                : undefined
+            }
+            total={BigInt(callersFlamegraphResponse?.total ?? '0')}
+            filtered={filtered}
+            profileType={profileSource?.ProfileType()}
+            loading={callersFlamegraphLoading}
+            error={callersFlamegraphError}
+            isHalfScreen={true}
+            width={
+              callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0
+            }
+            metadataMappingFiles={metadataMappingFiles}
+            metadataLoading={false}
+            isSandwichIcicleGraph={true}
+            curPathArrow={curPathArrow}
+            setNewCurPathArrow={setCurPathArrow}
+            isFlamegraph={true}
+            profileSource={profileSource}
+            tooltipId="callers"
+            maxFrameCount={defaultMaxFrames}
+            isExpanded={isExpanded}
+          />
+        </div>
       </div>
-      <ProfileIcicleGraph
-        arrow={
-          callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-            ? callersFlamegraphResponse?.report?.flamegraphArrow
-            : undefined
-        }
-        total={BigInt(callersFlamegraphResponse?.total ?? '0')}
-        filtered={filtered}
-        profileType={profileSource?.ProfileType()}
-        loading={callersFlamegraphLoading}
-        error={callersFlamegraphError}
-        isHalfScreen={true}
-        width={
-          callersRef.current != null
-            ? isHalfScreen
-              ? (callersRef.current.getBoundingClientRect().width - 54) / 2
-              : callersRef.current.getBoundingClientRect().width - 16
-            : 0
-        }
-        metadataMappingFiles={metadataMappingFiles}
-        metadataLoading={false}
-        isSandwichIcicleGraph={true}
-        curPathArrow={curPathArrow}
-        setNewCurPathArrow={setCurPathArrow}
-        isFlamegraph={true}
-        profileSource={profileSource}
-        tooltipId="callers"
-      />
-    </div>
+    </>
   );
 }

package/src/Sandwich/components/TableSection.tsx

@@ -46,8 +46,8 @@ export function TableSection({
   return (
     <div
       style={{height: height !== undefined ? `${height}px` : '80vh'}}
-      className={`font-robotoMono w-full cursor-pointer ${
-        selectedRow != null && sandwichFunctionName !== undefined ? 'w-[50%]' : ''
+      className={`font-robotoMono cursor-pointer ${
+        selectedRow != null && sandwichFunctionName !== undefined ? 'w-[50%]' : 'w-full'
       }`}
     >
       <TableComponent