@parca/profile 0.19.135 → 0.19.137

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.19.137 (2026-03-17)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.136](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.135...@parca/profile@0.19.136) (2026-03-12)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.19.135 (2026-03-12)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileFlameChart/SamplesStrips/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAwKd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAyKd,CAAC"}

package/dist/ProfileFlameChart/SamplesStrips/index.js

@@ -148,7 +148,7 @@ export const SamplesStrip = ({ loading, cpus, data, selectedTimeframe, onSelecte
     return (_jsxs("div", { ref: containerRef, className: cx('flex flex-col gap-1 relative my-0', {
             'cursor-ew-resize': isDragging,
             'animate-pulse pointer-events-none': effectiveLoading,
-        }), style: { width: width ?? '100%' }, onMouseMove: effectiveLoading ? undefined : handleMouseMove, onMouseUp: effectiveLoading ? undefined : handleMouseUp, onMouseLeave: effectiveLoading ? undefined : handleMouseLeave, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(visibleItems.length, [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length), margin: 1 }), visibleItems.map((item, i) => {
+        }), style: { width: width ?? '100%' }, onMouseMove: effectiveLoading ? undefined : handleMouseMove, onMouseUp: effectiveLoading ? undefined : handleMouseUp, onMouseLeave: effectiveLoading ? undefined : handleMouseLeave, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(visibleItems.length, [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length), margin: 1, elevateGuideLines: true }), visibleItems.map((item, i) => {
                 const isCollapsed = collapsedLabels.has(item.label);
                 const isSelected = isEqual(item.cpu, selectedTimeframe?.labels);
                 return (_jsx(SamplesGraphContainer, { isSelected: isSelected, isCollapsed: isCollapsed, label: item.label, width: width, data: item.data, onToggleCollapse: () => {

package/dist/ProfileFlameChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAChF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+BD,eAAO,MAAM,iBAAiB,GAAI,wIAW/B,sBAAsB,KAAG,GAAG,CAAC,OAgL/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAOpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+BD,eAAO,MAAM,iBAAiB,GAAI,wIAW/B,sBAAsB,KAAG,GAAG,CAAC,OAmL/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameChart/index.js

@@ -13,12 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useMemo, useRef } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
-import { useURLState, useURLStateCustom } from '@parca/components';
+import { useParcaContext, useURLState, useURLStateCustom, } from '@parca/components';
 import { Matcher, MatcherTypes, Query } from '@parca/parser';
 import { TimeUnits, formatDate, formatDuration } from '@parca/utilities';
 import ProfileFlameGraph, { validateFlameChartQuery } from '../ProfileFlameGraph';
 import { boundsFromProfileSource } from '../ProfileFlameGraph/FlameGraphArrow/utils';
 import { MergedProfileSource, timeFormat } from '../ProfileSource';
+import { useProfileFilters } from '../ProfileView/components/ProfileFilters/useProfileFilters';
 import { useQuery } from '../useQuery';
 import { SamplesStrip } from './SamplesStrips';
 const TimeframeStateSerializer = {
@@ -71,6 +72,8 @@ const createFilteredProfileSource = (profileSource, selectedTimeframe) => {
     return new MergedProfileSource(mergeFrom, mergeTo, query);
 };
 export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, }) => {
+    const { enableFlamechartFiltering } = useParcaContext();
+    const { protoFilters } = useProfileFilters();
     const zoomControlsRef = useRef(null);
     const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom('flamechart_timeframe', TimeframeStateSerializer);
     // Read flamechart dimension from URL state to detect changes
@@ -113,6 +116,7 @@ export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, wid
     // 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,
+        ...(enableFlamechartFiltering === true ? { protoFilters } : {}),
     });
     const flamechartArrow = flamechartResponse?.report.oneofKind === 'flamegraphArrow'
         ? flamechartResponse.report.flamegraphArrow

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAQ9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAkH9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAQ9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAoH9D,CAAC"}

package/dist/ProfileView/components/Toolbars/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
-import { Button } from '@parca/components';
+import { Button, useParcaContext } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { useDashboard } from '../../context/DashboardContext';
 import GroupByDropdown from '../ActionButtons/GroupByDropdown';
@@ -28,11 +28,12 @@ export const VisualisationToolbar = ({ groupBy, toggleGroupBy, setGroupByLabels,
     const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
     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 = {
             fields: groupBy ?? [],
         };
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-start gap-2", children: [_jsxs("div", { className: "flex gap-2 items-start", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels, metadataRefetch: metadataRefetch, metadataLoading: metadataLoading }), _jsx(InvertCallStack, {})] })), isFlamechartViz && (_jsx(GroupByDropdown, { groupBy: flamechartDimension, labels: groupByLabels, setGroupByLabels: setFlamechartDimension, metadataRefetch: metadataRefetch, metadataLoading: metadataLoading, label: "Samples group by" })), _jsxs("div", { className: "flex mt-5", children: [!isFlamechartVizOnly && _jsx(ProfileFilters, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] })] }), _jsxs("div", { className: "flex gap-2 mt-5", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly, alignFunctionName: alignFunctionName, setAlignFunctionName: setAlignFunctionName, colorBy: colorBy, setColorBy: setColorBy }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(FlameGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-start gap-2", children: [_jsxs("div", { className: "flex gap-2 items-start", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels, metadataRefetch: metadataRefetch, metadataLoading: metadataLoading }), _jsx(InvertCallStack, {})] })), isFlamechartViz && (_jsx(GroupByDropdown, { groupBy: flamechartDimension, labels: groupByLabels, setGroupByLabels: setFlamechartDimension, metadataRefetch: metadataRefetch, metadataLoading: metadataLoading, label: "Samples group by" })), _jsxs("div", { className: "flex mt-5", children: [(!isFlamechartVizOnly || enableFlamechartFiltering === true) && _jsx(ProfileFilters, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] })] }), _jsxs("div", { className: "flex gap-2 mt-5", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly, alignFunctionName: alignFunctionName, setAlignFunctionName: setAlignFunctionName, colorBy: colorBy, setColorBy: setColorBy }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(FlameGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered })] }))] }));
 };

package/dist/TimelineGuide/index.d.ts

@@ -6,7 +6,8 @@ interface Props {
     bounds: BigIntDuo;
     ticks?: number;
     timeUnit?: string;
+    elevateGuideLines?: boolean;
 }
-export declare const TimelineGuide: ({ bounds, width, height, margin, ticks, timeUnit, }: Props) => JSX.Element;
+export declare const TimelineGuide: ({ bounds, width, height, margin, ticks, timeUnit, elevateGuideLines, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/TimelineGuide/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimelineGuide/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAEnC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAaD,eAAO,MAAM,aAAa,GAAI,qDAO3B,KAAK,KAAG,GAAG,CAAC,OA2Dd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimelineGuide/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAEnC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAaD,eAAO,MAAM,aAAa,GAAI,wEAQ3B,KAAK,KAAG,GAAG,CAAC,OA2Dd,CAAC"}

package/dist/TimelineGuide/index.js

@@ -22,9 +22,9 @@ const alignBeforeAxisCorrection = (val) => {
     }
     return 0;
 };
-export const TimelineGuide = ({ bounds, width, height, margin, ticks, timeUnit = 'milliseconds', }) => {
+export const TimelineGuide = ({ bounds, width, height, margin, ticks, timeUnit = 'milliseconds', elevateGuideLines = false, }) => {
     const xScale = scaleLinear(bounds, [0, width]);
-    return (_jsx("div", { className: "relative h-5 z-40", children: _jsx("div", { className: "pointer-events-none absolute", style: { width, height }, children: _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(ticks).map((d, i) => {
+    return (_jsx("div", { className: `relative h-5${elevateGuideLines ? ' z-40' : ''}`, children: _jsx("div", { className: "pointer-events-none absolute", style: { width, height }, children: _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(ticks).map((d, i) => {
                             return (_jsxs(Fragment, { children: [_jsx("g", { className: "tick", 
                                         /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
                                         transform: `translate(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: valueFormatter(d - bounds[0], timeUnit, 2, true).toString() }) }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.135",
+  "version": "0.19.137",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.20",
-    "@parca/components": "0.16.409",
+    "@parca/components": "0.16.410",
     "@parca/dynamicsize": "0.16.73",
     "@parca/hooks": "0.0.121",
     "@parca/icons": "0.16.80",
@@ -88,5 +88,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "01fde26497c4a5c467693d411ba63b9b74138871"
+  "gitHead": "9b98bd254e8f8c53bf0a57786acba9931d30ddc7"
 }

package/src/ProfileFlameChart/SamplesStrips/index.tsx

@@ -311,6 +311,7 @@ export const SamplesStrip = ({
           [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length
         )}
         margin={1}
+        elevateGuideLines
       />
       {visibleItems.map((item, i) => {
         const isCollapsed = collapsedLabels.has(item.label);

package/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} : {}),
     }
   );
 

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} 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>

package/src/TimelineGuide/index.tsx

@@ -24,6 +24,7 @@ interface Props {
   bounds: BigIntDuo;
   ticks?: number;
   timeUnit?: string;
+  elevateGuideLines?: boolean;
 }
 
 const alignBeforeAxisCorrection = (val: bigint): number => {
@@ -44,11 +45,12 @@ export const TimelineGuide = ({
   margin,
   ticks,
   timeUnit = 'milliseconds',
+  elevateGuideLines = false,
 }: Props): JSX.Element => {
   const xScale = scaleLinear(bounds, [0, width]);
 
   return (
-    <div className="relative h-5 z-40">
+    <div className={`relative h-5${elevateGuideLines ? ' z-40' : ''}`}>
       <div className="pointer-events-none absolute" style={{width, height}}>
         <svg style={{width: '100%', height: '100%'}}>
           <g