Enable interactive graphs to take answerless props (#2254)

To prevent cheating, we want to avoid sending exercise answers to the frontend
before the learner submits their response. This PR ensures that interactive
graphs can render without answers.

The types prove that `props.correct` is not used unless the `static` prop is
true. Static graphs are not answerable or interactable, and always display the
data in the `correct` prop.

Issue: LEMS-2853

## Test plan:

`yarn test`

Author: benchristel

Reviewers: benchristel, handeyeco

Required Reviewers:

Approved By: handeyeco

Checks: ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish npm snapshot (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: #2254

Author: benchristel

.changeset/green-beers-fold.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-core": patch
+---
+
+Internal: test that Interactive Graph widgets can render with answerless data

packages/perseus-core/src/index.ts

@@ -130,7 +130,10 @@ export {default as getCategorizerPublicWidgetOptions} from "./widgets/categorize
 export {default as getCSProgramPublicWidgetOptions} from "./widgets/cs-program/cs-program-util";
 export {default as getExpressionPublicWidgetOptions} from "./widgets/expression/expression-util";
 export {default as getGrapherPublicWidgetOptions} from "./widgets/grapher/grapher-util";
-export {default as getInteractiveGraphPublicWidgetOptions} from "./widgets/interactive-graph/interactive-graph-util";
+export {
+    default as getInteractiveGraphPublicWidgetOptions,
+    type InteractiveGraphPublicWidgetOptions,
+} from "./widgets/interactive-graph/interactive-graph-util";
 export {default as getLabelImagePublicWidgetOptions} from "./widgets/label-image/label-image-util";
 export {default as getSorterPublicWidgetOptions} from "./widgets/sorter/sorter-util";
 export {default as getDropdownPublicWidgetOptions} from "./widgets/dropdown/dropdown-util";

packages/perseus-core/src/widgets/interactive-graph/interactive-graph-util.ts

@@ -1,6 +1,6 @@
 import type {PerseusInteractiveGraphWidgetOptions} from "@khanacademy/perseus-core";
 
-type InteractiveGraphPublicWidgetOptions = Pick<
+export type InteractiveGraphPublicWidgetOptions = Pick<
     PerseusInteractiveGraphWidgetOptions,
     | "step"
     | "gridStep"

packages/perseus/src/widgets/interactive-graph.tsx

@@ -33,6 +33,7 @@ import type {
     PerseusGraphTypeSegment,
     PerseusInteractiveGraphWidgetOptions,
     GraphRange,
+    InteractiveGraphPublicWidgetOptions,
     LockedFigure,
     PerseusImageBackground,
     MarkingsType,
@@ -151,10 +152,12 @@ type RenderProps = {
      */
     graph: PerseusGraphType;
     /**
-     * The correct kind of graph, if being used to select function type
+     * The correct answer for this widget. Will be undefined if the graph is
+     * being provided answerless data (e.g. because the learner has not yet
+     * submitted their guess).
      */
     // TODO(LEMS-2344): make the type of `correct` more specific
-    correct: PerseusGraphType;
+    correct?: PerseusGraphType;
     /**
      * Shapes (points, chords, etc) displayed on the graph that cannot be moved
      * by the user.
@@ -193,6 +196,11 @@ type DefaultProps = {
     PerseusInteractiveGraphRubric
 > satisfies PropsFor<typeof InteractiveGraph>;
 
+0 as any as WidgetProps<
+    InteractiveGraphPublicWidgetOptions,
+    PerseusInteractiveGraphRubric
+> satisfies PropsFor<typeof InteractiveGraph>;
+
 // TODO: there's another, very similar getSinusoidCoefficients function
 // they should probably be merged
 function getSinusoidCoefficients(

packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Interactive Graph interactive-graph widget A none-type graph renders predictably: first render 1`] = `
+exports[`Interactive Graph A none-type graph renders predictably: first render 1`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -1038,7 +1038,7 @@ exports[`Interactive Graph interactive-graph widget A none-type graph renders pr
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: after interaction 1`] = `
+exports[`Interactive Graph question Should render predictably: after interaction 1`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -1450,7 +1450,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: after interaction 2`] = `
+exports[`Interactive Graph question Should render predictably: after interaction 2`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -1846,7 +1846,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: after interaction 3`] = `
+exports[`Interactive Graph question Should render predictably: after interaction 3`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -2075,7 +2075,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: after interaction 4`] = `
+exports[`Interactive Graph question Should render predictably: after interaction 4`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -2352,7 +2352,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: first render 1`] = `
+exports[`Interactive Graph question Should render predictably: first render 1`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -2764,7 +2764,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: first render 2`] = `
+exports[`Interactive Graph question Should render predictably: first render 2`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -3160,7 +3160,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: first render 3`] = `
+exports[`Interactive Graph question Should render predictably: first render 3`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"
@@ -3389,7 +3389,7 @@ exports[`Interactive Graph interactive-graph widget question Should render predi
 </div>
 `;
 
-exports[`Interactive Graph interactive-graph widget question Should render predictably: first render 4`] = `
+exports[`Interactive Graph question Should render predictably: first render 4`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive"

packages/perseus/src/widgets/interactive-graphs/interactive-graph-regression.stories.tsx

@@ -1,3 +1,4 @@
+import {splitPerseusItem} from "@khanacademy/perseus-core";
 import * as React from "react";
 
 import {ApiOptions} from "../../perseus-api";
@@ -257,6 +258,12 @@ export const MafsWithPiTicks: Story = {
     },
 };
 
+export const MafsWithAnswerlessData: Story = {
+    args: {
+        question: splitPerseusItem(interactiveGraphQuestionBuilder().build()),
+    },
+};
+
 function MafsQuestionRenderer(props: {question: PerseusRenderer}) {
     const {question} = props;
     return (