Make graph specific properties persist and display on preview graph (#…

…1354)

## 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: #1354

.changeset/witty-moons-develop.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Fix interactive graph editor in storybook to display and persist options

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

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