Fix FilterForm bugs, rename filters, add defaultOperator

Author: Sebastian Benjamin

jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx

@@ -104,31 +104,37 @@ const FilterForm = (props: FilterFormProps ) => {
         }
     };
 
-    const handleFilterChange = (index, key, value) => {
-        const newFilters = filters.map((filter, i) => {
-            if (i === index) {
-                const updatedFilter = Object.assign(new Filter('', OperatorKey.None, ''), { ...filter, [key]: value });
-
-                if (key === "operator") {
-                    updatedFilter.operator = OperatorRegistry[value as OperatorKey];
-
-                    if (value === OperatorKey.IsEmpty || value === OperatorKey.IsNotEmpty) {
-                        updatedFilter.value = '';
-                    }
-
-                    if (value === OperatorKey.EqualsOneOf || updatedFilter.operator.key === OperatorKey.EqualsOneOf) {
-                        updatedFilter.value = ''; 
-                    }
-                }
+    const handleFilterChange = (
+      index: number,
+      key: 'field' | 'operator' | 'value',
+      value: any
+    ) => {
+      const newFilters = filters.map((filter, i) => {
+        if (i !== index) return filter;
+
+        const updatedFilter = Object.assign(
+          new Filter('', OperatorKey.None, ''),
+          { ...filter, [key]: value }
+        );
+
+        if (key === 'field') {
+          const fieldInfo = fieldTypeInfo.find(f => f.name === value);
+          const defaultOp = fieldInfo?.getDefaultOperator() ?? OperatorRegistry[OperatorKey.None];
+          updatedFilter.operator = defaultOp;
+          updatedFilter.value = '';
+        }
+        else if (key === 'operator') {
+          updatedFilter.operator = OperatorRegistry[value as OperatorKey];
+          updatedFilter.value = '';
+        }
 
-                return updatedFilter;
-            }
-            return filter;
-        });
+        return updatedFilter;
+      });
 
-        localSetFilters(newFilters);
+      localSetFilters(newFilters);
     };
 
+
     const handleSubmit = (event) => {
       event.preventDefault()
       const highlighted: Record<number, { field: boolean; operator: boolean; value: boolean }> = {}
@@ -302,6 +308,7 @@ const FilterForm = (props: FilterFormProps ) => {
                                 ) : fieldTypeInfo.find(obj => obj.name === filter.field)?.allowableValues?.length > 1 ? (
                                     <FormControlMinWidth sx={ highlightedInputs[index]?.value ? highlightedSx : null } >
                                         <AsyncSelect
+                                            key={`async-${index}-${filter.operator.key}`}
                                             id={`value-select-${index}`}
                                             inputId={`value-select-${index}`}
                                             aria-labelledby={`value-select-${index}`}
@@ -328,7 +335,11 @@ const FilterForm = (props: FilterFormProps ) => {
                                                 const val = arr.map(s => s.value).join(',')
                                                 handleFilterChange(index, 'value', val)
                                             }}
-                                            value={filter.value ? (filter.value as string).split(',').map(value => ({label: value, value})) : undefined}
+                                            value={
+                                                filter.value
+                                                  ? (filter.value as string).split(',').map(v => ({ label: v, value: v }))
+                                                  : null
+                                              }
                                         />
                                     </FormControlMinWidth>
                                 ) : fieldTypeInfo.find(obj => obj.name === filter.field)?.allowableValues?.length > 0 ? (

jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx

@@ -560,7 +560,7 @@ const VariantTableWidget = observer(props => {
                                     onClick={() => setFilterModalOpen(true)}
                                     style={{ border: "1px solid gray", margin: "5px" }}
                                 >
-                                    {`${(filter as any).field} ${(filter as any).operator}`}
+                                    {`${(filter as any).field} ${(filter as any).operator.key}`}
                                 </Button>
                             );
                         }
@@ -578,7 +578,7 @@ const VariantTableWidget = observer(props => {
                                 key={index}
                                 onClick={() => setFilterModalOpen(true)}
                                 style={{ border: "1px solid gray", margin: "5px" }}                            >
-                                {`${(filter as any).field} ${(filter as any).operator} ${(filter as any).value}`}
+                                {`${(filter as any).field} ${(filter as any).operator.key} ${(filter as any).value}`}
                             </Button>
                         );
                     })}

jbrowse/src/client/JBrowse/VariantSearch/operators.ts

@@ -13,12 +13,12 @@ export enum OperatorKey {
   NumericGte         = '>=',
   NumericLt          = '<',
   NumericLte         = '<=',
-  VariableIn         = 'variable in',
-  NotVariableIn      = 'not variable in',
-  VariableInAll      = 'variable in all of',
-  VariableInAny      = 'variable in any of',
-  NotVariableInAny  = 'not variable in any of',
-  NotVariableInOne  = 'not variable in one of',
+  IsIn             = 'is in',
+  IsNotIn          = 'is not in',
+  IsInAllOf        = 'is in all of',
+  IsInAnyOf        = 'is in any of',
+  IsNotInAnyOf     = 'is not in any of',
+  IsNotInOneOf     = 'is not in one of',
   EqualsOneOf        = 'equals one of',
   None              = ''
 }
@@ -120,37 +120,37 @@ export const OperatorRegistry: Record<OperatorKey, Operator> = {
     label: 'Equals One Of',
     generateLucene: (f, v: string) => `${f}:~${v}~`,
   },
-  [OperatorKey.VariableIn]: {
-    key: OperatorKey.VariableIn,
-    label: 'Variable In',
+ [OperatorKey.IsIn]: {
+    key: OperatorKey.IsIn,
+    label: 'Is In',
     generateLucene: (f, v: string) => `${f}:${v}`,
   },
-  [OperatorKey.NotVariableIn]: {
-    key: OperatorKey.NotVariableIn,
-    label: 'Not Variable In',
+  [OperatorKey.IsNotIn]: {
+    key: OperatorKey.IsNotIn,
+    label: 'Is Not In',
     generateLucene: (f, v: string) => `*:* -${f}:${v}`,
   },
-  [OperatorKey.VariableInAll]: {
-    key: OperatorKey.VariableInAll,
-    label: 'Variable In All Of',
+  [OperatorKey.IsInAllOf]: {
+    key: OperatorKey.IsInAllOf,
+    label: 'Is In All Of',
     generateLucene: (f, v: string) =>
       v.split(',').map(val => `+${f}:${val}`).join(' '),
   },
-  [OperatorKey.VariableInAny]: {
-    key: OperatorKey.VariableInAny,
-    label: 'Variable In Any Of',
+  [OperatorKey.IsInAnyOf]: {
+    key: OperatorKey.IsInAnyOf,
+    label: 'Is In Any Of',
     generateLucene: (f, v: string) =>
       v.split(',').map(val => `${f}:${val}`).join(' OR '),
   },
-  [OperatorKey.NotVariableInAny]: {
-    key: OperatorKey.NotVariableInAny,
-    label: 'Not Variable In Any Of',
+  [OperatorKey.IsNotInAnyOf]: {
+    key: OperatorKey.IsNotInAnyOf,
+    label: 'Is Not In Any Of',
     generateLucene: (f, v: string) =>
       v.split(',').map(val => `*:* -${f}:${val}`).join(' AND '),
   },
-  [OperatorKey.NotVariableInOne]: {
-    key: OperatorKey.NotVariableInOne,
-    label: 'Not Variable In One Of',
+  [OperatorKey.IsNotInOneOf]: {
+    key: OperatorKey.IsNotInOneOf,
+    label: 'Is Not In One Of',
     generateLucene: (f, v: string) =>
       v.split(',').map(val => `*:* -${f}:${val}`).join(' OR '),
   },

jbrowse/src/client/JBrowse/utils.ts

@@ -393,6 +393,7 @@ export class FieldModel {
     url: string
     flex: number
     supportsFilter: boolean = true
+    defaultOperator: string
 
     getLabel(): string {
         return this.label ?? this.name
@@ -421,12 +422,12 @@ export class FieldModel {
         if (this.name === 'variableSamples') {
           return [
             OperatorKey.EqualsOneOf,
-            OperatorKey.VariableIn,
-            OperatorKey.NotVariableIn,
-            OperatorKey.VariableInAll,
-            OperatorKey.VariableInAny,
-            OperatorKey.NotVariableInAny,
-            OperatorKey.NotVariableInOne,
+            OperatorKey.IsIn,
+            OperatorKey.IsNotIn,
+            OperatorKey.IsInAllOf,
+            OperatorKey.IsInAnyOf,
+            OperatorKey.IsNotInAnyOf,
+            OperatorKey.IsNotInOneOf,
             OperatorKey.IsEmpty,
             OperatorKey.IsNotEmpty,
           ].map(k => OperatorRegistry[k])
@@ -465,6 +466,7 @@ export class FieldModel {
     }
 
     getDefaultOperator(): Operator | undefined {
+        if (this.defaultOperator && this.defaultOperator != "") return OperatorRegistry[this.defaultOperator]
         return this.getOperators()[0]
     }
 
@@ -506,15 +508,16 @@ export class FieldModel {
 }
 
 export function createEncodedFilterString(filters: Filter[]): string {
-  if (!filters.length || filters.every(f => f.isEmpty())) return 'all'
-  return encodeURIComponent(filters.map(f => f.encode()).join('&'))
+    if (!filters.length || filters.every(f => f.isEmpty())) return 'all'
+    return encodeURIComponent(filters.map(f => f.encode()).join('&'))
 }
 
 export function buildLuceneQuery(filters: Filter[]): string {
-  return filters
-    .filter(f => !f.isEmpty())
-    .map(f => f.toLucene())
-    .join('&')
+    if (!filters.length || filters.every(f => f.isEmpty())) return 'all'
+    return filters
+        .filter(f => !f.isEmpty())
+        .map(f => f.toLucene())
+        .join('&')
 }
 
 export async function fetchFieldTypeInfo(sessionId: string, trackId: string, successCallback: (fields: FieldModel[], groups: string[], promotedFilters: Map<string, Filter[]>) => void, failureCallback) {
@@ -605,7 +608,7 @@ export function searchStringToInitialFilters(knownFieldNames: string[]) : Filter
         return Filter.fromString(searchString).filter(({ field }) => knownFieldNames.includes(field))
     }
 
-    return [new Filter('', OperatorKey.None, '')]
+    return []
 }