Draft: Add auto-sum-to-100 button to multi choice questions

components/predict-form/PredictProvider.tsx

@@ -26,6 +26,8 @@ const optionSchema = z.object({
     .optional(),
 })
 
+export type OptionType = z.infer<typeof optionSchema>
+
 const unifiedPredictFormSchema = z
   .object({
     question: z

components/predict-form/question-types/MultiChoiceQuestion.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import MultiChoiceQuestion from "./MultiChoiceQuestion"
+import { PredictProvider } from "../PredictProvider"
+
+describe("MultiChoiceQuestion", () => {
+  const mockQuestion = {
+    id: "test-question",
+    type: "multiple-choice",
+    title: "Test Question",
+    options: [
+      { id: "option-1", text: "Option 1" },
+      { id: "option-2", text: "Option 2" },
+      { id: "option-3", text: "Option 3" },
+    ],
+  }
+
+  const defaultProps = {
+    question: mockQuestion,
+    predictions: {},
+    onChange: jest.fn(),
+    onSubmit: jest.fn(),
+    highlightResolveBy: false,
+  }
+
+  const renderWithProvider = (props = {}) => {
+    return render(
+      <PredictProvider>
+        <MultiChoiceQuestion {...defaultProps} {...props} />
+      </PredictProvider>,
+    )
+  }
+
+  it("automatically adjusts values to maintain 100 total", () => {
+    const onChange = jest.fn()
+    renderWithProvider({ onChange })
+
+    const inputs = screen.getAllByRole("spinbutton")
+    fireEvent.change(inputs[0], { target: { value: "60" } })
+    fireEvent.change(inputs[1], { target: { value: "30" } })
+
+    expect(onChange).toHaveBeenLastCalledWith({
+      "option-1": 60,
+      "option-2": 30,
+      "option-3": 10,
+    })
+  })
+})

components/predict-form/question-types/MultiChoiceQuestion.tsx

@@ -8,6 +8,9 @@ import { PredictButton } from "../PredictButton"
 import { QuestionOption } from "../QuestionOption"
 import { ResolveBy } from "../ResolveBy"
 import { QuestionTypeProps } from "./question-types"
+import { OptionType } from "../PredictProvider"
+import { normalizeOptionsToHundred } from "../../../lib/_utils_multiple-choice"
+import { formatDecimalNicely } from "../../../lib/_utils_common"
 
 export default function MultiChoiceQuestion({
   small,
@@ -17,7 +20,7 @@ export default function MultiChoiceQuestion({
   onSubmit,
   highlightResolveBy,
 }: QuestionTypeProps) {
-  const { trigger, control } = useFormContext()
+  const { trigger, control, watch, setValue } = useFormContext()
 
   const MIN_OPTIONS = 2
   const MAX_OPTIONS = 100
@@ -40,6 +43,20 @@ export default function MultiChoiceQuestion({
     [remove],
   )
 
+  const options = watch("options") as OptionType[]
+  const normalizeToHundred = useCallback(() => {
+    const normalizedOptions = normalizeOptionsToHundred(options)
+
+    normalizedOptions.forEach((option, index) => {
+      setValue(
+        `options.${index}.forecast`,
+        formatDecimalNicely(option.forecast || 0, 0),
+      )
+    })
+
+    void trigger("options")
+  }, [options, setValue, trigger])
+
   return (
     <div
       className={`flex flex-col gap-4 flex-wrap justify-between ${embedded ? "flex-col" : "flex-row"}`}
@@ -60,24 +77,34 @@ export default function MultiChoiceQuestion({
           />
         ))}
 
-        {fields.length < MAX_OPTIONS && (
-          <div className="flex flex-row justify-between items-center gap-2">
-            <div className="flex-grow">
+        <div className="flex flex-row justify-between items-center gap-2">
+          <div className="flex-grow flex gap-2">
+            <button
+              onClick={(e) => {
+                e.preventDefault()
+                addOption()
+              }}
+              className="btn btn-sm text-neutral-500"
+            >
+              <PlusIcon className="w-5 h-5" />
+              Add option
+            </button>
+
+            {
               <button
                 onClick={(e) => {
                   e.preventDefault()
-                  addOption()
+                  normalizeToHundred()
                 }}
                 className="btn btn-sm text-neutral-500"
               >
-                <PlusIcon className="w-5 h-5" />
-                Add option
+                Sum to 100%
               </button>
-            </div>
-            <div className=""></div>
-            <div className=""></div>
+            }
           </div>
-        )}
+          <div className=""></div>
+          <div className=""></div>
+        </div>
 
         <FormCheckbox
           onSubmit={onSubmit}
@@ -86,7 +113,7 @@ export default function MultiChoiceQuestion({
           helpText="If selected, you can resolve multiple options to YES. Otherwise, you can only resolve a single option to YES (and an OTHER option is added by default)."
           labelClassName="text-sm"
           onChange={() => {
-            void trigger("options") // needed because our superRefine rule for summing to 100% isn't automatically revalidated otherwise
+            void trigger("options")
           }}
         />
       </div>

lib/_utils_multiple-choice.ts

@@ -0,0 +1,41 @@
+import { OptionType } from "../components/predict-form/PredictProvider"
+
+export function normalizeOptionsToHundred(options: OptionType[]) {
+  const optionsCopy = [...options]
+  const optionsWithForecasts = optionsCopy.filter(
+    ({ forecast }) => forecast !== undefined && !Number.isNaN(forecast),
+  ) as Array<OptionType & { forecast: number }>
+  const optionsWithoutForecasts = optionsCopy.filter(
+    ({ forecast }) => forecast === undefined || Number.isNaN(forecast),
+  )
+
+  const allOptionsHaveForecasts =
+    optionsWithForecasts.length === optionsCopy.length
+  const totalPercentage = optionsWithForecasts.reduce(
+    (acc, option) => acc + option.forecast,
+    0,
+  )
+
+  if (allOptionsHaveForecasts) {
+    optionsWithForecasts.forEach((option, index) => {
+      const scaledValue = (option.forecast * 100) / totalPercentage
+      optionsCopy[index] = {
+        ...option,
+        forecast: scaledValue,
+      }
+    })
+  } else {
+    const remainingMass = Math.max(0, 100 - totalPercentage)
+    const massPerOption = remainingMass / optionsWithoutForecasts.length
+
+    optionsWithoutForecasts.forEach((option) => {
+      const originalIndex = options.findIndex((o) => o === option)
+      optionsCopy[originalIndex] = {
+        ...option,
+        forecast: massPerOption,
+      }
+    })
+  }
+
+  return optionsCopy
+}