Skip to content

Commit

Permalink
[Interactive Graph][Axis labels] Make default x & y axis labels TeX o…
Browse files Browse the repository at this point in the history 
…n load (#2033)

## Summary:
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`

Before
<img width="858" alt="Screenshot 2024-12-18 at 3 16 30 PM" src="https://github.com/user-attachments/assets/0533c9a2-3cee-41ae-96f9-dca4981f6c0a" />

After
<img width="863" alt="Screenshot 2024-12-18 at 3 17 11 PM" src="https://github.com/user-attachments/assets/87596df0-fa29-430d-8021-5285bd538773" />

Author: nishasy

Reviewers: jeremywiebe, catandthemachines, anakaren-rojas

Required Reviewers:

Approved By: jeremywiebe, catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ⏹️  [cancelled] Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏹️  [cancelled] Check builds for changes in size (ubuntu-latest, 20.x), ⏹️  [cancelled] Cypress (ubuntu-latest, 20.x), ⏹️  [cancelled] Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x)

Pull Request URL: #2033
  • Loading branch information
@nishasy
nishasy authored Dec 18, 2024
1 parent c8b3463 commit 881c0aa
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 35 deletions.
6 changes: 6 additions & 0 deletions .changeset/soft-lizards-lie.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@khanacademy/perseus": patch
"@khanacademy/perseus-editor": patch
---

[Interactive Graph][axis labels] Make default x & y axis labels TeX on load
4 changes: 2 additions & 2 deletions ...ditor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,7 +548,7 @@ describe("InteractiveGraphSettings", () => {
await waitFor(() =>
expect(onChange).toHaveBeenCalledWith(
expect.objectContaining({
labels: ["time", "y"],
labels: ["time", "$y$"],
}),
undefined,
),
Expand All @@ -572,7 +572,7 @@ describe("InteractiveGraphSettings", () => {
await waitFor(() =>
expect(onChange).toHaveBeenCalledWith(
expect.objectContaining({
labels: ["x", "count"],
labels: ["$x$", "count"],
}),
undefined,
),
Expand Down
2 changes: 1 addition & 1 deletion ...eus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
62 changes: 31 additions & 31 deletions packages/perseus/src/widget-ai-utils/interactive-graph/interactive-graph-ai-utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -87,7 +87,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -114,7 +114,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand All @@ -140,7 +140,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
center: [1, 1],
Expand All @@ -163,7 +163,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -191,7 +191,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -222,7 +222,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -262,7 +262,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -287,7 +287,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand All @@ -313,7 +313,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -341,7 +341,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -373,7 +373,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -400,7 +400,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -430,7 +430,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -456,7 +456,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -484,7 +484,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -510,7 +510,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -539,7 +539,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -564,7 +564,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -592,7 +592,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand All @@ -613,7 +613,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
};

const userInput: any = {
Expand Down Expand Up @@ -658,7 +658,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -702,7 +702,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
center: [0, 0],
Expand Down Expand Up @@ -739,7 +739,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -778,7 +778,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -823,7 +823,7 @@ describe("InteractiveGraph AI utils", () => {
[-4, 4],
[-4, 4],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: undefined,
Expand Down Expand Up @@ -862,7 +862,7 @@ describe("InteractiveGraph AI utils", () => {
[-1, 6],
[-1, 6],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -902,7 +902,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -943,7 +943,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -984,7 +984,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down Expand Up @@ -1027,7 +1027,7 @@ describe("InteractiveGraph AI utils", () => {
[-10, 10],
[-10, 10],
],
labels: ["x", "y"],
labels: ["$x$", "$y$"],
},
userInput: {
coords: [
Expand Down
2 changes: 1 addition & 1 deletion packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down

0 comments on commit 881c0aa

Please sign in to comment.