Annotation Config Form#

AnnotationConfigDialog (AnnotationConfigDialog.tsx) is the React form dialog used in the Phoenix Settings → Annotations page to create and edit annotation configurations. It supports three config types—Categorical, Continuous, and Freeform—whose schemas are defined as a discriminated union in types.ts.

Entry Point#

The dialog is mounted inside a DialogTrigger in SettingsAnnotationsPage.tsx. The parent page passes a handleAddAnnotationConfig callback that fires a GraphQL createAnnotationConfig (or update) mutation via Relay 1. The dialog itself is a pure form component; it holds no mutation logic.

Props#

Form Structure (react-hook-form)#

The form is wired with useForm with default values annotationType: "CATEGORICAL" and two empty values rows. Key mechanics:

• Type switcher — A RadioGroup bound to annotationType drives conditional rendering of type-specific fields 4. In edit mode the radio is isReadOnly, preventing type changes 5.
• Categorical categories — useFieldArray manages the values array (label + optional numeric score). Each row renders a label TextField with a required validation rule and a NumberField for score. The Add category button calls append({ label: "", score: null }) and Remove calls remove(index) 6. Placeholder labels cycle through the alphabet (A, B, C, …) 7.
• Continuous bounds — lowerBound and upperBound NumberFields appear for CONTINUOUS. upperBound has a custom validate rule that checks value > lowerBound and guards against NaN 8. The minValue of the max field is dynamically set from a watch("lowerBound") call 9.
• Optimization direction — A RadioGroup with values MAXIMIZE | MINIMIZE | NONE is shown for both CATEGORICAL and CONTINUOUS 10.
• Freeform — Only name and description fields render; no extra controls.

Validation#

All validation is inline via react-hook-form rules:

• name is required 11.
• Each category label is required 12.
• lowerBound is required for continuous configs 13.
• upperBound uses a custom validate function 8.

Errors surface via the <FieldError> component slotted below each input.

Submit Flow#

handleSubmit branches on data.annotationType, constructs a narrowly-typed config object (AnnotationConfigCategorical | AnnotationConfigContinuous | AnnotationConfigFreeform), then calls onAddAnnotationConfig 14. On success the dialog closes and a success toast fires; on error an error toast fires 15. The parent mutation is called with the config key lowercased to match the GraphQL CreateAnnotationConfigInput format 16.

Related Files#