Is it possible to add MathML to nodes in cytoscape.js?

Question

I'm struggling with adding some math to nodes in cytoscape.js. I'm able to do it by taking screenshots from latex, but these don't stretch well as they are rasterized images. Is there a way to use MathML within cytoscape.js?

Thank you

Answer 1

Yes!

Steps:

(1) Generate a SVG image for the MathML, using something like MathJax (https://www.mathjax.org/)

(2) Specify the SVG image as a background-image for the node

Tip: You will probably want to use a function mapper in your stylesheet and use a caching mechanism (e.g. lodash) to make it faster (or else you'll be generating MathML SVGs all the time), e.g. in the stylesheet:

...

{
  selector: 'node',
  css: {
    'background-clip': 'none', // image can go beyond node shape
    'background-image': _.memoize( function( ele ){
      // where you specify generateMathMlSvg() using MathJax or similar

      // and getFormula = function( ele ){ return ele.data('formula'); }
      // or similar from node data

      return 'data:image/svg+xml;utf8,' + generateMathMlSvg( getFormula(ele) );
    }, getFormula )
  }
}
...