@parca/profile 0.16.342 → 0.16.344

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.344](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.343...@parca/profile@0.16.344) (2024-02-21)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.343](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.342...@parca/profile@0.16.343) (2024-02-20)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.342](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.341...@parca/profile@0.16.342) (2024-02-14)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/index.d.ts

@@ -7,7 +7,7 @@ interface Props {
     from: number;
     to: number;
     profile: MergedProfileSelection | null;
-    onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
+    onSampleClick: (timestamp: number, value: number, labels: Label[], duration: number) => void;
     addLabelMatcher: (labels: {
         key: string;
         value: string;

package/dist/MetricsGraph/index.js

@@ -139,8 +139,8 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     };
     const openClosestProfile = () => {
         if (highlighted != null) {
-            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, sanitizeHighlightedValues(highlighted.labels) // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
-            );
+            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, sanitizeHighlightedValues(highlighted.labels), // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
+            highlighted.duration);
         }
     };
     const onMouseUp = (e) => {

package/dist/ProfileIcicleGraph/ActionButtons/GroupByDropdown.js

@@ -52,6 +52,6 @@ const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
         : groupBy.length === 1
             ? groupByOptions.find(option => option.value === groupBy[0])?.label
             : 'Multiple';
-    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsxs(Menu.Button, { id: "h-group-by-filter", className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", 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))) }) }) }) }) })] })] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", id: "h-group-by-filter", children: [_jsxs(Menu.Button, { className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", 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/ActionButtons/RuntimeFilterDropdown.js

@@ -18,6 +18,6 @@ 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-[1.7rem] 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", id: "h-runtimes-filter", 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." })] }) }) }) }) })] })] }));
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", id: "h-runtimes-filter", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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/ActionButtons/SortBySelect.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Select } from '@parca/components';
 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, { id: "h-sort-by-filter", className: "!px-3", items: [
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { className: "!px-3", items: [
                     {
                         key: FIELD_FUNCTION_NAME,
                         disabled: false,
@@ -39,6 +39,6 @@ const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
                             expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Diff" }) })),
                         },
                     },
-                ], selectedKey: sortBy, onSelection: key => setSortBy(key), placeholder: 'Sort By', primary: false, disabled: false })] }));
+                ], selectedKey: sortBy, onSelection: key => setSortBy(key), placeholder: 'Sort By', primary: false, disabled: false, id: "h-sort-by-filter" })] }));
 };
 export default SortBySelect;

package/dist/ProfileIcicleGraph/index.js

@@ -134,6 +134,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", id: "h-icicle-graph", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -21,7 +21,7 @@ interface ProfileMetricsGraphProps {
         key: string;
         value: string;
     }>) => void;
-    onPointClick: (timestamp: number, labels: Label[], queryExpression: string) => void;
+    onPointClick: (timestamp: number, labels: Label[], queryExpression: string, duration: number) => void;
     comparing?: boolean;
 }
 export interface IQueryRangeState {

package/dist/ProfileMetricsGraph/index.js

@@ -88,8 +88,8 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
         return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
     if (dataAvailable) {
-        const handleSampleClick = (timestamp, _value, labels) => {
-            onPointClick(timestamp, labels, queryExpression);
+        const handleSampleClick = (timestamp, _value, labels, duration) => {
+            onPointClick(timestamp, labels, queryExpression, duration);
         };
         let sampleUnit = '';
         if (series.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {

package/dist/ProfileSelector/index.js

@@ -15,7 +15,6 @@ import { useEffect, useState } from 'react';
 import { Button, ButtonGroup, DateTimeRange, DateTimeRangePicker, IconButton, useGrpcMetadata, useParcaContext, } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
 import { Query } from '@parca/parser';
-import { getStepDuration, getStepDurationInMilliseconds } from '@parca/utilities';
 import { MergedProfileSelection } from '..';
 import MatchersInput from '../MatchersInput/index';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
@@ -177,7 +176,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                     timeSelection: range.getRangeKey(),
                                     ...mergedProfileParams,
                                 });
-                            }, addLabelMatcher: addLabelMatcher, onPointClick: (timestamp, labels, queryExpression) => {
+                            }, addLabelMatcher: addLabelMatcher, onPointClick: (timestamp, labels, queryExpression, duration) => {
                                 // TODO: Pass the query object via click rather than queryExpression
                                 let query = Query.parse(queryExpression);
                                 labels.forEach(l => {
@@ -186,11 +185,10 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                         query = newQuery;
                                     }
                                 });
-                                const stepDuration = getStepDuration(querySelection.from, querySelection.to);
-                                const stepDurationInMilliseconds = getStepDurationInMilliseconds(stepDuration);
+                                const durationInMilliseconds = duration / 1000000; // duration is in nanoseconds
                                 const mergeFrom = timestamp;
                                 const mergeTo = query.profileType().delta
-                                    ? mergeFrom + stepDurationInMilliseconds
+                                    ? mergeFrom + durationInMilliseconds
                                     : mergeFrom;
                                 selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
                             } }) })) : (_jsx(_Fragment, { children: profileSelection == null ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: `Please select a profile type and click "Search" to begin.` }) })) : null })) }) })] }));

package/dist/ProfileTypeSelector/index.js

@@ -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" }));
+    return (_jsx(Select, { items: profileLabels, selectedKey: selectedKey, onSelection: onSelection, placeholder: "Select profile type...", loading: loading, className: "bg-white h-profile-type-dropdown" }));
 };
 export default ProfileTypeSelector;

package/dist/ProfileView/FilterByFunctionButton.js

@@ -29,6 +29,6 @@ const FilterByFunctionButton = ({ navigateTo, }) => {
             setStoreValue(localValue);
         }
     }, [localValue, isClearAction, setStoreValue]);
-    return (_jsx(Input, { placeholder: "Filter by function", id: "h-filter-by-function", className: "text-sm", onAction: onAction, onChange: e => setLocalValue(e.target.value), value: localValue ?? '', onBlur: () => setLocalValue(storeValue), actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }) }));
+    return (_jsx(Input, { placeholder: "Filter by function", className: "text-sm", onAction: onAction, onChange: e => setLocalValue(e.target.value), value: localValue ?? '', onBlur: () => setLocalValue(storeValue), actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }), id: "h-filter-by-function" }));
 };
 export default FilterByFunctionButton;

package/dist/ProfileView/ViewSelector.d.ts

@@ -9,6 +9,7 @@ interface Props {
     addView?: boolean;
     disabled?: boolean;
     icon?: JSX.Element;
+    id?: string;
 }
-declare const ViewSelector: ({ defaultValue, navigateTo, position, placeholderText, primary, addView, disabled, icon, }: Props) => JSX.Element;
+declare const ViewSelector: ({ defaultValue, navigateTo, position, placeholderText, primary, addView, disabled, icon, id, }: Props) => JSX.Element;
 export default ViewSelector;

package/dist/ProfileView/ViewSelector.js

@@ -13,7 +13,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { Select, useParcaContext, useURLState } from '@parca/components';
 import { useUIFeatureFlag } from '@parca/hooks';
-const ViewSelector = ({ defaultValue, navigateTo, position, placeholderText, primary = false, addView = false, disabled = false, icon, }) => {
+const ViewSelector = ({ defaultValue, navigateTo, position, placeholderText, primary = false, addView = false, disabled = false, icon, id, }) => {
     const [callgraphEnabled] = useUIFeatureFlag('callgraph');
     const [dashboardItems = ['icicle'], setDashboardItems] = useURLState({
         param: 'dashboard_items',
@@ -65,6 +65,6 @@ const ViewSelector = ({ defaultValue, navigateTo, position, placeholderText, pri
             : [dashboardItems[0], value];
         setDashboardItems(newDashboardItems);
     };
-    return (_jsx(Select, { items: items, selectedKey: defaultValue, onSelection: onSelection, placeholder: placeholderText ?? 'Select view type...', primary: primary, disabled: disabled, icon: icon }));
+    return (_jsx(Select, { className: "h-view-selector", items: items, selectedKey: defaultValue, onSelection: onSelection, placeholder: placeholderText ?? 'Select view type...', primary: primary, disabled: disabled, icon: icon, id: id }));
 };
 export default ViewSelector;

package/dist/ProfileView/VisualizationPanel.js

@@ -20,7 +20,7 @@ import ViewSelector from './ViewSelector';
 export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, index, isMultiPanelView, handleClosePanel, navigateTo, dragHandleProps, getDashboardItemByType, }) {
     const [actionButtons, setActionButtons] = useState(_jsx(_Fragment, {}));
     const { flamegraphHint } = useParcaContext();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2 min-h-[78px]", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { className: "flex gap-2", children: actionButtons })] }), _jsxs("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: [_jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index }), dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null] })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2 min-h-[78px]", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { className: "flex gap-2", children: actionButtons })] }), _jsxs("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: [_jsx(ViewSelector, { id: "h-switch-viz", defaultValue: dashboardItem, navigateTo: navigateTo, position: index }), dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null] })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
                 setActionButtons,

package/dist/ProfileView/index.js

@@ -156,10 +156,10 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                         'items-center': hasProfileSource,
                     }), children: [_jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
                                                 ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                                : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", id: "h-viz-preferences", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { id: "h-download-pprof", className: "gap-2", variant: "neutral", onClick: e => {
+                                                : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", id: "h-viz-preferences", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
                                         e.preventDefault();
                                         onDownloadPProf();
-                                    }, disabled: pprofDownloading, children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 })] })] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
+                                    }, disabled: pprofDownloading, id: "h-download-pprof", children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1, id: "h-add-panel" })] })] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
                                     return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('w-full rounded p-2 shadow dark:border dark:border-gray-700 dark:bg-gray-700 min-h-96', snapshot.isDragging
                                                 ? 'bg-gray-200 dark:bg-gray-500'
                                                 : 'bg-white dark:bg-gray-700') },

package/dist/components/DiffLegend.js

@@ -45,6 +45,6 @@ const DiffLegend = () => {
     const handleMouseLeave = () => {
         setShowLegendTooltip(false);
     };
-    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential icicle graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
+    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", id: "h-diff-legend", children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential icicle graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
 };
 export default DiffLegend;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.342",
+  "version": "0.16.344",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.103",
-    "@parca/components": "^0.16.252",
+    "@parca/components": "^0.16.253",
     "@parca/dynamicsize": "^0.16.60",
     "@parca/hooks": "^0.0.41",
     "@parca/parser": "^0.16.68",
@@ -51,5 +51,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "64e853a94dc382feae3481f3f64efa47e8f5709c"
+  "gitHead": "419fad9b80e702bafd775521f69a812bc5e81124"
 }

package/src/MetricsGraph/index.tsx

@@ -40,7 +40,7 @@ interface Props {
   from: number;
   to: number;
   profile: MergedProfileSelection | null;
-  onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
+  onSampleClick: (timestamp: number, value: number, labels: Label[], duration: number) => void;
   addLabelMatcher: (
     labels: {key: string; value: string} | Array<{key: string; value: string}>
   ) => void;
@@ -260,7 +260,8 @@ export const RawMetricsGraph = ({
       onSampleClick(
         Math.round(highlighted.timestamp),
         highlighted.value,
-        sanitizeHighlightedValues(highlighted.labels) // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
+        sanitizeHighlightedValues(highlighted.labels), // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
+        highlighted.duration
       );
     }
   };

package/src/ProfileIcicleGraph/ActionButtons/GroupByDropdown.tsx

@@ -72,11 +72,8 @@ const GroupByDropdown = ({
   return (
     <div className="relative">
       <label className="text-sm">Group</label>
-      <Menu as="div" className="relative text-left">
-        <Menu.Button
-          id="h-group-by-filter"
-          className="relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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"
-        >
+      <Menu as="div" className="relative text-left" id="h-group-by-filter">
+        <Menu.Button className="relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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">
           <span className="block overflow-x-hidden text-ellipsis">{label}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400">
             <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />

package/src/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.tsx

@@ -69,12 +69,9 @@ const RuntimeFilterDropdown = ({
   return (
     <div>
       <label className="text-sm">Runtimes</label>
-      <Menu as="div" className="relative text-left">
+      <Menu as="div" className="relative text-left" id="h-runtimes-filter">
         <div>
-          <Menu.Button
-            className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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"
-            id="h-runtimes-filter"
-          >
+          <Menu.Button className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] 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">
             <span className="block overflow-x-hidden text-ellipsis">Runtimes</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400">
               <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />

package/src/ProfileIcicleGraph/ActionButtons/SortBySelect.tsx

@@ -28,7 +28,6 @@ const SortBySelect = ({
     <div>
       <label className="text-sm">Sort</label>
       <Select
-        id="h-sort-by-filter"
         className="!px-3"
         items={[
           {
@@ -73,6 +72,7 @@ const SortBySelect = ({
         placeholder={'Sort By'}
         primary={false}
         disabled={false}
+        id="h-sort-by-filter"
       />
     </div>
   );

package/src/ProfileIcicleGraph/index.tsx

@@ -325,7 +325,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         transition={{duration: 0.5}}
       >
         {compareMode ? <DiffLegend /> : null}
-        <div className="min-h-48">
+        <div className="min-h-48" id="h-icicle-graph">
           {graph !== undefined && (
             <IcicleGraph
               width={width}

package/src/ProfileMetricsGraph/index.tsx

@@ -64,7 +64,12 @@ interface ProfileMetricsGraphProps {
   addLabelMatcher: (
     labels: {key: string; value: string} | Array<{key: string; value: string}>
   ) => void;
-  onPointClick: (timestamp: number, labels: Label[], queryExpression: string) => void;
+  onPointClick: (
+    timestamp: number,
+    labels: Label[],
+    queryExpression: string,
+    duration: number
+  ) => void;
   comparing?: boolean;
 }
 
@@ -168,8 +173,13 @@ const ProfileMetricsGraph = ({
   }
 
   if (dataAvailable) {
-    const handleSampleClick = (timestamp: number, _value: number, labels: Label[]): void => {
-      onPointClick(timestamp, labels, queryExpression);
+    const handleSampleClick = (
+      timestamp: number,
+      _value: number,
+      labels: Label[],
+      duration: number
+    ): void => {
+      onPointClick(timestamp, labels, queryExpression, duration);
     };
 
     let sampleUnit = '';

package/src/ProfileSelector/index.tsx

@@ -15,7 +15,7 @@ import React, {useEffect, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
-import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
+import {Label, ProfileTypesResponse, QueryServiceClient} from '@parca/client';
 import {
   Button,
   ButtonGroup,
@@ -27,7 +27,6 @@ import {
 } from '@parca/components';
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
-import {getStepDuration, getStepDurationInMilliseconds} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MatchersInput from '../MatchersInput/index';
@@ -327,7 +326,12 @@ const ProfileSelector = ({
                   });
                 }}
                 addLabelMatcher={addLabelMatcher}
-                onPointClick={(timestamp, labels, queryExpression) => {
+                onPointClick={(
+                  timestamp: number,
+                  labels: Label[],
+                  queryExpression: string,
+                  duration: number
+                ) => {
                   // TODO: Pass the query object via click rather than queryExpression
                   let query = Query.parse(queryExpression);
                   labels.forEach(l => {
@@ -337,11 +341,10 @@ const ProfileSelector = ({
                     }
                   });
 
-                  const stepDuration = getStepDuration(querySelection.from, querySelection.to);
-                  const stepDurationInMilliseconds = getStepDurationInMilliseconds(stepDuration);
+                  const durationInMilliseconds = duration / 1000000; // duration is in nanoseconds
                   const mergeFrom = timestamp;
                   const mergeTo = query.profileType().delta
-                    ? mergeFrom + stepDurationInMilliseconds
+                    ? mergeFrom + durationInMilliseconds
                     : mergeFrom;
                   selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
                 }}

package/src/ProfileTypeSelector/index.tsx

@@ -177,7 +177,7 @@ const ProfileTypeSelector = ({
       onSelection={onSelection}
       placeholder="Select profile type..."
       loading={loading}
-      className="bg-white"
+      className="bg-white h-profile-type-dropdown"
     />
   );
 };

package/src/ProfileView/FilterByFunctionButton.tsx

@@ -42,13 +42,13 @@ const FilterByFunctionButton = ({
   return (
     <Input
       placeholder="Filter by function"
-      id="h-filter-by-function"
       className="text-sm"
       onAction={onAction}
       onChange={e => setLocalValue(e.target.value)}
       value={localValue ?? ''}
       onBlur={() => setLocalValue(storeValue as string)}
       actionIcon={isClearAction ? <Icon icon="ep:circle-close" /> : <Icon icon="ep:arrow-right" />}
+      id="h-filter-by-function"
     />
   );
 };

package/src/ProfileView/ViewSelector.tsx

@@ -24,6 +24,7 @@ interface Props {
   addView?: boolean;
   disabled?: boolean;
   icon?: JSX.Element;
+  id?: string;
 }
 
 const ViewSelector = ({
@@ -35,6 +36,7 @@ const ViewSelector = ({
   addView = false,
   disabled = false,
   icon,
+  id,
 }: Props): JSX.Element => {
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
   const [dashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -110,6 +112,7 @@ const ViewSelector = ({
 
   return (
     <Select
+      className="h-view-selector"
       items={items}
       selectedKey={defaultValue}
       onSelection={onSelection}
@@ -117,6 +120,7 @@ const ViewSelector = ({
       primary={primary}
       disabled={disabled}
       icon={icon}
+      id={id}
     />
   );
 };

package/src/ProfileView/VisualizationPanel.tsx

@@ -73,7 +73,12 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
               isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'
             )}
           >
-            <ViewSelector defaultValue={dashboardItem} navigateTo={navigateTo} position={index} />
+            <ViewSelector
+              id="h-switch-viz"
+              defaultValue={dashboardItem}
+              navigateTo={navigateTo}
+              position={index}
+            />
 
             {dashboardItem === 'icicle' && flamegraphHint != null ? (
               <div className="px-2">{flamegraphHint}</div>

package/src/ProfileView/index.tsx

@@ -383,7 +383,6 @@ export const ProfileView = ({
               />
             ) : null}
             <Button
-              id="h-download-pprof"
               className="gap-2"
               variant="neutral"
               onClick={e => {
@@ -391,6 +390,7 @@ export const ProfileView = ({
                 onDownloadPProf();
               }}
               disabled={pprofDownloading}
+              id="h-download-pprof"
             >
               {pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof'}
               <Icon icon="material-symbols:download" width={20} />
@@ -403,6 +403,7 @@ export const ProfileView = ({
               icon={<Icon icon="material-symbols:add" width={20} />}
               addView={true}
               disabled={isMultiPanelView || dashboardItems.length < 1}
+              id="h-add-panel"
             />
           </div>
         </div>

package/src/components/DiffLegend.tsx

@@ -74,7 +74,7 @@ const DiffLegend = (): JSX.Element => {
   };
 
   return (
-    <div className="mt-1 mb-2 hidden md:block">
+    <div className="mt-1 mb-2 hidden md:block" id="h-diff-legend">
       <div ref={setReferenceElement} className="flex items-center justify-center">
         <span>Better</span>
         <DiffLegendBar onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />