[Interactive Graph] Add tangent graph option in the Interactive Graph Editor

.changeset/rich-toys-travel.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Add tangent graph option in the Interactive Graph Editor

packages/perseus-editor/src/widgets/interactive-graph-editor/components/graph-type-selector.tsx

@@ -1,13 +1,22 @@
+import {isFeatureOn} from "@khanacademy/perseus-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import type {APIOptions} from "@khanacademy/perseus";
+
 type GraphTypeSelectorProps = {
     graphType: string;
     onChange: (newGraphType: string) => void;
+    apiOptions?: APIOptions;
 };
 
 const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
+    const showTangent = isFeatureOn(
+        {apiOptions: props.apiOptions},
+        "interactive-graph-tangent",
+    );
+
     return (
         <SingleSelect
             selectedValue={props.graphType}
@@ -19,6 +28,9 @@ const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
             <OptionItem value="linear" label="Linear function" />
             <OptionItem value="quadratic" label="Quadratic function" />
             <OptionItem value="sinusoid" label="Sinusoid function" />
+            {showTangent && (
+                <OptionItem value="tangent" label="Tangent function" />
+            )}
             <OptionItem value="circle" label="Circle" />
             <OptionItem value="point" label="Point(s)" />
             <OptionItem value="linear-system" label="Linear System" />

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

@@ -369,6 +369,7 @@ class InteractiveGraphEditor extends React.Component<Props> {
                                     this.props.graph?.type ??
                                     InteractiveGraph.defaultProps.userInput.type
                                 }
+                                apiOptions={this.props.apiOptions}
                                 // TODO(LEMS-2656): remove TS suppression
                                 onChange={
                                     ((

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-settings.tsx

@@ -9,6 +9,7 @@ import {
     getQuadraticCoords,
     getSegmentCoords,
     getSinusoidCoords,
+    getTangentCoords,
 } from "@khanacademy/perseus";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -26,6 +27,7 @@ import StartCoordsMultiline from "./start-coords-multiline";
 import StartCoordsPoint from "./start-coords-point";
 import StartCoordsQuadratic from "./start-coords-quadratic";
 import StartCoordsSinusoid from "./start-coords-sinusoid";
+import StartCoordsTangent from "./start-coords-tangent";
 import {getDefaultGraphStartCoords} from "./util";
 
 import type {StartCoords} from "./types";
@@ -89,6 +91,14 @@ const StartCoordsSettingsInner = (props: Props) => {
                     onChange={onChange}
                 />
             );
+        case "tangent":
+            const tangentCoords = getTangentCoords(props, range, step);
+            return (
+                <StartCoordsTangent
+                    startCoords={tangentCoords}
+                    onChange={onChange}
+                />
+            );
         case "quadratic":
             const quadraticCoords = getQuadraticCoords(props, range, step);
             return (

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-tangent.module.css

@@ -0,0 +1,29 @@
+/* We have to use !important until wonder blocks is in the shared layer. */
+/* TODO(LEMS-3686): Remove the !important once we don't need it anymore. */
+.tile {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    background-color: var(
+        --wb-semanticColor-core-background-instructive-subtle
+    ) !important;
+    margin-top: var(--wb-sizing-size_080) !important;
+    padding: var(--wb-sizing-size_120) !important;
+    border-radius: var(--wb-sizing-size_080) !important;
+}
+
+.equationSection {
+    margin-top: var(--wb-sizing-size_120) !important;
+}
+
+.equationBody {
+    background-color: var(
+        --wb-semanticColor-core-background-neutral-subtle
+    ) !important;
+    border: var(--wb-border-width-thin) solid
+        var(--wb-semanticColor-core-border-neutral-subtle) !important;
+    margin-top: var(--wb-sizing-size_080) !important;
+    padding-left: var(--wb-sizing-size_080) !important;
+    padding-right: var(--wb-sizing-size_080) !important;
+    font-size: var(--wb-font-size-xSmall) !important;
+}

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-tangent.tsx

@@ -0,0 +1,61 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    BodyMonospace,
+    LabelLarge,
+    LabelMedium,
+} from "@khanacademy/wonder-blocks-typography";
+import * as React from "react";
+
+import CoordinatePairInput from "../../../components/coordinate-pair-input";
+
+import styles from "./start-coords-tangent.module.css";
+import {getTangentEquation} from "./util";
+
+import type {Coord} from "@khanacademy/perseus";
+
+type TangentCoords = [Coord, Coord];
+
+type Props = {
+    startCoords: TangentCoords;
+    onChange: (startCoords: TangentCoords) => void;
+};
+
+const StartCoordsTangent = (props: Props) => {
+    const {startCoords, onChange} = props;
+
+    return (
+        <>
+            {/* Current equation */}
+            <View className={styles.equationSection}>
+                <LabelMedium>Starting equation:</LabelMedium>
+                <BodyMonospace className={styles.equationBody}>
+                    {getTangentEquation(startCoords)}
+                </BodyMonospace>
+            </View>
+
+            {/* Points UI */}
+            <View className={styles.tile}>
+                <LabelLarge>Point 1:</LabelLarge>
+                <Strut size={spacing.small_12} />
+                <CoordinatePairInput
+                    coord={startCoords[0]}
+                    labels={["x", "y"]}
+                    onChange={(value) => onChange([value, startCoords[1]])}
+                />
+            </View>
+            <View className={styles.tile}>
+                <LabelLarge>Point 2:</LabelLarge>
+                <Strut size={spacing.small_12} />
+                <CoordinatePairInput
+                    coord={startCoords[1]}
+                    labels={["x", "y"]}
+                    onChange={(value) => onChange([startCoords[0], value])}
+                />
+            </View>
+        </>
+    );
+};
+
+export default StartCoordsTangent;

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/types.ts

@@ -10,7 +10,8 @@ type GraphTypesThatHaveStartCoords =
     | {type: "quadratic"}
     | {type: "ray"}
     | {type: "segment"}
-    | {type: "sinusoid"};
+    | {type: "sinusoid"}
+    | {type: "tangent"};
 
 export type StartCoords = Extract<
     PerseusGraphType,

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/util.ts

@@ -9,6 +9,7 @@ import {
     getQuadraticCoords,
     getSegmentCoords,
     getSinusoidCoords,
+    getTangentCoords,
 } from "@khanacademy/perseus";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 
@@ -64,6 +65,12 @@ export function getDefaultGraphStartCoords(
                 range,
                 step,
             );
+        case "tangent":
+            return getTangentCoords(
+                {...graph, startCoords: undefined},
+                range,
+                step,
+            );
         case "quadratic":
             return getQuadraticCoords(
                 {...graph, startCoords: undefined},
@@ -93,6 +100,11 @@ export function getDefaultGraphStartCoords(
     }
 }
 
+// TODO(LEMS-3956): Both getSinusoidEquation and getTangentEquation have two
+// formatting quirks: (1) hardcoded "x - " and ") + " produce ugly strings
+// like "x - -0.785" and "+ -1.000" when phase/offset are negative, and
+// (2) no division-by-zero guard when both points share the same x-coordinate.
+// These should be cleaned up together for consistency.
 export const getSinusoidEquation = (startCoords: [Coord, Coord]) => {
     // Get coefficients
     // It's assumed that p1 is the root and p2 is the first peak
@@ -117,6 +129,30 @@ export const getSinusoidEquation = (startCoords: [Coord, Coord]) => {
     );
 };
 
+export const getTangentEquation = (startCoords: [Coord, Coord]) => {
+    // Get coefficients
+    // It's assumed that p1 is the inflection point and p2 is a quarter-period away
+    const p1 = startCoords[0];
+    const p2 = startCoords[1];
+
+    // Resulting coefficients are canonical for this tangent curve
+    const amplitude = p2[1] - p1[1];
+    const angularFrequency = Math.PI / (4 * (p2[0] - p1[0]));
+    const phase = p1[0] * angularFrequency;
+    const verticalOffset = p1[1];
+
+    return (
+        "y = " +
+        amplitude.toFixed(3) +
+        "tan(" +
+        angularFrequency.toFixed(3) +
+        "x - " +
+        phase.toFixed(3) +
+        ") + " +
+        verticalOffset.toFixed(3)
+    );
+};
+
 export const getQuadraticEquation = (startCoords: [Coord, Coord, Coord]) => {
     const p1 = startCoords[0];
     const p2 = startCoords[1];
@@ -183,15 +219,12 @@ export const shouldShowStartCoordsUI = (
                 graph.snapTo !== "sides"
             );
         case "none":
-        case "tangent":
-            // TODO(LEMS-3955): return true for tangent once
-            // StartCoordsSettingsInner and getDefaultGraphStartCoords
-            // handle the tangent type
             return false;
         case "angle":
         case "circle":
         case "linear":
         case "linear-system":
+        case "tangent":
         case "quadratic":
         case "ray":
         case "segment":

packages/perseus/src/index.ts

@@ -116,6 +116,7 @@ export {
     getPolygonCoords,
     getSegmentCoords,
     getSinusoidCoords,
+    getTangentCoords,
     getQuadraticCoords,
     getAngleCoords,
 } from "./widgets/interactive-graphs/reducer/initialize-graph-state";

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

@@ -372,7 +372,7 @@ export function getSinusoidCoords(
     return coords;
 }
 
-function getTangentCoords(
+export function getTangentCoords(
     graph: PerseusGraphTypeTangent,
     range: [x: Interval, y: Interval],
     step: [x: number, y: number],