Interactive Graph Editor: Make shared graph settings collapsable to save space

[jeremywiebe]

Summary:

The shared graph settings (like range, snap step, grid step, etc). take up a bunch of vertical space in the graph editor. Now that we're also adding locked figures, the editor is growing even taller and unwieldy.

This PR adds a small heading above the common graph settings and enables "tap-to-toggle" on that header to expand/collapse the area.

Screen.Recording.2024-05-16.at.3.05.58.PM.mov

Issue: "none"

Test plan:

[github-actions]

Size Change: +313 B (+0.04%)

Total Size: 839 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	268 kB	+355 B (+0.13%)
packages/perseus/dist/es/index.js	403 kB	-42 B (-0.01%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-error/dist/es/index.js	877 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Attention: Patch coverage is 75.34247% with 72 lines in your changes are missing coverage. Please review.

Project coverage is 70.15%. Comparing base (9d27c76) to head (9e90d37).
Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1287      +/-   ##
==========================================
+ Coverage   68.88%   70.15%   +1.27%     
==========================================
  Files         477      481       +4     
  Lines      101842   102000     +158     
  Branches     5121    10309    +5188     
==========================================
+ Hits        70151    71558    +1407     
+ Misses      31576    30442    -1134     
+ Partials      115        0     -115     

Files	Coverage Δ
...itor/src/components/interactive-graph-settings.tsx	89.63% <75.34%> (-2.12%)	⬇️

... and 131 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 9d27c76...9e90d37. Read the comment docs.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/grumpy-laws-arrive.md, packages/perseus-editor/src/components/interactive-graph-settings.tsx, packages/perseus-editor/src/components/__tests__/interactive-graph-settings.test.tsx

---

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

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1287

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

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

[benchristel]

I left a couple comments inline, but once those are addressed I think this is good to go!

[benchristel]

Could we use spacing constants here instead of the magic -10?

FEI is talking about switching to rems for all measurement, for accessibility. It would be great to reduce our dependency on pixels if we can.

Also, minor: marginInline is the i18n-ready version of marginLeft + marginRight. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline

[jeremywiebe]

Switched to marginInline, thanks.

For now, this must be exactly -10 because it negates the @editorPadding Less variable from perseus-editor.less.

[jeremywiebe]

I added a comment. But I'll reproduce it here. The value is the inverse of a Less variable @editorPadding. If we moved the value to be a CSS variable, we could use it in both the Less file var(--editor-padding) as well as in this Aphrodite style (marginInline: calc(-1 * --editor-padding).

I haven't done that in this PR though as I think we'd want to talk about if that's a way we want to move forward before I start a new pattern.