Merge pull request #212 from BimberLab/23.3_fb_columnSelectorPersist

Persist user-hidden columns across rerenders

Author: hextraza

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>

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

@@ -10,7 +10,7 @@ import {
     GridToolbarExport
 } from '@mui/x-data-grid';
 import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
-import FilterListIcon from '@material-ui/icons/FilterList';
+import SearchIcon from '@material-ui/icons/Search';
 import React, { useEffect, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { AppBar, Box, Button, Dialog, Paper, Popover, Toolbar, Tooltip, Typography } from '@material-ui/core';
@@ -174,12 +174,12 @@ const VariantTableWidget = observer(props => {
       <GridToolbarContainer>
         <GridToolbarColumnsButton />
         <Button
-          startIcon={<FilterListIcon />}
+          startIcon={<SearchIcon />}
           size="small"
           color="primary"
           onClick={() => setFilterModalOpen(true)}
         >
-          Filter
+          Search
         </Button>
         <GridToolbarDensitySelector />
         <GridToolbarExport />
@@ -216,6 +216,7 @@ const VariantTableWidget = observer(props => {
   const [filterModalOpen, setFilterModalOpen] = useState(false);
   const [filters, setFilters] = useState([]);
   const [fieldTypeInfo, setFieldTypeInfo] = useState<FieldModel[]>([]);
+  const [hiddenColumns, setHiddenColumns] = useState([]);
 
   const [adapter, setAdapter] = useState<EVAdapterClass | undefined>(undefined)
 
@@ -358,15 +359,27 @@ const VariantTableWidget = observer(props => {
     }
   }
 
+  const columnsWithLocalHideState = columns.map(col => ({
+    ...col,
+    hide: hiddenColumns.includes(col.field),
+  }));
+
   const gridElement = (
     <DataGrid
-        columns={[...columns, actionsCol]}
+        columns={[...columnsWithLocalHideState, actionsCol]}
         rows={features}
         components={{ Toolbar: ToolbarWithProps }}
         rowsPerPageOptions={[10,25,50,100]}
         pageSize={pageSize}
         density="comfortable"
         onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
+        onColumnVisibilityChange={(params) => {
+          if (params.isVisible) {
+            setHiddenColumns(prev => prev.filter(field => field !== params.field));
+          } else {
+            setHiddenColumns(prev => [...prev, params.field]);
+          }
+        }}
       />
   )