ModelSEED · samseaver · May 28, 2026 · May 28, 2026 · May 28, 2026 · May 28, 2026
diff --git a/app/(reference-data)/biochem/compounds/page.tsx b/app/(reference-data)/biochem/compounds/page.tsx
@@ -11,7 +11,7 @@ import Link from 'next/link';
 import { getCompounds, type Compound, type SolrQueryOpts, EXTERNAL_DBS } from '@/lib/api/biochem';
 import { formatFormula } from '@/components/utils/formatFormula';
 import { GridHighlightText } from '@/components/GridHighlightText';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import ExportModal from '@/components/ui/ExportModal';
 import Chip from '@mui/material/Chip';
 
@@ -111,11 +111,11 @@ const columns: GridColDef<Compound>[] = [
     {
         field: 'formula',
         headerName: 'Formula',
-        width: 140,
+        width: 160,
         renderCell: (params) => formatFormula(params.value)
     },
     { field: 'mass', headerName: 'Mass', width: 100, type: 'number' },
-    { field: 'charge', headerName: 'Charge', width: 80, type: 'number' },
+    { field: 'charge', headerName: 'Charge', width: 120, type: 'number' },
     {
         field: 'synonyms',
         headerName: 'Synonyms',
@@ -252,7 +252,7 @@ export default function CompoundsPage() {
 
             <DataGrid<Compound>
                 rows={data?.docs ?? []}
-                columns={columns}
+                columns={withQuickSearchHeaders(columns)}
                 rowCount={data?.numFound ?? 0}
                 loading={isFetching}
                 pageSizeOptions={[10, 25, 50, 100]}
@@ -271,7 +271,6 @@ export default function CompoundsPage() {
                 getRowHeight={() => 'auto'}
                 disableRowSelectionOnClick
                 hideFooter
-                disableColumnMenu
                 sx={{
                     border: '1px solid #e0e0e0',
                     '& .MuiDataGrid-cell': {

diff --git a/app/(reference-data)/biochem/reactions/page.tsx b/app/(reference-data)/biochem/reactions/page.tsx
@@ -20,7 +20,7 @@ import IconButton from '@mui/material/IconButton';
 /* import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline'; */
 /* import ReactionCommentModal from '@/components/ui/ReactionCommentModal'; */
 import { GridHighlightText } from '@/components/GridHighlightText';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import ExportModal from '@/components/ui/ExportModal';
 import TruncatedWithTooltip from '@/components/ui/TruncatedWithTooltip';
 
@@ -294,20 +294,25 @@ export default function ReactionsPage() {
         {
             field: 'is_transport',
             headerName: 'Transport',
-            width: 90,
+            width: 130,
+            // Underlying value is a JS boolean; declaring the column type lets
+            // the per-column quick filter offer is/is-not (with a Yes/No
+            // dropdown) instead of string `contains`, which never matches
+            // boolean docs in Solr.
+            type: 'boolean',
             renderCell: (params) => <GridHighlightText text={params.row.is_transport ? 'Yes' : 'No'} />,
         },
         { field: 'deltag', headerName: 'ΔG', width: 80, type: 'number' },
         {
             field: 'status',
             headerName: 'Status',
-            width: 110,
+            width: 130,
             renderCell: (params) => <GridHighlightText text={params.value as string} />
         },
         {
             field: 'ec_numbers',
             headerName: 'EC Numbers',
-            width: 160,
+            width: 180,
             sortable: false,
             renderCell: (params) => {
                 const ecNumbers = params.row.ec_numbers ?? [];
@@ -411,7 +416,7 @@ export default function ReactionsPage() {
 
             <DataGrid<Reaction>
                 rows={data?.docs ?? []}
-                columns={columns}
+                columns={withQuickSearchHeaders(columns)}
                 rowCount={data?.numFound ?? 0}
                 loading={isFetching}
                 pageSizeOptions={[10, 25, 50, 100]}
@@ -430,7 +435,6 @@ export default function ReactionsPage() {
                 getRowHeight={() => 'auto'}
                 disableRowSelectionOnClick
                 hideFooter
-                disableColumnMenu
                 sx={{
                     border: '1px solid #e0e0e0',
                     '& .MuiDataGrid-cell': {

diff --git a/app/(reference-data)/genomes/Annotations/page.tsx b/app/(reference-data)/genomes/Annotations/page.tsx
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import Link from 'next/link';
 import { parseWorkspaceGetObject, workspaceGet } from '@/lib/api/workspace';
 import { USE_NEW_PROXY } from '@/lib/api/config';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
 
 interface SubsystemItem {
@@ -201,7 +201,7 @@ export default function SubsystemsPage() {
             </Typography>
             <DataGrid<SubsystemItem>
                 rows={filteredRows}
-                columns={columns}
+                columns={withQuickSearchHeaders(columns)}
                 loading={isLoading}
                 pageSizeOptions={[10, 25, 50, 100]}
                 paginationModel={paginationModel}
@@ -219,7 +219,6 @@ export default function SubsystemsPage() {
                     },
                 }}
                 hideFooter
-                disableColumnMenu
                 getRowId={(row) => row.id}
                 disableRowSelectionOnClick
                 getRowHeight={() => 'auto'}

diff --git a/app/(reference-data)/genomes/page.tsx b/app/(reference-data)/genomes/page.tsx
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import Alert from '@mui/material/Alert';
 import { workspaceLs } from '@/lib/api/workspace';
 import { USE_NEW_PROXY } from '@/lib/api/config';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
 
 interface PlantModelItem {
@@ -55,10 +55,10 @@ const columns: GridColDef<PlantModelItem>[] = [
         )
     },
     { field: 'source', headerName: 'Domain', width: 140 },
-    { field: 'numReactions', headerName: 'Reactions', width: 100, type: 'number' },
-    { field: 'numGenes', headerName: 'Genes', width: 80, type: 'number' },
-    { field: 'fbaCount', headerName: 'FBA', width: 80, type: 'number' },
-    { field: 'gapfills', headerName: 'Gapfills', width: 80, type: 'number' },
+    { field: 'numReactions', headerName: 'Reactions', width: 130, type: 'number' },
+    { field: 'numGenes', headerName: 'Genes', width: 110, type: 'number' },
+    { field: 'fbaCount', headerName: 'FBA', width: 100, type: 'number' },
+    { field: 'gapfills', headerName: 'Gapfills', width: 120, type: 'number' },
     {
         field: 'modDate',
         headerName: 'Modification Date',
@@ -122,7 +122,7 @@ export default function PlantsPage() {
             </Alert>
             <DataGrid<PlantModelItem>
                 rows={filteredRows}
-                columns={columns}
+                columns={withQuickSearchHeaders(columns)}
                 loading={isLoading}
                 pageSizeOptions={[10, 25, 50, 100]}
                 paginationModel={paginationModel}
@@ -140,7 +140,6 @@ export default function PlantsPage() {
                     },
                 }}
                 hideFooter
-                disableColumnMenu
                 getRowId={(row) => row.id}
                 disableRowSelectionOnClick
                 autoHeight

diff --git a/app/(reference-data)/list-media/page.tsx b/app/(reference-data)/list-media/page.tsx
@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import { workspaceLs } from '@/lib/api/workspace';
 import { listPublicMediaFromApi } from '@/lib/api/modelseed';
 import { USE_MODELSEED_API, USE_NEW_PROXY } from '@/lib/api/config';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
 
 interface MediaItem {
@@ -112,7 +112,7 @@ export default function MediaPage() {
             </Typography>
             <DataGrid<MediaItem>
                 rows={filteredRows}
-                columns={columns}
+                columns={withQuickSearchHeaders(columns)}
                 loading={isLoading}
                 pageSizeOptions={[10, 25, 50, 100]}
                 paginationModel={paginationModel}
@@ -130,7 +130,6 @@ export default function MediaPage() {
                     },
                 }}
                 hideFooter
-                disableColumnMenu
                 getRowId={(row) => row.id}
                 disableRowSelectionOnClick
                 onRowClick={(params) => goToMediaPath(params.row.path)}

diff --git a/app/(user-data)/my-jobs/page.tsx b/app/(user-data)/my-jobs/page.tsx
@@ -24,7 +24,7 @@ import { getJobsFromApi } from '@/lib/api/modelseed';
 import { listTrackedJobs, TrackedJob } from '@/lib/api/jobTracker';
 import { USE_MODELSEED_API } from '@/lib/api/config';
 import AuthGuard from '@/components/auth/AuthGuard';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import ExportModal from '@/components/ui/ExportModal';
 import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
 
@@ -409,7 +409,7 @@ function MyJobsContent() {
 
             <DataGrid<JobRow>
                 rows={filteredRows}
-                columns={columns}
+                columns={withQuickSearchHeaders(columns)}
                 pageSizeOptions={[10, 25, 50, 100]}
                 paginationModel={pagination}
                 onPaginationModelChange={setPagination}

diff --git a/app/(user-data)/my-models/page.tsx b/app/(user-data)/my-models/page.tsx
@@ -38,7 +38,7 @@ import { useAuth } from '@/components/auth/AuthProvider';
 import DownloadModelMenu from '@/components/ui/DownloadModelMenu';
 import DeleteModelModal from '@/components/ui/DeleteModelModal';
 import CopyModelModal from '@/components/ui/CopyModelModal';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
 import {
     isActiveJobStatus,
@@ -477,10 +477,10 @@ export default function MyModelsPage() {
                 </Link>
             )
         },
-        { field: 'numReactions', headerName: 'Reactions', width: 100, type: 'number' },
-        { field: 'numGenes', headerName: 'Genes', width: 100, type: 'number' },
+        { field: 'numReactions', headerName: 'Reactions', width: 130, type: 'number' },
+        { field: 'numGenes', headerName: 'Genes', width: 110, type: 'number' },
         { field: 'fbaCount', headerName: 'FBA', width: 100, type: 'number' },
-        { field: 'gapfills', headerName: 'Gapfilling', width: 100, type: 'number' },
+        { field: 'gapfills', headerName: 'Gapfilling', width: 130, type: 'number' },
         {
             field: 'status',
             headerName: 'Status',
@@ -726,7 +726,7 @@ export default function MyModelsPage() {
                 ) : (
                     <DataGrid<MyModelItem>
                         rows={filteredRows}
-                        columns={columns}
+                        columns={withQuickSearchHeaders(columns)}
                         loading={isLoading}
                         pageSizeOptions={[10, 25, 50, 100]}
                         paginationModel={paginationModel}
@@ -750,7 +750,6 @@ export default function MyModelsPage() {
                             },
                         }}
                         hideFooter
-                        disableColumnMenu
                         checkboxSelection
                         disableMultipleRowSelection={false}
                         rowSelectionModel={{

diff --git a/app/(user-data)/myMedia/page.tsx b/app/(user-data)/myMedia/page.tsx
@@ -18,7 +18,7 @@ import { USE_MODELSEED_API } from '@/lib/api/config';
 import { exportMediaFromApi, listMyMediaFromApi } from '@/lib/api/modelseed';
 import { workspaceDelete } from '@/lib/api/workspace';
 import { useAuth } from '@/components/auth/AuthProvider';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
 import ExportModal from '@/components/ui/ExportModal';
 import { parseWorkspaceDate } from '@/lib/utils/date';
 import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
@@ -268,7 +268,7 @@ export default function MyMediaPage() {
                 ) : (
                     <DataGrid<MyMediaItem>
                         rows={filteredRows}
-                        columns={columns}
+                        columns={withQuickSearchHeaders(columns)}
                         loading={isLoading}
                         pageSizeOptions={[10, 25, 50, 100]}
                         paginationModel={paginationModel}
@@ -287,7 +287,6 @@ export default function MyMediaPage() {
                             },
                         }}
                         hideFooter
-                        disableColumnMenu
                         getRowId={(row) => row.id}
                         disableRowSelectionOnClick
                         onRowClick={(params) => goToMediaPath(params.row.path)}

diff --git a/app/fba/[...path]/page.tsx b/app/fba/[...path]/page.tsx
@@ -31,7 +31,8 @@ import { useAuth } from '@/components/auth/AuthProvider';
 import { workspaceGet, workspaceLs, workspaceDownloadUrl, parseWorkspaceGetObject } from '@/lib/api/workspace';
 import { USE_MODELSEED_API } from '@/lib/api/config';
 import ChemicalEquation from '@/components/ui/ChemicalEquation';
-import DataControlHeader from '@/components/layout/DataControlHeader';
+import DataControlHeader, { withQuickSearchHeaders } from '@/components/layout/DataControlHeader';
+import { useToolbarGridFiltering } from '@/lib/hooks/useToolbarGridFiltering';
 
 /* ---------- types ---------- */
 
@@ -600,6 +601,19 @@ export default function FbaPage({ params }: { params: Promise<{ path: string[] }
         [fbaData],
     );
 
+    const rxnFiltering = useToolbarGridFiltering<FbaReactionFlux>({
+        rows: rxnFluxes,
+        onFilterApplied: () => setRxnPagination((p) => ({ ...p, page: 0 })),
+    });
+    const exchFiltering = useToolbarGridFiltering<FbaExchangeFlux>({
+        rows: exchFluxes,
+        onFilterApplied: () => setExchPagination((p) => ({ ...p, page: 0 })),
+    });
+    const mapFiltering = useToolbarGridFiltering<FbaPathwayMap>({
+        rows: pathwayMaps,
+        onFilterApplied: () => setMapPagination((p) => ({ ...p, page: 0 })),
+    });
+
     const fluxByReaction = useMemo(() => buildFluxByReaction(rxnFluxes), [rxnFluxes]);
     const maxAbsFlux = useMemo(() => {
         let maxAbs = 1;
@@ -828,16 +842,24 @@ export default function FbaPage({ params }: { params: Promise<{ path: string[] }
 
                     {tabIndex === 0 && (
                         <DataGrid<FbaReactionFlux>
-                            rows={rxnFluxes}
-                            columns={rxnColumns}
+                            rows={rxnFiltering.filteredRows}
+                            columns={withQuickSearchHeaders(rxnColumns)}
                             pageSizeOptions={[10, 25, 50, 100]}
                             paginationModel={rxnPagination}
                             onPaginationModelChange={setRxnPagination}
                             sortModel={rxnSort}
                             onSortModelChange={setRxnSort}
+                            filterModel={rxnFiltering.filterModel}
+                            filterMode="server"
+                            onFilterModelChange={rxnFiltering.handleFilterModelChange}
                             showToolbar
                             slots={{ toolbar: DataControlHeader }}
-                            slotProps={{ toolbar: { showQuickFilter: true } }}
+                            slotProps={{
+                                toolbar: {
+                                    showQuickFilter: true,
+                                    onApplyFilterModel: rxnFiltering.handleToolbarApplyFilterModel,
+                                },
+                            }}
                             hideFooter
                             disableRowSelectionOnClick
                             getRowId={(row) => row.id}
@@ -847,16 +869,24 @@ export default function FbaPage({ params }: { params: Promise<{ path: string[] }
 
                     {tabIndex === 1 && (
                         <DataGrid<FbaExchangeFlux>
-                            rows={exchFluxes}
-                            columns={exchColumns}
+                            rows={exchFiltering.filteredRows}
+                            columns={withQuickSearchHeaders(exchColumns)}
                             pageSizeOptions={[10, 25, 50, 100]}
                             paginationModel={exchPagination}
                             onPaginationModelChange={setExchPagination}
                             sortModel={exchSort}
                             onSortModelChange={setExchSort}
+                            filterModel={exchFiltering.filterModel}
+                            filterMode="server"
+                            onFilterModelChange={exchFiltering.handleFilterModelChange}
                             showToolbar
                             slots={{ toolbar: DataControlHeader }}
-                            slotProps={{ toolbar: { showQuickFilter: true } }}
+                            slotProps={{
+                                toolbar: {
+                                    showQuickFilter: true,
+                                    onApplyFilterModel: exchFiltering.handleToolbarApplyFilterModel,
+                                },
+                            }}
                             hideFooter
                             disableRowSelectionOnClick
                             getRowId={(row) => row.id}
@@ -889,16 +919,24 @@ export default function FbaPage({ params }: { params: Promise<{ path: string[] }
 
                             {pathwayMaps.length > 0 && (
                                 <DataGrid<FbaPathwayMap>
-                                    rows={pathwayMaps}
-                                    columns={mapColumns}
+                                    rows={mapFiltering.filteredRows}
+                                    columns={withQuickSearchHeaders(mapColumns)}
                                     pageSizeOptions={[10, 25, 50, 100]}
                                     paginationModel={mapPagination}
                                     onPaginationModelChange={setMapPagination}
                                     sortModel={mapSort}
                                     onSortModelChange={setMapSort}
+                                    filterModel={mapFiltering.filterModel}
+                                    filterMode="server"
+                                    onFilterModelChange={mapFiltering.handleFilterModelChange}
                                     showToolbar
                                     slots={{ toolbar: DataControlHeader }}
-                                    slotProps={{ toolbar: { showQuickFilter: true } }}
+                                    slotProps={{
+                                        toolbar: {
+                                            showQuickFilter: true,
+                                            onApplyFilterModel: mapFiltering.handleToolbarApplyFilterModel,
+                                        },
+                                    }}
                                     hideFooter
                                     disableRowSelectionOnClick
                                     getRowId={(row) => row.id}