[Interactive Graph] Update the builder with all currently migrated gr…

…aph types (#1373) ## Summary: I updated the builder utility with all currently migrated graph types. This meant adding linear, linear system, ray, quadratic, and sinusoid. I also added the ability to give them all starting coords. This is necessary to prove that the starting coords can be set at all. Now that it's clear they can be set, we can move onto adding the ability to edit these coordinates in the editor UI in the next task. NOTE: The task also includes start coords for the Points graph type, but that doesn't seem to have the mafs flag on in storybook yet, so I didn't include that here. Issue: https://khanacademy.atlassian.net/browse/LEMS-2051 ## Test plan: Storybook - [segment](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-segment-with-starting-coords) - [multiple segments](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-segments-with-starting-coords) - [linear](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-linear-with-starting-coords) - [linear system](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-linear-system-with-starting-coords) - [ray](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-ray-with-starting-coords) - [circle](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-circle-with-starting-coords) - [quadratic](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-quadratic-with-starting-coords) - [sinusoid](http://localhost:6006/?path=/story/perseuseditor-editorpage--interactive-graph-sinusoid-with-starting-coords) ## Storybook previews showing custom start coords | segment | segments | linear | | --- | --- | --- | | <img width="495" alt="Screenshot 2024-06-21 at 5 08 25 PM" src="https://github.com/Khan/perseus/assets/13231763/c41f8d36-f515-44d4-85d7-75fa2f9eb55c"> | <img width="483" alt="Screenshot 2024-06-21 at 5 08 31 PM" src="https://github.com/Khan/perseus/assets/13231763/42414e10-dbe5-4485-a070-40cdbf8f4e72"> | <img width="483" alt="Screenshot 2024-06-21 at 5 08 36 PM" src="https://github.com/Khan/perseus/assets/13231763/7d54a055-6d3e-45da-92db-2a97ba0bbb37"> | | linear system | ray | circle | | <img width="481" alt="Screenshot 2024-06-21 at 5 08 40 PM" src="https://github.com/Khan/perseus/assets/13231763/120ca542-3878-4c1f-b87d-201710ebe4e1"> | <img width="486" alt="Screenshot 2024-06-21 at 5 08 44 PM" src="https://github.com/Khan/perseus/assets/13231763/7aafacfb-875c-4b27-82a8-1aad9c8f96fd"> | <img width="479" alt="Screenshot 2024-06-21 at 5 08 49 PM" src="https://github.com/Khan/perseus/assets/13231763/16ea2144-f9ff-4a47-80bc-f38e3bbf2d41"> | | quadratic | sinusoid | | | <img width="483" alt="Screenshot 2024-06-21 at 5 08 53 PM" src="https://github.com/Khan/perseus/assets/13231763/10444f80-a6dc-49a9-b26c-0409027cf2bd"> | <img width="481" alt="Screenshot 2024-06-21 at 5 08 58 PM" src="https://github.com/Khan/perseus/assets/13231763/d25e9d0f-ebab-4270-925e-4d66611650f7"> | | Author: nishasy Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1373
Khan · Jun 24, 2024 · 9615106 · 9615106
1 parent a80ce70
commit 9615106
Show file tree

Hide file tree

Showing 6 changed files with 710 additions and 9 deletions.
diff --git a/.changeset/short-badgers-wonder.md b/.changeset/short-badgers-wonder.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph] Update the interactive graph builder with all currently migrated graph types
diff --git a/packages/perseus-editor/src/__stories__/editor-page.stories.tsx b/packages/perseus-editor/src/__stories__/editor-page.stories.tsx
@@ -7,7 +7,17 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import {EditorPage} from "..";
-import {segmentWithLockedFigures} from "../../../perseus/src/widgets/__testdata__/interactive-graph.testdata";
+import {
+    circleWithStartingCoordsQuestion,
+    linearSystemWithStartingCoordsQuestion,
+    linearWithStartingCoordsQuestion,
+    quadraticWithStartingCoordsQuestion,
+    rayWithStartingCoordsQuestion,
+    segmentWithLockedFigures,
+    segmentWithStartingCoordsQuestion,
+    segmentsWithStartingCoordsQuestion,
+    sinusoidWithStartingCoordsQuestion,
+} from "../../../perseus/src/widgets/__testdata__/interactive-graph.testdata";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
@@ -32,6 +42,77 @@ export const Demo = (): React.ReactElement => {
     return <EditorPageWithStorybookPreview />;
 };
 
+export const InteractiveGraphSegmentWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={segmentWithStartingCoordsQuestion}
+            />
+        );
+    };
+
+export const InteractiveGraphSegmentsWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={segmentsWithStartingCoordsQuestion}
+            />
+        );
+    };
+
+export const InteractiveGraphLinearWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={linearWithStartingCoordsQuestion}
+            />
+        );
+    };
+
+export const InteractiveGraphLinearSystemWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={linearSystemWithStartingCoordsQuestion}
+            />
+        );
+    };
+
+export const InteractiveGraphRayWithStartingCoords = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={rayWithStartingCoordsQuestion}
+        />
+    );
+};
+
+export const InteractiveGraphCircleWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={circleWithStartingCoordsQuestion}
+            />
+        );
+    };
+
+export const InteractiveGraphQuadraticWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={quadraticWithStartingCoordsQuestion}
+            />
+        );
+    };
+
+export const InteractiveGraphSinusoidWithStartingCoords =
+    (): React.ReactElement => {
+        return (
+            <EditorPageWithStorybookPreview
+                question={sinusoidWithStartingCoordsQuestion}
+            />
+        );
+    };
+
 export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview

diff --git a/packages/perseus/src/widgets/__stories__/interactive-graph-regression.stories.tsx b/packages/perseus/src/widgets/__stories__/interactive-graph-regression.stories.tsx
@@ -153,7 +153,7 @@ export const MafsWithMultipleSegments = (
     args: StoryArgs,
 ): React.ReactElement => (
     <MafsQuestionRenderer
-        question={interactiveGraphQuestionBuilder().withSegments(3).build()}
+        question={interactiveGraphQuestionBuilder().withNumSegments(3).build()}
     />
 );
 

diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
@@ -1091,6 +1091,80 @@ export const segmentQuestion: PerseusRenderer = {
     },
 };
 
+export const segmentWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withSegments([
+            [
+                [0, 0],
+                [2, 2],
+            ],
+        ])
+        .build();
+
+export const segmentsWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withSegments([
+            [
+                [0, 0],
+                [2, 2],
+            ],
+            [
+                [0, 2],
+                [2, 0],
+            ],
+        ])
+        .build();
+
+export const linearWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withLinear([
+            [3, 0],
+            [3, 3],
+        ])
+        .build();
+
+export const linearSystemWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withLinearSystem([
+            [
+                [-3, 0],
+                [-3, 3],
+            ],
+            [
+                [3, 0],
+                [3, 3],
+            ],
+        ])
+        .build();
+
+export const rayWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withRay([
+            [3, 0],
+            [3, 3],
+        ])
+        .build();
+
+export const circleWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder().withCircle([9, 9]).build();
+
+export const quadraticWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withQuadratic([
+            [-1, -1],
+            [0, 0],
+            [1, -1],
+        ])
+        .build();
+
+export const sinusoidWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withSinusoid([
+            [0, 0],
+            [1, -1],
+        ])
+        .build();
+
 export const segmentWithLockedPointsQuestion: PerseusRenderer = {
     content:
         "Line segment $\\overline{OG}$ is rotated $180^\\circ$ about the point $(-2,4)$.  \n\n**Draw the image of this rotation using the interactive graph.**\n\n*The direction of a rotation by a positive angle is counter-clockwise.* \n\n[[☃ interactive-graph 1]]\n\n",