fix: wire hideCP, cpRevealsOn, and isEmpty states into all question-type left panels for the side-by-side layout

Author: ncarazon

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

@@ -7,12 +7,15 @@ import { useCommentsFeed } from "@/app/(main)/components/comments_feed_provider"
 import { openKeyFactorsSectionAndScrollTo } from "@/app/(main)/questions/[id]/components/key_factors/utils";
 import { PostStatus, PostWithForecasts } from "@/types/post";
 import { sendAnalyticsEvent } from "@/utils/analytics";
+import { getQuestionForecastAvailability } from "@/utils/questions/forecastAvailability";
+import { isQuestionPost } from "@/utils/questions/helpers";
 
 import {
   MAX_TOP_KEY_FACTORS,
   useTopKeyFactorsCarouselItems,
 } from "./hooks/use_top_key_factors_carousel_items";
 import KeyFactorDetailOverlay from "./key_factor_detail_overlay";
+import KeyFactorsCarousel from "./key_factors_carousel";
 import KeyFactorsConsumerCarousel from "./key_factors_consumer_carousel";
 import { useShouldHideKeyFactors } from "./use_should_hide_key_factors";
 import { useQuestionLayout } from "../question_layout/question_layout_context";
@@ -41,14 +44,21 @@ const KeyFactorsQuestionConsumerSection: FC<Props> = ({ post }) => {
 
   if (post.status === PostStatus.RESOLVED) return null;
 
+  const postForecastAvailability = isQuestionPost(post)
+    ? getQuestionForecastAvailability(post.question)
+    : null;
+  const forecastIsEmpty =
+    !!postForecastAvailability?.isEmpty &&
+    !postForecastAvailability?.cpRevealsOn;
+
+  if (topItems.length === 0 && !forecastIsEmpty) return null;
+
   const openKeyFactorsElement = (selector: string) => {
     requestKeyFactorsExpand?.();
     openKeyFactorsSectionAndScrollTo({ selector, mobileOnly: false });
     sendAnalyticsEvent("KeyFactorClick", { event_label: "fromTopList" });
   };
 
-  if (topItems.length === 0) return null;
-
   return (
     <div
       className="-ml-4 flex w-[calc(100%+32px)] flex-col pb-4 sm:ml-0 sm:mt-8 sm:w-full"
@@ -58,18 +68,33 @@ const KeyFactorsQuestionConsumerSection: FC<Props> = ({ post }) => {
         <div className="text-sm text-blue-800 dark:text-blue-800-dark">
           {t("topKeyFactors")}
         </div>
-        <button
-          onClick={() => {
-            openKeyFactorsElement("[id='key-factors']");
-            sendAnalyticsEvent("KeyFactorViewAllClick");
-          }}
-          className="text-center text-sm font-normal leading-5 text-blue-600 hover:text-blue-700 dark:text-blue-600-dark dark:hover:text-blue-700-dark"
-        >
-          {t("viewAll", { count: totalCount })}
-        </button>
+        {!forecastIsEmpty && (
+          <button
+            onClick={() => {
+              openKeyFactorsElement("[id='key-factors']");
+              sendAnalyticsEvent("KeyFactorViewAllClick");
+            }}
+            className="text-center text-sm font-normal leading-5 text-blue-600 hover:text-blue-700 dark:text-blue-600-dark dark:hover:text-blue-700-dark"
+          >
+            {t("viewAll", { count: totalCount })}
+          </button>
+        )}
       </div>
 
-      <KeyFactorsConsumerCarousel post={post} items={topItems} />
+      {forecastIsEmpty ? (
+        <KeyFactorsCarousel
+          listClassName="pb-0 [&>:first-child]:pl-4 [&>:last-child]:pr-4 sm:[&>:first-child]:pl-0 sm:[&>:last-child]:pr-0"
+          items={Array.from({ length: 5 })}
+          renderItem={(_, i) => (
+            <div
+              key={i}
+              className="h-[196px] w-[160px] shrink-0 rounded-xl bg-blue-200 dark:bg-blue-200-dark sm:w-[200px]"
+            />
+          )}
+        />
+      ) : (
+        <KeyFactorsConsumerCarousel post={post} items={topItems} />
+      )}
 
       {keyFactorOverlay?.kind === "keyFactor" && (
         <KeyFactorDetailOverlay

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

@@ -319,10 +319,11 @@ const MultiChoicesChartView: FC<Props> = ({
       )}
 
       {isTooltipActive &&
+        !hideCP &&
+        !forecastAvailability?.cpRevealsOn &&
         !activeTimelineMarkerId &&
         (tooltipChoices.length > 0 ||
           !!tooltipUserChoices?.length ||
-          !!forecastAvailability?.cpRevealsOn ||
           !!forecastAvailability?.isEmpty) && (
           <FloatingPortal>
             <div

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

@@ -179,7 +179,14 @@ export const ConsumerShell: FC<{
     aggregateCoherenceLinks?.data.filter(isDisplayableQuestionLink) ?? [];
   const hasKeyFactors = (postData.key_factors?.length ?? 0) > 0;
   const hasQuestionLinks = questionLinkAggregates.length > 0;
-  const shouldShowKeyFactorsSection = hasKeyFactors || hasQuestionLinks;
+  const questionForecastAvailability = isQuestionPost(postData)
+    ? getQuestionForecastAvailability(postData.question)
+    : null;
+  const isForecastEmpty =
+    !!questionForecastAvailability?.isEmpty &&
+    !questionForecastAvailability?.cpRevealsOn;
+  const shouldShowKeyFactorsSection =
+    hasKeyFactors || hasQuestionLinks || isForecastEmpty;
 
   return (
     <div className="flex flex-col gap-1.5 md:gap-4">
@@ -243,10 +250,22 @@ export const ConsumerShell: FC<{
               <div
                 className={cn(
                   showSideBySide && !isDateGroup ? "order-1" : undefined,
-                  isContinuousSingleQuestion && "md:hidden"
+                  isContinuousSingleQuestion && "md:hidden",
+                  showSideBySide &&
+                    !isDateGroup &&
+                    !isContinuousSingleQuestion &&
+                    "sm:max-w-[200px]",
+                  hideCP &&
+                    !isContinuousSingleQuestion &&
+                    (isDateGroup || isFanGraph) &&
+                    "flex w-full justify-center"
                 )}
               >
-                <ConsumerQuestionPrediction postData={postData} />
+                {hideCP && !isContinuousSingleQuestion ? (
+                  <RevealCPButton />
+                ) : (
+                  <ConsumerQuestionPrediction postData={postData} />
+                )}
               </div>
             )}
             {!isFanGraph && !isDateGroup && (

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

@@ -4,14 +4,16 @@ import { FC } from "react";
 
 import QuestionHeaderCPStatus from "@/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status";
 import QuestionTitle from "@/app/(main)/questions/[id]/components/question_view/shared/question_title";
+import RevealCPButton from "@/app/(main)/questions/[id]/components/reveal_cp_button";
 import ConditionalTile from "@/components/conditional_tile";
 import { useHideCP } from "@/contexts/cp_context";
 import { PostWithForecasts } from "@/types/post";
-import { QuestionWithForecasts } from "@/types/question";
+import { QuestionType, QuestionWithForecasts } from "@/types/question";
 import cn from "@/utils/core/cn";
 import {
   isConditionalPost,
   isContinuousQuestion,
+  isGroupOfQuestionsPost,
   isQuestionPost,
 } from "@/utils/questions/helpers";
 
@@ -35,6 +37,9 @@ const TitleRow: FC<Props> = ({ post, variant, className }) => {
   }
 
   if (variant === "forecaster" && isQuestionPost(post)) {
+    const isMultipleChoice = post.question.type === QuestionType.MultipleChoice;
+    const isContinuous = isContinuousQuestion(post.question);
+
     return (
       <div
         className={cn(
@@ -53,20 +58,62 @@ const TitleRow: FC<Props> = ({ post, variant, className }) => {
               {post.title}
             </QuestionTitle>
             <div className="shrink-0 self-center md:hidden">
+              {isMultipleChoice ? (
+                hideCP && <RevealCPButton className="whitespace-nowrap" />
+              ) : (
+                <QuestionHeaderCPStatus
+                  question={post.question as QuestionWithForecasts}
+                  size="md"
+                  hideLabel={isContinuous}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        {!isContinuous && (
+          <div className="hidden shrink-0 md:block">
+            {isMultipleChoice && hideCP ? (
+              <RevealCPButton className="whitespace-nowrap" />
+            ) : (
               <QuestionHeaderCPStatus
                 question={post.question as QuestionWithForecasts}
-                size="md"
-                hideLabel={isContinuousQuestion(post.question)}
+                size="lg"
               />
-            </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (variant === "forecaster" && isGroupOfQuestionsPost(post)) {
+    return (
+      <div
+        className={cn(
+          "flex w-full items-stretch justify-between gap-2 xs:gap-4 sm:gap-8",
+          className
+        )}
+      >
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div
+            className={cn(
+              "lg:order-0 order-1 flex gap-2",
+              hideCP ? "flex-col" : "items-center"
+            )}
+          >
+            <QuestionTitle className="min-w-0 break-words text-xl font-bold leading-tight tracking-[-0.4px] text-blue-800 dark:text-blue-800-dark sm:text-3xl sm:tracking-tight lg:text-4xl">
+              {post.title}
+            </QuestionTitle>
+            {hideCP && (
+              <div className="shrink-0 self-center md:hidden">
+                <RevealCPButton className="whitespace-nowrap" />
+              </div>
+            )}
           </div>
         </div>
-        {!isContinuousQuestion(post.question) && (
+        {hideCP && (
           <div className="hidden shrink-0 md:block">
-            <QuestionHeaderCPStatus
-              question={post.question as QuestionWithForecasts}
-              size="lg"
-            />
+            <RevealCPButton className="whitespace-nowrap" />
           </div>
         )}
       </div>

front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status.tsx

@@ -113,7 +113,8 @@ const QuestionHeaderCPStatus: FC<Props> = ({
         "min-h-full w-[200px]": size === "lg" && hideLabel,
         "w-max max-w-[200px]": size === "lg" && !hideLabel,
         "max-w-[130px]":
-          size === "md" || (isEmbed && !isEmbedBelow376 && !isEmbedWide),
+          !forecastAvailability.cpRevealsOn &&
+          (size === "md" || (isEmbed && !isEmbedBelow376 && !isEmbedWide)),
         "gap-1": !hideLabel && size === "lg",
         "gap-0": size === "md",
         "-gap-2": size === "md" && hideLabel,
@@ -144,7 +145,10 @@ const QuestionHeaderCPStatus: FC<Props> = ({
           style={borderStyle}
           className={cn(containerClassName, "items-center justify-center")}
         >
-          <UpcomingCP cpRevealsOn={forecastAvailability.cpRevealsOn} />
+          <UpcomingCP
+            cpRevealsOn={forecastAvailability.cpRevealsOn}
+            className="whitespace-nowrap"
+          />
         </div>
       );
     }
@@ -293,7 +297,7 @@ const QuestionHeaderCPStatus: FC<Props> = ({
         {!!forecastAvailability.cpRevealsOn && !isEmbed && (
           <UpcomingCP
             cpRevealsOn={forecastAvailability.cpRevealsOn}
-            className="mt-2"
+            className="mt-2 whitespace-nowrap"
           />
         )}
       </div>

front_end/src/components/charts/fan_chart.tsx

@@ -452,7 +452,7 @@ const FanChart: FC<Props> = ({
               domainPadding={v.domainPadding(variantArgs)}
               padding={chartPadding}
               containerComponent={
-                withTooltip ? (
+                withTooltip && !hideCP && !forecastAvailability?.cpRevealsOn ? (
                   containerWithTooltip
                 ) : (
                   <VictoryContainer

front_end/src/components/charts/group_chart.tsx

@@ -386,7 +386,9 @@ const GroupChart: FC<Props> = ({
                 },
               ]}
               containerComponent={
-                onCursorChange ? (
+                onCursorChange &&
+                !hideCP &&
+                !forecastAvailability?.cpRevealsOn ? (
                   CursorContainer
                 ) : (
                   <VictoryContainer

front_end/src/components/charts/multiple_choice_chart.tsx

@@ -51,9 +51,9 @@ import { scaleInternalLocation, unscaleNominalLocation } from "@/utils/math";
 
 import ChartContainer from "./primitives/chart_container";
 import ChartCursorLabel from "./primitives/chart_cursor_label";
+import SvgWrapper from "./primitives/svg_wrapper";
 import XTickLabel from "./primitives/x_tick_label";
 import ForecastAvailabilityChartOverflow from "../post_card/chart_overflow";
-import SvgWrapper from "./primitives/svg_wrapper";
 import YTickLabel from "./primitives/y_tick_label";
 
 type ColoredLinePoint = {
@@ -321,7 +321,9 @@ const MultipleChoiceChart: FC<Props> = ({
               },
             ]}
             containerComponent={
-              onCursorChange ? (
+              onCursorChange &&
+              !hideCP &&
+              !forecastAvailability?.cpRevealsOn ? (
                 CursorContainer
               ) : (
                 <VictoryContainer
@@ -395,15 +397,16 @@ const MultipleChoiceChart: FC<Props> = ({
                 axis: {
                   stroke: "transparent",
                 },
-                grid: isEmptyDomain
-                  ? {
-                      stroke: getThemeColor(METAC_COLORS.gray["300"]),
-                      strokeWidth: 1,
-                      strokeDasharray: "2, 5",
-                    }
-                  : {
-                      stroke: "transparent",
-                    },
+                grid:
+                  isEmptyDomain || hideCP
+                    ? {
+                        stroke: getThemeColor(METAC_COLORS.gray["300"]),
+                        strokeWidth: 1,
+                        strokeDasharray: "2, 5",
+                      }
+                    : {
+                        stroke: "transparent",
+                      },
               }}
               label={yLabel}
               offsetX={