Fix box-plot selection and explorer card layout

[lewisjared]

Fixes box-plot hover selection by choosing the nearest visible marker in screen coordinates and highlighting only its record and category. Corrects whiskers to end at observations within the 1.5×IQR fences.

Renames the salinity Taylor diagram and lets explorer cards share a collection-wide grid, removing gaps between card groups.

Validation: 289 frontend tests with coverage and 18 backend collection tests, TypeScript, Biome, and production build passed. Browser interaction has not been manually verified.

Summary by CodeRabbit

• Bug Fixes

  • Improved box-and-whisker chart interactions, including nearest-point selection, record highlighting, touch support, and handling of duplicate, clipped, or non-finite values.
  • Corrected whisker endpoints to reflect valid observations within calculated bounds.
  • Updated the sea surface salinity Taylor diagram title and description for clearer identification.

• Style

  • Explorer cards now use a responsive two-column layout on larger screens, with empty grid spaces removed.

[netlify]

✅ Deploy Preview for climate-ref ready!

Name	Link
🔨 Latest commit	97231b2
🔍 Latest deploy log	https://app.netlify.com/projects/climate-ref/deploys/6a9e6c51e16cf300083aabfb
😎 Deploy Preview	https://deploy-preview-109--climate-ref.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 3502ae50-1322-4062-bc01-b564ea880695

📥 Commits

Reviewing files that changed from the base of the PR and between ea6e50a and 97231b2.

📒 Files selected for processing (9)

• backend/static/collections/1-4_sst-sss-bias.yaml
• changelog/109.fix.md
• frontend/src/components/diagnostics/ensembleChart.interaction.test.tsx
• frontend/src/components/diagnostics/ensembleChart.tsx
• frontend/src/components/execution/values/boxWhiskerShape.test.tsx
• frontend/src/components/execution/values/boxWhiskerShape.tsx
• frontend/src/components/execution/values/types.ts
• frontend/src/components/explorer/explorerCardGroup.tsx
• frontend/src/components/explorer/explorerThemeLayout.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The change updates ensemble chart point selection and box-plot whiskers. It also changes explorer card layout, corrects sea surface salinity metadata, and adds interaction and rendering tests.

Changes

Ensemble chart selection

Layer / File(s)	Summary
Box-plot point and whisker rendering frontend/src/components/execution/values/types.ts, frontend/src/components/execution/values/boxWhiskerShape.tsx, frontend/src/components/execution/values/boxWhiskerShape.test.tsx	BoxPlot now stores raw points. BoxWhiskerShape uses 1.5×IQR fences and structured point identity for highlighting.
Filtered point selection and interaction frontend/src/components/diagnostics/ensembleChart.tsx, frontend/src/components/diagnostics/ensembleChart.interaction.test.tsx	EnsembleChart selects the nearest rendered marker by DOM distance. It excludes clipped and non-finite values and updates tooltip and highlight state from the selected point. Tests cover duplicate values, throttling, touch input, and marker exclusion.

Explorer card layout

Layer / File(s)	Summary
Responsive explorer card grid frontend/src/components/explorer/explorerCardGroup.tsx, frontend/src/components/explorer/explorerThemeLayout.tsx	The responsive grid now wraps card groups at the theme level. The nested group grid and per-card wrapper are removed.

Sea surface salinity metadata

Layer / File(s)	Summary
Sea surface salinity metadata and release record backend/static/collections/1-4_sst-sss-bias.yaml, changelog/109.fix.md	The Taylor diagram label and description now specify sea surface salinity. The changelog records the chart, metadata, and explorer layout corrections.

Sequence Diagram(s)

sequenceDiagram
  participant Pointer
  participant EnsembleChart
  participant BoxPointMarkers
  Pointer->>EnsembleChart: send mouseMove or touchMove
  EnsembleChart->>BoxPointMarkers: inspect data-box-point bounds
  BoxPointMarkers-->>EnsembleChart: return nearest marker identity
  EnsembleChart->>EnsembleChart: resolve category, group, and point
  EnsembleChart-->>Pointer: render highlighted point and tooltip

Loading

Merge Risk: ⚪ Minimal · up to 97231

The chart interaction, whisker rendering, explorer layout, and salinity metadata changes have no identified merge-blocking risk.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 7 files. (2 skipped: 2…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarises the two main changes: box-plot selection and explorer card layout. It is concise and specific enough for the change set.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 7 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/box-plot-selection

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}