Improvements to the filter panel in JBrowse free-text search (#214)

* Improvements to the filter panel in JBrowse free-text search

Author: bbimber

jbrowse/api-src/org/labkey/api/jbrowse/GroupsProvider.java

@@ -9,5 +9,8 @@
 public interface GroupsProvider
 {
         @Nullable List<String> getGroupMembers(String trackId, String groupName, Container c, User u);
+
+        @Nullable List<String> getGroupNames(Container c, User u);
+
         boolean isAvailable(Container c, User u);
 }

jbrowse/api-src/org/labkey/api/jbrowse/JBrowseFieldCustomizer.java

@@ -3,8 +3,13 @@
 import org.labkey.api.data.Container;
 import org.labkey.api.security.User;
 
+import java.util.Collection;
+import java.util.List;
+
 public interface JBrowseFieldCustomizer {
     public void customizeField(JBrowseFieldDescriptor field, Container c, User u);
 
+    public List<String> getPromotedFilters(Collection<String> indexedFields, Container c, User u);
+
     public boolean isAvailable(Container c, User u);
 }

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

@@ -9,7 +9,9 @@ import InputLabel from '@material-ui/core/InputLabel';
 import CardActions from '@material-ui/core/CardActions';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import { FieldModel, searchStringToInitialFilters } from '../../utils';
+import { FieldModel, Filter, getOperatorsForField, searchStringToInitialFilters } from '../../utils';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import { Box, Menu } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   formControl: {
@@ -86,29 +88,31 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export declare type FilterFormProps = {
-  availableOperators: any,
-  handleQuery: (filters: string[]) => void,
-  setFilters: (filters: string[]) => void,
+  handleQuery: (filters: Filter[]) => void,
+  setFilters: (filters: Filter[]) => void,
   handleClose?: any,
-  fieldTypeInfo: FieldModel[]
+  fieldTypeInfo: FieldModel[],
+  allowedGroupNames?: string[],
+  promotedFilters?: Map<string, Filter[]>
 }
 
 const FilterForm = (props: FilterFormProps ) => {
-  const { availableOperators, handleQuery, setFilters, handleClose, fieldTypeInfo } = props
-  // TODO: this should use a typed class for Filter. see utils.ts
-  const [filters, localSetFilters] = useState(searchStringToInitialFilters(availableOperators));
+  const { handleQuery, setFilters, handleClose, fieldTypeInfo, allowedGroupNames, promotedFilters } = props
+  const [filters, localSetFilters] = useState<Filter[]>(searchStringToInitialFilters(fieldTypeInfo.map((x) => x.name)));
   const [highlightedInputs, setHighlightedInputs] = useState<{ [index: number]: { field: boolean, operator: boolean, value: boolean } }>({});
+  const [commonFilterMenuOpen, setCommonFilterMenuOpen] = useState<boolean>(false)
+  const buttonRef = React.useRef(null);
 
   const classes = useStyles();
 
   const handleAddFilter = () => {
-    localSetFilters([...filters, { field: "", operator: "", value: "" }]);
+    localSetFilters([...filters, new Filter()]);
   };
 
   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: "" }]);
+    localSetFilters([new Filter()]);
   } else {
     // Otherwise, remove the filter normally
     localSetFilters(
@@ -119,9 +123,9 @@ const FilterForm = (props: FilterFormProps ) => {
   }};
 
   const handleFilterChange = (index, key, value) => {
-  const newFilters = filters.map((filter, i) => {
+    const newFilters = filters.map((filter, i) => {
     if (i === index) {
-      return { ...filter, [key]: value };
+      return Object.assign(new Filter(), { ...filter, [key]: value });
     }
     return filter;
   });
@@ -159,22 +163,51 @@ const handleSubmit = (event) => {
     }
   };
 
+  const handleMenuClose = () => {
+    setCommonFilterMenuOpen(false)
+  }
+
+  const handleMenuClick = (filterLabel: string) => {
+    handleMenuClose()
+    const f = promotedFilters.get(filterLabel)
+    let toAdd = [...filters].filter((f) => f.isEmpty())
+    toAdd = Filter.deduplicate(toAdd.concat(f))
+
+    localSetFilters(toAdd)
+  }
+
   return (
    <Card className={classes.card} elevation={0}>
      <form>
       <CardContent className={classes.centeredContent}>
         <div className={classes.addFilterExternalWrapper}>
+          <Box padding={'5px'}>
           <Button
             variant="contained"
             color="primary"
             onClick={handleAddFilter}
           >
             Add Search Filter
           </Button>
+          <Button
+              ref={buttonRef}
+              style={{marginLeft: '5px'}}
+              variant="contained"
+              color="primary"
+              hidden={!!promotedFilters}
+              onClick={() => setCommonFilterMenuOpen(!commonFilterMenuOpen)}
+              endIcon={<KeyboardArrowDownIcon />}
+          >
+            Common Filters
+          </Button>
+          <Menu open={commonFilterMenuOpen} onClose={handleMenuClose} anchorEl={buttonRef.current}>
+            {Array.from(promotedFilters?.keys()).map((label) => (
+                <MenuItem key={label} onClick={(e) => handleMenuClick(label)}>{label}</MenuItem>
+            ))}
+          </Menu>
+          </Box>
         </div>
 
-        {/* TODO: this should read the FieldModel and interpret allowableValues, perhaps isMultiValued, etc. */}
-        {/* TODO: consider also using something like FieldModel.supportsFilter */}
         <div className={classes.formScroll}>
           {filters.map((filter, index) => (
             <div key={index} className={`${classes.filterRow}`}>
@@ -190,9 +223,9 @@ const handleSubmit = (event) => {
                   <MenuItem value="">
                     <em>None</em>
                   </MenuItem>
-                  {Object.keys(availableOperators).map((field) => (
-                    <MenuItem key={field} value={field}>
-                      {fieldTypeInfo.find(obj => obj.name === field).label ?? field}
+                  {fieldTypeInfo.map((field) => (
+                    <MenuItem key={field.name} value={field.name}>
+                      {field.label ?? field.name}
                     </MenuItem>
                   ))}
                 </Select>
@@ -211,8 +244,8 @@ const handleSubmit = (event) => {
                     <em>None</em>
                   </MenuItem>
 
-                  {availableOperators[filter.field] && availableOperators[filter.field].type ? (
-                    availableOperators[filter.field].type.map((operator) => (
+                  {getOperatorsForField(fieldTypeInfo.find(obj => obj.name === filter.field)) ? (
+                      getOperatorsForField(fieldTypeInfo.find(obj => obj.name === filter.field)).map((operator) => (
                       <MenuItem key={operator} value={operator}>
                         {operator}
                       </MenuItem>
@@ -234,8 +267,10 @@ const handleSubmit = (event) => {
                       handleFilterChange(index, "value", event.target.value)
                     }
                   >
-                    {/* TODO: remove this. Maybe make a free-text field?*/}
-                    <MenuItem value="ONPRC">ONPRC</MenuItem>
+                    {allowedGroupNames?.map((gn) => (
+                      <MenuItem value="{gn}">{gn}</MenuItem>
+                    ))}
+
                   </Select>
                 </FormControl>
               ) : fieldTypeInfo.find(obj => obj.name === filter.field)?.allowableValues?.length > 0 ? (

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

@@ -25,8 +25,7 @@ import {
     createEncodedFilterString,
     fetchFieldTypeInfo,
     fetchLuceneQuery,
-    FieldModel,
-    fieldTypeInfoToOperators,
+    FieldModel, Filter,
     getBrowserUrlNoFilters,
     getGenotypeURL,
     searchStringToInitialFilters,
@@ -216,17 +215,15 @@ const VariantTableWidget = observer(props => {
   const [filterModalOpen, setFilterModalOpen] = useState(false);
   const [filters, setFilters] = useState([]);
   const [fieldTypeInfo, setFieldTypeInfo] = useState<FieldModel[]>([]);
-  const [hiddenColumns, setHiddenColumns] = useState<String[]>([]);
+  const [allowedGroupNames, setAllowedGroupNames] = useState<string[]>([]);
+  const [promotedFilters, setPromotedFilters] = useState<Map<string, Filter[]>>(null);
+  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
 
   const [adapter, setAdapter] = useState<EVAdapterClass | undefined>(undefined)
 
-  const [availableOperators, setAvailableOperators] = useState([]);
-
   // Active widget ID list to force rerender when a JBrowseUIButton is clicked
   const [activeWidgetList, setActiveWidgetList] = useState<string[]>([])
 
-  const [isValidLocString, setIsValidLocString] = useState(true)
-
   // False until initial data load or an error:
   const [dataLoaded, setDataLoaded] = useState(!parsedLocString)
 
@@ -235,24 +232,23 @@ const VariantTableWidget = observer(props => {
   // API call to retrieve the requested features.
   useEffect(() => {
     async function fetch() {
-      const queryParam = new URLSearchParams(window.location.search)
-
       await fetchFieldTypeInfo(sessionId, trackGUID,
-        (res: FieldModel[]) => {
-          res.sort((a, b) => a.orderKey - b.orderKey);
+        (fields: FieldModel[], groups: string[], promotedFilters: Map<string, Filter[]>) => {
+            fields.sort((a, b) => a.orderKey - b.orderKey);
 
-          let columns: GridColDef[] = res.map((x) => {
+          let columns: GridColDef[] = fields.filter((x) => !x.isHidden).map((x) => {
               return {...x.toGridColDef(),
                 renderCell: (params: any) =>  { return <TableCellWithPopover value={params.value} /> }
               }
           })
 
           setColumns(columns)
           setHiddenColumns(columns.filter((x) => x.hide).map((x) => x.field))
-          const operators = fieldTypeInfoToOperators(res)
-          setAvailableOperators(operators)
-          setFieldTypeInfo(res)
-          handleQuery(searchStringToInitialFilters(operators))
+          setFieldTypeInfo(fields)
+          setAllowedGroupNames(groups)
+          setPromotedFilters(promotedFilters)
+
+          handleQuery(searchStringToInitialFilters(fields.map((x) => x.name)))
         },
         (error) => {
           setError(error)
@@ -398,8 +394,9 @@ const VariantTableWidget = observer(props => {
         handleClose={() => setFilterModalOpen(false)}
         filterProps={{
             setFilters: setFilters,
-            availableOperators: availableOperators,
             fieldTypeInfo: fieldTypeInfo,
+            allowedGroupNames: allowedGroupNames,
+            promotedFilters: promotedFilters,
             handleQuery: (filters) => handleQuery(filters)
         }}
   />