@parca/profile 0.19.144 → 0.19.145

package/dist/SimpleMatchers/Select.js

@@ -32,7 +32,7 @@ import { c as _c } from "react-compiler-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cx from 'classnames';
@@ -41,6 +41,7 @@ import { Button, DividerWithLabel, RefreshButton, useParcaContext } from '@parca
 import { TEST_IDS, testId } from '@parca/test-utils/dist/test-ids';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var CustomSelect = function CustomSelect(_ref) {
+  var _filteredItems$reduce, _filteredItems$reduce2;
   var itemsProp = _ref.items,
     selectedKey = _ref.selectedKey,
     onSelection = _ref.onSelection,
@@ -92,29 +93,34 @@ var CustomSelect = function CustomSelect(_ref) {
   var containerRef = useRef(null);
   var optionsRef = useRef(null);
   var searchInputRef = useRef(null);
-  var handleRefetch = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.p = _context.n) {
-        case 0:
-          if (!(refetchValues == null || isRefetching)) {
-            _context.n = 1;
-            break;
-          }
-          return _context.a(2);
-        case 1:
-          setIsRefetching(true);
-          _context.p = 2;
-          _context.n = 3;
-          return refetchValues();
-        case 3:
-          _context.p = 3;
-          setIsRefetching(false);
-          return _context.f(3);
-        case 4:
-          return _context.a(2);
-      }
-    }, _callee, null, [[2,, 3, 4]]);
-  })), [refetchValues, isRefetching]);
+  var handleRefetch = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (!(refetchValues == null || isRefetching)) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            setIsRefetching(true);
+            _context.p = 2;
+            _context.n = 3;
+            return refetchValues();
+          case 3:
+            _context.p = 3;
+            setIsRefetching(false);
+            return _context.f(3);
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, null, [[2,, 3, 4]]);
+    }));
+    return function handleRefetch() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   useEffect(function () {
     var timer = setTimeout(function () {
       return setDebouncedSearchTerm(searchTerm);
@@ -123,23 +129,18 @@ var CustomSelect = function CustomSelect(_ref) {
       return clearTimeout(timer);
     };
   }, [searchTerm]);
-  var items = useMemo(function () {
-    if (itemsProp[0] != null && 'type' in itemsProp[0]) {
-      return itemsProp.flatMap(function (item) {
-        return item.values.map(function (v) {
-          return _objectSpread(_objectSpread({}, v), {}, {
-            type: item.type
-          });
-        });
-      });
-    }
-    return itemsProp.map(function (item_0) {
-      return _objectSpread(_objectSpread({}, item_0), {}, {
-        type: ''
+  var items = itemsProp[0] != null && 'type' in itemsProp[0] ? itemsProp.flatMap(function (item) {
+    return item.values.map(function (v) {
+      return _objectSpread(_objectSpread({}, v), {}, {
+        type: item.type
       });
     });
-  }, [itemsProp]);
-  var filteredItems = useMemo(function () {
+  }) : itemsProp.map(function (item_0) {
+    return _objectSpread(_objectSpread({}, item_0), {}, {
+      type: ''
+    });
+  });
+  var computeFilteredItems = function computeFilteredItems() {
     if (!searchable) return items;
     var lowerSearch = debouncedSearchTerm.toLowerCase();
     var filtered = items.filter(function (item_1) {
@@ -153,7 +154,8 @@ var CustomSelect = function CustomSelect(_ref) {
     return filtered.sort(function (a_0, b_0) {
       return levenshtein.get(a_0.key, debouncedSearchTerm) - levenshtein.get(b_0.key, debouncedSearchTerm);
     });
-  }, [items, debouncedSearchTerm, searchable]);
+  };
+  var filteredItems = computeFilteredItems();
   var selection = editable ? selectedKey : items.find(function (v_0) {
     return v_0.key === selectedKey;
   });
@@ -252,29 +254,25 @@ var CustomSelect = function CustomSelect(_ref) {
     e_0.target.value = '';
     e_0.target.value = value_0;
   };
-  var groupedFilteredItems = useMemo(function () {
-    return filteredItems.reduce(function (acc, item_2) {
-      var group = acc.find(function (g) {
-        return g.type === item_2.type;
-      });
-      if (group != null) {
-        group.values.push(item_2);
-      } else {
-        acc.push({
-          type: item_2.type,
-          values: [item_2]
-        });
-      }
-      return acc;
-    }, []).sort(function (a_1, b_1) {
-      return a_1.values.length - b_1.values.length;
-    });
-  }, [filteredItems]);
-  var showHeaders = useMemo(function () {
-    return groupedFilteredItems.length > 1 && groupedFilteredItems.every(function (g_0) {
-      return g_0.type !== '';
+  var groupedFilteredItems = filteredItems.reduce(function (acc, item_2) {
+    var group = acc.find(function (g) {
+      return g.type === item_2.type;
     });
-  }, [groupedFilteredItems]);
+    if (group != null) {
+      group.values.push(item_2);
+    } else {
+      acc.push({
+        type: item_2.type,
+        values: [item_2]
+      });
+    }
+    return acc;
+  }, []).sort(function (a_1, b_1) {
+    return a_1.values.length - b_1.values.length;
+  });
+  var showHeaders = groupedFilteredItems.length > 1 && groupedFilteredItems.every(function (g_0) {
+    return g_0.type !== '';
+  });
   var flatList = useMemo(function () {
     var list = [];
     var optionIndex = 0;
@@ -314,12 +312,9 @@ var CustomSelect = function CustomSelect(_ref) {
     }
     return list;
   }, [groupedFilteredItems, showHeaders]);
-  var longestKey = useMemo(function () {
-    var _filteredItems$reduce, _filteredItems$reduce2;
-    return (_filteredItems$reduce = (_filteredItems$reduce2 = filteredItems.reduce(function (a_2, b_2) {
-      return a_2.key.length > b_2.key.length ? a_2 : b_2;
-    }, filteredItems[0])) === null || _filteredItems$reduce2 === void 0 ? void 0 : _filteredItems$reduce2.key) !== null && _filteredItems$reduce !== void 0 ? _filteredItems$reduce : '';
-  }, [filteredItems]);
+  var longestKey = (_filteredItems$reduce = (_filteredItems$reduce2 = filteredItems.reduce(function (a_2, b_2) {
+    return a_2.key.length > b_2.key.length ? a_2 : b_2;
+  }, filteredItems[0])) === null || _filteredItems$reduce2 === void 0 ? void 0 : _filteredItems$reduce2.key) !== null && _filteredItems$reduce !== void 0 ? _filteredItems$reduce : '';
   var rowVirtualizer = useVirtualizer({
     count: flatList.length,
     getScrollElement: function getScrollElement() {

package/dist/SourceView/Highlighter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.d.ts","sourceRoot":"","sources":["../../src/SourceView/Highlighter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAC,KAAK,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAcjE,UAAU,aAAa;IAErB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC7C,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAED,KAAK,QAAQ,GAAG,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAC,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;AAEpF,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAuED,MAAM,MAAM,cAAc,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,SAAS,CAAC;AAEpG,eAAO,MAAM,oBAAoB,GAC/B,aAAa,cAAc,EAC3B,OAAO,MAAM,EACb,UAAU,MAAM,EAChB,eAAe,iBAAiB,CAAC,cAAc,CAAC,KAC/C,QAqEF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6BAA2B,gBAAgB,KAAG,GAAG,CAAC,OAyC7E,CAAC"}
+{"version":3,"file":"Highlighter.d.ts","sourceRoot":"","sources":["../../src/SourceView/Highlighter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAC,KAAK,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAcjE,UAAU,aAAa;IAErB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC7C,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAED,KAAK,QAAQ,GAAG,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAC,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;AAEpF,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAuED,MAAM,MAAM,cAAc,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,SAAS,CAAC;AAEpG,eAAO,MAAM,oBAAoB,GAC/B,aAAa,cAAc,EAC3B,OAAO,MAAM,EACb,UAAU,MAAM,EAChB,eAAe,iBAAiB,CAAC,cAAc,CAAC,KAC/C,QAqEF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6BAA2B,gBAAgB,KAAG,GAAG,CAAC,OAyC7E,CAAC"}

package/dist/SourceView/Highlighter.js

@@ -12,7 +12,7 @@ import { c as _c } from "react-compiler-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useId, useMemo } from 'react';
+import { useId } from 'react';
 import cx from 'classnames';
 import { scaleLinear } from 'd3-scale';
 import createElement from 'react-syntax-highlighter/dist/cjs/create-element';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.144",
+  "version": "0.19.145",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.23",
-    "@parca/components": "0.16.415",
+    "@parca/components": "0.16.416",
     "@parca/dynamicsize": "0.16.74",
     "@parca/hooks": "0.0.125",
     "@parca/icons": "0.16.82",
@@ -89,5 +89,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "aa4600b30ab13936a71c00552b3685fa7955f4d2"
+  "gitHead": "125dbac3accf1ebbac6df49dcd72a38c1e6b4d39"
 }

package/src/MatchersInput/SuggestionsList.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Fragment, useCallback, useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 
 import {Transition} from '@headlessui/react';
 import {usePopper} from 'react-popper';
@@ -90,7 +90,7 @@ const SuggestionsList = ({
   const [isRefetchingValues, setIsRefetchingValues] = useState(false);
   const [isRefetchingNames, setIsRefetchingNames] = useState(false);
 
-  const handleRefetchValues = useCallback(async () => {
+  const handleRefetchValues = async (): Promise<void> => {
     if (isRefetchingValues) return;
 
     setIsRefetchingValues(true);
@@ -99,9 +99,9 @@ const SuggestionsList = ({
     } finally {
       setIsRefetchingValues(false);
     }
-  }, [refetchLabelValues, isRefetchingValues]);
+  };
 
-  const handleRefetchNames = useCallback(async () => {
+  const handleRefetchNames = async (): Promise<void> => {
     if (isRefetchingNames) return;
 
     setIsRefetchingNames(true);
@@ -110,54 +110,45 @@ const SuggestionsList = ({
     } finally {
       setIsRefetchingNames(false);
     }
-  }, [refetchLabelNames, isRefetchingNames]);
+  };
 
   const suggestionsLength =
     suggestions.literals.length + suggestions.labelNames.length + suggestions.labelValues.length;
 
-  const getSuggestion = useCallback(
-    (index: number): Suggestion => {
-      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]
-  );
+  const getSuggestion = (index: number): Suggestion => {
+    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
+    ];
+  };
 
-  const resetHighlight = useCallback(
-    (): void => setHighlightedSuggestionIndex(-1),
-    [setHighlightedSuggestionIndex]
-  );
+  const resetHighlight = (): void => setHighlightedSuggestionIndex(-1);
 
-  const applyHighlightedSuggestion = useCallback((): void => {
+  const applyHighlightedSuggestion = (): void => {
     applySuggestion(getSuggestion(highlightedSuggestionIndex));
     resetHighlight();
-  }, [resetHighlight, applySuggestion, highlightedSuggestionIndex, getSuggestion]);
+  };
 
-  const applySuggestionWithIndex = useCallback(
-    (index: number): void => {
-      applySuggestion(getSuggestion(index));
-      resetHighlight();
-    },
-    [resetHighlight, applySuggestion, getSuggestion]
-  );
+  const applySuggestionWithIndex = (index: number): void => {
+    applySuggestion(getSuggestion(index));
+    resetHighlight();
+  };
 
-  const highlightNext = useCallback((): void => {
+  const highlightNext = (): void => {
     const nextIndex = highlightedSuggestionIndex + 1;
     if (nextIndex === suggestionsLength) {
       resetHighlight();
       return;
     }
     setHighlightedSuggestionIndex(nextIndex);
-  }, [highlightedSuggestionIndex, suggestionsLength, resetHighlight]);
+  };
 
-  const highlightPrevious = useCallback((): void => {
+  const highlightPrevious = (): void => {
     if (highlightedSuggestionIndex === -1) {
       // Didn't select anything, so starting at the bottom.
       setHighlightedSuggestionIndex(suggestionsLength - 1);
@@ -165,66 +156,60 @@ const SuggestionsList = ({
     }
 
     setHighlightedSuggestionIndex(highlightedSuggestionIndex - 1);
-  }, [highlightedSuggestionIndex, suggestionsLength]);
+  };
 
-  const handleKeyPress = useCallback(
-    (event: React.KeyboardEvent<HTMLTextAreaElement>): void => {
-      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;
-      }
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+    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();
+    }
 
-      setShowSuggest(true);
-    },
-    [highlightedSuggestionIndex, applyHighlightedSuggestion, runQuery]
-  );
+    // 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;
+    }
 
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent): void => {
-      // Don't need to handle any key interactions if no suggestions there.
-      if (suggestionsLength === 0 || !['Tab', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
-        return;
-      }
+    setShowSuggest(true);
+  };
 
-      event.preventDefault();
+  const handleKeyDown = (event: KeyboardEvent): void => {
+    // Don't need to handle any key interactions if no suggestions there.
+    if (suggestionsLength === 0 || !['Tab', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+      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();
-      }
+    event.preventDefault();
 
-      // Up arrow highlights previous suggestions.
-      if (event.key === 'ArrowUp') {
+    // 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();
+    }
 
-      // Down arrow highlights next suggestions.
-      if (event.key === 'ArrowDown') {
-        highlightNext();
-      }
-    },
-    [suggestionsLength, highlightNext, highlightPrevious]
-  );
+    // Up arrow highlights previous suggestions.
+    if (event.key === 'ArrowUp') {
+      highlightPrevious();
+    }
+
+    // Down arrow highlights next suggestions.
+    if (event.key === 'ArrowDown') {
+      highlightNext();
+    }
+  };
 
   useEffect(() => {
     const el = inputRef.current;

package/src/MatchersInput/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useMemo, useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
@@ -48,91 +48,78 @@ const MatchersInput = ({setDraftMatchers, draftParsedQuery, commitDraft}: Props)
 
   const value = draftParsedQuery != null ? draftParsedQuery.matchersString() : '';
 
-  const suggestionSections = useMemo(() => {
-    const suggestionSections = new Suggestions();
-    Query.suggest(`${draftParsedQuery?.profileName() as string}{${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;
-      }
+  const suggestionSections = new Suggestions();
+  Query.suggest(`${draftParsedQuery?.profileName() as string}{${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({
+    // 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') {
+      const inputValue = s.typeahead.trim().toLowerCase();
+      const inputLength = inputValue.length;
+      const matches = labelNames.filter(function (label) {
+        return label.toLowerCase().slice(0, inputLength) === inputValue;
+      });
+
+      matches.forEach(m => {
+        const suggestion = {
           type: s.type,
           typeahead: s.typeahead,
-          value: s.value,
-        });
-      }
-      if (s.type === 'labelName') {
-        const inputValue = s.typeahead.trim().toLowerCase();
-        const inputLength = inputValue.length;
-        const matches = labelNames.filter(function (label) {
-          return label.toLowerCase().slice(0, inputLength) === inputValue;
-        });
-
-        matches.forEach(m => {
-          const suggestion = {
-            type: s.type,
-            typeahead: s.typeahead,
-            value: m,
-          };
-
-          if (shouldHandlePrefixes) {
-            const mapping = labelNameMappings.find(l => l.displayName === m);
-            if (mapping != null) {
-              (suggestion as any).fullName = mapping.fullName;
-            }
-          }
-
-          suggestionSections.labelNames.push(suggestion);
-        });
-      }
-
-      if (s.type === 'labelValue') {
-        let labelNameForQuery = s.labelName;
+          value: m,
+        };
 
         if (shouldHandlePrefixes) {
-          const mapping = labelNameMappings.find(l => l.displayName === s.labelName);
+          const mapping = labelNameMappings.find(l => l.displayName === m);
           if (mapping != null) {
-            labelNameForQuery = mapping.fullName;
+            (suggestion as any).fullName = mapping.fullName;
           }
         }
 
-        if (currentLabelName === null || labelNameForQuery !== currentLabelName) {
-          setCurrentLabelName(labelNameForQuery);
-          return;
-        }
+        suggestionSections.labelNames.push(suggestion);
+      });
+    }
+
+    if (s.type === 'labelValue') {
+      let labelNameForQuery = s.labelName;
 
-        if (labelValues !== null) {
-          labelValues
-            .filter(v => v.slice(0, s.typeahead.length) === s.typeahead)
-            .forEach(v =>
-              suggestionSections.labelValues.push({
-                type: s.type,
-                typeahead: s.typeahead,
-                value: v,
-              })
-            );
+      if (shouldHandlePrefixes) {
+        const mapping = labelNameMappings.find(l => l.displayName === s.labelName);
+        if (mapping != null) {
+          labelNameForQuery = mapping.fullName;
         }
       }
-    });
-    return suggestionSections;
-  }, [
-    draftParsedQuery,
-    lastCompleted,
-    labelNames,
-    labelValues,
-    currentLabelName,
-    value,
-    shouldHandlePrefixes,
-    labelNameMappings,
-    setCurrentLabelName,
-  ]);
+
+      if (currentLabelName === null || labelNameForQuery !== currentLabelName) {
+        setCurrentLabelName(labelNameForQuery);
+        return;
+      }
+
+      if (labelValues !== null) {
+        labelValues
+          .filter(v => v.slice(0, s.typeahead.length) === s.typeahead)
+          .forEach(v =>
+            suggestionSections.labelValues.push({
+              type: s.type,
+              typeahead: s.typeahead,
+              value: v,
+            })
+          );
+      }
+    }
+  });
 
   const resetLastCompleted = (): void => setLastCompleted(new Suggestion('', '', ''));
 

package/src/ProfileTypeSelector/index.tsx

@@ -11,8 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useMemo} from 'react';
-
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
 import {ProfileType, ProfileTypesResponse} from '@parca/client';
@@ -180,13 +178,12 @@ const ProfileTypeSelector = ({
   flexibleKnownProfilesDetection = false,
   disabled,
 }: Props): JSX.Element => {
-  const profileNames = useMemo(() => {
-    return (error === undefined || error == null) &&
-      profileTypesData !== undefined &&
-      profileTypesData != null
+  const profileNames =
+    (error === undefined || error == null) &&
+    profileTypesData !== undefined &&
+    profileTypesData != null
       ? normalizeProfileTypesData(profileTypesData.types)
       : [];
-  }, [profileTypesData, error]);
 
   const profileLabels = (
     profileNames.length > 0 ? profileNames : selectedKey != null ? [selectedKey] : []