@parca/profile 0.19.113 → 0.19.115

package/src/ProfileFlameChart/index.tsx

@@ -0,0 +1,305 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useEffect, useMemo, useRef} from 'react';
+
+import {LabelSet, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
+import {
+  Button,
+  useParcaContext,
+  useURLState,
+  useURLStateCustom,
+  type OptionsCustom,
+} from '@parca/components';
+import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser';
+
+import ProfileFlameGraph, {validateFlameChartQuery} from '../ProfileFlameGraph';
+import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import {MergedProfileSource, ProfileSource} from '../ProfileSource';
+import type {SamplesData} from '../ProfileView/types/visualization';
+import {useQuery} from '../useQuery';
+import {NumberDuo} from '../utils';
+import {SamplesStrip} from './SamplesStrips';
+
+interface SelectedTimeframe {
+  labels: LabelSet;
+  bounds: NumberDuo;
+}
+
+const TimeframeStateSerializer: OptionsCustom<SelectedTimeframe | undefined> = {
+  parse: (value: string | string[] | undefined) => {
+    if (value == null || value === '' || value === 'undefined' || Array.isArray(value)) {
+      return undefined;
+    }
+    try {
+      const [labelPart, boundsPart] = value.split('|');
+      if (labelPart != null && boundsPart != null) {
+        const labels = labelPart.split(',').map(labelStr => {
+          const [name, ...rest] = labelStr.split(':');
+          return {name, value: rest.join(':')};
+        });
+        const [startMs, endMs] = boundsPart.split(',').map(Number);
+        if (labels.length > 0 && !isNaN(startMs) && !isNaN(endMs)) {
+          return {
+            labels: {labels},
+            bounds: [startMs, endMs] as NumberDuo,
+          };
+        }
+      }
+    } catch {
+      // Ignore parsing errors
+    }
+    return undefined;
+  },
+  stringify: (value: SelectedTimeframe | undefined) => {
+    if (value == null) {
+      return '';
+    }
+    const labelsStr = value.labels.labels.map(l => `${l.name}:${l.value}`).join(',');
+    return `${labelsStr}|${value.bounds[0]},${value.bounds[1]}`;
+  },
+};
+
+interface ProfileFlameChartProps {
+  samplesData?: SamplesData;
+  queryClient: QueryServiceClient;
+  profileSource: ProfileSource;
+  width: number;
+  total: bigint;
+  filtered: bigint;
+  profileType?: ProfileType;
+  isHalfScreen: boolean;
+  metadataMappingFiles?: string[];
+  metadataLoading?: boolean;
+  onSwitchToOneMinute?: () => void;
+}
+
+// Helper to create a filtered profile source with narrowed time bounds
+// and dimension label matchers from the selected strip.
+const createFilteredProfileSource = (
+  profileSource: ProfileSource,
+  selectedTimeframe: {labels: LabelSet; bounds: NumberDuo}
+): ProfileSource | null => {
+  if (!(profileSource instanceof MergedProfileSource)) {
+    return null;
+  }
+
+  // The bounds are in milliseconds, convert to nanoseconds for the profile source
+  // Round to integers since BigInt requires integer values
+  const mergeFrom = BigInt(Math.round(selectedTimeframe.bounds[0])) * 1_000_000n;
+  const mergeTo = BigInt(Math.round(selectedTimeframe.bounds[1])) * 1_000_000n;
+
+  // Add dimension labels as additional matchers to the query
+  const dimensionMatchers = selectedTimeframe.labels.labels.map(
+    l => new Matcher(l.name, MatcherTypes.MatchEqual, l.value)
+  );
+
+  const query = new Query(
+    profileSource.query.profType,
+    [...profileSource.query.matchers, ...dimensionMatchers],
+    ''
+  );
+
+  return new MergedProfileSource(mergeFrom, mergeTo, query);
+};
+
+export const ProfileFlameChart = ({
+  samplesData,
+  queryClient,
+  profileSource,
+  width,
+  total,
+  filtered,
+  profileType,
+  isHalfScreen,
+  metadataMappingFiles,
+  metadataLoading,
+  onSwitchToOneMinute,
+}: ProfileFlameChartProps): JSX.Element => {
+  const {loader} = useParcaContext();
+
+  const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom<
+    SelectedTimeframe | undefined
+  >('flamechart_timeframe', TimeframeStateSerializer);
+
+  // Read flamechart dimension from URL state to detect changes
+  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
+    alwaysReturnArray: true,
+  });
+
+  // Reset selection when the parent time range (profileSource) changes
+  const timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
+  const prevTimeBoundsKey = useRef(timeBoundsKey);
+  useEffect(() => {
+    if (prevTimeBoundsKey.current !== timeBoundsKey) {
+      prevTimeBoundsKey.current = timeBoundsKey;
+      setSelectedTimeframe(undefined);
+    }
+  }, [timeBoundsKey, setSelectedTimeframe]);
+
+  // Reset selection when the dimension changes
+  const dimensionKey = (flamechartDimension ?? []).join(',');
+  const prevDimensionKey = useRef(dimensionKey);
+  useEffect(() => {
+    if (prevDimensionKey.current !== dimensionKey) {
+      prevDimensionKey.current = dimensionKey;
+      setSelectedTimeframe(undefined);
+    }
+  }, [dimensionKey, setSelectedTimeframe]);
+
+  // Handle timeframe selection from strips
+  const handleSelectedTimeframe = (labels: LabelSet, bounds: NumberDuo | undefined): void => {
+    if (bounds === undefined) {
+      setSelectedTimeframe(undefined);
+    } else {
+      setSelectedTimeframe({labels, bounds});
+    }
+  };
+
+  // Create filtered profile source when selection exists
+  const filteredProfileSource = useMemo(() => {
+    if (selectedTimeframe == null) return null;
+    return createFilteredProfileSource(profileSource, selectedTimeframe);
+  }, [profileSource, selectedTimeframe]);
+
+  // Query flamechart data only when a strip selection exists
+  const {
+    isLoading: flamechartLoading,
+    response: flamechartResponse,
+    error: flamechartError,
+  } = useQuery(
+    queryClient,
+    filteredProfileSource ?? profileSource,
+    QueryRequest_ReportType.FLAMECHART,
+    {
+      skip: selectedTimeframe == null || filteredProfileSource == null,
+    }
+  );
+
+  const flamechartArrow =
+    flamechartResponse?.report.oneofKind === 'flamegraphArrow'
+      ? flamechartResponse.report.flamegraphArrow
+      : undefined;
+  const flamechartTotal = flamechartResponse != null ? BigInt(flamechartResponse.total) : total;
+  const flamechartFiltered =
+    flamechartResponse != null ? BigInt(flamechartResponse.filtered) : filtered;
+
+  // Get time bounds from profile source for the strips
+  const timeBounds = boundsFromProfileSource(profileSource);
+
+  // Transform samples data for SamplesStrip component
+  const stripsData = useMemo(() => {
+    if (samplesData?.series == null) return {cpus: [], data: [], stepMs: 0};
+
+    const cpus = samplesData.series.map(s => s.labelset);
+    const data = samplesData.series.map(s => s.data);
+
+    const stepMs = samplesData.stepMs ?? 0;
+
+    return {cpus, data, stepMs};
+  }, [samplesData?.series, samplesData?.stepMs]);
+
+  const {isValid, isNonDelta, isDurationTooLong} = validateFlameChartQuery(
+    profileSource as MergedProfileSource
+  );
+
+  if (!isValid) {
+    if (isDurationTooLong) {
+      return (
+        <div className="flex flex-col justify-center items-center p-10 text-center gap-4 text-sm">
+          <span>
+            Flame chart is unavailable for queries longer than one minute. Try reducing the time
+            range to one minute or selecting a point in the metrics graph.
+          </span>
+          {onSwitchToOneMinute != null && (
+            <Button variant="primary" onClick={onSwitchToOneMinute}>
+              Switch to last 1 minute
+            </Button>
+          )}
+        </div>
+      );
+    }
+
+    const message = isNonDelta
+      ? 'To use the Flame chart, please switch to a Delta profile.'
+      : 'Flame chart is unavailable for this query.';
+    return (
+      <div className="flex flex-col justify-center p-10 text-center gap-6 text-sm">{message}</div>
+    );
+  }
+
+  const hasDimension = (flamechartDimension ?? []).length > 0;
+
+  // Show loader while metadata labels are loading (needed for dimension auto-selection)
+  if (metadataLoading === true) {
+    return <>{loader}</>;
+  }
+
+  if (!hasDimension) {
+    return (
+      <div className="flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm">
+        Select a label in the &quot;Samples group by&quot; dropdown above to view the samples
+        strips.
+      </div>
+    );
+  }
+
+  if (samplesData?.loading === true) {
+    return <>{loader}</>;
+  }
+
+  return (
+    <div>
+      {/* Samples Strips - rendered above flamechart */}
+      {stripsData.cpus.length > 0 && stripsData.data.length > 0 && (
+        <div className="mb-2">
+          <SamplesStrip
+            cpus={stripsData.cpus}
+            data={stripsData.data}
+            selectedTimeframe={selectedTimeframe}
+            onSelectedTimeframe={handleSelectedTimeframe}
+            width={width}
+            bounds={[Number(timeBounds[0] / 1_000_000n), Number(timeBounds[1] / 1_000_000n)]}
+            stepMs={stripsData.stepMs}
+          />
+        </div>
+      )}
+
+      {/* Flamegraph visualization - only shown when a time range is selected in the strips */}
+      {selectedTimeframe != null && filteredProfileSource != null ? (
+        <ProfileFlameGraph
+          arrow={flamechartArrow}
+          loading={flamechartLoading}
+          error={flamechartError}
+          profileSource={filteredProfileSource}
+          width={width}
+          total={flamechartTotal}
+          filtered={flamechartFiltered}
+          profileType={profileType}
+          isHalfScreen={isHalfScreen}
+          metadataMappingFiles={metadataMappingFiles}
+          metadataLoading={metadataLoading}
+          isFlameChart={true}
+          curPathArrow={[]}
+          setNewCurPathArrow={() => {}}
+        />
+      ) : (
+        <div className="flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm">
+          Select a time range in the samples strips above to view the flamechart.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileFlameChart;

package/src/ProfileFlameGraph/index.tsx

@@ -77,7 +77,6 @@ export const validateFlameChartQuery = (
 ): {isValid: boolean; isNonDelta: boolean; isDurationTooLong: boolean} => {
   const isNonDelta = !profileSource.ProfileType().delta;
   const duration = profileSource.mergeTo - profileSource.mergeFrom;
-  console.log('duration of flame chart query: ', duration, 'ns');
   const isDurationTooLong = duration > 60_000_000_000n; // 60 seconds in nanoseconds
   return {isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong};
 };

package/src/ProfileMetricsGraph/hooks/useQueryRange.ts

@@ -11,20 +11,24 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo} from 'react';
-
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
 import {Duration, QueryRangeResponse, QueryServiceClient, Timestamp} from '@parca/client';
-import {useGrpcMetadata, useURLState} from '@parca/components';
-import {getStepDuration} from '@parca/utilities';
+import {useGrpcMetadata} from '@parca/components';
+import {getStepDuration, getStepDurationInMilliseconds} from '@parca/utilities';
 
 import useGrpcQuery from '../../useGrpcQuery';
 
+interface QueryRangeResult {
+  response: QueryRangeResponse;
+  stepDurationMs: number;
+}
+
 interface IQueryRangeState {
   response: QueryRangeResponse | null;
   isLoading: boolean;
   error: RpcError | null;
+  stepDurationMs: number;
 }
 
 export const getStepCountFromScreenWidth = (pixelsPerPoint: number): number => {
@@ -43,33 +47,16 @@ export const useQueryRange = (
   start: number,
   end: number,
   sumBy: string[],
+  stepCount: number,
   skip = false
 ): IQueryRangeState => {
   const metadata = useGrpcMetadata();
-  const [stepCountStr, setStepCount] = useURLState('step_count');
-
-  const defaultStepCount = useMemo(() => {
-    return getStepCountFromScreenWidth(10);
-  }, []);
-
-  const stepCount = useMemo(() => {
-    if (stepCountStr != null) {
-      return parseInt(stepCountStr as string, 10);
-    }
-
-    return defaultStepCount;
-  }, [stepCountStr, defaultStepCount]);
-
-  useEffect(() => {
-    if (stepCountStr == null) {
-      setStepCount(defaultStepCount.toString());
-    }
-  }, [stepCountStr, defaultStepCount, setStepCount]);
 
-  const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
+  const {data, isLoading, error} = useGrpcQuery<QueryRangeResult | undefined>({
     key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
     queryFn: async signal => {
       const stepDuration = getStepDuration(start, end, stepCount);
+      const stepDurationMs = getStepDurationInMilliseconds(stepDuration);
       const {response} = await client.queryRange(
         {
           query: queryExpression,
@@ -81,7 +68,7 @@ export const useQueryRange = (
         },
         {meta: metadata, abort: signal}
       );
-      return response;
+      return {response, stepDurationMs};
     },
     options: {
       retry: false,
@@ -90,5 +77,10 @@ export const useQueryRange = (
     },
   });
 
-  return {isLoading, error: error as RpcError | null, response: data ?? null};
+  return {
+    isLoading,
+    error: error as RpcError | null,
+    response: data?.response ?? null,
+    stepDurationMs: data?.stepDurationMs ?? 0,
+  };
 };

package/src/ProfileMetricsGraph/index.tsx

@@ -25,8 +25,11 @@ import {
 import {
   DateTimeRange,
   MetricsGraphSkeleton,
+  NumberParser,
+  NumberSerializer,
   TextWithTooltip,
   useParcaContext,
+  useURLStateCustom,
 } from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
@@ -35,7 +38,7 @@ import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph, {ContextMenuItemOrSubmenu, Series, SeriesPoint} from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
-import {useQueryRange} from './hooks/useQueryRange';
+import {getStepCountFromScreenWidth, useQueryRange} from './hooks/useQueryRange';
 
 const createProfileContextMenuItems = (
   addLabelMatcher: (
@@ -197,11 +200,30 @@ const ProfileMetricsGraph = ({
   comparing = false,
   sumBy,
 }: ProfileMetricsGraphProps): JSX.Element => {
+  const [rawStepCount] = useURLStateCustom<number>('step_count', {
+    defaultValue: String(getStepCountFromScreenWidth(10)),
+    parse: NumberParser,
+    stringify: NumberSerializer,
+  });
+  // Clamp step count so the step duration is at least 1 second as we don't have this enforced server-side anymore.
+  const stepCount = useMemo(() => {
+    const maxForOneSecond = Math.floor((to - from) / 1000);
+    return Math.min(rawStepCount, maxForOneSecond);
+  }, [rawStepCount, from, to]);
+
   const {
     isLoading: metricsGraphLoading,
     response,
     error,
-  } = useQueryRange(queryClient, queryExpression, from, to, sumBy, queryExpression === '');
+  } = useQueryRange(
+    queryClient,
+    queryExpression,
+    from,
+    to,
+    sumBy,
+    stepCount,
+    queryExpression === ''
+  );
   const {onError, perf, authenticationErrorMessage, isDarkMode, timezone} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(comparing);
   const [showAllSeriesForResponse, setShowAllSeriesForResponse] = useState<typeof response | null>(

package/src/ProfileSelector/index.tsx

@@ -153,6 +153,17 @@ const ProfileSelector = ({
     DateTimeRange.fromRangeKey(draftSelection.timeSelection, draftSelection.from, draftSelection.to)
   );
 
+  // Sync local timeRangeSelection when URL state changes externally (e.g., "Switch to 1 minute" button)
+  useEffect(() => {
+    setTimeRangeSelection(
+      DateTimeRange.fromRangeKey(
+        querySelection.timeSelection,
+        querySelection.from,
+        querySelection.to
+      )
+    );
+  }, [querySelection.timeSelection, querySelection.from, querySelection.to]);
+
   const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
 
   const [advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser] = useState(

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

@@ -21,6 +21,7 @@ interface GroupByControlsProps {
   setGroupByLabels: (labels: string[]) => void;
   metadataRefetch?: () => Promise<void>;
   metadataLoading: boolean;
+  label?: string;
 }
 
 const GroupByControls: React.FC<GroupByControlsProps> = ({
@@ -29,6 +30,7 @@ const GroupByControls: React.FC<GroupByControlsProps> = ({
   setGroupByLabels,
   metadataRefetch,
   metadataLoading,
+  label,
 }) => {
   return (
     <div className="relative flex" id="h-group-by-controls">
@@ -38,6 +40,7 @@ const GroupByControls: React.FC<GroupByControlsProps> = ({
         setGroupByLabels={setGroupByLabels}
         metadataRefetch={metadataRefetch}
         metadataLoading={metadataLoading}
+        label={label}
       />
     </div>
   );

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

@@ -16,6 +16,7 @@ import {Profiler, ProfilerOnRenderCallback} from 'react';
 import {QueryServiceClient} from '@parca/client';
 import {ConditionalWrapper} from '@parca/components';
 
+import ProfileFlameChart from '../../../ProfileFlameChart';
 import ProfileFlameGraph from '../../../ProfileFlameGraph';
 import {CurrentPathFrame} from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
@@ -24,6 +25,7 @@ import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
   FlamegraphData,
+  SamplesData,
   SandwichData,
   SourceData,
   TopTableData,
@@ -35,7 +37,7 @@ interface GetDashboardItemProps {
   isHalfScreen: boolean;
   dimensions: DOMRect | undefined;
   flamegraphData: FlamegraphData;
-  flamechartData: FlamegraphData;
+  samplesData?: SamplesData;
   topTableData?: TopTableData;
   sandwichData: SandwichData;
   sourceData?: SourceData;
@@ -47,7 +49,8 @@ interface GetDashboardItemProps {
   perf?: {
     onRender?: ProfilerOnRenderCallback;
   };
-  queryClient?: QueryServiceClient;
+  queryClient: QueryServiceClient;
+  onSwitchToOneMinute?: () => void;
 }
 
 export const getDashboardItem = ({
@@ -55,7 +58,7 @@ export const getDashboardItem = ({
   isHalfScreen,
   dimensions,
   flamegraphData,
-  flamechartData,
+  samplesData,
   topTableData,
   sourceData,
   sandwichData,
@@ -65,6 +68,8 @@ export const getDashboardItem = ({
   curPathArrow,
   setNewCurPathArrow,
   perf,
+  queryClient,
+  onSwitchToOneMinute,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'flamegraph':
@@ -102,16 +107,10 @@ export const getDashboardItem = ({
       );
     case 'flamechart':
       return (
-        <ProfileFlameGraph
-          curPathArrow={[]}
-          setNewCurPathArrow={() => {}}
-          arrow={flamechartData?.arrow}
-          total={total}
-          filtered={filtered}
-          profileType={profileSource?.ProfileType()}
-          loading={flamechartData.loading}
-          error={flamechartData.error}
-          isHalfScreen={isHalfScreen}
+        <ProfileFlameChart
+          samplesData={samplesData}
+          queryClient={queryClient}
+          profileSource={profileSource}
           width={
             dimensions?.width !== undefined
               ? isHalfScreen
@@ -119,10 +118,13 @@ export const getDashboardItem = ({
                 : dimensions.width - 16
               : 0
           }
-          metadataMappingFiles={flamechartData.metadataMappingFiles}
-          metadataLoading={flamechartData.metadataLoading}
-          profileSource={profileSource}
-          isFlameChart={true}
+          total={total}
+          filtered={filtered}
+          profileType={profileSource?.ProfileType()}
+          isHalfScreen={isHalfScreen}
+          metadataMappingFiles={flamegraphData.metadataMappingFiles}
+          metadataLoading={flamegraphData.metadataLoading}
+          onSwitchToOneMinute={onSwitchToOneMinute}
         />
       );
     case 'table':

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

@@ -27,6 +27,7 @@ interface Props {
   setGroupByLabels: (labels: string[]) => void;
   metadataRefetch?: () => Promise<void>;
   metadataLoading: boolean;
+  label?: string;
 }
 
 const GroupByLabelsDropdown = ({
@@ -35,12 +36,13 @@ const GroupByLabelsDropdown = ({
   setGroupByLabels,
   metadataRefetch,
   metadataLoading,
+  label = 'Group by',
 }: Props): JSX.Element => {
   return (
     <div className="flex flex-col relative" {...testId(TEST_IDS.GROUP_BY_CONTAINER)}>
       <div className="flex items-center justify-between">
         <label className="text-sm" {...testId(TEST_IDS.GROUP_BY_LABEL)}>
-          Group by
+          {label}
         </label>
       </div>
 
@@ -56,7 +58,7 @@ const GroupByLabelsDropdown = ({
         refreshTitle="Refresh label names"
         refreshTestId="group-by-refresh-button"
         menuTestId={TEST_IDS.GROUP_BY_SELECT_FLYOUT}
-        value={groupBy
+        value={(groupBy ?? [])
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}
         onChange={newValue => {

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

@@ -412,7 +412,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
               <Menu.Items
                 className={cx(
                   isTableVizOnly ? 'w-64' : 'w-80',
-                  'absolute z-30 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600',
+                  'absolute z-50 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600',
                   shouldOpenLeft ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
                 )}
               >

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

@@ -47,6 +47,8 @@ export interface VisualisationToolbarProps {
   preferencesModal?: boolean;
   profileViewExternalSubActions?: React.ReactNode;
   setGroupByLabels: (labels: string[]) => void;
+  flamechartDimension: string[];
+  setFlamechartDimension: (labels: string[]) => void;
   showVisualizationSelector?: boolean;
   sandwichFunctionName?: string;
   alignFunctionName: string;
@@ -135,6 +137,8 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   groupBy,
   toggleGroupBy,
   setGroupByLabels,
+  flamechartDimension,
+  setFlamechartDimension,
   profileType,
   profileSource,
   queryClient,
@@ -158,6 +162,8 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
   const isGraphViz = dashboardItems?.includes('flamegraph');
   const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
+  const isFlamechartViz = dashboardItems?.includes('flamechart');
+  const isFlamechartVizOnly = dashboardItems?.length === 1 && isFlamechartViz;
 
   const req = profileSource?.QueryRequest();
   if (req !== null && req !== undefined) {
@@ -184,8 +190,19 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
             </>
           )}
 
+          {isFlamechartViz && (
+            <GroupByDropdown
+              groupBy={flamechartDimension}
+              labels={groupByLabels}
+              setGroupByLabels={setFlamechartDimension}
+              metadataRefetch={metadataRefetch}
+              metadataLoading={metadataLoading}
+              label="Samples group by"
+            />
+          )}
+
           <div className="flex mt-5">
-            <ProfileFilters />
+            {!isFlamechartVizOnly && <ProfileFilters />}
 
             {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
           </div>