Add / Remove Multiple Choice Options

docs/openapi.yml

@@ -494,6 +494,40 @@ components:
           items:
             type: string
           description: "List of options for multiple_choice questions"
+          example:
+            - "Democratic"
+            - "Republican"
+            - "Libertarian"
+            - "Green"
+            - "Other"
+        all_options_ever:
+          type: array
+          items:
+            type: string
+          description: "List of all options ever for multiple_choice questions"
+          example:
+            - "Democratic"
+            - "Republican"
+            - "Libertarian"
+            - "Green"
+            - "Blue"
+            - "Other"
+        options_history:
+          type: array
+          description: "List of [iso format time, options] pairs for multiple_choice questions"
+          items:
+            type: array
+            items:
+              oneOf:
+                - type: string
+                  description: "ISO 8601 timestamp when the options became active"
+                - type: array
+                  items:
+                    type: string
+                  description: "Options list active from this timestamp onward"
+          example:
+            - ["0001-01-01T00:00:00", ["a", "b", "c", "other"]]
+            - ["2026-10-22T16:00:00", ["a", "b", "c", "d", "other"]]
         status:
           type: string
           enum: [ upcoming, open, closed, resolved ]
@@ -1306,6 +1340,7 @@ paths:
                           actual_close_time: "2020-11-01T00:00:00Z"
                           type: "numeric"
                           options: null
+                          options_history: null
                           status: "resolved"
                           resolution: "77289125.94957079"
                           resolution_criteria: "Resolution Criteria Copy"
@@ -1479,6 +1514,7 @@ paths:
                           actual_close_time: "2015-12-15T03:34:00Z"
                           type: "binary"
                           options: null
+                          options_history: null
                           status: "resolved"
                           possibilities:
                             type: "binary"
@@ -1548,6 +1584,16 @@ paths:
                             - "Libertarian"
                             - "Green"
                             - "Other"
+                          all_options_ever:
+                            - "Democratic"
+                            - "Republican"
+                            - "Libertarian"
+                            - "Green"
+                            - "Blue"
+                            - "Other"
+                          options_history:
+                            - ["0001-01-01T00:00:00", ["Democratic", "Republican", "Libertarian", "Other"]]
+                            - ["2026-10-22T16:00:00", ["Democratic", "Republican", "Libertarian", "Green", "Other"]]
                           status: "open"
                           possibilities: { }
                           resolution: null

front_end/src/app/(main)/aggregation-explorer/components/continuous_aggregations_chart.tsx

@@ -84,7 +84,12 @@ const ContinuousAggregationChart: FC<Props> = ({
       if (historyItem) {
         charts.push({
           pmf: cdfToPmf(historyItem.forecast_values),
-          cdf: historyItem.forecast_values,
+          cdf: historyItem.forecast_values.map((v) => {
+            if (v === null) {
+              throw new Error("Forecast values contain null values");
+            }
+            return v;
+          }),
           type: "community",
         });
       }

front_end/src/app/(main)/aggregation-explorer/components/explorer.tsx

@@ -23,7 +23,10 @@ import { SearchParams } from "@/types/navigation";
 import { Post, PostWithForecasts } from "@/types/post";
 import { QuestionType, QuestionWithForecasts } from "@/types/question";
 import { logError } from "@/utils/core/errors";
-import { parseQuestionId } from "@/utils/questions/helpers";
+import {
+  getAllOptionsHistory,
+  parseQuestionId,
+} from "@/utils/questions/helpers";
 
 import { AggregationWrapper } from "./aggregation_wrapper";
 import { AggregationExtraMethod } from "../types";
@@ -417,8 +420,9 @@ function parseSubQuestions(
       },
     ];
   } else if (data.question?.type === QuestionType.MultipleChoice) {
+    const allOptions = getAllOptionsHistory(data.question);
     return (
-      data.question.options?.map((option) => ({
+      allOptions?.map((option) => ({
         value: option,
         label: option,
       })) || []

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

@@ -81,7 +81,7 @@ const QuestionInfo: React.FC<{
 
   const getYesProbability = (
     q: QuestionWithNumericForecasts
-  ): number | undefined => {
+  ): number | null | undefined => {
     if (q.type !== QuestionType.Binary) return undefined;
     const values =
       q.aggregations?.[q.default_aggregation_method]?.latest?.forecast_values;

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

@@ -36,15 +36,17 @@ const QuestionHeaderCPStatus: FC<Props> = ({
   const t = useTranslations();
   const { hideCP } = useHideCP();
   const forecastAvailability = getQuestionForecastAvailability(question);
-  const continuousAreaChartData = getContinuousAreaChartData({
-    question,
-    isClosed: question.status === QuestionStatus.CLOSED,
-  });
   const isContinuous = [
     QuestionType.Numeric,
     QuestionType.Discrete,
     QuestionType.Date,
   ].includes(question.type);
+  const continuousAreaChartData = !isContinuous
+    ? null
+    : getContinuousAreaChartData({
+        question,
+        isClosed: question.status === QuestionStatus.CLOSED,
+      });
 
   if (question.status === QuestionStatus.RESOLVED && question.resolution) {
     // Resolved/Annulled/Ambiguous

front_end/src/components/charts/continuous_area_chart.tsx

@@ -1127,7 +1127,12 @@ export function getContinuousAreaChartData({
   if (latest && isForecastActive(latest)) {
     chartData.push({
       pmf: cdfToPmf(latest.forecast_values),
-      cdf: latest.forecast_values,
+      cdf: latest.forecast_values.map((v) => {
+        if (v === null) {
+          throw new Error("Forecast values contain null values");
+        }
+        return v;
+      }),
       type: (isClosed ? "community_closed" : "community") as ContinuousAreaType,
     });
   }
@@ -1141,7 +1146,12 @@ export function getContinuousAreaChartData({
   } else if (!!userForecast && isForecastActive(userForecast)) {
     chartData.push({
       pmf: cdfToPmf(userForecast.forecast_values),
-      cdf: userForecast.forecast_values,
+      cdf: userForecast.forecast_values.map((v) => {
+        if (v === null) {
+          throw new Error("Forecast values contain null values");
+        }
+        return v;
+      }),
       type: "user" as ContinuousAreaType,
     });
   }

front_end/src/components/charts/histogram.tsx

@@ -21,8 +21,8 @@ import ChartContainer from "./primitives/chart_container";
 
 type HistogramProps = {
   histogramData: { x: number; y: number }[];
-  median: number | undefined;
-  mean: number | undefined;
+  median: number | null | undefined;
+  mean: number | null | undefined;
   color: "blue" | "gray";
   width?: number;
 };

front_end/src/components/charts/minified_continuous_area_chart.tsx

@@ -56,7 +56,7 @@ const HORIZONTAL_PADDING = 10;
 
 type Props = {
   question: Question | GraphingQuestionProps;
-  data: ContinuousAreaGraphInput;
+  data: ContinuousAreaGraphInput | null;
   height?: number;
   width?: number;
   extraTheme?: VictoryThemeDefinition;
@@ -81,6 +81,9 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
   forceTickCount,
   variant = "feed",
 }) => {
+  if (data === null) {
+    throw new Error("Data for MinifiedContinuousAreaChart is null");
+  }
   const { ref: chartContainerRef, width: containerWidth } =
     useContainerSize<HTMLDivElement>();
   const chartWidth = width || containerWidth;
@@ -607,7 +610,12 @@ export function getContinuousAreaChartData({
   if (latest && isForecastActive(latest)) {
     chartData.push({
       pmf: cdfToPmf(latest.forecast_values),
-      cdf: latest.forecast_values,
+      cdf: latest.forecast_values.map((v) => {
+        if (v === null) {
+          throw new Error("Forecast values contain null values");
+        }
+        return v;
+      }),
       type: (isClosed ? "community_closed" : "community") as ContinuousAreaType,
     });
   }

front_end/src/components/conditional_tile/conditional_chart.tsx

@@ -146,7 +146,12 @@ const ConditionalChart: FC<Props> = ({
           ? [
               {
                 pmf: cdfToPmf(aggregateLatest.forecast_values),
-                cdf: aggregateLatest.forecast_values,
+                cdf: aggregateLatest.forecast_values.map((v) => {
+                  if (v === null) {
+                    throw new Error("Forecast values contain null values");
+                  }
+                  return v;
+                }),
                 type: "community" as ContinuousAreaType,
               },
             ]

front_end/src/components/forecast_maker/continuous_input/continuous_prediction_chart.tsx

@@ -133,7 +133,12 @@ const ContinuousPredictionChart: FC<Props> = ({
     if (showCP && latestAggLatest && isForecastActive(latestAggLatest)) {
       charts.push({
         pmf: cdfToPmf(latestAggLatest.forecast_values),
-        cdf: latestAggLatest.forecast_values,
+        cdf: latestAggLatest.forecast_values.map((v) => {
+          if (v === null) {
+            throw new Error("Forecast values contain null values");
+          }
+          return v;
+        }),
         type:
           question.status === QuestionStatus.CLOSED
             ? "community_closed"

front_end/src/components/forecast_maker/forecast_choice_option.tsx

@@ -28,6 +28,14 @@ import { getForecastPctDisplayValue } from "@/utils/formatters/prediction";
 import ForecastTextInput from "./forecast_text_input";
 import Tooltip from "../ui/tooltip";
 
+// ============================================
+// ANIMATION & OPACITY SETTINGS - ADJUST HERE
+// ============================================
+const GRADIENT_OPACITY_NORMAL = "1A"; // Normal state: ~10% (hex)
+const GRADIENT_OPACITY_HOVER = "2D"; // Hover state: ~18% (hex)
+const BORDER_WIDTH = "4px"; // Border width when animating
+export const ANIMATION_DURATION_MS = 1500; // Total animation duration in milliseconds
+
 type OptionResolution = {
   resolution: Resolution | null;
   type: "question" | "group_question";
@@ -52,6 +60,11 @@ type Props<T> = {
   onOptionClick?: (id: T) => void;
   withdrawn?: boolean;
   withdrawnEndTimeSec?: number | null;
+  isNewOption?: boolean;
+  showHighlight?: boolean;
+  isAnimating?: boolean;
+  onInteraction?: () => void;
+  rowRef?: React.RefObject<HTMLTableRowElement | null>;
 };
 
 const ForecastChoiceOption = <T = string,>({
@@ -73,9 +86,20 @@ const ForecastChoiceOption = <T = string,>({
   onOptionClick,
   withdrawn = false,
   withdrawnEndTimeSec = null,
+  isNewOption = false,
+  showHighlight = false,
+  isAnimating = false,
+  onInteraction,
+  rowRef,
 }: Props<T>) => {
   const t = useTranslations();
   const locale = useLocale();
+  const [isHovered, setIsHovered] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const inputDisplayValue =
     withdrawn && !isDirty
@@ -124,8 +148,11 @@ const ForecastChoiceOption = <T = string,>({
   const handleSliderForecastChange = useCallback(
     (value: number) => {
       onChange(id, value);
+      if (isNewOption) {
+        onInteraction?.();
+      }
     },
-    [id, onChange]
+    [id, onChange, isNewOption, onInteraction]
   );
   const handleInputChange = useCallback((value: string) => {
     setInputValue(value);
@@ -181,16 +208,35 @@ const ForecastChoiceOption = <T = string,>({
     </div>
   );
 
+  const gradientColor = getThemeColor(choiceColor);
+
   return (
     <>
       <tr
-        className={cn({
+        ref={rowRef}
+        className={cn("relative transition-all duration-300 ease-in-out", {
           "bg-orange-200 dark:bg-orange-200-dark": isRowDirty,
           "bg-blue-200  dark:bg-blue-200-dark": highlightedOptionId === id,
           "bg-gradient-to-r from-purple-200 to-gray-0 dark:from-purple-200-dark dark:to-gray-0-dark":
             isQuestionResolved || isGroupResolutionHighlighted,
         })}
         onClick={() => onOptionClick?.(id)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={{
+          ...(mounted &&
+            showHighlight && {
+              backgroundImage: `linear-gradient(to right, ${gradientColor}${isHovered ? GRADIENT_OPACITY_HOVER : GRADIENT_OPACITY_NORMAL} 0%, transparent 100%)`,
+            }),
+          ...(mounted &&
+            isNewOption && {
+              outline: isAnimating
+                ? `${BORDER_WIDTH} solid ${gradientColor}`
+                : "0px solid transparent",
+              outlineOffset: "-4px",
+              transition: `outline ${ANIMATION_DURATION_MS * 0.2}ms ease-in-out`,
+            }),
+        }}
       >
         <th className="w-full border-t border-gray-300 px-3 py-2 text-left text-sm font-medium leading-6 dark:border-gray-300-dark sm:w-auto sm:min-w-[10rem] sm:text-base">
           <div className="flex gap-2">
@@ -228,6 +274,9 @@ const ForecastChoiceOption = <T = string,>({
                     onFocus={() => {
                       setIsInputFocused(true);
                       onChange(id, defaultSliderValue);
+                      if (isNewOption) {
+                        onInteraction?.();
+                      }
                     }}
                     onBlur={() => setIsInputFocused(false)}
                     disabled={disabled}
@@ -249,7 +298,12 @@ const ForecastChoiceOption = <T = string,>({
               minValue={inputMin}
               maxValue={inputMax}
               value={inputValue}
-              onFocus={() => setIsInputFocused(true)}
+              onFocus={() => {
+                setIsInputFocused(true);
+                if (isNewOption) {
+                  onInteraction?.();
+                }
+              }}
               onBlur={() => setIsInputFocused(false)}
               disabled={disabled}
             />
@@ -263,10 +317,22 @@ const ForecastChoiceOption = <T = string,>({
         </td>
       </tr>
       <tr
-        className={cn("sm:hidden", {
-          "bg-orange-200 dark:bg-orange-200-dark": isRowDirty,
-        })}
+        className={cn(
+          "relative transition-all duration-300 ease-in-out sm:hidden",
+          {
+            "bg-orange-200 dark:bg-orange-200-dark": isRowDirty,
+          }
+        )}
         onClick={() => onOptionClick?.(id)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={
+          mounted && showHighlight
+            ? {
+                backgroundImage: `linear-gradient(to right, ${gradientColor}${isHovered ? GRADIENT_OPACITY_HOVER : GRADIENT_OPACITY_NORMAL} 0%, transparent 100%)`,
+              }
+            : undefined
+        }
       >
         <td
           className={cn(