@parca/profile 0.16.0 → 0.16.22

package/dist/ProfileSelector/index.js

@@ -0,0 +1,133 @@
+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, jsxs as _jsxs, Fragment as _Fragment } 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 { Query } from '@parca/parser';
+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';
+import cx from 'classnames';
+import ProfileTypeSelector from '../ProfileTypeSelector/index';
+export var useProfileTypes = function (client) {
+    var _a = useState(undefined), result = _a[0], setResult = _a[1];
+    var _b = useState(undefined), error = _b[0], setError = _b[1];
+    var _c = useState(true), loading = _c[0], setLoading = _c[1];
+    var metadata = useGrpcMetadata();
+    useEffect(function () {
+        if (!loading) {
+            return;
+        }
+        var call = client.profileTypes({}, { meta: metadata });
+        call.response
+            .then(function (response) { return setResult(response); })
+            .catch(function (error) { return setError(error); })
+            .finally(function () { return setLoading(false); });
+    }, [client, metadata, loading]);
+    return { loading: loading, data: result, error: error };
+};
+var ProfileSelector = function (_a) {
+    var queryClient = _a.queryClient, querySelection = _a.querySelection, selectProfile = _a.selectProfile, selectQuery = _a.selectQuery, closeProfile = _a.closeProfile, enforcedProfileName = _a.enforcedProfileName, profileSelection = _a.profileSelection, comparing = _a.comparing, onCompareProfile = _a.onCompareProfile;
+    var _b = useProfileTypes(queryClient), profileTypesLoading = _b.loading, profileTypesData = _b.data, error = _b.error;
+    var _c = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection)), timeRangeSelection = _c[0], setTimeRangeSelection = _c[1];
+    var _d = useState(querySelection.expression), queryExpressionString = _d[0], setQueryExpressionString = _d[1];
+    useEffect(function () {
+        if (enforcedProfileName !== '') {
+            var _a = Query.parse(querySelection.expression).setProfileName(enforcedProfileName), q = _a[0], changed = _a[1];
+            if (changed) {
+                setQueryExpressionString(q.toString());
+                return;
+            }
+        }
+        setQueryExpressionString(querySelection.expression);
+    }, [enforcedProfileName, querySelection.expression]);
+    var enforcedProfileNameQuery = function () {
+        var pq = Query.parse(queryExpressionString);
+        var q = pq.setProfileName(enforcedProfileName)[0];
+        return q;
+    };
+    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 setQueryExpression = function () {
+        setNewQueryExpression(query.toString(), false);
+    };
+    var addLabelMatcher = function (key, value) {
+        var _a = Query.parse(queryExpressionString).setMatcher(key, value), newQuery = _a[0], changed = _a[1];
+        if (changed) {
+            setNewQueryExpression(newQuery.toString(), false);
+        }
+    };
+    var setMergedSelection = function () {
+        setNewQueryExpression(queryExpressionString, true);
+    };
+    var setMatchersString = function (matchers) {
+        var newExpressionString = "".concat(selectedProfileName, "{").concat(matchers, "}");
+        setQueryExpressionString(newExpressionString);
+    };
+    var setProfileName = function (profileName) {
+        if (profileName === undefined) {
+            return;
+        }
+        var _a = query.setProfileName(profileName), newQuery = _a[0], changed = _a[1];
+        if (changed) {
+            var q = newQuery.toString();
+            setQueryExpressionString(q);
+        }
+    };
+    var handleCompareClick = function () { return onCompareProfile(); };
+    var searchDisabled = queryExpressionString === undefined ||
+        queryExpressionString === '' ||
+        queryExpressionString === '{}';
+    var mergeDisabled = selectedProfileName === '' || querySelection.expression === undefined;
+    var compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
+    return (_jsxs(Card, { children: [_jsx(Card.Header, __assign({ className: cx(comparing && 'overflow-x-scroll') }, { children: _jsxs("div", __assign({ className: "flex space-x-4" }, { children: [comparing && (_jsx("button", __assign({ type: "button", onClick: function () { return closeProfile(); } }, { children: _jsx(CloseIcon, {}) }))), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), searchDisabled ? (_jsx("div", { children: _jsx(Button, __assign({ disabled: true }, { children: "Search" })) })) : (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, __assign({ style: { marginRight: 5 } }, { children: [_jsx(MergeButton, { disabled: mergeDisabled, onClick: setMergedSelection }), !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick }))] })), _jsx("div", { children: _jsx(Button, __assign({ onClick: function (e) {
+                                            e.preventDefault();
+                                            setQueryExpression();
+                                        } }, { children: "Search" })) })] }))] })) })), !querySelection.merge && (_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) {
+                        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." }) }))) })) }))] }));
+};
+export default ProfileSelector;

package/dist/ProfileSource.d.ts

@@ -0,0 +1,88 @@
+import { ProfileType } from '@parca/parser';
+import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
+export interface ProfileSource {
+    QueryRequest: () => QueryRequest;
+    ProfileType: () => ProfileType;
+    DiffSelection: () => ProfileDiffSelection;
+    Describe: () => JSX.Element;
+    toString: () => string;
+}
+export interface ProfileSelection {
+    ProfileName: () => string;
+    HistoryParams: () => {
+        [key: string]: any;
+    };
+    ProfileSource: () => ProfileSource;
+    Type: () => string;
+}
+export declare const timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
+export declare const timeFormatShort = "MMM d, h:mma";
+export declare function ParamsString(params: {
+    [key: string]: string;
+}): string;
+export declare function SuffixParams(params: {
+    [key: string]: any;
+}, suffix: string): {
+    [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): ProfileSelection | null;
+export declare class SingleProfileSelection implements ProfileSelection {
+    profileName: string;
+    labels: Label[];
+    time: number;
+    constructor(profileName: string, labels: Label[], time: number);
+    ProfileName(): string;
+    HistoryParams(): {
+        [key: string]: any;
+    };
+    Type(): string;
+    ProfileSource(): ProfileSource;
+}
+export declare class MergedProfileSelection implements ProfileSelection {
+    from: number;
+    to: number;
+    query: string;
+    constructor(from: number, to: number, query: string);
+    ProfileName(): string;
+    HistoryParams(): {
+        [key: string]: string;
+    };
+    Type(): string;
+    ProfileSource(): ProfileSource;
+}
+export declare class SingleProfileSource implements ProfileSource {
+    profName: string;
+    labels: Label[];
+    time: number;
+    constructor(profileName: string, labels: Label[], time: number);
+    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;
+    constructor(a: ProfileSource, b: ProfileSource);
+    DiffSelection(): ProfileDiffSelection;
+    QueryRequest(): QueryRequest;
+    ProfileType(): ProfileType;
+    Describe(): JSX.Element;
+    toString(): string;
+}
+export declare class MergedProfileSource implements ProfileSource {
+    from: number;
+    to: number;
+    query: string;
+    constructor(from: number, to: number, query: string);
+    DiffSelection(): ProfileDiffSelection;
+    QueryRequest(): QueryRequest;
+    ProfileType(): ProfileType;
+    Describe(): JSX.Element;
+    toString(): string;
+}

package/dist/ProfileSource.js

@@ -0,0 +1,239 @@
+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 { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatDate } from '@parca/functions';
+import { Query, ProfileType } from '@parca/parser';
+import { QueryRequest_Mode, QueryRequest_ReportType, ProfileDiffSelection_Mode, Timestamp, } from '@parca/client';
+export var timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
+export var timeFormatShort = 'MMM d, h:mma';
+export function ParamsString(params) {
+    return Object.keys(params)
+        .map(function (key) {
+        return "".concat(key, "=").concat(params[key]);
+    })
+        .join('&');
+}
+export function SuffixParams(params, suffix) {
+    return Object.fromEntries(Object.entries(params).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return ["".concat(key).concat(suffix), value];
+    }));
+}
+export function ParseLabels(labels) {
+    return labels.map(function (labelString) {
+        var parts = labelString.split('=', 2);
+        return { name: parts[0], value: parts[1] };
+    });
+}
+export function ProfileSelectionFromParams(expression, from, to, merge, labels, profileName, time) {
+    if (merge !== undefined &&
+        merge === 'true' &&
+        from !== undefined &&
+        to !== undefined &&
+        expression !== undefined) {
+        return new MergedProfileSelection(parseInt(from), parseInt(to), expression);
+    }
+    if (labels !== undefined && time !== undefined && profileName !== undefined) {
+        return new SingleProfileSelection(profileName, ParseLabels(labels), parseInt(time));
+    }
+    return null;
+}
+var SingleProfileSelection = /** @class */ (function () {
+    function SingleProfileSelection(profileName, labels, time) {
+        this.profileName = profileName;
+        this.labels = labels;
+        this.time = time;
+    }
+    SingleProfileSelection.prototype.ProfileName = function () {
+        return this.profileName;
+    };
+    SingleProfileSelection.prototype.HistoryParams = function () {
+        return {
+            profile_name: this.profileName,
+            labels: this.labels.map(function (label) { return "".concat(label.name, "=").concat(label.value); }),
+            time: this.time,
+        };
+    };
+    SingleProfileSelection.prototype.Type = function () {
+        return 'single';
+    };
+    SingleProfileSelection.prototype.ProfileSource = function () {
+        return new SingleProfileSource(this.profileName, this.labels, this.time);
+    };
+    return SingleProfileSelection;
+}());
+export { SingleProfileSelection };
+var MergedProfileSelection = /** @class */ (function () {
+    function MergedProfileSelection(from, to, query) {
+        this.from = from;
+        this.to = to;
+        this.query = query;
+    }
+    MergedProfileSelection.prototype.ProfileName = function () {
+        return Query.parse(this.query).profileName();
+    };
+    MergedProfileSelection.prototype.HistoryParams = function () {
+        return {
+            mode: 'merge',
+            from: this.from.toString(),
+            to: this.to.toString(),
+            query: this.query,
+        };
+    };
+    MergedProfileSelection.prototype.Type = function () {
+        return 'merge';
+    };
+    MergedProfileSelection.prototype.ProfileSource = function () {
+        return new MergedProfileSource(this.from, this.to, this.query);
+    };
+    return MergedProfileSelection;
+}());
+export { MergedProfileSelection };
+var SingleProfileSource = /** @class */ (function () {
+    function SingleProfileSource(profileName, labels, time) {
+        this.profName = profileName;
+        this.labels = labels;
+        this.time = time;
+    }
+    SingleProfileSource.prototype.query = function () {
+        var seriesQuery = this.profName +
+            this.labels.reduce(function (agg, label) {
+                return agg + "".concat(label.name, "=\"").concat(label.value, "\",");
+            }, '{');
+        return seriesQuery + '}';
+    };
+    SingleProfileSource.prototype.DiffSelection = function () {
+        return {
+            options: {
+                oneofKind: 'single',
+                single: {
+                    time: Timestamp.fromDate(new Date(this.time)),
+                    query: this.query(),
+                },
+            },
+            mode: ProfileDiffSelection_Mode.SINGLE_UNSPECIFIED,
+        };
+    };
+    SingleProfileSource.prototype.QueryRequest = function () {
+        return {
+            options: {
+                oneofKind: 'single',
+                single: {
+                    time: Timestamp.fromDate(new Date(this.time)),
+                    query: this.query(),
+                },
+            },
+            reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+            mode: QueryRequest_Mode.SINGLE_UNSPECIFIED,
+        };
+    };
+    SingleProfileSource.prototype.ProfileType = function () {
+        return ProfileType.fromString(this.profName);
+    };
+    SingleProfileSource.prototype.profileName = function () {
+        return this.profName;
+    };
+    SingleProfileSource.prototype.Describe = function () {
+        var profileName = this.profileName();
+        return (_jsxs(_Fragment, { children: [_jsxs("p", { children: [profileName !== '' ? _jsxs("a", { children: [profileName, " profile of "] }) : '', '  ', this.labels
+                            .filter(function (label) { return label.name !== '__name__'; })
+                            .map(function (label) { return (_jsx("button", __assign({ type: "button", className: "inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3" }, { children: "".concat(label.name, "=\"").concat(label.value, "\"") }), label.name)); })] }), _jsx("p", { children: formatDate(this.time, timeFormat) })] }));
+    };
+    SingleProfileSource.prototype.stringLabels = function () {
+        return this.labels
+            .filter(function (label) { return label.name !== '__name__'; })
+            .map(function (label) { return "".concat(label.name, "=").concat(label.value); });
+    };
+    SingleProfileSource.prototype.toString = function () {
+        return "single profile of type ".concat(this.profileName(), " with labels ").concat(this.stringLabels().join(', '), " collected at ").concat(formatDate(this.time, timeFormat));
+    };
+    return SingleProfileSource;
+}());
+export { SingleProfileSource };
+var ProfileDiffSource = /** @class */ (function () {
+    function ProfileDiffSource(a, b) {
+        this.a = a;
+        this.b = b;
+    }
+    ProfileDiffSource.prototype.DiffSelection = function () {
+        throw new Error('Method not implemented.');
+    };
+    ProfileDiffSource.prototype.QueryRequest = function () {
+        return {
+            options: {
+                oneofKind: 'diff',
+                diff: {
+                    a: this.a.DiffSelection(),
+                    b: this.b.DiffSelection(),
+                },
+            },
+            reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+            mode: QueryRequest_Mode.DIFF,
+        };
+    };
+    ProfileDiffSource.prototype.ProfileType = function () {
+        return this.a.ProfileType();
+    };
+    ProfileDiffSource.prototype.Describe = function () {
+        return (_jsx(_Fragment, { children: _jsx("p", { children: "Browse the comparison" }) }));
+    };
+    ProfileDiffSource.prototype.toString = function () {
+        return "".concat(this.a.toString(), " compared with ").concat(this.b.toString());
+    };
+    return ProfileDiffSource;
+}());
+export { ProfileDiffSource };
+var MergedProfileSource = /** @class */ (function () {
+    function MergedProfileSource(from, to, query) {
+        this.from = from;
+        this.to = to;
+        this.query = query;
+    }
+    MergedProfileSource.prototype.DiffSelection = function () {
+        return {
+            options: {
+                oneofKind: 'merge',
+                merge: {
+                    start: Timestamp.fromDate(new Date(this.from)),
+                    end: Timestamp.fromDate(new Date(this.to)),
+                    query: this.query,
+                },
+            },
+            mode: ProfileDiffSelection_Mode.MERGE,
+        };
+    };
+    MergedProfileSource.prototype.QueryRequest = function () {
+        return {
+            options: {
+                oneofKind: 'merge',
+                merge: {
+                    start: Timestamp.fromDate(new Date(this.from)),
+                    end: Timestamp.fromDate(new Date(this.to)),
+                    query: this.query,
+                },
+            },
+            reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+            mode: QueryRequest_Mode.MERGE,
+        };
+    };
+    MergedProfileSource.prototype.ProfileType = function () {
+        return ProfileType.fromString(Query.parse(this.query).profileName());
+    };
+    MergedProfileSource.prototype.Describe = function () {
+        return (_jsxs("a", { children: ["Merge of \"", this.query, "\" from ", formatDate(this.from, timeFormat), " to", ' ', formatDate(this.to, timeFormat)] }));
+    };
+    MergedProfileSource.prototype.toString = function () {
+        return "merged profiles of query \"".concat(this.query, "\" from ").concat(formatDate(this.from, timeFormat), " to ").concat(formatDate(this.to, timeFormat));
+    };
+    return MergedProfileSource;
+}());
+export { MergedProfileSource };

package/dist/ProfileTypeSelector/index.d.ts

@@ -0,0 +1,20 @@
+import { ProfileTypesResponse } from '@parca/client';
+import { RpcError } from '@protobuf-ts/runtime-rpc';
+interface WellKnownProfile {
+    name: string;
+    help: string;
+}
+interface WellKnownProfiles {
+    [key: string]: WellKnownProfile;
+}
+export declare const wellKnownProfiles: WellKnownProfiles;
+interface Props {
+    profileTypesData?: ProfileTypesResponse;
+    loading?: boolean;
+    error: RpcError | undefined;
+    selectedKey: string | undefined;
+    flexibleKnownProfilesDetection?: boolean;
+    onSelection: (value: string | undefined) => void;
+}
+declare const ProfileTypeSelector: ({ profileTypesData, loading, error, selectedKey, onSelection, flexibleKnownProfilesDetection, }: Props) => JSX.Element;
+export default ProfileTypeSelector;

package/dist/ProfileTypeSelector/index.js

@@ -0,0 +1,138 @@
+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 { useMemo } from 'react';
+import { Select } from '@parca/components';
+export var wellKnownProfiles = {
+    'block:contentions:count:contentions:count': {
+        name: 'Block Contentions Total',
+        help: 'Stack traces that led to blocking on synchronization primitives.',
+    },
+    'block:delay:nanoseconds:contentions:count': {
+        name: 'Block Contention Time Total',
+        help: 'Time delayed stack traces caused by blocking on synchronization primitives.',
+    },
+    // Unfortunately, fgprof does not set the period type and unit.
+    'fgprof:samples:count::': {
+        name: 'Fgprof Samples Total',
+        help: 'CPU profile samples observed regardless of their current On/Off CPU scheduling status',
+    },
+    // Unfortunately, fgprof does not set the period type and unit.
+    'fgprof:time:nanoseconds::': {
+        name: 'Fgprof Samples Time Total',
+        help: 'CPU profile measured regardless of their current On/Off CPU scheduling status in nanoseconds',
+    },
+    'goroutine:goroutine:count:goroutine:count': {
+        name: 'Goroutine Created Total',
+        help: 'Stack traces that created all current goroutines.',
+    },
+    'memory:alloc_objects:count:space:bytes': {
+        name: 'Memory Allocated Objects Total',
+        help: 'A sampling of all past memory allocations by objects.',
+    },
+    'memory:alloc_space:bytes:space:bytes': {
+        name: 'Memory Allocated Bytes Total',
+        help: 'A sampling of all past memory allocations in bytes.',
+    },
+    'memory:alloc_objects:count:space:bytes:delta': {
+        name: 'Memory Allocated Objects Delta',
+        help: 'A sampling of all memory allocations during the observation by objects.',
+    },
+    'memory:alloc_space:bytes:space:bytes:delta': {
+        name: 'Memory Allocated Bytes Delta',
+        help: 'A sampling of all memory allocations during the observation in bytes.',
+    },
+    'memory:inuse_objects:count:space:bytes': {
+        name: 'Memory In-Use Objects',
+        help: 'A sampling of memory allocations of live objects by objects.',
+    },
+    'memory:inuse_space:bytes:space:bytes': {
+        name: 'Memory In-Use Bytes',
+        help: 'A sampling of memory allocations of live objects by bytes.',
+    },
+    'mutex:contentions:count:contentions:count': {
+        name: 'Mutex Contentions Total',
+        help: 'Stack traces of holders of contended mutexes.',
+    },
+    'mutex:delay:nanoseconds:contentions:count': {
+        name: 'Mutex Contention Time Total',
+        help: 'Time delayed stack traces caused by contended mutexes.',
+    },
+    'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta': {
+        name: 'Process CPU Nanoseconds',
+        help: 'CPU profile measured by the process itself in nanoseconds.',
+    },
+    'process_cpu:samples:count:cpu:nanoseconds:delta': {
+        name: 'Process CPU Samples',
+        help: 'CPU profile samples observed by the process itself.',
+    },
+    'parca_agent_cpu:samples:count:cpu:nanoseconds:delta': {
+        name: 'CPU Samples',
+        help: 'CPU profile samples observed by Parca Agent.',
+    },
+};
+function flexibleWellKnownProfileMatching(name) {
+    var prefixExcludedName = name.split(':').slice(1).join(':');
+    var requiredKey = Object.keys(wellKnownProfiles).find(function (key) {
+        if (key.endsWith(prefixExcludedName)) {
+            return true;
+        }
+        return false;
+    });
+    return requiredKey != null ? wellKnownProfiles[requiredKey] : undefined;
+}
+function profileSelectElement(name, flexibleKnownProfilesDetection) {
+    var wellKnown = !flexibleKnownProfilesDetection
+        ? wellKnownProfiles[name]
+        : flexibleWellKnownProfileMatching(name);
+    if (wellKnown === undefined)
+        return { active: _jsx(_Fragment, { children: name }), expanded: _jsx(_Fragment, { children: name }) };
+    var title = wellKnown.name.replace(/ /g, '\u00a0');
+    return {
+        active: _jsx(_Fragment, { children: title }),
+        expanded: (_jsxs(_Fragment, { children: [_jsx("span", { children: title }), _jsx("br", {}), _jsx("span", __assign({ className: "text-xs" }, { children: wellKnown.help }))] })),
+    };
+}
+var ProfileTypeSelector = function (_a) {
+    var profileTypesData = _a.profileTypesData, _b = _a.loading, loading = _b === void 0 ? false : _b, error = _a.error, selectedKey = _a.selectedKey, onSelection = _a.onSelection, _c = _a.flexibleKnownProfilesDetection, flexibleKnownProfilesDetection = _c === void 0 ? false : _c;
+    var profileNames = useMemo(function () {
+        return (error === undefined || error == null) &&
+            profileTypesData !== undefined &&
+            profileTypesData != null
+            ? profileTypesData.types
+                .map(function (type) {
+                return "".concat(type.name, ":").concat(type.sampleType, ":").concat(type.sampleUnit, ":").concat(type.periodType, ":").concat(type.periodUnit).concat(type.delta ? ':delta' : '');
+            })
+                .sort(function (a, b) {
+                return a.localeCompare(b);
+            })
+            : [];
+    }, [profileTypesData, error]);
+    var profileLabels = profileNames.map(function (name) { return ({
+        key: name,
+        element: profileSelectElement(name, flexibleKnownProfilesDetection),
+    }); });
+    return (_jsx(Select, { items: profileLabels, selectedKey: selectedKey, onSelection: onSelection, placeholder: "Select profile...", loading: loading }));
+};
+export default ProfileTypeSelector;

package/dist/ProfileView.d.ts

@@ -0,0 +1,39 @@
+import { QueryServiceClient, Flamegraph, Top, Callgraph } from '@parca/client';
+import { ProfileSource } from './ProfileSource';
+import './ProfileView.styles.css';
+declare type NavigateFunction = (path: string, queryParams: any) => void;
+interface FlamegraphData {
+    loading: boolean;
+    data?: Flamegraph;
+    error?: any;
+}
+interface TopTableData {
+    loading: boolean;
+    data?: Top;
+    error?: any;
+}
+interface CallgraphData {
+    loading: boolean;
+    data?: Callgraph;
+    error?: any;
+}
+export declare type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
+interface ProfileVisState {
+    currentView: VisualizationType;
+    setCurrentView: (view: VisualizationType) => void;
+}
+interface ProfileViewProps {
+    flamegraphData?: FlamegraphData;
+    topTableData?: TopTableData;
+    callgraphData?: CallgraphData;
+    sampleUnit: string;
+    profileVisState: ProfileVisState;
+    profileSource?: ProfileSource;
+    queryClient?: QueryServiceClient;
+    navigateTo?: NavigateFunction;
+    compare?: boolean;
+    onDownloadPProf: () => void;
+}
+export declare const useProfileVisState: () => ProfileVisState;
+export declare const ProfileView: ({ flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, profileVisState, onDownloadPProf, }: ProfileViewProps) => JSX.Element;
+export {};