Add Timeline & Distributions tabs to continuous Question Groups (Consumer View)

front_end/messages/cs.json

@@ -591,6 +591,12 @@
   "parentBackgroundInfo": "Základní informace o nadřazené otázce",
   "childBackgroundInfo": "Základní informace o podřazené otázce",
   "histogram": "Histogram",
+  "distributions": "Rozdělení",
+  "quartileLabelP25": "P25",
+  "quartileLabelMedian": "Medián",
+  "quartileLabelP75": "P75",
+  "pdfCdfExplanation": "PDF (funkce hustoty pravděpodobnosti) ukazuje, jak pravděpodobné jsou různé výsledky kolem konkrétních hodnot, zatímco CDF (distribuční funkce) ukazuje kumulativní pravděpodobnost výsledků až po určitou hodnotu.",
+  "pmfCdfExplanation": "PMF (pravděpodobnostní funkce) ukazuje, jak pravděpodobné jsou různé konkrétní výsledky, zatímco CDF (distribuční funkce) ukazuje kumulativní pravděpodobnost výsledků až po určitou hodnotu.",
   "frequency": "Frekvence",
   "brierScoreForPlayer": "Brierova skóre pro hráčské předpovědi",
   "scoreHistogram": "Histogram skóre",

front_end/messages/en.json

@@ -912,6 +912,12 @@
   "parentBackgroundInfo": "Parent Question Background Info",
   "childBackgroundInfo": "Child Question Background Info",
   "histogram": "Histogram",
+  "distributions": "Distributions",
+  "quartileLabelP25": "25th %",
+  "quartileLabelMedian": "Median",
+  "quartileLabelP75": "75th %",
+  "pdfCdfExplanation": "PDF (Probability Density Function) shows how likely different outcomes are around specific values, while CDF (Cumulative Distribution Function) shows the cumulative probability of outcomes up to a certain value.",
+  "pmfCdfExplanation": "PMF (Probability Mass Function) shows how likely different specific outcomes are, while CDF (Cumulative Distribution Function) shows the cumulative probability of outcomes up to a certain value.",
   "frequency": "Frequency",
   "brierScoreForPlayer": "Brier scores for player predictions",
   "scoreHistogram": "Score Histogram",

front_end/messages/es.json

@@ -600,6 +600,12 @@
   "parentBackgroundInfo": "Información de Fondo de la Pregunta Principal",
   "childBackgroundInfo": "Información de Fondo de la Pregunta Secundaria",
   "histogram": "Histograma",
+  "distributions": "Distribuciones",
+  "quartileLabelP25": "P25",
+  "quartileLabelMedian": "Mediana",
+  "quartileLabelP75": "P75",
+  "pdfCdfExplanation": "La PDF (función de densidad de probabilidad) muestra qué tan probables son los distintos resultados alrededor de valores específicos, mientras que la CDF (función de distribución acumulada) muestra la probabilidad acumulada de resultados hasta un valor determinado.",
+  "pmfCdfExplanation": "La PMF (función de masa de probabilidad) muestra qué tan probables son distintos resultados específicos, mientras que la CDF (función de distribución acumulada) muestra la probabilidad acumulada de resultados hasta un valor determinado.",
   "frequency": "Frecuencia",
   "brierScoreForPlayer": "Puntuaciones Brier para las predicciones de los jugadores",
   "scoreHistogram": "Histograma de Puntuaciones",

front_end/messages/pt.json

@@ -666,6 +666,12 @@
   "parentBackgroundInfo": "Informações de Fundo da Pergunta Pai",
   "childBackgroundInfo": "Informações de Fundo da Pergunta Filha",
   "histogram": "Histograma",
+  "distributions": "Distribuições",
+  "quartileLabelP25": "P25",
+  "quartileLabelMedian": "Mediana",
+  "quartileLabelP75": "P75",
+  "pdfCdfExplanation": "A PDF (Função de Densidade de Probabilidade) mostra a probabilidade de diferentes resultados em torno de valores específicos, enquanto a CDF (Função de Distribuição Acumulada) mostra a probabilidade acumulada de resultados até um determinado valor.",
+  "pmfCdfExplanation": "A PMF (Função de Massa de Probabilidade) mostra a probabilidade de diferentes resultados específicos, enquanto a CDF (Função de Distribuição Acumulada) mostra a probabilidade acumulada de resultados até um determinado valor.",
   "frequency": "Frequência",
   "brierScoreForPlayer": "Pontuações de Brier para previsões dos jogadores",
   "scoreHistogram": "Histograma de Pontuações",

front_end/messages/zh-TW.json

@@ -714,6 +714,12 @@
   "parentBackgroundInfo": "父問題背景資訊",
   "childBackgroundInfo": "子問題背景資訊",
   "histogram": "直方圖",
+  "distributions": "分佈",
+  "quartileLabelP25": "P25",
+  "quartileLabelMedian": "中位數",
+  "quartileLabelP75": "P75",
+  "pdfCdfExplanation": "PDF（機率密度函數）顯示不同結果在特定值附近的可能性，而 CDF（累積分佈函數）顯示結果直到某一數值的累積機率。",
+  "pmfCdfExplanation": "PMF（機率質量函數）顯示不同具體結果的可能性，而 CDF（累積分佈函數）顯示結果直到某一數值的累積機率。",
   "frequency": "頻率",
   "brierScoreForPlayer": "玩家預測的Brier分數",
   "scoreHistogram": "分數直方圖",

front_end/messages/zh.json

@@ -589,6 +589,12 @@
   "parentBackgroundInfo": "家長問題背景資訊",
   "childBackgroundInfo": "兒童問題背景訊息",
   "histogram": "直方圖",
+  "distributions": "分布",
+  "quartileLabelP25": "P25",
+  "quartileLabelMedian": "中位数",
+  "quartileLabelP75": "P75",
+  "pdfCdfExplanation": "PDF（概率密度函数）显示不同结果在特定值附近的可能性，而 CDF（累积分布函数）显示结果直到某一数值的累积概率。",
+  "pmfCdfExplanation": "PMF（概率质量函数）显示不同具体结果的可能性，而 CDF（累积分布函数）显示结果直到某一数值的累积概率。",
   "frequency": "頻率",
   "brierScoreForPlayer": "Brier 球員預測得分",
   "scoreHistogram": "分數直方圖",

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

@@ -62,6 +62,8 @@ type Props = QuestionsDataProps & {
   withHighlightEndpoint?: boolean;
   onCursorChange?: (ts: number) => void;
   hideTooltip?: boolean;
+  headerLeft?: ReactNode;
+  hideChartTitle?: boolean;
 };
 
 /**
@@ -96,6 +98,8 @@ const GroupTimeline: FC<Props> = ({
   withHighlightEndpoint,
   onCursorChange,
   hideTooltip,
+  headerLeft,
+  hideChartTitle,
 }) => {
   const t = useTranslations();
   const { user } = useAuth();
@@ -367,6 +371,8 @@ const GroupTimeline: FC<Props> = ({
       withHighlightArea={withHighlightArea}
       withHighlightEndpoint={withHighlightEndpoint}
       hideTooltip={hideTooltip}
+      headerLeft={headerLeft}
+      hideChartTitle={hideChartTitle}
     />
   );
 };

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

@@ -61,6 +61,8 @@ type Props = {
   withHighlightArea?: boolean;
   withHighlightEndpoint?: boolean;
   hideTooltip?: boolean;
+  headerLeft?: ReactNode;
+  hideChartTitle?: boolean;
 };
 
 const MultiChoicesChartView: FC<Props> = ({
@@ -97,6 +99,8 @@ const MultiChoicesChartView: FC<Props> = ({
   withHighlightArea = true,
   withHighlightEndpoint = false,
   hideTooltip = false,
+  headerLeft,
+  hideChartTitle = false,
 }) => {
   const { user } = useAuth();
   const isInteracted = useRef(false);
@@ -300,7 +304,7 @@ const MultiChoicesChartView: FC<Props> = ({
               !!forecastAvailability?.cpRevealsOn
             }
             choiceItems={binaryChoiceItems}
-            chartTitle={!embedMode ? title : undefined}
+            chartTitle={!embedMode && !hideChartTitle ? title : undefined}
             timelineMarkers={timelineMarkers}
             activeTimelineMarkerId={activeTimelineMarkerId}
             onTimelineMarkerEnter={onTimelineMarkerEnter}
@@ -316,15 +320,17 @@ const MultiChoicesChartView: FC<Props> = ({
                     hideCP={hideCP}
                   />
                 </div>
-              ) : undefined
+              ) : (
+                headerLeft
+              )
             }
             forceShowLinePoints={!embedMode}
           />
         ) : isMC ? (
           <MultipleChoiceChart
             {...commonChartProps}
             isEmbedded={embedMode}
-            chartTitle={!embedMode ? title : undefined}
+            chartTitle={!embedMode && !hideChartTitle ? title : undefined}
             choiceItems={chartChoiceItems}
             headerLeft={
               withLegend ? (
@@ -337,7 +343,9 @@ const MultiChoicesChartView: FC<Props> = ({
                     hideCP={hideCP}
                   />
                 </div>
-              ) : undefined
+              ) : (
+                headerLeft
+              )
             }
           />
         ) : (
@@ -350,7 +358,7 @@ const MultiChoicesChartView: FC<Props> = ({
             }
             cursorTimestamp={cursorTimestamp}
             choiceItems={choiceItems}
-            chartTitle={!embedMode ? title : undefined}
+            chartTitle={!embedMode && !hideChartTitle ? title : undefined}
             timelineMarkers={timelineMarkers}
             activeTimelineMarkerId={activeTimelineMarkerId}
             onTimelineMarkerEnter={onTimelineMarkerEnter}
@@ -366,7 +374,9 @@ const MultiChoicesChartView: FC<Props> = ({
                     hideCP={hideCP}
                   />
                 </div>
-              ) : undefined
+              ) : (
+                headerLeft
+              )
             }
             forceShowLinePoints={!embedMode}
           />

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

@@ -57,6 +57,7 @@ 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 ConsumerDateGroupChart from "../question_view/consumer_question_view/consumer_date_group_chart";
 import ConsumerGroupChart from "../question_view/consumer_question_view/consumer_group_chart";
 import ConsumerListChartShell from "../question_view/consumer_question_view/consumer_list_chart_shell";
 import ConsumerTimeSeriesPane from "../question_view/consumer_question_view/consumer_time_series_pane";
@@ -360,9 +361,9 @@ export const ConsumerShell: FC<{
               <ConsumerListChartShell
                 stretchListContent={!hideCP && !isFanGraph}
                 hideListOnMobile={!!isDateGroup}
-                hideDivider={!!isDateGroup}
+                hideDivider={false}
                 hideBorder={false}
-                reduceInnerPadding={!!isDateGroup}
+                reduceInnerPadding={false}
                 listContent={
                   hideCP && !mcForecastAvailability?.cpRevealsOn ? (
                     <RevealCPButton />
@@ -404,13 +405,10 @@ export const ConsumerShell: FC<{
                       preselectedQuestionId={preselectedGroupQuestionId}
                     />
                   ) : isDateGroup && postData.group_of_questions ? (
-                    <DateForecastCard
-                      post={postData}
-                      questionsGroup={postData.group_of_questions}
-                      fillHeight
-                      innerChartPaddingX={40}
-                      yearOnlyTicks
-                      withHeader
+                    <ConsumerDateGroupChart
+                      post={
+                        postData as GroupOfQuestionsPost<QuestionWithNumericForecasts>
+                      }
                     />
                   ) : (
                     <QuestionTimeline

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

@@ -6,13 +6,15 @@ import { FC, useEffect } from "react";
 import useCoherenceLinksContext from "@/app/(main)/components/coherence_links_provider";
 import { useCommentsFeedSafe } from "@/app/(main)/components/comments_feed_provider";
 import { Tabs, TabsList, TabsTab } from "@/components/ui/tabs";
+import { useHideCP } from "@/contexts/cp_context";
 import { useBreakpoint } from "@/hooks/tailwind";
 import { PostStatus, PostWithForecasts } from "@/types/post";
 import cn from "@/utils/core/cn";
 
 import { isDisplayableQuestionLink } from "../key_factors/utils";
 import { shouldPostShowUserScores } from "../post_score_data/utils";
 import { useQuestionLayout } from "../question_layout/question_layout_context";
+import { hasGroupDistributions } from "../question_view/consumer_question_view/group_distribution_utils";
 import { hasTimeline } from "../question_view/consumer_question_view/timeline";
 
 type TabKey =
@@ -23,6 +25,7 @@ type TabKey =
   | "question-links"
   | "private-notes"
   | "timeline"
+  | "distributions"
   | "similar-questions";
 
 type TabDef = {
@@ -51,6 +54,7 @@ const QuestionPageShellTabBar: FC<Props> = ({ post, variant, className }) => {
   const { activeTab, setActiveTab } = useQuestionLayout();
 
   const isSm = useBreakpoint("sm");
+  const { hideCP } = useHideCP();
   const commentsFeed = useCommentsFeedSafe();
   const commentCount =
     typeof commentsFeed?.totalCount === "number"
@@ -86,6 +90,9 @@ const QuestionPageShellTabBar: FC<Props> = ({ post, variant, className }) => {
     ...(!isSm && hasTimeline(post)
       ? [{ key: "timeline" as TabKey, label: t("timeline") }]
       : []),
+    ...(!isSm && !hideCP && hasGroupDistributions(post)
+      ? [{ key: "distributions" as TabKey, label: t("distributions") }]
+      : []),
     { key: "key-factors", label: t("keyFactors"), count: keyFactorsCount },
     { key: "info", label: t("info") },
     ...(hasScores

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

@@ -6,6 +6,7 @@ import { PostWithForecasts } from "@/types/post";
 
 import QuestionPageShellTabBar from "./tab_bar";
 import CommentsTab from "./tabs/comments";
+import DistributionsTab from "./tabs/distributions";
 import KeyFactorsTab from "./tabs/key_factors";
 import MyScoresTab from "./tabs/my_scores";
 import PrivateNotesTab from "./tabs/private_notes";
@@ -34,6 +35,8 @@ const renderActivePanel = (
       return <SimilarQuestionsTab post={post} variant={variant} />;
     case "timeline":
       return variant === "consumer" ? <TimelineTab post={post} /> : null;
+    case "distributions":
+      return variant === "consumer" ? <DistributionsTab post={post} /> : null;
     case "key-factors":
       return <KeyFactorsTab post={post} />;
     case "info":