diff --git a/.changeset/grumpy-sheep-mate.md b/.changeset/grumpy-sheep-mate.md
new file mode 100644
index 0000000000..f7a01a3aed
--- /dev/null
+++ 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
index 15c052a188..5591904391 100644
--- 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
index e2d1c5d4e1..02ce4e882d 100644
--- 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,43 +40,39 @@ export default {
const onChangeAction = action("onChange");
-export const InteractiveGraphSegmentWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphSegment = (): React.ReactElement => {
+ return (
+
+ );
+};
-export const InteractiveGraphSegmentsWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphSegments = (): React.ReactElement => {
+ return (
+
+ );
+};
-export const InteractiveGraphLinearWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphLinear = (): React.ReactElement => {
+ return (
+
+ );
+};
-export const InteractiveGraphLinearSystemWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphLinearSystem = (): React.ReactElement => {
+ return (
+
+ );
+};
-export const InteractiveGraphRayWithStartingCoords = (): React.ReactElement => {
+export const InteractiveGraphRay = (): React.ReactElement => {
return (
{
);
};
-export const InteractiveGraphCircleWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphCircle = (): React.ReactElement => {
+ return (
+
+ );
+};
-export const InteractiveGraphQuadraticWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphQuadratic = (): React.ReactElement => {
+ return (
+
+ );
+};
-export const InteractiveGraphSinusoidWithStartingCoords =
- (): React.ReactElement => {
- return (
-
- );
- };
+export const InteractiveGraphSinusoid = (): React.ReactElement => {
+ return (
+
+ );
+};
+
+export const InteractiveGraphPoint = (): React.ReactElement => (
+
+);
export const InteractiveGraphPolygon = (): React.ReactElement => {
return ;
diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
index b3038d03d0..ef6c39707d 100644
--- 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
index cb494b822d..b38a8dc6c4 100644
--- 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
index 7db0b1dbf1..dbd381f900 100644
--- 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
index 6a6617fe95..f72accc038 100644
--- 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,