@parca/profile 0.16.391 → 0.16.392

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.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

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 }) }), _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." }) }) })) })] }));
+    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.js

@@ -3,6 +3,6 @@ import { Card } from '@parca/components';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 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, {}))] }));
+    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/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,6 +20,7 @@ interface ProfileSelectorProps {
     enforcedProfileName: string;
     profileSelection: ProfileSelection | null;
     comparing: boolean;
+    navigateTo: NavigateFunction;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -26,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, }: 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

@@ -38,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, }) => {
+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();
@@ -136,6 +136,8 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         profileTypesData,
         setProfileName,
         setQueryExpression,
+        querySelection,
+        navigateTo,
     });
     const searchDisabled = queryExpressionString === undefined ||
         queryExpressionString === '' ||

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/utils.d.ts

@@ -1,8 +1,6 @@
 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,8 +11,6 @@
 // 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 '';
@@ -43,47 +41,3 @@ 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,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.391",
+  "version": "0.16.392",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "db964de537aebc04da1d2741dcf14f691d78a6a0"
+  "gitHead": "5355cd41303f7388e15c70b63c26b22d0cf82830"
 }

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

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

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -47,6 +47,7 @@ const ProfileExplorerSingle = ({
           profileSelection={profile}
           comparing={false}
           enforcedProfileName={''} // TODO
+          navigateTo={navigateTo}
         />
       </Card>
       {profile != null ? (

package/src/ProfileSelector/index.tsx

@@ -27,6 +27,7 @@ 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';
@@ -53,6 +54,7 @@ interface ProfileSelectorProps {
   enforcedProfileName: string;
   profileSelection: ProfileSelection | null;
   comparing: boolean;
+  navigateTo: NavigateFunction;
 }
 
 export interface IProfileTypesResult {
@@ -90,6 +92,7 @@ const ProfileSelector = ({
   enforcedProfileName,
   profileSelection,
   comparing,
+  navigateTo,
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -214,6 +217,8 @@ const ProfileSelector = ({
     profileTypesData,
     setProfileName,
     setQueryExpression,
+    querySelection,
+    navigateTo,
   });
 
   const searchDisabled =

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/utils.ts

@@ -14,9 +14,6 @@
 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) {
@@ -62,73 +59,3 @@ 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,
-  });
-};