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

Author: ncarazon

front_end/src/app/(main)/questions/[id]/components/group_timeline.tsx

@@ -52,11 +52,14 @@ type Props = QuestionsDataProps & {
   embedMode?: boolean;
   withLegend?: boolean;
   className?: string;
+  externalHighlightedChoice?: string | null;
   prioritizeOpen?: boolean;
   timelineMarkers?: GroupTimelineMarker[];
   activeTimelineMarkerId?: string | null;
   onTimelineMarkerEnter?: (marker: GroupTimelineMarker) => void;
   onTimelineMarkerLeave?: (marker: GroupTimelineMarker) => void;
+  withHighlightArea?: boolean;
+  withHighlightEndpoint?: boolean;
 };
 
 /**
@@ -86,6 +89,9 @@ const GroupTimeline: FC<Props> = ({
   activeTimelineMarkerId,
   onTimelineMarkerEnter,
   onTimelineMarkerLeave,
+  externalHighlightedChoice,
+  withHighlightArea,
+  withHighlightEndpoint,
 }) => {
   const t = useTranslations();
   const { user } = useAuth();
@@ -168,6 +174,17 @@ const GroupTimeline: FC<Props> = ({
     setChoiceItems(generateList(questions, group, preselectedQuestionId));
   }, [questions, preselectedQuestionId, generateList, group]);
 
+  // apply external highlight from parent (e.g. consumer row hover)
+  useEffect(() => {
+    if (externalHighlightedChoice === undefined) return;
+    setChoiceItems((prev) =>
+      prev.map((item) => ({
+        ...item,
+        highlighted: item.choice === externalHighlightedChoice,
+      }))
+    );
+  }, [externalHighlightedChoice]);
+
   const [cursorTimestamp, _tooltipDate, handleCursorChange] =
     useTimestampCursor(timestamps);
   const tooltipChoices = useMemo<ChoiceTooltipItem[]>(() => {
@@ -335,6 +352,8 @@ const GroupTimeline: FC<Props> = ({
       activeTimelineMarkerId={activeTimelineMarkerId}
       onTimelineMarkerEnter={onTimelineMarkerEnter}
       onTimelineMarkerLeave={onTimelineMarkerLeave}
+      withHighlightArea={withHighlightArea}
+      withHighlightEndpoint={withHighlightEndpoint}
     />
   );
 };

front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx

@@ -49,6 +49,8 @@ type Props = {
   activeTimelineMarkerId?: string | null;
   onTimelineMarkerEnter?: (marker: GroupTimelineMarker) => void;
   onTimelineMarkerLeave?: (marker: GroupTimelineMarker) => void;
+  withHighlightArea?: boolean;
+  withHighlightEndpoint?: boolean;
 };
 
 const MultiChoicesChartView: FC<Props> = ({
@@ -82,6 +84,8 @@ const MultiChoicesChartView: FC<Props> = ({
   activeTimelineMarkerId,
   onTimelineMarkerEnter,
   onTimelineMarkerLeave,
+  withHighlightArea = true,
+  withHighlightEndpoint = false,
 }) => {
   const { user } = useAuth();
   const isInteracted = useRef(false);
@@ -243,6 +247,8 @@ const MultiChoicesChartView: FC<Props> = ({
     forceAutoZoom: isInteracted.current,
     forecastAvailability,
     attachRef,
+    withHighlightArea,
+    withHighlightEndpoint,
   } as const;
 
   return (

front_end/src/app/(main)/questions/[id]/components/question_page_shell/index.tsx

@@ -5,6 +5,9 @@ import { FC, Fragment, ReactNode, useEffect } from "react";
 
 import useCoherenceLinksContext from "@/app/(main)/components/coherence_links_provider";
 import { PostStatusBox } from "@/app/(main)/questions/[id]/components/post_status_box";
+import NumericForecastCard from "@/components/consumer_post_card/group_forecast_card/numeric_forecast_card";
+import PercentageForecastCard from "@/components/consumer_post_card/group_forecast_card/percentage_forecast_card";
+import TimeSeriesChart from "@/components/consumer_post_card/time_series_chart";
 import UpcomingCP from "@/components/consumer_post_card/upcoming_cp";
 import DetailedGroupCard from "@/components/detailed_question_card/detailed_group_card";
 import DetailedQuestionCard from "@/components/detailed_question_card/detailed_question_card";
@@ -15,14 +18,15 @@ import { useHideCP } from "@/contexts/cp_context";
 import { useContentTranslatedBannerContext } from "@/contexts/translations_banner_context";
 import {
   GroupOfQuestionsGraphType,
+  GroupOfQuestionsPost,
   PostStatus,
   PostWithForecasts,
   QuestionStatus,
 } from "@/types/post";
 import { TournamentType } from "@/types/projects";
-import { QuestionType } from "@/types/question";
-import cn from "@/utils/core/cn";
+import { QuestionType, QuestionWithNumericForecasts } from "@/types/question";
 import { getQuestionForecastAvailability } from "@/utils/questions/forecastAvailability";
+import { sortGroupPredictionOptions } from "@/utils/questions/groupOrdering";
 import {
   checkGroupOfQuestionsPostType,
   isContinuousQuestion,
@@ -40,15 +44,17 @@ import PostScoreData from "../post_score_data";
 import { QuestionLayoutProvider } from "../question_layout/question_layout_context";
 import { QuestionVariantComposer } from "../question_variant_composer";
 import ActionRow from "../question_view/action_row";
+import ConsumerGroupChart from "../question_view/consumer_question_view/consumer_group_chart";
+import ConsumerListChartShell from "../question_view/consumer_question_view/consumer_list_chart_shell";
 import ConsumerQuestionPrediction from "../question_view/consumer_question_view/prediction";
 import QuestionTimeline from "../question_view/consumer_question_view/timeline";
 import QuestionHeaderCPStatus from "../question_view/forecaster_question_view/question_header/question_header_cp_status";
 import RevealCPButton from "../reveal_cp_button";
 
 const baseSectionClassName =
-  "relative z-10 flex w-[59rem] max-w-full flex-col gap-6 overflow-x-clip rounded border border-blue-400 p-4 text-gray-900 dark:border-blue-200-dark dark:text-gray-900-dark lg:p-8";
+  "relative flex w-[59rem] max-w-full flex-col gap-6 overflow-x-clip rounded border border-blue-400 p-4 text-gray-900 dark:border-blue-200-dark dark:text-gray-900-dark lg:p-8";
 
-const mainSectionClassName = `${baseSectionClassName} bg-gray-0 dark:bg-gray-0-dark`;
+const mainSectionClassName = `${baseSectionClassName} z-10 bg-gray-0 dark:bg-gray-0-dark`;
 const commentSectionClassName = `${baseSectionClassName} bg-blue-100 dark:bg-gray-0-dark`;
 
 type ShellProps = {
@@ -147,9 +153,6 @@ export const ConsumerShell: FC<{
   const isMultipleChoice = isMultipleChoicePost(postData);
   const isNonFanGroup = isGroupOfQuestionsPost(postData) && !isFanGraph;
 
-  const reverseOrder =
-    (isMultipleChoice || isGroupOfQuestionsPost(postData)) && !isDateGroup;
-
   const isContinuousSingleQuestion =
     isQuestionPost(postData) && isContinuousQuestion(postData.question);
 
@@ -158,24 +161,36 @@ export const ConsumerShell: FC<{
     !isContinuousSingleQuestion &&
     !isMultipleChoice;
 
+  const isNRowBody =
+    isMultipleChoice || (isNonFanGroup && !isDateGroup) || isFanGraph;
+
+  const isContinuousNumericGroup =
+    isNonFanGroup &&
+    !isDateGroup &&
+    !isMultipleChoice &&
+    (checkGroupOfQuestionsPostType(postData, QuestionType.Numeric) ||
+      checkGroupOfQuestionsPostType(postData, QuestionType.Discrete));
+
   const binaryForecastAvailability =
     isBinarySingleQuestion && isQuestionPost(postData)
       ? getQuestionForecastAvailability(postData.question)
       : null;
 
-  const showSideBySide =
-    isMultipleChoice ||
-    isNonFanGroup ||
-    isBinarySingleQuestion ||
-    isContinuousSingleQuestion;
-
   const showClosedMessageMultipleChoice =
     isMultipleChoicePost(postData) &&
     postData.question.status === QuestionStatus.CLOSED;
 
   const showClosedMessageFanGraph =
     isFanGraph && postData.status === PostStatus.CLOSED;
 
+  const fanGraphQuestions = isFanGraph
+    ? sortGroupPredictionOptions(
+        (postData.group_of_questions?.questions ??
+          []) as QuestionWithNumericForecasts[],
+        postData.group_of_questions
+      )
+    : null;
+
   const questionLinkAggregates =
     aggregateCoherenceLinks?.data.filter(isDisplayableQuestionLink) ?? [];
   const hasKeyFactors = (postData.key_factors?.length ?? 0) > 0;
@@ -218,21 +233,8 @@ export const ConsumerShell: FC<{
               {t("predictionClosedMessage")}
             </p>
           )}
-          <div
-            className={cn(
-              "flex flex-col",
-              reverseOrder &&
-                !isMultipleChoice &&
-                !isNonFanGroup &&
-                "flex-col-reverse",
-              showSideBySide &&
-                cn("sm:flex-row sm:items-center", {
-                  "sm:gap-0 md:gap-8": isBinarySingleQuestion,
-                  "sm:gap-8": !isBinarySingleQuestion,
-                })
-            )}
-          >
-            {isBinarySingleQuestion && isQuestionPost(postData) ? (
+          {isBinarySingleQuestion && isQuestionPost(postData) ? (
+            <div className="flex flex-col sm:flex-row sm:items-center sm:gap-0 md:gap-8">
               <div className="order-1 flex w-64 flex-col items-center justify-center gap-[18px] self-center sm:self-stretch">
                 {hideCP ? (
                   <RevealCPButton />
@@ -247,47 +249,85 @@ export const ConsumerShell: FC<{
                   />
                 )}
               </div>
-            ) : (
-              <div
-                className={cn(
-                  showSideBySide && !isDateGroup ? "order-1" : undefined,
-                  isContinuousSingleQuestion && "md:hidden",
-                  showSideBySide &&
-                    !isDateGroup &&
-                    !isContinuousSingleQuestion &&
-                    "sm:max-w-[200px]",
-                  hideCP &&
-                    !isContinuousSingleQuestion &&
-                    (isDateGroup || isFanGraph) &&
-                    "flex w-full justify-center"
-                )}
-              >
-                {hideCP && !isContinuousSingleQuestion ? (
-                  <RevealCPButton />
-                ) : (
-                  <ConsumerQuestionPrediction postData={postData} />
-                )}
+              <QuestionTimeline
+                postData={postData}
+                keyFactors={postData.key_factors}
+                isConsumerView
+                preselectedGroupQuestionId={preselectedGroupQuestionId}
+                className="order-2 mt-0 hidden flex-1 sm:block"
+              />
+            </div>
+          ) : isContinuousSingleQuestion ? (
+            <div className="flex flex-col sm:flex-row sm:items-center sm:gap-8">
+              <div className="order-1 md:hidden">
+                <ConsumerQuestionPrediction postData={postData} />
               </div>
-            )}
-            {!isFanGraph && !isDateGroup && (
               <QuestionTimeline
                 postData={postData}
                 keyFactors={postData.key_factors}
-                isConsumerView={true}
+                isConsumerView={false}
                 preselectedGroupQuestionId={preselectedGroupQuestionId}
-                className={cn(
-                  "hidden sm:block",
-                  showSideBySide && "order-2 mt-0 flex-1",
-                  isContinuousSingleQuestion && "mt-0"
-                )}
+                className="order-2 mt-0 hidden flex-1 sm:block"
               />
-            )}
-            {showClosedMessageFanGraph && (
-              <p className="my-8 text-center text-sm leading-[20px] text-gray-700 dark:text-gray-700-dark">
-                {t("predictionClosedMessage")}
-              </p>
-            )}
-          </div>
+            </div>
+          ) : isNRowBody ? (
+            <>
+              <ConsumerListChartShell
+                stretchListContent={!hideCP && !isFanGraph}
+                listContent={
+                  hideCP ? (
+                    <RevealCPButton />
+                  ) : isFanGraph && fanGraphQuestions ? (
+                    <TimeSeriesChart
+                      questions={fanGraphQuestions}
+                      variant="colorful"
+                      height={180}
+                    />
+                  ) : isContinuousNumericGroup ? (
+                    <NumericForecastCard post={postData} fillHeight />
+                  ) : (
+                    <PercentageForecastCard
+                      post={postData}
+                      forceColorful
+                      fillHeight
+                    />
+                  )
+                }
+                chartContent={
+                  isFanGraph ? (
+                    <DetailedGroupCard
+                      post={
+                        postData as GroupOfQuestionsPost<QuestionWithNumericForecasts>
+                      }
+                      preselectedQuestionId={preselectedGroupQuestionId}
+                    />
+                  ) : isContinuousNumericGroup ? (
+                    <ConsumerGroupChart
+                      post={
+                        postData as GroupOfQuestionsPost<QuestionWithNumericForecasts>
+                      }
+                      preselectedQuestionId={preselectedGroupQuestionId}
+                    />
+                  ) : (
+                    <QuestionTimeline
+                      postData={postData}
+                      keyFactors={postData.key_factors}
+                      isConsumerView
+                      preselectedGroupQuestionId={preselectedGroupQuestionId}
+                      className="mt-0"
+                    />
+                  )
+                }
+              />
+              {showClosedMessageFanGraph && (
+                <p className="my-8 text-center text-sm leading-[20px] text-gray-700 dark:text-gray-700-dark">
+                  {t("predictionClosedMessage")}
+                </p>
+              )}
+            </>
+          ) : (
+            <ConsumerQuestionPrediction postData={postData} />
+          )}
         </div>
         {shouldShowKeyFactorsSection && (
           <div className="order-3 sm:order-none">

front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/consumer_group_chart.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { FC } from "react";
+
+import GroupTimeline from "@/app/(main)/questions/[id]/components/group_timeline";
+import { GroupOfQuestionsPost, PostStatus } from "@/types/post";
+import { QuestionWithNumericForecasts } from "@/types/question";
+import { getPostDrivenTime } from "@/utils/questions/helpers";
+
+import { useListChartExpanded } from "./consumer_list_chart_shell";
+
+type Props = {
+  post: GroupOfQuestionsPost<QuestionWithNumericForecasts>;
+  preselectedQuestionId?: number;
+};
+
+const ConsumerGroupChart: FC<Props> = ({ post, preselectedQuestionId }) => {
+  const { hoveredChoiceName, setHoveredChoiceName } = useListChartExpanded();
+  const { open_time, actual_close_time, scheduled_close_time, status } = post;
+  const refCloseTime = actual_close_time ?? scheduled_close_time;
+
+  return (
+    <div onMouseLeave={() => setHoveredChoiceName(null)}>
+      <GroupTimeline
+        group={post.group_of_questions}
+        actualCloseTime={getPostDrivenTime(refCloseTime)}
+        openTime={getPostDrivenTime(open_time)}
+        isClosed={status === PostStatus.CLOSED}
+        preselectedQuestionId={preselectedQuestionId}
+        withLegend={false}
+        withHighlightArea={false}
+        withHighlightEndpoint
+        externalHighlightedChoice={hoveredChoiceName}
+      />
+    </div>
+  );
+};
+
+export default ConsumerGroupChart;