@parca/profile 0.16.390 → 0.16.392

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.392](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.391...@parca/profile@0.16.392) (2024-06-27)
+
+**Note:** Version bump only for package @parca/profile
+
+## 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

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, navigateTo: navigateTo }) }), _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, navigateTo: navigateTo }) })] }), _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: '', navigateTo: navigateTo }) }), 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

@@ -1,6 +1,7 @@
 /// <reference types="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;
@@ -19,7 +20,7 @@ interface ProfileSelectorProps {
     enforcedProfileName: string;
     profileSelection: ProfileSelection | null;
     comparing: boolean;
-    onCompareProfile: () => void;
+    navigateTo: NavigateFunction;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -27,5 +28,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, navigateTo, }: 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, navigateTo, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
@@ -137,17 +136,17 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         profileTypesData,
         setProfileName,
         setQueryExpression,
+        querySelection,
+        navigateTo,
     });
-    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/ProfileSelector/useAutoQuerySelector.d.ts

@@ -1,9 +1,13 @@
 import { ProfileTypesResponse } from '@parca/client';
+import { type NavigateFunction } from '@parca/utilities';
+import { QuerySelection } from '../ProfileSelector';
 interface Props {
     selectedProfileName: string;
     profileTypesData: ProfileTypesResponse | undefined;
     setProfileName: (name: string) => void;
     setQueryExpression: () => void;
+    querySelection: QuerySelection;
+    navigateTo: NavigateFunction;
 }
-export declare const useAutoQuerySelector: ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, }: Props) => void;
+export declare const useAutoQuerySelector: ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, querySelection, navigateTo, }: Props) => void;
 export {};

package/dist/ProfileSelector/useAutoQuerySelector.js

@@ -12,10 +12,51 @@
 // limitations under the License.
 import { useEffect } from 'react';
 import { selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector } from '@parca/store';
+import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { constructProfileName } from '../ProfileTypeSelector';
-export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, }) => {
+export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, querySelection, navigateTo, }) => {
     const autoQuery = useAppSelector(selectAutoQuery);
     const dispatch = useAppDispatch();
+    const queryParams = new URLSearchParams(location.search);
+    const comparing = queryParams.get('comparing') === 'true';
+    const expressionA = queryParams.get('expression_a');
+    useEffect(() => {
+        if (comparing && expressionA !== null && expressionA !== undefined) {
+            if (querySelection.expression === undefined) {
+                return;
+            }
+            const profileA = ProfileSelectionFromParams(querySelection.mergeFrom?.toString(), querySelection.mergeTo?.toString(), querySelection.expression, '');
+            const queryA = {
+                expression: querySelection.expression,
+                from: querySelection.from,
+                to: querySelection.to,
+                timeSelection: querySelection.timeSelection,
+            };
+            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: ['icicle'],
+            });
+        }
+    }, [comparing, querySelection, navigateTo, expressionA, dispatch]);
     // Effect to load some initial data on load when is no selection
     useEffect(() => {
         void (async () => {

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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.390",
+  "version": "0.16.392",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.117",
-    "@parca/components": "0.16.283",
+    "@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": "da04231e85bce981a4be8b040e3d319772ea79cb"
+  "gitHead": "5355cd41303f7388e15c70b63c26b22d0cf82830"
 }

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -69,7 +69,7 @@ const ProfileExplorerCompare = ({
             closeProfile={closeProfileA}
             enforcedProfileName={''}
             comparing={true}
-            onCompareProfile={() => {}}
+            navigateTo={navigateTo}
           />
         </Card>
         <Card className="mt-2 p-2">
@@ -82,7 +82,7 @@ const ProfileExplorerCompare = ({
             closeProfile={closeProfileB}
             enforcedProfileName={Query.parse(queryA.expression).profileName()}
             comparing={true}
-            onCompareProfile={() => {}}
+            navigateTo={navigateTo}
           />
         </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,8 +46,8 @@ const ProfileExplorerSingle = ({
           closeProfile={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
           profileSelection={profile}
           comparing={false}
-          onCompareProfile={compareProfile}
           enforcedProfileName={''} // TODO
+          navigateTo={navigateTo}
         />
       </Card>
       {profile != null ? (

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

@@ -27,13 +27,13 @@ import {
 } from '@parca/components';
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
+import {type NavigateFunction} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 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 +54,7 @@ interface ProfileSelectorProps {
   enforcedProfileName: string;
   profileSelection: ProfileSelection | null;
   comparing: boolean;
-  onCompareProfile: () => void;
+  navigateTo: NavigateFunction;
 }
 
 export interface IProfileTypesResult {
@@ -92,7 +92,7 @@ const ProfileSelector = ({
   enforcedProfileName,
   profileSelection,
   comparing,
-  onCompareProfile,
+  navigateTo,
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -217,21 +217,19 @@ const ProfileSelector = ({
     profileTypesData,
     setProfileName,
     setQueryExpression,
+    querySelection,
+    navigateTo,
   });
 
-  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 +259,6 @@ const ProfileSelector = ({
             range={timeRangeSelection}
           />
           <ButtonGroup>
-            {!searchDisabled && (
-              <>
-                {!comparing && (
-                  <CompareButton disabled={compareDisabled} onClick={handleCompareClick} />
-                )}
-              </>
-            )}
             <Button
               disabled={searchDisabled}
               onClick={(e: React.MouseEvent<HTMLElement>) => {

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -15,7 +15,10 @@ import {useEffect} from 'react';
 
 import {ProfileTypesResponse} from '@parca/client';
 import {selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector} from '@parca/store';
+import {type NavigateFunction} from '@parca/utilities';
 
+import {ProfileSelectionFromParams, SuffixParams} from '..';
+import {QuerySelection} from '../ProfileSelector';
 import {constructProfileName} from '../ProfileTypeSelector';
 
 interface Props {
@@ -23,6 +26,8 @@ interface Props {
   profileTypesData: ProfileTypesResponse | undefined;
   setProfileName: (name: string) => void;
   setQueryExpression: () => void;
+  querySelection: QuerySelection;
+  navigateTo: NavigateFunction;
 }
 
 export const useAutoQuerySelector = ({
@@ -30,9 +35,62 @@ export const useAutoQuerySelector = ({
   profileTypesData,
   setProfileName,
   setQueryExpression,
+  querySelection,
+  navigateTo,
 }: Props): void => {
   const autoQuery = useAppSelector(selectAutoQuery);
   const dispatch = useAppDispatch();
+  const queryParams = new URLSearchParams(location.search);
+
+  const comparing = queryParams.get('comparing') === 'true';
+  const expressionA = queryParams.get('expression_a');
+
+  useEffect(() => {
+    if (comparing && expressionA !== null && expressionA !== undefined) {
+      if (querySelection.expression === undefined) {
+        return;
+      }
+      const profileA = ProfileSelectionFromParams(
+        querySelection.mergeFrom?.toString(),
+        querySelection.mergeTo?.toString(),
+        querySelection.expression,
+        ''
+      );
+      const queryA = {
+        expression: querySelection.expression,
+        from: querySelection.from,
+        to: querySelection.to,
+        timeSelection: querySelection.timeSelection,
+      };
+
+      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: ['icicle'],
+      });
+    }
+  }, [comparing, querySelection, navigateTo, expressionA, dispatch]);
 
   // Effect to load some initial data on load when is no selection
   useEffect(() => {

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