diff --git a/.changeset/loud-poets-appear.md b/.changeset/loud-poets-appear.md new file mode 100644 index 00000000000..7c2e06d3b36 --- /dev/null +++ b/.changeset/loud-poets-appear.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-core": patch +--- + +When the `grapher-to-interactive-graph` feature flag is on, Grapher axis labels are now interpreted as TeX. This preserves the existing behavior of Grapher. diff --git a/packages/perseus-core/src/widgets/grapher/to-interactive-graph.test.ts b/packages/perseus-core/src/widgets/grapher/to-interactive-graph.test.ts index 09505d7ea35..f354947baf1 100644 --- a/packages/perseus-core/src/widgets/grapher/to-interactive-graph.test.ts +++ b/packages/perseus-core/src/widgets/grapher/to-interactive-graph.test.ts @@ -54,4 +54,18 @@ describe("convertGrapherOptionsToInteractiveGraph", () => { type: "sinusoid", }); }); + + it("wraps axis labels in $...$ delimiters so they are interpreted as TeX", () => { + const grapher = generateGrapherWidgetOptions({ + availableTypes: ["sinusoid"], + graph: { + ...generateGrapherWidgetOptions().graph, + labels: ["x", "f(x)"], + }, + }); + + const ig = convertGrapherOptionsToInteractiveGraph(grapher); + + expect(ig?.labels).toEqual(["$x$", "$f(x)$"]); + }); }); diff --git a/packages/perseus-core/src/widgets/grapher/to-interactive-graph.ts b/packages/perseus-core/src/widgets/grapher/to-interactive-graph.ts index 1d1ef19d063..06e2a8f792d 100644 --- a/packages/perseus-core/src/widgets/grapher/to-interactive-graph.ts +++ b/packages/perseus-core/src/widgets/grapher/to-interactive-graph.ts @@ -40,7 +40,7 @@ export function convertGrapherOptionsToInteractiveGraph( snapStep: grapherOptions.graph.snapStep, backgroundImage: grapherOptions.graph.backgroundImage, markings: grapherOptions.graph.markings, - labels: grapherOptions.graph.labels, + labels: grapherOptions.graph.labels.map(wrapTexInDelimitersForMarkdown), labelLocation: "onAxis", showAxisArrows: { xMin: true, @@ -187,3 +187,7 @@ function grapherAnswerTypesToPerseusGraphType( function grapherFunctionTypeToInteractiveGraphType(type: GrapherFunctionType) { return type === "absolute_value" ? "absolute-value" : type; } + +function wrapTexInDelimitersForMarkdown(tex): string { + return `$${tex}$`; +}