Mount consumer binary + continuous side-by-side with the detailed chart card & Timeline / Histogram toggle on binary bodies

[ncarazon]

Related to #4642

This PR mounts QuestionHeaderCPStatus side-by-side with the detailed chart card for consumer binary and continuous question views, bringing them to parity with the forecaster branch layout. Also adds a Timeline / Histogram toggle to binary detailed chart cards and fixes consumer binary radial left-edge clipping at sm–md breakpoints.

Implemented features & fixes:

• Consumer binary: replaced the centered big radial in the left panel with QuestionHeaderCPStatus - renders small radial (BinaryCPBar) + weekly-delta chip (QuestionCPMovement) on the left, timeline on the right

• Consumer continuous: confirmed already implemented via isConsumerView=false propagation into DetailedContinuousChartCard, which renders the current-estimate tile + minified area chart on the left, full timeline on the right

• Forecaster binary/continuous: layouts unchanged

• Binary chart card: added Timeline / Histogram toggle in chart header; chartTitle widened to ReactNode across ChartContainer / NumericChart / NumericTimeline

• Consumer binary radial: fixed left-edge clipping at sm–md breakpoints

• Binary

• Continuous (numeric)

• Continuous (date)

• Continuous (discrete)

• Timeline / Histogram toggle for binary chart

demo.mp4

Summary by CodeRabbit

Release Notes

• New Features

  • Added chart view toggle for binary questions, allowing users to switch between timeline and histogram visualizations.

• Improvements

  • Refined responsive layout behavior and chart dimension handling for better display consistency across device sizes.
  • Improved initial container sizing to ensure charts render properly on page load.

[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: 0457f22a-4222-4c41-a16e-4ecf25564fc8

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/mount-consumer-binary-continuous-side-by-side-with-the

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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-07T08:32:43Z

[coderabbitai]

Actionable comments posted: 1

🤖 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/src/components/detailed_question_card/detailed_question_card/continuous_chart_card.tsx`:
- Around line 317-356: renderHistogram currently returns null when no histogram
data, producing blank space; change it to render the same outer container
(preserving viewToggle and the div with style height: chartHeight) and inside
show a fallback UI instead of null: if hideCP || isCpHidden keep the existing
RevealCPButton, otherwise render a small empty-state element (e.g., a centered
message or EmptyState component) in place of <Histogram> that says no histogram
data available; update renderHistogram (and its early return) so the fallback is
used when !histogram?.length while keeping median/mean logic and preserving
classNames and chartHeight.

🪄 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: fafa630f-ab58-4e5e-8cfa-d0c79514c0b0

📥 Commits

Reviewing files that changed from the base of the PR and between 1170ea9 and c85a628.

📒 Files selected for processing (9)

• front_end/src/app/(main)/questions/[id]/components/question_page_shell/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/forecaster_question_view/question_header/question_header_cp_status.tsx
• front_end/src/components/charts/histogram.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/detailed_question_card/detailed_question_card/continuous_chart_card.tsx
• front_end/src/hooks/use_container_size.ts