@parca/profile 0.19.73 → 0.19.75

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -12,14 +12,15 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import cx from 'classnames';
+import { useURLStateBatch } from '@parca/components';
 import { Query } from '@parca/parser';
-import { MergedProfileSelection } from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
 import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
 import { useResetStateOnSeriesChange } from '../ProfileView/hooks/useResetStateOnSeriesChange';
-export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, onUtilizationSeriesSelect, }) {
+export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, setProfileSelection, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, onUtilizationSeriesSelect, }) {
     const resetStateOnSeriesChange = useResetStateOnSeriesChange();
+    const batchUpdates = useURLStateBatch();
     const handleTimeRangeChange = (range) => {
         const from = range.getFromMs();
         const to = range.getToMs();
@@ -62,7 +63,8 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         }
         if (hasChanged) {
             // TODO: Change this to store the query object
-            setNewQueryExpression(newQuery.toString());
+            // Pass commit: true to immediately apply the filter when clicking on metrics graph labels
+            setNewQueryExpression(newQuery.toString(), true);
         }
     };
     const handlePointClick = (timestamp, labels, queryExpression, duration) => {
@@ -75,8 +77,10 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         });
         const mergeFrom = timestamp;
         const mergeTo = query.profileType().delta ? mergeFrom + BigInt(duration) : mergeFrom;
-        resetStateOnSeriesChange(); // reset some state when a new series is selected
-        selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
+        batchUpdates(() => {
+            resetStateOnSeriesChange(); // reset some state when a new series is selected
+            setProfileSelection(mergeFrom, mergeTo, query);
+        });
     };
     const UtilizationGraphToShow = ({ utilizationMetrics, }) => {
         const throughputMetrics = utilizationMetrics.filter(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes' ||
@@ -99,7 +103,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
                         ?.data ?? [], receiveData: throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')
                         ?.data ?? [], addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, name: throughputMetrics[0].name, humanReadableName: throughputMetrics[0].humanReadableName, from: querySelection.from, to: querySelection.to, utilizationMetricsLoading: utilizationMetricsLoading, selectedSeries: undefined, onSeriesClick: onUtilizationSeriesSelect }))] }));
     };
-    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [setDisplayHideMetricsGraphButton != null ? (_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-[5]', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] })) : null, showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
+    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [setDisplayHideMetricsGraphButton != null ? (_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-[5]', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] })) : null, showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: (querySelection.expression !== '' || defaultSumByLoading) &&
                         querySelection.from !== undefined &&
                         querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (_jsx(UtilizationGraphToShow, { utilizationMetrics: utilizationMetrics })) : (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
 }

package/dist/ProfileSelector/index.d.ts

@@ -2,7 +2,6 @@ import { Dispatch, SetStateAction } from 'react';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
-import { ProfileSelection } from '..';
 export interface QuerySelection {
     expression: string;
     from: number;
@@ -40,16 +39,12 @@ export interface UtilizationLabels {
 }
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
     queryClient: QueryServiceClient;
-    querySelection: QuerySelection;
-    selectProfile: (source: ProfileSelection) => void;
-    selectQuery: (query: QuerySelection) => void;
     closeProfile: () => void;
     enforcedProfileName: string;
-    profileSelection: ProfileSelection | null;
     comparing: boolean;
     navigateTo: NavigateFunction;
     setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
-    suffix?: string;
+    suffix?: '_a' | '_b';
     utilizationMetrics?: Array<{
         name: string;
         humanReadableName: string;
@@ -65,6 +60,6 @@ export interface IProfileTypesResult {
     error?: RpcError;
 }
 export declare const useProfileTypes: (client: QueryServiceClient, start?: number, end?: number) => IProfileTypesResult;
-declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, onUtilizationSeriesSelect, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, closeProfile, enforcedProfileName, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, suffix, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, onUtilizationSeriesSelect, }: ProfileSelectorProps) => JSX.Element;
 export default ProfileSelector;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAoD,MAAM,OAAO,CAAC;AAElG,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAsB,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAW5F,OAAO,EAAyB,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAW/E,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE;QACR,MAAM,EAAE,KAAK,CAAC;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;SACf,CAAC,CAAC;KACJ,CAAC;IACF,OAAO,EAAE,KAAK,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,WAAW,EAAE,kBAAkB,CAAC;IAChC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,kBAAkB,EAAE,CAAC;KAC5B,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAC1B,QAAQ,kBAAkB,EAC1B,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,mBAsBF,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,6SAgBtB,oBAAoB,KAAG,GAAG,CAAC,OAwN7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DateTimeRange, IconButton, useGrpcMetadata, useParcaContext, useURLState, } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
 import { Query } from '@parca/parser';
@@ -20,8 +20,8 @@ import { millisToProtoTimestamp } from '@parca/utilities';
 import { useLabelNames } from '../MatchersInput/index';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
 import { UtilizationLabelsProvider } from '../contexts/UtilizationLabelsContext';
+import { useQueryState } from '../hooks/useQueryState';
 import useGrpcQuery from '../useGrpcQuery';
-import { useDefaultSumBy, useSumBySelection } from '../useSumBy';
 import { MetricsGraphSection } from './MetricsGraphSection';
 import { QueryControls } from './QueryControls';
 import { useAutoQuerySelector } from './useAutoQuerySelector';
@@ -45,36 +45,31 @@ export const useProfileTypes = (client, start, end) => {
     });
     return { loading: isLoading, data, error: error };
 };
-const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, onUtilizationSeriesSelect, }) => {
+const ProfileSelector = ({ queryClient, closeProfile, enforcedProfileName, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, suffix, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, onUtilizationSeriesSelect, }) => {
     const { heightStyle } = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
     const { viewComponent } = useParcaContext();
     const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
-    const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to));
-    const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
+    // Use the new useQueryState hook - reads directly from URL params
+    const { querySelection, draftSelection, setDraftExpression, setDraftTimeRange, setDraftSumBy, setDraftProfileName, setDraftMatchers, commitDraft, profileSelection, setProfileSelection, sumByLoading, } = useQueryState({ suffix });
+    // Use draft state for local state instead of committed state
+    const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(draftSelection.timeSelection, draftSelection.from, draftSelection.to));
+    const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
     const [advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser] = useState(queryBrowserMode === 'advanced');
+    // Handler to update draft when time range changes
+    const handleTimeRangeChange = useCallback((range) => {
+        setTimeRangeSelection(range);
+        setDraftTimeRange(range.getFromMs(), range.getToMs(), range.getRangeKey());
+    }, [setDraftTimeRange]);
     const profileType = useMemo(() => {
         return Query.parse(queryExpressionString).profileType();
     }, [queryExpressionString]);
-    const selectedProfileType = useMemo(() => {
-        return Query.parse(querySelection.expression).profileType();
-    }, [querySelection.expression]);
     const from = timeRangeSelection.getFromMs();
     const to = timeRangeSelection.getToMs();
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient, from, to);
-    const { loading: labelNamesLoading, result, refetch, } = useLabelNames(queryClient, profileType.toString(), from, to);
-    const { loading: selectedLabelNamesLoading, result: selectedLabelNamesResult } = useLabelNames(queryClient, selectedProfileType.toString(), from, to);
+    const { result, refetch } = useLabelNames(queryClient, profileType.toString(), from, to);
     const labels = useMemo(() => {
         return result.response?.labelNames === undefined ? [] : result.response.labelNames;
     }, [result]);
-    const selectedLabels = useMemo(() => {
-        return selectedLabelNamesResult.response?.labelNames === undefined
-            ? []
-            : selectedLabelNamesResult.response.labelNames;
-    }, [selectedLabelNamesResult]);
-    const [sumBySelection, setUserSumBySelection, { isLoading: sumBySelectionLoading }] = useSumBySelection(profileType, labelNamesLoading, labels, {
-        defaultValue: querySelection.sumBy,
-    });
-    const { defaultSumBy, isLoading: defaultSumByLoading } = useDefaultSumBy(selectedProfileType, selectedLabelNamesLoading, selectedLabels);
     useEffect(() => {
         if (enforcedProfileName !== '') {
             const [q, changed] = Query.parse(querySelection.expression).setProfileName(enforcedProfileName);
@@ -92,37 +87,36 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     };
     const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
     const selectedProfileName = query.profileName();
-    const setNewQueryExpression = (expr, updateTs = false) => {
-        const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
-        const delta = query.profileType().delta;
-        const from = timeRangeSelection.getFromMs(updateTs);
-        const to = timeRangeSelection.getToMs(updateTs);
-        const mergeParams = delta
-            ? {
-                mergeFrom: (BigInt(from) * 1000000n).toString(),
-                mergeTo: (BigInt(to) * 1000000n).toString(),
-            }
-            : {};
-        selectQuery({
-            expression: expr,
-            from,
-            to,
-            timeSelection: timeRangeSelection.getRangeKey(),
-            sumBy: sumBySelection,
-            ...mergeParams,
-        });
-    };
     const setQueryExpression = (updateTs = false) => {
-        setNewQueryExpression(query.toString(), updateTs);
+        // When updateTs is true, re-evaluate the time range to current values
+        if (updateTs) {
+            // Force re-evaluation of time range (important for relative ranges like "last 15 minutes")
+            const currentFrom = timeRangeSelection.getFromMs(true);
+            const currentTo = timeRangeSelection.getToMs(true);
+            const currentRangeKey = timeRangeSelection.getRangeKey();
+            // Commit with refreshed time range
+            commitDraft({
+                from: currentFrom,
+                to: currentTo,
+                timeSelection: currentRangeKey,
+            });
+        }
+        else {
+            // Commit the draft with existing values
+            commitDraft();
+        }
     };
     const setMatchersString = (matchers) => {
-        const newExpressionString = `${selectedProfileName}{${matchers}}`;
-        setQueryExpressionString(newExpressionString);
+        // Update draft state only
+        setDraftMatchers(matchers);
+        setQueryExpressionString(`${selectedProfileName}{${matchers}}`);
     };
     const setProfileName = (profileName) => {
         if (profileName === undefined) {
             return;
         }
+        // Update draft state only
+        setDraftProfileName(profileName);
         const [newQuery, changed] = query.setProfileName(profileName);
         if (changed) {
             const q = newQuery.toString();
@@ -139,17 +133,17 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         profileTypesData,
         setProfileName,
         setQueryExpression,
-        querySelection: { ...querySelection, sumBy: sumBySelection },
+        querySelection,
         navigateTo,
-        loading: sumBySelectionLoading,
+        loading: sumByLoading,
     });
     const searchDisabled = queryExpressionString === undefined ||
         queryExpressionString === '' ||
         queryExpressionString === '{}';
     const queryBrowserRef = useRef(null);
     const sumByRef = useRef(null);
-    return (_jsx(UtilizationLabelsProvider, { value: { ...utilizationLabels }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, disableExplorativeQuerying: disableExplorativeQuerying, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: setTimeRangeSelection, searchDisabled: searchDisabled, queryBrowserMode: queryBrowserMode, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: sumBySelection ?? [], sumBySelectionLoading: sumBySelectionLoading, setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error, viewComponent: viewComponent, refreshLabelNames: refetch }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}), ...testId(TEST_IDS.COMPARE_CLOSE_BUTTON) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: utilizationMetrics !== undefined && utilizationMetrics?.length > 0
+    return (_jsx(UtilizationLabelsProvider, { value: { ...utilizationLabels }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, disableExplorativeQuerying: disableExplorativeQuerying, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: handleTimeRangeChange, searchDisabled: searchDisabled, queryBrowserMode: queryBrowserMode, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: draftSelection.sumBy ?? [], sumBySelectionLoading: sumByLoading, setUserSumBySelection: setDraftSumBy, profileType: profileType, profileTypesError: error, viewComponent: viewComponent, refreshLabelNames: refetch }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}), ...testId(TEST_IDS.COMPARE_CLOSE_BUTTON) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: utilizationMetrics !== undefined && utilizationMetrics?.length > 0
                         ? 'auto'
-                        : heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], defaultSumByLoading: defaultSumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: setTimeRangeSelection, selectQuery: selectQuery, selectProfile: selectProfile, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setNewQueryExpression, utilizationMetrics: utilizationMetrics, utilizationMetricsLoading: utilizationMetricsLoading, onUtilizationSeriesSelect: onUtilizationSeriesSelect })] }) }));
+                        : heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? [], defaultSumByLoading: sumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: handleTimeRangeChange, selectQuery: commitDraft, setProfileSelection: setProfileSelection, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setDraftExpression, utilizationMetrics: utilizationMetrics, utilizationMetricsLoading: utilizationMetricsLoading, onUtilizationSeriesSelect: onUtilizationSeriesSelect })] }) }));
 };
 export default ProfileSelector;

package/dist/ProfileSelector/useAutoQuerySelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoQuerySelector.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/useAutoQuerySelector.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAGlD,UAAU,KAAK;IACb,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACnD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,GAAI,qHAQlC,KAAK,KAAG,IAsIV,CAAC"}
+{"version":3,"file":"useAutoQuerySelector.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/useAutoQuerySelector.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAGlD,UAAU,KAAK;IACb,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACnD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,GAAI,qHAQlC,KAAK,KAAG,IAwJV,CAAC"}

package/dist/ProfileSelector/useAutoQuerySelector.js

@@ -10,7 +10,7 @@
 // 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 } from 'react';
+import { useEffect, useRef } from 'react';
 import { selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector } from '@parca/store';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { constructProfileName } from '../ProfileTypeSelector';
@@ -18,13 +18,27 @@ export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, se
     const autoQuery = useAppSelector(selectAutoQuery);
     const dispatch = useAppDispatch();
     const queryParams = new URLSearchParams(location.search);
-    const comparing = queryParams.get('comparing') === 'true';
+    const compareA = queryParams.get('compare_a');
+    const compareB = queryParams.get('compare_b');
+    const comparing = compareA === 'true' || compareB === 'true';
     const expressionA = queryParams.get('expression_a');
+    const expressionB = queryParams.get('expression_b');
+    // Track if we've already set up compare mode to prevent infinite loops
+    const hasSetupCompareMode = useRef(false);
     useEffect(() => {
         if (loading) {
             return;
         }
-        if (comparing && expressionA !== null && expressionA !== undefined) {
+        // Only run this effect if:
+        // 1. We're in compare mode
+        // 2. expressionA exists
+        // 3. expressionB doesn't exist yet (meaning we need to set it up)
+        // 4. We haven't already set it up in this session
+        if (comparing &&
+            expressionA !== null &&
+            expressionA !== undefined &&
+            expressionB === null &&
+            !hasSetupCompareMode.current) {
             if (querySelection.expression === undefined) {
                 return;
             }
@@ -59,13 +73,14 @@ export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, se
                     ...compareQuery,
                 };
             }
+            hasSetupCompareMode.current = true;
             void navigateTo('/', {
                 ...compareQuery,
                 search_string: '',
                 dashboard_items: ['flamegraph'],
             });
         }
-    }, [comparing, querySelection, navigateTo, expressionA, dispatch, loading]);
+    }, [comparing, querySelection, navigateTo, expressionA, expressionB, dispatch, loading]);
     // Effect to load some initial data on load when is no selection
     useEffect(() => {
         void (async () => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileTypeSelector/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAG7D,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAiB;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAiF/B,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAU3F;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,8BAA8B,EAAE,OAAO,GACtC,aAAa,CAiBf;AAED,eAAO,MAAM,oBAAoB,GAAI,MAAM,WAAW,KAAG,MAIxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,OAAO,WAAW,EAAE,KAAG,MAAM,EAItE,CAAC;AAEF,UAAU,KAAK;IACb,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,GAAI,2GAQ1B,KAAK,KAAG,GAAG,CAAC,OA0Bd,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileTypeSelector/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAG7D,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAiB;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAiF/B,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAU3F;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,8BAA8B,EAAE,OAAO,GACtC,aAAa,CAiBf;AAED,eAAO,MAAM,oBAAoB,GAAI,MAAM,WAAW,KAAG,MAIxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,OAAO,WAAW,EAAE,KAAG,MAAM,EAItE,CAAC;AAEF,UAAU,KAAK;IACb,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,GAAI,2GAQ1B,KAAK,KAAG,GAAG,CAAC,OA4Bd,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileTypeSelector/index.js

@@ -135,7 +135,7 @@ const ProfileTypeSelector = ({ profileTypesData, loading = false, error, selecte
             ? normalizeProfileTypesData(profileTypesData.types)
             : [];
     }, [profileTypesData, error]);
-    const profileLabels = profileNames.map(name => ({
+    const profileLabels = (profileNames.length > 0 ? profileNames : selectedKey != null ? [selectedKey] : []).map(name => ({
         key: name,
         element: profileSelectElement(name, flexibleKnownProfilesDetection),
     }));

package/dist/ProfileView/components/ProfileFilters/filterPresets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filterPresets.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/filterPresets.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1C,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,EAkEvC,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,OAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAE3D,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,cAAc,MAAM,KAAG,YAAY,EAO3E,CAAC"}
+{"version":3,"file":"filterPresets.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/filterPresets.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1C,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,EA6IvC,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,OAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAE3D,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,cAAc,MAAM,KAAG,YAAY,EAO3E,CAAC"}

package/dist/ProfileView/components/ProfileFilters/filterPresets.js

@@ -76,6 +76,81 @@ export const filterPresets = [
             },
         ],
     },
+    {
+        key: 'hide_cuda_internals',
+        name: 'Hide CUDA Internals',
+        description: 'Excludes CUDA and NVIDIA GPU driver internal functions from the profile',
+        filters: [
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'libcudnn_engines_precompiled.so',
+            },
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'libcupti.so',
+            },
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'libparcgpcupti.so',
+            },
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'libcudart.so',
+            },
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'libcuda.so',
+            },
+        ],
+    },
+    {
+        key: 'hide_python_internals',
+        name: 'Hide Python Internals',
+        description: 'Excludes Python interpreter internal functions from the profile',
+        filters: [
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'python3',
+            },
+            {
+                type: 'frame',
+                field: 'function_name',
+                matchType: 'not_equal',
+                value: '<interpreter trampoline>',
+            },
+            {
+                type: 'frame',
+                field: 'function_name',
+                matchType: 'not_equal',
+                value: '<module>',
+            },
+        ],
+    },
+    {
+        key: 'hide_libc',
+        name: 'Hide libc',
+        description: 'Excludes C standard library functions from the profile',
+        filters: [
+            {
+                type: 'frame',
+                field: 'binary',
+                matchType: 'not_contains',
+                value: 'libc.so',
+            },
+        ],
+    },
 ];
 const presetKeys = new Set(filterPresets.map(preset => preset.key));
 export const isPresetKey = (key) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,mBAAiB,KAAK,KAAG,GAAG,CAAC,OA0JlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,mBAAiB,KAAK,KAAG,GAAG,CAAC,OA+JlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
 import Dropdown from './Dropdown';
 const ViewSelector = ({ profileSource }) => {
     const [dashboardItems = ['flamegraph'], setDashboardItems] = useURLState('dashboard_items', {
@@ -7,6 +7,7 @@ const ViewSelector = ({ profileSource }) => {
     });
     const [, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const { enableSourcesView, enableSandwichView } = useParcaContext();
+    const batchUpdates = useURLStateBatch();
     const allItems = [
         {
             key: 'flamegraph',
@@ -60,10 +61,15 @@ const ViewSelector = ({ profileSource }) => {
                 }
                 else {
                     const newDashboardItems = dashboardItems.filter(v => v !== item.key);
-                    setDashboardItems(newDashboardItems);
-                    // Reset sandwich function name when removing sandwich panel
+                    // Batch updates when removing sandwich panel to combine both URL changes
                     if (item.key === 'sandwich') {
-                        setSandwichFunctionName(undefined);
+                        batchUpdates(() => {
+                            setDashboardItems(newDashboardItems);
+                            setSandwichFunctionName(undefined);
+                        });
+                    }
+                    else {
+                        setDashboardItems(newDashboardItems);
                     }
                 }
             },

package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResetStateOnProfileTypeChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gCAAgC,QAAO,CAAC,MAAM,IAAI,CAqB9D,CAAC"}
+{"version":3,"file":"useResetStateOnProfileTypeChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gCAAgC,QAAO,CAAC,MAAM,IAAI,CAuB9D,CAAC"}

package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.js

@@ -10,15 +10,17 @@
 // 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 { useURLState } from '@parca/components';
+import { useURLState, useURLStateBatch } from '@parca/components';
 import { useProfileFilters } from '../components/ProfileFilters/useProfileFilters';
 export const useResetStateOnProfileTypeChange = () => {
     const [groupBy, setGroupBy] = useURLState('group_by');
     const [curPath, setCurPath] = useURLState('cur_path');
     const { resetFilters } = useProfileFilters();
     const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const batchUpdates = useURLStateBatch();
     return () => {
-        setTimeout(() => {
+        // Batch all URL state resets into a single navigation
+        batchUpdates(() => {
             if (groupBy !== undefined) {
                 setGroupBy(undefined);
             }

package/dist/ProfileView/hooks/useVisualizationState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAyBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAG/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CA0G/C,CAAC"}
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAG/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAiH/C,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useCallback, useMemo } from 'react';
-import { JSONParser, JSONSerializer, useURLState, useURLStateCustom } from '@parca/components';
+import { JSONParser, JSONSerializer, useURLState, useURLStateBatch, useURLStateCustom, } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../ProfileFlameGraph/FlameGraphArrow';
 import { useResetFlameGraphState } from './useResetFlameGraphState';
@@ -36,6 +36,7 @@ export const useVisualizationState = () => {
     });
     const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const resetFlameGraphState = useResetFlameGraphState();
+    const batchUpdates = useURLStateBatch();
     const levelsOfProfiling = useMemo(() => [
         FIELD_FUNCTION_NAME,
         FIELD_FUNCTION_FILE_NAME,
@@ -46,19 +47,25 @@ export const useVisualizationState = () => {
         setStoreGroupBy(keys);
     }, [setStoreGroupBy]);
     const toggleGroupBy = useCallback((key) => {
-        if (groupBy.includes(key)) {
-            setGroupBy(groupBy.filter(v => v !== key)); // remove
-        }
-        else {
-            const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
-            setGroupBy([...filteredGroupBy, key]); // add
-        }
-        resetFlameGraphState();
-    }, [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]);
+        // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
+        batchUpdates(() => {
+            if (groupBy.includes(key)) {
+                setGroupBy(groupBy.filter(v => v !== key)); // remove
+            }
+            else {
+                const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
+                setGroupBy([...filteredGroupBy, key]); // add
+            }
+            resetFlameGraphState();
+        });
+    }, [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState, batchUpdates]);
     const setGroupByLabels = useCallback((labels) => {
-        setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
-        resetFlameGraphState();
-    }, [groupBy, setGroupBy, resetFlameGraphState]);
+        // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
+        batchUpdates(() => {
+            setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+            resetFlameGraphState();
+        });
+    }, [groupBy, setGroupBy, resetFlameGraphState, batchUpdates]);
     const resetSandwichFunctionName = useCallback(() => {
         setSandwichFunctionName(undefined);
     }, [setSandwichFunctionName]);

package/dist/Table/MoreDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,GAAI,kBAAgB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA4DlF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,GAAI,kBAAgB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAgElF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Table/MoreDropdown.js

@@ -13,16 +13,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 import { Menu } from '@headlessui/react';
 import { Icon } from '@iconify/react';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
 const MoreDropdown = ({ functionName }) => {
     const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
     const { enableSandwichView } = useParcaContext();
+    const batchUpdates = useURLStateBatch();
     const onSandwichViewSelect = () => {
-        setSandwichFunctionName(functionName.trim());
-        setDashboardItems([...dashboardItems, 'sandwich']);
+        // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
+        batchUpdates(() => {
+            setSandwichFunctionName(functionName.trim());
+            setDashboardItems([...dashboardItems, 'sandwich']);
+        });
     };
     const menuItems = [];
     if (enableSandwichView === true) {

package/dist/Table/TableContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,yCAAyC,CAAC;AAKjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAG3B,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,gBAAgB,GAAI,kEAOvB,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OA+LpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,yCAAyC,CAAC;AAKjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAG3B,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,gBAAgB,GAAI,kEAOvB,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAmMpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Table/TableContextMenu.js

@@ -15,7 +15,7 @@ import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { Item, Menu, Submenu } from 'react-contexify';
 import 'react-contexify/dist/ReactContexify.css';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
 import { valueFormatter } from '@parca/utilities';
 import { getTextForCumulative } from '../ProfileFlameGraph/FlameGraphArrow/utils';
 import { truncateString } from '../utils';
@@ -25,12 +25,16 @@ const TableContextMenu = ({ menuId, row, unit, total, totalUnfiltered, columnVis
         alwaysReturnArray: true,
     });
     const { enableSandwichView, isDarkMode } = useParcaContext();
+    const batchUpdates = useURLStateBatch();
     const onSandwichViewSelect = () => {
         if (row?.name != null && row.name.length > 0) {
-            setSandwichFunctionName(row.name.trim());
-            if (!dashboardItems.includes('sandwich')) {
-                setDashboardItems([...dashboardItems, 'sandwich']);
-            }
+            // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
+            batchUpdates(() => {
+                setSandwichFunctionName(row.name.trim());
+                if (!dashboardItems.includes('sandwich')) {
+                    setDashboardItems([...dashboardItems, 'sandwich']);
+                }
+            });
         }
     };
     const handleCopyItem = (text) => {