feat(ui): Improve overlapping charts

[maggie-li-yd]

Update UI/UX related to overlapping charts in cohort builder

1. Update x axis button logic when user switches from stack bar chart to any of the overlapping chart:

X1	X2	Action
empty	empty	disable X2
empty	categorical	relocate X2 → X1, clear+disable X2
empty	continuous	relocate X2 → X1, clear+disable X2
categorical	empty	disable X2 (X1 stays)
categorical	categorical	clear+disable X2, keep X1 ← fixed
categorical	continuous	relocate X2 → X1, clear+disable X2
continuous	empty	disable X2 (X1 stays)
continuous	categorical	clear+disable X2 (X1 stays)
continuous	continuous	clear+disable X2 (X1 stays)

3. Display warning when the user switches from a stacked bar chart to any other chart type
4. Update icon for overlapping/stacking attribute based on active chart type
5. Update icon for chart in chart toolbar.
6. Update affected e2e tests

Demo

2487-demo.mov

Merge Checklist

Please cross check this list if additions / modifications needs to be done on top of your core changes and tick them off. Reviewer can as well glance through and help the developer if something is missed out.

• Automated Tests (Jasmine integration tests, Unit tests, and/or Performance tests)
• Updated Manual tests / Demo Config
• Documentation (Application guide, Admin guide, Markdown, Readme and/or Wiki)
• Verified that local development environment is working with latest changes (integrated with latest develop branch)
• following best practices in code review doc

[Copilot]

Pull request overview

Improves overlapping chart transitions, presentation, and warnings in the Vue MRI charting interface.

Changes:

• Adds chart-mode transition planning, confirmation, and X-axis reconciliation.
• Updates chart icons, coloring behavior, tooltips, and localization.
• Adds component tests and adjusts Vitest/Playwright configuration.

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tests/e2e/playwright.config.ts	Removes CI failure cap.
plugins/ui/apps/vue-mri-ui-lib/vite.config.ts	Aligns Vue Test Utils with the app’s Vue instance.
plugins/ui/apps/vue-mri-ui-lib/src/utils/Constants.ts	Updates chart tooltip key.
plugins/ui/apps/vue-mri-ui-lib/src/utils/chartTypeChange.ts	Plans chart-mode transitions and warnings.
plugins/ui/apps/vue-mri-ui-lib/src/utils/__tests__/chartTypeChange.test.ts	Tests transition planning.
plugins/ui/apps/vue-mri-ui-lib/src/styles/chartButton.scss	Styles SVG chart icons.
plugins/ui/apps/vue-mri-ui-lib/src/styles/axisMenuButton.scss	Sizes SVG axis icons.
plugins/ui/apps/vue-mri-ui-lib/src/store/modules/chart.ts	Reconciles X axes when leaving stacked mode.
plugins/ui/apps/vue-mri-ui-lib/src/lib/ui/__tests__/app-segmented-button.test.ts	Corrects selection assertions.
plugins/ui/apps/vue-mri-ui-lib/src/lib/i18n.ts	Adds warning text and tooltip translations.
plugins/ui/apps/vue-mri-ui-lib/src/lib/ChartConfigService.ts	Updates Vue chart tooltip key.
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarChart.vue	Removes stale per-bar coloring.
plugins/ui/apps/vue-mri-ui-lib/src/components/icons/OverlappingHistogramIcon.vue	Adds overlapping histogram icon.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartTypeChangeWarningDialog.vue	Adds chart-change confirmation dialog.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartTypeAxisButton.vue	Integrates transition planning and confirmation.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartToolbar.vue	Uses an SVG for the chart button.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartController.vue	Selects icons by effective chart mode.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartButton.vue	Supports component-based icons.
plugins/ui/apps/vue-mri-ui-lib/src/components/AxisMenuButton.vue	Supports component-based axis icons.
plugins/ui/apps/vue-mri-ui-lib/src/components/__tests__/ChartTypeAxisButton.test.ts	Tests warning workflow.
plugins/ui/apps/vue-mri-ui-lib/src/components/__tests__/ChartToolbar.test.ts	Tests toolbar icon selection.
plugins/ui/apps/vue-mri-ui-lib/src/components/__tests__/ChartController.test.ts	Tests mode-specific axis icons.
plugins/ui/apps/vue-mri-ui-lib/src/components/__tests__/AxisMenuButton.test.ts	Tests SVG axis rendering.
plugins/ui/apps/mri-pa-ui/src_ui/mri/lib/charts/ChartConfigService.js	Updates legacy chart tooltip key.
plugins/ui/apps/mri-pa-ui/src_ui/mri/lib/BookmarkUtils.js	Updates bookmarked chart name.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text.properties	Updates default tooltip translation.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_zh.properties	Updates Chinese tooltip translation.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_pt.properties	Updates Portuguese tooltip translation.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_fr.properties	Updates French tooltip translation.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_es.properties	Updates Spanish tooltip translation.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_en_US_saptrc.properties	Updates translation trace text.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_en_US_sappsd.properties	Updates pseudo-localized tooltip.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_en_GB.properties	Updates British English tooltip.
plugins/ui/apps/mri-pa-ui/src_ui/mri/i18n/text_de.properties	Updates German tooltip translation.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.