Date group consumer visual restyle#4747
Merged
ncarazon merged 3 commits intoMay 20, 2026
Merged
Conversation
…out (bars left, scatter chart right)
…ly bars in mobile timeline tab
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Contributor
Cleanup: Preview Environment RemovedThe preview environment for this PR has been destroyed.
Cleanup triggered by PR close at 2026-05-20T09:14:46Z |
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
hlbmtc
approved these changes
May 20, 2026
ncarazon
merged commit 378e70a
into
feat/question-page-redesign-3rd-iteration
9 checks passed
ncarazon
added a commit
that referenced
this pull request
May 20, 2026
…group + time series (#4734) * Consumer side-by-side shell, row restyle, and expand/collapse for N-row question types (#4712) * feat: add ConsumerListChartShell for N-row consumer side-by-side layout * fix: remove extra top/bottom margin on group prediction inside the side-by-side shell and fix styles in ConsumerListChartShell * feat: restyle consumer MC and group forecast rows with chevron expand/collapse and expanded panel * feat: restyle sidebar expand button with ellipsis/border variant and hide legend in consumer MC and binary-group chart views * fix: restore isBordered prop in ForecastChoiceBar and show TimeSeriesChart in fan graph left panel * fix: stretch group forecast card to full width and use minimal expand button in feed * feat: add consumer side-by-side shell for continuous numeric group questions with proportional bars, hover-synced chart highlight, and endpoint dots * fix: scope bar hover effects to wired handlers, fill height for all bar-row types, cover discrete groups, and prevent expand height jump * fix: render minimal expand indicator as div to fix accessibility violation * fix: remove expand button from DOM and clamp hiddenCount when overlay is open * Compact legend bar for MC + binary group forecaster (#4724) * feat: add compact legend bar above MC and binary group chart with per-option checkbox, current %, and resolved-no strikethrough * feat: responsive compact legend bar for MC and binary group charts with mobile item cap, resolved-no collapsing, tooltip suppression, and hidden zoom buttons on mobile * fix: use MC resolved-no detection in binary timeline view * fix: remove pointer/hover affordances from resolved-NO legend items and add aria-label to checkboxes * Time series visualisation updates (#4738) * feat: add consumer Fan/Timeline toggle with side-by-side bar chart, hover sync, and color-aligned time series visualisation for FanGraph * fix: enable mobile fan chart tooltip in consumer view due to async timing issue that kept the tooltip invisible * fix: support touch drag tracking on fan chart tooltip and simplify tooltip rendering * fix: fan chart toggle order and default differ between consumer and forecaster views * fix: mobile fan chart tooltip: matches desktop hover behavior, dismisses outside tap, no page shift on drag * fix: group timeline touch tooltip now works on first tap, follows finger drag, and shows endpoint dots on all lines * fix: duplicate fan chart tooltip on desktop hover * fix: handle touchcancel, sticky tooltip/cursor state, and bar highlight edge cases across charts * Date group consumer visual restyle (#4747) * feat: date group consumer visual restyle with iter 3 side-by-side layout (bars left, scatter chart right) * fix: scope date group visual changes to question page only; border-only bars in mobile timeline tab * refactor: use cn() for className in DateForecastCard * fix: derive highlight state, canonical resolution checks, touch handling, and null endpoint guards across consumer chart components
ncarazon
added a commit
that referenced
this pull request
May 20, 2026
* Mount consumer binary + continuous side-by-side with the detailed chart card & Timeline / Histogram toggle on binary bodies (#4692) * feat: add QuestionHeaderCPStatus next to timeline for consumer binary questions * fix: remove extra mt-8 top margin from consumer continuous timeline * feat: add Timeline/Histogram toggle to binary detailed chart cards and fix consumer binary radial padding * fix: resolve layout jumping between chart views, fix histogram full-width responsive scaling, and center binary radial charts on mobile * fix: prevent chart layout snapping with synchronous measurements, enable side-by-side continuous charts on sm breakpoints, and standardize spacing utility classes * fix: show fallback message when histogram tab has no data * Live cursor updates the side-by-side left card (#4694) * feat: live cursor updates left-panel value, range, and distribution for continuous consumer view, with dot indicator on timeline and no tooltip/dashed line in consumer mode * feat: animate consumer mobile mini chart on timeline cursor and fix mobile tooltip position tracking * fix: always serialize full forecast_values in aggregation history for cursor-time distribution animation * fix: memoize cursorChartData to skip cdfToPmf recalculation when forecast_values reference is unchanged * fix: resolve cursor dot color override through resolveToCssColor * refactor: lazily fetch full aggregation history from aggregation explorer on pointer enter for continuous consumer cursor animation, keeping posts endpoint lightweight * fix: pass include_bots_in_aggregates to aggregation explorer to match stored aggregation bot semantics, format aggregate_forecasts.py * fix: use stable setActiveForecast reference in effect deps to prevent infinite re-render loop on hover * Empty / pre-CP-reveal audit for the new side-by-side row (#4700) * fix: handle hideCP, cpRevealsOn, and isEmpty in the side-by-side left card for binary and continuous questions * fix: handle isEmpty, cpRevealsOn, and hideCP states in the side-by-side layout left panel and fix title overflow onto the CP block * fix: refine mobile hidden-CP states for binary and continuous in the forecaster title row and left panel * fix: prevent CP status from being squeezed off-screen in the mobile title row * fix: restore "No forecasts yet" overlay in feed cards and suppress it on the question detail page * fix: wire hideCP, cpRevealsOn, and isEmpty states into all question-type left panels for the side-by-side layout * fix: replace hardcoded isEmpty:false with suppressEmptyOverlay prop, fix missing useMemo deps, and align binary cpRevealsOn state with continuous * fix: correct import order in continuous_question_prediction.tsx * feat: enable live cursor sync on continuous questions for forecaster view * feat: bridge timeline cursor to forecaster mobile CP status chip * fix: hide cursor tooltip for continuous questions in forecaster view * fix: propagate enriched aggregation into timeline and histogram renders; fix zh-TW locale wording for histogram empty state * Question Page Redesign - Multiple choice + binary group + continuous group + time series (#4734) * Consumer side-by-side shell, row restyle, and expand/collapse for N-row question types (#4712) * feat: add ConsumerListChartShell for N-row consumer side-by-side layout * fix: remove extra top/bottom margin on group prediction inside the side-by-side shell and fix styles in ConsumerListChartShell * feat: restyle consumer MC and group forecast rows with chevron expand/collapse and expanded panel * feat: restyle sidebar expand button with ellipsis/border variant and hide legend in consumer MC and binary-group chart views * fix: restore isBordered prop in ForecastChoiceBar and show TimeSeriesChart in fan graph left panel * fix: stretch group forecast card to full width and use minimal expand button in feed * feat: add consumer side-by-side shell for continuous numeric group questions with proportional bars, hover-synced chart highlight, and endpoint dots * fix: scope bar hover effects to wired handlers, fill height for all bar-row types, cover discrete groups, and prevent expand height jump * fix: render minimal expand indicator as div to fix accessibility violation * fix: remove expand button from DOM and clamp hiddenCount when overlay is open * Compact legend bar for MC + binary group forecaster (#4724) * feat: add compact legend bar above MC and binary group chart with per-option checkbox, current %, and resolved-no strikethrough * feat: responsive compact legend bar for MC and binary group charts with mobile item cap, resolved-no collapsing, tooltip suppression, and hidden zoom buttons on mobile * fix: use MC resolved-no detection in binary timeline view * fix: remove pointer/hover affordances from resolved-NO legend items and add aria-label to checkboxes * Time series visualisation updates (#4738) * feat: add consumer Fan/Timeline toggle with side-by-side bar chart, hover sync, and color-aligned time series visualisation for FanGraph * fix: enable mobile fan chart tooltip in consumer view due to async timing issue that kept the tooltip invisible * fix: support touch drag tracking on fan chart tooltip and simplify tooltip rendering * fix: fan chart toggle order and default differ between consumer and forecaster views * fix: mobile fan chart tooltip: matches desktop hover behavior, dismisses outside tap, no page shift on drag * fix: group timeline touch tooltip now works on first tap, follows finger drag, and shows endpoint dots on all lines * fix: duplicate fan chart tooltip on desktop hover * fix: handle touchcancel, sticky tooltip/cursor state, and bar highlight edge cases across charts * Date group consumer visual restyle (#4747) * feat: date group consumer visual restyle with iter 3 side-by-side layout (bars left, scatter chart right) * fix: scope date group visual changes to question page only; border-only bars in mobile timeline tab * refactor: use cn() for className in DateForecastCard * fix: derive highlight state, canonical resolution checks, touch handling, and null endpoint guards across consumer chart components
ncarazon
added a commit
that referenced
this pull request
May 20, 2026
* Mount consumer binary + continuous side-by-side with the detailed chart card & Timeline / Histogram toggle on binary bodies (#4692) * feat: add QuestionHeaderCPStatus next to timeline for consumer binary questions * fix: remove extra mt-8 top margin from consumer continuous timeline * feat: add Timeline/Histogram toggle to binary detailed chart cards and fix consumer binary radial padding * fix: resolve layout jumping between chart views, fix histogram full-width responsive scaling, and center binary radial charts on mobile * fix: prevent chart layout snapping with synchronous measurements, enable side-by-side continuous charts on sm breakpoints, and standardize spacing utility classes * fix: show fallback message when histogram tab has no data * Live cursor updates the side-by-side left card (#4694) * feat: live cursor updates left-panel value, range, and distribution for continuous consumer view, with dot indicator on timeline and no tooltip/dashed line in consumer mode * feat: animate consumer mobile mini chart on timeline cursor and fix mobile tooltip position tracking * fix: always serialize full forecast_values in aggregation history for cursor-time distribution animation * fix: memoize cursorChartData to skip cdfToPmf recalculation when forecast_values reference is unchanged * fix: resolve cursor dot color override through resolveToCssColor * refactor: lazily fetch full aggregation history from aggregation explorer on pointer enter for continuous consumer cursor animation, keeping posts endpoint lightweight * fix: pass include_bots_in_aggregates to aggregation explorer to match stored aggregation bot semantics, format aggregate_forecasts.py * fix: use stable setActiveForecast reference in effect deps to prevent infinite re-render loop on hover * Empty / pre-CP-reveal audit for the new side-by-side row (#4700) * fix: handle hideCP, cpRevealsOn, and isEmpty in the side-by-side left card for binary and continuous questions * fix: handle isEmpty, cpRevealsOn, and hideCP states in the side-by-side layout left panel and fix title overflow onto the CP block * fix: refine mobile hidden-CP states for binary and continuous in the forecaster title row and left panel * fix: prevent CP status from being squeezed off-screen in the mobile title row * fix: restore "No forecasts yet" overlay in feed cards and suppress it on the question detail page * fix: wire hideCP, cpRevealsOn, and isEmpty states into all question-type left panels for the side-by-side layout * fix: replace hardcoded isEmpty:false with suppressEmptyOverlay prop, fix missing useMemo deps, and align binary cpRevealsOn state with continuous * fix: correct import order in continuous_question_prediction.tsx * feat: enable live cursor sync on continuous questions for forecaster view * feat: bridge timeline cursor to forecaster mobile CP status chip * fix: hide cursor tooltip for continuous questions in forecaster view * fix: propagate enriched aggregation into timeline and histogram renders; fix zh-TW locale wording for histogram empty state * Question Page Redesign - Multiple choice + binary group + continuous group + time series (#4734) * Consumer side-by-side shell, row restyle, and expand/collapse for N-row question types (#4712) * feat: add ConsumerListChartShell for N-row consumer side-by-side layout * fix: remove extra top/bottom margin on group prediction inside the side-by-side shell and fix styles in ConsumerListChartShell * feat: restyle consumer MC and group forecast rows with chevron expand/collapse and expanded panel * feat: restyle sidebar expand button with ellipsis/border variant and hide legend in consumer MC and binary-group chart views * fix: restore isBordered prop in ForecastChoiceBar and show TimeSeriesChart in fan graph left panel * fix: stretch group forecast card to full width and use minimal expand button in feed * feat: add consumer side-by-side shell for continuous numeric group questions with proportional bars, hover-synced chart highlight, and endpoint dots * fix: scope bar hover effects to wired handlers, fill height for all bar-row types, cover discrete groups, and prevent expand height jump * fix: render minimal expand indicator as div to fix accessibility violation * fix: remove expand button from DOM and clamp hiddenCount when overlay is open * Compact legend bar for MC + binary group forecaster (#4724) * feat: add compact legend bar above MC and binary group chart with per-option checkbox, current %, and resolved-no strikethrough * feat: responsive compact legend bar for MC and binary group charts with mobile item cap, resolved-no collapsing, tooltip suppression, and hidden zoom buttons on mobile * fix: use MC resolved-no detection in binary timeline view * fix: remove pointer/hover affordances from resolved-NO legend items and add aria-label to checkboxes * Time series visualisation updates (#4738) * feat: add consumer Fan/Timeline toggle with side-by-side bar chart, hover sync, and color-aligned time series visualisation for FanGraph * fix: enable mobile fan chart tooltip in consumer view due to async timing issue that kept the tooltip invisible * fix: support touch drag tracking on fan chart tooltip and simplify tooltip rendering * fix: fan chart toggle order and default differ between consumer and forecaster views * fix: mobile fan chart tooltip: matches desktop hover behavior, dismisses outside tap, no page shift on drag * fix: group timeline touch tooltip now works on first tap, follows finger drag, and shows endpoint dots on all lines * fix: duplicate fan chart tooltip on desktop hover * fix: handle touchcancel, sticky tooltip/cursor state, and bar highlight edge cases across charts * Date group consumer visual restyle (#4747) * feat: date group consumer visual restyle with iter 3 side-by-side layout (bars left, scatter chart right) * fix: scope date group visual changes to question page only; border-only bars in mobile timeline tab * refactor: use cn() for className in DateForecastCard * fix: derive highlight state, canonical resolution checks, touch handling, and null endpoint guards across consumer chart components
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
2 participants
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.
Related to #4643
Summary
This PR applies the iter 3 side-by-side layout (
ConsumerListChartShell) to date group questions in the consumer view, which previously rendered the Victory scatter chart standalone and outside the shared shell.Implemented changes:
QuestionPageShell): date groups are now included inisNRowBodyand rendered throughConsumerListChartShell- full-width bordered bars in the left panel, scatter chart filling the right panel. On mobile, the scatter chart appears above the fold and the bars surface in the Timeline tab.ConsumerListChartShell: addedhideListOnMobile,hideDivider, andreduceInnerPaddingprops so date groups can suppress the bars panel on mobile, hide the inter-panel divider line, and remove inner-facing padding (leaving chart internal padding as the sole visual gap between panels).DateForecastCard: addedfillHeightprop that readscontainerHeightfrom the existinguseContainerSizehook and passes it toVictoryChart, so the scatter chart stretches to fill the right panel. Padding anddomainPaddingmade symmetric; small-chart top axis moved afterVictoryScatterin SVG render order so year labels paint above scatter points; date tick format narrowed from"dd MMM yyyy"to"yyyy"; desktop legend tooltip and label-overlap callback removed.ForecastChoiceBar: addedborderOnlyprop that renders bars as full-width outlined boxes with no progress fill, used by date group bars to indicate a range rather than a probability.NumericForecastCard: passesborderOnly={isDateGroup}so the existing bar component renders correctly for date groups without a separate layout path.ScatterLabel:onLabelOverlapmade optional to decouple from the removed legend callback.Demo video
date-group-consumer-visual_restyle.mp4
Summary by CodeRabbit