@parca/profile 0.19.155 → 0.19.157

package/dist/hooks/useColorBy.js

@@ -24,40 +24,49 @@ import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { stringParam } from './urlParsers';
 export var useColorBy = function useColorBy() {
   var _ref;
-  var $ = _c(6);
+  var $ = _c(7);
   var _useUserPreference = useUserPreference(USER_PREFERENCES.COLOR_BY.key),
     _useUserPreference2 = _slicedToArray(_useUserPreference, 2),
     colorByPreference = _useUserPreference2[0],
     setColorByPreference = _useUserPreference2[1];
-  var _useQueryState = useQueryState("color_by", stringParam),
+  var t0;
+  if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t0 = stringParam.withOptions({
+      history: "push"
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  var _useQueryState = useQueryState("color_by", t0),
     _useQueryState2 = _slicedToArray(_useQueryState, 2),
     colorByRaw = _useQueryState2[0],
     setRawColorBy = _useQueryState2[1];
   var colorBy = (_ref = colorByRaw !== null && colorByRaw !== void 0 ? colorByRaw : colorByPreference) !== null && _ref !== void 0 ? _ref : "binary";
-  var t0;
-  if ($[0] !== setColorByPreference || $[1] !== setRawColorBy) {
-    t0 = function t0(value) {
+  var t1;
+  if ($[1] !== setColorByPreference || $[2] !== setRawColorBy) {
+    t1 = function t1(value) {
       setRawColorBy(value);
       setColorByPreference(value);
     };
-    $[0] = setColorByPreference;
-    $[1] = setRawColorBy;
-    $[2] = t0;
+    $[1] = setColorByPreference;
+    $[2] = setRawColorBy;
+    $[3] = t1;
   } else {
-    t0 = $[2];
+    t1 = $[3];
   }
-  var setColorBy = t0;
-  var t1;
-  if ($[3] !== colorBy || $[4] !== setColorBy) {
-    t1 = {
+  var setColorBy = t1;
+  var t2;
+  if ($[4] !== colorBy || $[5] !== setColorBy) {
+    t2 = {
       colorBy: colorBy,
       setColorBy: setColorBy
     };
-    $[3] = colorBy;
-    $[4] = setColorBy;
-    $[5] = t1;
+    $[4] = colorBy;
+    $[5] = setColorBy;
+    $[6] = t2;
   } else {
-    t1 = $[5];
+    t2 = $[6];
   }
-  return t1;
+  return t2;
 };

package/dist/hooks/useQueryState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAM7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CACX,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,EACtE,UAAU,CAAC,EAAE,MAAM,KAChB,IAAI,CAAC;IAGV,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAE1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAsclE,CAAC"}
+{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAM7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CACX,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,EACtE,UAAU,CAAC,EAAE,MAAM,KAChB,IAAI,CAAC;IAGV,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAE1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAidlE,CAAC"}

package/dist/hooks/useQueryState.js

@@ -97,7 +97,9 @@ export var useQueryState = function useQueryState() {
       sum_by: val_0
     });
   }, [setQueryParams]);
-  var _useNuqsQueryState = useNuqsQueryState('group_by', commaArrayParam),
+  var _useNuqsQueryState = useNuqsQueryState('group_by', commaArrayParam.withOptions({
+      history: 'replace'
+    })),
     _useNuqsQueryState2 = _slicedToArray(_useNuqsQueryState, 2),
     setRawGroupByParam = _useNuqsQueryState2[1];
   var setGroupByParam = useCallback(function (val_1) {
@@ -296,7 +298,8 @@ export var useQueryState = function useQueryState() {
       }
     }
 
-    // Atomic URL update with all params at once
+    // Atomic URL update with all params at once. Push a history entry so the
+    // back button steps through profile/time selections (default is 'replace').
     void setQueryParams({
       expression: finalExpression,
       from: finalFrom,
@@ -306,6 +309,8 @@ export var useQueryState = function useQueryState() {
       merge_from: mergeFromValue,
       merge_to: mergeToValue,
       selection: selectionValue
+    }, {
+      history: 'push'
     });
     resetFlameGraphState();
     if (draftProfileType.toString() !== Query.parse(querySelection.expression).profileType().toString()) {
@@ -337,12 +342,15 @@ export var useQueryState = function useQueryState() {
     setDraftExpression(newExpression);
   }, [draftProfileName]);
 
-  // Set ProfileSelection (auto-commits to URL immediately)
+  // Set ProfileSelection (auto-commits to URL immediately). Push a history
+  // entry so selecting a sample is a back-navigable step (default is 'replace').
   var setProfileSelection = useCallback(function (mergeFrom_0, mergeTo_0, query_0) {
     void setQueryParams({
       selection: query_0.toString(),
       merge_from: mergeFrom_0.toString(),
       merge_to: mergeTo_0.toString()
+    }, {
+      history: 'push'
     });
   }, [setQueryParams]);
   var draftParsedQuery = useMemo(function () {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.155",
+  "version": "0.19.157",
   "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.24",
-    "@parca/components": "0.16.420",
+    "@parca/components": "0.16.421",
     "@parca/dynamicsize": "0.16.75",
     "@parca/hooks": "0.0.128",
     "@parca/icons": "0.16.83",
@@ -89,5 +89,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c16730288b7d5f5684ebebfd8f505c7d0fcb99b8"
+  "gitHead": "e84502e97f82660256ff814e12867002751930c6"
 }

package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts

@@ -105,11 +105,20 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
 
   const {dashboardItems, setDashboardItems} = useDashboardItems();
 
-  const [_unusedBuildId, setSourceBuildId] = useQueryState('source_buildid', stringParam);
+  const [_unusedBuildId, setSourceBuildId] = useQueryState(
+    'source_buildid',
+    stringParam.withOptions({history: 'push'})
+  );
 
-  const [_unusedFilename, setSourceFilename] = useQueryState('source_filename', stringParam);
+  const [_unusedFilename, setSourceFilename] = useQueryState(
+    'source_filename',
+    stringParam.withOptions({history: 'push'})
+  );
 
-  const [_unusedLine, setSourceLine] = useQueryState('source_line', stringParam);
+  const [_unusedLine, setSourceLine] = useQueryState(
+    'source_line',
+    stringParam.withOptions({history: 'push'})
+  );
 
   const openFile = (): void => {
     setDashboardItems([dashboardItems[0], 'source']);

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -89,7 +89,7 @@ const ContextMenu = ({
   const {dashboardItems, setDashboardItems} = useDashboardItems();
   const [_sandwichFunctionName, setSandwichFunctionName] = useQueryState(
     'sandwich_function_name',
-    stringParam
+    stringParam.withOptions({history: 'push'})
   );
 
   if (contextMenuData === null) {

package/src/ProfileSelector/index.tsx

@@ -113,7 +113,7 @@ const ProfileSelector = ({
   const {externalProfilerComponent, additionalMetricsGraph} = useParcaContext();
   const [queryBrowserMode, setRawQueryBrowserMode] = useNuqsQueryState(
     'query_browser_mode',
-    stringParam
+    stringParam.withOptions({history: 'replace'})
   );
   const setQueryBrowserMode = useCallback(
     (mode: string | null) => {

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

@@ -26,7 +26,7 @@ import {useProfileViewContext} from '../../context/ProfileViewContext';
 const SortByDropdown = (): React.JSX.Element => {
   const [storeSortBy, setStoreSortBy] = useQueryState(
     'sort_by',
-    stringParam.withDefault(FIELD_FUNCTION_NAME)
+    stringParam.withDefault(FIELD_FUNCTION_NAME).withOptions({history: 'push'})
   );
 
   const {compareMode} = useProfileViewContext();

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

@@ -21,7 +21,10 @@ import {invertCallStackParser} from '../../../hooks/urlParsers';
 import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
 
 const InvertCallStack = (): JSX.Element => {
-  const [isInvert, setInvertStack] = useQueryState('invert_call_stack', invertCallStackParser);
+  const [isInvert, setInvertStack] = useQueryState(
+    'invert_call_stack',
+    invertCallStackParser.withOptions({history: 'push'})
+  );
   const resetFlameGraphState = useResetFlameGraphState();
 
   const handleSetInvert = (value: boolean): void => {

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

@@ -213,11 +213,11 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   const [storeSortBy] = useQueryState('sort_by', stringParam.withDefault(FIELD_FUNCTION_NAME));
   const [colorStackLegend, setStoreColorStackLegend] = useQueryState(
     'color_stack_legend',
-    stringParam
+    stringParam.withOptions({history: 'push'})
   );
   const [hiddenBinaries, setHiddenBinaries] = useQueryState(
     'hidden_binaries',
-    hiddenBinariesParser
+    hiddenBinariesParser.withOptions({history: 'push'})
   );
   const {compareMode} = useProfileViewContext();
   const [colorProfileName] = useUserPreference<string>(
@@ -230,7 +230,10 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
   const compareAbsoluteDefault = profileType?.delta === false;
 
-  const [compareAbsolute, setCompareAbsolute] = useQueryState('compare_absolute', boolParam);
+  const [compareAbsolute, setCompareAbsolute] = useQueryState(
+    'compare_absolute',
+    boolParam.withOptions({history: 'push'})
+  );
   const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault;
 
   useEffect(() => {

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

@@ -33,7 +33,10 @@ interface Props {
 
 const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Element => {
   const {compareMode} = useProfileViewContext();
-  const [tableColumns, setTableColumns] = useQueryState('table_columns', tableColumnsParser);
+  const [tableColumns, setTableColumns] = useQueryState(
+    'table_columns',
+    tableColumnsParser.withOptions({history: 'push'})
+  );
 
   const columnHelper = createColumnHelper<Row>();
 

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

@@ -28,7 +28,10 @@ interface Props {
 
 const ViewSelector = ({profileSource}: Props): JSX.Element => {
   const {dashboardItems, setDashboardItems} = useDashboardItems();
-  const [, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [, setSandwichFunctionName] = useQueryState(
+    'sandwich_function_name',
+    stringParam.withOptions({history: 'replace'})
+  );
   const {enableSourcesView, enableSandwichView} = useParcaContext();
 
   const allItems: Array<{

package/src/ProfileView/context/DashboardContext.tsx

@@ -30,7 +30,10 @@ const DashboardContext = createContext<DashboardContextType | undefined>(undefin
 
 export const DashboardProvider: FC<PropsWithChildren> = ({children}) => {
   const {dashboardItems, setDashboardItems} = useDashboardItems();
-  const [, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [, setSandwichFunctionName] = useQueryState(
+    'sandwich_function_name',
+    stringParam.withOptions({history: 'replace'})
+  );
 
   const handleClosePanel = (visualizationType: VisualizationType): void => {
     const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);

package/src/ProfileView/hooks/useResetFlameGraphState.ts

@@ -16,7 +16,10 @@ import {useQueryState} from 'nuqs';
 import {stringParam} from '../../hooks/urlParsers';
 
 export const useResetFlameGraphState = (): (() => void) => {
-  const [val, setCurPath] = useQueryState('cur_path', stringParam);
+  const [val, setCurPath] = useQueryState(
+    'cur_path',
+    stringParam.withOptions({history: 'replace'})
+  );
 
   return () => {
     setTimeout(() => {

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -58,7 +58,7 @@ export const useVisualizationState = (): {
 
   const [curPathArrow, setRawCurPathArrow] = useQueryState(
     'cur_path',
-    jsonParser<CurrentPathFrame[]>().withDefault([])
+    jsonParser<CurrentPathFrame[]>().withDefault([]).withOptions({history: 'push'})
   );
   const setCurPathArrow = useCallback(
     (path: CurrentPathFrame[]) => {
@@ -70,16 +70,18 @@ export const useVisualizationState = (): {
   const {colorBy, setColorBy} = useColorBy();
   const [alignFunctionNameRaw, setStoreAlignFunctionName] = useQueryState(
     'align_function_name',
-    stringParam
+    stringParam.withOptions({history: 'push'})
   );
   const alignFunctionName = alignFunctionNameRaw ?? alignFunctionNamePreference ?? 'left';
   const [groupBy, setStoreGroupBy] = useQueryState(
     'group_by',
-    groupByParser.withDefault([FIELD_FUNCTION_NAME])
+    groupByParser.withDefault([FIELD_FUNCTION_NAME]).withOptions({history: 'push'})
   );
+  // Shared with resetSandwichFunctionName below, so keep the default 'replace';
+  // user "show in sandwich" actions push from the Table/flamegraph menus.
   const [sandwichFunctionName, setRawSandwichFunctionName] = useQueryState(
     'sandwich_function_name',
-    stringParam
+    stringParam.withOptions({history: 'replace'})
   );
   const setSandwichFunctionName = useCallback(
     (name: string | null) => {
@@ -89,7 +91,7 @@ export const useVisualizationState = (): {
   );
   const [flamechartDimension, setStoreFlamechartDimension] = useQueryState(
     'flamechart_dimension',
-    flamechartDimensionParser.withDefault([])
+    flamechartDimensionParser.withDefault([]).withOptions({history: 'push'})
   );
   const resetFlameGraphState = useResetFlameGraphState();
 

package/src/SourceView/useSelectedLineRange.ts

@@ -40,7 +40,7 @@ interface LineRange {
 const useLineRange = (): LineRange => {
   const [lineRange, setRawLineRange] = useQueryState(
     'source_line',
-    lineRangeParser.withDefault({start: -1, end: -1})
+    lineRangeParser.withDefault({start: -1, end: -1}).withOptions({history: 'push'})
   );
 
   const setLineRange = useCallback(

package/src/Table/MoreDropdown.tsx

@@ -21,7 +21,10 @@ import {stringParam} from '../hooks/urlParsers';
 import {useDashboardItems} from '../hooks/useDashboardItems';
 
 const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
-  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [_, setSandwichFunctionName] = useQueryState(
+    'sandwich_function_name',
+    stringParam.withOptions({history: 'push'})
+  );
   const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView} = useParcaContext();
 

package/src/Table/TableContextMenu.tsx

@@ -45,7 +45,10 @@ const TableContextMenu = ({
   totalUnfiltered,
   columnVisibility,
 }: TableContextMenuProps): React.JSX.Element => {
-  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [_, setSandwichFunctionName] = useQueryState(
+    'sandwich_function_name',
+    stringParam.withOptions({history: 'push'})
+  );
   const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView, isDarkMode} = useParcaContext();
 

package/src/Table/index.tsx

@@ -76,7 +76,10 @@ export const Table = React.memo(function Table({
 }: TableProps): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
   const {dashboardItems} = useDashboardItems();
-  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [_, setSandwichFunctionName] = useQueryState(
+    'sandwich_function_name',
+    stringParam.withOptions({history: 'push'})
+  );
   const {colorBy, setColorBy} = useColorBy();
   const {isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();

package/src/hooks/useColorBy.ts

@@ -26,7 +26,10 @@ export const useColorBy = (): {
   const [colorByPreference, setColorByPreference] = useUserPreference<string>(
     USER_PREFERENCES.COLOR_BY.key
   );
-  const [colorByRaw, setRawColorBy] = useQueryState('color_by', stringParam);
+  const [colorByRaw, setRawColorBy] = useQueryState(
+    'color_by',
+    stringParam.withOptions({history: 'push'})
+  );
 
   const colorBy = colorByRaw ?? colorByPreference ?? 'binary';
 

package/src/hooks/useQueryState.ts

@@ -139,7 +139,10 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     [setQueryParams]
   );
 
-  const [, setRawGroupByParam] = useNuqsQueryState('group_by', commaArrayParam);
+  const [, setRawGroupByParam] = useNuqsQueryState(
+    'group_by',
+    commaArrayParam.withOptions({history: 'replace'})
+  );
   const setGroupByParam = useCallback(
     (val: string[] | null) => {
       void setRawGroupByParam(val);
@@ -388,17 +391,21 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
         }
       }
 
-      // Atomic URL update with all params at once
-      void setQueryParams({
-        expression: finalExpression,
-        from: finalFrom,
-        to: finalTo,
-        time_selection: finalTimeSelection,
-        sum_by: sumByValue,
-        merge_from: mergeFromValue,
-        merge_to: mergeToValue,
-        selection: selectionValue,
-      });
+      // Atomic URL update with all params at once. Push a history entry so the
+      // back button steps through profile/time selections (default is 'replace').
+      void setQueryParams(
+        {
+          expression: finalExpression,
+          from: finalFrom,
+          to: finalTo,
+          time_selection: finalTimeSelection,
+          sum_by: sumByValue,
+          merge_from: mergeFromValue,
+          merge_to: mergeToValue,
+          selection: selectionValue,
+        },
+        {history: 'push'}
+      );
 
       resetFlameGraphState();
       if (
@@ -464,14 +471,18 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     [draftProfileName]
   );
 
-  // Set ProfileSelection (auto-commits to URL immediately)
+  // Set ProfileSelection (auto-commits to URL immediately). Push a history
+  // entry so selecting a sample is a back-navigable step (default is 'replace').
   const setProfileSelection = useCallback(
     (mergeFrom: bigint, mergeTo: bigint, query: Query) => {
-      void setQueryParams({
-        selection: query.toString(),
-        merge_from: mergeFrom.toString(),
-        merge_to: mergeTo.toString(),
-      });
+      void setQueryParams(
+        {
+          selection: query.toString(),
+          merge_from: mergeFrom.toString(),
+          merge_to: mergeTo.toString(),
+        },
+        {history: 'push'}
+      );
     },
     [setQueryParams]
   );