feat(reports): render RL charts in switchable 2D/3D tabs#41
Merged
Conversation
added 2 commits
April 14, 2026 16:20
Before, the reports page rendered either the 2D line chart OR the 3D
posterior landscape based on whether arm count was at or above
chart_line_threshold. Admins who wanted the other view had to change
the threshold and reload.
Now both charts are always available behind tab controls; the threshold
decides only which tab is active on first paint. Switching tabs never
reloads the page.
Implementation:
- templates/rl-charts.html.twig: tablist + panes with proper
role/aria-selected/aria-controls wiring, shared date filter above
the tabs (removes duplicate filter blocks from the old two-box
layout).
- css/rl-charts.css: tab button styling with is-active state, pane
box layout, :focus-visible outline for keyboard users. Old
.rl-chart-row/.rl-chart-box classes dropped.
- js/rl-plotly-charts.js: 2D and 3D render logic split into
render2d()/render3d() closures. The active tab renders immediately;
the inactive tab's chart is rendered lazily on its first activation
so Plotly.newPlot has a visible container to size against. Every
subsequent tab switch calls Plotly.Plots.resize() against the
newly-visible chart. Tab click + ArrowLeft/ArrowRight keyboard
navigation are both wired via once('rl-chart-tabs').
Default tab selection: numArms > chart_line_threshold picks '3d',
everything else picks '2d'. The 2D chart still caps at 20 traces for
readability and still hides its legend when numArms exceeds the
threshold.
Plotly throws "Something went wrong with axis scaling" when the 3D surface is rendered against a container with 0 height, which happens on first tab activation because getResponsiveConfig() was called at init while the 3D pane was still display:none. Reading the height inside render2d()/render3d() picks up the real clientHeight once the pane is active. Fallback raised from 200px to 70vh to match the min-height in rl-charts.css.
a68ea82 to
190e11a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
chart_line_thresholdbecomes a tab-default preference instead of a visibility gate:numArms > chart_line_thresholdopens on the 3D tab, everything else opens on 2D.What changed
role="tab"/role="tabpanel"/aria-selected/aria-controlswiring. Shared date filter moved above the tabs (removes the duplicate filter block the old two-box layout carried)..is-active, pane box layout,:focus-visibleoutline for keyboard users. Drops the old.rl-chart-row/.rl-chart-boxclasses.render2d()/render3d()closures.Plotly.newPlothas a visible container to measure.Plotly.Plots.resize()on the newly-visible chart to recover any sizing drift from the hidden state.once('rl-chart-tabs')wiring for click and ArrowLeft/ArrowRight keyboard navigation.Design notes
display: none, which is why the inactive pane holds a never-touched container until first activation — not a hidden but rendered chart. First-activation render appears instant to the user because the tab is already visible by the timerender3d()runs.Test plan
Plotly.Plots.resize()path.date_filterstill show the single shared filter above the tabs with no duplication.