Merge pull request #294 from BimberLab/24.7_fb_variant_table_align

Fix issue with VariantTableWidget and x-data-grid filter panel alignment

Author: bbimber

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

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import {
     DataGrid,
     GridColDef,
-    GridColumnVisibilityModel,
+    GridColumnVisibilityModel, GridFilterPanel,
     GridPaginationModel,
     GridRenderCellParams,
     GridSortDirection,
@@ -420,13 +420,26 @@ const VariantTableWidget = observer(props => {
         }
     }
 
+    // NOTE: the filterPanel/sx override is added to fix an issue where the grid column filter value input doesn't align with the field and operator inputs
     const gridElement = (
         <DataGrid
             columns={[...columns, actionsCol]}
             rows={features}
             density="comfortable"
             slots={{
-                toolbar: ToolbarWithProps
+                toolbar: ToolbarWithProps,
+                filterPanel: GridFilterPanel
+            }}
+            slotProps={{
+                filterPanel: {
+                    filterFormProps: {
+                        valueInputProps: {
+                            sx: {
+                                marginTop: 0
+                            }
+                        }
+                    }
+                }
             }}
             columnVisibilityModel={columnVisibilityModel}
             pageSizeOptions={[10,25,50,100]}

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

@@ -8,7 +8,7 @@ import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
 import {
   DataGrid,
   GridColDef,
-  GridColumnVisibilityModel,
+  GridColumnVisibilityModel, GridFilterPanel,
   GridPaginationModel,
   GridRenderCellParams,
   GridToolbar
@@ -352,10 +352,22 @@ const VariantTableWidget = observer(props => {
   }
 
   const gridElement = (
+    // NOTE: the filterPanel/sx override is added to fix an issue where the grid column filter value input doesn't align with the field and operator inputs
     <DataGrid
         columns={[...gridColumns, actionsCol]}
         rows={features.map((rawFeature, id) => rawFeatureToRow(rawFeature, id, gridColumns, trackId))}
-        slots={{ toolbar: GridToolbar }}
+        slots={{ toolbar: GridToolbar, filterPanel: GridFilterPanel }}
+        slotProps={{
+          filterPanel: {
+            filterFormProps: {
+              valueInputProps: {
+                sx: {
+                  marginTop: 0
+                }
+              }
+            }
+          }
+        }}
         pageSizeOptions={[10,25,50,100]}
         paginationModel={ pageSizeModel }
         onPaginationModelChange= {(newModel) => setPageSizeModel(newModel)}