[Interactive Graph Editor: Storybook] Add a story for Point graph type start coords

[nishasy]

Summary:

There currently isn't a good way to manually test the start coords for Point graph
in storybook, so I'm adding a story for that here.

• Added story for point graph start coords in the interactive graph editor stories.
• Shortened the names of the stories so they show up neater in the files structure.
• Added numPoints to the stateful mafs graph useEffect so it appropriately updates
  the preview when the number of points is changed.
• Fixed the builder for point graphs so the default coords value is undefined and it
  calculates the correct coords itself. It was defaulting to [0, 0] before, which
  really didn't work when there was a different number of points.
• Added points graph to the flag utility so it uses the mafs version in storybook.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2209

Test plan:

Storybook

• http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-point
• Change the number of points and confirm that it looks correct in both previews

Screenshot

[github-actions]

Size Change: +92 B (+0.01%)

Total Size: 853 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	412 kB	+92 B (+0.02%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.8 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	273 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.23 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/grumpy-sheep-mate.md, packages/perseus-editor/src/__stories__/flags-for-api-options.ts, packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx, packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts, packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx

---

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.69%. Comparing base (b4e0b60) to head (b8e568a).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1482      +/-   ##
==========================================
+ Coverage   69.94%   70.69%   +0.74%     
==========================================
  Files         509      512       +3     
  Lines      105489   105529      +40     
  Branches     7591    11449    +3858     
==========================================
+ Hits        73780    74599     +819     
+ Misses      31520    30930     -590     
+ Partials      189        0     -189     

Files	Coverage Δ
...ctive-graphs/interactive-graph-question-builder.ts	100.00% <100.00%> (ø)
...widgets/interactive-graphs/stateful-mafs-graph.tsx	90.62% <100.00%> (-3.03%)	⬇️

... and 152 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b4e0b60...b8e568a. Read the comment docs.

[Myranae]

Looks good to me! Added some non-blocking questions/comments :)

[Myranae]

Comment: I wonder if there is a good way for us to leave a note/reminder about needing to add new information like this here and to the useEffect below. 🤔

[nishasy]

I'm really not sure how to do that in a way that's helpful/visible 🤔

[Myranae]

Suggestion: Might be helpful to have some comments here explaining what this chunk is for. Apologies, should have added that when I worked on this section too!

[Myranae]

Question: I don't think this affects this PR, but you mentioned in the summary that you changed this so it "calculates the correct coords itself." How does it do that?

[nishasy]

If I don't pass in any coords, then the graph automatically initializes with the default starting coords in initialize-graph-state.ts when it renders. If I hard-code it here, it doesn't initialize to the right one based on the number of points. I could also call the initializer function here, but that would be redundant.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1482

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

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