ui: fix filtering for flame chart visualization

ui/packages/shared/components/src/ParcaContext/index.tsx

@@ -100,6 +100,7 @@ interface Props {
   checkDebuginfoStatusHandler?: (buildId: string) => void;
   flamechartHelpText?: ReactNode;
   additionalMetricsGraph?: (props: AdditionalMetricsGraphProps) => ReactNode;
+  enableFlamechartFiltering?: boolean;
 }
 
 export const defaultValue: Props = {

ui/packages/shared/profile/src/ProfileFlameChart/index.tsx

@@ -14,13 +14,19 @@
 import {useEffect, useMemo, useRef} from 'react';
 
 import {LabelSet, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {useURLState, useURLStateCustom, type OptionsCustom} from '@parca/components';
+import {
+  useParcaContext,
+  useURLState,
+  useURLStateCustom,
+  type OptionsCustom,
+} from '@parca/components';
 import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser';
 import {TimeUnits, formatDate, formatDuration} from '@parca/utilities';
 
 import ProfileFlameGraph, {validateFlameChartQuery} from '../ProfileFlameGraph';
 import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/utils';
 import {MergedProfileSource, ProfileSource, timeFormat} from '../ProfileSource';
+import {useProfileFilters} from '../ProfileView/components/ProfileFilters/useProfileFilters';
 import type {SamplesData} from '../ProfileView/types/visualization';
 import {useQuery} from '../useQuery';
 import {NumberDuo} from '../utils';
@@ -119,6 +125,8 @@ export const ProfileFlameChart = ({
   metadataMappingFiles,
   metadataLoading,
 }: ProfileFlameChartProps): JSX.Element => {
+  const {enableFlamechartFiltering} = useParcaContext();
+  const {protoFilters} = useProfileFilters();
   const zoomControlsRef = useRef<HTMLDivElement>(null);
 
   const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom<
@@ -176,6 +184,7 @@ export const ProfileFlameChart = ({
     QueryRequest_ReportType.FLAMECHART,
     {
       skip: selectedTimeframe == null || filteredProfileSource == null,
+      ...(enableFlamechartFiltering === true ? {protoFilters} : {}),
     }
   );
 

ui/packages/shared/profile/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} from '@parca/components';
+import {Button, useParcaContext} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
@@ -165,6 +165,8 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   const isFlamechartViz = dashboardItems?.includes('flamechart');
   const isFlamechartVizOnly = dashboardItems?.length === 1 && isFlamechartViz;
 
+  const {enableFlamechartFiltering} = useParcaContext();
+
   const req = profileSource?.QueryRequest();
   if (req !== null && req !== undefined) {
     req.groupBy = {
@@ -202,7 +204,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
           )}
 
           <div className="flex mt-5">
-            {!isFlamechartVizOnly && <ProfileFilters />}
+            {(!isFlamechartVizOnly || enableFlamechartFiltering === true) && <ProfileFilters />}
 
             {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
           </div>