Khan / perseus / 5416555274

69%

push

github

Fix positioning of Graphie labels when MathJax is used to render TeX (#594)

## Summary:
There was a race between the code in Perseus that positions Graphie
labels and the code in webapp that updates MathJax CSS. If Perseus
measured the label's dimensions before MathJax updated its CSS, then the
measured dimensions of the label would be wrong and the label would get
positioned incorrectly.

To fix this, we measure and position the label when the TeX component
calls its onRender callback. The MathJax component doesn't call this
callback until the CSS is up to date.

Issue: https://khanacademy.atlassian.net/browse/LC-934

Test plan:

Follow the instructions in webapp to install a dev build of Perseus.

Visit
/math/arithmetic-home/multiply-divide/division-intro/e/dividing-with-visuals?devflagk=mathjax3
and run through the exercise several times. You should not see the
duplicated label problem described in the issue linked above.  (Note
that the labels are still duplicated; that's a problem in the content
that we can't fix.  But now they are positioned exactly on top of each
other, so the duplication is not visible.)

Author: benchristel

Reviewers: nixterrimus

Required Reviewers:

Approved By: nixterrimus

Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/594

7541 of 16333 branches covered (46.17%)

Branch coverage included in aggregate %.

20101 of 44488 relevant lines covered (45.18%)

1003.56 hits per line