From b8e568a921b9f65a5d326070c70f5277e2869200 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Fri, 2 Aug 2024 15:58:38 -0700 Subject: [PATCH 1/2] [Interactive Graph Editor: Storybook] Add a story for Point graph type start coords --- .changeset/grumpy-sheep-mate.md | 6 + .../src/__stories__/flags-for-api-options.ts | 1 + .../interactive-graph-editor.stories.tsx | 114 +++++++++--------- .../interactive-graph.testdata.ts | 10 ++ ...interactive-graph-question-builder.test.ts | 1 - .../interactive-graph-question-builder.ts | 4 +- .../stateful-mafs-graph.tsx | 2 + 7 files changed, 78 insertions(+), 60 deletions(-) create mode 100644 .changeset/grumpy-sheep-mate.md 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..f8501589a9 100644 --- a/packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx @@ -96,6 +96,7 @@ export const StatefulMafsGraph = React.forwardRef< }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]); 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 +114,7 @@ export const StatefulMafsGraph = React.forwardRef< } }, [ graph.type, + numPoints, numSegments, numSides, snapTo, From 7708236bb6246871d5ed5bfaf885879e360d2aeb Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Mon, 5 Aug 2024 12:52:55 -0700 Subject: [PATCH 2/2] Add clarifying comment --- .../src/widgets/interactive-graphs/stateful-mafs-graph.tsx | 3 +++ 1 file changed, 3 insertions(+) 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 f8501589a9..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,6 +95,9 @@ 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;