[LEMS-3950/poc-logarithm-interactive-graph] [Interactive Graph] POC Add logarithm graph in Interactive Graph widget

Author: ivyolamit

packages/perseus-core/src/data-schema.ts

@@ -913,7 +913,8 @@ export type PerseusGraphType =
     | PerseusGraphTypeQuadratic
     | PerseusGraphTypeRay
     | PerseusGraphTypeSegment
-    | PerseusGraphTypeSinusoid;
+    | PerseusGraphTypeSinusoid
+    | PerseusGraphTypeLogarithm;
 
 export type PerseusGraphTypeAngle = {
     type: "angle";
@@ -1018,6 +1019,18 @@ export type PerseusGraphTypeSinusoid = {
     startCoords?: Coord[];
 };
 
+export type PerseusGraphTypeLogarithm = {
+    type: "logarithm";
+    // Two points along the logarithmic curve.
+    coords?: Coord[] | null;
+    // Two points defining the vertical asymptote line.
+    asymptote?: [Coord, Coord] | null;
+    // The initial coordinates the graph renders with.
+    startCoords?: Coord[];
+    // The initial asymptote position the graph renders with.
+    startAsymptote?: [Coord, Coord];
+};
+
 export type PerseusGraphTypeRay = {
     type: "ray";
     // Expects a list of 2 Coords
@@ -1079,6 +1092,12 @@ type SinusoidGraphCorrect = {
     coords: CollinearTuple;
 };
 
+type LogarithmGraphCorrect = {
+    type: "logarithm";
+    coords: CollinearTuple;
+    asymptote: [Coord, Coord];
+};
+
 type RayGraphCorrect = {
     type: "ray";
     coords: CollinearTuple;
@@ -1095,7 +1114,8 @@ export type PerseusGraphCorrectType =
     | QuadraticGraphCorrect
     | RayGraphCorrect
     | SegmentGraphCorrect
-    | SinusoidGraphCorrect;
+    | SinusoidGraphCorrect
+    | LogarithmGraphCorrect;
 
 export type PerseusLabelImageWidgetOptions = {
     // Translatable Text; Tex representation of choices

packages/perseus-core/src/parse-perseus-json/perseus-parsers/interactive-graph-widget.ts

@@ -113,11 +113,20 @@ const parsePerseusGraphTypeSinusoid = object({
     startCoords: optional(array(pairOfNumbers)),
 });
 
+const parsePerseusGraphTypeLogarithm = object({
+    type: constant("logarithm"),
+    coords: optional(nullable(array(pairOfNumbers))),
+    asymptote: optional(nullable(pair(pairOfNumbers, pairOfNumbers))),
+    startCoords: optional(array(pairOfNumbers)),
+    startAsymptote: optional(pair(pairOfNumbers, pairOfNumbers)),
+});
+
 export const parsePerseusGraphType = discriminatedUnionOn("type")
     .withBranch("angle", parsePerseusGraphTypeAngle)
     .withBranch("circle", parsePerseusGraphTypeCircle)
     .withBranch("linear", parsePerseusGraphTypeLinear)
     .withBranch("linear-system", parsePerseusGraphTypeLinearSystem)
+    .withBranch("logarithm", parsePerseusGraphTypeLogarithm)
     .withBranch("none", parsePerseusGraphTypeNone)
     .withBranch("point", parsePerseusGraphTypePoint)
     .withBranch("polygon", parsePerseusGraphTypePolygon)

packages/perseus-core/src/utils/generators/interactive-graph-widget-generator.ts

@@ -20,6 +20,7 @@ import type {
     PerseusGraphTypeQuadratic,
     PerseusGraphTypeRay,
     PerseusGraphTypeSegment,
+    PerseusGraphTypeLogarithm,
     PerseusGraphTypeSinusoid,
     PerseusInteractiveGraphWidgetOptions,
 } from "../../data-schema";
@@ -145,6 +146,15 @@ export function generateIGSinusoidGraph(
     };
 }
 
+export function generateIGLogarithmGraph(
+    options?: Partial<Omit<PerseusGraphTypeLogarithm, "type">>,
+): PerseusGraphTypeLogarithm {
+    return {
+        type: "logarithm",
+        ...options,
+    };
+}
+
 export function generateIGLockedPoint(
     options?: Partial<Omit<LockedPointType, "type">>,
 ): LockedPointType {

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

@@ -19,6 +19,7 @@ const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
             <OptionItem value="linear" label="Linear function" />
             <OptionItem value="quadratic" label="Quadratic function" />
             <OptionItem value="sinusoid" label="Sinusoid function" />
+            <OptionItem value="logarithm" label="Logarithm 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

@@ -521,6 +521,9 @@ function mergeGraphs(
         case "sinusoid":
             invariant(b.type === "sinusoid");
             return {...a, ...b};
+        case "logarithm":
+            invariant(b.type === "logarithm");
+            return {...a, ...b};
         default:
             throw new UnreachableCaseError(a);
     }

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: "logarithm"};
 
 export type StartCoords = Extract<
     PerseusGraphType,

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

@@ -8,6 +8,7 @@ import {
     getPolygonCoords,
     getQuadraticCoords,
     getSegmentCoords,
+    getLogarithmCoords,
     getSinusoidCoords,
 } from "@khanacademy/perseus";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
@@ -64,6 +65,12 @@ export function getDefaultGraphStartCoords(
                 range,
                 step,
             );
+        case "logarithm":
+            return getLogarithmCoords(
+                {...graph, startCoords: undefined, startAsymptote: undefined},
+                range,
+                step,
+            ).coords;
         case "quadratic":
             return getQuadraticCoords(
                 {...graph, startCoords: undefined},
@@ -192,6 +199,7 @@ export const shouldShowStartCoordsUI = (
         case "ray":
         case "segment":
         case "sinusoid":
+        case "logarithm":
             return true;
         default:
             throw new UnreachableCaseError(graph);

packages/perseus-score/src/widgets/interactive-graph/score-interactive-graph.ts

@@ -144,6 +144,38 @@ function scoreInteractiveGraph(
                     message: null,
                 };
             }
+        } else if (
+            userInput.type === "logarithm" &&
+            rubric.correct.type === "logarithm" &&
+            userInput.coords != null &&
+            userInput.asymptote != null
+        ) {
+            // For logarithm, we compare the coefficients directly.
+            // The logarithm doesn't have periodic equivalences, so no
+            // canonical normalization is needed.
+            const guessCoeffs = getLogarithmCoeffs(
+                userInput.coords,
+                userInput.asymptote,
+            );
+            const correctCoeffs = getLogarithmCoeffs(
+                rubric.correct.coords,
+                rubric.correct.asymptote,
+            );
+            if (
+                guessCoeffs &&
+                correctCoeffs &&
+                approximateDeepEqual(
+                    [guessCoeffs.a, guessCoeffs.b, guessCoeffs.c],
+                    [correctCoeffs.a, correctCoeffs.b, correctCoeffs.c],
+                )
+            ) {
+                return {
+                    type: "points",
+                    earned: 1,
+                    total: 1,
+                    message: null,
+                };
+            }
         } else if (
             userInput.type === "circle" &&
             rubric.correct.type === "circle"
@@ -327,4 +359,53 @@ function scoreInteractiveGraph(
     };
 }
 
+// Compute logarithm coefficients from two points and an asymptote.
+// Uses the inverse exponential approach.
+// Formula: y = a * ln(b * x + c)
+function getLogarithmCoeffs(
+    coords: ReadonlyArray<Coord>,
+    asymptote: ReadonlyArray<Coord>,
+): {a: number; b: number; c: number} | undefined {
+    const p1 = coords[0];
+    const p2 = coords[1];
+    const asymptoteX = asymptote[0][0];
+
+    if (p1[1] === p2[1]) {
+        return;
+    }
+    if (p1[0] === asymptoteX || p2[0] === asymptoteX) {
+        return;
+    }
+
+    // Flip (x,y) -> (y,x) to convert to exponential
+    const flip = (coord: Coord): Coord => [coord[1], coord[0]];
+    const flippedCoords = [flip(p1), flip(p2)];
+    const cExp = asymptoteX;
+
+    const denom = flippedCoords[0][0] - flippedCoords[1][0];
+    if (denom === 0) {
+        return;
+    }
+
+    const bExp =
+        Math.log((flippedCoords[0][1] - cExp) / (flippedCoords[1][1] - cExp)) /
+        denom;
+    const aExp =
+        (flippedCoords[0][1] - cExp) / Math.exp(bExp * flippedCoords[0][0]);
+
+    if (!isFinite(aExp) || !isFinite(bExp) || aExp === 0) {
+        return;
+    }
+
+    const c = -cExp / aExp;
+    const b = 1 / aExp;
+    const a = 1 / bExp;
+
+    if (!isFinite(a) || !isFinite(b) || !isFinite(c)) {
+        return;
+    }
+
+    return {a, b, c};
+}
+
 export default scoreInteractiveGraph;

packages/perseus/src/index.ts

@@ -115,6 +115,7 @@ export {
     getPointCoords,
     getPolygonCoords,
     getSegmentCoords,
+    getLogarithmCoords,
     getSinusoidCoords,
     getQuadraticCoords,
     getAngleCoords,

packages/perseus/src/strings.ts

@@ -492,6 +492,35 @@ export type PerseusStrings = {
         point2X: string;
         point2Y: string;
     }) => string;
+    srLogarithmGraph: string;
+    srLogarithmPoint1: ({x, y}: {x: string; y: string}) => string;
+    srLogarithmPoint2: ({x, y}: {x: string; y: string}) => string;
+    srLogarithmDescription: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        asymptoteX: string;
+    }) => string;
+    srLogarithmInteractiveElements: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        asymptoteX: string;
+    }) => string;
     imageExploreButton: string;
     imageAlternativeTitle: string;
     imageDescriptionLabel: string;
@@ -1095,6 +1124,33 @@ export const strings = {
         message:
             "Sinusoid graph with midline intersection point at %(point1X)s comma %(point1Y)s and extremum point at %(point2X)s comma %(point2Y)s.",
     },
+    srLogarithmGraph: {
+        context:
+            "Aria label for the container containing a Logarithm function in the interactive graph widget.",
+        message: "A logarithm function on a coordinate plane.",
+    },
+    srLogarithmPoint1: {
+        context:
+            "Aria label for the first Point on the Logarithm function in the interactive graph widget.",
+        message: "Point 1 at %(x)s comma %(y)s.",
+    },
+    srLogarithmPoint2: {
+        context:
+            "Aria label for the second Point on the Logarithm function in the interactive graph widget.",
+        message: "Point 2 at %(x)s comma %(y)s.",
+    },
+    srLogarithmDescription: {
+        context:
+            "Screen reader description of the Logarithm function in the interactive graph widget.",
+        message:
+            "The graph shows a logarithmic curve passing through point %(point1X)s comma %(point1Y)s and point %(point2X)s comma %(point2Y)s with a vertical asymptote at x equals %(asymptoteX)s.",
+    },
+    srLogarithmInteractiveElements: {
+        context:
+            "Screen reader description of all the elements available to interact with within the Logarithm function in the interactive graph widget.",
+        message:
+            "Logarithm graph with point 1 at %(point1X)s comma %(point1Y)s, point 2 at %(point2X)s comma %(point2Y)s, and vertical asymptote at x equals %(asymptoteX)s.",
+    },
     imageExploreButton: "Explore image",
     imageAlternativeTitle: "Explore image and description",
     imageDescriptionLabel: "Description",
@@ -1430,6 +1486,25 @@ export const mockStrings: PerseusStrings = {
         `The graph shows a wave with a minimum value of ${minValue} and a maximum value of ${maxValue}. The wave completes a full cycle from ${cycleStart} to ${cycleEnd}.`,
     srSinusoidInteractiveElements: ({point1X, point1Y, point2X, point2Y}) =>
         `Sinusoid graph with midline intersection point at ${point1X} comma ${point1Y} and extremum point at ${point2X} comma ${point2Y}.`,
+    srLogarithmGraph: "A logarithm function on a coordinate plane.",
+    srLogarithmPoint1: ({x, y}) => `Point 1 at ${x} comma ${y}.`,
+    srLogarithmPoint2: ({x, y}) => `Point 2 at ${x} comma ${y}.`,
+    srLogarithmDescription: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }) =>
+        `The graph shows a logarithmic curve passing through point ${point1X} comma ${point1Y} and point ${point2X} comma ${point2Y} with a vertical asymptote at x equals ${asymptoteX}.`,
+    srLogarithmInteractiveElements: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }) =>
+        `Logarithm graph with point 1 at ${point1X} comma ${point1Y}, point 2 at ${point2X} comma ${point2Y}, and vertical asymptote at x equals ${asymptoteX}.`,
     imageExploreButton: "Explore image",
     imageAlternativeTitle: "Explore image and description",
     imageDescriptionLabel: "Description",