From e73373f48a4cc65dedf5f7c591fcfc6cce8f08c7 Mon Sep 17 00:00:00 2001
From: Tamara <60857422+Myranae@users.noreply.github.com>
Date: Mon, 17 Jun 2024 13:05:24 -0500
Subject: [PATCH] Make graph specific properties persist and display on preview
 graph (#1354)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Previously, graph specific properties, like number of sides and snapTo type for polygons, did not appear in the preview graph and did not persist or actually affect the preview graph. This makes it so the options selected affect the preview graph.

Issue: LEMS-2093

## Test plan:
- Pull up http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph-editor--with-mafs
- Play around with the different types of graphs and confirm the options affect the preview graph
- Confirm moving the shape or lines around does not reset the options
- Confirm all tests pass

Author: Myranae

Reviewers: nishasy, SonicScrewdriver, handeyeco

Required Reviewers:

Approved By: nishasy, nishasy

Checks: ✅ gerald, ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1354
---
 .changeset/witty-moons-develop.md             |  5 +++++
 .../interactive-graph-editor.test.tsx         | 17 +++++++++++++++++
 .../src/widgets/interactive-graph-editor.tsx  | 19 +++++++++++++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 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
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");
+    });
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
index cb04933609..6a8e9efd21 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,20 @@ class InteractiveGraphEditor extends React.Component<Props> {
         DeprecationMixin.UNSAFE_componentWillMount.call(this);
     }
 
+    static 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 +262,10 @@ class InteractiveGraphEditor extends React.Component<Props> {
                     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 = InteractiveGraphEditor.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