@parca/profile 0.16.369 → 0.16.372

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.372](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.371...@parca/profile@0.16.372) (2024-05-16)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.371](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.370...@parca/profile@0.16.371) (2024-05-16)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.370](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.369...@parca/profile@0.16.370) (2024-05-14)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.369](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.368...@parca/profile@0.16.369) (2024-05-14)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useId, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
@@ -45,6 +45,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     const [pos, setPos] = useState([0, 0]);
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const metricPointRef = useRef(null);
+    const idForContextMenu = useId();
     // the time of the selected point is the start of the merge window
     const time = parseFloat(profile?.HistoryParams().merge_from);
     if (width === undefined || width == null) {
@@ -228,7 +229,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         };
     };
     const selected = findSelectedProfile();
-    const MENU_ID = 'metrics-context-menu';
+    const MENU_ID = `metrics-context-menu-${idForContextMenu}`;
     const { show } = useContextMenu({
         id: MENU_ID,
     });

package/dist/ProfileSelector/index.js

@@ -143,7 +143,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         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 })] }), _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) &&
+    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);

package/dist/ProfileSource.js

@@ -117,6 +117,11 @@ export class ProfileDiffSource {
         return (_jsx(_Fragment, { children: _jsx("p", { children: "Browse the comparison" }) }));
     }
     toString() {
+        const aDesc = this.a.toString();
+        const bDesc = this.b.toString();
+        if (aDesc === bDesc) {
+            return 'profile comparison';
+        }
         return `${this.a.toString()} compared with ${this.b.toString()}`;
     }
 }
@@ -164,6 +169,14 @@ export class MergedProfileSource {
             .map((m) => `${m.key}=${m.value}`);
     }
     toString(timezone) {
-        return `merged profiles of query "${this.query.toString()}" from ${formatDate(this.mergeFrom, timeFormat(timezone), timezone)} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
+        let queryPart = '';
+        if (this.query.toString()?.length > 0) {
+            queryPart = ` of query "${this.query.toString()}"`;
+        }
+        let timePart = '';
+        if (this.mergeFrom !== 0) {
+            timePart = ` from ${formatDate(this.mergeFrom, timeFormat(timezone), timezone)} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
+        }
+        return `merged profiles${queryPart}${timePart}`;
     }
 }

package/dist/ProfileTypeSelector/index.d.ts

@@ -21,6 +21,7 @@ interface Props {
     selectedKey: string | undefined;
     flexibleKnownProfilesDetection?: boolean;
     onSelection: (value: string | undefined) => void;
+    disabled?: boolean;
 }
-declare const ProfileTypeSelector: ({ profileTypesData, loading, error, selectedKey, onSelection, flexibleKnownProfilesDetection, }: Props) => JSX.Element;
+declare const ProfileTypeSelector: ({ profileTypesData, loading, error, selectedKey, onSelection, flexibleKnownProfilesDetection, disabled, }: Props) => JSX.Element;
 export default ProfileTypeSelector;

package/dist/ProfileTypeSelector/index.js

@@ -110,7 +110,7 @@ export const normalizeProfileTypesData = (types) => {
         return a.localeCompare(b);
     });
 };
-const ProfileTypeSelector = ({ profileTypesData, loading = false, error, selectedKey, onSelection, flexibleKnownProfilesDetection = false, }) => {
+const ProfileTypeSelector = ({ profileTypesData, loading = false, error, selectedKey, onSelection, flexibleKnownProfilesDetection = false, disabled, }) => {
     const profileNames = useMemo(() => {
         return (error === undefined || error == null) &&
             profileTypesData !== undefined &&
@@ -122,6 +122,6 @@ const ProfileTypeSelector = ({ profileTypesData, loading = false, error, selecte
         key: name,
         element: profileSelectElement(name, flexibleKnownProfilesDetection),
     }));
-    return (_jsx(Select, { items: profileLabels, selectedKey: selectedKey, onSelection: onSelection, placeholder: "Select profile type...", loading: loading, className: "bg-white h-profile-type-dropdown" }));
+    return (_jsx(Select, { items: profileLabels, selectedKey: selectedKey, onSelection: onSelection, placeholder: "Select profile type...", loading: loading, className: "bg-white h-profile-type-dropdown", disabled: disabled }));
 };
 export default ProfileTypeSelector;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.369",
+  "version": "0.16.372",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "^0.16.113",
-    "@parca/components": "^0.16.274",
-    "@parca/dynamicsize": "^0.16.64",
-    "@parca/hooks": "^0.0.54",
-    "@parca/icons": "^0.16.68",
-    "@parca/parser": "^0.16.73",
-    "@parca/store": "^0.16.143",
-    "@parca/utilities": "^0.0.71",
+    "@parca/client": "^0.16.114",
+    "@parca/components": "^0.16.276",
+    "@parca/dynamicsize": "^0.16.65",
+    "@parca/hooks": "^0.0.56",
+    "@parca/icons": "^0.16.69",
+    "@parca/parser": "^0.16.74",
+    "@parca/store": "^0.16.145",
+    "@parca/utilities": "^0.0.73",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@tanstack/react-query": "^4.0.5",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "704de2373c6b4ac3de52bd666f88e51981700f92"
+  "gitHead": "d0d5e43082aac764eecbe6e107b2d2f029132ff2"
 }

package/src/MetricsGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Fragment, useCallback, useMemo, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useId, useMemo, useRef, useState} from 'react';
 
 import * as d3 from 'd3';
 import {pointer} from 'd3-selection';
@@ -140,6 +140,7 @@ export const RawMetricsGraph = ({
   const [pos, setPos] = useState([0, 0]);
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const metricPointRef = useRef(null);
+  const idForContextMenu = useId();
 
   // the time of the selected point is the start of the merge window
   const time: number = parseFloat(profile?.HistoryParams().merge_from);
@@ -372,7 +373,7 @@ export const RawMetricsGraph = ({
 
   const selected = findSelectedProfile();
 
-  const MENU_ID = 'metrics-context-menu';
+  const MENU_ID = `metrics-context-menu-${idForContextMenu}`;
 
   const {show} = useContextMenu({
     id: MENU_ID,

package/src/ProfileSelector/index.tsx

@@ -240,6 +240,7 @@ const ProfileSelector = ({
               selectedKey={selectedProfileName}
               onSelection={setProfileName}
               error={error}
+              disabled={viewComponent?.disableProfileTypesDropdown}
             />
           </div>
           <div className="w-full flex-1 pb-6">

package/src/ProfileSource.tsx

@@ -182,6 +182,13 @@ export class ProfileDiffSource implements ProfileSource {
   }
 
   toString(): string {
+    const aDesc = this.a.toString();
+    const bDesc = this.b.toString();
+
+    if (aDesc === bDesc) {
+      return 'profile comparison';
+    }
+
     return `${this.a.toString()} compared with ${this.b.toString()}`;
   }
 }
@@ -240,10 +247,20 @@ export class MergedProfileSource implements ProfileSource {
   }
 
   toString(timezone?: string): string {
-    return `merged profiles of query "${this.query.toString()}" from ${formatDate(
-      this.mergeFrom,
-      timeFormat(timezone),
-      timezone
-    )} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
+    let queryPart = '';
+    if (this.query.toString()?.length > 0) {
+      queryPart = ` of query "${this.query.toString()}"`;
+    }
+
+    let timePart = '';
+    if (this.mergeFrom !== 0) {
+      timePart = ` from ${formatDate(
+        this.mergeFrom,
+        timeFormat(timezone),
+        timezone
+      )} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
+    }
+
+    return `merged profiles${queryPart}${timePart}`;
   }
 }

package/src/ProfileTypeSelector/index.tsx

@@ -147,6 +147,7 @@ interface Props {
   selectedKey: string | undefined;
   flexibleKnownProfilesDetection?: boolean;
   onSelection: (value: string | undefined) => void;
+  disabled?: boolean;
 }
 
 const ProfileTypeSelector = ({
@@ -156,6 +157,7 @@ const ProfileTypeSelector = ({
   selectedKey,
   onSelection,
   flexibleKnownProfilesDetection = false,
+  disabled,
 }: Props): JSX.Element => {
   const profileNames = useMemo(() => {
     return (error === undefined || error == null) &&
@@ -178,6 +180,7 @@ const ProfileTypeSelector = ({
       placeholder="Select profile type..."
       loading={loading}
       className="bg-white h-profile-type-dropdown"
+      disabled={disabled}
     />
   );
 };