Add the ability to trigger a searchString=all search

Author: Sebastian Benjamin

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

@@ -24,7 +24,7 @@ const ArrowPagination: React.FC<ArrowPaginationProps> = ({ offset, onOffsetChang
       <IconButton onClick={handleLeftClick}>
         <ArrowBackIosIcon />
       </IconButton>
-      <span style={{marginTop: "4px"}}><strong>Results {offset*100}-{(offset+1)*100}</strong></span>
+      <span style={{marginTop: "4px"}}><strong>Page {offset+1}</strong></span>
       <IconButton onClick={handleRightClick}>
         <ArrowForwardIosIcon />
       </IconButton>

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

@@ -106,12 +106,17 @@ const FilterForm = (props: FilterFormProps ) => {
   };
 
   const handleRemoveFilter = (index) => {
+  // If it's the last filter, just reset its values to default empty values
+  if (filters.length === 1) {
+    localSetFilters([{ field: "", operator: "", value: "" }]);
+  } else {
+    // Otherwise, remove the filter normally
     localSetFilters(
       filters.filter((filter, i) => {
         return i !== index;
       })
     );
-  };
+  }};
 
   const handleFilterChange = (index, key, value) => {
   const newFilters = filters.map((filter, i) => {
@@ -129,29 +134,30 @@ const handleSubmit = (event) => {
   const highlightedInputs = {};
 
   filters.forEach((filter, index) => {
-    highlightedInputs[index] = { field: false, operator: false, value: false };
+      highlightedInputs[index] = { field: false, operator: false, value: false };
 
-    if (filter.field === '') {
-      highlightedInputs[index].field = true;
-    }
+      if (filter.field === '') {
+          highlightedInputs[index].field = true;
+      }
 
-    if (filter.operator === '') {
-      highlightedInputs[index].operator = true;
-    }
+      if (filter.operator === '') {
+          highlightedInputs[index].operator = true;
+      }
 
-    if (filter.value === '') {
-      highlightedInputs[index].value = true;
-    }
-  });
+      if (filter.value === '') {
+          highlightedInputs[index].value = true;
+      }
+    });
 
-  setHighlightedInputs(highlightedInputs);
+    const isSingleEmptyFilter = filters.length === 1 && !filters[0].field && !filters[0].operator && !filters[0].value;
 
-  if (!Object.values(highlightedInputs).some(v => (v as any).field || (v as any).operator || (v as any).value)) {
-    handleQuery(filters);
-    setFilters(filters);
-    handleClose();
-  }
-};
+    setHighlightedInputs(highlightedInputs);
+    if (isSingleEmptyFilter || !Object.values(highlightedInputs).some(v => (v as any).field || (v as any).operator || (v as any).value)) {
+        handleQuery(filters);
+        setFilters(filters);
+        handleClose();
+    }
+  };
 
   return (
    <Card className={classes.card} elevation={0}>
@@ -260,15 +266,13 @@ const handleSubmit = (event) => {
                 />
               )}
 
-              {filters.length > 1 && (
               <Button
                 variant="contained"
                 color="primary"
                 onClick={() => handleRemoveFilter(index)}
               >
                 Remove Filter
               </Button>
-              )}
             </div>
           ))}
         </div>