Update types based on PR feedback

packages/perseus-editor/src/widgets/__stories__/label-image-editor.stories.tsx

@@ -4,7 +4,10 @@ import * as React from "react";
 
 import LabelImageEditor from "../label-image-editor";
 
-import type {MarkerAnswers} from "@khanacademy/perseus";
+import type {
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+} from "@khanacademy/perseus";
 
 type StoryArgs = Record<any, any>;
 
@@ -29,7 +32,7 @@ type State = {
     imageUrl: string;
     imageWidth: number;
     imageHeight: number;
-    markers: ReadonlyArray<MarkerAnswers>;
+    markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>;
 };
 
 class WithState extends React.Component<Empty, State> {

packages/perseus-editor/src/widgets/label-image-editor.tsx

@@ -17,7 +17,10 @@ import Behavior from "./label-image/behavior";
 import QuestionMarkers from "./label-image/question-markers";
 import SelectImage from "./label-image/select-image";
 
-import type {MarkerAnswers} from "@khanacademy/perseus";
+import type {
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+} from "@khanacademy/perseus";
 
 type Props = {
     // List of answer choices to label question image with.
@@ -28,7 +31,7 @@ type Props = {
     imageWidth: number;
     imageHeight: number;
     // The list of label markers on the question image.
-    markers: ReadonlyArray<MarkerAnswers>;
+    markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>;
     // Whether multiple answer choices may be selected for markers.
     multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
@@ -176,8 +179,10 @@ class LabelImageEditor extends React.Component<Props> {
         this.props.onChange({choices});
     };
 
-    handleMarkersChange: (markers: ReadonlyArray<MarkerAnswers>) => void = (
-        markers: ReadonlyArray<MarkerAnswers>,
+    handleMarkersChange: (
+        markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>,
+    ) => void = (
+        markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>,
     ) => {
         this.props.onChange({markers});
     };

packages/perseus-editor/src/widgets/label-image/__stories__/question-markers.stories.tsx

@@ -3,7 +3,10 @@ import * as React from "react";
 
 import QuestionMarkers from "../question-markers";
 
-import type {MarkerAnswers} from "@khanacademy/perseus";
+import type {
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+} from "@khanacademy/perseus";
 
 type StoryArgs = Record<any, any>;
 
@@ -31,7 +34,7 @@ const Wrapper = (props) => (
 class WithState extends React.Component<
     Record<any, any>,
     {
-        markers: ReadonlyArray<MarkerAnswers>;
+        markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>;
     }
 > {
     state = {

packages/perseus-editor/src/widgets/label-image/marker.tsx

@@ -14,16 +14,22 @@ import Option, {OptionGroup} from "../../components/dropdown-option";
 import FormWrappedTextField from "../../components/form-wrapped-text-field";
 import {gray17, gray85, gray98} from "../../styles/global-colors";
 
-import type {MarkerAnswers} from "@khanacademy/perseus";
-
-type Props = MarkerAnswers & {
-    // The list of possible answer choices.
-    choices: ReadonlyArray<string>;
-    // Callback for when any of the marker props are changed.
-    onChange: (marker: MarkerAnswers) => void;
-    // Callback to remove marker from the question image.
-    onRemove: () => void;
-};
+import type {
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+} from "@khanacademy/perseus";
+
+type Props = LabelImageMarker &
+    LabelImageMarkerScoringData & {
+        // The list of possible answer choices.
+        choices: ReadonlyArray<string>;
+        // Callback for when any of the marker props are changed.
+        onChange: (
+            marker: LabelImageMarker & LabelImageMarkerScoringData,
+        ) => void;
+        // Callback to remove marker from the question image.
+        onRemove: () => void;
+    };
 
 type State = {
     // Whether answer choices dropdown is shown, controlled by the user clicking

packages/perseus-editor/src/widgets/label-image/question-markers.tsx

@@ -3,16 +3,20 @@
  * label image with answers from list of choices.
  */
 
-import {Util, Dependencies, bodyXsmallBold} from "@khanacademy/perseus";
+import {
+    Util,
+    Dependencies,
+    bodyXsmallBold,
+    type LabelImageMarker,
+    type LabelImageMarkerScoringData,
+} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import {gray17, gray68} from "../../styles/global-colors";
 
 import Marker from "./marker";
 
-import type {MarkerAnswers} from "@khanacademy/perseus";
-
 type Props = {
     // The list of possible answers in a specific order.
     choices: ReadonlyArray<string>;
@@ -21,9 +25,11 @@ type Props = {
     imageWidth: number;
     imageHeight: number;
     // The list of markers placed on the question image.
-    markers: ReadonlyArray<MarkerAnswers>;
+    markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>;
     // Callback for when any of markers change.
-    onChange: (markers: ReadonlyArray<MarkerAnswers>) => void;
+    onChange: (
+        markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>,
+    ) => void;
 };
 
 export default class QuestionMarkers extends React.Component<Props> {

packages/perseus/src/index.ts

@@ -234,7 +234,10 @@ export type {
 } from "./perseus-types";
 export type {UserInputMap} from "./validation.types";
 export type {Coord} from "./interactive2/types";
-export type {MarkerAnswers} from "./widgets/label-image/types";
+export type {
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+} from "./widgets/label-image/types";
 
 /**
  * Multi-items

packages/perseus/src/perseus-types.ts

@@ -2,7 +2,10 @@
 // TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
 
 import type {Coord} from "./interactive2/types";
-import type {MarkerAnswers} from "./widgets/label-image/types";
+import type {
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+} from "./widgets/label-image/types";
 import type {Interval, vec} from "mafs";
 
 // Range is replaced within this file with Interval, but it is used elsewhere
@@ -1051,7 +1054,7 @@ export type PerseusLabelImageWidgetOptions = {
     // The width of the image
     imageWidth: number;
     // A list of markers to display on the image
-    markers: ReadonlyArray<MarkerAnswers>;
+    markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>;
     // Do not display answer choices in instructions
     hideChoicesFromInstructions: boolean;
     // Allow multiple answers per marker

packages/perseus/src/validation.types.ts

@@ -44,8 +44,9 @@ import type {
     PerseusGraphCorrectType,
 } from "./perseus-types";
 import type {
-    InteractiveMarkerType,
-    MarkerAnswers,
+    LabelImageMarker,
+    LabelImageMarkerScoringData,
+    LabelImageMarkerUserInput,
 } from "./widgets/label-image/types";
 import type {Relationship} from "./widgets/number-line/number-line";
 
@@ -142,11 +143,11 @@ export type PerseusInteractiveGraphRubric = {
 export type PerseusInteractiveGraphUserInput = PerseusGraphType;
 
 export type PerseusLabelImageScoringData = {
-    markers: ReadonlyArray<MarkerAnswers>;
+    markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerScoringData>;
 };
 
 export type PerseusLabelImageUserInput = {
-    markers: ReadonlyArray<Omit<InteractiveMarkerType, "answers">>;
+    markers: ReadonlyArray<LabelImageMarker & LabelImageMarkerUserInput>;
 };
 
 export type PerseusMatcherRubric = PerseusMatcherWidgetOptions;

packages/perseus/src/widgets/label-image/label-image.tsx

@@ -27,7 +27,7 @@ import {HideAnswersToggle} from "./hide-answers-toggle";
 import Marker from "./marker";
 import scoreLabelImage, {scoreMarker} from "./score-label-image";
 
-import type {InteractiveMarkerType} from "./types";
+import type {LabelImageFullMarker} from "./types";
 import type {DependencyProps} from "../../dependencies";
 import type {ChangeableProps} from "../../mixins/changeable";
 import type {PerseusLabelImageWidgetOptions} from "../../perseus-types";
@@ -75,7 +75,7 @@ type LabelImageProps = ChangeableProps &
     Omit<PerseusLabelImageWidgetOptions, "markers"> & {
         apiOptions: APIOptions;
         // The list of label markers on the question image.
-        markers: ReadonlyArray<InteractiveMarkerType>;
+        markers: ReadonlyArray<LabelImageFullMarker>;
         // Whether the question has been answered by the user.
         questionCompleted: boolean;
         // preferred placement for popover (preference, not MUST)

packages/perseus/src/widgets/label-image/marker.tsx

@@ -16,12 +16,12 @@ import {iconCheck, iconChevronDown, iconMinus} from "../../icon-paths";
 
 import {AnswerPill} from "./answer-pill";
 
-import type {InteractiveMarkerType} from "./types";
+import type {LabelImageFullMarker} from "./types";
 import type {IconType} from "../../components/icon";
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {CSSProperties} from "aphrodite";
 
-type Props = InteractiveMarkerType & {
+type Props = LabelImageFullMarker & {
     // Whether this marker has been selected by user.
     showSelected: boolean;
     // Whether this marker should pulsate to draw user attention.

packages/perseus/src/widgets/label-image/score-label-image.ts

@@ -1,4 +1,4 @@
-import type {InteractiveMarkerType} from "./types";
+import type {LabelImageFullMarker} from "./types";
 import type {PerseusScore} from "../../types";
 import type {
     PerseusLabelImageScoringData,
@@ -14,7 +14,7 @@ type InteractiveMarkerScore = {
 };
 
 export function scoreMarker(
-    marker: InteractiveMarkerType,
+    marker: LabelImageFullMarker,
 ): InteractiveMarkerScore {
     const score = {
         hasAnswers: false,

packages/perseus/src/widgets/label-image/types.ts

@@ -1,21 +1,25 @@
-// Base marker, with the props that are set by the editor.
-export type MarkerAnswers = {
-    // The list of correct answers expected for the marker. Often only one but can have multiple
-    answers: ReadonlyArray<string>;
+export type LabelImageMarker = {
+    // Reveal the correctness state of the user selected answers for the marker.
+    showCorrectness?: "correct" | "incorrect";
+    focused?: boolean;
     // Translatable Text; The text to show for the marker. Not displayed directly to the user
     label: string;
     // The marker coordinates on the question image as percent of image size.
     x: number;
     y: number;
 };
 
-export type MarkerUserInput = {
+export type LabelImageMarkerScoringData = {
+    // The list of correct answers expected for the marker. Often only one but can have multiple
+    answers: ReadonlyArray<string>;
+};
+
+export type LabelImageMarkerUserInput = {
     // The user selected list of answers, used to grade the question.
     selected?: ReadonlyArray<string>;
-    // Reveal the correctness state of the user selected answers for the marker.
-    showCorrectness?: "correct" | "incorrect";
-    focused?: boolean;
 };
 
 // Additional props that are set when user interacts with the marker.
-export type InteractiveMarkerType = MarkerAnswers & MarkerUserInput;
+export type LabelImageFullMarker = LabelImageMarker &
+    LabelImageMarkerScoringData &
+    LabelImageMarkerUserInput;