[Locked labels] View locked labels in an Interactive Graph

.changeset/violet-worms-invite.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked labels] View locked labels in an Interactive Graph

packages/perseus-editor/src/__stories__/flags-for-api-options.ts

@@ -15,6 +15,7 @@ export const flags = {
 
         // Locked figures flags
         "interactive-graph-locked-features-m2b": true,
+        "interactive-graph-locked-features-labels": true,
 
         // Start coords UI flags
         // TODO(LEMS-2228): Remove flags once this is fully released

packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx

@@ -135,7 +135,7 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
                 flags: {
                     mafs: {
                         ...flags.mafs,
-                        "interactive-graph-locked-features-m2b": false,
+                        "interactive-graph-locked-features-labels": false,
                     },
                 },
             }}
@@ -152,13 +152,13 @@ MafsWithLockedFiguresCurrent.parameters = {
     },
 };
 
-export const MafsWithLockedFiguresM2bFlag = (): React.ReactElement => {
+export const MafsWithLockedLabelsFlag = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview question={segmentWithLockedFigures} />
     );
 };
 
-MafsWithLockedFiguresM2bFlag.parameters = {
+MafsWithLockedLabelsFlag.parameters = {
     chromatic: {
         // Disabling because this isn't visually testing anything on the
         // initial load of the editor page.

packages/perseus-editor/src/components/__tests__/util.test.ts

@@ -98,6 +98,17 @@ describe("getDefaultFigureForType", () => {
             directionalAxis: "x",
         });
     });
+
+    test("should return a 'label' with default values", () => {
+        const figure = getDefaultFigureForType("label");
+        expect(figure).toEqual({
+            type: "label",
+            coord: [0, 0],
+            text: "",
+            color: "grayH",
+            size: "medium",
+        });
+    });
 });
 
 describe("degreeToRadian", () => {

packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx

@@ -159,6 +159,13 @@ const LockedFiguresSection = (props: Props) => {
             {isExpanded && (
                 <View>
                     {figures?.map((figure, index) => {
+                        if (figure.type === "label") {
+                            // TODO(LEMS-1795): Add locked label settings.
+                            // Remove this block once label locked figure
+                            // settings are implemented.
+                            return;
+                        }
+
                         return (
                             <LockedFigureSettings
                                 key={`${uniqueId}-locked-${figure}-${index}`}

packages/perseus-editor/src/components/util.ts

@@ -22,6 +22,7 @@ import type {
     LockedVectorType,
     LockedPolygonType,
     LockedFunctionType,
+    LockedLabelType,
     PerseusGraphType,
     Coord,
 } from "@khanacademy/perseus";
@@ -73,6 +74,7 @@ export function getDefaultFigureForType(type: "vector"): LockedVectorType;
 export function getDefaultFigureForType(type: "ellipse"): LockedEllipseType;
 export function getDefaultFigureForType(type: "polygon"): LockedPolygonType;
 export function getDefaultFigureForType(type: "function"): LockedFunctionType;
+export function getDefaultFigureForType(type: "label"): LockedLabelType;
 export function getDefaultFigureForType(type: LockedFigureType): LockedFigure;
 export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
     switch (type) {
@@ -139,6 +141,14 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
                 equation: "x^2",
                 directionalAxis: "x",
             };
+        case "label":
+            return {
+                type: "label",
+                coord: [0, 0],
+                text: "",
+                color: DEFAULT_COLOR,
+                size: "medium",
+            };
         default:
             throw new UnreachableCaseError(type);
     }

packages/perseus/src/index.ts

@@ -180,6 +180,7 @@ export type {
     LockedEllipseType,
     LockedPolygonType,
     LockedFunctionType,
+    LockedLabelType,
     PerseusGraphType,
     PerseusAnswerArea,
     PerseusExpressionWidgetOptions,

packages/perseus/src/perseus-types.ts

@@ -718,7 +718,8 @@ export type LockedFigure =
     | LockedVectorType
     | LockedEllipseType
     | LockedPolygonType
-    | LockedFunctionType;
+    | LockedFunctionType
+    | LockedLabelType;
 export type LockedFigureType = LockedFigure["type"];
 
 export type LockedPointType = {
@@ -780,6 +781,16 @@ export type LockedFunctionType = {
     domain?: Interval;
 };
 
+// Not associated with a specific figure
+export type LockedLabelType = {
+    type: "label";
+    coord: Coord;
+    // TeX-supported string
+    text: string;
+    color: LockedFigureColor;
+    size: "small" | "medium" | "large";
+};
+
 export type PerseusGraphType =
     | PerseusGraphTypeAngle
     | PerseusGraphTypeCircle

packages/perseus/src/types.ts

@@ -152,6 +152,11 @@ export const InteractiveGraphLockedFeaturesFlags = [
      * new Mafs interactive-graph widget (locked functions).
      */
     "interactive-graph-locked-features-m2b",
+    /**
+     * Enables/Disables locked features in the new Mafs interactive-graph
+     * widget (locked labels).
+     */
+    "interactive-graph-locked-features-labels",
 ] as const;
 
 export const InteractiveGraphEditorFlags = [

packages/perseus/src/widgets/__stories__/interactive-graph.stories.tsx

@@ -22,6 +22,7 @@ import {
     segmentWithLockedPolygons,
     staticGraphQuestion,
     staticGraphQuestionWithAnotherWidget,
+    segmentWithLockedLabels,
 } from "../__testdata__/interactive-graph.testdata";
 
 import type {APIOptions} from "../../types";
@@ -36,6 +37,7 @@ const enableMafs: APIOptions = {
             segment: true,
             polygon: true,
             angle: true,
+            "interactive-graph-locked-features-labels": true,
         },
     },
 };
@@ -154,6 +156,13 @@ export const LockedPolygon = (args: StoryArgs): React.ReactElement => (
     />
 );
 
+export const LockedLabel = (args: StoryArgs): React.ReactElement => (
+    <RendererWithDebugUI
+        apiOptions={{...enableMafs}}
+        question={segmentWithLockedLabels}
+    />
+);
+
 export const Sinusoid = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={sinusoidQuestion} />
 );

packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts

@@ -804,6 +804,22 @@ export const segmentWithLockedFunction = (
         .build();
 };
 
+export const segmentWithLockedLabels: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .addLockedLabel("small \\frac{1}{2}", [-6, 2], {
+            color: "pink",
+            size: "small",
+        })
+        .addLockedLabel("medium E_0 = mc^2", [1, 2], {
+            color: "blue",
+            size: "medium",
+        })
+        .addLockedLabel("large \\sqrt{2a}", [-3, -2], {
+            color: "green",
+            size: "large",
+        })
+        .build();
+
 export const segmentWithLockedFigures: PerseusRenderer =
     interactiveGraphQuestionBuilder()
         .addLockedPointAt(-7, -7)
@@ -822,6 +838,7 @@ export const segmentWithLockedFigures: PerseusRenderer =
         .addLockedFunction("sin(x)", {
             color: "red",
         })
+        .addLockedLabel("\\sqrt{\\frac{1}{2}}", [6, -5])
         .build();
 
 export const quadraticQuestion: PerseusRenderer =

packages/perseus/src/widgets/__tests__/interactive-graph.test.tsx

@@ -35,6 +35,7 @@ import {
     segmentWithLockedEllipses,
     segmentWithLockedEllipseWhite,
     segmentWithLockedFunction,
+    segmentWithLockedLabels,
     segmentWithLockedLineQuestion,
     segmentWithLockedPointsQuestion,
     segmentWithLockedPointsWithColorQuestion,
@@ -861,4 +862,48 @@ describe("locked layer", () => {
         expect(PlotOfXMock).toHaveBeenCalledTimes(0);
         expect(PlotOfYMock).toHaveBeenCalledTimes(1);
     });
+
+    it("should render locked labels", async () => {
+        // Arrange
+        const {container} = renderQuestion(segmentWithLockedLabels, {
+            flags: {
+                mafs: {
+                    segment: true,
+                    "interactive-graph-locked-features-labels": true,
+                },
+            },
+        });
+
+        // Act
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const labels = container.querySelectorAll(".locked-label");
+
+        // Assert
+        expect(labels).toHaveLength(3);
+
+        // content
+        expect(labels[0]).toHaveTextContent("small \\frac{1}{2}");
+        expect(labels[1]).toHaveTextContent("medium E_0 = mc^2");
+        expect(labels[2]).toHaveTextContent("large \\sqrt{2a}");
+
+        // styles
+        expect(labels[0]).toHaveStyle({
+            color: lockedFigureColors["pink"],
+            fontSize: "14px", // small
+            left: "80px",
+            top: "160px",
+        });
+        expect(labels[1]).toHaveStyle({
+            color: lockedFigureColors["blue"],
+            fontSize: "16px", // medium
+            left: "220px",
+            top: "160px",
+        });
+        expect(labels[2]).toHaveStyle({
+            color: lockedFigureColors["green"],
+            fontSize: "20px", // large
+            left: "140px",
+            top: "240px",
+        });
+    });
 });

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

@@ -1821,6 +1821,11 @@ class InteractiveGraph extends React.Component<Props, State> {
             return (
                 <StatefulMafsGraph
                     {...this.props}
+                    showLabelsFlag={
+                        this.props.apiOptions?.flags?.["mafs"]?.[
+                            "interactive-graph-locked-features-labels"
+                        ]
+                    }
                     ref={this.mafsRef}
                     gridStep={gridStep}
                     snapStep={snapStep}

packages/perseus/src/widgets/interactive-graphs/graph-locked-labels-layer.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import LockedLabel from "./locked-figures/locked-label";
+
+import type {LockedFigure} from "../../perseus-types";
+
+type Props = {
+    lockedFigures: ReadonlyArray<LockedFigure>;
+};
+
+export default function GraphLockedLabelsLayer(props: Props) {
+    const {lockedFigures} = props;
+
+    return lockedFigures.map((figure, i) => {
+        if (figure.type === "label") {
+            return <LockedLabel key={`label-${i}`} {...figure} />;
+        }
+
+        // TODO(LEMS-2271): Add support for labels within
+        // other locked figure types
+        return null;
+    });
+}

packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx

@@ -59,6 +59,12 @@ const GraphLockedLayer = (props: Props) => {
                                 {...figure}
                             />
                         );
+                    case "label":
+                        // This is rendered outside the SVG element, since
+                        // TeX cannot be rendered inside an SVG.
+                        // See graph-locked-labels-layer.tsx for
+                        // the component that renders these.
+                        return null;
                     default:
                         /**
                          * Devlopment-time future-proofing: This should

packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts

@@ -961,4 +961,41 @@ describe("InteractiveGraphQuestionBuilder", () => {
             },
         ]);
     });
+
+    it("adds a locked label", () => {
+        const question: PerseusRenderer = interactiveGraphQuestionBuilder()
+            .addLockedLabel("the text", [1, 2])
+            .build();
+        const graph = question.widgets["interactive-graph 1"];
+
+        expect(graph.options.lockedFigures).toEqual([
+            {
+                type: "label",
+                text: "the text",
+                coord: [1, 2],
+                color: "grayH",
+                size: "medium",
+            },
+        ]);
+    });
+
+    it("adds a locked label with options", () => {
+        const question: PerseusRenderer = interactiveGraphQuestionBuilder()
+            .addLockedLabel("some other text", [15, 2], {
+                color: "green",
+                size: "large",
+            })
+            .build();
+        const graph = question.widgets["interactive-graph 1"];
+
+        expect(graph.options.lockedFigures).toEqual([
+            {
+                type: "label",
+                text: "some other text",
+                coord: [15, 2],
+                color: "green",
+                size: "large",
+            },
+        ]);
+    });
 });

packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts

@@ -6,6 +6,7 @@ import type {
     LockedFigureColor,
     LockedFigureFillType,
     LockedFunctionType,
+    LockedLabelType,
     LockedLineType,
     LockedPointType,
     LockedPolygonType,
@@ -383,6 +384,27 @@ class InteractiveGraphQuestionBuilder {
         return this;
     }
 
+    addLockedLabel(
+        text: string,
+        coord: Coord,
+        options?: {
+            color?: LockedFigureColor;
+            size?: "small" | "medium" | "large";
+        },
+    ) {
+        const lockedLabel: LockedLabelType = {
+            type: "label",
+            coord,
+            text,
+            color: "grayH",
+            size: "medium",
+            ...options,
+        };
+
+        this.addLockedFigure(lockedLabel);
+        return this;
+    }
+
     private createLockedPoint(
         x: number,
         y: number,