@parca/profile 0.19.17 → 0.19.19

package/src/{ProfileIcicleGraph → ProfileFlameGraph}/index.tsx

@@ -19,8 +19,8 @@ import {useMeasure} from 'react-use';
 
 import {FlamegraphArrow} from '@parca/client';
 import {
-  FlamegraphSkeleton,
-  IcicleGraphSkeleton,
+  FlameGraphSkeleton,
+  SandwichFlameGraphSkeleton,
   useParcaContext,
   useURLState,
 } from '@parca/components';
@@ -31,15 +31,15 @@ import {MergedProfileSource, ProfileSource} from '../ProfileSource';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {TimelineGuide} from '../TimelineGuide';
-import {IcicleGraphArrow} from './IcicleGraphArrow';
-import useMappingList from './IcicleGraphArrow/useMappingList';
-import {CurrentPathFrame, boundsFromProfileSource} from './IcicleGraphArrow/utils';
+import {FlameGraphArrow} from './FlameGraphArrow';
+import useMappingList from './FlameGraphArrow/useMappingList';
+import {CurrentPathFrame, boundsFromProfileSource} from './FlameGraphArrow/utils';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
 export type ResizeHandler = (width: number, height: number) => void;
 
-interface ProfileIcicleGraphProps {
+interface ProfileFlameGraphProps {
   width: number;
   arrow?: FlamegraphArrow;
   total: bigint;
@@ -54,9 +54,9 @@ interface ProfileIcicleGraphProps {
   isHalfScreen: boolean;
   metadataMappingFiles?: string[];
   metadataLoading?: boolean;
-  isIcicleChart?: boolean;
-  isSandwichIcicleGraph?: boolean;
-  isFlamegraph?: boolean;
+  isFlameChart?: boolean;
+  isInSandwichView?: boolean;
+  isRenderedAsFlamegraph?: boolean;
   tooltipId?: string;
   maxFrameCount?: number;
   isExpanded?: boolean;
@@ -70,7 +70,7 @@ const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.E
   );
 };
 
-export const validateIcicleChartQuery = (
+export const validateFlameChartQuery = (
   profileSource: MergedProfileSource
 ): {isValid: boolean; isNonDelta: boolean; isDurationTooLong: boolean} => {
   const isNonDelta = !profileSource.ProfileType().delta;
@@ -78,7 +78,7 @@ export const validateIcicleChartQuery = (
   return {isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong};
 };
 
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
+const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   arrow,
   total,
   filtered,
@@ -90,35 +90,35 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   width,
   isHalfScreen,
   metadataMappingFiles,
-  isIcicleChart = false,
+  isFlameChart = false,
   profileSource,
-  isSandwichIcicleGraph = false,
-  isFlamegraph = false,
+  isInSandwichView = false,
+  isRenderedAsFlamegraph = false,
   tooltipId,
   maxFrameCount,
   isExpanded = false,
-}: ProfileIcicleGraphProps): JSX.Element {
-  const {onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText} = useParcaContext();
+}: ProfileFlameGraphProps): JSX.Element {
+  const {onError, authenticationErrorMessage, isDarkMode, flamechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [icicleChartRef, {height: icicleChartHeight}] = useMeasure();
+  const [flameChartRef, {height: flameChartHeight}] = 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) {
+      if (isInSandwichView) {
         setLocalCurPathArrow(path);
       } else {
         setNewCurPathArrow(path);
       }
     },
-    [isSandwichIcicleGraph, setNewCurPathArrow]
+    [isInSandwichView, setNewCurPathArrow]
   );
 
-  // Determine which paths to use based on isSandwichIcicleGraph flag
-  const effectiveCurPathArrow = isSandwichIcicleGraph ? localCurPathArrow : curPathArrow;
+  // Determine which paths to use based on isInSandwichView flag
+  const effectiveCurPathArrow = isInSandwichView ? localCurPathArrow : curPathArrow;
 
   const mappingsList = useMappingList(metadataMappingFiles);
 
@@ -184,37 +184,37 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     }
   }, [loadingState]);
 
-  const icicleGraph = useMemo(() => {
+  const flameGraph = useMemo(() => {
     const {
-      isValid: isIcicleChartValid,
+      isValid: isFlameChartValid,
       isNonDelta,
       isDurationTooLong,
-    } = isIcicleChart
-      ? validateIcicleChartQuery(profileSource as MergedProfileSource)
+    } = isFlameChart
+      ? validateFlameChartQuery(profileSource as MergedProfileSource)
       : {isValid: true, isNonDelta: false, isDurationTooLong: false};
-    const isInvalidIcicleChartQuery = isIcicleChart && !isIcicleChartValid;
+    const isInvalidFlameChartQuery = isFlameChart && !isFlameChartValid;
 
-    if (isLoading && !isInvalidIcicleChartQuery) {
+    if (isLoading && !isInvalidFlameChartQuery) {
       return (
         <div className="h-auto overflow-clip">
-          {isFlamegraph ? (
-            <FlamegraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+          {isRenderedAsFlamegraph ? (
+            <SandwichFlameGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
           ) : (
-            <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+            <FlameGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
           )}
         </div>
       );
     }
 
-    // Do necessary checks to ensure that icicle chart can be rendered for this query.
-    if (isInvalidIcicleChartQuery) {
+    // Do necessary checks to ensure that flame chart can be rendered for this query.
+    if (isInvalidFlameChartQuery) {
       if (isNonDelta) {
         return (
           <ErrorContent
             errorMessage={
               <>
-                <span>To use the Icicle chart, please switch to a Delta profile.</span>
-                {iciclechartHelpText ?? null}
+                <span>To use the Flame chart, please switch to a Delta profile.</span>
+                {flamechartHelpText ?? null}
               </>
             }
           />
@@ -225,10 +225,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
             errorMessage={
               <>
                 <span>
-                  Icicle chart is unavailable for queries longer than one minute. Please select a
+                  Flame chart is unavailable for queries longer than one minute. Please select a
                   point in the metrics graph to continue.
                 </span>
-                {iciclechartHelpText ?? null}
+                {flamechartHelpText ?? null}
               </>
             }
           />
@@ -238,8 +238,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
           <ErrorContent
             errorMessage={
               <>
-                <span>The Icicle chart is not available for this query.</span>
-                {iciclechartHelpText ?? null}
+                <span>The Flame chart is not available for this query.</span>
+                {flamechartHelpText ?? null}
               </>
             }
           />
@@ -255,18 +255,18 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     if (arrow !== undefined) {
       return (
         <div className="relative">
-          {isIcicleChart ? (
+          {isFlameChart ? (
             <TimelineGuide
               bounds={boundsFromProfileSource(profileSource)}
               width={width}
-              height={icicleChartHeight ?? 420}
+              height={flameChartHeight ?? 420}
               margin={0}
               ticks={12}
               timeUnit="nanoseconds"
             />
           ) : null}
-          <div ref={icicleChartRef as LegacyRef<HTMLDivElement>}>
-            <IcicleGraphArrow
+          <div ref={flameChartRef as LegacyRef<HTMLDivElement>}>
+            <FlameGraphArrow
               width={width}
               arrow={arrow}
               total={total}
@@ -277,10 +277,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
               isHalfScreen={isHalfScreen}
               mappingsListFromMetadata={mappingsList}
               compareAbsolute={isCompareAbsolute}
-              isIcicleChart={isIcicleChart}
+              isFlameChart={isFlameChart}
               profileSource={profileSource}
-              isFlamegraph={isFlamegraph}
-              isSandwich={isSandwichIcicleGraph}
+              isRenderedAsFlamegraph={isRenderedAsFlamegraph}
+              isInSandwichView={isInSandwichView}
               tooltipId={tooltipId}
               maxFrameCount={maxFrameCount}
               isExpanded={isExpanded}
@@ -301,13 +301,13 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     isDarkMode,
     mappingsList,
     isCompareAbsolute,
-    isIcicleChart,
+    isFlameChart,
     profileSource,
-    icicleChartHeight,
-    icicleChartRef,
-    iciclechartHelpText,
-    isFlamegraph,
-    isSandwichIcicleGraph,
+    flameChartHeight,
+    flameChartRef,
+    flamechartHelpText,
+    isRenderedAsFlamegraph,
+    isInSandwichView,
     effectiveCurPathArrow,
     setCurPathArrowWrapper,
     tooltipId,
@@ -363,7 +363,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         errorMessage={
           <>
             <span>{capitalizeOnlyFirstLetter(error.message)}</span>
-            {isIcicleChart ? iciclechartHelpText ?? null : null}
+            {isFlameChart ? flamechartHelpText ?? null : null}
           </>
         }
       />
@@ -374,16 +374,16 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     <AnimatePresence>
       <motion.div
         className="relative h-full w-full"
-        key="icicle-graph-loaded"
+        key="flame-graph-loaded"
         initial={{opacity: 0}}
         animate={{opacity: 1}}
         transition={{duration: 0.5}}
       >
         {compareMode ? <DiffLegend /> : null}
-        <div className={cx(!isSandwichIcicleGraph ? 'min-h-48' : '')} id="h-icicle-graph">
-          <>{icicleGraph}</>
+        <div className={cx(!isInSandwichView ? 'min-h-48' : '')} id="h-flame-graph">
+          <>{flameGraph}</>
         </div>
-        {!isSandwichIcicleGraph && (
+        {!isInSandwichView && (
           <p className="my-2 text-xs">
             Showing {totalFormatted}{' '}
             {isFiltered ? (
@@ -401,4 +401,4 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   );
 };
 
-export default ProfileIcicleGraph;
+export default ProfileFlameGraph;

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -100,7 +100,7 @@ export const useAutoQuerySelector = ({
       void navigateTo('/', {
         ...compareQuery,
         search_string: '',
-        dashboard_items: ['icicle'],
+        dashboard_items: ['flamegraph'],
       });
     }
   }, [comparing, querySelection, navigateTo, expressionA, dispatch, loading]);

package/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

@@ -23,14 +23,12 @@ interface GroupByControlsProps {
 
 const GroupByControls: React.FC<GroupByControlsProps> = ({groupBy, labels, setGroupByLabels}) => {
   return (
-    <div className="inline-flex items-start">
-      <div className="relative flex gap-3 items-start">
-        <GroupByLabelsDropdown
-          labels={labels}
-          groupBy={groupBy}
-          setGroupByLabels={setGroupByLabels}
-        />
-      </div>
+    <div className="relative flex" id="h-group-by-controls">
+      <GroupByLabelsDropdown
+        labels={labels}
+        groupBy={groupBy}
+        setGroupByLabels={setGroupByLabels}
+      />
     </div>
   );
 };

package/src/ProfileView/components/ActionButtons/SortByDropdown.tsx

@@ -17,7 +17,7 @@ import {
   FIELD_CUMULATIVE,
   FIELD_DIFF,
   FIELD_FUNCTION_NAME,
-} from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+} from '../../../ProfileFlameGraph/FlameGraphArrow';
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 
 const SortByDropdown = (): React.JSX.Element => {

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -20,8 +20,8 @@ import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
 
-import {getMappingColors} from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import useMappingList from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import {getMappingColors} from '../../ProfileFlameGraph/FlameGraphArrow';
+import useMappingList from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 
 interface Props {
   mappings?: string[];

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

@@ -16,8 +16,8 @@ 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 ProfileFlameGraph from '../../../ProfileFlameGraph';
+import {CurrentPathFrame} from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
 import Sandwich from '../../../Sandwich';
 import {SourceView} from '../../../SourceView';
@@ -71,17 +71,17 @@ export const getDashboardItem = ({
   queryClient,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
-    case 'icicle':
+    case 'flamegraph':
       return (
         <ConditionalWrapper
           condition={perf?.onRender != null}
           WrapperComponent={Profiler}
           wrapperProps={{
-            id: 'icicleGraph',
+            id: 'flameGraph',
             onRender: perf?.onRender ?? (() => {}),
           }}
         >
-          <ProfileIcicleGraph
+          <ProfileFlameGraph
             curPathArrow={curPathArrow}
             setNewCurPathArrow={setNewCurPathArrow}
             arrow={flamegraphData?.arrow}
@@ -104,9 +104,9 @@ export const getDashboardItem = ({
           />
         </ConditionalWrapper>
       );
-    case 'iciclechart':
+    case 'flamechart':
       return (
-        <ProfileIcicleGraph
+        <ProfileFlameGraph
           curPathArrow={[]}
           setNewCurPathArrow={() => {}}
           arrow={flamechartData?.arrow}
@@ -126,7 +126,7 @@ export const getDashboardItem = ({
           metadataMappingFiles={flamechartData.metadataMappingFiles}
           metadataLoading={flamechartData.metadataLoading}
           profileSource={profileSource}
-          isIcicleChart={true}
+          isFlameChart={true}
         />
       );
     case 'table':

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

@@ -29,7 +29,7 @@ import {VisualizationContainer} from '../VisualizationContainer';
 interface DashboardLayoutProps {
   getDashboardItemByType: (props: {type: VisualizationType; isHalfScreen: boolean}) => JSX.Element;
   actionButtons: {
-    icicle: JSX.Element;
+    flame: JSX.Element;
     table: JSX.Element;
   };
 }

package/src/ProfileView/components/DiffLegend.tsx

@@ -97,9 +97,9 @@ const DiffLegend = (): JSX.Element => {
                 <div className="bg-gray-50 p-4 dark:bg-gray-800">
                   <div className="flex items-center justify-center"></div>
                   <span className="block text-sm text-gray-500 dark:text-gray-50">
-                    This is a differential icicle graph, where a purple-colored node means
-                    unchanged, and the darker the red, the worse the node got, and the darker the
-                    green, the better the node got.
+                    This is a differential flame graph, where a purple-colored node means unchanged,
+                    and the darker the red, the worse the node got, and the darker the green, the
+                    better the node got.
                   </span>
                 </div>
               </div>

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

@@ -13,7 +13,7 @@
 
 import Select from 'react-select';
 
-import {FIELD_LABELS} from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
 
 interface LabelOption {
   label: string;

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

@@ -24,6 +24,7 @@ const InvertCallStack = (): JSX.Element => {
       variant="neutral"
       className="flex items-center gap-2"
       onClick={() => setInvertStack(isInvert ? '' : 'true')}
+      id="h-invert-call-stack"
     >
       <Icon icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'} className="h-4 w-4" />
       {isInvert ? 'Original' : 'Invert'} Call Stack

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

@@ -26,7 +26,7 @@ import {
   FIELD_FUNCTION_NAME,
   FIELD_LOCATION_ADDRESS,
   FIELD_MAPPING_FILE,
-} from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+} from '../../../ProfileFlameGraph/FlameGraphArrow';
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 import SwitchMenuItem from './SwitchMenuItem';
 

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

@@ -19,7 +19,7 @@ import {QueryServiceClient} from '@parca/client';
 import {Button} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 
-import {CurrentPathFrame} from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {CurrentPathFrame} from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
 import {useDashboard} from '../../context/DashboardContext';
 import GroupByDropdown from '../ActionButtons/GroupByDropdown';
@@ -62,12 +62,12 @@ export interface TableToolbarProps {
   currentSearchString?: string;
 }
 
-export interface IcicleGraphToolbarProps {
+export interface FlameGraphToolbarProps {
   curPath: CurrentPathFrame[];
   setNewCurPath: (path: CurrentPathFrame[]) => void;
 }
 
-export interface SandwichIcicleGraphToolbarProps {
+export interface SandwichFlameGraphToolbarProps {
   resetSandwichFunctionName: () => void;
   sandwichFunctionName?: string;
 }
@@ -98,7 +98,7 @@ export const TableToolbar: FC<TableToolbarProps> = ({
   );
 };
 
-export const IcicleGraphToolbar: FC<IcicleGraphToolbarProps> = ({curPath, setNewCurPath}) => {
+export const FlameGraphToolbar: FC<FlameGraphToolbarProps> = ({curPath, setNewCurPath}) => {
   return (
     <>
       <div className="flex w-full gap-2 items-end">
@@ -117,7 +117,7 @@ export const IcicleGraphToolbar: FC<IcicleGraphToolbarProps> = ({curPath, setNew
   );
 };
 
-export const SandwichIcicleGraphToolbar: FC<SandwichIcicleGraphToolbarProps> = ({
+export const SandwichFlameGraphToolbar: FC<SandwichFlameGraphToolbarProps> = ({
   resetSandwichFunctionName,
   sandwichFunctionName,
 }) => {
@@ -165,7 +165,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
 
   const isTableViz = dashboardItems?.includes('table');
   const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
-  const isGraphViz = dashboardItems?.includes('icicle');
+  const isGraphViz = dashboardItems?.includes('flamegraph');
   const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
 
   const req = profileSource?.QueryRequest();
@@ -178,7 +178,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   return (
     <>
       <div className="flex w-full justify-between items-end">
-        <div className="flex gap-3 items-end">
+        <div className="flex gap-2 items-end">
           {isGraphViz && (
             <>
               <GroupByDropdown
@@ -220,7 +220,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
       {isGraphVizOnly && (
         <>
           <Divider />
-          <IcicleGraphToolbar curPath={curPath} setNewCurPath={setNewCurPath} />
+          <FlameGraphToolbar curPath={curPath} setNewCurPath={setNewCurPath} />
         </>
       )}
       {isTableVizOnly && (

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

@@ -59,6 +59,7 @@ const Dropdown = ({
   disabled = false,
   icon,
   id,
+  optionsClassName = '',
 }: {
   items: DropdownItem[];
   selectedKey: string | undefined;
@@ -71,6 +72,7 @@ const Dropdown = ({
   disabled?: boolean;
   icon?: JSX.Element;
   id?: string;
+  optionsClassName?: string;
 }): JSX.Element => {
   const selection = items.find(v => v.key === selectedKey) ?? {
     key: selectedKey,
@@ -113,7 +115,12 @@ const Dropdown = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute w-[246px] right-0 z-50 mt-1 max-h-[50vh] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm">
+            <Listbox.Options
+              className={cx(
+                optionsClassName,
+                'absolute w-[246px] right-0 z-50 mt-1 max-h-[50vh] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm'
+              )}
+            >
               {loading === true ? (
                 <div className="w-[270px]">{loader}</div>
               ) : (

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

@@ -23,7 +23,7 @@ interface Props {
 }
 
 const ViewSelector = ({profileSource}: Props): JSX.Element => {
-  const [dashboardItems = ['icicle'], setDashboardItems] = useURLState<string[]>(
+  const [dashboardItems = ['flamegraph'], setDashboardItems] = useURLState<string[]>(
     'dashboard_items',
     {
       alwaysReturnArray: true,
@@ -39,21 +39,25 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
     supportingText?: string;
     disabledText?: string;
   }> = [
-    {key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
+    {
+      key: 'flamegraph',
+      label: 'Flame Graph',
+      canBeSelected: !dashboardItems.includes('flamegraph'),
+    },
     {key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table')},
     {
-      key: 'iciclechart',
+      key: 'flamechart',
       label: (
         <span className="relative">
-          Iciclechart
+          Flame Chart
           <span className="absolute top-[-2px] text-xs lowercase text-red-500">&nbsp;alpha</span>
         </span>
       ),
       canBeSelected:
-        !dashboardItems.includes('iciclechart') && profileSource?.ProfileType().delta === true,
+        !dashboardItems.includes('flamechart') && profileSource?.ProfileType().delta === true,
       disabledText:
-        !dashboardItems.includes('iciclechart') && profileSource?.ProfileType().delta !== true
-          ? 'Iciclechart is not available for non-delta profiles'
+        !dashboardItems.includes('flamechart') && profileSource?.ProfileType().delta !== true
+          ? 'Flamechart is not available for non-delta profiles'
           : undefined,
     },
   ];
@@ -169,6 +173,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
       onSelection={onSelection}
       placeholder={'Select view type...'}
       id="h-view-selector"
+      optionsClassName="min-w-[260px]"
     />
   );
 };

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

@@ -28,7 +28,7 @@ interface VisualizationContainerProps {
   isMultiPanelView: boolean;
   index: number;
   actionButtons: {
-    icicle: JSX.Element;
+    flame: JSX.Element;
     table: JSX.Element;
   };
 }

package/src/ProfileView/components/VisualizationPanel.tsx

@@ -30,7 +30,7 @@ interface Props {
   dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
   getDashboardItemByType: (props: {type: VisualizationType; isHalfScreen: boolean}) => JSX.Element;
   actionButtons: {
-    icicle: JSX.Element;
+    flame: JSX.Element;
     table: JSX.Element;
   };
 }
@@ -51,7 +51,7 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
         <div
           className={cx(
             'flex w-full justify-between flex-col-reverse md:flex-row',
-            isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'
+            isMultiPanelView && dashboardItem === 'flamegraph' ? 'items-end gap-x-2' : 'items-end'
           )}
         >
           <div className="flex items-center gap-2">
@@ -70,10 +70,10 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
           <div
             className={cx(
               'flex flex-row items-center gap-4',
-              isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'
+              isMultiPanelView && dashboardItem === 'flamegraph' && 'pb-[10px]'
             )}
           >
-            {dashboardItem === 'icicle' && flamegraphHint != null ? (
+            {dashboardItem === 'flamegraph' && flamegraphHint != null ? (
               <div className="px-2">{flamegraphHint}</div>
             ) : null}
           </div>

package/src/ProfileView/hooks/useProfileMetadata.ts

@@ -19,7 +19,7 @@ import {FlamegraphArrow} from '@parca/client';
 
 import useMappingList, {
   useFilenamesList,
-} from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+} from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 
 interface UseProfileMetadataProps {
   flamegraphArrow?: FlamegraphArrow;

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -21,8 +21,8 @@ import {
   FIELD_LABELS,
   FIELD_LOCATION_ADDRESS,
   FIELD_MAPPING_FILE,
-} from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import {CurrentPathFrame} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+} from '../../ProfileFlameGraph/FlameGraphArrow';
+import {CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 
 export const useVisualizationState = (): {
   curPath: string[];