fix: restore phenogrid iframe pages for IMPC

[kevinschaper]

Summary

• Restores PagePhenogridSearch.vue and PagePhenogridMulticompare.vue from git history (deleted in 349b4d74)
• Uncomments their routes in the router with meta: { bare: true } so they render without header/footer

Context

The phenogrid iframe widget pages were accidentally deleted in an October 2025 "deleted old code" commit. Without these routes, /phenogrid-search and /phenogrid-multi-compare fall through to the /:id dynamic route, rendering the full app layout (header, banner, footer) inside the iframe and failing to load the phenogrid.

This breaks IMPC's embedding of the multicompare phenogrid and the /testbed dev page.

Test plan

• Visit /testbed and verify both phenogrid iframes load without header/footer
• Visit /phenogrid-multi-compare directly and verify bare page renders
• Visit /phenogrid-search directly and verify bare page renders
• Verify IMPC's iframe embedding works

Fixes #1262

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for monarch-app ready!

Name	Link
🔨 Latest commit	0dab141
🔍 Latest deploy log	https://app.netlify.com/projects/monarch-app/deploys/6998bc2b8913c300082d94de
😎 Deploy Preview	https://deploy-preview-1263--monarch-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[claude]

Code Review

This PR correctly restores the accidentally-deleted phenogrid iframe pages and their routes. The fix is minimal and targeted. A few observations:

Summary

The change is straightforward and appropriate — restoring PagePhenogridSearch.vue and PagePhenogridMulticompare.vue from git history and re-enabling their routes with meta: { bare: true }. The approach is sound.

---

Route Ordering

The phenogrid routes are inserted after the /:id dynamic route in the array. In Vue Router 4 this is fine — the router uses a static-vs-dynamic scoring system that always prefers static segments (/phenogrid-search) over dynamic ones (/:id), regardless of array order. No action needed, but placing static/named routes before dynamic catch-alls is generally considered a better practice for readability.

---

Security: Missing event.origin Validation

Both components listen to postMessage events without validating the sender's origin:

PagePhenogridMulticompare.vue:

useEventListener(message, (event: MessageEvent) => {
  if (subjects in event.data && object-sets in event.data) {
    aPhenotypes.value = event.data.subjects;
    bPhenotypes.value = event.data[object-sets];
  }
  if (stylesheet in event.data) stylesheetHref.value = event.data.stylesheet;
});

Any page — not just the intended IMPC parent — can send messages to these iframes. The stylesheet field is particularly notable: it sets an arbitrary `" in the document with no domain restriction, enabling CSS injection from any origin.

Consider adding an allowlist check:

useEventListener(message, (event: MessageEvent) => {
  const allowedOrigins = ["https://www.mousephenotype.org", "https://dev.mousephenotype.org"];
  if (!allowedOrigins.includes(event.origin)) return;
  // ... rest of handler
});

Or at minimum, validate event.origin !== "null" and restrict to expected domains. This pre-existed in the deleted code, so it's not a regression introduced here, but restoring these pages is a good opportunity to address it.

---

Minor: Stylesheet Inconsistency Between Input Sources

The URL query param path decodes the stylesheet value:

if (stylesheet && typeof stylesheet === string)
  stylesheetHref.value = window.decodeURIComponent(stylesheet);

But the postMessage path does not:

if (stylesheet in event.data) stylesheetHref.value = event.data.stylesheet;

This is likely intentional (postMessage data isn't URL-encoded), but documenting the difference would help future maintainers.

---

Typo in Comments

Both files have a repeated word in their watch comments:

/** re-rerun analysis when inputs change */

Should be:

/** rerun analysis when inputs change */

---

Type Safety in postMessage Handler

The object-group value is cast without runtime validation:

// PagePhenogridSearch.vue
bGroup.value = objectGroup as Group;  // URL param path
bGroup.value = event.data["object-group"];  // message path — no cast at all

An invalid group string would silently propagate to the API call. A runtime guard (e.g., checking against the exported groups array) would make this more robust, though failure here is low-impact since it just results in a bad API response.

---

Overall

The core fix is correct and necessary. The issues above are all pre-existing or minor, and none block merging. The security concern around event.origin is worth addressing in a follow-up if IMPC embedding is being actively relied upon.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.51%. Comparing base (61c3052) to head (0dab141).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1263   +/-   ##
=======================================
  Coverage   73.51%   73.51%           
=======================================
  Files          95       95           
  Lines        3417     3417           
=======================================
  Hits         2512     2512           
  Misses        905      905           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.