Add new chart options to PA by maggie-li-yd · Pull Request #2297 · OHDSI/Data2Evidence

maggie-li-yd · 2026-04-23T10:02:39Z

Changes:

Add three new chart types in PA: Overlapping Histogram, Overlapping Bar Chart and Kernel Density Plot (KDP)
Add a new "Chart type" axis-button,
Add supporting config options for each new chart type
Add bookmark persistence for chart type,
Rearrange buttons in the chart controller,
Update e2e tests and snapshots.
Note: the new chart types are all disabled by default for all data models.

Demo:

Screen.Recording.2026-05-14.at.11.23.35.AM.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

This PR adds new stacked bar chart display modes (overlapping/overlay variants and kernel density plot), including a “distribution curve” overlay option, and wires the mode state through Vuex + bookmarks and the PA config system.

Changes:

Introduces bar display mode + overlay state in the chart Vuex module and persists/restores it via bookmarks.
Adds KDE computation + Plotly layout/trace transforms to support distribution curves and kernel density plot rendering.
Updates the chart controller UI/layout and portal config to expose feature flags for the new modes.

Reviewed changes

Copilot reviewed 37 out of 37 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
plugins/ui/apps/vue-mri-ui-lib/src/utils/Constants.ts	Plotly layout tweaks (axis styling).
plugins/ui/apps/vue-mri-ui-lib/src/styles/chartController.scss	Refactors axis panel layout to flex groupings for new controls.
plugins/ui/apps/vue-mri-ui-lib/src/styles/binning.scss	Adjusts binning button alignment/layout.
plugins/ui/apps/vue-mri-ui-lib/src/styles/axisMenuButton.scss	Adds disabled styling for axis menu buttons.
plugins/ui/apps/vue-mri-ui-lib/src/store/mutation-types.ts	Adds mutations for bar display mode/overlay/binsize restore.
plugins/ui/apps/vue-mri-ui-lib/src/store/modules/chartUtils.ts	Minor bar trace marker styling tweak.
plugins/ui/apps/vue-mri-ui-lib/src/store/modules/chart.ts	Adds bar mode/overlay state + mode-switch side effects (axis disable/binsize).
plugins/ui/apps/vue-mri-ui-lib/src/store/modules/bookmark.ts	Persists/restores bar mode; normalizes disabled modes to avoid “dirty” bookmarks.
plugins/ui/apps/vue-mri-ui-lib/src/lib/models/AxisModel.ts	Adds `disabled` flag to axis model defaults.
plugins/ui/apps/vue-mri-ui-lib/src/lib/i18n.ts	Adds i18n strings for new UI labels (“Chart type”, “Overlay”, etc.).
plugins/ui/apps/vue-mri-ui-lib/src/components/XAxisColorButton.vue	Moves positioning responsibility to the controller layout (removes absolute CSS).
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarModes/StackedMode.vue	Adds “stack” mode metadata + layout application function.
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarModes/PartialOverlaySolidMode.vue	Adds overlapping bar mode + optional distribution overlay.
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarModes/OverlayMode.vue	Adds overlapping histogram mode + optional distribution overlay.
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarModes/DistributionCurvesMode.vue	Adds kernel density plot mode + trace replacement logic.
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarModes/modes.ts	Central registry of modes + apply functions.
plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarChart.vue	Applies selected mode during Plotly.react; updates legend/y-axis title behavior.
plugins/ui/apps/vue-mri-ui-lib/src/components/SortMenuButton.vue	Makes positioning conditional on layout props (works with new flex layout).
plugins/ui/apps/vue-mri-ui-lib/src/components/helpers/computeDistributionKDE.ts	New KDE computation + distribution overlay trace/layout mutation helper.
plugins/ui/apps/vue-mri-ui-lib/src/components/DropDownMenuItem.vue	Allows custom menu item rendering via slot.
plugins/ui/apps/vue-mri-ui-lib/src/components/DropDownMenu.vue	Threads selection + exposes slot for custom item content.
plugins/ui/apps/vue-mri-ui-lib/src/components/CohortEntryExitButton.vue	Removes absolute positioning styles (delegates to new layout).
plugins/ui/apps/vue-mri-ui-lib/src/components/CohortEntryExit.vue	Wraps entry/exit buttons in layout subgroup container.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartTypeAxisButton.vue	New chart-type dropdown control for stacked bar modes + overlay toggle.
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartToolbar.vue	Minor template cleanup (self-closing component tag).
plugins/ui/apps/vue-mri-ui-lib/src/components/ChartController.vue	Reorganizes axis controls into groups and adds chart-type control.
plugins/ui/apps/vue-mri-ui-lib/src/components/BookmarkItems.vue	Displays stacked bar mode label in bookmark list tooltip line.
plugins/ui/apps/vue-mri-ui-lib/src/components/AxisMenuButton.vue	Adds disabled support + makes positioning conditional on layout props.
plugins/ui/apps/vue-mri-ui-lib/src/components/tests/StackBarChart.test.ts	Extends unit tests to cover mode application and y-axis title behavior.
plugins/ui/apps/portal/src/plugins/mri/PatientAnalyticsConfig/ui5/views/ChartsTab.view.xml	Adds UI5 config checkboxes for enabling the new stacked modes.
plugins/ui/apps/portal/src/plugins/mri/PatientAnalyticsConfig/ui5/i18n/text.properties	Adds labels/tooltips for new stacked mode enablement options.
plugins/ui/apps/portal/src/plugins/mri/PatientAnalyticsConfig/ui5/i18n/text_en_GB.properties	Same as above for en_GB.
plugins/functions/mri-pg-config/src/db/seeds/03_Config.ts	Updates seeded stacked chart options + changes conflict handling strategy.
plugins/functions/mri-pg-config/src/db/configs/fhirConfigDuckdb.ts	Adds new stacked chart option defaults (disabled) for FHIR DuckDB config.
plugins/functions/mri-pa-config/src/config/formatter.ts	Includes new stacked chart options in formatted config output.
plugins/functions/mri-pa-config/src/config/configDefinition.ts	Extends config definition/validation to include new options.
plugins/functions/mri-pa-config/cfg/pa/configDefaultValues.ts	Adds default values for new stacked chart options.

Copilot

Pull request overview

Copilot reviewed 46 out of 67 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (2)

plugins/ui/apps/vue-mri-ui-lib/src/components/helpers/computeDistributionKDE.ts:1

yValsis derived viamap(Number)without filtering non-finite values. If any element converts toNaN, totalWeightbecomesNaN, the totalWeight === 0guard won’t trigger, and downstream math will propagateNaNdensities. Consider sanitizing weights (e.g., treat non-finite as 0, or return null for that trace) before computingtotalWeight`, mean, variance, and densities.
plugins/ui/apps/vue-mri-ui-lib/src/components/helpers/computeDistributionKDE.ts:1
computeKDE (and the overlay path via appendDistributionOverlay) introduces non-trivial math and several edge cases (e.g., non-finite weights, empty/1-bin inputs, and xPositions mismatch). There are unit tests for StackBarChart modes, but there don’t appear to be focused tests covering KDE output stability and edge handling. Adding dedicated tests for computeKDE/appendDistributionOverlay would help prevent regressions in density scaling, NaN handling, and grid sizing behavior.

-          this.clearSelectionState()
-          return
-        }



+      if (axisModel && axisModel.props && axisModel.props.filterCardId && axisModel.props.key) {
+        if (axisModel.props.binsize !== null && axisModel.props.binsize !== undefined) {
+          return `${axisModel.props.binsize}`
+        }
        const defaultBinningVal = this.getMriFrontendConfig
          .getAttributeByPath(axisModel.props.attributeId)
          .getDefaultBinSize()
-        if (axisModel.props.binsize !== null && axisModel.props.binsize !== undefined) {
-          this.cachedBinValue = `${axisModel.props.binsize}`
-          return `${axisModel.props.binsize}`
-        } else if (defaultBinningVal) {
-          this.cachedBinValue = `${defaultBinningVal}`
+        if (defaultBinningVal) {
          return `${defaultBinningVal}`
-        } else {
-          return ''
        }
      }
      return ''


+      const current = this.axisModel?.props?.binsize
+      if (arg !== current) {
        this.setAxisValue({
          id: this.dimensionIndex,
          props: { binsize: arg },


+<template>
+  <div class="stackbar-mode-option" :class="{ active }">
+    <div class="stackbar-mode-option__row" @click="$emit('select')">
+      <span class="stackbar-mode-option__label">Overlapping</span>
+    </div>
+    <label class="stackbar-mode-option__sub" @click.stop>
+      <input
+        type="checkbox"
+        :checked="showDistributionOverlay"
+        @change="$emit('update:showDistributionOverlay', ($event.target as HTMLInputElement).checked)"
+      />
+      Distribution Curve
+    </label>
+  </div>
+</template>


maggie-li-yd linked an issue Apr 23, 2026 that may be closed by this pull request

Add overlapping histogram/bar chart options in PA #2295

Closed

maggie-li-yd temporarily deployed to github April 23, 2026 10:02 — with GitHub Actions Inactive

maggie-li-yd changed the title ~~Maggie li yd/overlapping histogram 2~~ overlapping histogram Apr 23, 2026

maggie-li-yd force-pushed the maggie-li-yd/overlapping-histogram-2 branch from c2f1ab4 to c39996d Compare April 23, 2026 10:03

maggie-li-yd temporarily deployed to github April 23, 2026 10:03 — with GitHub Actions Inactive

maggie-li-yd temporarily deployed to github April 23, 2026 10:41 — with GitHub Actions Inactive

maggie-li-yd temporarily deployed to github April 27, 2026 09:09 — with GitHub Actions Inactive

maggie-li-yd force-pushed the maggie-li-yd/overlapping-histogram-2 branch from f068c28 to 8a96b3c Compare April 29, 2026 02:03

maggie-li-yd temporarily deployed to github April 29, 2026 02:03 — with GitHub Actions Inactive

maggie-li-yd force-pushed the maggie-li-yd/overlapping-histogram-2 branch from 8a96b3c to 03fffab Compare April 29, 2026 09:16

maggie-li-yd temporarily deployed to github April 29, 2026 09:16 — with GitHub Actions Inactive

maggie-li-yd force-pushed the maggie-li-yd/overlapping-histogram-2 branch from 03fffab to 3a7fe45 Compare May 11, 2026 01:29

maggie-li-yd temporarily deployed to github May 11, 2026 01:29 — with GitHub Actions Inactive

maggie-li-yd force-pushed the maggie-li-yd/overlapping-histogram-2 branch from 3a7fe45 to 1141171 Compare May 11, 2026 01:29

maggie-li-yd temporarily deployed to github May 11, 2026 01:29 — with GitHub Actions Inactive

maggie-li-yd temporarily deployed to github May 11, 2026 04:49 — with GitHub Actions Inactive

maggie-li-yd temporarily deployed to github May 11, 2026 05:50 — with GitHub Actions Inactive

maggie-li-yd temporarily deployed to github May 11, 2026 09:03 — with GitHub Actions Inactive

maggie-li-yd marked this pull request as ready for review May 11, 2026 09:06

Copilot AI review requested due to automatic review settings May 11, 2026 09:06

maggie-li-yd requested review from LSriragavan, brandantck, jerome-ng, khairul-syazwan and p-hoffmann as code owners May 11, 2026 09:06

maggie-li-yd temporarily deployed to github May 11, 2026 09:06 — with GitHub Actions Inactive

Copilot started reviewing on behalf of maggie-li-yd May 11, 2026 09:07 View session

Copilot AI reviewed May 11, 2026

View reviewed changes

maggie-li-yd temporarily deployed to github May 11, 2026 09:18 — with GitHub Actions Inactive

maggie-li-yd requested a review from mwaiyee as a code owner May 11, 2026 09:59

maggie-li-yd added 29 commits May 21, 2026 09:31

move new chart type config to chart options

bd68339

save chart type to bookmark

24e673c

update kde math

e76c30d

temp change to run all e2e tests

1850798

update e2e tests

7198b64

address code review

5539f16

update e2e

4268b36

update e2e test

dafca16

revert config seed merge

b94c43f

fix kdp binning and x-axis tick

3148b6f

update e2e test

59f19e0

fix stale chart type when switching bookmark

59c16c1

remove sort x-axis label text

f6d05d3

revert playwright config

9ac496f

temporarily run all e2e tests

4602089

address code review

2477ebd

update chart type apply

6d7720a

update kdp bin size logic

e8bbddd

update e2e snapshots

0bf483d

address code review for bookmark

ed032cb

update y-axis title logic for KDP

69a3401

revert playwright changes

0de89f4

update e2e snapshots

dc9cecc

update config translation

7346dc3

refactor chart config flag mapping

9668668

disable color by x-axis button for non stacked bar chart

1515632

address code review

47ae4b4

address code review

812eddc

address code review

a6cd4ca

Copilot AI reviewed May 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add new chart options to PA - #2297

Add new chart options to PA#2297
maggie-li-yd merged 42 commits into
developfrom
maggie-li-yd/overlapping-histogram-2

maggie-li-yd commented Apr 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

maggie-li-yd commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes:

Demo:

Merge Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maggie-li-yd commented Apr 23, 2026 •

edited

Loading