@parca/profile 0.16.302 → 0.16.303

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.303 (2023-11-09)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.302](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.301...@parca/profile@0.16.302) (2023-11-07)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -15,6 +15,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { setHoveringNode, useAppDispatch } from '@parca/store';
 import { scaleLinear, selectQueryParam } from '@parca/utilities';
 import GraphTooltip from '../../GraphTooltip';
+import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
@@ -25,7 +26,7 @@ export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, w
     const ref = useRef(null);
     const coloredGraph = useColoredGraph(graph);
     const currentSearchString = selectQueryParam('search_string') ?? '';
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     useEffect(() => {
         if (ref.current != null) {

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -20,6 +20,7 @@ import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
+import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
@@ -53,7 +54,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const svg = useRef(null);
     const ref = useRef(null);
     const currentSearchString = selectQueryParam('search_string') ?? '';
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     const mappings = useMemo(() => {
         // Read the mappings from the dictionary that contains all mapping strings.

package/dist/ProfileIcicleGraph/index.js

@@ -16,7 +16,8 @@ import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button, Select, useParcaContext, useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { capitalizeOnlyFirstLetter, divide, selectQueryParam, } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './IcicleGraphArrow';
@@ -29,7 +30,7 @@ const ShowHideLegendButton = ({ navigateTo }) => {
         param: 'color_stack_legend',
         navigateTo,
     });
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = colorStackLegend === 'true';
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
     const setColorStackLegend = useCallback((value) => {
@@ -42,7 +43,7 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
         param: 'sort_by',
         navigateTo,
     });
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const [storeGroupBy = [FIELD_FUNCTION_NAME], setStoreGroupBy] = useURLState({
         param: 'group_by',
         navigateTo,
@@ -86,7 +87,7 @@ const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRun
 };
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }) {
     const { loader, onError, authenticationErrorMessage } = useParcaContext();
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
@@ -132,7 +133,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
+    return (_jsxs("div", { className: "relative", children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
 };
 const groupByOptions = [
     {

package/dist/ProfileView/ProfileViewContext.d.ts

@@ -3,6 +3,7 @@ import { ProfileSource } from '../ProfileSource';
 interface Props {
     profileSource?: ProfileSource;
     sampleUnit: string;
+    compareMode: boolean;
 }
 export declare const defaultValue: Props;
 declare const ProfileViewContext: import("react").Context<Props>;

package/dist/ProfileView/ProfileViewContext.js

@@ -15,6 +15,7 @@ import { createContext, useContext } from 'react';
 export const defaultValue = {
     profileSource: undefined,
     sampleUnit: 'bytes',
+    compareMode: false,
 };
 const ProfileViewContext = createContext(defaultValue);
 export const ProfileViewContextProvider = ({ children, value, }) => {

package/dist/ProfileView/index.d.ts

@@ -47,5 +47,5 @@ export interface ProfileViewProps {
     onDownloadPProf: () => void;
     pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -21,7 +21,7 @@ import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
 import { Button, ConditionalWrapper, KeyDownProvider, UserPreferences, useParcaContext, useURLState, } from '@parca/components';
 import { useContainerDimensions } from '@parca/hooks';
 import { selectDarkMode, useAppSelector } from '@parca/store';
-import { getNewSpanColor } from '@parca/utilities';
+import { getNewSpanColor, selectQueryParam } from '@parca/utilities';
 import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
@@ -39,7 +39,7 @@ function arrayEquals(a, b) {
         a.length === b.length &&
         a.every((val, index) => val === b[index]));
 }
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }) => {
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
     const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -171,9 +171,11 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     const profileSourceString = profileSource?.toString();
     const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
     const headerParts = profileSourceString?.split('"') ?? [];
-    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, sampleUnit }, children: [_jsxs("div", { className: cx('mb-4 flex w-full items-center', hasProfileSource ? 'justify-between' : 'justify-end'), children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
+    const compareMode = compare === true ||
+        (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
+    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, sampleUnit, compareMode }, children: [_jsxs("div", { className: cx('mb-4 flex w-full items-center', hasProfileSource ? 'justify-between' : 'justify-end'), children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
                                         ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                        : '' })] })), _jsxs("div", { className: "flex items-center md:justify-end gap-2 flex-wrap", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
+                                        : '' })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2 md:justify-end", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
                                         e.preventDefault();
                                         onDownloadPProf();
                                     }, disabled: pprofDownloading, children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 })] })] }), _jsx("div", { className: "w-full", ref: ref, children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {

package/dist/Table/index.js

@@ -17,6 +17,7 @@ import { Icon } from '@iconify/react';
 import { tableFromIPC } from 'apache-arrow';
 import { Button, Table as TableComponent, useURLState } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
 const FIELD_MAPPING_FILE = 'mapping_file';
 const FIELD_LOCATION_ADDRESS = 'location_address';
@@ -30,9 +31,8 @@ const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
 export const Table = React.memo(function Table({ data, total, filtered, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
     const router = parseParams(window?.location.search);
     const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
-    const [rawcompareMode] = useURLState({ param: 'compare_a' });
     const [filterByFunctionInput] = useURLState({ param: 'filter_by_function' });
-    const compareMode = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+    const { compareMode } = useProfileViewContext();
     const dashboardItems = useMemo(() => {
         if (rawDashboardItems !== undefined) {
             return rawDashboardItems;

package/dist/TopTable/index.js

@@ -15,6 +15,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
 import { Button, Table, useURLState } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
 export const RowLabel = (meta) => {
     if (meta === undefined)
@@ -38,8 +39,7 @@ const addPlusSign = (num) => {
 export const TopTable = React.memo(function TopTable({ data: top, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
     const router = parseParams(window?.location.search);
     const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
-    const [rawcompareMode] = useURLState({ param: 'compare_a' });
-    const compareMode = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+    const { compareMode } = useProfileViewContext();
     const dashboardItems = useMemo(() => {
         if (rawDashboardItems !== undefined) {
             return rawDashboardItems;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.302",
+  "version": "0.16.303",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.98",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c21b3a846496d053c2a2dd8f0eda1930f4d8d26f"
+  "gitHead": "29c127ca96914f6c9402e5052824868dee8c350e"
 }

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -18,6 +18,7 @@ import {setHoveringNode, useAppDispatch} from '@parca/store';
 import {scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import GraphTooltip from '../../GraphTooltip';
+import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import {IcicleNode, RowHeight} from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
@@ -50,8 +51,7 @@ export const IcicleGraph = memo(function IcicleGraph({
 
   const coloredGraph = useColoredGraph(graph);
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
   useEffect(() => {

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -36,6 +36,7 @@ import {
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import {DockedGraphTooltip} from '../../GraphTooltipArrow/DockedGraphTooltip';
+import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
@@ -98,8 +99,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const ref = useRef<SVGGElement>(null);
 
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
   const mappings = useMemo(() => {

package/src/ProfileIcicleGraph/index.tsx

@@ -19,13 +19,9 @@ import {Icon} from '@iconify/react';
 import {Flamegraph, FlamegraphArrow} from '@parca/client';
 import {Button, Select, useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {
-  capitalizeOnlyFirstLetter,
-  divide,
-  selectQueryParam,
-  type NavigateFunction,
-} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter, divide, type NavigateFunction} from '@parca/utilities';
 
+import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, {
@@ -67,8 +63,7 @@ const ShowHideLegendButton = ({navigateTo}: {navigateTo?: NavigateFunction}): JS
     navigateTo,
   });
 
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const isColorStackLegendEnabled = colorStackLegend === 'true';
 
@@ -104,8 +99,7 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
     param: 'sort_by',
     navigateTo,
   });
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const [storeGroupBy = [FIELD_FUNCTION_NAME], setStoreGroupBy] = useURLState({
     param: 'group_by',
@@ -298,8 +292,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   width,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {loader, onError, authenticationErrorMessage} = useParcaContext();
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
     param: 'sort_by',
@@ -383,7 +376,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
 
   return (
     <div className="relative">
-      {compareMode && <DiffLegend />}
+      {compareMode ? <DiffLegend /> : null}
       <div className="min-h-48">
         {graph !== undefined && (
           <IcicleGraph

package/src/ProfileView/ProfileViewContext.tsx

@@ -18,11 +18,13 @@ import {ProfileSource} from '../ProfileSource';
 interface Props {
   profileSource?: ProfileSource;
   sampleUnit: string;
+  compareMode: boolean;
 }
 
 export const defaultValue: Props = {
   profileSource: undefined,
   sampleUnit: 'bytes',
+  compareMode: false,
 };
 
 const ProfileViewContext = createContext<Props>(defaultValue);

package/src/ProfileView/index.tsx

@@ -44,7 +44,7 @@ import {
 } from '@parca/components';
 import {useContainerDimensions} from '@parca/hooks';
 import {selectDarkMode, useAppSelector} from '@parca/store';
-import {getNewSpanColor} from '@parca/utilities';
+import {getNewSpanColor, selectQueryParam} from '@parca/utilities';
 
 import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
@@ -131,6 +131,7 @@ export const ProfileView = ({
   navigateTo,
   onDownloadPProf,
   pprofDownloading,
+  compare,
 }: ProfileViewProps): JSX.Element => {
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
@@ -352,9 +353,13 @@ export const ProfileView = ({
   const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
   const headerParts = profileSourceString?.split('"') ?? [];
 
+  const compareMode =
+    compare === true ||
+    (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
+
   return (
     <KeyDownProvider>
-      <ProfileViewContextProvider value={{profileSource, sampleUnit}}>
+      <ProfileViewContextProvider value={{profileSource, sampleUnit, compareMode}}>
         <div
           className={cx(
             'mb-4 flex w-full items-center',
@@ -374,7 +379,7 @@ export const ProfileView = ({
             </div>
           )}
 
-          <div className="flex items-center md:justify-end gap-2 flex-wrap">
+          <div className="flex flex-wrap items-center gap-2 md:justify-end">
             <FilterByFunctionButton navigateTo={navigateTo} />
             <UserPreferences
               customButton={

package/src/Table/index.tsx

@@ -27,6 +27,7 @@ import {
   type NavigateFunction,
 } from '@parca/utilities';
 
+import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
 
 const FIELD_MAPPING_FILE = 'mapping_file';
@@ -84,10 +85,9 @@ export const Table = React.memo(function Table({
 }: TableProps): React.JSX.Element {
   const router = parseParams(window?.location.search);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-  const [rawcompareMode] = useURLState({param: 'compare_a'});
   const [filterByFunctionInput] = useURLState({param: 'filter_by_function'});
 
-  const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const dashboardItems = useMemo(() => {
     if (rawDashboardItems !== undefined) {

package/src/TopTable/index.tsx

@@ -25,6 +25,7 @@ import {
   type NavigateFunction,
 } from '@parca/utilities';
 
+import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
 
 interface TopTableProps {
@@ -72,9 +73,8 @@ export const TopTable = React.memo(function TopTable({
 }: TopTableProps): JSX.Element {
   const router = parseParams(window?.location.search);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-  const [rawcompareMode] = useURLState({param: 'compare_a'});
 
-  const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const dashboardItems = useMemo(() => {
     if (rawDashboardItems !== undefined) {