[Interactive Graph] Open and Closing logic for unlimited polygon.

[catandthemachines]

Summary:

Adding opening and closing behavior to unlimited polygon including:

• New buttons for graph controls.
• Reducing redundancy between polygon and unlimited polygon behavior.
• And more robust testing for unlimited graph controls.

Issue: LEMS-2570

Test plan:

• Run yarn dev and enable Unlimited Polygon option in the Mafs dropdown. Or http://localhost:6006/?path=/story/perseus-widgets-interactive-graph--unlimited-polygon-with-mafs.
• Go the the exercise and build polygons with mouse or keyboard.
• Use the Close polygon button the close the polygon.
• The expectation is now the polygon should look and behave like other Mafs polygon graphs.
• Use the Open polygon button again to add or remove points.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/twenty-baboons-shave.md, packages/perseus/src/strings.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx, packages/perseus/src/widgets/interactive-graphs/interactive-graph.testdata.ts, packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx, packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx, packages/perseus/src/widgets/interactive-graphs/mafs-state-to-interactive-graph.test.ts, packages/perseus/src/widgets/interactive-graphs/types.ts, packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx, packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-action.ts, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +374 B (+0.03%)

Total Size: 1.29 MB

Filename	Size	Change
packages/perseus/dist/es/index.js	423 kB	+346 B (+0.08%)
packages/perseus/dist/es/strings.js	3.57 kB	+28 B (+0.79%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.9 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	77.8 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	697 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (d0842b3) and published it to npm. You
can install it using the tag PR1852.

Example:

yarn add @khanacademy/perseus@PR1852

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1852

[benchristel]

This is looking good! Thanks for backfilling tests for the other reducer actions.

I left some suggestions inline about things that I think could be refactored and simplified.

[benchristel]

Since this variable now controls whether the remove button is enabled, I think it should be called shouldEnableRemoveButton. It could also incorporate closedPolygon:

Suggested change

	const shouldShowRemoveButton =
	showRemovePointButton && focusedPointIndex !== null;
	const shouldEnableRemoveButton =
	!closedPolygon && showRemovePointButton && focusedPointIndex !== null;

I wonder if state.showRemovePointButton should also be renamed to state.enableRemovePointButton. Or if a different name entirely is appropriate, since that state variable doesn't completely control whether the button is enabled or not.

I'm kind of confused about when the remove button is enabled vs. disabled, and that might be a sign that it will be confusing to learners as well.

[benchristel]

Re: my comment above, maybe closedPolygon should be incorporated into shouldShowRemoveButton/shouldEnableRemoveButton so all the logic can be in one place.

[benchristel]

Thanks for the updates! LGTM 🎉

[anakaren-rojas]

a few nits but overall looks good
EDIT: Sorry i didn't realize this was already merged!

[anakaren-rojas]

small nit: the else isn't needed here since you return in your if statement

[anakaren-rojas]

nit: can this be moved into a handler function?

    function handleOnClick(event) {
        const elementRect =
            event.currentTarget.getBoundingClientRect();

        const x = event.clientX - elementRect.x;
        const y = event.clientY - elementRect.y;

        const graphCoordinates = pixelsToVectors(
            [[x, y]],
            graphConfig,
        );
        dispatch(actions.polygon.addPoint(graphCoordinates[0]));
    }

then

    <rect
        style={{
            fill: "rgba(0,0,0,0)",
            cursor: "crosshair",
        }}
        width={widthPx}
        height={heightPx}
        x={left}
        y={top}
        onClick={handleOnClick}
    />

[anakaren-rojas]

idk why I read this in a British accent
Do close the polygon 😆