Staging sync: biochem/data-control hardening and review fixes by VibhavSetlur · Pull Request #176 · ModelSEED/ModelSEED-UI

VibhavSetlur · 2026-05-04T15:58:09Z

Summary

preserve legacy Solr as the list/search backend for biochem reactions and compounds pages
keep explicit modelseed-api helper paths for intentional REST usage, with a capped fetch window guardrail
harden DataControlHeader search/highlight/filter behavior and expand E2E coverage across biochem and shared table pages
apply Copilot follow-up fixes (scoped highlight cleanup and stronger test assertions)
sync fork staging with latest upstream staging before merge

Validation

npm run lint -- components/layout/DataControlHeader.tsx lib/api/biochem.ts tests/e2e/datacontrol-header.spec.ts
npx playwright test tests/e2e/datacontrol-header.spec.ts
npx playwright test tests/e2e/biochem/reactions.spec.ts tests/e2e/biochem/compounds.spec.ts tests/e2e/biochem/search-find.spec.ts
npm run build

Made with Cursor

Replace <img> tags with <Image /> from next/image in PlantSEED workshop pages. This aligns with Next.js image optimization best practices and resolves @next/next/no-img-element warnings. The images are external URLs served from ANL servers; next.config.ts already has unoptimized:true.

Remove <link rel="stylesheet"> tag from layout.tsx head and replace with proper import of icomoon/style.css. This resolves the @next/next/no-css-tags warning. The font URLs in style.css are updated to absolute paths (/icomoon/fonts/...) so they resolve correctly when the CSS is imported from styles/icomoon/.

…uleRenderer - Add atomColors to useEffect dependency array to fix react-hooks/exhaustive-deps - Replace <img> with <Image /> from next/image to resolve @next/next/no-img-element - Import next/image in MoleculeRenderer.tsx

Remove unused genomeData from useQuery destructuring in genomes/[ref]/page.tsx. The query is disabled (enabled: false) and the data was never used, triggering @typescript-eslint/no-unused-vars warning.

…ting in website

- Add client-side text highlighting (like Ctrl+F) instead of DataGrid filtering - Show match counter (e.g., '3 of 25') - Add prev/next arrow buttons to navigate between matches - Use debounced highlighting (300ms) for performance - Keep Filter & Columns button untouched - Fix Solr query building (encode URI, fix field names, fix filter clause joining)

Ensure Solr and modelseed-api search/filter paths both behave predictably, remove temporary biochem debug specs, and keep a focused Playwright suite that validates find-in-page and filter workflows. Co-authored-by: Cursor <cursoragent@cursor.com>

Render gene-associated reactions as readable chips with direct links to reaction detail pages, while preserving search/filter compatibility in the genes table. Co-authored-by: Cursor <cursoragent@cursor.com>

Pin reactions and compounds list APIs to legacy Solr while keeping explicit modelseed-api helpers for intentional REST usage. Add comprehensive DataControlHeader operator and cross-page e2e coverage to validate search, highlighting, filters, and column controls. Co-authored-by: Cursor <cursoragent@cursor.com>

Scope CSS Custom Highlight cleanup to the toolbar-owned key instead of clearing the global registry, cap REST-side biochem fetch windows, and replace no-op E2E assertions with meaningful operator-wiring checks. Co-authored-by: Cursor <cursoragent@cursor.com>

Copilot

Pull request overview

This PR hardens biochem data-control behaviors while explicitly pinning the biochem reactions/compounds list pages to legacy Solr, and adds targeted REST helpers plus expanded unit/E2E coverage to validate search/filter/sort/pagination behavior across key table pages.

Changes:

Keep reactions/compounds list/search backed by legacy Solr, while adding explicit modelseed-api REST helper paths with capped fetch + local filter/sort/pagination transforms.
Rework DataControlHeader search and filter UX (debounced quick filter, scoped operator support including “is any of”, and updated filter/columns controls), plus update related E2E coverage.
Move IcoMoon CSS into the app bundle (instead of a <link>), and migrate several images to next/image.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
`lib/api/biochem.ts`	Pins list pages to legacy Solr; adds explicit REST query helpers with local transforms and a fetch-size guardrail; improves Solr query encoding.
`components/layout/DataControlHeader.tsx`	Refactors “Find in …” quick-search and simplifies column filter editing while adding “is any of” support.
`tests/unit/api/biochem-rest-filtering.test.ts`	Adds unit tests covering REST-mode local filtering, sorting, and pagination behavior.
`tests/e2e/datacontrol-header.spec.ts`	Adds cross-page E2E coverage for search, filter operators, highlight behavior, and filter dialog UX.
`tests/e2e/biochem/search-find.spec.ts`	Adds E2E coverage for find-in-page quick filter, highlights, clearing, escape behavior, and no-match handling.
`tests/e2e/biochem/reactions.spec.ts`	Updates reactions E2E selectors to the new “Find in …” search UI and filter button label.
`tests/e2e/biochem/compounds.spec.ts`	Updates compounds E2E selectors to the new “Find in …” search UI and strengthens export modal targeting.
`components/ui/MoleculeRenderer.tsx`	Switches PNG fallback rendering to `next/image` and fixes effect dependencies.
`app/layout.tsx`	Bundles IcoMoon stylesheet via import instead of a runtime `<link>` tag.
`styles/icomoon/style.css`	Adds bundled IcoMoon CSS with absolute font URLs for app-wide icon usage.
`app/events/plantseed2015/page.tsx`	Migrates event page image rendering to `next/image`.
`app/events/plantseed2016/page.tsx`	Migrates event page image rendering to `next/image`.
`app/events/plantseed2017/page.tsx`	Migrates event page image rendering to `next/image`.
`app/events/plantseed2018/page.tsx`	Migrates event page image rendering to `next/image` and relies on bundled IcoMoon icons.
`app/model/[...path]/page.tsx`	Improves gene→reaction display (chip links) and sanitizes genome ref display.
`eslint.config.mjs`	Ignores additional non-product/generated/archived directories.
`app/(reference-data)/genomes/[ref]/page.tsx`	Removes unused query result binding in the placeholder genome detail page.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

                <a href="http://press3.mcs.anl.gov/plantseed2015/files/2015/09/2015-Wkshp_participants.jpeg" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                        src="http://press3.mcs.anl.gov/plantseed2015/files/2015/09/2015-Wkshp_participants.jpeg"
                        alt="2015 Workshop Group Photo"
+                        width={800}
+                        height={600}
                        style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}


                <a href="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2016/PlantSEED_Workshop_2016.jpg" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                        src="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2016/PlantSEED_Workshop_2016.jpg"
                        alt="2016 Workshop Group Photo"
+                        width={800}
+                        height={600}
                        style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}


                <a href="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2017/PlantSEED_Workshop_2017.png" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                        src="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2017/PlantSEED_Workshop_2017.png"
                        alt="2017 Workshop Group Photo"
+                        width={800}
+                        height={600}
                        style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}


            <Box textAlign="center" mb={4}>
                <a href="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2018/PlantSEED_Workshop_2018_Participants.png" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                        src="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2018/PlantSEED_Workshop_2018_Participants.png"
                        alt="2018 Workshop Group Photo"
+                        width={800}
+                        height={600}
                        style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}
                    />


+.icon-benzene:before {
+	content: "\e607";
+}
+.icon-archive:before {
+	content: "\e60f";
+}
+.icon-folder-open-o:before {
+	content: "\e605";
+}
+.icon-tools:before {
+	content: "\e601";
+}
+.icon-lab:before {
+	content: "\e608";
+}
+.icon-tools-2:before {
+	content: "\e602";
+}
+.icon-lab2:before {
+	content: "\e609";
+}
+.icon-trash:before {
+	content: "\e60e";
+}
+.icon-stack:before {
+	content: "\e610";
+}
+.icon-archive2:before {
+	content: "\e611";
+}
+.icon-archive:before {
+	content: "\e60f";
+}
+.icon-folder-open-o:before {
+	content: "\e605";
+}
+.icon-tools:before {
+	content: "\e601";
+}
+.icon-lab:before {
+	content: "\e608";
+}
+.icon-tools-2:before {
+	content: "\e602";
+}
+.icon-lab2:before {
+	content: "\e609";
+}
+.icon-trash:before {
+	content: "\e60e";
+}
+.icon-stack:before {
+	content: "\e610";
+}


+function matchesFilterModel(doc: Record<string, unknown>, items: GridFilterItem[]): boolean {
+    const activeItems = items.filter((item) => item.field && item.operator);
+    if (activeItems.length === 0) return true;


+        const updateHighlights = () => {
+            if (!('Highlight' in window)) return;
+            const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+            const ranges: Range[] = [];
+            const lowerTerm = term.toLowerCase();
+
+            let node = treeWalker.nextNode();
+            while (node) {


@@ -1727,16 +1773,7 @@ export default function ModelDetailPage({ params }: { params: Promise<{ path: st
        },
        {
            label: 'Genome Ref',
-            value: genomeRef !== '-' ? (
-                <Link
-                    href={`https://www.bv-brc.org/view/Genome/${genomeRef}`}
-                    target="_blank"
-                    rel="noreferrer"
-                    style={{ color: '#00acc1', textDecoration: 'none' }}
-                >
-                    {genomeRef}
-                </Link>
-            ) : '-',
+            value: genomeRef,
        },


VibhavSetlur and others added 11 commits May 1, 2026 11:22

fix(lint): remove unused genomeData variable in genome detail page

d54d88a

Remove unused genomeData from useQuery destructuring in genomes/[ref]/page.tsx. The query is disabled (enabled: false) and the data was never used, triggering @typescript-eslint/no-unused-vars warning.

Adding deployment script and updating environment variables for repor…

0857b51

…ting in website

feat(model): format gene reactions with linked chips

9f51610

Render gene-associated reactions as readable chips with direct links to reaction detail pages, while preserving search/filter compatibility in the genes table. Co-authored-by: Cursor <cursoragent@cursor.com>

Merge remote-tracking branch 'upstream/staging' into staging

1020067

Copilot AI review requested due to automatic review settings May 4, 2026 15:58

Copilot started reviewing on behalf of VibhavSetlur May 4, 2026 15:59 View session

VibhavSetlur merged commit 87c199a into ModelSEED:staging May 4, 2026
6 checks passed

Copilot AI reviewed May 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Staging sync: biochem/data-control hardening and review fixes#176

Staging sync: biochem/data-control hardening and review fixes#176
VibhavSetlur merged 11 commits intoModelSEED:stagingfrom
VibhavSetlur:staging

VibhavSetlur commented May 4, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

VibhavSetlur commented May 4, 2026

Summary

Validation

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants