[Interactive Graph Editor] Remove the use of graphKey for remounting (#…

…1385)

## Summary:
It turns out that the use of `graphKey` for remounting in
`interactive-graph-editor.tsx` is redundant, since this is also being
done by the `useEffect` in `mafs-graph.tsx`.

`graphKey` was also causing a warning to show up in the logs, possibly
from a remounting loop.

Here, `graphKey` is being removed altogether to stop the remounting issue.

[More info on Slack](https://khanacademy.slack.com/archives/C067UM1QAR4/p1719854190583499)

Issue: none

## Test plan:
Storybook
- http://localhost:6006/?path=/story/perseuseditor-editorpage--demo
- Add an interactive graph
- Open the browser console
- Move the graph in the "correct" preview (quickly! Don't hold for time before dragging)
- Confirm the warning doesn't appear
- Change properties of the graph (e.g. number of segments)
- Confirm that the preview changes correctly
- Repeat for every graph type

Author: nishasy

Reviewers: benchristel, mark-fitzgerald, Myranae, SonicScrewdriver

Required Reviewers:

Approved By: benchristel

Checks: ✅ gerald, ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (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), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1385

.changeset/heavy-buckets-think.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Remove the use of graphKey for remounting

packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx

@@ -617,21 +617,4 @@ 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,7 +30,6 @@ import type {
     PerseusInteractiveGraphWidgetOptions,
     APIOptionsWithDefaults,
     LockedFigure,
-    PerseusGraphType,
 } from "@khanacademy/perseus";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
@@ -199,20 +198,6 @@ 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;
@@ -262,9 +247,6 @@ 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 = InteractiveGraphEditor.buildGraphKey(correct);
 
             graph = (
                 // There are a bunch of props that renderer.jsx passes to widgets via
@@ -273,7 +255,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                 // @ts-expect-error - TS2769 - No overload matches this call.
                 <InteractiveGraph
                     {...graphProps}
-                    key={graphKey}
                     containerSizeClass={sizeClass}
                     apiOptions={{
                         ...this.props.apiOptions,