@parca/profile 0.16.369 → 0.16.370

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

@@ -0,0 +1,5 @@
+declare const GroupByDropdown: ({ groupBy, toggleGroupBy, }: {
+    groupBy: string[];
+    toggleGroupBy: (key: string) => void;
+}) => React.JSX.Element;
+export default GroupByDropdown;

package/dist/ProfileIcicleGraph/GroupByDropdown.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, Transition } from '@headlessui/react';
+const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
+    const label = groupBy.length === 0
+        ? 'Nothing'
+        : groupBy.length === 1
+            ? groupByOptions.find(option => option.value === groupBy[0])?.label
+            : 'Multiple';
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))) }) }) }) }) })] })] }));
+};
+export default GroupByDropdown;

package/dist/ProfileIcicleGraph/RuntimeFilterDropdown.d.ts

@@ -0,0 +1,9 @@
+declare const RuntimeFilterDropdown: ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }: {
+    showRuntimeRuby: boolean;
+    toggleShowRuntimeRuby: () => void;
+    showRuntimePython: boolean;
+    toggleShowRuntimePython: () => void;
+    showInterpretedOnly: boolean;
+    toggleShowInterpretedOnly: () => void;
+}) => React.JSX.Element;
+export default RuntimeFilterDropdown;

package/dist/ProfileIcicleGraph/RuntimeFilterDropdown.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Menu, Transition } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+const RuntimeToggle = ({ id, state, toggle, label, description, }) => {
+    return (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: id, name: id, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: state, onChange: () => toggle() }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: id, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, id));
+};
+const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }) => {
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: "Runtimes" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [_jsx(RuntimeToggle, { id: "show-runtime-ruby", state: showRuntimeRuby, toggle: toggleShowRuntimeRuby, label: "Ruby", description: "Show Ruby runtime functions." }), _jsx(RuntimeToggle, { id: "show-runtime-python", state: showRuntimePython, toggle: toggleShowRuntimePython, label: "Python", description: "Show Python runtime functions." }), _jsx(RuntimeToggle, { id: "show-interpreted-only", state: showInterpretedOnly, toggle: toggleShowInterpretedOnly, label: "Interpreted Only", description: "Show only interpreted functions." })] }) }) }) }) })] })] }));
+};
+export default RuntimeFilterDropdown;

package/dist/ProfileIcicleGraph/SortBySelect.d.ts

@@ -0,0 +1,6 @@
+declare const SortBySelect: ({ sortBy, setSortBy, compareMode, }: {
+    sortBy: string;
+    setSortBy: (key: string) => void;
+    compareMode: boolean;
+}) => React.JSX.Element;
+export default SortBySelect;

package/dist/ProfileIcicleGraph/SortBySelect.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, } from './IcicleGraphArrow';
+const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { items: [
+                    {
+                        key: FIELD_FUNCTION_NAME,
+                        disabled: false,
+                        element: {
+                            active: _jsx(_Fragment, { children: "Function" }),
+                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Function" }) })),
+                        },
+                    },
+                    {
+                        key: FIELD_CUMULATIVE,
+                        disabled: false,
+                        element: {
+                            active: _jsx(_Fragment, { children: "Cumulative" }),
+                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Cumulative" }) })),
+                        },
+                    },
+                    {
+                        key: FIELD_DIFF,
+                        disabled: !compareMode,
+                        element: {
+                            active: _jsx(_Fragment, { children: "Diff" }),
+                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Diff" }) })),
+                        },
+                    },
+                ], selectedKey: sortBy, onSelection: key => setSortBy(key), placeholder: 'Sort By', primary: false, disabled: false })] }));
+};
+export default SortBySelect;

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/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/dist/QueryBrowser/index.d.ts

@@ -0,0 +1,12 @@
+import { QueryServiceClient } from '@parca/client';
+import { DateTimeRange } from '@parca/components';
+import { QuerySelection } from '../ProfileSelector';
+interface Props {
+    queryClient: QueryServiceClient;
+    selectQuery: (query: QuerySelection) => void;
+    enforcedProfileName: string;
+    timeRangeSelection: DateTimeRange;
+    querySelection: QuerySelection;
+}
+declare const QueryBrowser: ({ queryClient, enforcedProfileName, timeRangeSelection, selectQuery, querySelection, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default QueryBrowser;

package/dist/QueryBrowser/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Query } from '@parca/parser';
+import MatchersInput from '../MatchersInput';
+const QueryBrowser = ({ queryClient, enforcedProfileName, timeRangeSelection, selectQuery, querySelection, }) => {
+    const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
+    useEffect(() => {
+        if (enforcedProfileName !== '') {
+            const [q, changed] = Query.parse(querySelection.expression).setProfileName(enforcedProfileName);
+            if (changed) {
+                setQueryExpressionString(q.toString());
+                return;
+            }
+        }
+        setQueryExpressionString(querySelection.expression);
+    }, [enforcedProfileName, querySelection.expression]);
+    const enforcedProfileNameQuery = () => {
+        const pq = Query.parse(queryExpressionString);
+        const [q] = pq.setProfileName(enforcedProfileName);
+        return q;
+    };
+    const setMatchersString = (matchers) => {
+        const newExpressionString = `${''}{${matchers}}`;
+        setQueryExpressionString(newExpressionString);
+    };
+    const setNewQueryExpression = (expr) => {
+        const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
+        const delta = query.profileType().delta;
+        const from = timeRangeSelection.getFromMs();
+        const to = timeRangeSelection.getToMs();
+        const mergeParams = delta
+            ? {
+                mergeFrom: from,
+                mergeTo: to,
+            }
+            : {};
+        selectQuery({
+            expression: expr,
+            from,
+            to,
+            timeSelection: timeRangeSelection.getRangeKey(),
+            ...mergeParams,
+        });
+    };
+    const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
+    const setQueryExpression = () => {
+        setNewQueryExpression(query.toString());
+    };
+    return (_jsx(_Fragment, { children: _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query }) }));
+};
+export default QueryBrowser;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.369",
+  "version": "0.16.370",
   "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/components": "^0.16.275",
     "@parca/dynamicsize": "^0.16.64",
-    "@parca/hooks": "^0.0.54",
+    "@parca/hooks": "^0.0.55",
     "@parca/icons": "^0.16.68",
     "@parca/parser": "^0.16.73",
-    "@parca/store": "^0.16.143",
-    "@parca/utilities": "^0.0.71",
+    "@parca/store": "^0.16.144",
+    "@parca/utilities": "^0.0.72",
     "@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": "6fb2ee469c00ba81c6b1317771127fdf5806dced"
 }

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