feat: hide the < and > operators for filters with string values

packages/scenes/src/variables/adhoc/AdHocFilterRenderer.tsx

@@ -114,6 +114,7 @@ export function AdHocFilterRenderer({ filter, model }: Props) {
     <Select
       virtualized
       allowCustomValue={model.state.allowCustomValue ?? true}
+      areTheFilterValuesNumbers={model.state.areTheFilterValuesNumbers ?? true}
       isValidNewOption={(inputValue) => inputValue.trim().length > 0}
       allowCreateWhileLoading
       formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}
@@ -169,6 +170,7 @@ export function AdHocFilterRenderer({ filter, model }: Props) {
       className={cx(styles.key, isKeysOpen ? styles.widthWhenOpen : undefined)}
       width="auto"
       allowCustomValue={model.state.allowCustomValue ?? true}
+      areTheFilterValuesNumbers={model.state.areTheFilterValuesNumbers ?? true}
       value={keyValue}
       placeholder={'Select label'}
       options={handleOptionGroups(keys)}

packages/scenes/src/variables/adhoc/AdHocFiltersVariable.test.tsx

@@ -1383,7 +1383,7 @@ describe.each(['11.1.2', '11.1.1'])('AdHocFiltersVariable', (v) => {
     });
   });
 
-  describe('operators', () => {
+  describe('the operators', () => {
     it('shows the regex operators when allowCustomValue is set true', async () => {
       setup({
         allowCustomValue: true,
@@ -1396,14 +1396,7 @@ describe.each(['11.1.2', '11.1.1'])('AdHocFiltersVariable', (v) => {
 
       const options = screen.getAllByRole('option').map((option) => option.textContent?.trim());
 
-      expect(options).toEqual([
-        '=Equals',
-        '!=Not equal',
-        '=~Matches regex',
-        '!~Does not match regex',
-        '<Less than',
-        '>Greater than',
-      ]);
+      expect(options).toEqual(['=Equals', '!=Not equal', '=~Matches regex', '!~Does not match regex']);
     });
 
     it('does not show the regex operators when allowCustomValue is set false', async () => {
@@ -1418,8 +1411,36 @@ describe.each(['11.1.2', '11.1.1'])('AdHocFiltersVariable', (v) => {
 
       const options = screen.getAllByRole('option').map((option) => option.textContent?.trim());
 
+      expect(options).toEqual(['=Equals', '!=Not equal']);
+    });
+
+    it('shows the less and greater than operators if the filter values are numbers', async () => {
+      setup({
+        areTheFilterValuesNumbers: true,
+      });
+
+      const middleKeySelect = screen.getAllByRole('combobox')[1];
+      await userEvent.click(middleKeySelect);
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+      const options = screen.getAllByRole('option').map((option) => option.textContent?.trim());
       expect(options).toEqual(['=Equals', '!=Not equal', '<Less than', '>Greater than']);
     });
+
+    it('does not show the less and greater than operators if the filters values are not numbers', async () => {
+      setup({
+        areTheFilterValuesNumbers: false,
+      });
+
+      const middleKeySelect = screen.getAllByRole('combobox')[1];
+      await userEvent.click(middleKeySelect);
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+      const options = screen.getAllByRole('option').map((option) => option.textContent?.trim());
+      expect(options).toEqual(['=Equals', '!=Not equal']);
+    });
   });
 });
 

packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx

@@ -101,6 +101,11 @@ export interface AdHocFiltersVariableState extends SceneVariableState {
    */
   allowCustomValue?: boolean;
 
+  /**
+   * Check if the values returned from getTagValuesProvider are numbers
+   */
+  areTheFilterValuesNumbers?: boolean;
+
   /**
    * @internal state of the new filter being added
    */
@@ -126,6 +131,7 @@ export type OperatorDefinition = {
   description?: string;
   isMulti?: Boolean;
   isRegex?: Boolean;
+  isNumber?: Boolean;
 };
 
 export const OPERATORS: OperatorDefinition[] = [
@@ -160,10 +166,12 @@ export const OPERATORS: OperatorDefinition[] = [
   {
     value: '<',
     description: 'Less than',
+    isNumber: true,
   },
   {
     value: '>',
     description: 'Greater than',
+    isNumber: true,
   },
 ];
 
@@ -336,6 +344,7 @@ export class AdHocFiltersVariable
     const otherFilters = this.state.filters.filter((f) => f.key !== currentKey).concat(this.state.baseFilters ?? []);
     const timeRange = sceneGraph.getTimeRange(this).state.value;
     const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : undefined;
+
     const response = await ds.getTagKeys({
       filters: otherFilters,
       queries,
@@ -399,6 +408,13 @@ export class AdHocFiltersVariable
       values = values.concat(dataFromResponse(override.values));
     }
 
+    const areValuesNumbers = values.some((value) => typeof value.value === 'number');
+    if (areValuesNumbers) {
+      this.setState({ areTheFilterValuesNumbers: true });
+    } else {
+      this.setState({ areTheFilterValuesNumbers: false });
+    }
+
     return values.map(toSelectableValue);
   }
 
@@ -409,15 +425,20 @@ export class AdHocFiltersVariable
   }
 
   public _getOperators() {
-    const { supportsMultiValueOperators, allowCustomValue } = this.state;
+    const { supportsMultiValueOperators, allowCustomValue, areTheFilterValuesNumbers } = this.state;
 
-    return OPERATORS.filter(({ isMulti, isRegex }) => {
+    return OPERATORS.filter(({ isMulti, isRegex, isNumber }) => {
       if (!supportsMultiValueOperators && isMulti) {
         return false;
       }
       if (!allowCustomValue && isRegex) {
         return false;
       }
+
+      if (!areTheFilterValuesNumbers && isNumber) {
+        return false;
+      }
+
       return true;
     }).map<SelectableValue<string>>(({ value, description }) => ({
       label: value,