diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx
index 3093830a83..46a7888e33 100644
--- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx
@@ -39,6 +39,7 @@ const enableMafs: APIOptions = {
segment: true,
polygon: true,
"unlimited-polygon": true,
+ "unlimited-point": true,
angle: true,
"interactive-graph-locked-features-labels": true,
},
@@ -71,6 +72,13 @@ export const Point = (args: StoryArgs): React.ReactElement => (
);
+export const PointWithMafs = (args: StoryArgs): React.ReactElement => (
+
+);
+
export const Polygon = (args: StoryArgs): React.ReactElement => (
);
diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts
index 25b16a928d..0f7e75bed7 100644
--- a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts
+++ b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts
@@ -22,6 +22,22 @@ const defaultAngleState: InteractiveGraphState = {
allowReflexAngles: false,
};
+const defaultUnlimitedPointState: InteractiveGraphState = {
+ type: "point",
+ focusedPointIndex: 0,
+ coords: [[5, 0]],
+ numPoints: "unlimited",
+ hasBeenInteractedWith: true,
+ showRemovePointButton: false,
+ showKeyboardInteractionInvitation: false,
+ interactionMode: "mouse",
+ range: [
+ [-10, 10],
+ [-10, 10],
+ ],
+ snapStep: [1, 1],
+};
+
const defaultUnlimitedPolygonState: InteractiveGraphState = {
type: "polygon",
closedPolygon: false,
@@ -138,6 +154,32 @@ describe("getGradableGraph", () => {
]);
});
+ it("returns null coordinates if the unlimited point graph has an empty array of coordinates", () => {
+ const state: InteractiveGraphState = {
+ ...defaultUnlimitedPointState,
+ coords: [],
+ };
+ const initialGraph: PerseusGraphType = {
+ type: "point",
+ };
+ const result = getGradableGraph(state, initialGraph);
+ invariant(result.type === "point");
+ expect(result.coords).toEqual(null);
+ });
+
+ it("returns coordinates if the unlimited point graph is has at least one coordinate", () => {
+ const state: InteractiveGraphState = {
+ ...defaultUnlimitedPointState,
+ coords: [[1, 0]],
+ };
+ const initialGraph: PerseusGraphType = {
+ type: "point",
+ };
+ const result = getGradableGraph(state, initialGraph);
+ invariant(result.type === "point");
+ expect(result.coords).toEqual([[1, 0]]);
+ });
+
it("returns null coordinates if the unlimited polygon graph is open", () => {
const state: InteractiveGraphState = {
...defaultUnlimitedPolygonState,
diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts
index 0abae73773..87f0b688b6 100644
--- a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts
+++ b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts
@@ -59,6 +59,14 @@ export function getGradableGraph(
}
if (state.type === "point" && initialGraph.type === "point") {
+ // The unlimited point graph must have at least 1 coordinate or else it is not considered score-able.
+ if (state.numPoints === "unlimited" && state.coords.length === 0) {
+ return {
+ ...initialGraph,
+ coords: null,
+ };
+ }
+
return {
...initialGraph,
coords: state.coords,