@parca/profile 0.16.389 → 0.16.391

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.391 (2024-06-24)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.390](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.389...@parca/profile@0.16.390) (2024-06-20)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.389 (2024-06-18)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -10,6 +10,6 @@ const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profile
     const closeProfileB = () => {
         closeProfile('B');
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, onCompareProfile: () => { } }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, onCompareProfile: () => { } }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
 };
 export default ProfileExplorerCompare;

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -9,8 +9,7 @@ interface ProfileExplorerSingleProps {
     selectQuery: (query: QuerySelection) => void;
     selectProfile: (source: ProfileSelection) => void;
     profile: ProfileSelection | null;
-    compareProfile: () => void;
     navigateTo: NavigateFunction;
 }
-declare const ProfileExplorerSingle: ({ queryClient, query, selectQuery, selectProfile, profile, compareProfile, navigateTo, }: ProfileExplorerSingleProps) => JSX.Element;
+declare const ProfileExplorerSingle: ({ queryClient, query, selectQuery, selectProfile, profile, navigateTo, }: ProfileExplorerSingleProps) => JSX.Element;
 export default ProfileExplorerSingle;

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Card } from '@parca/components';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
-const ProfileExplorerSingle = ({ queryClient, query, selectQuery, selectProfile, profile, compareProfile, navigateTo, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: () => { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }), profile != null ? (_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo }) })) : (_jsx(_Fragment, {}))] }));
+const ProfileExplorerSingle = ({ queryClient, query, selectQuery, selectProfile, profile, navigateTo, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: () => { }, profileSelection: profile, comparing: false, enforcedProfileName: '' }) }), profile != null ? (_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo }) })) : (_jsx(_Fragment, {}))] }));
 };
 export default ProfileExplorerSingle;

package/dist/ProfileExplorer/index.d.ts

@@ -6,5 +6,6 @@ interface ProfileExplorerProps {
     queryParams: any;
     navigateTo: NavigateFunction;
 }
+export declare const getExpressionAsAString: (expression: string | []) => string;
 declare const ProfileExplorer: ({ queryClient, queryParams, navigateTo, }: ProfileExplorerProps) => JSX.Element;
 export default ProfileExplorer;

package/dist/ProfileExplorer/index.js

@@ -23,7 +23,7 @@ import ProfileExplorerSingle from './ProfileExplorerSingle';
 const ErrorContent = ({ errorMessage }) => {
     return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
 };
-const getExpressionAsAString = (expression) => {
+export const getExpressionAsAString = (expression) => {
     const x = Array.isArray(expression) ? expression.join() : expression;
     return x;
 };
@@ -168,32 +168,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
             });
         };
-        const compareProfile = () => {
-            let compareQuery = {
-                compare_a: 'true',
-                expression_a: encodeURIComponent(queryA.expression),
-                from_a: queryA.from.toString(),
-                to_a: queryA.to.toString(),
-                time_selection_a: queryA.timeSelection,
-                compare_b: 'true',
-                expression_b: encodeURIComponent(queryA.expression),
-                from_b: queryA.from.toString(),
-                to_b: queryA.to.toString(),
-                time_selection_b: queryA.timeSelection,
-            };
-            if (profileA != null) {
-                compareQuery = {
-                    ...SuffixParams(profileA.HistoryParams(), '_a'),
-                    ...compareQuery,
-                };
-            }
-            void navigateTo('/', {
-                ...compareQuery,
-                search_string: '',
-                dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
-            });
-        };
-        return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: queryA, profile: profileA, selectQuery: selectQuery, selectProfile: selectProfile, compareProfile: compareProfile, navigateTo: navigateTo }));
+        return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: queryA, profile: profileA, selectQuery: selectQuery, selectProfile: selectProfile, navigateTo: navigateTo }));
     }
     const queryB = {
         expression: expression_b,

package/dist/ProfileSelector/index.d.ts

@@ -19,7 +19,6 @@ interface ProfileSelectorProps {
     enforcedProfileName: string;
     profileSelection: ProfileSelection | null;
     comparing: boolean;
-    onCompareProfile: () => void;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -27,5 +26,5 @@ export interface IProfileTypesResult {
     error?: RpcError;
 }
 export declare const useProfileTypes: (client: QueryServiceClient) => IProfileTypesResult;
-declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, onCompareProfile, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, }: ProfileSelectorProps) => JSX.Element;
 export default ProfileSelector;

package/dist/ProfileSelector/index.js

@@ -20,7 +20,6 @@ import MatchersInput from '../MatchersInput/index';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
 import ProfileTypeSelector from '../ProfileTypeSelector/index';
-import CompareButton from './CompareButton';
 import { useAutoQuerySelector } from './useAutoQuerySelector';
 export const useProfileTypes = (client) => {
     const [result, setResult] = useState(undefined);
@@ -39,7 +38,7 @@ export const useProfileTypes = (client) => {
     }, [client, metadata, loading]);
     return { loading, data: result, error };
 };
-const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, onCompareProfile, }) => {
+const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
@@ -138,16 +137,14 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         setProfileName,
         setQueryExpression,
     });
-    const handleCompareClick = () => onCompareProfile();
     const searchDisabled = queryExpressionString === undefined ||
         queryExpressionString === '' ||
         queryExpressionString === '{}';
-    const compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex gap-2", children: [_jsxs("div", { className: "flex w-full flex-wrap content-start items-center justify-between gap-2", children: [_jsxs("div", { className: "pb-6", children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error, disabled: viewComponent?.disableProfileTypesDropdown })] }), _jsxs("div", { className: "w-full flex-1 pb-6", children: [_jsxs("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: [_jsx("label", { className: "text-xs", children: "Query" }), (query.matchers.length > 0 || query.inputMatcherString.length > 0) &&
-                                                viewComponent !== undefined && _jsx("div", { children: viewComponent?.createViewComponent })] }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsx(_Fragment, { children: !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick })) })), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
-                                            e.preventDefault();
-                                            setQueryExpression(true);
-                                        }, id: "h-matcher-search-button", children: "Search" })] })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex gap-2", children: [_jsxs("div", { className: "flex w-full flex-wrap content-start items-center gap-2", children: [_jsxs("div", { className: "pb-6", children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error, disabled: viewComponent?.disableProfileTypesDropdown })] }), _jsxs("div", { className: "w-full flex-1 pb-6", children: [_jsxs("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: [_jsx("label", { className: "text-xs", children: "Query" }), (query.matchers.length > 0 || query.inputMatcherString.length > 0) &&
+                                                viewComponent !== undefined && _jsx("div", { children: viewComponent?.createViewComponent })] }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
+                                        e.preventDefault();
+                                        setQueryExpression(true);
+                                    }, id: "h-matcher-search-button", children: "Search" }) })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&
                         querySelection.expression.length > 0 &&
                         querySelection.from !== undefined &&
                         querySelection.to !== undefined ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, setTimeRange: (range) => {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { Props as CallgraphProps } from './Callgraph';
-import ProfileExplorer from './ProfileExplorer';
+import ProfileExplorer, { getExpressionAsAString } from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 export * from './ProfileIcicleGraph/IcicleGraph';
 export * from './ProfileIcicleGraph';
@@ -11,4 +11,4 @@ export * from './ProfileTypeSelector';
 export * from './SourceView';
 export { default as Callgraph } from './Callgraph';
 export type { CallgraphProps };
-export { ProfileExplorer, ProfileTypeSelector };
+export { ProfileExplorer, ProfileTypeSelector, getExpressionAsAString };

package/dist/index.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 ProfileExplorer from './ProfileExplorer';
+import ProfileExplorer, { getExpressionAsAString } from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 export * from './ProfileIcicleGraph/IcicleGraph';
 export * from './ProfileIcicleGraph';
@@ -21,4 +21,4 @@ export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export { default as Callgraph } from './Callgraph';
-export { ProfileExplorer, ProfileTypeSelector };
+export { ProfileExplorer, ProfileTypeSelector, getExpressionAsAString };

package/dist/utils.d.ts

@@ -1,6 +1,8 @@
 import type { RpcMetadata } from '@protobuf-ts/runtime-rpc';
 import { QueryRequest, QueryServiceClient } from '@parca/client';
+import { type NavigateFunction } from '@parca/utilities';
 export declare const hexifyAddress: (address?: bigint) => string;
 export declare const downloadPprof: (request: QueryRequest, queryClient: QueryServiceClient, metadata: RpcMetadata) => Promise<Blob>;
 export declare const truncateString: (str: string, num: number) => string;
 export declare const truncateStringReverse: (str: string, num: number) => string;
+export declare const compareProfile: (navigateTo: NavigateFunction, defaultDashboardItems?: string[]) => void;

package/dist/utils.js

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { QueryRequest_ReportType } from '@parca/client';
+import { parseParams } from '@parca/utilities';
+import { ProfileSelectionFromParams, SuffixParams, getExpressionAsAString } from '.';
 export const hexifyAddress = (address) => {
     if (address == null) {
         return '';
@@ -41,3 +43,47 @@ export const truncateStringReverse = (str, num) => {
     }
     return '...' + str.slice(str.length - num);
 };
+export const compareProfile = (navigateTo, defaultDashboardItems = ['icicle']) => {
+    const queryParams = parseParams(window.location.search);
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const { from_a, to_a, merge_from_a, merge_to_a, time_selection_a, filter_by_function, dashboard_items, } = queryParams;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const selection_a = getExpressionAsAString(queryParams.selection_a);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const expression_a = getExpressionAsAString(queryParams.expression_a);
+    if (expression_a === undefined || selection_a === undefined) {
+        return;
+    }
+    const mergeFrom = merge_from_a ?? undefined;
+    const mergeTo = merge_to_a ?? undefined;
+    const profileA = ProfileSelectionFromParams(mergeFrom, mergeTo, selection_a, filter_by_function);
+    const queryA = {
+        expression: expression_a,
+        from: parseInt(from_a),
+        to: parseInt(to_a),
+        timeSelection: time_selection_a,
+    };
+    let compareQuery = {
+        compare_a: 'true',
+        expression_a: encodeURIComponent(queryA.expression),
+        from_a: queryA.from.toString(),
+        to_a: queryA.to.toString(),
+        time_selection_a: queryA.timeSelection,
+        compare_b: 'true',
+        expression_b: encodeURIComponent(queryA.expression),
+        from_b: queryA.from.toString(),
+        to_b: queryA.to.toString(),
+        time_selection_b: queryA.timeSelection,
+    };
+    if (profileA != null) {
+        compareQuery = {
+            ...SuffixParams(profileA.HistoryParams(), '_a'),
+            ...compareQuery,
+        };
+    }
+    void navigateTo('/', {
+        ...compareQuery,
+        search_string: '',
+        dashboard_items: dashboard_items ?? defaultDashboardItems,
+    });
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.389",
+  "version": "0.16.391",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.117",
-    "@parca/components": "0.16.282",
+    "@parca/components": "0.16.284",
     "@parca/dynamicsize": "0.16.65",
     "@parca/hooks": "0.0.60",
     "@parca/icons": "0.16.69",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "af133f2ef23b1fe926f810e8e5f7baca470c9707"
+  "gitHead": "db964de537aebc04da1d2741dcf14f691d78a6a0"
 }

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -69,7 +69,6 @@ const ProfileExplorerCompare = ({
             closeProfile={closeProfileA}
             enforcedProfileName={''}
             comparing={true}
-            onCompareProfile={() => {}}
           />
         </Card>
         <Card className="mt-2 p-2">
@@ -82,7 +81,6 @@ const ProfileExplorerCompare = ({
             closeProfile={closeProfileB}
             enforcedProfileName={Query.parse(queryA.expression).profileName()}
             comparing={true}
-            onCompareProfile={() => {}}
           />
         </Card>
       </div>

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -24,7 +24,6 @@ interface ProfileExplorerSingleProps {
   selectQuery: (query: QuerySelection) => void;
   selectProfile: (source: ProfileSelection) => void;
   profile: ProfileSelection | null;
-  compareProfile: () => void;
   navigateTo: NavigateFunction;
 }
 
@@ -34,7 +33,6 @@ const ProfileExplorerSingle = ({
   selectQuery,
   selectProfile,
   profile,
-  compareProfile,
   navigateTo,
 }: ProfileExplorerSingleProps): JSX.Element => {
   return (
@@ -48,7 +46,6 @@ const ProfileExplorerSingle = ({
           closeProfile={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
           profileSelection={profile}
           comparing={false}
-          onCompareProfile={compareProfile}
           enforcedProfileName={''} // TODO
         />
       </Card>

package/src/ProfileExplorer/index.tsx

@@ -42,7 +42,7 @@ const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
   );
 };
 
-const getExpressionAsAString = (expression: string | []): string => {
+export const getExpressionAsAString = (expression: string | []): string => {
   const x = Array.isArray(expression) ? expression.join() : expression;
   return x;
 };
@@ -263,35 +263,6 @@ const ProfileExplorerApp = ({
       });
     };
 
-    const compareProfile = (): void => {
-      let compareQuery = {
-        compare_a: 'true',
-        expression_a: encodeURIComponent(queryA.expression),
-        from_a: queryA.from.toString(),
-        to_a: queryA.to.toString(),
-        time_selection_a: queryA.timeSelection,
-
-        compare_b: 'true',
-        expression_b: encodeURIComponent(queryA.expression),
-        from_b: queryA.from.toString(),
-        to_b: queryA.to.toString(),
-        time_selection_b: queryA.timeSelection,
-      };
-
-      if (profileA != null) {
-        compareQuery = {
-          ...SuffixParams(profileA.HistoryParams(), '_a'),
-          ...compareQuery,
-        };
-      }
-
-      void navigateTo('/', {
-        ...compareQuery,
-        search_string: '',
-        dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
-      });
-    };
-
     return (
       <ProfileExplorerSingle
         queryClient={queryClient}
@@ -299,7 +270,6 @@ const ProfileExplorerApp = ({
         profile={profileA}
         selectQuery={selectQuery}
         selectProfile={selectProfile}
-        compareProfile={compareProfile}
         navigateTo={navigateTo}
       />
     );

package/src/ProfileSelector/index.tsx

@@ -33,7 +33,6 @@ import MatchersInput from '../MatchersInput/index';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import ProfileTypeSelector from '../ProfileTypeSelector/index';
-import CompareButton from './CompareButton';
 import {useAutoQuerySelector} from './useAutoQuerySelector';
 
 export interface QuerySelection {
@@ -54,7 +53,6 @@ interface ProfileSelectorProps {
   enforcedProfileName: string;
   profileSelection: ProfileSelection | null;
   comparing: boolean;
-  onCompareProfile: () => void;
 }
 
 export interface IProfileTypesResult {
@@ -92,7 +90,6 @@ const ProfileSelector = ({
   enforcedProfileName,
   profileSelection,
   comparing,
-  onCompareProfile,
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -219,19 +216,15 @@ const ProfileSelector = ({
     setQueryExpression,
   });
 
-  const handleCompareClick = (): void => onCompareProfile();
-
   const searchDisabled =
     queryExpressionString === undefined ||
     queryExpressionString === '' ||
     queryExpressionString === '{}';
 
-  const compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
-
   return (
     <>
       <div className="mb-2 flex gap-2">
-        <div className="flex w-full flex-wrap content-start items-center justify-between gap-2">
+        <div className="flex w-full flex-wrap content-start items-center gap-2">
           <div className="pb-6">
             <label className="text-xs">Profile type</label>
             <ProfileTypeSelector
@@ -261,13 +254,6 @@ const ProfileSelector = ({
             range={timeRangeSelection}
           />
           <ButtonGroup>
-            {!searchDisabled && (
-              <>
-                {!comparing && (
-                  <CompareButton disabled={compareDisabled} onClick={handleCompareClick} />
-                )}
-              </>
-            )}
             <Button
               disabled={searchDisabled}
               onClick={(e: React.MouseEvent<HTMLElement>) => {

package/src/index.tsx

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import type {Props as CallgraphProps} from './Callgraph';
-import ProfileExplorer from './ProfileExplorer';
+import ProfileExplorer, {getExpressionAsAString} from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 
 export * from './ProfileIcicleGraph/IcicleGraph';
@@ -27,4 +27,4 @@ export {default as Callgraph} from './Callgraph';
 
 export type {CallgraphProps};
 
-export {ProfileExplorer, ProfileTypeSelector};
+export {ProfileExplorer, ProfileTypeSelector, getExpressionAsAString};

package/src/utils.ts

@@ -14,6 +14,9 @@
 import type {RpcMetadata} from '@protobuf-ts/runtime-rpc';
 
 import {QueryRequest, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
+import {parseParams, type NavigateFunction} from '@parca/utilities';
+
+import {ProfileSelectionFromParams, SuffixParams, getExpressionAsAString} from '.';
 
 export const hexifyAddress = (address?: bigint): string => {
   if (address == null) {
@@ -59,3 +62,73 @@ export const truncateStringReverse = (str: string, num: number): string => {
 
   return '...' + str.slice(str.length - num);
 };
+
+export const compareProfile = (
+  navigateTo: NavigateFunction,
+  defaultDashboardItems: string[] = ['icicle']
+): void => {
+  const queryParams = parseParams(window.location.search);
+
+  /* eslint-disable @typescript-eslint/naming-convention */
+  const {
+    from_a,
+    to_a,
+    merge_from_a,
+    merge_to_a,
+    time_selection_a,
+    filter_by_function,
+    dashboard_items,
+  } = queryParams;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const selection_a = getExpressionAsAString(queryParams.selection_a as string | []);
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const expression_a = getExpressionAsAString(queryParams.expression_a as string | []);
+
+  if (expression_a === undefined || selection_a === undefined) {
+    return;
+  }
+
+  const mergeFrom = merge_from_a ?? undefined;
+  const mergeTo = merge_to_a ?? undefined;
+  const profileA = ProfileSelectionFromParams(
+    mergeFrom as string,
+    mergeTo as string,
+    selection_a,
+    filter_by_function as string
+  );
+  const queryA = {
+    expression: expression_a,
+    from: parseInt(from_a as string),
+    to: parseInt(to_a as string),
+    timeSelection: time_selection_a as string,
+  };
+
+  let compareQuery = {
+    compare_a: 'true',
+    expression_a: encodeURIComponent(queryA.expression),
+    from_a: queryA.from.toString(),
+    to_a: queryA.to.toString(),
+    time_selection_a: queryA.timeSelection,
+
+    compare_b: 'true',
+    expression_b: encodeURIComponent(queryA.expression),
+    from_b: queryA.from.toString(),
+    to_b: queryA.to.toString(),
+    time_selection_b: queryA.timeSelection,
+  };
+
+  if (profileA != null) {
+    compareQuery = {
+      ...SuffixParams(profileA.HistoryParams(), '_a'),
+      ...compareQuery,
+    };
+  }
+
+  void navigateTo('/', {
+    ...compareQuery,
+    search_string: '',
+    dashboard_items: dashboard_items ?? defaultDashboardItems,
+  });
+};