Refactor LabelImage to separate out answers from userInput into scoringData (#1965)

## Summary:
This PR updates LabelImage so that answers are no longer available in the userInput object. This allows the scoring function to have both a userInput parameter and a scoringData parameter to keep answers separate from the user's input with the goal of supporting server side scoring.

PerseusLabelImageMarker and MarkerType contained the same properties. As such, I simplified the code a bit and removed PerseusLabelImageMarker.

In addition, several locations were referencing the wrong types, so those were updated to reference the correct ones. Also, new tests were added confirming the output of `getUserInput` does not contain answers, that `scorePerseusItem` returns the correct results, and that the widget renders correctly if answers are not present in the JSON blob.

Issue: LEMS-2440

## Test plan:
- Confirm all checks pass
- Confirm widget still works as expected

Author: Myranae

Reviewers: Myranae, handeyeco, jeremywiebe, catandthemachines

Required Reviewers:

Approved By: catandthemachines, jeremywiebe

Checks: ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x)

Pull Request URL: #1965

Author: Myranae

.changeset/many-penguins-hug.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-editor": patch
+---
+
+Refactor the LabelImage widget to separate out answers from userInput into scoringData

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

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

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

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

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

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

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

@@ -14,13 +14,15 @@ 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 {MarkerType} from "@khanacademy/perseus";
+import type {PerseusLabelImageWidgetOptions} from "@khanacademy/perseus";
 
-type Props = MarkerType & {
+type Props = PerseusLabelImageWidgetOptions["markers"][number] & {
     // The list of possible answer choices.
-    choices: ReadonlyArray<string>;
+    choices: PerseusLabelImageWidgetOptions["choices"];
     // Callback for when any of the marker props are changed.
-    onChange: (marker: MarkerType) => void;
+    onChange: (
+        marker: PerseusLabelImageWidgetOptions["markers"][number],
+    ) => void;
     // Callback to remove marker from the question image.
     onRemove: () => void;
 };

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

@@ -11,7 +11,7 @@ import {gray17, gray68} from "../../styles/global-colors";
 
 import Marker from "./marker";
 
-import type {MarkerType} from "@khanacademy/perseus";
+import type {PerseusLabelImageWidgetOptions} from "@khanacademy/perseus";
 
 type Props = {
     // The list of possible answers in a specific order.
@@ -21,9 +21,9 @@ type Props = {
     imageWidth: number;
     imageHeight: number;
     // The list of markers placed on the question image.
-    markers: ReadonlyArray<MarkerType>;
+    markers: PerseusLabelImageWidgetOptions["markers"];
     // Callback for when any of markers change.
-    onChange: (markers: ReadonlyArray<MarkerType>) => void;
+    onChange: (markers: PerseusLabelImageWidgetOptions["markers"]) => void;
 };
 
 export default class QuestionMarkers extends React.Component<Props> {

packages/perseus/src/index.ts

@@ -229,6 +229,7 @@ export type {
     PerseusInputNumberWidgetOptions,
     PerseusInteractiveGraphWidgetOptions,
     PerseusItem,
+    PerseusLabelImageWidgetOptions,
     PerseusPhetSimulationWidgetOptions,
     PerseusPlotterWidgetOptions,
     PerseusPythonProgramWidgetOptions,
@@ -241,7 +242,6 @@ export type {
 } from "./perseus-types";
 export type {UserInputMap} from "./validation.types";
 export type {Coord} from "./interactive2/types";
-export type {MarkerType} from "./widgets/label-image/types";
 export type {
     RendererPromptJSON,
     WidgetPromptJSON,

packages/perseus/src/validation.types.ts

@@ -43,7 +43,6 @@ import type {
     PerseusRadioChoice,
     PerseusGraphCorrectType,
 } from "./perseus-types";
-import type {InteractiveMarkerType} from "./widgets/label-image/types";
 import type {Relationship} from "./widgets/number-line/number-line";
 
 export type UserInputStatus = "correct" | "incorrect" | "incomplete";
@@ -130,12 +129,18 @@ export type PerseusInteractiveGraphRubric = {
 
 export type PerseusInteractiveGraphUserInput = PerseusGraphType;
 
-/* TODO(LEMS-2440): Should be removed or refactored. Grading info may need
-    to be moved to the rubric from userInput. */
-export type PerseusLabelImageRubric = Empty;
+export type PerseusLabelImageScoringData = {
+    markers: ReadonlyArray<{
+        answers: ReadonlyArray<string>;
+        label: string;
+    }>;
+};
 
 export type PerseusLabelImageUserInput = {
-    markers: ReadonlyArray<InteractiveMarkerType>;
+    markers: ReadonlyArray<{
+        selected?: ReadonlyArray<string>;
+        label: string;
+    }>;
 };
 
 export type PerseusMatcherRubric = PerseusMatcherWidgetOptions;
@@ -237,7 +242,7 @@ export type Rubric =
     | PerseusGrapherRubric
     | PerseusInputNumberRubric
     | PerseusInteractiveGraphRubric
-    | PerseusLabelImageRubric
+    | PerseusLabelImageScoringData
     | PerseusMatcherRubric
     | PerseusMatrixRubric
     | PerseusNumberLineScoringData

packages/perseus/src/widgets/label-image/__tests__/label-image.test.ts

@@ -6,10 +6,15 @@ import {
     testDependenciesV2,
 } from "../../../../../../testing/test-dependencies";
 import * as Dependencies from "../../../dependencies";
+import {scorePerseusItemTesting} from "../../../util/test-utils";
 import {renderQuestion} from "../../__testutils__/renderQuestion";
 import {LabelImage} from "../label-image";
 
-import {textQuestion} from "./label-image.testdata";
+import {
+    shortTextQuestion,
+    textQuestion,
+    textWithoutAnswersQuestion,
+} from "./label-image.testdata";
 
 import type {UserEvent} from "@testing-library/user-event";
 
@@ -717,4 +722,110 @@ describe("LabelImage", function () {
             });
         });
     });
+
+    describe("getUserInput", () => {
+        it("should return the current user input on initial render", () => {
+            // render component
+            const {renderer} = renderQuestion(textQuestion);
+
+            const userInput = renderer.getUserInputMap();
+
+            expect(userInput).toEqual({
+                "label-image 1": {
+                    markers: [
+                        {
+                            label: "The fourth unlabeled bar line.",
+                            selected: undefined,
+                        },
+                        {
+                            label: "The third unlabeled bar line.",
+                            selected: undefined,
+                        },
+                        {
+                            label: "The second unlabeled bar line.",
+                            selected: undefined,
+                        },
+                        {
+                            label: "The first unlabeled bar line.",
+                            selected: undefined,
+                        },
+                    ],
+                },
+            });
+        });
+    });
+
+    describe("scorePerseusItem", () => {
+        it("should be invalid on first render", () => {
+            // Arrange
+            const {renderer} = renderQuestion(textQuestion);
+
+            // Act
+            const score = scorePerseusItemTesting(
+                textQuestion,
+                renderer.getUserInputMap(),
+            );
+
+            // Assert
+            expect(score).toHaveInvalidInput();
+        });
+
+        it("can be answered correctly when correct option is picked for the marker", async () => {
+            // Arrange
+            const {renderer} = renderQuestion(shortTextQuestion);
+
+            // Act
+            const markerButton = screen.getByRole("button", {
+                name: "The fourth unlabeled bar line.",
+            });
+            await userEvent.click(markerButton);
+
+            const choice = screen.getByRole("option", {name: "SUVs"});
+            await userEvent.click(choice);
+
+            const score = scorePerseusItemTesting(
+                shortTextQuestion,
+                renderer.getUserInputMap(),
+            );
+
+            // Assert
+            expect(score).toHaveBeenAnsweredCorrectly();
+        });
+
+        it("can be answered incorrectly when incorrect option picked for the marker", async () => {
+            // Arrange
+            const {renderer} = renderQuestion(shortTextQuestion);
+
+            // Act
+            const markerButton = screen.getByRole("button", {
+                name: "The fourth unlabeled bar line.",
+            });
+            await userEvent.click(markerButton);
+
+            const choice = screen.getByRole("option", {name: "Trucks"});
+            await userEvent.click(choice);
+
+            const score = scorePerseusItemTesting(
+                shortTextQuestion,
+                renderer.getUserInputMap(),
+            );
+
+            // Assert
+            expect(score).toHaveBeenAnsweredIncorrectly();
+        });
+    });
+
+    describe("textWithoutAnswersQuestion", () => {
+        it("should render the widget without answers", async () => {
+            // Arrange
+            renderQuestion(textWithoutAnswersQuestion);
+
+            // Act and Assert
+            const markerButton = screen.getByRole("button", {
+                name: "The fourth unlabeled bar line.",
+            });
+            // Confirms the widget renders and that marker buttons are present
+            await userEvent.click(markerButton);
+        });
+    });
 });