Render Grapher axis labels as TeX when the Interactive Graph UI components are used

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)$"]);
+    });
 });

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}$`;
+}