@parca/profile 0.16.61 → 0.16.63

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.63](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.62...@parca/profile@0.16.63) (2022-11-08)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.62 (2022-11-08)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.61 (2022-11-07)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -108,7 +108,7 @@ var Callgraph = function (_a) {
     }), stage = _f[0], setStage = _f[1];
     var rawNodes = graph.nodes, total = graph.cumulative;
     var currentSearchString = useAppSelector(selectSearchNodeString);
-    var isSearchEmpty = currentSearchString === undefined;
+    var isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
     useEffect(function () {
         var getDataWithPositions = function () { return __awaiter(void 0, void 0, void 0, function () {
             var dataAsDot, jsonGraph;
@@ -159,24 +159,29 @@ var Callgraph = function (_a) {
     // 4. Add zooming
     var handleWheel = function (e) {
         var _a;
+        // stop default scrolling
         e.evt.preventDefault();
-        var scaleXBy = 0.95;
-        var scaleYBy = 1.05;
+        var scaleBy = 1.01;
         var stage = e.target.getStage();
         if (stage !== null) {
             var oldScale = stage.scaleX();
-            var _b = (_a = stage.getPointerPosition()) !== null && _a !== void 0 ? _a : { x: 0, y: 0 }, x = _b.x, y = _b.y;
+            var pointer = (_a = stage.getPointerPosition()) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
             var mousePointTo = {
-                x: x / oldScale - stage.x() / oldScale,
-                y: y / oldScale - stage.y() / oldScale,
+                x: pointer.x / oldScale - stage.x() / oldScale,
+                y: pointer.y / oldScale - stage.y() / oldScale,
             };
-            var newXScale = e.evt.deltaX > 0 ? oldScale * scaleXBy : oldScale / scaleXBy;
-            var newYScale = e.evt.deltaY > 0 ? oldScale * scaleYBy : oldScale / scaleYBy;
-            stage.scale({ x: newXScale, y: newYScale });
+            // whether to zoom in or out
+            var direction = e.evt.deltaY > 0 ? 1 : -1;
+            // for trackpad, e.evt.ctrlKey is true => in that case, revert direction
+            if (e.evt.ctrlKey) {
+                direction = -direction;
+            }
+            var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+            stage.scale({ x: newScale, y: newScale });
             setStage({
-                scale: { x: newXScale, y: newYScale },
-                x: -(mousePointTo.x - x / newXScale) * newXScale,
-                y: -(mousePointTo.y - y / newYScale) * newYScale,
+                scale: { x: newScale, y: newScale },
+                x: -(mousePointTo.x - pointer.x / newScale) * newScale,
+                y: -(mousePointTo.y - pointer.y / newScale) * newScale,
             });
         }
     };

package/dist/MatchersInput/index.d.ts

@@ -1,5 +1,5 @@
 import { Query } from '@parca/parser';
-import { LabelsResponse, QueryServiceClient, ValuesResponse } from '@parca/client';
+import { LabelsResponse, QueryServiceClient } from '@parca/client';
 interface MatchersInputProps {
     queryClient: QueryServiceClient;
     setMatchersString: (arg: string) => void;
@@ -10,10 +10,6 @@ export interface ILabelNamesResult {
     response?: LabelsResponse;
     error?: Error;
 }
-export interface ILabelValuesResult {
-    response?: ValuesResponse;
-    error?: Error;
-}
 interface UseLabelNames {
     result: ILabelNamesResult;
     loading: boolean;

package/dist/MatchersInput/index.js

@@ -9,16 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     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";
+import { jsx as _jsx, Fragment as _Fragment, 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.
@@ -37,21 +28,6 @@ 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];
@@ -84,46 +60,45 @@ var Suggestions = /** @class */ (function () {
 }());
 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, {
+    var _b = useState(null), inputRef = _b[0], setInputRef = _b[1];
+    var _c = useState(false), focusedInput = _c[0], setFocusedInput = _c[1];
+    var _d = useState(true), showSuggest = _d[0], setShowSuggest = _d[1];
+    var _e = useState(-1), highlightedSuggestionIndex = _e[0], setHighlightedSuggestionIndex = _e[1];
+    var _f = useState(false), labelValuesLoading = _f[0], setLabelValuesLoading = _f[1];
+    var _g = useState(new Suggestion('', '', '')), lastCompleted = _g[0], setLastCompleted = _g[1];
+    var _h = useState(null), popperElement = _h[0], setPopperElement = _h[1];
+    var _j = useState(null), labelValues = _j[0], setLabelValues = _j[1];
+    var _k = useState(null), currentLabelName = _k[0], setCurrentLabelName = _k[1];
+    var _l = usePopper(inputRef, popperElement, {
         placement: 'bottom-start',
-    }), styles = _o.styles, attributes = _o.attributes;
+    }), styles = _l.styles, attributes = _l.attributes;
     var metadata = useGrpcMetadata();
     var Spinner = useParcaTheme().loader;
-    var _p = useLabelNames(queryClient), labelNamesLoading = _p.loading, result = _p.result;
+    var _m = useLabelNames(queryClient), labelNamesLoading = _m.loading, result = _m.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); });
-    };
+    useEffect(function () {
+        if (currentLabelName !== null) {
+            var call = queryClient.values({ labelName: currentLabelName, match: [] }, { meta: metadata });
+            setLabelValuesLoading(true);
+            call.response
+                .then(function (response) {
+                setLabelValues(response.labelValues);
+            })
+                .catch(function () { return setLabelValues(null); })
+                .finally(function () { return setLabelValuesLoading(false); });
+        }
+    }, [currentLabelName, queryClient, metadata]);
     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) {
+    var suggestionSections = new Suggestions();
+    Query.suggest("".concat(currentQuery.profileName(), "{").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.
@@ -133,96 +108,53 @@ var MatchersInput = function (_a) {
         // 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;
-            }
+        if (s.type === 'literal' && s.value !== '}') {
             suggestionSections.literals.push({
                 type: s.type,
-                typeahead: '',
+                typeahead: s.typeahead,
                 value: s.value,
             });
-            suggestionSections.labelNames = [];
-            suggestionSections.labelValues = [];
         }
-        if (s.type === Labels.labelName) {
+        if (s.type === '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({
+                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,
+        if (s.type === 'labelValue') {
+            if (currentLabelName === null || s.labelName !== currentLabelName) {
+                setCurrentLabelName(s.labelName);
+                return;
+            }
+            if (labelValues !== null) {
+                labelValues
+                    .filter(function (v) { return v.slice(0, s.typeahead.length) === s.typeahead; })
+                    .forEach(function (v) {
+                    return suggestionSections.labelValues.push({
+                        type: s.type,
+                        typeahead: s.typeahead,
+                        value: v,
+                    });
                 });
-                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);
+        setMatchersString(newValue);
         resetLastCompleted();
         resetHighlight();
     };
@@ -230,16 +162,13 @@ var MatchersInput = function (_a) {
         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];
+        if (index < suggestionSections.labelNames.length + suggestionSections.literals.length) {
+            return suggestionSections.literals[index - suggestionSections.labelNames.length];
+        }
+        return suggestionSections.labelValues[index - suggestionSections.labelNames.length - suggestionSections.literals.length];
     };
     var highlightNext = function () {
         var nextIndex = highlightedSuggestionIndex + 1;
@@ -259,157 +188,27 @@ var MatchersInput = function (_a) {
     };
     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;
+        if (inputRef !== null) {
+            inputRef.value = newValue;
+            inputRef.focus();
         }
-        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;
@@ -417,12 +216,6 @@ var MatchersInput = function (_a) {
         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;
@@ -454,26 +247,22 @@ var MatchersInput = function (_a) {
         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 &&
+    var profileSelected = currentQuery.profileName() === '';
+    return (_jsxs("div", __assign({ className: "font-mono flex-1 w-full block" }, { children: [_jsx("input", { ref: setInputRef, 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 enter a filter...'
+                    : 'filter profiles... eg. node="test"', onChange: onChange, value: value, onBlur: unfocus, onFocus: focus, onKeyPress: handleKeyPress, onKeyDown: handleKeyDown, disabled: profileSelected, title: profileSelected
+                    ? 'Select a profile first to enter a filter...'
+                    : 'filter profiles... eg. node="test"' }), suggestionsLength > 0 && (_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: inputRef === null || inputRef === void 0 ? void 0 : inputRef.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)); }) }))] })) })) }))] }));
+                                }, 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 +
+                                            suggestionSections.labelNames.length +
+                                            suggestionSections.literals.length);
+                                    }, onClick: function () {
+                                        return applySuggestion(i +
+                                            suggestionSections.labelNames.length +
+                                            suggestionSections.literals.length);
+                                    }, onMouseOut: function () { return resetHighlight(); } }, { children: l.value }), i)); }) }))] })) })) })))] })));
 };
 export default MatchersInput;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -12,11 +12,11 @@ interface ProfileMetricsGraphProps {
     setTimeRange: (range: DateTimeRange) => void;
     addLabelMatcher: (key: string, value: string) => void;
 }
-export interface IQueryRangeResult {
+export interface IQueryRangeState {
     response: QueryRangeResponse | null;
     isLoading: boolean;
     error: RpcError | null;
 }
-export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number) => IQueryRangeResult;
+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;
 export default ProfileMetricsGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -66,43 +66,35 @@ 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 _a = useState({
+        response: null,
+        isLoading: true,
+        error: null,
+    }), state = _a[0], setState = _a[1];
     var metadata = useGrpcMetadata();
     useEffect(function () {
         void (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var response_1, e_1;
+            var call;
             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*/];
-                }
+                setState({
+                    response: null,
+                    isLoading: true,
+                    error: null,
+                });
+                call = client.queryRange({
+                    query: queryExpression,
+                    start: Timestamp.fromDate(new Date(start)),
+                    end: Timestamp.fromDate(new Date(end)),
+                    limit: 0,
+                }, { meta: metadata });
+                call.response
+                    .then(function (response) { return setState({ response: response, isLoading: false, error: null }); })
+                    .catch(function (error) { return setState({ response: null, isLoading: false, error: error }); });
+                return [2 /*return*/];
             });
         }); })();
     }, [client, queryExpression, start, end, metadata]);
-    return { isLoading: isLoading, error: error, response: response };
+    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;