@parca/profile 0.16.114 → 0.16.116

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.116 (2023-02-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.115](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.114...@parca/profile@0.16.115) (2023-02-13)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.114](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.113...@parca/profile@0.16.114) (2023-02-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/index.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { DateTimeRange } from '@parca/components';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
-import { SingleProfileSelection } from '..';
+import { MergedProfileSelection } from '..';
 interface Props {
     data: MetricsSeriesPb[];
     from: number;
     to: number;
-    profile: SingleProfileSelection | null;
+    profile: MergedProfileSelection | null;
     onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
     onLabelClick: (labelName: string, labelValue: string) => void;
     setTimeRange: (range: DateTimeRange) => void;

package/dist/MetricsGraph/index.js

@@ -28,7 +28,7 @@ import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { DateTimeRange, useKeyDown } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
-import { formatForTimespan } from '@parca/functions/time';
+import { formatForTimespan } from '@parca/functions';
 import { valueFormatter, formatDate, sanitizeHighlightedValues } from '@parca/functions';
 import MetricsSeries from '../MetricsSeries';
 import MetricsCircle from '../MetricsCircle';
@@ -56,7 +56,8 @@ export var RawMetricsGraph = function (_a) {
     var _e = useState([0, 0]), pos = _e[0], setPos = _e[1];
     var metricPointRef = useRef(null);
     var isShiftDown = useKeyDown().isShiftDown;
-    var time = parseFloat(profile === null || profile === void 0 ? void 0 : profile.HistoryParams().time);
+    // the time of the selected point is the start of the merge window
+    var time = parseFloat(profile === null || profile === void 0 ? void 0 : profile.HistoryParams().merge_from);
     if (width === undefined || width == null) {
         width = 0;
     }

package/dist/ProfileExplorer/index.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -22,6 +22,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 // 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 { useEffect, useState } from 'react';
 import { useProfileTypes } from '../ProfileSelector';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
@@ -62,11 +63,45 @@ var swapQueryParameters = function (o) {
 var ProfileExplorerApp = function (_a) {
     var _b, _c;
     var queryClient = _a.queryClient, queryParams = _a.queryParams, navigateTo = _a.navigateTo;
-    var _d = useProfileTypes(queryClient), profileTypesLoading = _d.loading, profileTypesData = _d.data, error = _d.error;
-    var _e = useParcaContext(), loader = _e.loader, noDataPrompt = _e.noDataPrompt;
+    var _d = useProfileTypes(queryClient), profileTypesLoading = _d.loading, profileTypesData = _d.data, profileTypesError = _d.error;
+    var _e = useParcaContext(), loader = _e.loader, noDataPrompt = _e.noDataPrompt, onError = _e.onError;
+    useEffect(function () {
+        if (profileTypesError !== undefined && profileTypesError !== null) {
+            onError === null || onError === void 0 ? void 0 : onError(profileTypesError, 'ProfileExplorer');
+        }
+    }, [profileTypesError, onError]);
     /* eslint-disable @typescript-eslint/naming-convention */
-    var from_a = queryParams.from_a, to_a = queryParams.to_a, merge_a = queryParams.merge_a, profile_name_a = queryParams.profile_name_a, labels_a = queryParams.labels_a, time_a = queryParams.time_a, time_selection_a = queryParams.time_selection_a, compare_a = queryParams.compare_a, from_b = queryParams.from_b, to_b = queryParams.to_b, merge_b = queryParams.merge_b, profile_name_b = queryParams.profile_name_b, labels_b = queryParams.labels_b, time_b = queryParams.time_b, time_selection_b = queryParams.time_selection_b, compare_b = queryParams.compare_b, filter_by_function = queryParams.filter_by_function, dashboard_items = queryParams.dashboard_items;
+    var from_a = queryParams.from_a, to_a = queryParams.to_a, profile_name_a = queryParams.profile_name_a, labels_a = queryParams.labels_a, merge_from_a = queryParams.merge_from_a, merge_to_a = queryParams.merge_to_a, time_selection_a = queryParams.time_selection_a, compare_a = queryParams.compare_a, from_b = queryParams.from_b, to_b = queryParams.to_b, profile_name_b = queryParams.profile_name_b, labels_b = queryParams.labels_b, merge_from_b = queryParams.merge_from_b, merge_to_b = queryParams.merge_to_b, time_selection_b = queryParams.time_selection_b, compare_b = queryParams.compare_b, filter_by_function = queryParams.filter_by_function, dashboard_items = queryParams.dashboard_items;
     /* eslint-enable @typescript-eslint/naming-convention */
+    var _f = useState(null), profileA = _f[0], setProfileA = _f[1];
+    var _g = useState(null), profileB = _g[0], setProfileB = _g[1];
+    useEffect(function () {
+        var _a;
+        var mergeFrom = merge_from_a !== null && merge_from_a !== void 0 ? merge_from_a : undefined;
+        var mergeTo = merge_to_a !== null && merge_to_a !== void 0 ? merge_to_a : undefined;
+        var labels = (_a = labels_a) !== null && _a !== void 0 ? _a : [''];
+        var profileA = ProfileSelectionFromParams(expression_a, from_a, to_a, mergeFrom, mergeTo, labels, filter_by_function);
+        setProfileA(profileA);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [merge_from_a, merge_to_a]);
+    useEffect(function () {
+        var _a;
+        var mergeFrom = merge_from_b !== null && merge_from_b !== void 0 ? merge_from_b : undefined;
+        var mergeTo = merge_to_b !== null && merge_to_b !== void 0 ? merge_to_b : undefined;
+        var labels = (_a = labels_b) !== null && _a !== void 0 ? _a : [''];
+        var profileB = ProfileSelectionFromParams(expression_b, from_b, to_b, mergeFrom, mergeTo, labels, filter_by_function);
+        setProfileB(profileB);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [merge_from_b, merge_to_b]);
+    if (profileTypesLoading) {
+        return _jsx(_Fragment, { children: loader });
+    }
+    if ((profileTypesData === null || profileTypesData === void 0 ? void 0 : profileTypesData.types.length) === 0) {
+        return _jsx(_Fragment, { children: noDataPrompt });
+    }
+    if (profileTypesError !== undefined && profileTypesError !== null) {
+        return (_jsxs("div", __assign({ className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role: "alert" }, { children: [_jsx("strong", __assign({ className: "font-bold" }, { children: "Error! " })), _jsx("span", __assign({ className: "block sm:inline" }, { children: profileTypesError.message }))] })));
+    }
     var sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
     time_selection_a = sanitizedRange.time_selection_a;
     from_a = sanitizedRange.from_a;
@@ -90,32 +125,20 @@ var ProfileExplorerApp = function (_a) {
     var selectProfileB = function (p) {
         return selectProfile(p, '_b');
     };
-    if (profileTypesLoading) {
-        return _jsx(_Fragment, { children: loader });
-    }
-    if ((profileTypesData === null || profileTypesData === void 0 ? void 0 : profileTypesData.types.length) === 0) {
-        return _jsx(_Fragment, { children: noDataPrompt });
-    }
+    var queryA = {
+        expression: expression_a,
+        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') {
-        var query_1 = {
-            expression: expression_a,
-            from: parseInt(from_a),
-            to: parseInt(to_a),
-            merge: merge_a === 'true',
-            profile_name: profile_name_a,
-            timeSelection: time_selection_a,
-        };
-        var profile_1 = ProfileSelectionFromParams(expression_a, from_a, to_a, merge_a, labels_a, profile_name_a, time_a, filter_by_function);
         var selectQuery = function (q) {
-            return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_a')), {
-                expression_a: encodeURIComponent(q.expression),
-                from_a: q.from.toString(),
-                to_a: q.to.toString(),
-                merge_a: q.merge,
-                time_selection_a: q.timeSelection,
-                dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS,
-            }));
+            var mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
+                ? { merge_from_a: q.mergeFrom, merge_to_a: q.mergeTo }
+                : {};
+            return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_a')), __assign({ expression_a: encodeURIComponent(q.expression), from_a: q.from.toString(), to_a: q.to.toString(), time_selection_a: q.timeSelection, dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }, mergeParams)));
         };
         var selectProfile_1 = function (p) {
             queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
@@ -124,70 +147,43 @@ var ProfileExplorerApp = function (_a) {
         var compareProfile = function () {
             var compareQuery = {
                 compare_a: 'true',
-                expression_a: encodeURIComponent(query_1.expression),
-                from_a: query_1.from.toString(),
-                to_a: query_1.to.toString(),
-                merge_a: query_1.merge,
-                time_selection_a: query_1.timeSelection,
-                profile_name_a: query_1.profile_name,
+                expression_a: encodeURIComponent(queryA.expression),
+                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(query_1.expression),
-                from_b: query_1.from.toString(),
-                to_b: query_1.to.toString(),
-                merge_b: query_1.merge,
-                time_selection_b: query_1.timeSelection,
-                profile_name_b: query_1.profile_name,
+                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 (profile_1 != null) {
-                compareQuery = __assign(__assign({}, SuffixParams(profile_1.HistoryParams(), '_a')), compareQuery);
+            if (profileA != null) {
+                compareQuery = __assign(__assign({}, SuffixParams(profileA.HistoryParams(), '_a')), compareQuery);
             }
             void navigateTo('/', __assign(__assign({}, compareQuery), { search_string: '', dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }));
         };
-        return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: query_1, profile: profile_1, selectQuery: selectQuery, selectProfile: selectProfile_1, compareProfile: compareProfile, navigateTo: navigateTo }));
+        return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: queryA, profile: profileA, selectQuery: selectQuery, selectProfile: selectProfile_1, compareProfile: compareProfile, navigateTo: navigateTo }));
     }
-    var queryA = {
-        expression: expression_a,
-        from: parseInt(from_a),
-        to: parseInt(to_a),
-        merge: merge_a === 'true',
-        timeSelection: time_selection_a,
-        profile_name: profile_name_a,
-    };
     var queryB = {
         expression: expression_b,
         from: parseInt(from_b),
         to: parseInt(to_b),
-        merge: merge_b === 'true',
         timeSelection: time_selection_b,
         profile_name: profile_name_b,
     };
-    var profileA = ProfileSelectionFromParams(expression_a, from_a, to_a, merge_a, labels_a, profile_name_a, time_a);
-    var profileB = ProfileSelectionFromParams(expression_b, from_b, to_b, merge_b, labels_b, profile_name_b, time_b);
     var selectQueryA = function (q) {
-        return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_a')), {
-            compare_a: 'true',
-            expression_a: encodeURIComponent(q.expression),
-            expression_b: encodeURIComponent(expression_b),
-            from_a: q.from.toString(),
-            to_a: q.to.toString(),
-            merge_a: q.merge,
-            time_selection_a: q.timeSelection,
-            filter_by_function: filter_by_function !== null && filter_by_function !== void 0 ? filter_by_function : '',
-            dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS,
-        }));
+        var mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
+            ? { merge_from_a: q.mergeFrom, merge_to_a: q.mergeTo }
+            : {};
+        return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_a')), __assign({ compare_a: 'true', expression_a: encodeURIComponent(q.expression), expression_b: encodeURIComponent(expression_b), from_a: q.from.toString(), to_a: q.to.toString(), time_selection_a: q.timeSelection, filter_by_function: filter_by_function !== null && filter_by_function !== void 0 ? filter_by_function : '', dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }, mergeParams)));
     };
     var selectQueryB = function (q) {
-        return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_b')), {
-            compare_b: 'true',
-            expression_b: encodeURIComponent(q.expression),
-            expression_a: encodeURIComponent(expression_a),
-            from_b: q.from.toString(),
-            to_b: q.to.toString(),
-            merge_b: q.merge,
-            time_selection_b: q.timeSelection,
-            filter_by_function: filter_by_function !== null && filter_by_function !== void 0 ? filter_by_function : '',
-            dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS,
-        }));
+        var mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
+            ? { merge_from_b: q.mergeFrom, merge_to_b: q.mergeTo }
+            : {};
+        return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_b')), __assign({ compare_b: 'true', expression_b: encodeURIComponent(q.expression), expression_a: encodeURIComponent(expression_a), from_b: q.from.toString(), to_b: q.to.toString(), time_selection_b: q.timeSelection, filter_by_function: filter_by_function !== null && filter_by_function !== void 0 ? filter_by_function : '', dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }, mergeParams)));
     };
     var closeProfile = function (card) {
         var newQueryParameters = queryParams;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ProfileSelection } from '..';
-import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
+import { QueryServiceClient, QueryRangeResponse, Label } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { DateTimeRange } from '@parca/components';
 interface ProfileMetricsGraphProps {
@@ -9,9 +9,9 @@ interface ProfileMetricsGraphProps {
     profile: ProfileSelection | null;
     from: number;
     to: number;
-    select: (source: ProfileSelection) => void;
     setTimeRange: (range: DateTimeRange) => void;
     addLabelMatcher: (key: string, value: string) => void;
+    onPointClick: (timestamp: number, labels: Label[], queryExpression: string) => void;
 }
 export interface IQueryRangeState {
     response: QueryRangeResponse | null;
@@ -19,5 +19,5 @@ export interface IQueryRangeState {
     error: RpcError | null;
 }
 export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number) => IQueryRangeState;
-declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, select, setTimeRange, addLabelMatcher, }: ProfileMetricsGraphProps) => JSX.Element;
+declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, }: ProfileMetricsGraphProps) => JSX.Element;
 export default ProfileMetricsGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -60,11 +60,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useState, useEffect } from 'react';
 import MetricsGraph from '../MetricsGraph';
-import { SingleProfileSelection } from '..';
-import { Timestamp } from '@parca/client';
+import { Timestamp, Duration } from '@parca/client';
 import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { Query } from '@parca/parser';
 import useDelayedLoader from '../useDelayedLoader';
+import { getStepDuration } from '@parca/functions';
 export var useQueryRange = function (client, queryExpression, start, end) {
     var _a = useState({
         response: null,
@@ -74,17 +74,19 @@ export var useQueryRange = function (client, queryExpression, start, end) {
     var metadata = useGrpcMetadata();
     useEffect(function () {
         void (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var call;
+            var stepDuration, call;
             return __generator(this, function (_a) {
                 setState({
                     response: null,
                     isLoading: true,
                     error: null,
                 });
+                stepDuration = getStepDuration(start, end);
                 call = client.queryRange({
                     query: queryExpression,
                     start: Timestamp.fromDate(new Date(start)),
                     end: Timestamp.fromDate(new Date(end)),
+                    step: Duration.create(stepDuration),
                     limit: 0,
                 }, { meta: metadata });
                 call.response
@@ -97,7 +99,7 @@ export var useQueryRange = function (client, queryExpression, start, end) {
     return state;
 };
 var ProfileMetricsGraph = function (_a) {
-    var queryClient = _a.queryClient, queryExpression = _a.queryExpression, profile = _a.profile, from = _a.from, to = _a.to, select = _a.select, setTimeRange = _a.setTimeRange, addLabelMatcher = _a.addLabelMatcher;
+    var queryClient = _a.queryClient, queryExpression = _a.queryExpression, profile = _a.profile, from = _a.from, to = _a.to, setTimeRange = _a.setTimeRange, addLabelMatcher = _a.addLabelMatcher, onPointClick = _a.onPointClick;
     var _b = useQueryRange(queryClient, queryExpression, from, to), isLoading = _b.isLoading, response = _b.response, error = _b.error;
     var isLoaderVisible = useDelayedLoader(isLoading);
     var _c = useParcaContext(), loader = _c.loader, onError = _c.onError;
@@ -115,7 +117,7 @@ var ProfileMetricsGraph = function (_a) {
     var series = response === null || response === void 0 ? void 0 : response.series;
     if (series !== null && series !== undefined && (series === null || series === void 0 ? void 0 : series.length) > 0) {
         var handleSampleClick = function (timestamp, _value, labels) {
-            select(new SingleProfileSelection(Query.parse(queryExpression).profileName(), labels, timestamp));
+            onPointClick(timestamp, labels, queryExpression);
         };
         return (_jsx("div", __assign({ className: "dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500", style: { borderWidth: 1 } }, { children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, onLabelClick: addLabelMatcher, width: 0, sampleUnit: Query.parse(queryExpression).profileType().sampleUnit }) })));
     }

package/dist/ProfileSelector/index.d.ts

@@ -6,8 +6,9 @@ export interface QuerySelection {
     expression: string;
     from: number;
     to: number;
-    merge: boolean;
     timeSelection: string;
+    mergeFrom?: number;
+    mergeTo?: number;
 }
 interface ProfileSelectorProps {
     queryClient: QueryServiceClient;

package/dist/ProfileSelector/index.js

@@ -23,10 +23,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Query } from '@parca/parser';
+import { getStepDuration, getStepDurationInMilliseconds } from '@parca/functions';
+import { MergedProfileSelection } from '..';
 import { useEffect, useState } from 'react';
 import ProfileMetricsGraph from '../ProfileMetricsGraph';
 import MatchersInput from '../MatchersInput/index';
-import MergeButton from './MergeButton';
 import CompareButton from './CompareButton';
 import { Card, DateTimeRangePicker, DateTimeRange, Button, ButtonGroup, useGrpcMetadata, } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
@@ -70,17 +71,21 @@ var ProfileSelector = function (_a) {
     };
     var query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
     var selectedProfileName = query.profileName();
-    var setNewQueryExpression = function (expr, merge) {
-        selectQuery({
-            expression: expr,
-            from: timeRangeSelection.getFromMs(),
-            to: timeRangeSelection.getToMs(),
-            merge: merge,
-            timeSelection: timeRangeSelection.getRangeKey(),
-        });
+    var setNewQueryExpression = function (expr) {
+        var query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
+        var delta = query.profileType().delta;
+        var from = timeRangeSelection.getFromMs();
+        var to = timeRangeSelection.getToMs();
+        var mergeParams = delta
+            ? {
+                mergeFrom: from,
+                mergeTo: to,
+            }
+            : {};
+        selectQuery(__assign({ expression: expr, from: from, to: to, timeSelection: timeRangeSelection.getRangeKey() }, mergeParams));
     };
     var setQueryExpression = function () {
-        setNewQueryExpression(query.toString(), false);
+        setNewQueryExpression(query.toString());
     };
     var addLabelMatcher = function (key, value) {
         // When a user clicks on a label on the metrics graph tooltip,
@@ -88,12 +93,9 @@ var ProfileSelector = function (_a) {
         var newValue = value.includes('\\') ? value.replaceAll('\\', '\\\\') : value;
         var _a = Query.parse(queryExpressionString).setMatcher(key, newValue), newQuery = _a[0], changed = _a[1];
         if (changed) {
-            setNewQueryExpression(newQuery.toString(), false);
+            setNewQueryExpression(newQuery.toString());
         }
     };
-    var setMergedSelection = function () {
-        setNewQueryExpression(queryExpressionString, true);
-    };
     var setMatchersString = function (matchers) {
         var newExpressionString = "".concat(selectedProfileName, "{").concat(matchers, "}");
         setQueryExpressionString(newExpressionString);
@@ -112,24 +114,28 @@ var ProfileSelector = function (_a) {
     var searchDisabled = queryExpressionString === undefined ||
         queryExpressionString === '' ||
         queryExpressionString === '{}';
-    var mergeDisabled = selectedProfileName === '' || querySelection.expression === undefined;
     var compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
-    return (_jsxs(Card, { children: [_jsxs(Card.Header, __assign({ className: "flex space-x-2" }, { children: [_jsxs("div", __assign({ className: "flex flex-wrap w-full justify-start space-x-2 space-y-1" }, { children: [_jsx("div", __assign({ className: "ml-2 mt-1" }, { children: _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error }) })), _jsx("div", __assign({ className: "w-full flex-1" }, { children: _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query }) })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsxs(_Fragment, { children: [_jsx(MergeButton, { disabled: mergeDisabled, onClick: setMergedSelection }), !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick }))] })), _jsx(Button, __assign({ disabled: searchDisabled, onClick: function (e) {
+    return (_jsxs(Card, { children: [_jsxs(Card.Header, __assign({ className: "flex space-x-2" }, { children: [_jsxs("div", __assign({ className: "flex flex-wrap w-full justify-start space-x-2 space-y-1" }, { children: [_jsx("div", __assign({ className: "ml-2 mt-1" }, { children: _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error }) })), _jsx("div", __assign({ className: "w-full flex-1" }, { children: _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, __assign({ disabled: searchDisabled, onClick: function (e) {
                                             e.preventDefault();
                                             setQueryExpression();
-                                        } }, { children: "Search" }))] })] })), _jsx("div", { children: comparing && (_jsx("button", __assign({ type: "button", onClick: function () { return closeProfile(); } }, { children: _jsx(CloseIcon, {}) }))) })] })), !querySelection.merge && (_jsx(Card.Body, { children: querySelection.expression !== undefined &&
+                                        } }, { children: "Search" }))] })] })), _jsx("div", { children: comparing && (_jsx("button", __assign({ type: "button", onClick: function () { return closeProfile(); } }, { children: _jsx(CloseIcon, {}) }))) })] })), _jsx(Card.Body, { children: querySelection.expression !== undefined &&
                     querySelection.expression.length > 0 &&
                     querySelection.from !== undefined &&
-                    querySelection.to !== undefined &&
-                    (profileSelection == null || profileSelection.Type() !== 'merge') ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, select: selectProfile, profile: profileSelection, setTimeRange: function (range) {
+                    querySelection.to !== undefined ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, setTimeRange: function (range) {
                         setTimeRangeSelection(range);
                         selectQuery({
                             expression: queryExpressionString,
                             from: range.getFromMs(),
                             to: range.getToMs(),
-                            merge: false,
                             timeSelection: range.getRangeKey(),
                         });
-                    }, addLabelMatcher: addLabelMatcher })) : (_jsx(_Fragment, { children: (profileSelection == null || profileSelection.Type() !== 'merge') && (_jsx("div", __assign({ className: "my-20 text-center" }, { children: _jsx("p", { children: "Run a query, and the result will be displayed here." }) }))) })) }))] }));
+                    }, addLabelMatcher: addLabelMatcher, onPointClick: function (timestamp, labels, queryExpression) {
+                        var stepDuration = getStepDuration(querySelection.from, querySelection.to);
+                        var stepDurationInMilliseconds = getStepDurationInMilliseconds(stepDuration);
+                        var isDeltaType = Query.parse(queryExpression).profileType().delta;
+                        var mergeFrom = timestamp;
+                        var mergeTo = isDeltaType ? mergeFrom + stepDurationInMilliseconds : mergeFrom;
+                        selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, labels, queryExpression));
+                    } })) : (_jsx(_Fragment, { children: profileSelection == null && (_jsx("div", __assign({ className: "my-20 text-center" }, { children: _jsx("p", { children: "Run a query, and the result will be displayed here." }) }))) })) })] }));
 };
 export default ProfileSelector;

package/dist/ProfileSource.d.ts

@@ -27,48 +27,21 @@ export declare function SuffixParams(params: {
     [key: string]: any;
 };
 export declare function ParseLabels(labels: string[]): Label[];
-export declare function ProfileSelectionFromParams(expression: string | undefined, from: string | undefined, to: string | undefined, merge: string | undefined, labels: string[] | undefined, profileName: string | undefined, time: string | undefined, filterQuery?: string): ProfileSelection | null;
-export declare class SingleProfileSelection implements ProfileSelection {
-    profileName: string;
-    labels: Label[];
-    time: number;
-    filterQuery: string | undefined;
-    constructor(profileName: string, labels: Label[], time: number, filterQuery?: string);
-    ProfileName(): string;
-    HistoryParams(): {
-        [key: string]: any;
-    };
-    Type(): string;
-    ProfileSource(): ProfileSource;
-}
+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 class MergedProfileSelection implements ProfileSelection {
-    from: number;
-    to: number;
+    mergeFrom: number;
+    mergeTo: number;
     query: string;
     filterQuery: string | undefined;
-    constructor(from: number, to: number, query: string, filterQuery?: string);
+    labels: Label[];
+    constructor(mergeFrom: number, mergeTo: number, labels: Label[], query: string, filterQuery?: string);
     ProfileName(): string;
     HistoryParams(): {
-        [key: string]: string;
+        [key: string]: any;
     };
     Type(): string;
     ProfileSource(): ProfileSource;
 }
-export declare class SingleProfileSource implements ProfileSource {
-    profName: string;
-    labels: Label[];
-    time: number;
-    filterQuery: string | undefined;
-    constructor(profileName: string, labels: Label[], time: number, filterQuery?: string);
-    query(): string;
-    DiffSelection(): ProfileDiffSelection;
-    QueryRequest(): QueryRequest;
-    ProfileType(): ProfileType;
-    profileName(): string;
-    Describe(): JSX.Element;
-    stringLabels(): string[];
-    toString(): string;
-}
 export declare class ProfileDiffSource implements ProfileSource {
     a: ProfileSource;
     b: ProfileSource;
@@ -81,14 +54,16 @@ export declare class ProfileDiffSource implements ProfileSource {
     toString(): string;
 }
 export declare class MergedProfileSource implements ProfileSource {
-    from: number;
-    to: number;
+    mergeFrom: number;
+    mergeTo: number;
+    labels: Label[];
     query: string;
     filterQuery: string | undefined;
-    constructor(from: number, to: number, query: string, filterQuery?: string);
+    constructor(mergeFrom: number, mergeTo: number, labels: Label[], query: string, filterQuery?: string);
     DiffSelection(): ProfileDiffSelection;
     QueryRequest(): QueryRequest;
     ProfileType(): ProfileType;
     Describe(): JSX.Element;
+    stringLabels(): string[];
     toString(): string;
 }