@parca/profile 0.16.74 → 0.16.76

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.76](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.75...@parca/profile@0.16.76) (2022-11-29)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.75 (2022-11-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.74](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.73...@parca/profile@0.16.74) (2022-11-24)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     graph: CallgraphType;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Function, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {

package/dist/IcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 import { Mapping, Function, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface IcicleGraphProps {

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare class Suggestion {
+    type: string;
+    typeahead: string;
+    value: string;
+    constructor(type: string, typeahead: string, value: string);
+}
+export declare class Suggestions {
+    literals: Suggestion[];
+    labelNames: Suggestion[];
+    labelValues: Suggestion[];
+    constructor();
+}
+interface Props {
+    suggestions: Suggestions;
+    applySuggestion: (suggestion: Suggestion) => void;
+    inputRef: HTMLTextAreaElement | null;
+    runQuery: () => void;
+    focusedInput: boolean;
+    isLabelNamesLoading: boolean;
+    isLabelValuesLoading: boolean;
+}
+declare const SuggestionsList: ({ suggestions, applySuggestion, inputRef, runQuery, focusedInput, isLabelNamesLoading, isLabelValuesLoading, }: Props) => JSX.Element;
+export default SuggestionsList;

package/dist/MatchersInput/SuggestionsList.js

@@ -0,0 +1,162 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// 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, useCallback, useEffect, useState } from 'react';
+import { Transition } from '@headlessui/react';
+import SuggestionItem from './SuggestionItem';
+import { usePopper } from 'react-popper';
+import { useParcaContext } from '@parca/components';
+var Suggestion = /** @class */ (function () {
+    function Suggestion(type, typeahead, value) {
+        this.type = type;
+        this.typeahead = typeahead;
+        this.value = value;
+    }
+    return Suggestion;
+}());
+export { Suggestion };
+var Suggestions = /** @class */ (function () {
+    function Suggestions() {
+        this.literals = [];
+        this.labelNames = [];
+        this.labelValues = [];
+    }
+    return Suggestions;
+}());
+export { Suggestions };
+var LoadingSpinner = function () {
+    var Spinner = useParcaContext().loader;
+    return _jsx("div", __assign({ className: "pt-2 pb-4" }, { children: Spinner }));
+};
+var SuggestionsList = function (_a) {
+    var suggestions = _a.suggestions, applySuggestion = _a.applySuggestion, inputRef = _a.inputRef, runQuery = _a.runQuery, focusedInput = _a.focusedInput, isLabelNamesLoading = _a.isLabelNamesLoading, isLabelValuesLoading = _a.isLabelValuesLoading;
+    var _b = useState(null), popperElement = _b[0], setPopperElement = _b[1];
+    var _c = usePopper(inputRef, popperElement, {
+        placement: 'bottom-start',
+    }), styles = _c.styles, attributes = _c.attributes;
+    var _d = useState(-1), highlightedSuggestionIndex = _d[0], setHighlightedSuggestionIndex = _d[1];
+    var _e = useState(true), showSuggest = _e[0], setShowSuggest = _e[1];
+    var suggestionsLength = suggestions.literals.length + suggestions.labelNames.length + suggestions.labelValues.length;
+    var getSuggestion = useCallback(function (index) {
+        if (index < suggestions.labelNames.length) {
+            return suggestions.labelNames[index];
+        }
+        if (index < suggestions.labelNames.length + suggestions.literals.length) {
+            return suggestions.literals[index - suggestions.labelNames.length];
+        }
+        return suggestions.labelValues[index - suggestions.labelNames.length - suggestions.literals.length];
+    }, [suggestions]);
+    var resetHighlight = useCallback(function () { return setHighlightedSuggestionIndex(-1); }, [setHighlightedSuggestionIndex]);
+    var applyHighlightedSuggestion = useCallback(function () {
+        applySuggestion(getSuggestion(highlightedSuggestionIndex));
+        resetHighlight();
+    }, [resetHighlight, applySuggestion, highlightedSuggestionIndex, getSuggestion]);
+    var applySuggestionWithIndex = useCallback(function (index) {
+        applySuggestion(getSuggestion(index));
+        resetHighlight();
+    }, [resetHighlight, applySuggestion, getSuggestion]);
+    var highlightNext = useCallback(function () {
+        var nextIndex = highlightedSuggestionIndex + 1;
+        if (nextIndex === suggestionsLength) {
+            resetHighlight();
+            return;
+        }
+        setHighlightedSuggestionIndex(nextIndex);
+    }, [highlightedSuggestionIndex, suggestionsLength, resetHighlight]);
+    var highlightPrevious = useCallback(function () {
+        if (highlightedSuggestionIndex === -1) {
+            // Didn't select anything, so starting at the bottom.
+            setHighlightedSuggestionIndex(suggestionsLength - 1);
+            return;
+        }
+        setHighlightedSuggestionIndex(highlightedSuggestionIndex - 1);
+    }, [highlightedSuggestionIndex, suggestionsLength]);
+    var handleKeyPress = useCallback(function (event) {
+        if (event.key === 'Enter') {
+            // Disable new line in the text area
+            event.preventDefault();
+        }
+        // If there is a highlighted suggestion and enter is hit, we complete
+        // with the highlighted suggestion.
+        if (highlightedSuggestionIndex >= 0 && event.key === 'Enter') {
+            applyHighlightedSuggestion();
+        }
+        // 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') {
+            setShowSuggest(false);
+            runQuery();
+            return;
+        }
+        setShowSuggest(true);
+    }, [highlightedSuggestionIndex, applyHighlightedSuggestion, runQuery]);
+    var handleKeyDown = useCallback(function (event) {
+        // Don't need to handle any key interactions if no suggestions there.
+        if (suggestionsLength === 0 || !['Tab', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        // 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();
+        }
+    }, [suggestionsLength, highlightNext, highlightPrevious]);
+    useEffect(function () {
+        if (inputRef == null) {
+            return;
+        }
+        inputRef.addEventListener('keydown', handleKeyDown);
+        inputRef.addEventListener('keypress', handleKeyPress);
+        return function () {
+            inputRef.removeEventListener('keydown', handleKeyDown);
+            inputRef.removeEventListener('keypress', handleKeyPress);
+        };
+    }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
+    return (_jsx(_Fragment, { children: 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: [isLabelNamesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelNames.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i, onHighlight: function () { return setHighlightedSuggestionIndex(i); }, onApplySuggestion: function () { return applySuggestionWithIndex(i); }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }) })), suggestions.literals.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i + suggestions.labelNames.length, onHighlight: function () {
+                                return setHighlightedSuggestionIndex(i + suggestions.labelNames.length);
+                            }, onApplySuggestion: function () {
+                                return applySuggestionWithIndex(i + suggestions.labelNames.length);
+                            }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }), isLabelValuesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelValues.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex ===
+                                    i + suggestions.labelNames.length + suggestions.literals.length, onHighlight: function () {
+                                    return setHighlightedSuggestionIndex(i + suggestions.labelNames.length + suggestions.literals.length);
+                                }, onApplySuggestion: function () {
+                                    return applySuggestionWithIndex(i + suggestions.labelNames.length + suggestions.literals.length);
+                                }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }) }))] })) })) }))) }));
+};
+export default SuggestionsList;

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 interface MatchersInputProps {

package/dist/MatchersInput/index.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -22,13 +22,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // 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 { useState, useEffect, useMemo, useRef } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 import cx from 'classnames';
-import { useParcaContext, useGrpcMetadata } from '@parca/components';
-import SuggestionItem from './SuggestionItem';
+import { useGrpcMetadata } from '@parca/components';
+import { sanitizeLabelValue } from '@parca/functions';
+import { Query } from '@parca/parser';
+import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
 export var useLabelNames = function (client) {
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var _b = useState({}), result = _b[0], setResult = _b[1];
@@ -43,202 +43,108 @@ export var useLabelNames = function (client) {
     }, [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), 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 = _l.styles, attributes = _l.attributes;
+    var inputRef = useRef(null);
+    var _b = useState(false), focusedInput = _b[0], setFocusedInput = _b[1];
+    var _c = useState(false), labelValuesLoading = _c[0], setLabelValuesLoading = _c[1];
+    var _d = useState(new Suggestion('', '', '')), lastCompleted = _d[0], setLastCompleted = _d[1];
+    var _e = useState(null), labelValues = _e[0], setLabelValues = _e[1];
+    var _f = useState(null), currentLabelName = _f[0], setCurrentLabelName = _f[1];
     var metadata = useGrpcMetadata();
-    var Spinner = useParcaContext().loader;
-    var _m = useLabelNames(queryClient), labelNamesLoading = _m.loading, result = _m.result;
+    var _g = useLabelNames(queryClient), labelNamesLoading = _g.loading, result = _g.result;
     var labelNamesResponse = result.response, labelNamesError = result.error;
-    var LoadingSpinner = function () {
-        return _jsx("div", __assign({ className: "pt-2 pb-4" }, { children: Spinner }));
-    };
     useEffect(function () {
         if (currentLabelName !== null) {
             var call = queryClient.values({ labelName: currentLabelName, match: [] }, { meta: metadata });
             setLabelValuesLoading(true);
             call.response
                 .then(function (response) {
-                setLabelValues(response.labelValues);
+                // replace single `\` in the `labelValues` string with doubles `\\` if available.
+                var newValues = sanitizeLabelValue(response.labelValues);
+                setLabelValues(newValues);
             })
                 .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 labelNames = useMemo(function () {
+        return (labelNamesError === undefined || labelNamesError == null) &&
+            labelNamesResponse !== undefined &&
+            labelNamesResponse != null
+            ? labelNamesResponse.labelNames.filter(function (e) { return e !== '__name__'; })
+            : [];
+    }, [labelNamesError, labelNamesResponse]);
     var value = currentQuery.matchersString();
-    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.
-        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 === 'literal' && s.value !== '}') {
-            suggestionSections.literals.push({
-                type: s.type,
-                typeahead: s.typeahead,
-                value: s.value,
-            });
-        }
-        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) {
-                return suggestionSections.labelNames.push({
+    var suggestionSections = useMemo(function () {
+        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.
+            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 === 'literal' && s.value !== '}') {
+                suggestionSections.literals.push({
                     type: s.type,
                     typeahead: s.typeahead,
-                    value: m,
+                    value: s.value,
                 });
-            });
-        }
-        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({
+            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) {
+                    return suggestionSections.labelNames.push({
                         type: s.type,
                         typeahead: s.typeahead,
-                        value: v,
+                        value: m,
                     });
                 });
             }
-        }
-    });
-    var suggestionsLength = suggestionSections.literals.length +
-        suggestionSections.labelNames.length +
-        suggestionSections.labelValues.length;
-    var resetHighlight = function () { return setHighlightedSuggestionIndex(-1); };
+            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,
+                        });
+                    });
+                }
+            }
+        });
+        return suggestionSections;
+    }, [currentQuery, lastCompleted, labelNames, labelValues, currentLabelName, value]);
     var resetLastCompleted = function () { return setLastCompleted(new Suggestion('', '', '')); };
     var onChange = function (e) {
         var newValue = e.target.value;
         setMatchersString(newValue);
         resetLastCompleted();
-        resetHighlight();
     };
     var complete = function (suggestion) {
         return value.slice(0, value.length - suggestion.typeahead.length) + suggestion.value;
     };
-    var getSuggestion = function (index) {
-        if (index < suggestionSections.labelNames.length) {
-            return suggestionSections.labelNames[index];
-        }
-        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;
-        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);
+    var applySuggestion = function (suggestion) {
         var newValue = complete(suggestion);
-        resetHighlight();
         setLastCompleted(suggestion);
         setMatchersString(newValue);
-        if (inputRef !== null) {
-            inputRef.value = newValue;
-            inputRef.focus();
-        }
-    };
-    var applyHighlightedSuggestion = function () {
-        applySuggestion(highlightedSuggestionIndex);
-    };
-    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 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') {
-            setShowSuggest(false);
-            runQuery();
-            return;
-        }
-        setShowSuggest(true);
-    };
-    var handleKeyDown = function (event) {
-        // 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();
+        if (inputRef.current !== null) {
+            inputRef.current.value = newValue;
+            inputRef.current.focus();
         }
     };
     var focus = function () {
@@ -246,28 +152,12 @@ var MatchersInput = function (_a) {
     };
     var unfocus = function () {
         setFocusedInput(false);
-        resetHighlight();
     };
     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
+    return (_jsxs("div", __assign({ className: "font-mono flex-1 w-full block" }, { children: [_jsx(TextareaAutosize, { ref: inputRef, className: cx('bg-gray-50 dark:bg-gray-900 focus:ring-indigo-800 flex-1 block w-full px-2 py-2 text-sm outline-none rounded', 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
+                    : 'filter profiles... eg. node="test"', onChange: onChange, value: value, onBlur: unfocus, onFocus: focus, 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(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i, onHighlight: function () { return setHighlightedSuggestionIndex(i); }, onApplySuggestion: function () { return applySuggestion(i); }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }) })), suggestionSections.literals.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i + suggestionSections.labelNames.length, onHighlight: function () {
-                                    return setHighlightedSuggestionIndex(i + suggestionSections.labelNames.length);
-                                }, onApplySuggestion: function () {
-                                    return applySuggestion(i + suggestionSections.labelNames.length);
-                                }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }), labelValuesLoading && lastCompleted.type === 'literal' ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestionSections.labelValues.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex ===
-                                        i +
-                                            suggestionSections.labelNames.length +
-                                            suggestionSections.literals.length, onHighlight: function () {
-                                        return setHighlightedSuggestionIndex(i +
-                                            suggestionSections.labelNames.length +
-                                            suggestionSections.literals.length);
-                                    }, onApplySuggestion: function () {
-                                        return applySuggestion(i +
-                                            suggestionSections.labelNames.length +
-                                            suggestionSections.literals.length);
-                                    }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }) }))] })) })) })))] })));
+                    : 'filter profiles... eg. node="test"' }), _jsx(SuggestionsList, { isLabelNamesLoading: labelNamesLoading, suggestions: suggestionSections, applySuggestion: applySuggestion, inputRef: inputRef.current, runQuery: runQuery, focusedInput: focusedInput, isLabelValuesLoading: labelValuesLoading && lastCompleted.type === 'literal' })] })));
 };
 export default MatchersInput;

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsGraph/index.js

@@ -41,7 +41,7 @@ import { timeFormat } from '..';
 import { cutToMaxStringLength } from '@parca/functions/string';
 import throttle from 'lodash.throttle';
 import { usePopper } from 'react-popper';
-import { valueFormatter, formatDate } from '@parca/functions';
+import { valueFormatter, formatDate, sanitizeHighlightedValues } from '@parca/functions';
 import { DateTimeRange } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
@@ -226,7 +226,8 @@ export var RawMetricsGraph = function (_a) {
     };
     var openClosestProfile = function () {
         if (highlighted != null) {
-            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, highlighted.labels);
+            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, sanitizeHighlightedValues(highlighted.labels) // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
+            );
         }
     };
     var onMouseUp = function (e) {

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection, NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection, NavigateFunction } from '..';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
 interface ProfileExplorerProps {

package/dist/ProfileIcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;