@parca/profile 0.16.0 → 0.16.22

package/dist/MatchersInput/index.js

@@ -0,0 +1,479 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 { Fragment, useState, useEffect } from 'react';
+import { Transition } from '@headlessui/react';
+import { Query } from '@parca/parser';
+import { usePopper } from 'react-popper';
+import cx from 'classnames';
+import { useParcaTheme, useGrpcMetadata } from '@parca/components';
+var Labels;
+(function (Labels) {
+    Labels["labelName"] = "labelName";
+    Labels["labelValue"] = "labelValue";
+    Labels["literal"] = "literal";
+})(Labels || (Labels = {}));
+// eslint-disable-next-line no-useless-escape
+var labelNameValueRe = /(^([a-z])\w+)(=~|=|!=|!~)(\")[a-zA-Z0-9_.-:]+(\")$/g; // labelNameValueRe matches the following: labelName=~"labelValue"
+var labelNameValueWithoutQuotesRe = /(^([a-z])\w+)(=~|=|!=|!~)[a-zA-Z0-9_.-:]+$/g; // labelNameValueWithoutQuotesRe matches the following: labelName=~labelValue
+var labelNameLiteralRe = /(^([a-z])\w+)(=~|=|!=|!~)/; // labelNameLiteralRe matches the following: labelName=~, labelName!=~, labelName=, labelName!=
+var literalRe = /(=~|=|!=|!~)/; // literalRe matches the following: =~, =, !=, !~
+var addQuoteMarks = function (labelValue) {
+    // eslint-disable-next-line no-useless-escape
+    return "\"".concat(labelValue, "\"");
+};
+export var useLabelNames = function (client) {
+    var _a = useState(true), loading = _a[0], setLoading = _a[1];
+    var _b = useState({}), result = _b[0], setResult = _b[1];
+    var metadata = useGrpcMetadata();
+    useEffect(function () {
+        var call = client.labels({ match: [] }, { meta: metadata });
+        setLoading(true);
+        call.response
+            .then(function (response) { return setResult({ response: response }); })
+            .catch(function (error) { return setResult({ error: error }); })
+            .finally(function () { return setLoading(false); });
+    }, [client, metadata]);
+    return { result: result, loading: loading };
+};
+var Suggestion = /** @class */ (function () {
+    function Suggestion(type, typeahead, value) {
+        this.type = type;
+        this.typeahead = typeahead;
+        this.value = value;
+    }
+    return Suggestion;
+}());
+var Suggestions = /** @class */ (function () {
+    function Suggestions() {
+        this.literals = [];
+        this.labelNames = [];
+        this.labelValues = [];
+    }
+    return Suggestions;
+}());
+var MatchersInput = function (_a) {
+    var queryClient = _a.queryClient, setMatchersString = _a.setMatchersString, runQuery = _a.runQuery, currentQuery = _a.currentQuery;
+    var _b = useState(null), divInputRef = _b[0], setDivInputRef = _b[1];
+    var _c = useState(null), popperElement = _c[0], setPopperElement = _c[1];
+    var _d = useState(null), localMatchers = _d[0], setLocalMatchers = _d[1];
+    var _e = useState(false), focusedInput = _e[0], setFocusedInput = _e[1];
+    var _f = useState(true), showSuggest = _f[0], setShowSuggest = _f[1];
+    var _g = useState(false), labelValuesLoading = _g[0], setLabelValuesLoading = _g[1];
+    var _h = useState(-1), highlightedSuggestionIndex = _h[0], setHighlightedSuggestionIndex = _h[1];
+    var _j = useState(new Suggestion('', '', '')), lastCompleted = _j[0], setLastCompleted = _j[1];
+    var suggestionSections = useState(new Suggestions())[0];
+    var _k = useState(''), inputRef = _k[0], setInputRef = _k[1];
+    var _l = useState(null), labelValuesResponse = _l[0], setLabelValuesResponse = _l[1];
+    var _m = useState(null), currentLabelsCollection = _m[0], setCurrentLabelsCollection = _m[1]; // This is an array that contains query expressions that have been matched i.e. they have been completed and have the blue badge around them in the UI.
+    var _o = usePopper(divInputRef, popperElement, {
+        placement: 'bottom-start',
+    }), styles = _o.styles, attributes = _o.attributes;
+    var metadata = useGrpcMetadata();
+    var Spinner = useParcaTheme().loader;
+    var _p = useLabelNames(queryClient), labelNamesLoading = _p.loading, result = _p.result;
+    var labelNamesResponse = result.response, labelNamesError = result.error;
+    var LoadingSpinner = function () {
+        return _jsx("div", __assign({ className: "pt-2 pb-4" }, { children: Spinner }));
+    };
+    var getLabelNameValues = function (labelName) {
+        var call = queryClient.values({ labelName: labelName, match: [] }, { meta: metadata });
+        setLabelValuesLoading(true);
+        call.response
+            .then(function (response) {
+            setLabelValuesResponse(response.labelValues);
+        })
+            .catch(function () { return setLabelValuesResponse(null); })
+            .finally(function () { return setLabelValuesLoading(false); });
+    };
+    var labelNames = (labelNamesError === undefined || labelNamesError == null) &&
+        labelNamesResponse !== undefined &&
+        labelNamesResponse != null
+        ? labelNamesResponse.labelNames.filter(function (e) { return e !== '__name__'; })
+        : [];
+    var labelValues = labelValuesResponse !== undefined && labelValuesResponse != null ? labelValuesResponse : [];
+    var value = currentQuery.matchersString();
+    Query.suggest("{".concat(value)).forEach(function (s) {
+        // Skip suggestions that we just completed. This really only works,
+        // because we know the language is not repetitive. For a language that
+        // has a repeating word, this would not work.
+        if (lastCompleted !== null && lastCompleted.type === s.type) {
+            return;
+        }
+        // Need to figure out if any literal suggestions make sense, but a
+        // closing bracket doesn't in the guided query experience because all
+        // we have the user do is type the matchers.
+        if (s.type === Labels.literal && s.value !== '}') {
+            if (suggestionSections.literals.find(function (e) { return e.value === s.value; }) != null) {
+                return;
+            }
+            suggestionSections.literals.push({
+                type: s.type,
+                typeahead: '',
+                value: s.value,
+            });
+            suggestionSections.labelNames = [];
+            suggestionSections.labelValues = [];
+        }
+        if (s.type === Labels.labelName) {
+            var inputValue_1 = s.typeahead.trim().toLowerCase();
+            var inputLength_1 = inputValue_1.length;
+            var matches = labelNames.filter(function (label) {
+                return label.toLowerCase().slice(0, inputLength_1) === inputValue_1;
+            });
+            matches.forEach(function (m) {
+                if (suggestionSections.labelNames.find(function (e) { return e.value === m; }) != null) {
+                    return;
+                }
+                suggestionSections.labelNames.push({
+                    type: s.type,
+                    typeahead: s.typeahead,
+                    value: m,
+                });
+                suggestionSections.literals = [];
+                suggestionSections.labelValues = [];
+            });
+        }
+        if (s.type === Labels.labelValue) {
+            var inputValue_2 = s.typeahead.trim().toLowerCase();
+            var inputLength_2 = inputValue_2.length;
+            var matches = labelValues.filter(function (label) {
+                return label.toLowerCase().slice(0, inputLength_2) === inputValue_2;
+            });
+            matches.forEach(function (m) {
+                if (suggestionSections.labelValues.find(function (e) { return e.value === m; }) != null) {
+                    return;
+                }
+                suggestionSections.labelValues.push({
+                    type: s.type,
+                    typeahead: s.typeahead,
+                    value: m,
+                });
+                suggestionSections.labelNames = [];
+                suggestionSections.literals = [];
+            });
+        }
+    });
+    var suggestionsLength = suggestionSections.literals.length +
+        suggestionSections.labelNames.length +
+        suggestionSections.labelValues.length;
+    var getLabelsFromMatchers = function (matchers) {
+        return matchers
+            .filter(function (matcher) { return matcher.key !== '__name__'; })
+            .map(function (matcher) { return "".concat(matcher.key).concat(matcher.matcherType).concat(addQuoteMarks(matcher.value)); });
+    };
+    useEffect(function () {
+        var matchers = currentQuery.matchers.filter(function (matcher) { return matcher.key !== '__name__'; });
+        if (matchers.length > 0) {
+            setCurrentLabelsCollection(getLabelsFromMatchers(matchers));
+        }
+        else {
+            if (localMatchers !== null)
+                setCurrentLabelsCollection(getLabelsFromMatchers(localMatchers));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentQuery.matchers]);
+    var resetHighlight = function () { return setHighlightedSuggestionIndex(-1); };
+    var resetLastCompleted = function () { return setLastCompleted(new Suggestion('', '', '')); };
+    var onChange = function (e) {
+        var newValue = e.target.value;
+        // filter out the labelname list and move to the top the labelname that is most similar to what the user is typing.
+        if (suggestionSections.labelNames.length > 0) {
+            suggestionSections.labelNames = suggestionSections.labelNames.filter(function (suggestion) {
+                return suggestion.value.toLowerCase().includes(newValue.toLowerCase());
+            });
+        }
+        // this checks if the user has typed a label name and a literal (=/!=,=~,!~) i.e labelName=~, labelName!=~, labelName=, labelName!=
+        // and is about to type the label value, then it it will filter out the labelvalue list and move to the top
+        // the labelvalue that is most similar to what the user is typing.
+        if (suggestionSections.labelValues.length > 0 && labelNameLiteralRe.test(newValue)) {
+            var labelValueSearch_1 = newValue.split(literalRe)[2];
+            suggestionSections.labelValues = suggestionSections.labelValues.filter(function (suggestion) {
+                return suggestion.value.toLowerCase().includes(labelValueSearch_1.toLowerCase());
+            });
+        }
+        setInputRef(newValue);
+        resetLastCompleted();
+        resetHighlight();
+    };
+    var complete = function (suggestion) {
+        return value.slice(0, value.length - suggestion.typeahead.length) + suggestion.value;
+    };
+    var getSuggestion = function (index) {
+        if (suggestionSections.labelValues.length > 0) {
+            if (index < suggestionSections.labelValues.length) {
+                return suggestionSections.labelValues[index];
+            }
+            return suggestionSections.literals[index - suggestionSections.labelValues.length];
+        }
+        if (index < suggestionSections.labelNames.length) {
+            return suggestionSections.labelNames[index];
+        }
+        return suggestionSections.literals[index - suggestionSections.labelNames.length];
+    };
+    var highlightNext = function () {
+        var nextIndex = highlightedSuggestionIndex + 1;
+        if (nextIndex === suggestionsLength) {
+            resetHighlight();
+            return;
+        }
+        setHighlightedSuggestionIndex(nextIndex);
+    };
+    var highlightPrevious = function () {
+        if (highlightedSuggestionIndex === -1) {
+            // Didn't select anything, so starting at the bottom.
+            setHighlightedSuggestionIndex(suggestionsLength - 1);
+            return;
+        }
+        setHighlightedSuggestionIndex(highlightedSuggestionIndex - 1);
+    };
+    var applySuggestion = function (suggestionIndex) {
+        var suggestion = getSuggestion(suggestionIndex);
+        if (suggestion.type === Labels.labelValue) {
+            suggestion.value = addQuoteMarks(suggestion.value);
+        }
+        var newValue = complete(suggestion);
+        resetHighlight();
+        if (suggestion.type === Labels.labelName) {
+            getLabelNameValues(suggestion.value);
+        }
+        setLastCompleted(suggestion);
+        setMatchersString(newValue);
+        if (suggestion.type === Labels.labelValue) {
+            var values_1 = newValue.split(',');
+            if (currentLabelsCollection == null || (currentLabelsCollection === null || currentLabelsCollection === void 0 ? void 0 : currentLabelsCollection.length) === 0) {
+                setCurrentLabelsCollection(values_1);
+            }
+            else {
+                setCurrentLabelsCollection(function (oldValues) { return __spreadArray(__spreadArray([], (oldValues !== null && oldValues !== void 0 ? oldValues : []), true), [
+                    values_1[values_1.length - 1],
+                ], false); });
+            }
+            setInputRef('');
+            focus();
+            return;
+        }
+        if (lastCompleted.type === Labels.labelValue && suggestion.type === Labels.literal) {
+            setInputRef('');
+            focus();
+            return;
+        }
+        if (currentLabelsCollection !== null) {
+            setInputRef(newValue.substring(newValue.lastIndexOf(',') + 1));
+            focus();
+            return;
+        }
+        setInputRef(newValue);
+        focus();
+    };
+    var applyHighlightedSuggestion = function () {
+        applySuggestion(highlightedSuggestionIndex);
+    };
+    // This function adds quotes to the query expression if the user has typed it in manually, i.e. did not use the arrow up / down keys + Enter
+    // to choose the label name and value. Therefore, labelName=value becomes labelName="value".
+    var addQuotesToInputRefLabelValue = function (inputRef) {
+        var labelValue = inputRef.split(literalRe)[2].replaceAll(',', '');
+        var labelValueWithQuotes = addQuoteMarks(labelValue);
+        return inputRef.replace(labelValue, labelValueWithQuotes);
+    };
+    var handleKeyUp = function (event) {
+        var values = inputRef.replaceAll(',', '');
+        if (labelNameValueRe.test(inputRef)) {
+            if (currentLabelsCollection === null) {
+                setMatchersString(inputRef);
+            }
+            else {
+                setMatchersString((currentLabelsCollection === null || currentLabelsCollection === void 0 ? void 0 : currentLabelsCollection.join(',')) + ',' + values);
+            }
+            setInputRef('');
+        }
+        if (event.key === ',') {
+            if (inputRef.length === 0)
+                event.preventDefault();
+            // If the current typed query expression matches the labelNameValueWithoutQuotesRe regex (i.e. the labelvalue is not quoted), then add quotes to the labelvalue.
+            // if not, just use the current inputRef value.
+            var inputValues_1 = labelNameValueWithoutQuotesRe.test(inputRef)
+                ? inputRef.replaceAll(',', '')
+                : addQuotesToInputRefLabelValue(inputRef).replaceAll(',', '');
+            // if the currentLabelsCollection array is null, we don't need to concat the current inputRef value with the currentLabelsCollection array, so we just push to it.
+            if (currentLabelsCollection === null) {
+                setCurrentLabelsCollection([inputValues_1]);
+            }
+            else {
+                setCurrentLabelsCollection(function (oldValues) {
+                    // Don't add the current inputRef value to the currentLabelsCollection array if it doesn't match the regex because that will cause an API error.
+                    if (!labelNameValueRe.test(inputRef))
+                        return oldValues;
+                    return __spreadArray(__spreadArray([], (oldValues !== null && oldValues !== void 0 ? oldValues : []), true), [inputValues_1], false);
+                });
+            }
+            // update the currentQuery expression with the currentLabelsCollection array if it's not null, otherwise use the current inputRef value.
+            setMatchersString(currentLabelsCollection !== null
+                ? "".concat(currentLabelsCollection === null || currentLabelsCollection === void 0 ? void 0 : currentLabelsCollection.join(','), ",").concat(inputValues_1)
+                : "".concat(inputValues_1, ","));
+            setInputRef('');
+        }
+        // We suggest the appropriate label names and label values when a user is typing, depending on what the user has typed.
+        // For example, if the user types "labelName=", we suggest the label values next.
+        // This bit of code is used for the opposite of the above bit of code, when a user is deleting characters by pressing del/backspace
+        // We update the currentQuery expression with what's in the inputRef value so that the suggestions are updated accordingly.
+        if (event.key === 'Backspace' && inputRef.length > 0) {
+            // if the currentLabelsCollection array is not empty i.e has already previously completed expressions, then we first need to turn the array into a string
+            // so it can be concatenated with the current inputRef value. that becomes something like "labelName="value",newLabelName="val
+            if (currentLabelsCollection != null && currentLabelsCollection.length > 0) {
+                setMatchersString("".concat(currentLabelsCollection === null || currentLabelsCollection === void 0 ? void 0 : currentLabelsCollection.join(','), ",").concat(inputRef, "}"));
+            }
+            else {
+                // if not, we jsut update the currentQuery expression with the current inputRef value.
+                setMatchersString(inputRef);
+            }
+            if (currentLabelsCollection === null && inputRef.length === 0) {
+                setMatchersString('');
+            }
+        }
+    };
+    var handleKeyPress = function (event) {
+        // If there is a highlighted suggestion and enter is hit, we complete
+        // with the highlighted suggestion.
+        if (highlightedSuggestionIndex >= 0 && event.key === 'Enter') {
+            applyHighlightedSuggestion();
+            if (lastCompleted.type === Labels.labelValue)
+                setLabelValuesResponse(null);
+            var matchers_1 = currentQuery.matchers.filter(function (matcher) { return matcher.key !== '__name__'; });
+            setLocalMatchers(function (prevState) {
+                if (inputRef.length > 0)
+                    return prevState;
+                if (matchers_1.length === 0)
+                    return prevState;
+                return matchers_1;
+            });
+        }
+        // If a user has manually typed in a label name that actually exists in the list of label name (and did not use the
+        // highlight + arrow keys up/down + Enter/Mouse click method to complete it), and has also typed a literal value, i.e. labelName=,
+        // then we can apply a suggestion using the typed label name. This will be as if the user had highlighted the label name and hit enter.
+        if (event.key === '!' || event.key === '~' || event.key === '=') {
+            var labelName_1 = inputRef.split(literalRe)[0];
+            if (suggestionSections.labelNames.length > 0) {
+                // Find the label name in the suggestion list and get the index
+                var suggestion = suggestionSections.labelNames.find(function (suggestion) { return suggestion.value === labelName_1; });
+                // If the typed label name exists, we can apply it using the applySuggestion function
+                if (suggestion != null) {
+                    applySuggestion(suggestionSections.labelNames.indexOf(suggestion));
+                }
+            }
+        }
+        // Same as above, If a user has typed in a label name and literal (and did not use the suggestion box to complete it),
+        // we can manually show the next set of suggestions, which are the label values, by applying a literal suggestion.
+        if (labelNameLiteralRe.test(inputRef)) {
+            var literal_1 = inputRef.split(literalRe)[1];
+            if (suggestionSections.literals.length > 0) {
+                // Find the literal in the suggestion list and get the index
+                var suggestion = suggestionSections.literals.find(function (suggestion) { return suggestion.value === literal_1; });
+                // If the typed literal exists, we can apply it using the applySuggestion function
+                if (suggestion != null) {
+                    applySuggestion(suggestionSections.literals.indexOf(suggestion));
+                }
+            }
+        }
+        // If no suggestions is highlighted and we hit enter, we run the query,
+        // and hide suggestions until another actions enables them again.
+        if (highlightedSuggestionIndex === -1 && event.key === 'Enter') {
+            if (lastCompleted.type === 'labelValue')
+                setLabelValuesResponse(null);
+            setShowSuggest(false);
+            runQuery();
+            return;
+        }
+        setShowSuggest(true);
+    };
+    var handleKeyDown = function (event) {
+        if (event.key === 'Backspace' && inputRef === '') {
+            if (currentLabelsCollection === null)
+                return;
+            removeLabel(currentLabelsCollection.length - 1);
+            removeLocalMatcher();
+        }
+        // Don't need to handle any key interactions if no suggestions there.
+        if (suggestionsLength === 0) {
+            return;
+        }
+        // Handle tabbing through suggestions.
+        if (event.key === 'Tab' && suggestionsLength > 0) {
+            event.preventDefault();
+            if (event.shiftKey) {
+                // Shift + tab goes up.
+                highlightPrevious();
+                return;
+            }
+            // Just tab goes down.
+            highlightNext();
+        }
+        // Up arrow highlights previous suggestions.
+        if (event.key === 'ArrowUp') {
+            highlightPrevious();
+        }
+        // Down arrow highlights next suggestions.
+        if (event.key === 'ArrowDown') {
+            highlightNext();
+        }
+    };
+    var focus = function () {
+        setFocusedInput(true);
+    };
+    var unfocus = function () {
+        setFocusedInput(false);
+        resetHighlight();
+    };
+    var removeLabel = function (label) {
+        if (currentLabelsCollection === null)
+            return;
+        var newLabels = __spreadArray([], currentLabelsCollection, true);
+        newLabels.splice(label, 1);
+        setCurrentLabelsCollection(newLabels);
+        var newLabelsAsAString = newLabels.join(',');
+        setMatchersString(newLabelsAsAString);
+    };
+    var removeLocalMatcher = function () {
+        if (localMatchers === null)
+            return;
+        var newMatchers = __spreadArray([], localMatchers, true);
+        newMatchers.splice(localMatchers.length - 1, 1);
+        setLocalMatchers(newMatchers);
+    };
+    var profileSelected = currentQuery.profType.profileName === '';
+    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ ref: setDivInputRef, className: "w-full flex items-center text-sm border-gray-300 dark:border-gray-600 border-b" }, { children: [_jsx("ul", __assign({ className: "flex space-x-2" }, { children: currentLabelsCollection === null || currentLabelsCollection === void 0 ? void 0 : currentLabelsCollection.map(function (value, i) { return (_jsx("li", __assign({ className: "bg-indigo-600 w-fit py-1 px-2 text-gray-100 dark-gray-900 rounded-md" }, { children: value }), i)); }) })), _jsx("input", { type: "text", className: cx('bg-transparent focus:ring-indigo-800 flex-1 block w-full px-2 py-2 text-sm outline-none', profileSelected && 'cursor-not-allowed'), placeholder: profileSelected ? 'Select a profile first to query profiles...' : 'query profiles...', onChange: onChange, value: inputRef, onBlur: unfocus, onFocus: focus, onKeyPress: handleKeyPress, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, disabled: profileSelected, title: profileSelected ? 'Select a profile first to query profiles...' : 'query profiles...' })] })), _jsx("div", __assign({ ref: setPopperElement, style: __assign(__assign({}, styles.popper), { marginLeft: 0 }) }, attributes.popper, { className: "z-50" }, { children: _jsx(Transition, __assign({ show: focusedInput && showSuggest, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0" }, { children: _jsxs("div", __assign({ style: { width: divInputRef === null || divInputRef === void 0 ? void 0 : divInputRef.offsetWidth }, className: "absolute z-10 max-h-[400px] mt-1 bg-gray-50 dark:bg-gray-900 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" }, { children: [labelNamesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestionSections.labelNames.map(function (l, i) { return (_jsx("div", __assign({ className: cx(highlightedSuggestionIndex === i && 'text-white bg-indigo-600', 'cursor-default select-none relative py-2 pl-3 pr-9'), onMouseOver: function () { return setHighlightedSuggestionIndex(i); }, onClick: function () { return applySuggestion(i); }, onMouseOut: function () { return resetHighlight(); } }, { children: l.value }), i)); }) })), suggestionSections.literals.map(function (l, i) { return (_jsx("div", __assign({ className: cx(highlightedSuggestionIndex === i + suggestionSections.labelNames.length &&
+                                    'text-white bg-indigo-600', 'cursor-default select-none relative py-2 pl-3 pr-9'), onMouseOver: function () {
+                                    return setHighlightedSuggestionIndex(i + suggestionSections.labelNames.length);
+                                }, onClick: function () { return applySuggestion(i + suggestionSections.labelNames.length); }, onMouseOut: function () { return resetHighlight(); } }, { children: l.value }), i)); }), labelValuesLoading && lastCompleted.type === 'literal' ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestionSections.labelValues.map(function (l, i) { return (_jsx("div", __assign({ className: cx(highlightedSuggestionIndex === i && 'text-white bg-indigo-600', 'cursor-default select-none relative py-2 pl-3 pr-9'), onMouseOver: function () { return setHighlightedSuggestionIndex(i); }, onClick: function () { return applySuggestion(i); }, onMouseOut: function () { return resetHighlight(); } }, { children: l.value }), i)); }) }))] })) })) }))] }));
+};
+export default MatchersInput;

package/dist/MetricsCircle/index.d.ts

@@ -0,0 +1,7 @@
+interface MetricsCircleProps {
+    cx: number;
+    cy: number;
+    radius?: number;
+}
+declare const MetricsCircle: ({ cx, cy, radius }: MetricsCircleProps) => JSX.Element;
+export default MetricsCircle;

package/dist/MetricsCircle/index.js

@@ -0,0 +1,18 @@
+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";
+var defaultRadius = 3;
+var MetricsCircle = function (_a) {
+    var cx = _a.cx, cy = _a.cy, radius = _a.radius;
+    return (_jsx("g", __assign({ className: "circle" }, { children: _jsx("circle", { cx: cx, cy: cy, r: radius !== undefined ? radius : defaultRadius }) })));
+};
+export default MetricsCircle;

package/dist/MetricsGraph/index.d.ts

@@ -0,0 +1,35 @@
+import { SingleProfileSelection } from '..';
+import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
+import { DateTimeRange } from '@parca/components';
+interface RawMetricsGraphProps {
+    data: MetricsSeriesPb[];
+    from: number;
+    to: number;
+    profile: SingleProfileSelection | null;
+    onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
+    onLabelClick: (labelName: string, labelValue: string) => void;
+    setTimeRange: (range: DateTimeRange) => void;
+    sampleUnit: string;
+    width?: number;
+}
+interface HighlightedSeries {
+    seriesIndex: number;
+    labels: Label[];
+    timestamp: number;
+    value: number;
+    x: number;
+    y: number;
+}
+declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, sampleUnit, }: RawMetricsGraphProps) => JSX.Element;
+export default MetricsGraph;
+export declare const parseValue: (value: string) => number | null;
+interface MetricsTooltipProps {
+    x: number;
+    y: number;
+    highlighted: HighlightedSeries;
+    onLabelClick: (labelName: string, labelValue: string) => void;
+    contextElement: Element | null;
+    sampleUnit: string;
+}
+export declare const MetricsTooltip: ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, }: MetricsTooltipProps) => JSX.Element;
+export declare const RawMetricsGraph: ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, width, sampleUnit, }: RawMetricsGraphProps) => JSX.Element;