[Interactive Graph][Axis labels] Make default x & y axis labels TeX o…

…n load Right now, the x and y labels when an interactive graph is first created show up as text. They should be showing up as text. - Add `$` around the "x" and "y" to make them show up as TeX Issue: none Test plan: `yarn jest packages/perseus/src/widget-ai-utils/interactive-graph/interactive-graph-ai-utils.test.ts` `yarn jest packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx`
Khan · Dec 18, 2024 · adbdd3b · adbdd3b
1 parent 78c5a77
commit adbdd3b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 35 deletions.
diff --git a/...ditor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx b/...ditor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx
@@ -548,7 +548,7 @@ describe("InteractiveGraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    labels: ["time", "y"],
+                    labels: ["time", "$y$"],
                 }),
                 undefined,
             ),
@@ -572,7 +572,7 @@ describe("InteractiveGraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    labels: ["x", "count"],
+                    labels: ["$x$", "count"],
                 }),
                 undefined,
             ),

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx b/...eus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
@@ -135,7 +135,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
             interactiveSizes.defaultBoxSizeSmall,
             interactiveSizes.defaultBoxSizeSmall,
         ],
-        labels: ["x", "y"],
+        labels: ["$x$", "$y$"],
         range: [
             [-10, 10],
             [-10, 10],

diff --git a/packages/perseus/src/widget-ai-utils/interactive-graph/interactive-graph-ai-utils.test.ts b/packages/perseus/src/widget-ai-utils/interactive-graph/interactive-graph-ai-utils.test.ts
@@ -55,7 +55,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -87,7 +87,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -114,7 +114,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -140,7 +140,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 center: [1, 1],
@@ -163,7 +163,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -191,7 +191,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -222,7 +222,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -262,7 +262,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -287,7 +287,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -313,7 +313,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -341,7 +341,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -373,7 +373,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -400,7 +400,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -430,7 +430,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -456,7 +456,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -484,7 +484,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -510,7 +510,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -539,7 +539,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -564,7 +564,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -592,7 +592,7 @@ describe("InteractiveGraph AI utils", () => {
                     [-10, 10],
                     [-10, 10],
                 ],
-                labels: ["x", "y"],
+                labels: ["$x$", "$y$"],
             },
             userInput: {
                 coords: [
@@ -613,7 +613,7 @@ describe("InteractiveGraph AI utils", () => {
                 [-10, 10],
                 [-10, 10],
             ],
-            labels: ["x", "y"],
+            labels: ["$x$", "$y$"],
         };
 
         const userInput: any = {
@@ -658,7 +658,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -702,7 +702,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         center: [0, 0],
@@ -739,7 +739,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -778,7 +778,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -823,7 +823,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-4, 4],
                             [-4, 4],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: undefined,
@@ -862,7 +862,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-1, 6],
                             [-1, 6],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -902,7 +902,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -943,7 +943,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -984,7 +984,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [
@@ -1027,7 +1027,7 @@ describe("InteractiveGraph AI utils", () => {
                             [-10, 10],
                             [-10, 10],
                         ],
-                        labels: ["x", "y"],
+                        labels: ["$x$", "$y$"],
                     },
                     userInput: {
                         coords: [

diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts
@@ -53,7 +53,7 @@ class InteractiveGraphQuestionBuilder {
         top?: number;
     };
     private gridStep: vec.Vector2 = [1, 1];
-    private labels: [string, string] = ["x", "y"];
+    private labels: [string, string] = ["$x$", "$y$"];
     private markings: "graph" | "grid" | "none" = "graph";
     private xRange: Interval = [-10, 10];
     private yRange: Interval = [-10, 10];