@parca/profile 0.16.0 → 0.16.22

package/dist/ProfileExplorer/index.js

@@ -0,0 +1,203 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProfileSelectionFromParams, SuffixParams } from '..';
+import ProfileExplorerSingle from './ProfileExplorerSingle';
+import ProfileExplorerCompare from './ProfileExplorerCompare';
+import { useAppSelector, useAppDispatch, setCompare, selectCompareMode, setSearchNodeString, store, } from '@parca/store';
+import { Provider, batch } from 'react-redux';
+import { DateTimeRange } from '@parca/components';
+import { useEffect } from 'react';
+var getExpressionAsAString = function (expression) {
+    var x = Array.isArray(expression) ? expression.join() : expression;
+    return x;
+};
+/* eslint-disable @typescript-eslint/naming-convention */
+var sanitizeDateRange = function (time_selection_a, from_a, to_a) {
+    var range = DateTimeRange.fromRangeKey(time_selection_a);
+    if (from_a == null && to_a == null) {
+        from_a = range.getFromMs();
+        to_a = range.getToMs();
+    }
+    return { time_selection_a: range.getRangeKey(), from_a: from_a, to_a: to_a };
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+var ProfileExplorerApp = function (_a) {
+    var _b, _c;
+    var queryClient = _a.queryClient, queryParams = _a.queryParams, navigateTo = _a.navigateTo;
+    var dispatch = useAppDispatch();
+    var compareMode = useAppSelector(selectCompareMode);
+    /* 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;
+    /* eslint-enable @typescript-eslint/naming-convention */
+    var sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
+    time_selection_a = sanitizedRange.time_selection_a;
+    from_a = sanitizedRange.from_a;
+    to_a = sanitizedRange.to_a;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var expression_a = getExpressionAsAString(queryParams.expression_a);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var expression_b = getExpressionAsAString(queryParams.expression_b);
+    if (((_b = queryParams === null || queryParams === void 0 ? void 0 : queryParams.expression_a) !== null && _b !== void 0 ? _b : '') !== '')
+        queryParams.expression_a = expression_a;
+    if (((_c = queryParams === null || queryParams === void 0 ? void 0 : queryParams.expression_b) !== null && _c !== void 0 ? _c : '') !== '')
+        queryParams.expression_b = expression_b;
+    useEffect(function () {
+        if (compare_a === 'true' && compare_b === 'true') {
+            dispatch(setCompare(true));
+        }
+        else {
+            dispatch(setCompare(false));
+        }
+    }, [dispatch, compare_a, compare_b]);
+    var filterSuffix = function (o, suffix) {
+        return Object.fromEntries(Object.entries(o).filter(function (_a) {
+            var key = _a[0];
+            return !key.endsWith(suffix);
+        }));
+    };
+    var swapQueryParameters = function (o) {
+        Object.entries(o).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (key.endsWith('_b')) {
+                o[key.slice(0, -2) + '_a'] = value;
+            }
+        });
+        return o;
+    };
+    var selectProfileA = function (p) {
+        queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+        queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
+        return navigateTo('/', __assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), '_a')));
+    };
+    var selectProfileB = function (p) {
+        queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+        queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
+        return navigateTo('/', __assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), '_b')));
+    };
+    // 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);
+        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,
+                currentProfileView: 'icicle',
+            }));
+        };
+        var selectProfile = function (p) {
+            queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+            return navigateTo('/', __assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), '_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,
+                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,
+            };
+            if (profile_1 != null) {
+                compareQuery = __assign(__assign({}, SuffixParams(profile_1.HistoryParams(), '_a')), compareQuery);
+            }
+            compareQuery = __assign(__assign({}, compareQuery), {
+                currentProfileView: 'icicle',
+            });
+            batch(function () {
+                dispatch(setCompare(!compareMode));
+                dispatch(setSearchNodeString(undefined));
+            });
+            void navigateTo('/', compareQuery);
+        };
+        return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: query_1, profile: profile_1, selectQuery: selectQuery, selectProfile: selectProfile, 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,
+        }));
+    };
+    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,
+        }));
+    };
+    var closeProfile = function (card) {
+        var newQueryParameters = queryParams;
+        if (card === 'A') {
+            newQueryParameters = swapQueryParameters(queryParams);
+        }
+        batch(function () {
+            dispatch(setCompare(!compareMode));
+            dispatch(setSearchNodeString(undefined));
+        });
+        return navigateTo('/', __assign(__assign({}, filterSuffix(newQueryParameters, '_b')), {
+            compare_a: 'false',
+        }));
+    };
+    return (_jsx(ProfileExplorerCompare, { queryClient: queryClient, queryA: queryA, queryB: queryB, profileA: profileA, profileB: profileB, selectQueryA: selectQueryA, selectQueryB: selectQueryB, selectProfileA: selectProfileA, selectProfileB: selectProfileB, closeProfile: closeProfile, navigateTo: navigateTo }));
+};
+var ProfileExplorer = function (_a) {
+    var queryClient = _a.queryClient, queryParams = _a.queryParams, navigateTo = _a.navigateTo;
+    var reduxStore = store().store;
+    return (_jsx(Provider, __assign({ store: reduxStore }, { children: _jsx(ProfileExplorerApp, { queryClient: queryClient, queryParams: queryParams, navigateTo: navigateTo }) })));
+};
+export default ProfileExplorer;

package/dist/ProfileIcicleGraph.d.ts

@@ -0,0 +1,10 @@
+import { Flamegraph } from '@parca/client';
+interface ProfileIcicleGraphProps {
+    width?: number;
+    graph: Flamegraph | undefined;
+    sampleUnit: string;
+    curPath: string[] | [];
+    setNewCurPath: (path: string[]) => void;
+}
+declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, }: ProfileIcicleGraphProps) => JSX.Element;
+export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector, selectCompareMode } from '@parca/store';
+import { useContainerDimensions } from '@parca/dynamicsize';
+import DiffLegend from './components/DiffLegend';
+import IcicleGraph from './IcicleGraph';
+var ProfileIcicleGraph = function (_a) {
+    var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit;
+    var compareMode = useAppSelector(selectCompareMode);
+    var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
+    if (graph === undefined)
+        return _jsx("div", { children: "no data..." });
+    var total = graph.total;
+    if (parseFloat(total) === 0)
+        return _jsx(_Fragment, { children: "Profile has no samples" });
+    return (_jsxs(_Fragment, { children: [compareMode && _jsx(DiffLegend, {}), _jsx("div", __assign({ ref: ref }, { children: _jsx(IcicleGraph, { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, graph: graph, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit }) }))] }));
+};
+export default ProfileIcicleGraph;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -0,0 +1,22 @@
+import { ProfileSelection } from '..';
+import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
+import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { DateTimeRange } from '@parca/components';
+interface ProfileMetricsGraphProps {
+    queryClient: QueryServiceClient;
+    queryExpression: string;
+    profile: ProfileSelection | null;
+    from: number;
+    to: number;
+    select: (source: ProfileSelection) => void;
+    setTimeRange: (range: DateTimeRange) => void;
+    addLabelMatcher: (key: string, value: string) => void;
+}
+export interface IQueryRangeResult {
+    response: QueryRangeResponse | null;
+    isLoading: boolean;
+    error: RpcError | null;
+}
+export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number) => IQueryRangeResult;
+declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, select, setTimeRange, addLabelMatcher, }: ProfileMetricsGraphProps) => JSX.Element;
+export default ProfileMetricsGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -0,0 +1,127 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useState, useEffect } from 'react';
+import MetricsGraph from '../MetricsGraph';
+import { SingleProfileSelection } from '..';
+import { Timestamp } from '@parca/client';
+import { useGrpcMetadata, useParcaTheme } from '@parca/components';
+import { Query } from '@parca/parser';
+import useDelayedLoader from '../useDelayedLoader';
+export var useQueryRange = function (client, queryExpression, start, end) {
+    var _a = useState(false), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = useState(null), error = _b[0], setError = _b[1];
+    var _c = useState(null), response = _c[0], setResponse = _c[1];
+    var metadata = useGrpcMetadata();
+    useEffect(function () {
+        void (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response_1, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoading(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, client.queryRange({
+                                query: queryExpression,
+                                start: Timestamp.fromDate(new Date(start)),
+                                end: Timestamp.fromDate(new Date(end)),
+                                limit: 0,
+                            }, { meta: metadata })];
+                    case 2:
+                        response_1 = (_a.sent()).response;
+                        setResponse(response_1);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        e_1 = _a.sent();
+                        setError(e_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [client, queryExpression, start, end, metadata]);
+    return { isLoading: isLoading, error: error, response: response };
+};
+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 _b = useQueryRange(queryClient, queryExpression, from, to), isLoading = _b.isLoading, response = _b.response, error = _b.error;
+    var isLoaderVisible = useDelayedLoader(isLoading);
+    var loader = useParcaTheme().loader;
+    if (isLoaderVisible) {
+        return _jsx(_Fragment, { children: loader });
+    }
+    if (error !== 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: error.message }))] })));
+    }
+    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));
+        };
+        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 }) })));
+    }
+    return (_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", __assign({ className: "py-20 flex justify-center" }, { children: _jsx("p", __assign({ className: "m-0" }, { children: "No data found. Try a different query." })) })) })));
+};
+export default ProfileMetricsGraph;

package/dist/ProfileSVG.module.css

@@ -0,0 +1,3 @@
+.ProfileSVG ::selection {
+  background: none;
+}

package/dist/ProfileSelector/CompareButton.d.ts

@@ -0,0 +1,5 @@
+declare const CompareButton: ({ disabled, onClick, }: {
+    disabled: boolean;
+    onClick: () => void;
+}) => JSX.Element;
+export default CompareButton;

package/dist/ProfileSelector/CompareButton.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useState } from 'react';
+import { usePopper } from 'react-popper';
+import { Button } from '@parca/components';
+var CompareButton = function (_a) {
+    var disabled = _a.disabled, onClick = _a.onClick;
+    var _b = useState(false), compareHover = _b[0], setCompareHover = _b[1];
+    var _c = useState(null), comparePopperReferenceElement = _c[0], setComparePopperReferenceElement = _c[1];
+    var _d = useState(null), comparePopperElement = _d[0], setComparePopperElement = _d[1];
+    var _e = usePopper(comparePopperReferenceElement, comparePopperElement, {
+        placement: 'bottom',
+    }), styles = _e.styles, attributes = _e.attributes;
+    var compareExplanation = 'Compare two profiles and see the relative difference between them more clearly.';
+    if (disabled)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", __assign({ ref: setComparePopperReferenceElement }, { children: [_jsx(Button, __assign({ color: "neutral", disabled: disabled, onClick: onClick, onMouseEnter: function () { return setCompareHover(true); }, onMouseLeave: function () { return setCompareHover(false); } }, { children: "Compare" })), compareHover && (_jsx("div", __assign({ ref: setComparePopperElement, style: styles.popper }, attributes.popper, { className: "z-50" }, { children: _jsx("div", __assign({ className: "flex" }, { children: _jsxs("div", __assign({ className: "relative mx-2" }, { children: [_jsx("svg", __assign({ className: "text-black h-1 w-full left-0", x: "0px", y: "0px", viewBox: "0 0 255 127.5" }, { children: _jsx("polygon", { className: "fill-current", points: "0,127.5 127.5,0 255,127.5" }) })), _jsx("div", __assign({ className: "bg-black text-white text-xs rounded py-2 px-3 right-0 w-40" }, { children: compareExplanation }))] })) })) })))] })));
+};
+export default CompareButton;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -0,0 +1,5 @@
+declare const MergeButton: ({ disabled, onClick, }: {
+    disabled: boolean;
+    onClick: () => void;
+}) => JSX.Element;
+export default MergeButton;

package/dist/ProfileSelector/MergeButton.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useState } from 'react';
+import { usePopper } from 'react-popper';
+import { Button } from '@parca/components';
+var MergeButton = function (_a) {
+    var disabled = _a.disabled, onClick = _a.onClick;
+    var _b = useState(false), mergeHover = _b[0], setMergeHover = _b[1];
+    var _c = useState(null), mergePopperReferenceElement = _c[0], setMergePopperReferenceElement = _c[1];
+    var _d = useState(null), mergePopperElement = _d[0], setMergePopperElement = _d[1];
+    var _e = usePopper(mergePopperReferenceElement, mergePopperElement, {
+        placement: 'bottom',
+    }), styles = _e.styles, attributes = _e.attributes;
+    var mergeExplanation = 'Merging allows combining all profile samples of a query into a single report.';
+    if (disabled)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", __assign({ ref: setMergePopperReferenceElement }, { children: [_jsx(Button, __assign({ color: "neutral", disabled: disabled, onClick: onClick, onMouseEnter: function () { return setMergeHover(true); }, onMouseLeave: function () { return setMergeHover(false); } }, { children: "Merge" })), mergeHover && (_jsx("div", __assign({ ref: setMergePopperElement, style: styles.popper }, attributes.popper, { className: "z-50" }, { children: _jsx("div", __assign({ className: "flex" }, { children: _jsxs("div", __assign({ className: "relative mx-2" }, { children: [_jsx("svg", __assign({ className: "text-black h-1 w-full left-0", x: "0px", y: "0px", viewBox: "0 0 255 127.5" }, { children: _jsx("polygon", { className: "fill-current", points: "0,127.5 127.5,0 255,127.5" }) })), _jsx("div", __assign({ className: "bg-black text-white text-xs rounded py-2 px-3 right-0 w-40 z-50" }, { children: mergeExplanation }))] })) })) })))] })));
+};
+export default MergeButton;

package/dist/ProfileSelector/index.d.ts

@@ -0,0 +1,29 @@
+import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
+import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { ProfileSelection } from '..';
+export interface QuerySelection {
+    expression: string;
+    from: number;
+    to: number;
+    merge: boolean;
+    timeSelection: string;
+}
+interface ProfileSelectorProps {
+    queryClient: QueryServiceClient;
+    querySelection: QuerySelection;
+    selectProfile: (source: ProfileSelection) => void;
+    selectQuery: (query: QuerySelection) => void;
+    closeProfile: () => void;
+    enforcedProfileName: string;
+    profileSelection: ProfileSelection | null;
+    comparing: boolean;
+    onCompareProfile: () => void;
+}
+export interface IProfileTypesResult {
+    loading: boolean;
+    data?: ProfileTypesResponse;
+    error?: RpcError;
+}
+export declare const useProfileTypes: (client: QueryServiceClient) => IProfileTypesResult;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, onCompareProfile, }: ProfileSelectorProps) => JSX.Element;
+export default ProfileSelector;