From f920a4cc7f0e8e8072ee55598e8e13698d6dc2cf Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Mon, 5 Aug 2024 12:59:03 -0700 Subject: [PATCH] [Interactive Graph Editor: Storybook] Add a story for Point graph type start coords (#1482) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: There currently isn't a good way to manually test the start coords for Point graph in storybook, so I'm adding a story for that here. - Added story for point graph start coords in the interactive graph editor stories. - Shortened the names of the stories so they show up neater in the files structure. - Added `numPoints` to the stateful mafs graph useEffect so it appropriately updates the preview when the number of points is changed. - Fixed the builder for point graphs so the default coords value is undefined and it calculates the correct coords itself. It was defaulting to [0, 0] before, which really didn't work when there was a different number of points. - Added `points` graph to the flag utility so it uses the mafs version in storybook. Issue: https://khanacademy.atlassian.net/browse/LEMS-2209 ## Test plan: Storybook - http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-point - Change the number of points and confirm that it looks correct in both previews ## Screenshot Screenshot 2024-08-02 at 3 57 23 PM Author: nishasy Reviewers: Myranae, nishasy, jeremywiebe, benchristel, mark-fitzgerald Required Reviewers: Approved By: Myranae Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: https://github.com/Khan/perseus/pull/1482 --- .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 | 5 + 7 files changed, 81 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..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,