@parca/profile 0.16.385 → 0.16.386

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.386](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.385...@parca/profile@0.16.386) (2024-06-06)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.385](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.384...@parca/profile@0.16.385) (2024-06-05)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileExplorer/index.js

@@ -66,30 +66,32 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         }
     }, [profileTypesError, onError]);
     /* eslint-disable @typescript-eslint/naming-convention */
-    let { from_a, to_a, profile_name_a, labels_a, merge_from_a, merge_to_a, time_selection_a, compare_a, from_b, to_b, profile_name_b, labels_b, merge_from_b, merge_to_b, time_selection_b, compare_b, filter_by_function, dashboard_items, } = queryParams;
+    let { from_a, to_a, merge_from_a, merge_to_a, time_selection_a, compare_a, from_b, to_b, merge_from_b, merge_to_b, time_selection_b, compare_b, filter_by_function, dashboard_items, } = queryParams;
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const expression_a = getExpressionAsAString(queryParams.expression_a);
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const expression_b = getExpressionAsAString(queryParams.expression_b);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const selection_a = getExpressionAsAString(queryParams.selection_a);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const selection_b = getExpressionAsAString(queryParams.selection_b);
     /* eslint-enable @typescript-eslint/naming-convention */
     const [profileA, setProfileA] = useState(null);
     const [profileB, setProfileB] = useState(null);
     useEffect(() => {
         const mergeFrom = merge_from_a ?? undefined;
         const mergeTo = merge_to_a ?? undefined;
-        const labels = typeof labels_a === 'string' ? [labels_a] : labels_a ?? [''];
-        const profileA = ProfileSelectionFromParams(expression_a, from_a, to_a, mergeFrom, mergeTo, labels, filter_by_function);
+        const profileA = ProfileSelectionFromParams(mergeFrom, mergeTo, selection_a, filter_by_function);
         setProfileA(profileA);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [expression_a, from_a, to_a, merge_from_a, merge_to_a, labels_a, filter_by_function]);
+    }, [merge_from_a, merge_to_a, selection_a, filter_by_function]);
     useEffect(() => {
         const mergeFrom = merge_from_b ?? undefined;
         const mergeTo = merge_to_b ?? undefined;
-        const labels = typeof labels_b === 'string' ? [labels_b] : labels_b ?? [''];
-        const profileB = ProfileSelectionFromParams(expression_b, from_b, to_b, mergeFrom, mergeTo, labels, filter_by_function);
+        const profileB = ProfileSelectionFromParams(mergeFrom, mergeTo, selection_b, filter_by_function);
         setProfileB(profileB);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [expression_b, from_b, to_b, merge_from_b, merge_to_b, labels_b, filter_by_function]);
+    }, [merge_from_b, merge_to_b, selection_b, filter_by_function]);
     if (profileTypesLoading) {
         return _jsx(_Fragment, { children: loader });
     }
@@ -112,7 +114,9 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         queryParams.expression_b = expression_b;
     const selectProfile = (p, suffix) => {
         queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+        queryParams.selection_a = encodeURIComponent(queryParams.selection_a);
         queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
+        queryParams.selection_b = encodeURIComponent(queryParams.selection_b);
         return navigateTo('/', {
             ...queryParams,
             ...SuffixParams(p.HistoryParams(), suffix),
@@ -130,13 +134,16 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         from: parseInt(from_a),
         to: parseInt(to_a),
         timeSelection: time_selection_a,
-        profile_name: profile_name_a,
     };
     // Show the SingleProfileExplorer when not comparing
     if (compare_a !== 'true' && compare_b !== 'true') {
         const selectQuery = (q) => {
             const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
-                ? { merge_from_a: q.mergeFrom, merge_to_a: q.mergeTo }
+                ? {
+                    merge_from_a: q.mergeFrom,
+                    merge_to_a: q.mergeTo,
+                    selection_a: encodeURIComponent(q.expression),
+                }
                 : {};
             return navigateTo('/', 
             // Filtering the _a suffix causes us to reset potential profile
@@ -168,13 +175,11 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 from_a: queryA.from.toString(),
                 to_a: queryA.to.toString(),
                 time_selection_a: queryA.timeSelection,
-                profile_name_a: queryA.profile_name,
                 compare_b: 'true',
                 expression_b: encodeURIComponent(queryA.expression),
                 from_b: queryA.from.toString(),
                 to_b: queryA.to.toString(),
                 time_selection_b: queryA.timeSelection,
-                profile_name_b: queryA.profile_name,
             };
             if (profileA != null) {
                 compareQuery = {
@@ -195,11 +200,14 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         from: parseInt(from_b),
         to: parseInt(to_b),
         timeSelection: time_selection_b,
-        profile_name: profile_name_b,
     };
     const selectQueryA = (q) => {
         const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
-            ? { merge_from_a: q.mergeFrom, merge_to_a: q.mergeTo }
+            ? {
+                merge_from_a: q.mergeFrom,
+                merge_to_a: q.mergeTo,
+                selection_a: encodeURIComponent(q.expression),
+            }
             : {};
         return navigateTo('/', 
         // Filtering the _a suffix causes us to reset potential profile
@@ -210,6 +218,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 compare_a: 'true',
                 expression_a: encodeURIComponent(q.expression),
                 expression_b: encodeURIComponent(expression_b),
+                selection_b: encodeURIComponent(selection_b),
                 from_a: q.from.toString(),
                 to_a: q.to.toString(),
                 time_selection_a: q.timeSelection,
@@ -221,7 +230,11 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     };
     const selectQueryB = (q) => {
         const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
-            ? { merge_from_b: q.mergeFrom, merge_to_b: q.mergeTo }
+            ? {
+                merge_from_b: q.mergeFrom,
+                merge_to_b: q.mergeTo,
+                selection_b: encodeURIComponent(q.expression),
+            }
             : {};
         return navigateTo('/', 
         // Filtering the _b suffix causes us to reset potential profile
@@ -232,6 +245,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 compare_b: 'true',
                 expression_b: encodeURIComponent(q.expression),
                 expression_a: encodeURIComponent(expression_a),
+                selection_a: encodeURIComponent(selection_a),
                 from_b: q.from.toString(),
                 to_b: q.to.toString(),
                 time_selection_b: q.timeSelection,

package/dist/ProfileSource.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Label, ProfileDiffSelection, QueryRequest } from '@parca/client';
+import { ProfileDiffSelection, QueryRequest } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 export interface ProfileSource {
     QueryRequest: () => QueryRequest;
@@ -23,8 +23,7 @@ export declare function SuffixParams(params: {
 }, suffix: string): {
     [key: string]: any;
 };
-export declare function ParseLabels(labels: string[]): Label[];
-export declare function ProfileSelectionFromParams(expression: string | undefined, from: string | undefined, to: string | undefined, mergeFrom: string | undefined, mergeTo: string | undefined, labels: string[], filterQuery?: string): ProfileSelection | null;
+export declare function ProfileSelectionFromParams(mergeFrom: string | undefined, mergeTo: string | undefined, selection: string | undefined, filterQuery?: string): ProfileSelection | null;
 export declare class MergedProfileSelection implements ProfileSelection {
     mergeFrom: number;
     mergeTo: number;

package/dist/ProfileSource.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { ProfileDiffSelection_Mode, QueryRequest_Mode, QueryRequest_ReportType, Timestamp, } from '@parca/client';
-import { ProfileType, Query } from '@parca/parser';
+import { NewParser, ProfileType, Query } from '@parca/parser';
 import { formatDate } from '@parca/utilities';
 const timeFormat = (timezone) => {
     if (timezone !== undefined) {
@@ -30,34 +30,20 @@ export function ParamsString(params) {
 export function SuffixParams(params, suffix) {
     return Object.fromEntries(Object.entries(params).map(([key, value]) => [`${key}${suffix}`, value]));
 }
-export function ParseLabels(labels) {
-    return labels
-        .filter(str => str !== '')
-        .map(function (labelString) {
-        const parts = labelString.split('=', 2);
-        return { name: parts[0], value: parts[1] };
-    });
-}
-export function ProfileSelectionFromParams(expression, from, to, mergeFrom, mergeTo, labels, filterQuery) {
-    if (from !== undefined &&
-        to !== undefined &&
-        mergeFrom !== undefined &&
+export function ProfileSelectionFromParams(mergeFrom, mergeTo, selection, filterQuery) {
+    if (mergeFrom !== undefined &&
         mergeTo !== undefined &&
-        expression !== undefined) {
-        // TODO: Refactor parsing the query and adding matchers
-        let query = Query.parse(expression);
-        if (labels !== undefined) {
-            ParseLabels(labels ?? ['']).forEach(l => {
-                const hasLabels = labels.length > 0 && labels.filter(val => val !== '').length > 0;
-                if (hasLabels) {
-                    const [newQuery, changed] = query.setMatcher(l.name, l.value);
-                    if (changed) {
-                        query = newQuery;
-                    }
-                }
-            });
+        selection !== undefined &&
+        selection !== '') {
+        const p = NewParser();
+        p.save();
+        const { successfulParse } = Query.tryParse(p, selection);
+        if (!successfulParse) {
+            console.log('Failed to parse selected query.');
+            console.log(selection);
+            return null;
         }
-        return new MergedProfileSelection(parseInt(mergeFrom), parseInt(mergeTo), query, filterQuery);
+        return new MergedProfileSelection(parseInt(mergeFrom), parseInt(mergeTo), Query.parse(selection), filterQuery);
     }
     return null;
 }
@@ -76,9 +62,7 @@ export class MergedProfileSelection {
         return {
             merge_from: this.mergeFrom.toString(),
             merge_to: this.mergeTo.toString(),
-            query: this.query,
-            profile_name: this.ProfileName(),
-            labels: this.query.matchers.map(m => `${m.key}=${encodeURIComponent(m.value)}`),
+            selection: encodeURIComponent(this.query.toString()),
         };
     }
     Type() {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.385",
+  "version": "0.16.386",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.117",
-    "@parca/components": "0.16.281",
+    "@parca/components": "0.16.282",
     "@parca/dynamicsize": "0.16.65",
     "@parca/hooks": "0.0.60",
     "@parca/icons": "0.16.69",
-    "@parca/parser": "0.16.74",
+    "@parca/parser": "0.16.75",
     "@parca/store": "0.16.149",
     "@parca/utilities": "0.0.77",
     "@popperjs/core": "^2.11.8",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c363742271ee8693a32bb6f6addbacc71a4d11b0"
+  "gitHead": "a1ab45b0895ab2b3b5d67fdcf33123199dc93c5f"
 }

package/src/ProfileExplorer/index.tsx

@@ -116,16 +116,12 @@ const ProfileExplorerApp = ({
   let {
     from_a,
     to_a,
-    profile_name_a,
-    labels_a,
     merge_from_a,
     merge_to_a,
     time_selection_a,
     compare_a,
     from_b,
     to_b,
-    profile_name_b,
-    labels_b,
     merge_from_b,
     merge_to_b,
     time_selection_b,
@@ -140,6 +136,12 @@ const ProfileExplorerApp = ({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const expression_b = getExpressionAsAString(queryParams.expression_b);
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const selection_a = getExpressionAsAString(queryParams.selection_a);
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const selection_b = getExpressionAsAString(queryParams.selection_b);
+
   /* eslint-enable @typescript-eslint/naming-convention */
   const [profileA, setProfileA] = useState<ProfileSelection | null>(null);
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
@@ -147,38 +149,30 @@ const ProfileExplorerApp = ({
   useEffect(() => {
     const mergeFrom = merge_from_a ?? undefined;
     const mergeTo = merge_to_a ?? undefined;
-    const labels = typeof labels_a === 'string' ? [labels_a] : (labels_a as string[]) ?? [''];
     const profileA = ProfileSelectionFromParams(
-      expression_a,
-      from_a as string,
-      to_a as string,
       mergeFrom as string,
       mergeTo as string,
-      labels,
+      selection_a,
       filter_by_function as string
     );
 
     setProfileA(profileA);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expression_a, from_a, to_a, merge_from_a, merge_to_a, labels_a, filter_by_function]);
+  }, [merge_from_a, merge_to_a, selection_a, filter_by_function]);
 
   useEffect(() => {
     const mergeFrom = merge_from_b ?? undefined;
     const mergeTo = merge_to_b ?? undefined;
-    const labels = typeof labels_b === 'string' ? [labels_b] : (labels_b as string[]) ?? [''];
     const profileB = ProfileSelectionFromParams(
-      expression_b,
-      from_b as string,
-      to_b as string,
       mergeFrom as string,
       mergeTo as string,
-      labels,
+      selection_b,
       filter_by_function as string
     );
 
     setProfileB(profileB);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expression_b, from_b, to_b, merge_from_b, merge_to_b, labels_b, filter_by_function]);
+  }, [merge_from_b, merge_to_b, selection_b, filter_by_function]);
 
   if (profileTypesLoading) {
     return <>{loader}</>;
@@ -206,7 +200,9 @@ const ProfileExplorerApp = ({
 
   const selectProfile = (p: ProfileSelection, suffix: string): void => {
     queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+    queryParams.selection_a = encodeURIComponent(queryParams.selection_a);
     queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
+    queryParams.selection_b = encodeURIComponent(queryParams.selection_b);
     return navigateTo('/', {
       ...queryParams,
       ...SuffixParams(p.HistoryParams(), suffix),
@@ -227,7 +223,6 @@ const ProfileExplorerApp = ({
     from: parseInt(from_a as string),
     to: parseInt(to_a as string),
     timeSelection: time_selection_a as string,
-    profile_name: profile_name_a as string,
   };
 
   // Show the SingleProfileExplorer when not comparing
@@ -235,7 +230,11 @@ const ProfileExplorerApp = ({
     const selectQuery = (q: QuerySelection): void => {
       const mergeParams =
         q.mergeFrom !== undefined && q.mergeTo !== undefined
-          ? {merge_from_a: q.mergeFrom, merge_to_a: q.mergeTo}
+          ? {
+              merge_from_a: q.mergeFrom,
+              merge_to_a: q.mergeTo,
+              selection_a: encodeURIComponent(q.expression),
+            }
           : {};
       return navigateTo(
         '/',
@@ -271,14 +270,12 @@ const ProfileExplorerApp = ({
         from_a: queryA.from.toString(),
         to_a: queryA.to.toString(),
         time_selection_a: queryA.timeSelection,
-        profile_name_a: queryA.profile_name,
 
         compare_b: 'true',
         expression_b: encodeURIComponent(queryA.expression),
         from_b: queryA.from.toString(),
         to_b: queryA.to.toString(),
         time_selection_b: queryA.timeSelection,
-        profile_name_b: queryA.profile_name,
       };
 
       if (profileA != null) {
@@ -313,13 +310,16 @@ const ProfileExplorerApp = ({
     from: parseInt(from_b as string),
     to: parseInt(to_b as string),
     timeSelection: time_selection_b as string,
-    profile_name: profile_name_b as string,
   };
 
   const selectQueryA = (q: QuerySelection): void => {
     const mergeParams =
       q.mergeFrom !== undefined && q.mergeTo !== undefined
-        ? {merge_from_a: q.mergeFrom, merge_to_a: q.mergeTo}
+        ? {
+            merge_from_a: q.mergeFrom,
+            merge_to_a: q.mergeTo,
+            selection_a: encodeURIComponent(q.expression),
+          }
         : {};
     return navigateTo(
       '/',
@@ -331,6 +331,7 @@ const ProfileExplorerApp = ({
           compare_a: 'true',
           expression_a: encodeURIComponent(q.expression),
           expression_b: encodeURIComponent(expression_b),
+          selection_b: encodeURIComponent(selection_b),
           from_a: q.from.toString(),
           to_a: q.to.toString(),
           time_selection_a: q.timeSelection,
@@ -345,7 +346,11 @@ const ProfileExplorerApp = ({
   const selectQueryB = (q: QuerySelection): void => {
     const mergeParams =
       q.mergeFrom !== undefined && q.mergeTo !== undefined
-        ? {merge_from_b: q.mergeFrom, merge_to_b: q.mergeTo}
+        ? {
+            merge_from_b: q.mergeFrom,
+            merge_to_b: q.mergeTo,
+            selection_b: encodeURIComponent(q.expression),
+          }
         : {};
     return navigateTo(
       '/',
@@ -357,6 +362,7 @@ const ProfileExplorerApp = ({
           compare_b: 'true',
           expression_b: encodeURIComponent(q.expression),
           expression_a: encodeURIComponent(expression_a),
+          selection_a: encodeURIComponent(selection_a),
           from_b: q.from.toString(),
           to_b: q.to.toString(),
           time_selection_b: q.timeSelection,

package/src/ProfileSource.tsx

@@ -12,7 +12,6 @@
 // limitations under the License.
 
 import {
-  Label,
   ProfileDiffSelection,
   ProfileDiffSelection_Mode,
   QueryRequest,
@@ -20,7 +19,7 @@ import {
   QueryRequest_ReportType,
   Timestamp,
 } from '@parca/client';
-import {Matcher, ProfileType, Query} from '@parca/parser';
+import {Matcher, NewParser, ProfileType, Query} from '@parca/parser';
 import {formatDate} from '@parca/utilities';
 
 export interface ProfileSource {
@@ -58,46 +57,34 @@ export function SuffixParams(params: {[key: string]: any}, suffix: string): {[ke
   );
 }
 
-export function ParseLabels(labels: string[]): Label[] {
-  return labels
-    .filter(str => str !== '')
-    .map(function (labelString): Label {
-      const parts = labelString.split('=', 2);
-      return {name: parts[0], value: parts[1]};
-    });
-}
-
 export function ProfileSelectionFromParams(
-  expression: string | undefined,
-  from: string | undefined,
-  to: string | undefined,
   mergeFrom: string | undefined,
   mergeTo: string | undefined,
-  labels: string[],
+  selection: string | undefined,
   filterQuery?: string
 ): ProfileSelection | null {
   if (
-    from !== undefined &&
-    to !== undefined &&
     mergeFrom !== undefined &&
     mergeTo !== undefined &&
-    expression !== undefined
+    selection !== undefined &&
+    selection !== ''
   ) {
-    // TODO: Refactor parsing the query and adding matchers
-    let query = Query.parse(expression);
-    if (labels !== undefined) {
-      ParseLabels(labels ?? ['']).forEach(l => {
-        const hasLabels = labels.length > 0 && labels.filter(val => val !== '').length > 0;
-        if (hasLabels) {
-          const [newQuery, changed] = query.setMatcher(l.name, l.value);
-          if (changed) {
-            query = newQuery;
-          }
-        }
-      });
+    const p = NewParser();
+    p.save();
+    const {successfulParse} = Query.tryParse(p, selection);
+
+    if (!successfulParse) {
+      console.log('Failed to parse selected query.');
+      console.log(selection);
+      return null;
     }
 
-    return new MergedProfileSelection(parseInt(mergeFrom), parseInt(mergeTo), query, filterQuery);
+    return new MergedProfileSelection(
+      parseInt(mergeFrom),
+      parseInt(mergeTo),
+      Query.parse(selection),
+      filterQuery
+    );
   }
 
   return null;
@@ -131,9 +118,7 @@ export class MergedProfileSelection implements ProfileSelection {
     return {
       merge_from: this.mergeFrom.toString(),
       merge_to: this.mergeTo.toString(),
-      query: this.query,
-      profile_name: this.ProfileName(),
-      labels: this.query.matchers.map(m => `${m.key}=${encodeURIComponent(m.value)}`),
+      selection: encodeURIComponent(this.query.toString()),
     };
   }
 

package/src/__tests__/suffix_params.test.ts

@@ -11,14 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {ParseLabels, SuffixParams} from '../ProfileSource';
+import {SuffixParams} from '../ProfileSource';
 
 test('prefixes keys', () => {
   const input = {key: 'value'};
   expect(SuffixParams(input, '_a')).toMatchObject({key_a: 'value'});
 });
-
-test('parses labels', () => {
-  const input = ['key=value'];
-  expect(ParseLabels(input)).toMatchObject([{name: 'key', value: 'value'}]);
-});