[Interactive Graph Editor: Storybook] Add a story for Point graph typ…

…e start coords (#1482) ## Summary: There currently isn't a good way to manually test the start coords for Point graph in storybook, so I'm adding a story for that here. - Added story for point graph start coords in the interactive graph editor stories. - Shortened the names of the stories so they show up neater in the files structure. - Added `numPoints` to the stateful mafs graph useEffect so it appropriately updates the preview when the number of points is changed. - Fixed the builder for point graphs so the default coords value is undefined and it calculates the correct coords itself. It was defaulting to [0, 0] before, which really didn't work when there was a different number of points. - Added `points` graph to the flag utility so it uses the mafs version in storybook. Issue: https://khanacademy.atlassian.net/browse/LEMS-2209 ## Test plan: Storybook - http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-point - Change the number of points and confirm that it looks correct in both previews ## Screenshot <img width="1212" alt="Screenshot 2024-08-02 at 3 57 23 PM" src="https://github.com/user-attachments/assets/ed618517-efba-4f12-ac87-7e619d0489fc"> Author: nishasy Reviewers: Myranae, nishasy, jeremywiebe, benchristel, mark-fitzgerald Required Reviewers: Approved By: Myranae Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (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), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1482
Khan · Aug 5, 2024 · f920a4c · f920a4c
1 parent a35be71
commit f920a4c
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 60 deletions.
diff --git a/.changeset/grumpy-sheep-mate.md b/.changeset/grumpy-sheep-mate.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor: Storybook] Add a story for Point graph type start coords
diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -11,6 +11,7 @@ export const flags = {
         linear: true,
         "linear-system": true,
         ray: true,
+        point: true,
 
         // Locked figures flags
         "interactive-graph-locked-features-m2b": true,

diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
@@ -11,6 +11,7 @@ import {
     circleWithStartingCoordsQuestion,
     linearSystemWithStartingCoordsQuestion,
     linearWithStartingCoordsQuestion,
+    pointQuestionWithStartingCoords,
     polygonQuestion,
     quadraticWithStartingCoordsQuestion,
     rayWithStartingCoordsQuestion,
@@ -39,76 +40,75 @@ export default {
 
 const onChangeAction = action("onChange");
 
-export const InteractiveGraphSegmentWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={segmentWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphSegment = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={segmentWithStartingCoordsQuestion}
+        />
+    );
+};
 
-export const InteractiveGraphSegmentsWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={segmentsWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphSegments = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={segmentsWithStartingCoordsQuestion}
+        />
+    );
+};
 
-export const InteractiveGraphLinearWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={linearWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphLinear = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={linearWithStartingCoordsQuestion}
+        />
+    );
+};
 
-export const InteractiveGraphLinearSystemWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={linearSystemWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphLinearSystem = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={linearSystemWithStartingCoordsQuestion}
+        />
+    );
+};
 
-export const InteractiveGraphRayWithStartingCoords = (): React.ReactElement => {
+export const InteractiveGraphRay = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview
             question={rayWithStartingCoordsQuestion}
         />
     );
 };
 
-export const InteractiveGraphCircleWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={circleWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphCircle = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={circleWithStartingCoordsQuestion}
+        />
+    );
+};
 
-export const InteractiveGraphQuadraticWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={quadraticWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphQuadratic = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={quadraticWithStartingCoordsQuestion}
+        />
+    );
+};
 
-export const InteractiveGraphSinusoidWithStartingCoords =
-    (): React.ReactElement => {
-        return (
-            <EditorPageWithStorybookPreview
-                question={sinusoidWithStartingCoordsQuestion}
-            />
-        );
-    };
+export const InteractiveGraphSinusoid = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={sinusoidWithStartingCoordsQuestion}
+        />
+    );
+};
+
+export const InteractiveGraphPoint = (): React.ReactElement => (
+    <EditorPageWithStorybookPreview
+        question={pointQuestionWithStartingCoords}
+    />
+);
 
 export const InteractiveGraphPolygon = (): React.ReactElement => {
     return <EditorPageWithStorybookPreview question={polygonQuestion} />;

diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
@@ -97,6 +97,16 @@ export const pointQuestion: PerseusRenderer = interactiveGraphQuestionBuilder()
 export const pointQuestionWithDefaultCorrect: PerseusRenderer =
     interactiveGraphQuestionBuilder().withPoints(1).build();
 
+export const pointQuestionWithStartingCoords: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withPoints(2, {
+            startCoords: [
+                [0, 0],
+                [2, 2],
+            ],
+        })
+        .build();
+
 export const polygonQuestion: PerseusRenderer =
     interactiveGraphQuestionBuilder()
         .withContent(

diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts
@@ -637,7 +637,6 @@ describe("InteractiveGraphQuestionBuilder", () => {
                 correct: {
                     type: "point",
                     numPoints: "unlimited",
-                    coords: [[0, 0]],
                 },
             }),
         );

diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts
@@ -684,7 +684,7 @@ class PolygonGraphConfig implements InteractiveFigureConfig {
 
 class PointsGraphConfig implements InteractiveFigureConfig {
     private numPoints: number | "unlimited";
-    private coords: Coord[];
+    private coords?: Coord[];
     private startCoords?: Coord[];
 
     constructor(
@@ -695,7 +695,7 @@ class PointsGraphConfig implements InteractiveFigureConfig {
         },
     ) {
         this.numPoints = numPoints;
-        this.coords = options?.coords ?? [[0, 0]];
+        this.coords = options?.coords;
         this.startCoords = options?.startCoords;
     }
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx
@@ -95,7 +95,11 @@ export const StatefulMafsGraph = React.forwardRef<
         );
     }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
 
+    // Update the graph whenever any of the following values changes.
+    // This is necessary to keep the graph previews in sync with the updated
+    // graph settings within the interative graph editor.
     const numSegments = graph.type === "segment" ? graph.numSegments : null;
+    const numPoints = graph.type === "point" ? graph.numPoints : null;
     const numSides = graph.type === "polygon" ? graph.numSides : null;
     const snapTo = graph.type === "polygon" ? graph.snapTo : null;
     const showAngles = graph.type === "polygon" ? graph.showAngles : null;
@@ -113,6 +117,7 @@ export const StatefulMafsGraph = React.forwardRef<
         }
     }, [
         graph.type,
+        numPoints,
         numSegments,
         numSides,
         snapTo,