Fix MathML rendering

[akhuoa]

Fixes #78 and #126.

Problem

• MathJax: MathJax becomes performance‑intensive when rendering large volumes of equations.
• KaTeX: The mathematics content we have is in MathML, but KaTeX accepts only TeX as input.
• Default: Browsers support MathML, but rendering is incomplete because some MathML elements (e.g., mfence) are deprecated.

Solution

Fix MathML rendering using w3c/mathml-polyfills instead of using MathJax or KaTeX.

• Additionally, the mathematical equations are styled in middle alignment for better readability.

Testing

Before the update

• https://physiome.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math

After the update

• https://akhuoa.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math
• https://akhuoa.github.io/pmrapp-frontend/exposures/5a0/ohara_rudy_cipa_v1_2017.cellml/cellml_math

Note: There are empty content filters applied from #148.

[Copilot]

Pull request overview

This PR addresses broken/incomplete MathML rendering in the Mathematics view by switching from MathJax/KaTeX approaches to using the W3C MathML polyfills, and applying formatting/styling to improve equation readability.

Changes:

• Added a MathML transformer utility to load/apply W3C MathML polyfills and reformat MathML into an aligned table layout.
• Updated the Exposure detail Mathematics view to initialize polyfills, transform/format MathML from math.json, and display an empty-state message.
• Refined Mathematics view styling for centered, aligned equation rendering.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File	Description
src/utils/mathTransformer.ts	Loads polyfills, transforms legacy MathML, and formats MathML into an mtable-based layout.
src/components/organisms/ExposureDetail.vue	Integrates MathML transformation into the math view and updates math rendering styles/empty state.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[akhuoa]

@agarny, I've made changes to the font sizes and alignments in the MathML rendering.
https://akhuoa.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math?test

[agarny]

This looks good, but:

• I would expect all variable names to be in italics. Right now, variable names of one character are in italics while variable names of 2+ characters are not. So, not consistent.
• I would decrease the font size of a sub/supscript (e.g., in an exponential). From what I can tell, it's 95% of the "default" font size but I feel like it's not small enough. I can also see that it's also 95% for d/dt and a/b (among others?). Any particular reason?
• Replace ^ (in an if statement) with and (and the same for "or", "xor", and "not").

[akhuoa]

This looks good, but:

• I would expect all variable names to be in italics. Right now, variable names of one character are in italics while variable names of 2+ characters are not. So, not consistent.
• I would decrease the font size of a sub/supscript (e.g., in an exponential). From what I can tell, it's 95% of the "default" font size but I feel like it's not small enough. I can also see that it's also 95% for d/dt and a/b (among others?). Any particular reason?
• Replace ^ (in an if statement) with and (and the same for "or", "xor", and "not").

@agarny, I've updated the formats and font sizes.

• The variable names with one character are in italics, but those with 2+ characters are the browser's default. And it is now updated. 58bda98
• The font sizes by browser default are not consistent in some cases, which is why I added custom font sizes. Now, they are updated. 3a125c2 99511ad
• I've replaced all and, or, xor and not. 65b1ff6
• I've also updated the subscripts for those variables with underscores (based on OpenCOR). 958d6f7
• I've also formatted the numbers (based on OpenCOR). 1875327

The updates can be tested on https://akhuoa.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math?clearcache.

[agarny]

The updates can be tested on https://akhuoa.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math?clearcache.

Thanks, this looks much better... but I have just noticed:

• 3.1 e 5 which I would rather have rendered as 3.1·10<sup>5</sup>;
• the e for the exponential function is 𝕖 in italics (i.e. https://www.compart.com/en/unicode/U+1D556) while I would have expected a "normal" e.

If you want to mimic OpenCOR then:

• you should have greek letters converted (e.g., alpha -> α, beta -> β, gamma -> γ).

[akhuoa]

The updates can be tested on https://akhuoa.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math?clearcache.

Thanks, this looks much better... but I have just noticed:

• 3.1 e 5 which I would rather have rendered as 3.1·10<sup>5</sup>;
• the e for the exponential function is 𝕖 in italics (i.e. https://www.compart.com/en/unicode/U+1D556) while I would have expected a "normal" e.

If you want to mimic OpenCOR then:

• you should have greek letters converted (e.g., alpha -> α, beta -> β, gamma -> γ).

@agarny, thanks for the feedback. I've updated them.

• 3.1 e 5 has been updated as 3.1·10<sup>5</sup> in 8b6f5ca.
• The e in the exponential function has been updated in 3517a60.
• The Greek letters conversion in 48fd97d.

The updates are available on -
https://akhuoa.github.io/pmrapp-frontend/exposures/5f1/Tomek_model_endo.cellml/cellml_math?clearcache2