MathML in Tree Node

Webix JS
1

I am unable to make this work. I am using the MathJax library to embed math expressions into my Webix project. I want to get certain tree nodes to show the math expressions capable with MathJax.

2

Yep, it is a bit tricky.

Component repaints self on item expanding so you need to call Typeset from each onStoreUpdated event

http://webix.com/snippet/bd929b21

Also, the MathJax_Display style was changed to inline, as it is mandatory for in-tree text.

3

Very good thanks!

4

I am working on this, and it is partially working. The rendering is an issue, as the math sometimes shows the raw value instead of the expression. I think I need to catch all events where the tree node rendering happens.

Can we change the CSS to only adjust the tree node height for the math expressions? I don’t need every tree node at that height, just the math nodes.

Is there a way to use $$(‘tree’).attachEvent(‘data->onStoreUpdated’,function(){…}); instead of how you are doing it? I want to put all the logic in a logic.js file instead of the view.js.

5

I think I need to catch all events where the tree node rendering happens

You can try to use onAfterRender event

Is there a way to use $$(‘tree’).attachEvent(‘data->onStoreUpdated’,function(){…});

Yep, it will be

$$('tree').data.attachEvent('onStoreUpdated',function(){
   MathJax.Hub.Typeset($$('tree').$view);
});
6

Can we change the CSS to only adjust the tree node height for the math expressions

Check
http://webix.com/snippet/afe55e04

7

Very good.

8

I am surprised that works as line-height: auto is not considered valid CSS. ‘auto’ is not a valid property according to WebStorm, but it does work.

9

Yep, it was my typo.
Actually line-height style is not necessary in the above sample.
The key line is “height:auto;”

10

I do not understand why onStoreUpdated() is needed. The nodes are already in the tree. There is no insert, update, delete event occurring (id, object, and mode are all null).

11

Also, when I click on a MathJax tree node, it drops back to the raw math expression. How can I preserve the MathJax render when a node is clicked?

12

MathJax converts text to Math expressions once during the initial page rendering. In case of tree component, new item appears on page only when some branch expanded and we need to run MathJax manually to convert them from text tom expressions. That is why the onStoreUpdated event is necessary.

As for selection, it possible to fix it partially, but result is still bad
http://webix.com/snippet/edff4744

13

If we can’t get it to render properly, my backup plan will be to store a graphic of the math in the server and use that for the tree node.

14

Is there a way to at least disable the green highlighting of the node? Or, highlight the node (if I use a graphic) by putting a green border around the graphic?

15

Technically it possible to cache the once rendered values from MathJax, but it is not clear from their documentation how to retrieve result of math expression rendering in the sync. way.

Is there a way to at least disable the green highlighting of the node?

http://webix.com/snippet/aa5f93f0

16

I can store the math expression in a global variable. I am fine with that. Now I need to figure out how to cache the MathJax render like you said.

Thanks for the green border on the tree node selection.