Implement SVG rendering of equations in dcc.Graph and dcc.Markdown using MathJax v3

components/dash-core-components/.gitignore

@@ -19,6 +19,7 @@ venv/
 /build
 /dash_core_components
 dash_core_components_base/plotly.min.js
+dash_core_components_base/mathjax.js
 /deps
 /inst
 /man

components/dash-core-components/dash_core_components_base/__init__.py

@@ -48,6 +48,7 @@
     "graph",
     "highlight",
     "markdown",
+    "mathjax",
     "slider",
     "upload",
 ]

components/dash-core-components/package.json

@@ -23,7 +23,7 @@
     "test": "run-s -c lint test:intg test:pyimport",
     "test:intg": "pytest --nopercyfinalize --headless tests/integration",
     "test:pyimport": "python -m unittest tests/test_dash_import.py",
-    "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js",
+    "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js && cp node_modules/mathjax/es5/tex-svg.js dash_core_components_base/mathjax.js",
     "build:js": "webpack --mode production",
     "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json  && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist,DatePickerSingle,DatePickerRange,Input,Link --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components",
     "build": "run-s prepublishOnly build:js build:backends",
@@ -46,9 +46,10 @@
     "fast-isnumeric": "^1.1.4",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.4.0",
+    "mathjax": "^3.2.0",
     "moment": "^2.29.1",
     "node-polyfill-webpack-plugin": "^1.1.4",
-    "plotly.js-dist-min": "2.9.0",
+    "plotly.js-dist-min": "2.10.1",
     "prop-types": "^15.7.2",
     "ramda": "^0.27.1",
     "rc-slider": "^9.7.5",
@@ -60,6 +61,7 @@
     "react-resize-detector": "^6.7.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "remark-math": "^3.0.1",
     "uniqid": "^5.4.0"
   },
   "devDependencies": {

components/dash-core-components/src/components/Graph.react.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {asyncDecorator} from '@plotly/dash-component-plugins';
 import graph from '../utils/LazyLoader/graph';
 import plotly from '../utils/LazyLoader/plotly';
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 import {
     privatePropTypes,
     privateDefaultProps,
@@ -21,6 +22,10 @@ class PlotlyGraph extends Component {
     constructor(props) {
         super(props);
 
+        if (props.mathjax) {
+            PlotlyGraph._loadMathjax = true;
+        }
+
         this.state = {
             prependData: [],
             extendData: [],
@@ -120,7 +125,11 @@ class PlotlyGraph extends Component {
 }
 
 const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () =>
-    Promise.all([plotly(), graph()]).then(([, graph]) => graph)
+    Promise.all([
+        graph(),
+        plotly(),
+        PlotlyGraph._loadMathjax ? lazyLoadMathJax() : undefined,
+    ]).then(([graph]) => graph)
 );
 
 const ControlledPlotlyGraph = memo(props => {
@@ -266,6 +275,11 @@ PlotlyGraph.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * If true, loads mathjax v3 (tex-svg) into the page and use it in the graph
+     */
+    mathjax: PropTypes.bool,
+
     /**
      * Beta: If true, animate between updates using
      * plotly.js's `animate` function
@@ -574,6 +588,7 @@ PlotlyGraph.defaultProps = {
         frames: [],
     },
     responsive: 'auto',
+    mathjax: false,
     animate: false,
     animation_options: {
         frame: {

components/dash-core-components/src/components/Markdown.react.js

@@ -1,8 +1,8 @@
+import {asyncDecorator} from '@plotly/dash-component-plugins';
 import PropTypes from 'prop-types';
-import React, {Component, lazy, Suspense} from 'react';
+import React, {Component, Suspense} from 'react';
 import markdown from '../utils/LazyLoader/markdown';
-
-const RealDashMarkdown = lazy(markdown);
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -11,6 +11,14 @@ const RealDashMarkdown = lazy(markdown);
  * [react-markdown](https://rexxars.github.io/react-markdown/) under the hood.
  */
 export default class DashMarkdown extends Component {
+    constructor(props) {
+        super(props);
+
+        if (props.mathjax) {
+            DashMarkdown._loadMathjax = true;
+        }
+    }
+
     render() {
         return (
             <Suspense fallback={null}>
@@ -32,6 +40,11 @@ DashMarkdown.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * If true, loads mathjax v3 (tex-svg) into the page and use it in the markdown
+     */
+    mathjax: PropTypes.bool,
+
     /**
      * A boolean to control raw HTML escaping.
      * Setting HTML from code is risky because it's easy to
@@ -91,10 +104,18 @@ DashMarkdown.propTypes = {
 };
 
 DashMarkdown.defaultProps = {
+    mathjax: false,
     dangerously_allow_html: false,
     highlight_config: {},
     dedent: true,
 };
 
+const RealDashMarkdown = asyncDecorator(DashMarkdown, () =>
+    Promise.all([
+        markdown(),
+        DashMarkdown._loadMathjax ? lazyLoadMathJax() : undefined,
+    ]).then(([md]) => md)
+);
+
 export const propTypes = DashMarkdown.propTypes;
 export const defaultProps = DashMarkdown.defaultProps;

components/dash-core-components/src/fragments/Graph.react.js

@@ -1,3 +1,4 @@
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 import React, {Component} from 'react';
 // /build/withPolyfill for IE11 support - https://github.com/maslianok/react-resize-detector/issues/144
 import ResizeDetector from 'react-resize-detector/build/withPolyfill';
@@ -144,17 +145,21 @@ class PlotlyGraph extends Component {
 
     plot(props) {
         let {figure, config} = props;
-        const {animate, animation_options, responsive} = props;
+        const {animate, animation_options, responsive, mathjax} = props;
 
         const gd = this.gd.current;
         figure = props._dashprivate_transformFigure(figure, gd);
         config = props._dashprivate_transformConfig(config, gd);
 
+        const configClone = this.getConfig(config, responsive);
+        // add typesetMath | not exposed to the dash API
+        configClone.typesetMath = mathjax;
+
         const figureClone = {
             data: figure.data,
             layout: this.getLayout(figure.layout, responsive),
             frames: figure.frames,
-            config: this.getConfig(config, responsive),
+            config: configClone,
         };
 
         if (
@@ -176,32 +181,34 @@ class PlotlyGraph extends Component {
 
         gd.classList.add('dash-graph--pending');
 
-        return Plotly.react(gd, figureClone).then(() => {
-            const gd = this.gd.current;
+        return lazyLoadMathJax(mathjax)
+            .then(() => Plotly.react(gd, figureClone))
+            .then(() => {
+                const gd = this.gd.current;
 
-            // double-check gd hasn't been unmounted
-            if (!gd) {
-                return;
-            }
+                // double-check gd hasn't been unmounted
+                if (!gd) {
+                    return;
+                }
 
-            gd.classList.remove('dash-graph--pending');
+                gd.classList.remove('dash-graph--pending');
 
-            // in case we've made a new DOM element, transfer events
-            if (this._hasPlotted && gd !== this._prevGd) {
-                if (this._prevGd && this._prevGd.removeAllListeners) {
-                    this._prevGd.removeAllListeners();
-                    Plotly.purge(this._prevGd);
+                // in case we've made a new DOM element, transfer events
+                if (this._hasPlotted && gd !== this._prevGd) {
+                    if (this._prevGd && this._prevGd.removeAllListeners) {
+                        this._prevGd.removeAllListeners();
+                        Plotly.purge(this._prevGd);
+                    }
+                    this._hasPlotted = false;
                 }
-                this._hasPlotted = false;
-            }
 
-            if (!this._hasPlotted) {
-                this.bindEvents();
-                this.graphResize(true);
-                this._hasPlotted = true;
-                this._prevGd = gd;
-            }
-        });
+                if (!this._hasPlotted) {
+                    this.bindEvents();
+                    this.graphResize(true);
+                    this._hasPlotted = true;
+                    this._prevGd = gd;
+                }
+            });
     }
 
     mergeTraces(props, dataKey, plotlyFnKey) {
@@ -426,6 +433,7 @@ class PlotlyGraph extends Component {
             return;
         }
         if (
+            this.props.mathjax !== nextProps.mathjax ||
             this.props.figure !== nextProps.figure ||
             this.props._dashprivate_transformConfig !==
                 nextProps._dashprivate_transformConfig ||
@@ -449,7 +457,10 @@ class PlotlyGraph extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.id !== this.props.id) {
+        if (
+            prevProps.id !== this.props.id ||
+            prevProps.mathjax !== this.props.mathjax
+        ) {
             this.plot(this.props);
         }
     }

components/dash-core-components/src/fragments/Markdown.react.js

@@ -2,7 +2,9 @@ import React, {Component} from 'react';
 import {mergeDeepRight, pick, type} from 'ramda';
 import JsxParser from 'react-jsx-parser';
 import Markdown from 'react-markdown';
+import RemarkMath from 'remark-math';
 
+import Math from './Math.react';
 import MarkdownHighlighter from '../utils/MarkdownHighlighter';
 import {propTypes, defaultProps} from '../components/Markdown.react';
 
@@ -85,6 +87,7 @@ export default class DashMarkdown extends Component {
             highlight_config,
             loading_state,
             dangerously_allow_html,
+            mathjax,
             children,
             dedent,
         } = this.props;
@@ -131,7 +134,16 @@ export default class DashMarkdown extends Component {
                 <Markdown
                     source={displayText}
                     escapeHtml={!dangerously_allow_html}
+                    plugins={mathjax ? [RemarkMath] : []}
                     renderers={{
+                        math: props => (
+                            <Math tex={props.value} inline={false} />
+                        ),
+
+                        inlineMath: props => (
+                            <Math tex={props.value} inline={true} />
+                        ),
+
                         html: props =>
                             props.escapeHtml ? (
                                 props.value