Skip to content

Commit 9615106

Browse files
nishasynishasy
authored
[Interactive Graph] Update the builder with all currently migrated graph 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
1 parent a80ce70 commit 9615106

File tree

6 files changed

+710
-9
lines changed

6 files changed

+710
-9
lines changed

‎.changeset/short-badgers-wonder.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@khanacademy/perseus": patch
3+
"@khanacademy/perseus-editor": patch
4+
---
5+
6+
[Interactive Graph] Update the interactive graph builder with all currently migrated graph types

‎packages/perseus-editor/src/__stories__/editor-page.stories.tsx

+82-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,17 @@ import {StyleSheet} from "aphrodite";
77
import * as React from "react";
88

99
import {EditorPage} from "..";
10-
import {segmentWithLockedFigures} from "../../../perseus/src/widgets/__testdata__/interactive-graph.testdata";
10+
import {
11+
circleWithStartingCoordsQuestion,
12+
linearSystemWithStartingCoordsQuestion,
13+
linearWithStartingCoordsQuestion,
14+
quadraticWithStartingCoordsQuestion,
15+
rayWithStartingCoordsQuestion,
16+
segmentWithLockedFigures,
17+
segmentWithStartingCoordsQuestion,
18+
segmentsWithStartingCoordsQuestion,
19+
sinusoidWithStartingCoordsQuestion,
20+
} from "../../../perseus/src/widgets/__testdata__/interactive-graph.testdata";
1121
import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
1222

1323
import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
@@ -32,6 +42,77 @@ export const Demo = (): React.ReactElement => {
3242
return <EditorPageWithStorybookPreview />;
3343
};
3444

45+
export const InteractiveGraphSegmentWithStartingCoords =
46+
(): React.ReactElement => {
47+
return (
48+
<EditorPageWithStorybookPreview
49+
question={segmentWithStartingCoordsQuestion}
50+
/>
51+
);
52+
};
53+
54+
export const InteractiveGraphSegmentsWithStartingCoords =
55+
(): React.ReactElement => {
56+
return (
57+
<EditorPageWithStorybookPreview
58+
question={segmentsWithStartingCoordsQuestion}
59+
/>
60+
);
61+
};
62+
63+
export const InteractiveGraphLinearWithStartingCoords =
64+
(): React.ReactElement => {
65+
return (
66+
<EditorPageWithStorybookPreview
67+
question={linearWithStartingCoordsQuestion}
68+
/>
69+
);
70+
};
71+
72+
export const InteractiveGraphLinearSystemWithStartingCoords =
73+
(): React.ReactElement => {
74+
return (
75+
<EditorPageWithStorybookPreview
76+
question={linearSystemWithStartingCoordsQuestion}
77+
/>
78+
);
79+
};
80+
81+
export const InteractiveGraphRayWithStartingCoords = (): React.ReactElement => {
82+
return (
83+
<EditorPageWithStorybookPreview
84+
question={rayWithStartingCoordsQuestion}
85+
/>
86+
);
87+
};
88+
89+
export const InteractiveGraphCircleWithStartingCoords =
90+
(): React.ReactElement => {
91+
return (
92+
<EditorPageWithStorybookPreview
93+
question={circleWithStartingCoordsQuestion}
94+
/>
95+
);
96+
};
97+
98+
export const InteractiveGraphQuadraticWithStartingCoords =
99+
(): React.ReactElement => {
100+
return (
101+
<EditorPageWithStorybookPreview
102+
question={quadraticWithStartingCoordsQuestion}
103+
/>
104+
);
105+
};
106+
107+
export const InteractiveGraphSinusoidWithStartingCoords =
108+
(): React.ReactElement => {
109+
return (
110+
<EditorPageWithStorybookPreview
111+
question={sinusoidWithStartingCoordsQuestion}
112+
/>
113+
);
114+
};
115+
35116
export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
36117
return (
37118
<EditorPageWithStorybookPreview

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const MafsWithMultipleSegments = (
153153
args: StoryArgs,
154154
): React.ReactElement => (
155155
<MafsQuestionRenderer
156-
question={interactiveGraphQuestionBuilder().withSegments(3).build()}
156+
question={interactiveGraphQuestionBuilder().withNumSegments(3).build()}
157157
/>
158158
);
159159

‎packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts

+74
Original file line numberDiff line numberDiff line change
@@ -1091,6 +1091,80 @@ export const segmentQuestion: PerseusRenderer = {
10911091
},
10921092
};
10931093

1094+
export const segmentWithStartingCoordsQuestion: PerseusRenderer =
1095+
interactiveGraphQuestionBuilder()
1096+
.withSegments([
1097+
[
1098+
[0, 0],
1099+
[2, 2],
1100+
],
1101+
])
1102+
.build();
1103+
1104+
export const segmentsWithStartingCoordsQuestion: PerseusRenderer =
1105+
interactiveGraphQuestionBuilder()
1106+
.withSegments([
1107+
[
1108+
[0, 0],
1109+
[2, 2],
1110+
],
1111+
[
1112+
[0, 2],
1113+
[2, 0],
1114+
],
1115+
])
1116+
.build();
1117+
1118+
export const linearWithStartingCoordsQuestion: PerseusRenderer =
1119+
interactiveGraphQuestionBuilder()
1120+
.withLinear([
1121+
[3, 0],
1122+
[3, 3],
1123+
])
1124+
.build();
1125+
1126+
export const linearSystemWithStartingCoordsQuestion: PerseusRenderer =
1127+
interactiveGraphQuestionBuilder()
1128+
.withLinearSystem([
1129+
[
1130+
[-3, 0],
1131+
[-3, 3],
1132+
],
1133+
[
1134+
[3, 0],
1135+
[3, 3],
1136+
],
1137+
])
1138+
.build();
1139+
1140+
export const rayWithStartingCoordsQuestion: PerseusRenderer =
1141+
interactiveGraphQuestionBuilder()
1142+
.withRay([
1143+
[3, 0],
1144+
[3, 3],
1145+
])
1146+
.build();
1147+
1148+
export const circleWithStartingCoordsQuestion: PerseusRenderer =
1149+
interactiveGraphQuestionBuilder().withCircle([9, 9]).build();
1150+
1151+
export const quadraticWithStartingCoordsQuestion: PerseusRenderer =
1152+
interactiveGraphQuestionBuilder()
1153+
.withQuadratic([
1154+
[-1, -1],
1155+
[0, 0],
1156+
[1, -1],
1157+
])
1158+
.build();
1159+
1160+
export const sinusoidWithStartingCoordsQuestion: PerseusRenderer =
1161+
interactiveGraphQuestionBuilder()
1162+
.withSinusoid([
1163+
[0, 0],
1164+
[1, -1],
1165+
])
1166+
.build();
1167+
10941168
export const segmentWithLockedPointsQuestion: PerseusRenderer = {
10951169
content:
10961170
"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",

0 commit comments

Comments
 (0)