MathML or Latex - how we implemented a changing salary in calculating salary using MathJax
The article will be useful to web developers who are thinking about displaying mathematical formulas in the browser, and, perhaps, other IT-s for general development.
Our company has already introduced a staff incentive system (KPI) based on Redmine, which combines the functions of calculating salary. I will tell about her in a nutshell.
Each position has some kind of salary, the employee holding the position can work nicely and multiply his salary by the performance factor, which is calculated on the basis of a bunch of indicators set for his position. The coefficient of performance can be either greater or less than one. Thus, by modeling the indicators, it is possible to encourage employees of certain positions to work in a certain direction.
')
It might look something like this:
Over time, we came to the conclusion that the salary of some posts should also vary depending on various indicators. For example, for pharmacy managers, the base salary should depend on the cash flow of the pharmacy. Moreover, this dependence may be different!
An important feature that must always be taken into account when implementing KPI is transparency! The employee should always know why he received exactly this kind of RFP, where he failed, why the indicator considered that way.
Therefore, it became necessary, in addition to calculating the base salary, to also demonstrate how the salary was calculated.
There are currently two main standards for displaying formulas in the browser: Latex and MathML
I painfully long chose which technology to use. As a result, made several conclusions. I hope they will be useful to the community.
The main advantage of Latex in the brevity of the record. Otherwise, in my opinion , this format is inferior to MathML.
For example, the formula entry
in Latex it looks like this:
In MathML, the same thing would have been written much more cumbersome:
MathML is pure XML, from here a simpler parsing for own needs, if necessary.
MathML seemed more understandable and quickly mastered the format. Although this opinion is individual and controversial.
MathML is supported by most modern browsers, except Chrome, which refused to support this format, referring to the MathJax library. This means that in Firefox, for example, you do not need to connect additional libraries, the browser will parse and display the formula specified above without the help of third-party libraries.
“MathML” allows you to add a handful of useful additions to the formula. For example, it was vital for us to get a pop-up hint to certain values ​​of the formula, so that the employee could see where this value came from. For this MathML has a maction tag:
As a result, when you hover over the value, the user will see a tooltip:
Funny, but the most understandable documentation on the format seemed documentation Mozilla. I recommend it to those who will be poking around in this format: developer.mozilla.org/en-US/docs/Web/MathML/Element
MathML is good, but unfortunately, it is not supported by all browsers. There is a MathJax library that allows you to parse MathML into HTML, SVG, etc. She, by the way, parsit Latex rejected by me.
The library does a good job with parsing formulas, but it has drawbacks.
The largest, in my opinion, its volume is 32.9 Mb in compressed form. Of course, not everything will be given to the client when the formula is drawn, but by itself such an amount of js-library is annoying. We, for example, needed to distribute it to external customers.
Initially connecting the entire library and implementing the task, I randomly threw a bunch of folders out of it. The method of "spear", checking that nothing is broken. Size reduced to 16 Mb. Basically, I threw out folders with fonts and unnecessary output formats (for example, SVG).
I did not find competent documentation on reducing the volume of the library.
The library is quite difficult to learn. I was picking for a long time, disabling unnecessary chips in it. Here are the useful configuration settings that turned out to be useful:
First, we have each formula opened in a separate window, which is loaded asynchronously (via AJAX). Therefore, there is no need to load the library when the user has not clicked on the link. Something like this:
The library supports dynamic loading ( docs.mathjax.org/en/latest/dynamic.html is written in detail here). Relatively speaking, you need to dynamically add a library declaration to the “head” tag and only do this if the library has not been connected before:
Dynamic library connection had problems with formula rendering. The formula was rendered only when the libraries were loaded in the first, with a second click and the opening of the window, the formula was not rendered. The construction that forced the rendering of formulas on the page helped:
The rendering of the formula is not instantaneous, so the user is better to show the preloader, for this there is a design:
Sometimes it's useful to zoom in:
If, after rendering the formula, you need to run some additional javascript, you can use the construction:
To disable the additional menu that can be called by right-clicking the mouse and disable the zoom of the formula:
Until recently, I was not abandoned by the idea of ​​parsing a mathematical formula according to which the actual calculation will be made in MathML format. That is, in the database I wanted to save one formula of the form:
And the mathml-design is obtained from the initial formula:
As a result, I concluded that this is impossibly difficult and not always justified. In a mathml formula there may be a bunch of elements that cannot be stored in a regular formula, for example, tooltips, color highlighting, etc. Currently, we save two formulas in the database, one for the direct calculation of the value, and another for the display to the user of the calculation system.
I try to write articles after being faced with difficulties I did not find a clear and quick solution to my problems. I think my specific article will be useful to someone.
Our company has already introduced a staff incentive system (KPI) based on Redmine, which combines the functions of calculating salary. I will tell about her in a nutshell.
Each position has some kind of salary, the employee holding the position can work nicely and multiply his salary by the performance factor, which is calculated on the basis of a bunch of indicators set for his position. The coefficient of performance can be either greater or less than one. Thus, by modeling the indicators, it is possible to encourage employees of certain positions to work in a certain direction.
')
It might look something like this:
Over time, we came to the conclusion that the salary of some posts should also vary depending on various indicators. For example, for pharmacy managers, the base salary should depend on the cash flow of the pharmacy. Moreover, this dependence may be different!
An important feature that must always be taken into account when implementing KPI is transparency! The employee should always know why he received exactly this kind of RFP, where he failed, why the indicator considered that way.
Therefore, it became necessary, in addition to calculating the base salary, to also demonstrate how the salary was calculated.
Latex and MathML
There are currently two main standards for displaying formulas in the browser: Latex and MathML
I painfully long chose which technology to use. As a result, made several conclusions. I hope they will be useful to the community.
The main advantage of Latex in the brevity of the record. Otherwise, in my opinion , this format is inferior to MathML.
For example, the formula entry
in Latex it looks like this:\frac{(a+b )}{4} In MathML, the same thing would have been written much more cumbersome:
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> <mrow> <mn>4</mn> </mrow> </mfrac> </math> MathML is pure XML, from here a simpler parsing for own needs, if necessary.
MathML seemed more understandable and quickly mastered the format. Although this opinion is individual and controversial.
MathML is supported by most modern browsers, except Chrome, which refused to support this format, referring to the MathJax library. This means that in Firefox, for example, you do not need to connect additional libraries, the browser will parse and display the formula specified above without the help of third-party libraries.
“MathML” allows you to add a handful of useful additions to the formula. For example, it was vital for us to get a pop-up hint to certain values ​​of the formula, so that the employee could see where this value came from. For this MathML has a maction tag:
<maction actiontype="tooltip"> <mn mathsize="big">17 745 400</mn> <ms></ms> </maction> As a result, when you hover over the value, the user will see a tooltip:
Funny, but the most understandable documentation on the format seemed documentation Mozilla. I recommend it to those who will be poking around in this format: developer.mozilla.org/en-US/docs/Web/MathML/Element
Mathjax
MathML is good, but unfortunately, it is not supported by all browsers. There is a MathJax library that allows you to parse MathML into HTML, SVG, etc. She, by the way, parsit Latex rejected by me.
The library does a good job with parsing formulas, but it has drawbacks.
The largest, in my opinion, its volume is 32.9 Mb in compressed form. Of course, not everything will be given to the client when the formula is drawn, but by itself such an amount of js-library is annoying. We, for example, needed to distribute it to external customers.
Initially connecting the entire library and implementing the task, I randomly threw a bunch of folders out of it. The method of "spear", checking that nothing is broken. Size reduced to 16 Mb. Basically, I threw out folders with fonts and unnecessary output formats (for example, SVG).
I did not find competent documentation on reducing the volume of the library.
The library is quite difficult to learn. I was picking for a long time, disabling unnecessary chips in it. Here are the useful configuration settings that turned out to be useful:
First, we have each formula opened in a separate window, which is loaded asynchronously (via AJAX). Therefore, there is no need to load the library when the user has not clicked on the link. Something like this:
The library supports dynamic loading ( docs.mathjax.org/en/latest/dynamic.html is written in detail here). Relatively speaking, you need to dynamically add a library declaration to the “head” tag and only do this if the library has not been connected before:
if(typeof $('body').data('mathjax_loaded') == 'undefined' ) { // head $('body').data('mathjax_loaded', 'true') } else { MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } Dynamic library connection had problems with formula rendering. The formula was rendered only when the libraries were loaded in the first, with a second click and the opening of the window, the formula was not rendered. The construction that forced the rendering of formulas on the page helped:
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); The rendering of the formula is not instantaneous, so the user is better to show the preloader, for this there is a design:
mml2jax: {preview: [["img", {src: '/plugin_assets/kpi/images/loader.gif'}]]} Sometimes it's useful to zoom in:
HTML-CSS: { scale: 140 } If, after rendering the formula, you need to run some additional javascript, you can use the construction:
MathJax.Hub.Queue(function () { alert('Test'); }); To disable the additional menu that can be called by right-clicking the mouse and disable the zoom of the formula:
showMathMenu: false, menuSettings: { zoom: false } Two formulas, not one
Until recently, I was not abandoned by the idea of ​​parsing a mathematical formula according to which the actual calculation will be made in MathML format. That is, in the database I wanted to save one formula of the form:
31000.00 + (0.015*{"pattern": "imported_value", "id": "51"}/{"pattern": "imported_value", "id": "40"}) And the mathml-design is obtained from the initial formula:
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mn> {"pattern": "result"} </mn> <mo>=</mo> <maction actiontype="tooltip"> <mn>31 000</mn> <ms> </ms> </maction> <mo>+</mo> <mfrac> <mrow> <mn>0.015</mn> <mo>Ă—</mo> <maction actiontype="tooltip"> <mn mathsize="big">{"pattern": "imported_value", "id": "51"}</mn> <ms></ms> </maction> </mrow> <mrow> <maction actiontype="tooltip"> <mn mathsize="big">{"pattern": "imported_value", "id": "40"}</mn> <ms> </ms> </maction> </mrow> </mfrac> </mrow> </math> As a result, I concluded that this is impossibly difficult and not always justified. In a mathml formula there may be a bunch of elements that cannot be stored in a regular formula, for example, tooltips, color highlighting, etc. Currently, we save two formulas in the database, one for the direct calculation of the value, and another for the display to the user of the calculation system.
I try to write articles after being faced with difficulties I did not find a clear and quick solution to my problems. I think my specific article will be useful to someone.
Source: https://habr.com/ru/post/209126/
All Articles