From f93a6341853c28919d18a5038dfe1327fbc11fab Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 17 Jun 2024 11:14:36 -0500 Subject: [PATCH 1/6] Add a function to build the graph key Function builds the graph key based on the "correct" object --- .../src/widgets/interactive-graph-editor.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx index cb04933609..21f6c76122 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx @@ -30,6 +30,7 @@ import type { PerseusInteractiveGraphWidgetOptions, APIOptionsWithDefaults, LockedFigure, + PerseusGraphType, } from "@khanacademy/perseus"; import type {PropsFor} from "@khanacademy/wonder-blocks-core"; @@ -198,6 +199,19 @@ class InteractiveGraphEditor extends React.Component { DeprecationMixin.UNSAFE_componentWillMount.call(this); } + buildGraphKey(correct: PerseusGraphType) { + const testGraphKey: any[] = []; + for (const key in correct) { + if (correct[key]) { + typeof correct[key] === "number" || + typeof correct[key] === "string" || + typeof correct[key] === "boolean" + ? testGraphKey.push(correct[key]) + : testGraphKey.push(0); + } + } + return testGraphKey.join(":"); + } render() { let graph; let equationString; @@ -247,10 +261,10 @@ class InteractiveGraphEditor extends React.Component { this.props.onChange({correct: correct}); }, } as const; - // This is used to force a remount of the graph component // when there's a significant change - const graphKey = `${correct.type}:${correct.numSegments || 0}`; + const graphKey = this.buildGraphKey(correct); + graph = ( // There are a bunch of props that renderer.jsx passes to widgets via // getWidgetProps() and widget-container.jsx that the editors don't From 1a6e81d59c2b455c7dac7925d2c3a81dc278549e Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 17 Jun 2024 11:15:54 -0500 Subject: [PATCH 2/6] Add space --- packages/perseus-editor/src/widgets/interactive-graph-editor.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx index 21f6c76122..36c2f795ee 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx @@ -212,6 +212,7 @@ class InteractiveGraphEditor extends React.Component { } return testGraphKey.join(":"); } + render() { let graph; let equationString; From 31dabac8bd907f2986c4157a1de9be759e431f0e Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 17 Jun 2024 11:43:56 -0500 Subject: [PATCH 3/6] Create witty-moons-develop.md --- .changeset/witty-moons-develop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-moons-develop.md diff --git a/.changeset/witty-moons-develop.md b/.changeset/witty-moons-develop.md new file mode 100644 index 0000000000..12bc576048 --- /dev/null +++ b/.changeset/witty-moons-develop.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-editor": minor +--- + +Fix interactive graph editor in storybook to display and persist options From 5fdea20db995b4039241c72b36dd1c66c0317e28 Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 17 Jun 2024 12:03:10 -0500 Subject: [PATCH 4/6] Export class method --- .../perseus-editor/src/widgets/interactive-graph-editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx index 36c2f795ee..699216d967 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx @@ -199,7 +199,7 @@ class InteractiveGraphEditor extends React.Component { DeprecationMixin.UNSAFE_componentWillMount.call(this); } - buildGraphKey(correct: PerseusGraphType) { + static buildGraphKey(correct: PerseusGraphType) { const testGraphKey: any[] = []; for (const key in correct) { if (correct[key]) { From a37046d5d30ad79df5596150c1a8c3871e58951e Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 17 Jun 2024 12:03:16 -0500 Subject: [PATCH 5/6] Add a test --- .../__tests__/interactive-graph-editor.test.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx index 830f844d45..27bcf4d35a 100644 --- a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx +++ b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx @@ -598,4 +598,21 @@ describe("InteractiveGraphEditor", () => { // Assert expect(ref.current?.getSaveWarnings()).toEqual([]); }); + + test("buildGraphKey returns the correct key", async () => { + // Arrange + const graph: PerseusGraphType = { + type: "polygon", + numSides: 4, + snapTo: "grid", + showAngles: true, + showSides: true, + }; + + // Act + const key = InteractiveGraphEditor.buildGraphKey(graph); + + // Assert + expect(key).toEqual("polygon:4:grid:true:true"); + }); }); From 2155a789547881e41bac71963db506f37c962b07 Mon Sep 17 00:00:00 2001 From: Tamara Date: Mon, 17 Jun 2024 12:11:37 -0500 Subject: [PATCH 6/6] Update code with the static class method --- .../perseus-editor/src/widgets/interactive-graph-editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx index 699216d967..6a8e9efd21 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx @@ -264,7 +264,7 @@ class InteractiveGraphEditor extends React.Component { } as const; // This is used to force a remount of the graph component // when there's a significant change - const graphKey = this.buildGraphKey(correct); + const graphKey = InteractiveGraphEditor.buildGraphKey(correct); graph = ( // There are a bunch of props that renderer.jsx passes to widgets via