Question Page Redesign - Multiple choice + binary group + continuous group + time series

[ncarazon]

Closes #4643

Summary

This PR delivers the third iteration of the Question Page redesign by extending the side-by-side consumer layout architecture across all N-row question types, introducing new shared chart/list primitives, improving chart interactions and hover synchronization, and refining forecast card, legend, and timeline behaviors across both Consumer and Forecaster views.

Implemented in Iteration 3

• Expanded the ConsumerListChartShell architecture to support all N-row body types:
• Multiple Choice
• Binary Group
• Continuous/Numeric Group
• Fan Graph / Time Series
• Date Group
• Introduced a unified side-by-side consumer layout with:
• shared bordered container
• vertical divider
• responsive mobile behavior
• reusable chart/list composition primitives
• Refactored QuestionPageShell routing logic to use explicit per-type rendering branches instead of shared conditional grouping
• Preserved the stacked layout behavior for Forecaster views while extending the redesigned layout system to all Consumer variants

Consumer side-by-side layouts & chart integration

• Added side-by-side chart/list rendering for:
• MC consumer questions
• Binary group consumer questions
• Continuous/numeric group consumer questions
• Fan graph / time series consumer questions
• Date group consumer questions
• Introduced ConsumerGroupChart, ConsumerTimeSeriesPane, and FanGraphChartPanel as new shared visualization primitives
• Mounted GroupTimeline, QuestionTimeline, scatter charts, and fan charts directly inside the shared shell layouts
• Added support for CP-hidden states using hideCP, replacing left-panel forecast content with RevealCPButton across all supported body types
• Added responsive mobile behaviors:
• chart-first layouts on smaller screens
• Timeline tab integration for hidden list content
• stacked header layouts and mobile-specific visibility rules

Forecast card & list interaction improvements

• Restyled expand/collapse affordances across forecast cards:
• replaced legacy progress-bar controls with chevron text buttons
• added buttonVariant support (primary and minimal)
• introduced minimal ellipsis-style controls for sidebar usage
• Updated sidebar Similar Questions cards to use the new compact expand affordance
• Added support for proportional full-height forecast bars in continuous group layouts
• Added fillHeight support so forecast rows scale vertically to fill available panel space
• Added borderOnly forecast bars for date group questions to represent ranges instead of probabilities
• Updated date group rows to render as full-width outlined boxes without progress fills

Hover synchronization & chart highlighting

• Added shared hover-sync context between left-panel rows and right-panel charts
• Hovering forecast rows now:
• highlights the corresponding chart series
• dims non-highlighted lines/fan areas
• increases highlighted line stroke weight
• renders endpoint markers on latest forecast values
• Added hover synchronization for:
• continuous group timelines
• fan graph visualizations
• time series bar charts
• Refactored TimeSeriesChart into per-question VictoryBar layers to support independent hover opacity behavior
• Added hover-reset handling to prevent persistent highlighted chart states

Legend bar & chart header improvements

• Added CompactLegendBar for Forecaster MC and Binary Group charts
• Integrated legend rendering directly into chart headers alongside zoom controls
• Added responsive header behavior:
• inline desktop layout
• stacked mobile layout
• hidden mobile zoom controls
• Added series visibility toggling using existing ChoiceItem.active state
• Added special resolved-NO rendering behavior:
• gray dot indicator
• strikethrough labels
• non-interactive rendering
• Added mobile item collapsing behavior:
• max visible item limit
• expandable {n} more overflow control
• separate handling for resolved-NO items
• Suppressed chart tooltips while hovering legend controls
• Added section divider between action rows and chart sections for MC and Binary Group layouts
• Hid consumer-view legends for MC and Binary Group timelines

Date group visualization updates

• Migrated date group questions into the shared ConsumerListChartShell
• Added support for:
• full-height scatter chart rendering
• symmetric chart spacing and padding
• improved SVG render ordering so year labels render above scatter points
• simplified year-only tick labels
• Added shell configuration props for date-group-specific layouts:
• hideListOnMobile
• hideDivider
• reduceInnerPadding
• Removed legacy desktop legend tooltip and overlap callback behavior

Functional improvements & fixes

• Fixed normalized chart height initialization issues in MultiChoicesChartView
• Added defensive handling for missing legendContainerRef
• Improved chart hover interaction stability and cursor reset behavior
• Added locale support for new fan chart UI labels across all supported languages
• Refactored shared timeline/chart highlighting logic into reusable props and effects
• Reduced duplicated rendering paths by consolidating N-row consumer layouts into shared primitives

Cleanup & refactors

• Refactored shared chart container/header composition
• Consolidated timeline highlighting and legend behavior into reusable APIs
• Removed older standalone consumer rendering paths for N-row layouts
• Simplified layout branching and forecast card rendering logic across consumer question types

Summary by CodeRabbit

• New Features

  • Added fan chart visualization with toggle between fan and timeline views for group questions
  • Introduced compact legend for enhanced chart interactions
  • Added responsive collapsible forecast cards with compact display modes
  • Enhanced touch and cursor interactions across all chart types

• Improvements

  • Refined chart legends and hover highlighting behavior
  • Improved continuous chart cursor integration for better forecasting
  • Updated UI layouts for better mobile responsiveness

• Localization

  • Added translations for new UI elements across multiple languages (Czech, English, Spanish, Portuguese, Simplified/Traditional Chinese)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7a8095db-a3a8-4ff6-9595-0fa7e37e8898

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/question-page-redesign-3rd-iteration

---

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 and usage tips.}

[github-actions]

Cleanup: Preview Environment Removed

The preview environment for this PR has been destroyed.

Resource	Status
🌐 Preview App	Deleted
🗄️ PostgreSQL Branch	Deleted
⚡ Redis Database	Deleted
🔧 GitHub Deployments	Removed
📦 Docker Image	Retained (auto-cleanup via GHCR policies)

---

Cleanup triggered by PR close at 2026-05-20T12:02:02Z

[coderabbitai]

Actionable comments posted: 11

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

front_end/src/components/charts/group_chart.tsx (1)

383-387: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Exclude the left gutter from inPlot checks.

These bounds start at 0, so any non-zero leftPadding makes the y-axis gutter count as plot space. That activates hover/touch sync and clamps the cursor to the first timestamp even when the pointer is outside the drawable area.

Proposed fix

- const inPlot =
-   x >= 0 &&
+ const inPlot =
+   x >= leftPadding &&
    x <= chartWidth - maxRightPadding &&
    y >= PLOT_TOP &&
    y <= plotBottom;

Apply the same bound in the mouse and both touch handlers.

Also applies to: 415-419, 445-449

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@front_end/src/components/charts/group_chart.tsx` around lines 383 - 387, The
inPlot check currently uses x >= 0 which wrongly includes the left gutter;
change the horizontal lower bound to the left gutter variable (use leftPadding
or the existing left gutter constant) so the condition becomes x >= leftPadding
(and keep x <= chartWidth - maxRightPadding), and apply this same fix in the
mouse handler and both touch handlers where inPlot is computed so hover/touch
sync and cursor clamping only activate inside the actual drawable plot area.

front_end/src/components/consumer_post_card/group_forecast_card/forecast_choice_bar.tsx (1)

115-159: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Treat 0 as a resolved value in the overlay styling.

A valid numeric/date resolution of 0 falls through these truthy checks, so the row can render with unresolved fill/border styling even though it is resolved. Please keep these checks consistent with the !isNil(resolution) guard already used above.

Suggested fix

         <div
           className={cn(
             "absolute -inset-[1px] z-0 rounded-lg border",
             onMouseEnter &&
               "opacity-75 transition-opacity group-hover:opacity-100",
             {
-              "border-2": resolution,
+              "border-2": !isNil(resolution),
             }
           )}
           style={{
             display:
               !isNil(resolution) && !isResolutionSuccessful ? "none" : "block",
             width: borderOnly
               ? `calc(100% + ${WIDTH_ADJUSTMENT}px)`
               : progress < 3
                 ? "3%"
                 : `calc(${progress}% + ${WIDTH_ADJUSTMENT}px)`,
             background: (() => {
-              if (borderOnly || resolution) {
+              if (borderOnly || !isNil(resolution)) {
                 return "transparent";
               }
               if (isClosed && !forceColorful) {
                 return addOpacityToHex(
                   mounted
                     ? getThemeColor(METAC_COLORS.gray["500"])
                     : METAC_COLORS.gray["500"].DEFAULT,
                   0.4
                 );
               }
               return addOpacityToHex(
                 mounted ? getThemeColor(color) : color.DEFAULT,
                 0.4
               );
             })(),
             borderColor: (() => {
-              if (resolution) {
+              if (!isNil(resolution)) {
                 return mounted
                   ? getThemeColor(METAC_COLORS.purple["700"])
                   : METAC_COLORS.gray["700"].DEFAULT;
               }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@front_end/src/components/consumer_post_card/group_forecast_card/forecast_choice_bar.tsx`
around lines 115 - 159, The overlay styling incorrectly treats numeric 0 as
falsy where it checks "if (resolution)" in the inline style functions, causing
resolved rows with resolution === 0 to render as unresolved; update those truthy
checks in the background and borderColor branches to use the same guard used
earlier (e.g., !isNil(resolution) or explicit resolution !== null && resolution
!== undefined) so 0 is treated as a valid resolved value, leaving the existing
!isNil(resolution) display guard unchanged and referencing the same resolution
variable inside the style object in forecast_choice_bar.tsx.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@front_end/messages/pt.json`:
- Line 1560: The Portuguese translation for "fanChart" is inconsistent with the
existing label "fanGraph"; change the value of the "fanChart" key to match the
existing capitalization and wording used for "fanGraph" (i.e., "Gráfico de
Leque") so both keys use identical UI copy; update the "fanChart" entry in
front_end/messages/pt.json accordingly.

In `@front_end/src/app/`(main)/questions/[id]/components/group_timeline.tsx:
- Around line 177-186: The external highlight effect currently mutates
choiceItems state in useEffect (the block that checks externalHighlightedChoice
and calls setChoiceItems), which allows later state updates (e.g., from
onChoiceItemsUpdate or BE resync) to drop the external highlight; remove that
useEffect and stop storing highlighted in state, and instead compute the
highlighted flag at render time by mapping choiceItems to a derived list (e.g.,
itemsWithHighlight = choiceItems.map(item => ({...item, highlighted: item.choice
=== externalHighlightedChoice})) ) and pass itemsWithHighlight to the chart/list
renderers or callers; ensure any code that relied on choiceItems' stored
highlighted uses the derived itemsWithHighlight and keep
externalHighlightedChoice as the single source of truth for highlight.

In
`@front_end/src/app/`(main)/questions/[id]/components/multiple_choices_chart_view/compact_legend_bar/index.tsx:
- Around line 20-23: The isResolvedNo function currently checks the localized
displayedResolution ("No") which breaks localization; replace the localized
check with the ChoiceItem's canonical resolution field (e.g., item.resolution or
item.resolutionCode) instead of item.displayedResolution and compare against the
canonical "no" value or the project's resolution enum (use the same "no" token
used in the Binary branch or QuestionResolution.No if available) so both
branches use a locale-independent value; update isResolvedNo to reference that
canonical field and remove the hardcoded "No" string.

In
`@front_end/src/app/`(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx:
- Around line 95-98: The legend currently only toggles isCursorOverLegend via
mouse events (legendEnterProps), so touch interactions still allow the floating
tooltip to appear; add corresponding touch handlers (onTouchStart/onTouchEnd or
onPointerDown/onPointerUp with pointerType checks) to the same props used for
the legend (e.g., legendEnterProps and the similar legendSvgProps block around
lines 406-410) to set isCursorOverLegend true on touch start/press and false on
touch end/cancel, ensuring the tooltip logic checks isCursorOverLegend to
suppress showing the floating tooltip during touch interactions.

In
`@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/meta_row.tsx:
- Line 145: The component currently appends a hardcoded "..." after t("nMore", {
count: hiddenChips.length }) which breaks localization; change the usage so the
entire label (including any trailing punctuation) comes from i18n—e.g., replace
t("nMore", { count: hiddenChips.length }) + "..." with a single call like
t("nMoreWithSuffix", { count: hiddenChips.length }) or t("nMore", { count:
hiddenChips.length, suffix: "..." }) and then add/update the corresponding
translation keys in your locale files to include the ellipsis/formatting; remove
the hardcoded "..." in meta_row.tsx (referencing the hiddenChips and t(...)
usage) so translators control the full output.

In
`@front_end/src/app/`(main)/questions/[id]/components/question_view/consumer_question_view/consumer_list_chart_shell.tsx:
- Around line 65-77: The chart pane is forced hidden on mobile due to the fixed
"hidden sm:flex" class, so when hideListOnMobile is true both panes vanish;
update the second div's className logic in consumer_list_chart_shell.tsx to
remove the "hidden" on small screens when hideListOnMobile is true (i.e.,
conditionally omit "hidden" based on the hideListOnMobile prop) so the chart
remains visible on mobile; keep the existing responsive classes (sm:flex
sm:flex-col) and preserve other conditional classes (reduceInnerPadding,
hideDivider, isExpanded) unchanged.

In `@front_end/src/components/charts/group_chart.tsx`:
- Around line 626-630: The endpoint marker logic creates a fake baseline marker
by coercing missing final y to 0; instead detect when the last point's y is
null/undefined and skip creating/rendering the endpoint marker. Update the point
construction in group_chart.tsx (the const point using isClosed, line, xDomain)
to only set y when line?.at(-1)?.y is a number (otherwise make the point
undefined or signal to not render), and apply the same change to the duplicated
block around the other occurrence (the similar code at the 655-660 region) so
markers are omitted when the latest y is missing.

In `@front_end/src/components/charts/numeric_chart.tsx`:
- Around line 607-609: The touch tooltip anchor isn't cleared on touch cancel,
leaving stale state; add an onTouchCancel handler on the same element that
clears touchPoint (same behavior as handleTouchEnd) or call the existing
handleTouchEnd from a new handleTouchCancel function; update the component to
either pass onTouchCancel={handleTouchEnd} or implement handleTouchCancel to
call setTouchPoint(null)/reset any tooltip state (refer to touchPoint,
handleTouchEnd, and setTouchPoint in numeric_chart.tsx).
- Around line 859-862: The value-box conditional starting at {!isDiamondActive
&& !isNil(highlightedPoint) && !hideCP && !(hideCursorValueLabel &&
isCursorActive) ? ( currently allows the cursor value box in continuous consumer
dot mode; add an explicit guard for that mode (e.g., &&
!isContinuousConsumerDotMode or the actual prop/flag used to indicate continuous
consumer dot interaction) so the value-box does not render in dot-only mode;
update the conditional around the value-box render in numeric_chart.tsx (the
ternary that uses isDiamondActive, highlightedPoint, hideCP,
hideCursorValueLabel, isCursorActive) to include this extra check.

In
`@front_end/src/components/consumer_post_card/group_forecast_card/forecast_card_wrapper.tsx`:
- Around line 56-74: The minimal branch currently renders a non-interactive div
so hidden rows cannot be expanded; change the element in the isMinimal branch
(where showExpandRow is true and toggleButtonClassName is used) from a div to an
interactive button element, give it type="button", attach the same onClick
handler (onExpand) and aria-pressed={false} (and keep the FontAwesomeIcon and
t("otherWithCount", { count: otherItemsCount }) content) so the minimal variant
becomes clickable and accessible like the non-minimal branch.

In
`@front_end/src/components/consumer_post_card/group_forecast_card/percentage_forecast_card.tsx`:
- Line 42: The percentage rows in PercentageForecastCard are not updating the
hover-sync context: add mouse handlers on each percentage bar row to call the
hover-context setter (the same hoveredChoiceName setter used by the other row
types) so entering a row sets hoveredChoiceName to that choice's name and
leaving clears it; locate where setIsExpanded is pulled from
useListChartExpanded() and also import/consume the hover-sync setter (the
hoveredChoiceName setter) and wire it into the row elements rendered around
lines ~42 and ~95-109 so side-by-side charts/legends cross-highlight correctly.

---

Outside diff comments:
In `@front_end/src/components/charts/group_chart.tsx`:
- Around line 383-387: The inPlot check currently uses x >= 0 which wrongly
includes the left gutter; change the horizontal lower bound to the left gutter
variable (use leftPadding or the existing left gutter constant) so the condition
becomes x >= leftPadding (and keep x <= chartWidth - maxRightPadding), and apply
this same fix in the mouse handler and both touch handlers where inPlot is
computed so hover/touch sync and cursor clamping only activate inside the actual
drawable plot area.

In
`@front_end/src/components/consumer_post_card/group_forecast_card/forecast_choice_bar.tsx`:
- Around line 115-159: The overlay styling incorrectly treats numeric 0 as falsy
where it checks "if (resolution)" in the inline style functions, causing
resolved rows with resolution === 0 to render as unresolved; update those truthy
checks in the background and borderColor branches to use the same guard used
earlier (e.g., !isNil(resolution) or explicit resolution !== null && resolution
!== undefined) so 0 is treated as a valid resolved value, leaving the existing
!isNil(resolution) display guard unchanged and referencing the same resolution
variable inside the style object in forecast_choice_bar.tsx.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5cad9e9c-f5f0-40e6-bfe8-6d2cba18340a

📥 Commits

Reviewing files that changed from the base of the PR and between ec7bbe1 and 378e70a.

📒 Files selected for processing (53)

• front_end/messages/cs.json
• front_end/messages/en.json
• front_end/messages/es.json
• front_end/messages/pt.json
• front_end/messages/zh-TW.json
• front_end/messages/zh.json
• front_end/src/app/(main)/questions/[id]/components/group_timeline.tsx
• front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_consumer_section.tsx
• front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/compact_legend_bar/index.tsx
• front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx
• front_end/src/app/(main)/questions/[id]/components/question_page_shell/index.tsx
• front_end/src/app/(main)/questions/[id]/components/question_page_shell/meta_row.tsx
• front_end/src/app/(main)/questions/[id]/components/question_page_shell/title_row.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/consumer_group_chart.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/consumer_list_chart_shell.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/consumer_time_series_pane.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/fan_graph_chart_panel.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/prediction/group_of_questions_prediction/index.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/prediction/index.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/prediction/single_question_prediction/continuous_question_prediction.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/timeline/index.tsx
• front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status.tsx
• front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_question_prediction_chip.tsx
• front_end/src/components/charts/fan_chart.tsx
• front_end/src/components/charts/group_chart.tsx
• front_end/src/components/charts/histogram.tsx
• front_end/src/components/charts/multiple_choice_chart.tsx
• front_end/src/components/charts/numeric_chart.tsx
• front_end/src/components/charts/numeric_timeline.tsx
• front_end/src/components/charts/primitives/chart_container.tsx
• front_end/src/components/charts/primitives/chart_fan_tooltip.tsx
• front_end/src/components/charts/primitives/line_cursor_points.tsx
• front_end/src/components/consumer_post_card/binary_cp_bar.tsx
• front_end/src/components/consumer_post_card/consumer_question_tile/consumer_continuous_tile.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/date_forecast_card/index.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/date_forecast_card/scatter_label.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/forecast_card_wrapper.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/forecast_choice_bar.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/index.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/numeric_forecast_card.tsx
• front_end/src/components/consumer_post_card/group_forecast_card/percentage_forecast_card.tsx
• front_end/src/components/consumer_post_card/index.tsx
• front_end/src/components/consumer_post_card/time_series_chart/index.tsx
• front_end/src/components/consumer_post_card/time_series_chart/time_series_label.tsx
• front_end/src/components/detailed_question_card/detailed_group_card/index.tsx
• front_end/src/components/detailed_question_card/detailed_question_card/continuous_chart_card.tsx
• front_end/src/components/detailed_question_card/detailed_question_card/hooks/use_full_aggregation.ts
• front_end/src/components/detailed_question_card/detailed_question_card/index.tsx
• front_end/src/components/detailed_question_card/detailed_question_card/multiple_choice_chart_card.tsx
• front_end/src/components/post_card/question_tile/continuous_cp_bar.tsx
• front_end/src/contexts/continuous_chart_cursor_context.tsx
• front_end/src/hooks/use_chart_tooltip.ts
• front_end/src/hooks/use_container_size.ts