@parca/profile 0.16.61 → 0.16.63

package/src/MatchersInput/index.tsx

@@ -14,10 +14,9 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {Transition} from '@headlessui/react';
 import {Query} from '@parca/parser';
-import {LabelsResponse, QueryServiceClient, ValuesResponse} from '@parca/client';
+import {LabelsResponse, QueryServiceClient} from '@parca/client';
 import {usePopper} from 'react-popper';
 import cx from 'classnames';
-
 import {useParcaTheme, useGrpcMetadata} from '@parca/components';
 
 interface MatchersInputProps {
@@ -31,39 +30,12 @@ export interface ILabelNamesResult {
   response?: LabelsResponse;
   error?: Error;
 }
-export interface ILabelValuesResult {
-  response?: ValuesResponse;
-  error?: Error;
-}
 
 interface UseLabelNames {
   result: ILabelNamesResult;
   loading: boolean;
 }
 
-interface Matchers {
-  key: string;
-  matcherType: string;
-  value: string;
-}
-
-enum Labels {
-  labelName = 'labelName',
-  labelValue = 'labelValue',
-  literal = 'literal',
-}
-
-// eslint-disable-next-line no-useless-escape
-const labelNameValueRe = /(^([a-z])\w+)(=~|=|!=|!~)(\")[a-zA-Z0-9_.-:]+(\")$/g; // labelNameValueRe matches the following: labelName=~"labelValue"
-const labelNameValueWithoutQuotesRe = /(^([a-z])\w+)(=~|=|!=|!~)[a-zA-Z0-9_.-:]+$/g; // labelNameValueWithoutQuotesRe matches the following: labelName=~labelValue
-const labelNameLiteralRe = /(^([a-z])\w+)(=~|=|!=|!~)/; // labelNameLiteralRe matches the following: labelName=~, labelName!=~, labelName=, labelName!=
-const literalRe = /(=~|=|!=|!~)/; // literalRe matches the following: =~, =, !=, !~
-
-const addQuoteMarks = (labelValue: string): string => {
-  // eslint-disable-next-line no-useless-escape
-  return `\"${labelValue}\"`;
-};
-
 export const useLabelNames = (client: QueryServiceClient): UseLabelNames => {
   const [loading, setLoading] = useState(true);
   const [result, setResult] = useState<ILabelNamesResult>({});
@@ -112,19 +84,16 @@ const MatchersInput = ({
   runQuery,
   currentQuery,
 }: MatchersInputProps): JSX.Element => {
-  const [divInputRef, setDivInputRef] = useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [localMatchers, setLocalMatchers] = useState<Matchers[] | null>(null);
+  const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
   const [focusedInput, setFocusedInput] = useState(false);
   const [showSuggest, setShowSuggest] = useState(true);
-  const [labelValuesLoading, setLabelValuesLoading] = useState(false);
   const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState(-1);
+  const [labelValuesLoading, setLabelValuesLoading] = useState(false);
   const [lastCompleted, setLastCompleted] = useState<Suggestion>(new Suggestion('', '', ''));
-  const [suggestionSections] = useState<Suggestions>(new Suggestions());
-  const [inputRef, setInputRef] = useState<string>('');
-  const [labelValuesResponse, setLabelValuesResponse] = useState<string[] | null>(null);
-  const [currentLabelsCollection, setCurrentLabelsCollection] = useState<string[] | null>(null); // 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.
-  const {styles, attributes} = usePopper(divInputRef, popperElement, {
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [labelValues, setLabelValues] = useState<string[] | null>(null);
+  const [currentLabelName, setCurrentLabelName] = useState<string | null>(null);
+  const {styles, attributes} = usePopper(inputRef, popperElement, {
     placement: 'bottom-start',
   });
   const metadata = useGrpcMetadata();
@@ -137,17 +106,19 @@ const MatchersInput = ({
     return <div className="pt-2 pb-4">{Spinner}</div>;
   };
 
-  const getLabelNameValues = (labelName: string): void => {
-    const call = queryClient.values({labelName, match: []}, {meta: metadata});
-    setLabelValuesLoading(true);
-
-    call.response
-      .then(response => {
-        setLabelValuesResponse(response.labelValues);
-      })
-      .catch(() => setLabelValuesResponse(null))
-      .finally(() => setLabelValuesLoading(false));
-  };
+  useEffect(() => {
+    if (currentLabelName !== null) {
+      const call = queryClient.values({labelName: currentLabelName, match: []}, {meta: metadata});
+      setLabelValuesLoading(true);
+
+      call.response
+        .then(response => {
+          setLabelValues(response.labelValues);
+        })
+        .catch(() => setLabelValues(null))
+        .finally(() => setLabelValuesLoading(false));
+    }
+  }, [currentLabelName, queryClient, metadata]);
 
   const labelNames =
     (labelNamesError === undefined || labelNamesError == null) &&
@@ -156,12 +127,10 @@ const MatchersInput = ({
       ? labelNamesResponse.labelNames.filter(e => e !== '__name__')
       : [];
 
-  const labelValues =
-    labelValuesResponse !== undefined && labelValuesResponse != null ? labelValuesResponse : [];
-
   const value = currentQuery.matchersString();
 
-  Query.suggest(`{${value}`).forEach(function (s) {
+  const suggestionSections = new Suggestions();
+  Query.suggest(`${currentQuery.profileName()}{${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.
@@ -172,63 +141,46 @@ const MatchersInput = ({
     // 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(e => 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') {
       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 => {
-        if (suggestionSections.labelNames.find(e => e.value === m) != null) {
-          return;
-        }
-
+      matches.forEach(m =>
         suggestionSections.labelNames.push({
           type: s.type,
           typeahead: s.typeahead,
           value: m,
-        });
-        suggestionSections.literals = [];
-        suggestionSections.labelValues = [];
-      });
+        })
+      );
     }
 
-    if (s.type === Labels.labelValue) {
-      const inputValue = s.typeahead.trim().toLowerCase();
-      const inputLength = inputValue.length;
-
-      const matches = labelValues.filter(function (label) {
-        return label.toLowerCase().slice(0, inputLength) === inputValue;
-      });
-
-      matches.forEach(m => {
-        if (suggestionSections.labelValues.find(e => e.value === m) != null) {
-          return;
-        }
+    if (s.type === 'labelValue') {
+      if (currentLabelName === null || s.labelName !== currentLabelName) {
+        setCurrentLabelName(s.labelName);
+        return;
+      }
 
-        suggestionSections.labelValues.push({
-          type: s.type,
-          typeahead: s.typeahead,
-          value: m,
-        });
-        suggestionSections.labelNames = [];
-        suggestionSections.literals = [];
-      });
+      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,
+            })
+          );
+      }
     }
   });
 
@@ -237,48 +189,12 @@ const MatchersInput = ({
     suggestionSections.labelNames.length +
     suggestionSections.labelValues.length;
 
-  const getLabelsFromMatchers = (matchers: Matchers[]): string[] => {
-    return matchers
-      .filter(matcher => matcher.key !== '__name__')
-      .map(matcher => `${matcher.key}${matcher.matcherType}${addQuoteMarks(matcher.value)}`);
-  };
-
-  useEffect(() => {
-    const matchers = currentQuery.matchers.filter(matcher => 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]);
-
   const resetHighlight = (): void => setHighlightedSuggestionIndex(-1);
   const resetLastCompleted = (): void => setLastCompleted(new Suggestion('', '', ''));
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const 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(suggestion =>
-        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)) {
-      const labelValueSearch = newValue.split(literalRe)[2];
-
-      suggestionSections.labelValues = suggestionSections.labelValues.filter(suggestion =>
-        suggestion.value.toLowerCase().includes(labelValueSearch.toLowerCase())
-      );
-    }
-
-    setInputRef(newValue);
+    setMatchersString(newValue);
     resetLastCompleted();
     resetHighlight();
   };
@@ -288,22 +204,19 @@ const MatchersInput = ({
   };
 
   const getSuggestion = (index: number): Suggestion => {
-    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
+    ];
   };
 
   const highlightNext = (): void => {
     const nextIndex = highlightedSuggestionIndex + 1;
-
     if (nextIndex === suggestionsLength) {
       resetHighlight();
       return;
@@ -323,181 +236,30 @@ const MatchersInput = ({
 
   const applySuggestion = (suggestionIndex: number): void => {
     const suggestion = getSuggestion(suggestionIndex);
-
-    if (suggestion.type === Labels.labelValue) {
-      suggestion.value = addQuoteMarks(suggestion.value);
-    }
-
     const newValue = complete(suggestion);
     resetHighlight();
-
-    if (suggestion.type === Labels.labelName) {
-      getLabelNameValues(suggestion.value);
-    }
-
     setLastCompleted(suggestion);
     setMatchersString(newValue);
-
-    if (suggestion.type === Labels.labelValue) {
-      const values = newValue.split(',');
-
-      if (currentLabelsCollection == null || currentLabelsCollection?.length === 0) {
-        setCurrentLabelsCollection(values);
-      } else {
-        setCurrentLabelsCollection((oldValues: string[] | null) => [
-          ...(oldValues ?? []),
-          values[values.length - 1],
-        ]);
-      }
-
-      setInputRef('');
-      focus();
-      return;
-    }
-
-    if (lastCompleted.type === Labels.labelValue && suggestion.type === Labels.literal) {
-      setInputRef('');
-      focus();
-      return;
+    if (inputRef !== null) {
+      inputRef.value = newValue;
+      inputRef.focus();
     }
-
-    if (currentLabelsCollection !== null) {
-      setInputRef(newValue.substring(newValue.lastIndexOf(',') + 1));
-      focus();
-      return;
-    }
-
-    setInputRef(newValue);
-    focus();
   };
 
   const applyHighlightedSuggestion = (): void => {
     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".
-  const addQuotesToInputRefLabelValue = (inputRef: string): string => {
-    const labelValue = inputRef.split(literalRe)[2].replaceAll(',', '');
-    const labelValueWithQuotes = addQuoteMarks(labelValue);
-    return inputRef.replace(labelValue, labelValueWithQuotes);
-  };
-
-  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>): void => {
-    const values = inputRef.replaceAll(',', '');
-
-    if (labelNameValueRe.test(inputRef)) {
-      if (currentLabelsCollection === null) {
-        setMatchersString(inputRef);
-      } else {
-        setMatchersString(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.
-      const inputValues = 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]);
-      } else {
-        setCurrentLabelsCollection((oldValues: string[] | null) => {
-          // 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 [...(oldValues ?? []), inputValues];
-        });
-      }
-
-      // update the currentQuery expression with the currentLabelsCollection array if it's not null, otherwise use the current inputRef value.
-      setMatchersString(
-        currentLabelsCollection !== null
-          ? `${currentLabelsCollection?.join(',')},${inputValues}`
-          : `${inputValues},`
-      );
-      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(`${currentLabelsCollection?.join(',')},${inputRef}}`);
-      } else {
-        // if not, we jsut update the currentQuery expression with the current inputRef value.
-        setMatchersString(inputRef);
-      }
-
-      if (currentLabelsCollection === null && inputRef.length === 0) {
-        setMatchersString('');
-      }
-    }
-  };
-
   const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>): void => {
     // 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);
-
-      const matchers = currentQuery.matchers.filter(matcher => matcher.key !== '__name__');
-      setLocalMatchers(prevState => {
-        if (inputRef.length > 0) return prevState;
-        if (matchers.length === 0) return prevState;
-        return matchers;
-      });
-    }
-
-    // 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 === '=') {
-      const labelName = inputRef.split(literalRe)[0];
-
-      if (suggestionSections.labelNames.length > 0) {
-        // Find the label name in the suggestion list and get the index
-        const suggestion = suggestionSections.labelNames.find(
-          suggestion => suggestion.value === labelName
-        );
-        // 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)) {
-      const literal = inputRef.split(literalRe)[1];
-
-      if (suggestionSections.literals.length > 0) {
-        // Find the literal in the suggestion list and get the index
-        const suggestion = suggestionSections.literals.find(
-          suggestion => suggestion.value === literal
-        );
-        // 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;
@@ -507,13 +269,6 @@ const MatchersInput = ({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
-    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;
@@ -551,147 +306,129 @@ const MatchersInput = ({
     resetHighlight();
   };
 
-  const removeLabel = (label: number): void => {
-    if (currentLabelsCollection === null) return;
-
-    const newLabels = [...currentLabelsCollection];
-    newLabels.splice(label, 1);
-    setCurrentLabelsCollection(newLabels);
-
-    const newLabelsAsAString = newLabels.join(',');
-    setMatchersString(newLabelsAsAString);
-  };
-
-  const removeLocalMatcher = (): void => {
-    if (localMatchers === null) return;
-
-    const newMatchers = [...localMatchers];
-    newMatchers.splice(localMatchers.length - 1, 1);
-    setLocalMatchers(newMatchers);
-  };
-
-  const profileSelected = currentQuery.profType.profileName === '';
+  const profileSelected = currentQuery.profileName() === '';
 
   return (
-    <>
-      <div
-        ref={setDivInputRef}
-        className="w-full flex items-center text-sm border-gray-300 dark:border-gray-600 border-b"
-      >
-        <ul className="flex space-x-2">
-          {currentLabelsCollection?.map((value, i) => (
-            <li
-              key={i}
-              className="bg-indigo-600 w-fit py-1 px-2 text-gray-100 dark-gray-900 rounded-md"
-            >
-              {value}
-            </li>
-          ))}
-        </ul>
-
-        <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} // Disable input if no profile has been selected
-          title={
-            profileSelected ? 'Select a profile first to query profiles...' : 'query profiles...'
-          }
-        />
-      </div>
-
-      <div
-        ref={setPopperElement}
-        style={{...styles.popper, marginLeft: 0}}
-        {...attributes.popper}
-        className="z-50"
-      >
-        <Transition
-          show={focusedInput && showSuggest}
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+    <div className="font-mono flex-1 w-full block">
+      <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} // Disable input if no profile has been selected
+        title={
+          profileSelected
+            ? 'Select a profile first to enter a filter...'
+            : 'filter profiles... eg. node="test"'
+        }
+      />
+      {suggestionsLength > 0 && (
+        <div
+          ref={setPopperElement}
+          style={{...styles.popper, marginLeft: 0}}
+          {...attributes.popper}
+          className="z-50"
         >
-          <div
-            style={{width: 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"
+          <Transition
+            show={focusedInput && showSuggest}
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
-            {labelNamesLoading ? (
-              <LoadingSpinner />
-            ) : (
-              <>
-                {suggestionSections.labelNames.map((l, i) => (
-                  <div
-                    key={i}
-                    className={cx(
-                      highlightedSuggestionIndex === i && 'text-white bg-indigo-600',
-                      'cursor-default select-none relative py-2 pl-3 pr-9'
-                    )}
-                    onMouseOver={() => setHighlightedSuggestionIndex(i)}
-                    onClick={() => applySuggestion(i)}
-                    onMouseOut={() => resetHighlight()}
-                  >
-                    {l.value}
-                  </div>
-                ))}
-              </>
-            )}
-
-            {suggestionSections.literals.map((l, i) => (
-              <div
-                key={i}
-                className={cx(
-                  highlightedSuggestionIndex === i + suggestionSections.labelNames.length &&
-                    'text-white bg-indigo-600',
-                  'cursor-default select-none relative py-2 pl-3 pr-9'
-                )}
-                onMouseOver={() =>
-                  setHighlightedSuggestionIndex(i + suggestionSections.labelNames.length)
-                }
-                onClick={() => applySuggestion(i + suggestionSections.labelNames.length)}
-                onMouseOut={() => resetHighlight()}
-              >
-                {l.value}
-              </div>
-            ))}
-
-            {labelValuesLoading && lastCompleted.type === 'literal' ? (
-              <LoadingSpinner />
-            ) : (
-              <>
-                {suggestionSections.labelValues.map((l, i) => (
-                  <div
-                    key={i}
-                    className={cx(
-                      highlightedSuggestionIndex === i && 'text-white bg-indigo-600',
-                      'cursor-default select-none relative py-2 pl-3 pr-9'
-                    )}
-                    onMouseOver={() => setHighlightedSuggestionIndex(i)}
-                    onClick={() => applySuggestion(i)}
-                    onMouseOut={() => resetHighlight()}
-                  >
-                    {l.value}
-                  </div>
-                ))}
-              </>
-            )}
-          </div>
-        </Transition>
-      </div>
-    </>
+            <div
+              style={{width: 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"
+            >
+              {labelNamesLoading ? (
+                <LoadingSpinner />
+              ) : (
+                <>
+                  {suggestionSections.labelNames.map((l, i) => (
+                    <div
+                      key={i}
+                      className={cx(
+                        highlightedSuggestionIndex === i && 'text-white bg-indigo-600',
+                        'cursor-default select-none relative py-2 pl-3 pr-9'
+                      )}
+                      onMouseOver={() => setHighlightedSuggestionIndex(i)}
+                      onClick={() => applySuggestion(i)}
+                      onMouseOut={() => resetHighlight()}
+                    >
+                      {l.value}
+                    </div>
+                  ))}
+                </>
+              )}
+
+              {suggestionSections.literals.map((l, i) => (
+                <div
+                  key={i}
+                  className={cx(
+                    highlightedSuggestionIndex === i + suggestionSections.labelNames.length &&
+                      'text-white bg-indigo-600',
+                    'cursor-default select-none relative py-2 pl-3 pr-9'
+                  )}
+                  onMouseOver={() =>
+                    setHighlightedSuggestionIndex(i + suggestionSections.labelNames.length)
+                  }
+                  onClick={() => applySuggestion(i + suggestionSections.labelNames.length)}
+                  onMouseOut={() => resetHighlight()}
+                >
+                  {l.value}
+                </div>
+              ))}
+
+              {labelValuesLoading && lastCompleted.type === 'literal' ? (
+                <LoadingSpinner />
+              ) : (
+                <>
+                  {suggestionSections.labelValues.map((l, i) => (
+                    <div
+                      key={i}
+                      className={cx(
+                        highlightedSuggestionIndex === i && 'text-white bg-indigo-600',
+                        'cursor-default select-none relative py-2 pl-3 pr-9'
+                      )}
+                      onMouseOver={() =>
+                        setHighlightedSuggestionIndex(
+                          i +
+                            suggestionSections.labelNames.length +
+                            suggestionSections.literals.length
+                        )
+                      }
+                      onClick={() =>
+                        applySuggestion(
+                          i +
+                            suggestionSections.labelNames.length +
+                            suggestionSections.literals.length
+                        )
+                      }
+                      onMouseOut={() => resetHighlight()}
+                    >
+                      {l.value}
+                    </div>
+                  ))}
+                </>
+              )}
+            </div>
+          </Transition>
+        </div>
+      )}
+    </div>
   );
 };