Merge branch 'main' into add-vector-to-testdata

Khan · Jun 17, 2024 · 2489507 · 2489507
2 parents 7970b98 + 73ba4f7
commit 2489507
Show file tree

Hide file tree

Showing 24 changed files with 138 additions and 64 deletions.
diff --git a/.changeset/calm-seas-cheat.md b/.changeset/calm-seas-cheat.md
diff --git a/.changeset/poor-fireants-jog.md b/.changeset/poor-fireants-jog.md
diff --git a/.changeset/rotten-hotels-travel.md b/.changeset/rotten-hotels-travel.md
diff --git a/.changeset/silly-beds-provide.md b/.changeset/silly-beds-provide.md
diff --git a/.changeset/strong-boats-sip.md b/.changeset/strong-boats-sip.md
diff --git a/.changeset/sweet-pumas-buy.md b/.changeset/sweet-pumas-buy.md
diff --git a/.changeset/ten-ravens-tap.md b/.changeset/ten-ravens-tap.md
diff --git a/.changeset/tough-beans-collect.md b/.changeset/tough-beans-collect.md
diff --git a/.changeset/wild-spoons-shake.md b/.changeset/wild-spoons-shake.md
diff --git a/.changeset/witty-moons-develop.md b/.changeset/witty-moons-develop.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Fix interactive graph editor in storybook to display and persist options
diff --git a/dev/CHANGELOG.md b/dev/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @khanacademy/perseus-dev-ui
 
+## 1.6.0
+
+### Minor Changes
+
+-   [#1338](https://github.com/Khan/perseus/pull/1338) [`7a530de8d`](https://github.com/Khan/perseus/commit/7a530de8df3d7edf709b4c4e42843b295f8e73bc) Thanks [@Myranae](https://github.com/Myranae)! - Implement the "sides" snapTo type for Polygon interactive graphs
+
 ## 1.5.9
 
 ### Patch Changes

diff --git a/dev/package.json b/dev/package.json
@@ -3,7 +3,7 @@
     "description": "Perseus dev UI",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.5.9",
+    "version": "1.6.0",
     "private": true,
     "repository": {
         "type": "git",

diff --git a/packages/perseus-editor/CHANGELOG.md b/packages/perseus-editor/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @khanacademy/perseus-editor
 
+## 6.10.0
+
+### Minor Changes
+
+-   [#1344](https://github.com/Khan/perseus/pull/1344) [`3ce606e8c`](https://github.com/Khan/perseus/commit/3ce606e8c18c8be8e515d12a0c70c40235abae07) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Revert usage of min and max in range inputs for locked figures UI
+
+*   [#1330](https://github.com/Khan/perseus/pull/1330) [`1df3824ab`](https://github.com/Khan/perseus/commit/1df3824ab72b121bdebe4d67ca667e5349f0e843) Thanks [@Myranae](https://github.com/Myranae)! - Implement the "angles" snapTo type for Polygon interactive graphs
+
+### Patch Changes
+
+-   [#1335](https://github.com/Khan/perseus/pull/1335) [`7927487c9`](https://github.com/Khan/perseus/commit/7927487c9a0430aeb4ddc1be2b19bc9fdce210c7) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Minor refactor - remove unnecessary uses of useUniqueIdWithMock
+
+*   [#1349](https://github.com/Khan/perseus/pull/1349) [`56b2b9f58`](https://github.com/Khan/perseus/commit/56b2b9f58ee44fd2fd297cb53b9ad1495972bf55) Thanks [@nishasy](https://github.com/nishasy)! - Update to Wonder Blocks Form 4.7.1
+
+*   Updated dependencies [[`50c8233ee`](https://github.com/Khan/perseus/commit/50c8233eec4faf3c001a6ce73b3053fa28135961), [`56b2b9f58`](https://github.com/Khan/perseus/commit/56b2b9f58ee44fd2fd297cb53b9ad1495972bf55), [`509542a3b`](https://github.com/Khan/perseus/commit/509542a3bb155f3828bd9596858b0a7c46a98319), [`bfb294453`](https://github.com/Khan/perseus/commit/bfb2944530a47fb4ae8d13a5ee218feebec023d9), [`1df3824ab`](https://github.com/Khan/perseus/commit/1df3824ab72b121bdebe4d67ca667e5349f0e843), [`4910b2ec3`](https://github.com/Khan/perseus/commit/4910b2ec3385c7d96bab5172a697722ce31f9339), [`7a530de8d`](https://github.com/Khan/perseus/commit/7a530de8df3d7edf709b4c4e42843b295f8e73bc), [`970f94119`](https://github.com/Khan/perseus/commit/970f941197bea8f9eabfe31020160dc3cbfb204d)]:
+    -   @khanacademy/perseus@23.4.0
+
 ## 6.9.0
 
 ### Minor Changes

diff --git a/packages/perseus-editor/package.json b/packages/perseus-editor/package.json
@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.9.0",
+    "version": "6.10.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.3.0",
+        "@khanacademy/perseus": "^23.4.0",
         "@khanacademy/perseus-core": "1.4.2"
     },
     "devDependencies": {

diff --git a/packages/perseus-editor/src/components/__tests__/util.test.ts b/packages/perseus-editor/src/components/__tests__/util.test.ts
@@ -1,4 +1,4 @@
-import {getDefaultFigureForType} from "../util";
+import {degreeToRadian, getDefaultFigureForType, radianToDegree} from "../util";
 
 describe("getDefaultFigureForType", () => {
     test("should return a point with default values", () => {
@@ -62,3 +62,41 @@ describe("getDefaultFigureForType", () => {
         });
     });
 });
+
+describe("degreeToRadian", () => {
+    test.each`
+        degrees | radians
+        ${0}    | ${0}
+        ${45}   | ${Math.PI / 4}
+        ${90}   | ${Math.PI / 2}
+        ${180}  | ${Math.PI}
+        ${270}  | ${Math.PI * 1.5}
+        ${360}  | ${Math.PI * 2}
+        ${-45}  | ${-Math.PI / 4}
+        ${-90}  | ${-Math.PI / 2}
+    `(
+        "should convert $degrees degrees to $radians radians",
+        ({degrees, radians}) => {
+            expect(degreeToRadian(degrees)).toBe(radians);
+        },
+    );
+});
+
+describe("radianToDegree", () => {
+    test.each`
+        radians          | degrees
+        ${0}             | ${0}
+        ${Math.PI / 4}   | ${45}
+        ${Math.PI / 2}   | ${90}
+        ${Math.PI}       | ${180}
+        ${Math.PI * 1.5} | ${270}
+        ${Math.PI * 2}   | ${360}
+        ${-Math.PI / 4}  | ${-45}
+        ${-Math.PI / 2}  | ${-90}
+    `(
+        "should convert $radians radians to $degrees degrees",
+        ({radians, degrees}) => {
+            expect(radianToDegree(radians)).toBe(degrees);
+        },
+    );
+});
diff --git a/packages/perseus-editor/src/components/angle-input.tsx b/packages/perseus-editor/src/components/angle-input.tsx
@@ -5,12 +5,7 @@ import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-const degreeToRadian = (degrees: number) => {
-    return (degrees / 180) * Math.PI;
-};
-const radianToDegree = (radians: number) => {
-    return (radians / Math.PI) * 180;
-};
+import {degreeToRadian, radianToDegree} from "./util";
 
 type Props = {
     angle: number;

diff --git a/packages/perseus-editor/src/components/util.ts b/packages/perseus-editor/src/components/util.ts
@@ -103,3 +103,10 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
             throw new UnreachableCaseError(type);
     }
 }
+
+export function degreeToRadian(degrees: number) {
+    return (degrees / 180) * Math.PI;
+}
+export function radianToDegree(radians: number) {
+    return (radians / Math.PI) * 180;
+}
diff --git a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
@@ -598,4 +598,21 @@ describe("InteractiveGraphEditor", () => {
         // Assert
         expect(ref.current?.getSaveWarnings()).toEqual([]);
     });
+
+    test("buildGraphKey returns the correct key", async () => {
+        // Arrange
+        const graph: PerseusGraphType = {
+            type: "polygon",
+            numSides: 4,
+            snapTo: "grid",
+            showAngles: true,
+            showSides: true,
+        };
+
+        // Act
+        const key = InteractiveGraphEditor.buildGraphKey(graph);
+
+        // Assert
+        expect(key).toEqual("polygon:4:grid:true:true");
+    });
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
@@ -30,6 +30,7 @@ import type {
     PerseusInteractiveGraphWidgetOptions,
     APIOptionsWithDefaults,
     LockedFigure,
+    PerseusGraphType,
 } from "@khanacademy/perseus";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
@@ -198,6 +199,20 @@ class InteractiveGraphEditor extends React.Component<Props> {
         DeprecationMixin.UNSAFE_componentWillMount.call(this);
     }
 
+    static buildGraphKey(correct: PerseusGraphType) {
+        const testGraphKey: any[] = [];
+        for (const key in correct) {
+            if (correct[key]) {
+                typeof correct[key] === "number" ||
+                typeof correct[key] === "string" ||
+                typeof correct[key] === "boolean"
+                    ? testGraphKey.push(correct[key])
+                    : testGraphKey.push(0);
+            }
+        }
+        return testGraphKey.join(":");
+    }
+
     render() {
         let graph;
         let equationString;
@@ -247,10 +262,10 @@ class InteractiveGraphEditor extends React.Component<Props> {
                     this.props.onChange({correct: correct});
                 },
             } as const;
-
             // This is used to force a remount of the graph component
             // when there's a significant change
-            const graphKey = `${correct.type}:${correct.numSegments || 0}`;
+            const graphKey = InteractiveGraphEditor.buildGraphKey(correct);
+
             graph = (
                 // There are a bunch of props that renderer.jsx passes to widgets via
                 // getWidgetProps() and widget-container.jsx that the editors don't

diff --git a/packages/perseus/CHANGELOG.md b/packages/perseus/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @khanacademy/perseus
 
+## 23.4.0
+
+### Minor Changes
+
+-   [#1330](https://github.com/Khan/perseus/pull/1330) [`1df3824ab`](https://github.com/Khan/perseus/commit/1df3824ab72b121bdebe4d67ca667e5349f0e843) Thanks [@Myranae](https://github.com/Myranae)! - Implement the "angles" snapTo type for Polygon interactive graphs
+
+*   [#1338](https://github.com/Khan/perseus/pull/1338) [`7a530de8d`](https://github.com/Khan/perseus/commit/7a530de8df3d7edf709b4c4e42843b295f8e73bc) Thanks [@Myranae](https://github.com/Myranae)! - Implement the "sides" snapTo type for Polygon interactive graphs
+
+### Patch Changes
+
+-   [#1341](https://github.com/Khan/perseus/pull/1341) [`50c8233ee`](https://github.com/Khan/perseus/commit/50c8233eec4faf3c001a6ce73b3053fa28135961) Thanks [@catandthemachines](https://github.com/catandthemachines)! - Increase default circle radius from 1 to 2.
+
+*   [#1349](https://github.com/Khan/perseus/pull/1349) [`56b2b9f58`](https://github.com/Khan/perseus/commit/56b2b9f58ee44fd2fd297cb53b9ad1495972bf55) Thanks [@nishasy](https://github.com/nishasy)! - Update to Wonder Blocks Form 4.7.1
+
+-   [#1331](https://github.com/Khan/perseus/pull/1331) [`509542a3b`](https://github.com/Khan/perseus/commit/509542a3bb155f3828bd9596858b0a7c46a98319) Thanks [@catandthemachines](https://github.com/catandthemachines)! - Cleaning up internal usage of isValidLocation function.
+
+*   [#1340](https://github.com/Khan/perseus/pull/1340) [`bfb294453`](https://github.com/Khan/perseus/commit/bfb2944530a47fb4ae8d13a5ee218feebec023d9) Thanks [@catandthemachines](https://github.com/catandthemachines)! - Updating for all Linear Systems to have the same color line.
+
+-   [#1337](https://github.com/Khan/perseus/pull/1337) [`4910b2ec3`](https://github.com/Khan/perseus/commit/4910b2ec3385c7d96bab5172a697722ce31f9339) Thanks [@catandthemachines](https://github.com/catandthemachines)! - Fixing blue dot issue in firefox for interactive graph
+
+*   [#1325](https://github.com/Khan/perseus/pull/1325) [`970f94119`](https://github.com/Khan/perseus/commit/970f941197bea8f9eabfe31020160dc3cbfb204d) Thanks [@benchristel](https://github.com/benchristel)! - Refactor the interactive graph state initialization code
+
 ## 23.3.0
 
 ### Minor Changes

diff --git a/packages/perseus/package.json b/packages/perseus/package.json
@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "23.3.0",
+    "version": "23.4.0",
     "publishConfig": {
         "access": "public"
     },

diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
@@ -134,7 +134,7 @@ export const circleQuestionWithDefaultCorrect: PerseusRenderer = {
                 correct: {
                     type: "circle",
                     center: [0, 0],
-                    radius: 1,
+                    radius: 2,
                 },
             },
             version: {

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.test.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.test.ts
@@ -328,7 +328,7 @@ describe("initializeGraphState for circle graphs", () => {
 
         invariant(graph.type === "circle");
         expect(graph.center).toEqual([0, 0]);
-        expect(graph.radiusPoint).toEqual([1, 0]);
+        expect(graph.radiusPoint).toEqual([2, 0]);
     });
 });
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts
@@ -337,6 +337,6 @@ function getCircleCoords(graph: PerseusGraphTypeCircle): {
     }
     return {
         center: [0, 0],
-        radiusPoint: [1, 0],
+        radiusPoint: [2, 0],
     };
 }