From 4bb2b8742c7396d212734aee34b5d64320ae1b18 Mon Sep 17 00:00:00 2001
From: Tamara <60857422+Myranae@users.noreply.github.com>
Date: Thu, 20 Jun 2024 12:16:23 -0500
Subject: [PATCH] Fallback to legacy graph with unlimited sides polygon (#1362)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Polygon graphs are almost fully migrated, but work on the unlimited sides feature is not slated to be completed until later. To allow us to move foward with Polygon QE and play testing, we are adding a fallback to the legacy graph for when `numSides` is set to `unlimited`. This can be easily removed once the unlimited sides feature is implemented.

Issue: LEMS-2105

## Test plan:
- Open local host storybook and navigate to the [Interactive Graph Editor withMafs story](http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph-editor--with-mafs)
- Confirm the Line Segment graph is using Mafs
- Change the graph type to Polygon and confirm it is also using Mafs
- Change number of sides to a new number. Confirm it is a Mafs graph. Change number of sides to unlimited. Confirm it is a legacy graph.
- Change back to a specific number of sides and confirm it reverts to a Mafs graph. Change to another graph type and confirm it is also still a Mafs graph.
- Confirm all checks pass.

Author: Myranae

Reviewers: benchristel, SonicScrewdriver

Required Reviewers:

Approved By: benchristel

Checks: ✅ gerald, ✅ codecov/project, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (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), ✅ gerald, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, 🚫 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: https://github.com/Khan/perseus/pull/1362
---
 .changeset/nervous-owls-retire.md                  |  5 +++++
 packages/perseus/src/widgets/interactive-graph.tsx | 12 ++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 .changeset/nervous-owls-retire.md

diff --git a/.changeset/nervous-owls-retire.md b/.changeset/nervous-owls-retire.md
new file mode 100644
index 0000000000..11bc441783
--- /dev/null
+++ b/.changeset/nervous-owls-retire.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Polygon interactive graphs use the legacy graph when numSides is set to unlimited
diff --git a/packages/perseus/src/widgets/interactive-graph.tsx b/packages/perseus/src/widgets/interactive-graph.tsx
index a4877678ff..00e6c9f8bb 100644
--- a/packages/perseus/src/widgets/interactive-graph.tsx
+++ b/packages/perseus/src/widgets/interactive-graph.tsx
@@ -1815,6 +1815,18 @@ class InteractiveGraph extends React.Component<Props, State> {
     }
 
     render() {
+        if (
+            this.props.graph.type === "polygon" &&
+            this.props.graph.numSides === "unlimited"
+        ) {
+            return (
+                <LegacyInteractiveGraph
+                    ref={this.legacyGraphRef}
+                    {...this.props}
+                />
+            );
+        }
+
         // Mafs shim
         if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
             const box = getInteractiveBoxFromSizeClass(