From 5a450ce3d1dac7190809990c525e27675880b6c1 Mon Sep 17 00:00:00 2001
From: bbimber <bbimber@gmail.com>
Date: Mon, 9 Sep 2024 06:29:12 -0700
Subject: [PATCH] Fix issue with VariantTableWidget and x-data-grid filter
 panel alignment

---
 .../components/VariantTableWidget.tsx           | 17 +++++++++++++++--
 .../components/VariantTableWidget.tsx           | 16 ++++++++++++++--
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx b/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx
index ac75ef4de..9a186e493 100644
--- a/jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx
+++ b/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]}
diff --git a/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx b/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx
index e13fb48ce..0a7757eaf 100644
--- a/jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx
+++ b/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)}