Create a function to get the public options for LabelImage (#2171)

Issue: LEMS-2769 ## Test plan: `yarn test` Author: benchristel Reviewers: Myranae, benchristel, handeyeco, jeremywiebe Required Reviewers: Approved By: Myranae Checks: ✅ 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), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #2171
Khan · Jan 29, 2025 · a470c79 · a470c79
1 parent 0a5599d
commit a470c79
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 1 deletion.
diff --git a/.changeset/forty-meals-teach.md b/.changeset/forty-meals-teach.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+---
+
+Create a function to get the public options for the LabelImage widget
diff --git a/packages/perseus-core/src/index.ts b/packages/perseus-core/src/index.ts
@@ -115,3 +115,4 @@ export type * from "./widgets/logic-export.types";
 export {default as getOrdererPublicWidgetOptions} from "./widgets/orderer/orderer-util";
 export {default as getCategorizerPublicWidgetOptions} from "./widgets/categorizer/categorizer-util";
 export {default as getExpressionPublicWidgetOptions} from "./widgets/expression/expression-util";
+export {default as getLabelImagePublicWidgetOptions} from "./widgets/label-image/label-image-util";
diff --git a/packages/perseus-core/src/widgets/label-image/label-image-util.test.ts b/packages/perseus-core/src/widgets/label-image/label-image-util.test.ts
@@ -0,0 +1,46 @@
+import getLabelImagePublicWidgetOptions from "./label-image-util";
+
+import type {PerseusLabelImageWidgetOptions} from "@khanacademy/perseus-core";
+
+describe("getLabelImagePublicWidgetOptions", () => {
+    it("removes private fields", () => {
+        const options: PerseusLabelImageWidgetOptions = {
+            choices: ["right", "wrong"],
+            markers: [
+                {
+                    answers: ["right"],
+                    label: "",
+                    x: 0,
+                    y: 0,
+                },
+            ],
+            imageUrl: "",
+            imageHeight: 0,
+            imageWidth: 0,
+            imageAlt: "",
+            hideChoicesFromInstructions: false,
+            multipleAnswers: false,
+            static: false,
+        };
+
+        const publicWidgetOptions = getLabelImagePublicWidgetOptions(options);
+
+        expect(publicWidgetOptions).toEqual({
+            choices: ["right", "wrong"],
+            markers: [
+                {
+                    label: "",
+                    x: 0,
+                    y: 0,
+                },
+            ],
+            imageUrl: "",
+            imageHeight: 0,
+            imageWidth: 0,
+            imageAlt: "",
+            hideChoicesFromInstructions: false,
+            multipleAnswers: false,
+            static: false,
+        });
+    });
+});
diff --git a/packages/perseus-core/src/widgets/label-image/label-image-util.ts b/packages/perseus-core/src/widgets/label-image/label-image-util.ts
@@ -0,0 +1,41 @@
+import type {
+    PerseusLabelImageMarker,
+    PerseusLabelImageWidgetOptions,
+} from "@khanacademy/perseus-core";
+
+/**
+ * For details on the individual options, see the
+ * PerseusLabelImageWidgetOptions type
+ */
+type LabelImagePublicWidgetOptions = {
+    choices: PerseusLabelImageWidgetOptions["choices"];
+    imageUrl: PerseusLabelImageWidgetOptions["imageUrl"];
+    imageAlt: PerseusLabelImageWidgetOptions["imageAlt"];
+    imageHeight: PerseusLabelImageWidgetOptions["imageHeight"];
+    imageWidth: PerseusLabelImageWidgetOptions["imageWidth"];
+    markers: ReadonlyArray<LabelImageMarkerPublicData>;
+    hideChoicesFromInstructions: PerseusLabelImageWidgetOptions["hideChoicesFromInstructions"];
+    multipleAnswers: PerseusLabelImageWidgetOptions["multipleAnswers"];
+    static: PerseusLabelImageWidgetOptions["static"];
+};
+
+type LabelImageMarkerPublicData = Pick<
+    PerseusLabelImageMarker,
+    "x" | "y" | "label"
+>;
+
+export default function getLabelImagePublicWidgetOptions(
+    options: PerseusLabelImageWidgetOptions,
+): LabelImagePublicWidgetOptions {
+    return {
+        ...options,
+        markers: options.markers.map(getLabelImageMarkerPublicData),
+    };
+}
+
+function getLabelImageMarkerPublicData(
+    marker: PerseusLabelImageMarker,
+): LabelImageMarkerPublicData {
+    const {answers: _, ...publicData} = marker;
+    return publicData;
+}
diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
@@ -4,6 +4,7 @@ import type {SizeClass} from "./util/sizing-utils";
 import type {WidgetPromptJSON} from "./widget-ai-utils/prompt-types";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {
+    getLabelImagePublicWidgetOptions,
     Hint,
     PerseusAnswerArea,
     PerseusGraphType,
@@ -543,7 +544,8 @@ export type WidgetScorerFunction = (
 export type PublicWidgetOptionsFunction =
     | typeof getCategorizerPublicWidgetOptions
     | typeof getOrdererPublicWidgetOptions
-    | typeof getExpressionPublicWidgetOptions;
+    | typeof getExpressionPublicWidgetOptions
+    | typeof getLabelImagePublicWidgetOptions;
 
 export type WidgetExports<
     T extends React.ComponentType<any> & Widget = React.ComponentType<any>,

diff --git a/packages/perseus/src/widgets/label-image/label-image.tsx b/packages/perseus/src/widgets/label-image/label-image.tsx
@@ -6,6 +6,7 @@
  * knowledge by directly interacting with the image.
  */
 
+import {getLabelImagePublicWidgetOptions} from "@khanacademy/perseus-core";
 import {
     scoreLabelImageMarker,
     scoreLabelImage,
@@ -761,4 +762,5 @@ export default {
     // TODO(LEMS-2656): remove TS suppression
     // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusLabelImageUserInput'.
     scorer: scoreLabelImage,
+    getPublicWidgetOptions: getLabelImagePublicWidgetOptions,
 } satisfies WidgetExports<typeof LabelImageWithDependencies>;