[Hint Mode: Start Coords] Build the foundation for adding start coord…

…s UI for angle graphs (#1492) ## Summary: This PR includes the foundation/prerequisites for adding the start coords UI for angle graphs. - Add the polygon graph type to start-coords-settings.tsx - Create a WORK IN PROGRESS start-coords-angle.tsx file. This will be properly filled in in the following PR, whose main purpose will be adding the body for the UI. - Add the start coords UI angle flag - Add a storybook story for angle graphs (and update polygon story to start with start coords) - Update the angle initializer to account for start coords Issue: https://khanacademy.atlassian.net/browse/LEMS-2073 ## Test plan: `yarn jest` Storybook - http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-angle <img width="897" alt="image" src="https://github.com/user-attachments/assets/c448bcb2-ae47-4e55-8efb-e6f42e000466"> Author: nishasy Reviewers: Myranae, benchristel Required Reviewers: Approved By: Myranae Checks: ✅ gerald, ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (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), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1492
Khan · Aug 8, 2024 · 2ebbc19 · 2ebbc19
1 parent 5e66539
commit 2ebbc19
Show file tree

Hide file tree

Showing 12 changed files with 190 additions and 3 deletions.
diff --git a/.changeset/eleven-paws-serve.md b/.changeset/eleven-paws-serve.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Hint Mode: Start Coords] Build the foundation for adding start coords UI for angle graphs
diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -22,6 +22,7 @@ export const flags = {
         "start-coords-ui-phase-2": true,
         "start-coords-ui-point": true,
         "start-coords-ui-polygon": true,
+        "start-coords-ui-angle": true,
     },
 } satisfies APIOptions["flags"];
 

diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
@@ -8,11 +8,12 @@ import * as React from "react";
 
 import {EditorPage} from "..";
 import {
+    angleWithStartingCoordsQuestion,
     circleWithStartingCoordsQuestion,
     linearSystemWithStartingCoordsQuestion,
     linearWithStartingCoordsQuestion,
     pointQuestionWithStartingCoords,
-    polygonQuestion,
+    polygonWithStartingCoordsQuestion,
     quadraticWithStartingCoordsQuestion,
     rayWithStartingCoordsQuestion,
     segmentWithLockedFigures,
@@ -111,7 +112,19 @@ export const InteractiveGraphPoint = (): React.ReactElement => (
 );
 
 export const InteractiveGraphPolygon = (): React.ReactElement => {
-    return <EditorPageWithStorybookPreview question={polygonQuestion} />;
+    return (
+        <EditorPageWithStorybookPreview
+            question={polygonWithStartingCoordsQuestion}
+        />
+    );
+};
+
+export const InteractiveGraphAngle = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            question={angleWithStartingCoordsQuestion}
+        />
+    );
 };
 
 export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {

diff --git a/packages/perseus-editor/src/components/__tests__/util.test.ts b/packages/perseus-editor/src/components/__tests__/util.test.ts
@@ -365,6 +365,26 @@ describe("getDefaultGraphStartCoords", () => {
             [-3, -3],
         ]);
     });
+
+    test("should get default start coords for an angle graph", () => {
+        // Arrange
+        const graph: PerseusGraphType = {type: "angle"};
+        const range = [
+            [-10, 10],
+            [-10, 10],
+        ] satisfies [Range, Range];
+        const step = [1, 1] satisfies [number, number];
+
+        // Act
+        const defaultCoords = getDefaultGraphStartCoords(graph, range, step);
+
+        // Default correct answer is 20 degree angle at (0, 0)
+        expect(defaultCoords).toEqual([
+            [7, 0],
+            [0, 0],
+            [6.5778483455013586, 2.394141003279681],
+        ]);
+    });
 });
 
 describe("getSinusoidEquation", () => {

diff --git a/packages/perseus-editor/src/components/start-coords-angle.tsx b/packages/perseus-editor/src/components/start-coords-angle.tsx
@@ -0,0 +1,28 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import type {Coord, PerseusGraphType} from "@khanacademy/perseus";
+
+type Props = {
+    startCoords: [Coord, Coord, Coord];
+    onChange: (startCoords: PerseusGraphType["startCoords"]) => void;
+};
+
+const StartCoordsAngle = (props: Props) => {
+    const {startCoords} = props;
+    return (
+        <View>
+            WIP
+            <br /> Start coords:
+            {startCoords.map((coord, index) => {
+                return (
+                    <View key={index}>
+                        {`Point ${index + 1}: (${coord[0]}, ${coord[1]})`}
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+export default StartCoordsAngle;
diff --git a/packages/perseus-editor/src/components/start-coords-settings.tsx b/packages/perseus-editor/src/components/start-coords-settings.tsx
@@ -1,5 +1,6 @@
 import {vector as kvector} from "@khanacademy/kmath";
 import {
+    getAngleCoords,
     getCircleCoords,
     getLineCoords,
     getLinearSystemCoords,
@@ -17,6 +18,7 @@ import arrowCounterClockwise from "@phosphor-icons/core/bold/arrow-counter-clock
 import * as React from "react";
 
 import Heading from "./heading";
+import StartCoordsAngle from "./start-coords-angle";
 import StartCoordsCircle from "./start-coords-circle";
 import StartCoordsLine from "./start-coords-line";
 import StartCoordsMultiline from "./start-coords-multiline";
@@ -105,6 +107,14 @@ const StartCoordsSettingsInner = (props: Props) => {
                     onChange={onChange}
                 />
             );
+        case "angle":
+            const angleCoords = getAngleCoords({graph: props, range, step});
+            return (
+                <StartCoordsAngle
+                    startCoords={angleCoords}
+                    onChange={onChange}
+                />
+            );
         default:
             return null;
     }

diff --git a/packages/perseus-editor/src/components/util.ts b/packages/perseus-editor/src/components/util.ts
@@ -1,5 +1,6 @@
 import {vector as kvector} from "@khanacademy/kmath";
 import {
+    getAngleCoords,
     getCircleCoords,
     getLineCoords,
     getLinearSystemCoords,
@@ -208,6 +209,12 @@ export function getDefaultGraphStartCoords(
                 range,
                 step,
             );
+        case "angle":
+            return getAngleCoords({
+                graph: {...graph, startCoords: undefined},
+                range,
+                step,
+            });
         default:
             return undefined;
     }
@@ -283,6 +290,7 @@ export const shouldShowStartCoordsUI = (flags, graph) => {
     const startCoordsPhase2 = flags?.mafs?.["start-coords-ui-phase-2"];
     const startCoordsPoint = flags?.mafs?.["start-coords-ui-point"];
     const startCoordsPolygon = flags?.mafs?.["start-coords-ui-polygon"];
+    const startCoordsAngle = flags?.mafs?.["start-coords-ui-angle"];
 
     if (startCoordsPhase1 && startCoordsUiPhase1Types.includes(graph.type)) {
         return true;
@@ -292,6 +300,10 @@ export const shouldShowStartCoordsUI = (flags, graph) => {
         return true;
     }
 
+    if (startCoordsAngle && graph.type === "angle") {
+        return true;
+    }
+
     if (
         startCoordsPoint &&
         graph.type === "point" &&

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
@@ -706,6 +706,7 @@ describe("InteractiveGraphEditor", () => {
                                 "start-coords-ui-phase-2": false,
                                 "start-coords-ui-point": false,
                                 "start-coords-ui-polygon": false,
+                                "start-coords-ui-angle": false,
                             },
                         },
                     }}
@@ -765,6 +766,7 @@ describe("InteractiveGraphEditor", () => {
                                 "start-coords-ui-phase-2": true,
                                 "start-coords-ui-point": false,
                                 "start-coords-ui-polygon": false,
+                                "start-coords-ui-angle": false,
                             },
                         },
                     }}
@@ -824,6 +826,7 @@ describe("InteractiveGraphEditor", () => {
                                 "start-coords-ui-phase-2": false,
                                 "start-coords-ui-point": true,
                                 "start-coords-ui-polygon": false,
+                                "start-coords-ui-angle": false,
                             },
                         },
                     }}
@@ -883,6 +886,67 @@ describe("InteractiveGraphEditor", () => {
                                 "start-coords-ui-phase-2": false,
                                 "start-coords-ui-point": false,
                                 "start-coords-ui-polygon": true,
+                                "start-coords-ui-angle": false,
+                            },
+                        },
+                    }}
+                    graph={{type}}
+                    correct={{type}}
+                />,
+                {
+                    wrapper: RenderStateRoot,
+                },
+            );
+
+            // Assert
+            if (shouldRender) {
+                expect(
+                    await screen.findByRole("button", {
+                        name: "Use default start coordinates",
+                    }),
+                ).toBeInTheDocument();
+            } else {
+                expect(
+                    screen.queryByRole("button", {
+                        name: "Use default start coordinates",
+                    }),
+                ).toBeNull();
+            }
+        },
+    );
+
+    test.each`
+        type               | shouldRender
+        ${"linear"}        | ${false}
+        ${"ray"}           | ${false}
+        ${"linear-system"} | ${false}
+        ${"segment"}       | ${false}
+        ${"circle"}        | ${false}
+        ${"quadratic"}     | ${false}
+        ${"sinusoid"}      | ${false}
+        ${"polygon"}       | ${false}
+        ${"angle"}         | ${true}
+        ${"point"}         | ${false}
+    `(
+        "should render for $type graphs if angle flag is on: $shouldRender",
+        async ({type, shouldRender}) => {
+            // Arrange
+
+            // Act
+            render(
+                <InteractiveGraphEditor
+                    {...baseProps}
+                    apiOptions={{
+                        ...ApiOptions.defaults,
+                        flags: {
+                            ...flags,
+                            mafs: {
+                                ...flags.mafs,
+                                "start-coords-ui-phase-1": false,
+                                "start-coords-ui-phase-2": false,
+                                "start-coords-ui-point": false,
+                                "start-coords-ui-polygon": false,
+                                "start-coords-ui-angle": true,
                             },
                         },
                     }}

diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
@@ -127,6 +127,7 @@ export {
     getSegmentCoords,
     getSinusoidCoords,
     getQuadraticCoords,
+    getAngleCoords,
 } from "./widgets/interactive-graphs/reducer/initialize-graph-state";
 
 /**

diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
@@ -173,6 +173,11 @@ export const InteractiveGraphEditorFlags = [
      * Includes polygon graph.
      */
     "start-coords-ui-polygon",
+    /**
+     * Enables the UI for setting the start coordinates of a graph.
+     * Includes angle graph.
+     */
+    "start-coords-ui-angle",
 ] as const;
 
 /**

diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
@@ -32,6 +32,17 @@ export const angleQuestion: PerseusRenderer = interactiveGraphQuestionBuilder()
 export const angleQuestionWithDefaultCorrect: PerseusRenderer =
     interactiveGraphQuestionBuilder().withAngle().build();
 
+export const angleWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withAngle({
+            startCoords: [
+                [5, 1],
+                [1, 1],
+                [4, 5],
+            ],
+        })
+        .build();
+
 export const circleQuestion: PerseusRenderer = interactiveGraphQuestionBuilder()
     .withCircle({center: [-2, -4], radius: 2})
     .build();
@@ -130,6 +141,18 @@ export const polygonQuestion: PerseusRenderer =
         })
         .build();
 
+export const polygonWithStartingCoordsQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .withPolygon("grid", {
+            startCoords: [
+                [6, 6],
+                [8, 6],
+                [8, 8],
+                [6, 8],
+            ],
+        })
+        .build();
+
 export const polygonWithAnglesQuestion: PerseusRenderer =
     interactiveGraphQuestionBuilder()
         .withContent(

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
@@ -394,7 +394,7 @@ export function getCircleCoords(graph: PerseusGraphTypeCircle): {
     };
 }
 
-const getAngleCoords = (params: {
+export const getAngleCoords = (params: {
     graph: PerseusGraphTypeAngle;
     range: [x: Interval, y: Interval];
     step: [x: number, y: number];
@@ -404,6 +404,10 @@ const getAngleCoords = (params: {
         return graph.coords;
     }
 
+    if (graph.startCoords) {
+        return graph.startCoords;
+    }
+
     const {snapDegrees, angleOffsetDeg} = graph;
     const snap = snapDegrees || 1;
     let angle = snap;