[Experiment] AbsoluteValue with Claude implementation

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

@@ -903,6 +903,7 @@ export type LockedLabelType = {
 };
 
 export type PerseusGraphType =
+    | PerseusGraphTypeAbsoluteValue
     | PerseusGraphTypeAngle
     | PerseusGraphTypeCircle
     | PerseusGraphTypeLinear
@@ -1018,6 +1019,14 @@ export type PerseusGraphTypeSinusoid = {
     startCoords?: Coord[];
 };
 
+export type PerseusGraphTypeAbsoluteValue = {
+    type: "absolute_value";
+    // Expects 2 Coords: [vertex, second point]
+    coords?: [Coord, Coord] | null;
+    // The initial coordinates the graph renders with.
+    startCoords?: [Coord, Coord];
+};
+
 export type PerseusGraphTypeRay = {
     type: "ray";
     // Expects a list of 2 Coords
@@ -1079,12 +1088,18 @@ type SinusoidGraphCorrect = {
     coords: CollinearTuple;
 };
 
+type AbsoluteValueGraphCorrect = {
+    type: "absolute_value";
+    coords: [Coord, Coord];
+};
+
 type RayGraphCorrect = {
     type: "ray";
     coords: CollinearTuple;
 };
 
 export type PerseusGraphCorrectType =
+    | AbsoluteValueGraphCorrect
     | AngleGraphCorrect
     | CircleGraphCorrect
     | LinearGraphCorrect

packages/perseus-core/src/index.ts

@@ -247,6 +247,7 @@ export {
     generateIGRayGraph,
     generateIGSegmentGraph,
     generateIGSinusoidGraph,
+    generateIGAbsoluteValueGraph,
     generateIGLockedPoint,
     generateIGLockedLine,
     generateIGLockedVector,

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

@@ -113,7 +113,14 @@ const parsePerseusGraphTypeSinusoid = object({
     startCoords: optional(array(pairOfNumbers)),
 });
 
+const parsePerseusGraphTypeAbsoluteValue = object({
+    type: constant("absolute_value"),
+    coords: optional(nullable(pair(pairOfNumbers, pairOfNumbers))),
+    startCoords: optional(pair(pairOfNumbers, pairOfNumbers)),
+});
+
 export const parsePerseusGraphType = discriminatedUnionOn("type")
+    .withBranch("absolute_value", parsePerseusGraphTypeAbsoluteValue)
     .withBranch("angle", parsePerseusGraphTypeAngle)
     .withBranch("circle", parsePerseusGraphTypeCircle)
     .withBranch("linear", parsePerseusGraphTypeLinear)

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

@@ -10,6 +10,7 @@ import type {
     LockedPointType,
     LockedPolygonType,
     LockedVectorType,
+    PerseusGraphTypeAbsoluteValue,
     PerseusGraphTypeAngle,
     PerseusGraphTypeCircle,
     PerseusGraphTypeLinear,
@@ -145,6 +146,19 @@ export function generateIGSinusoidGraph(
     };
 }
 
+export function generateIGAbsoluteValueGraph(
+    options?: Partial<Omit<PerseusGraphTypeAbsoluteValue, "type">>,
+): PerseusGraphTypeAbsoluteValue {
+    return {
+        type: "absolute_value",
+        coords: [
+            [0, 2],
+            [2, 0],
+        ],
+        ...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,10 @@ const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
             <OptionItem value="linear" label="Linear function" />
             <OptionItem value="quadratic" label="Quadratic function" />
             <OptionItem value="sinusoid" label="Sinusoid function" />
+            <OptionItem
+                value="absolute_value"
+                label="Absolute value 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 "absolute_value":
+            invariant(b.type === "absolute_value");
+            return {...a, ...b};
         default:
             throw new UnreachableCaseError(a);
     }

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

@@ -0,0 +1,83 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    BodyMonospace,
+    LabelLarge,
+    LabelMedium,
+} from "@khanacademy/wonder-blocks-typography";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import CoordinatePairInput from "../../../components/coordinate-pair-input";
+
+import {getAbsoluteValueEquation} from "./util";
+
+import type {Coord} from "@khanacademy/perseus";
+
+type AbsoluteValueCoords = [Coord, Coord];
+
+type Props = {
+    startCoords: AbsoluteValueCoords;
+    onChange: (startCoords: AbsoluteValueCoords) => void;
+};
+
+const StartCoordsAbsoluteValue = (props: Props) => {
+    const {startCoords, onChange} = props;
+
+    return (
+        <>
+            {/* Current equation */}
+            <View style={styles.equationSection}>
+                <LabelMedium>Starting equation:</LabelMedium>
+                <BodyMonospace style={styles.equationBody}>
+                    {getAbsoluteValueEquation(startCoords)}
+                </BodyMonospace>
+            </View>
+
+            {/* Points UI */}
+            <View style={styles.tile}>
+                <LabelLarge>Vertex:</LabelLarge>
+                <Strut size={spacing.small_12} />
+                <CoordinatePairInput
+                    coord={startCoords[0]}
+                    labels={["x", "y"]}
+                    onChange={(value) => onChange([value, startCoords[1]])}
+                />
+            </View>
+            <View style={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>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    tile: {
+        backgroundColor: semanticColor.core.background.instructive.subtle,
+        marginTop: spacing.xSmall_8,
+        padding: spacing.small_12,
+        borderRadius: spacing.xSmall_8,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    equationSection: {
+        marginTop: spacing.small_12,
+    },
+    equationBody: {
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
+        marginTop: spacing.xSmall_8,
+        paddingLeft: spacing.xSmall_8,
+        paddingRight: spacing.xSmall_8,
+        fontSize: font.size.xSmall,
+    },
+});
+
+export default StartCoordsAbsoluteValue;

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

@@ -1,5 +1,6 @@
 import {vector as kvector} from "@khanacademy/kmath";
 import {
+    getAbsoluteValueCoords,
     getAngleCoords,
     getCircleCoords,
     getLineCoords,
@@ -19,6 +20,7 @@ import * as React from "react";
 
 import Heading from "../../../components/heading";
 
+import StartCoordsAbsoluteValue from "./start-coords-absolute-value";
 import StartCoordsAngle from "./start-coords-angle";
 import StartCoordsCircle from "./start-coords-circle";
 import StartCoordsLine from "./start-coords-line";
@@ -89,6 +91,18 @@ const StartCoordsSettingsInner = (props: Props) => {
                     onChange={onChange}
                 />
             );
+        case "absolute_value":
+            const absoluteValueCoords = getAbsoluteValueCoords(
+                props,
+                range,
+                step,
+            );
+            return (
+                <StartCoordsAbsoluteValue
+                    startCoords={absoluteValueCoords}
+                    onChange={onChange}
+                />
+            );
         case "quadratic":
             const quadraticCoords = getQuadraticCoords(props, range, step);
             return (

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

@@ -1,5 +1,6 @@
 import {angles, vector as kvector} from "@khanacademy/kmath";
 import {
+    getAbsoluteValueCoords,
     getAngleCoords,
     getCircleCoords,
     getLineCoords,
@@ -64,6 +65,12 @@ export function getDefaultGraphStartCoords(
                 range,
                 step,
             );
+        case "absolute_value":
+            return getAbsoluteValueCoords(
+                {...graph, startCoords: undefined},
+                range,
+                step,
+            );
         case "quadratic":
             return getQuadraticCoords(
                 {...graph, startCoords: undefined},
@@ -148,6 +155,22 @@ export const getQuadraticEquation = (startCoords: [Coord, Coord, Coord]) => {
     );
 };
 
+export const getAbsoluteValueEquation = (startCoords: [Coord, Coord]) => {
+    const vertex = startCoords[0];
+    const second = startCoords[1];
+    const h = vertex[0];
+    const k = vertex[1];
+    const x2 = second[0];
+    const y2 = second[1];
+    if (x2 === h) {
+        return "y = |x|";
+    }
+    const m = (y2 - k) / Math.abs(x2 - h);
+    return (
+        "y = " + m.toFixed(3) + "|x - " + h.toFixed(3) + "| + " + k.toFixed(3)
+    );
+};
+
 export const getAngleEquation = (
     startCoords: [Coord, Coord, Coord],
     allowReflexAngles: boolean = false,
@@ -184,6 +207,7 @@ export const shouldShowStartCoordsUI = (
             );
         case "none":
             return false;
+        case "absolute_value":
         case "angle":
         case "circle":
         case "linear":