Merge branch 'main' into reorder

.changeset/nervous-owls-retire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Polygon interactive graphs use the legacy graph when numSides is set to unlimited

.changeset/smooth-worms-wave.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+A fix for performance issues related to Sinusoid and Quadratic graphs

packages/perseus-editor/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/perseus-editor
 
+## 6.11.0
+
+### Minor Changes
+
+-   [#1348](https://github.com/Khan/perseus/pull/1348) [`73ba4f7c9`](https://github.com/Khan/perseus/commit/73ba4f7c9d502e0598617cc4c1710df5c10b086b) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Update the locked ellipse settings so they only take degrees as input.
+
+*   [#1353](https://github.com/Khan/perseus/pull/1353) [`e528c5b2b`](https://github.com/Khan/perseus/commit/e528c5b2b763e6a2ad8fbef31cd98f1f991a354d) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph] View a locked polygon
+
+-   [#1351](https://github.com/Khan/perseus/pull/1351) [`9a6517ca2`](https://github.com/Khan/perseus/commit/9a6517ca22857921acdbf206c7c21d989cccdf86) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add blue and gold to locked figures colorset
+
+*   [#1354](https://github.com/Khan/perseus/pull/1354) [`e73373f48`](https://github.com/Khan/perseus/commit/e73373f48a4cc65dedf5f7c591fcfc6cce8f08c7) Thanks [@Myranae](https://github.com/Myranae)! - Fix interactive graph editor in storybook to display and persist options
+
+### Patch Changes
+
+-   [#1350](https://github.com/Khan/perseus/pull/1350) [`1e877c6d4`](https://github.com/Khan/perseus/commit/1e877c6d44a0de351bfbfa5716391b6522bebbeb) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add locked vector to storybook story for all locked figures
+
+-   Updated dependencies [[`1e877c6d4`](https://github.com/Khan/perseus/commit/1e877c6d44a0de351bfbfa5716391b6522bebbeb), [`92990f15f`](https://github.com/Khan/perseus/commit/92990f15f4eb020cd079b0eaa607cc8e086acec9), [`73ba4f7c9`](https://github.com/Khan/perseus/commit/73ba4f7c9d502e0598617cc4c1710df5c10b086b), [`e528c5b2b`](https://github.com/Khan/perseus/commit/e528c5b2b763e6a2ad8fbef31cd98f1f991a354d), [`9a6517ca2`](https://github.com/Khan/perseus/commit/9a6517ca22857921acdbf206c7c21d989cccdf86)]:
+    -   @khanacademy/perseus@23.5.0
+
 ## 6.10.0
 
 ### Minor Changes

packages/perseus-editor/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.10.0",
+    "version": "6.11.0",
     "publishConfig": {
         "access": "public"
     },
@@ -28,7 +28,7 @@
         "@khanacademy/kas": "^0.3.9",
         "@khanacademy/kmath": "^0.1.12",
         "@khanacademy/math-input": "^19.1.0",
-        "@khanacademy/perseus": "^23.4.0",
+        "@khanacademy/perseus": "^23.5.0",
         "@khanacademy/perseus-core": "1.4.2"
     },
     "devDependencies": {

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

@@ -91,6 +91,35 @@ export const WithMafs: StoryComponentType = {
     },
 };
 
+/**
+ * Example of what the InteractiveGraphEditor experience is when using
+ * a Mafs-based InteractiveGraph to create Polygons.
+ */
+export const WithMafsPolygon: StoryComponentType = {
+    render: function Render() {
+        const reducer = (state, newState) => {
+            return {
+                ...state,
+                ...newState,
+            };
+        };
+
+        const [state, dispatch] = React.useReducer(reducer, {
+            ...mafsOptions,
+            graph: {type: "polygon"},
+            correct: {
+                type: "polygon",
+                numSides: 4,
+                showAngles: true,
+                showSides: true,
+                snapTo: "angles",
+            },
+        });
+
+        return <InteractiveGraphEditor {...state} onChange={dispatch} />;
+    },
+};
+
 /**
  * This InteractiveGraphEditor has locked points.
  *

packages/perseus/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/perseus
 
+## 23.5.0
+
+### Minor Changes
+
+-   [#1348](https://github.com/Khan/perseus/pull/1348) [`73ba4f7c9`](https://github.com/Khan/perseus/commit/73ba4f7c9d502e0598617cc4c1710df5c10b086b) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Update the locked ellipse settings so they only take degrees as input.
+
+*   [#1353](https://github.com/Khan/perseus/pull/1353) [`e528c5b2b`](https://github.com/Khan/perseus/commit/e528c5b2b763e6a2ad8fbef31cd98f1f991a354d) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph] View a locked polygon
+
+-   [#1351](https://github.com/Khan/perseus/pull/1351) [`9a6517ca2`](https://github.com/Khan/perseus/commit/9a6517ca22857921acdbf206c7c21d989cccdf86) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add blue and gold to locked figures colorset
+
+### Patch Changes
+
+-   [#1350](https://github.com/Khan/perseus/pull/1350) [`1e877c6d4`](https://github.com/Khan/perseus/commit/1e877c6d44a0de351bfbfa5716391b6522bebbeb) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add locked vector to storybook story for all locked figures
+
+*   [#1345](https://github.com/Khan/perseus/pull/1345) [`92990f15f`](https://github.com/Khan/perseus/commit/92990f15f4eb020cd079b0eaa607cc8e086acec9) Thanks [@benchristel](https://github.com/benchristel)! - Fix a bug in the exercise editor where the preview did not update after a change to the graph type or number of line segments.
+
 ## 23.4.0
 
 ### Minor Changes

packages/perseus/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "23.4.0",
+    "version": "23.5.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -32,6 +32,7 @@ const mafsOptions = {
         flags: {
             mafs: {
                 segment: true,
+                polygon: true,
             },
         },
     },
@@ -71,6 +72,10 @@ export const Polygon = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={polygonQuestion} />
 );
 
+export const PolygonWithMafs = (args: StoryArgs): React.ReactElement => (
+    <RendererWithDebugUI {...mafsOptions} question={polygonQuestion} />
+);
+
 export const Ray = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={rayQuestion} />
 );

packages/perseus/src/widgets/interactive-graph.tsx

@@ -1815,6 +1815,18 @@ class InteractiveGraph extends React.Component<Props, State> {
     }
 
     render() {
+        if (
+            this.props.graph.type === "polygon" &&
+            this.props.graph.numSides === "unlimited"
+        ) {
+            return (
+                <LegacyInteractiveGraph
+                    ref={this.legacyGraphRef}
+                    {...this.props}
+                />
+            );
+        }
+
         // Mafs shim
         if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
             const box = getInteractiveBoxFromSizeClass(

packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.test.ts

@@ -18,16 +18,29 @@ describe("SinusoidGraph", () => {
         expect(getSinusoidCoefficients(coords)).toEqual(expected);
     });
 
-    it("should accurately calculate the sine wave", () => {
+    it("should accurately calculate the sine wave for a given x-coordinate", () => {
         const coords: SinusoidGraphState["coords"] = [
             [0, 0],
             [2, 2],
         ];
+
+        // Ensure that the coefficients are defined
         const coefficients = getSinusoidCoefficients(coords);
+        expect(coefficients).toBeDefined();
 
+        // Grab a point where the sine wave should be 0
         const pointToTest = coords[0][0] + 4;
 
         // The sine wave should be roughly 0 at this point when accounting for floating point errors
-        expect(Math.round(computeSine(pointToTest, coefficients))).toEqual(0);
+        // We already know that the coefficients are defined from the previous test
+        expect(Math.round(computeSine(pointToTest, coefficients!))).toEqual(0);
+    });
+
+    it("should return undefined when the coefficients are invalid", () => {
+        const coords: SinusoidGraphState["coords"] = [
+            [0, 0],
+            [0, 0],
+        ];
+        expect(getSinusoidCoefficients(coords)).toBe(undefined);
     });
 });

packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx

@@ -26,12 +26,29 @@ export function SinusoidGraph(props: SinusoidGraphProps) {
     // The coords[0] is the root and the coords[1] is the first peak
     const {coords} = graphState;
 
-    // Get the coefficients for calculating the quadratic equation
-    const coeffs: SineCoefficient = getSinusoidCoefficients(coords);
+    // The coefficients are used to calculate the sinusoid equation, plot the graph, and to indicate
+    // to content creators the currently selected "correct answer" in the Content Editor.
+    // While we should technically never have invalid coordinates, we want to ensure that
+    // we have a fallback so that the graph can still be plotted without crashing.
+    const coeffRef = React.useRef<SineCoefficient>({
+        amplitude: 1,
+        angularFrequency: 1,
+        phase: 1,
+        verticalOffset: 0,
+    });
+    const coeffs = getSinusoidCoefficients(coords);
+
+    // If the coefficients are valid, update the reference
+    if (coeffs !== undefined) {
+        coeffRef.current = coeffs;
+    }
 
     return (
         <>
-            <Plot.OfX y={(x) => computeSine(x, coeffs)} color={color.blue} />
+            <Plot.OfX
+                y={(x) => computeSine(x, coeffRef.current)}
+                color={color.blue}
+            />
             {coords.map((coord, i) => (
                 <StyledMovablePoint
                     key={"point-" + i}
@@ -63,11 +80,16 @@ export const computeSine = function (
 
 export const getSinusoidCoefficients = (
     coords: ReadonlyArray<Coord>,
-): SineCoefficient => {
+): SineCoefficient | undefined => {
     // It's assumed that p1 is the root and p2 is the first peak
     const p1 = coords[0];
     const p2 = coords[1];
 
+    // If the x-coordinates are the same, we are unable to calculate the coefficients
+    if (p2[0] === p1[0]) {
+        return;
+    }
+
     // Resulting coefficients are canonical for this sine curve
     const amplitude = p2[1] - p1[1];
     const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts

@@ -182,6 +182,25 @@ describe("moveControlPoint", () => {
         ]);
     });
 
+    it("does not allow moving an endpoint of a sinusoid if the bounding logic would result in an invalid graph", () => {
+        const state: InteractiveGraphState = {
+            ...baseSinusoidGraphState,
+            coords: [
+                [9, 1],
+                [10, 2],
+            ],
+        };
+
+        const updated = interactiveGraphReducer(state, movePoint(0, [15, 1]));
+
+        invariant(updated.type === "sinusoid");
+        // Assert: the move was canceled
+        expect(updated.coords).toEqual([
+            [9, 1],
+            [10, 2],
+        ]);
+    });
+
     it("snaps points to the snap grid", () => {
         const state: InteractiveGraphState = {
             ...baseSegmentGraphState,

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

@@ -286,28 +286,38 @@ function doMovePoint(
             };
         }
         case "sinusoid": {
-            // First, we need to verify that the new coordinates are not on the same vertical line
-            // If they are, we don't want to move the point
+            // First, we need to make sure to bound the new coordinates to the graph range
             const destination = action.destination;
+            const boundDestination = boundAndSnapToGrid(destination, state);
+
+            // Then, we need to verify that the new coordinates are not on the same
+            // vertical line. If they are, then we don't want to move the point
             const newCoords: vec.Vector2[] = [...state.coords];
-            newCoords[action.index] = action.destination;
+            newCoords[action.index] = boundDestination;
             if (newCoords[0][0] === newCoords[1][0]) {
                 return state;
             }
+
             return {
                 ...state,
                 hasBeenInteractedWith: true,
                 coords: setAtIndex({
                     array: state.coords,
                     index: action.index,
-                    newValue: boundAndSnapToGrid(destination, state),
+                    newValue: boundDestination,
                 }),
             };
         }
         case "quadratic": {
             // Set up the new coords and check if the quadratic coefficients are valid
             const newCoords: QuadraticCoords = [...state.coords];
-            newCoords[action.index] = action.destination;
+
+            // Bind the new destination to the graph range/snapStep and then get the quadratic coefficients
+            const boundDestination = boundAndSnapToGrid(
+                action.destination,
+                state,
+            );
+            newCoords[action.index] = boundDestination;
             const QuadraticCoefficients = getQuadraticCoefficients(newCoords);
 
             // If the new destination results in an invalid quadratic equation, we don't want to move the point
@@ -321,7 +331,7 @@ function doMovePoint(
                 coords: setAtIndex({
                     array: state.coords,
                     index: action.index,
-                    newValue: boundAndSnapToGrid(action.destination, state),
+                    newValue: boundDestination,
                 }),
             };
         }